diff --git a/.changeset/config.json b/.changeset/config.json index 5eeee38e..fe747010 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,5 +6,8 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": [] + "ignore": [], + "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { + "onlyUpdatePeerDependentsWhenOutOfRange": true + } } diff --git a/.changeset/early-poets-enjoy.md b/.changeset/early-poets-enjoy.md deleted file mode 100644 index 04fe3d5e..00000000 --- a/.changeset/early-poets-enjoy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@redux-devtools/cli': major ---- - -Dropped support for Node.js 14. diff --git a/.changeset/plenty-gifts-watch.md b/.changeset/plenty-gifts-watch.md deleted file mode 100644 index 51f97d20..00000000 --- a/.changeset/plenty-gifts-watch.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'remotedev-redux-devtools-extension': minor -'@redux-devtools/inspector-monitor': minor ---- - -Option to sort State Tree keys alphabetically -Option to disable collapsing of object keys diff --git a/.changeset/rude-zebras-smell.md b/.changeset/rude-zebras-smell.md deleted file mode 100644 index 73eb0413..00000000 --- a/.changeset/rude-zebras-smell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@redux-devtools/inspector-monitor': patch ---- - -Move @types/redux-devtools-themes to dependencies diff --git a/.gitattributes b/.gitattributes index 83afa0ab..6313b56c 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,14 +1 @@ -*.js text eol=lf -*.jsx text eol=lf -*.ts text eol=lf -*.tsx text eol=lf -*.json text eol=lf -*.css text eol=lf -*.html text eol=lf -*.md text eol=lf -*.yml text eol=lf -*.graphql text eol=lf -.eslintrc text eol=lf -.prettierrc text eol=lf -.babelrc text eol=lf -.stylelintrc text eol=lf +* text=auto eol=lf diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index cadd9bb3..3b1538dd 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -11,12 +11,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - - uses: nrwl/nx-set-shas@v3 + - uses: nrwl/nx-set-shas@v4 - uses: pnpm/action-setup@v2 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: 'lts/*' cache: 'pnpm' @@ -29,6 +29,6 @@ jobs: - name: Lint run: pnpm run lint:all - name: Test - uses: GabrielBB/xvfb-action@v1 + uses: coactions/setup-xvfb@v1 with: run: pnpm run test:all diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 70ae909c..3f3ac63f 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -13,7 +13,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repo - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 @@ -21,7 +21,7 @@ jobs: - uses: pnpm/action-setup@v2 - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: 'lts/*' cache: 'pnpm' @@ -40,19 +40,19 @@ jobs: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - name: Archive Chrome Extension - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: chrome path: extension/chrome/dist - name: Archive Edge Extension - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: edge path: extension/edge/dist - name: Archive Firefox Extension - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: firefox path: extension/firefox/dist diff --git a/.gitignore b/.gitignore index 274e387a..2df6ebc3 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ coverage .idea .eslintcache !packages/redux-devtools-slider-monitor/examples/todomvc/dist/index.html +.nx/cache diff --git a/eslintrc.ts.base.json b/eslintrc.ts.base.json index 6e4e649f..cdd3764d 100644 --- a/eslintrc.ts.base.json +++ b/eslintrc.ts.base.json @@ -3,15 +3,29 @@ "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", "prettier" ], "rules": { "@typescript-eslint/no-unsafe-return": "off", "@typescript-eslint/no-unsafe-assignment": "off", "@typescript-eslint/no-unsafe-call": "off", - "@typescript-eslint/no-unsafe-member-access": "off" + "@typescript-eslint/no-unsafe-member-access": "off", + "@typescript-eslint/prefer-optional-chain": "off", + "@typescript-eslint/no-base-to-string": "off", + "@typescript-eslint/consistent-indexed-object-style": "off", + "@typescript-eslint/prefer-nullish-coalescing": "off", + "@typescript-eslint/consistent-type-definitions": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/prefer-for-of": "off", + "@typescript-eslint/non-nullable-type-assertion-style": "off", + "@typescript-eslint/class-literal-property-style": "off", + "@typescript-eslint/no-redundant-type-constituents": "off", + "@typescript-eslint/prefer-string-starts-ends-with": "off", + "@typescript-eslint/no-duplicate-type-constituents": "off", + "@typescript-eslint/array-type": "off", + "@typescript-eslint/prefer-function-type": "off" } } diff --git a/eslintrc.ts.jest.base.json b/eslintrc.ts.jest.base.json index cbde457e..8a8cde2d 100644 --- a/eslintrc.ts.jest.base.json +++ b/eslintrc.ts.jest.base.json @@ -2,9 +2,8 @@ "plugins": ["jest"], "extends": [ "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", "plugin:jest/recommended", "plugin:jest/style", "prettier" @@ -13,6 +12,21 @@ "@typescript-eslint/no-unsafe-return": "off", "@typescript-eslint/no-unsafe-assignment": "off", "@typescript-eslint/no-unsafe-call": "off", - "@typescript-eslint/no-unsafe-member-access": "off" + "@typescript-eslint/no-unsafe-member-access": "off", + "@typescript-eslint/prefer-optional-chain": "off", + "@typescript-eslint/no-base-to-string": "off", + "@typescript-eslint/consistent-indexed-object-style": "off", + "@typescript-eslint/prefer-nullish-coalescing": "off", + "@typescript-eslint/consistent-type-definitions": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/prefer-for-of": "off", + "@typescript-eslint/non-nullable-type-assertion-style": "off", + "@typescript-eslint/class-literal-property-style": "off", + "@typescript-eslint/no-redundant-type-constituents": "off", + "@typescript-eslint/prefer-string-starts-ends-with": "off", + "@typescript-eslint/no-duplicate-type-constituents": "off", + "@typescript-eslint/array-type": "off", + "@typescript-eslint/prefer-function-type": "off" } } diff --git a/eslintrc.ts.react.base.json b/eslintrc.ts.react.base.json index e10a705c..f17dc31c 100644 --- a/eslintrc.ts.react.base.json +++ b/eslintrc.ts.react.base.json @@ -8,9 +8,8 @@ "plugins": ["@typescript-eslint", "react"], "extends": [ "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", "plugin:react/recommended", "plugin:react-hooks/recommended", "prettier" @@ -32,6 +31,21 @@ "attributes": false } } - ] + ], + "@typescript-eslint/prefer-optional-chain": "off", + "@typescript-eslint/no-base-to-string": "off", + "@typescript-eslint/consistent-indexed-object-style": "off", + "@typescript-eslint/prefer-nullish-coalescing": "off", + "@typescript-eslint/consistent-type-definitions": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/prefer-for-of": "off", + "@typescript-eslint/non-nullable-type-assertion-style": "off", + "@typescript-eslint/class-literal-property-style": "off", + "@typescript-eslint/no-redundant-type-constituents": "off", + "@typescript-eslint/prefer-string-starts-ends-with": "off", + "@typescript-eslint/no-duplicate-type-constituents": "off", + "@typescript-eslint/array-type": "off", + "@typescript-eslint/prefer-function-type": "off" } } diff --git a/eslintrc.ts.react.jest.base.json b/eslintrc.ts.react.jest.base.json index ebc4e66f..80fbfee6 100644 --- a/eslintrc.ts.react.jest.base.json +++ b/eslintrc.ts.react.jest.base.json @@ -2,9 +2,8 @@ "plugins": ["jest"], "extends": [ "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jest/recommended", @@ -15,6 +14,21 @@ "@typescript-eslint/no-unsafe-return": "off", "@typescript-eslint/no-unsafe-assignment": "off", "@typescript-eslint/no-unsafe-call": "off", - "@typescript-eslint/no-unsafe-member-access": "off" + "@typescript-eslint/no-unsafe-member-access": "off", + "@typescript-eslint/prefer-optional-chain": "off", + "@typescript-eslint/no-base-to-string": "off", + "@typescript-eslint/consistent-indexed-object-style": "off", + "@typescript-eslint/prefer-nullish-coalescing": "off", + "@typescript-eslint/consistent-type-definitions": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/prefer-for-of": "off", + "@typescript-eslint/non-nullable-type-assertion-style": "off", + "@typescript-eslint/class-literal-property-style": "off", + "@typescript-eslint/no-redundant-type-constituents": "off", + "@typescript-eslint/prefer-string-starts-ends-with": "off", + "@typescript-eslint/no-duplicate-type-constituents": "off", + "@typescript-eslint/array-type": "off", + "@typescript-eslint/prefer-function-type": "off" } } diff --git a/extension/CHANGELOG.md b/extension/CHANGELOG.md index a769ae48..88b0b2dc 100644 --- a/extension/CHANGELOG.md +++ b/extension/CHANGELOG.md @@ -1,5 +1,87 @@ # remotedev-redux-devtools-extension +## 3.1.9 + +### Patch Changes + +- Updated dependencies [bbb1a40] + - react-json-tree@0.19.0 + - @redux-devtools/slider-monitor@5.0.1 + - @redux-devtools/ui@1.3.2 + +## 3.1.8 + +### Patch Changes + +- 191d419: Convert d3 packages to ESM +- Updated dependencies [191d419] + - @redux-devtools/app@6.0.1 + +## 3.1.7 + +### Patch Changes + +- Updated dependencies [5cfe3e5] +- Updated dependencies [decc035] + - @redux-devtools/app@6.0.0 + - @redux-devtools/slider-monitor@5.0.0 + - @redux-devtools/core@4.0.0 + - @redux-devtools/utils@3.0.0 + +## 3.1.6 + +### Patch Changes + +- Updated dependencies [158ba2c] + - @redux-devtools/app@5.0.0 + +## 3.1.5 + +### Patch Changes + +- 65205f90: Replace Action with Action +- Updated dependencies [65205f90] + - @redux-devtools/app@4.0.1 + - @redux-devtools/core@3.13.2 + +## 3.1.4 + +### Patch Changes + +- Updated dependencies [e57bcb39] + - @redux-devtools/app@4.0.0 + +## 3.1.3 + +### Patch Changes + +- bca76009: Fix missing CSS for code editor + +## 3.1.2 + +### Patch Changes + +- 64ed81b0: Fix extension in Firefox and Chrome Incognito + +## 3.1.1 + +### Patch Changes + +- d18525b5: Increase min-width of popup +- Updated dependencies [57751ff9] + - @redux-devtools/app@3.0.0 + +## 3.1.0 + +### Minor Changes + +- d54adb76: Option to sort State Tree keys alphabetically + Option to disable collapsing of object keys + +### Patch Changes + +- @redux-devtools/app@2.2.2 + ## 3.0.19 ### Patch Changes diff --git a/extension/README.md b/extension/README.md index 1dea2a58..c591da9f 100644 --- a/extension/README.md +++ b/extension/README.md @@ -13,8 +13,8 @@ - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd); - or download `extension.zip` from [last releases](https://github.com/zalmoxisus/redux-devtools-extension/releases), unzip, open `chrome://extensions` url and turn on developer mode from top left and then click; on `Load Unpacked` and select the extracted folder for use -- or build it with `npm i && npm run build:extension` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./build/extension`; -- or run it in dev mode with `npm i && npm start` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./dev`. +- or build it with `npm i && npm run build:extension` and [load the extension's folder](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) `./build/extension`; +- or run it in dev mode with `npm i && npm start` and [load the extension's folder](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) `./dev`. ### 2. For Firefox diff --git a/extension/build.mjs b/extension/build.mjs new file mode 100644 index 00000000..86971a68 --- /dev/null +++ b/extension/build.mjs @@ -0,0 +1,71 @@ +import * as fs from 'node:fs'; +import * as esbuild from 'esbuild'; +import pug from 'pug'; + +const args = process.argv.slice(2); +const prod = !args.includes('--dev'); + +const commonEsbuildOptions = { + bundle: true, + logLevel: 'info', + outdir: 'dist', + minify: prod, + sourcemap: !prod, + define: { + 'process.env.NODE_ENV': prod ? '"production"' : '"development"', + 'process.env.BABEL_ENV': prod ? '"production"' : '"development"', + }, +}; + +await esbuild.build({ + ...commonEsbuildOptions, + entryPoints: [ + { out: 'background.bundle', in: 'src/background/index.ts' }, + { out: 'options.bundle', in: 'src/options/index.tsx' }, + { out: 'window.bundle', in: 'src/window/index.tsx' }, + { out: 'remote.bundle', in: 'src/remote/index.tsx' }, + { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' }, + { out: 'devtools.bundle', in: 'src/devtools/index.ts' }, + { out: 'content.bundle', in: 'src/contentScript/index.ts' }, + { out: 'page.bundle', in: 'src/pageScript/index.ts' }, + ...(prod ? [] : [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }]), + ], + loader: { + '.woff2': 'file', + }, +}); + +if (prod) { + await esbuild.build({ + ...commonEsbuildOptions, + entryPoints: [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }], + loader: { + '.js': 'text', + }, + }); +} + +console.log(); + +console.log('Creating HTML files...'); +const htmlFiles = ['devpanel', 'devtools', 'options', 'remote', 'window']; +for (const htmlFile of htmlFiles) { + fs.writeFileSync( + `dist/${htmlFile}.html`, + pug.renderFile(`src/${htmlFile}/${htmlFile}.pug`), + ); +} + +console.log('Copying manifest.json...'); +fs.copyFileSync('chrome/manifest.json', 'dist/manifest.json'); + +console.log('Copying assets...'); +fs.cpSync('src/assets', 'dist', { recursive: true }); + +console.log('Copying dist for each browser...'); +fs.cpSync('dist', 'chrome/dist', { recursive: true }); +fs.copyFileSync('chrome/manifest.json', 'chrome/dist/manifest.json'); +fs.cpSync('dist', 'edge/dist', { recursive: true }); +fs.copyFileSync('edge/manifest.json', 'edge/dist/manifest.json'); +fs.cpSync('dist', 'firefox/dist', { recursive: true }); +fs.copyFileSync('firefox/manifest.json', 'firefox/dist/manifest.json'); diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json index 78fca533..7369d6c8 100644 --- a/extension/chrome/manifest.json +++ b/extension/chrome/manifest.json @@ -1,5 +1,5 @@ { - "version": "3.0.19", + "version": "3.1.6", "name": "Redux DevTools", "description": "Redux DevTools for debugging application's state changes.", "homepage_url": "https://github.com/reduxjs/redux-devtools", diff --git a/extension/docs/API/Arguments.md b/extension/docs/API/Arguments.md index 4497d4eb..1589f841 100644 --- a/extension/docs/API/Arguments.md +++ b/extension/docs/API/Arguments.md @@ -5,10 +5,10 @@ Use with - `window.__REDUX_DEVTOOLS_EXTENSION__([options])` - `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()` - `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])` -- `redux-devtools-extension` npm package: +- `@redux-devtools/extension` npm package: ```js -import { composeWithDevTools } from 'redux-devtools-extension'; +import { composeWithDevTools } from '@redux-devtools/extension'; const composeEnhancers = composeWithDevTools(options); const store = createStore( diff --git a/extension/edge/manifest.json b/extension/edge/manifest.json index da3c2ea3..00fb14e6 100644 --- a/extension/edge/manifest.json +++ b/extension/edge/manifest.json @@ -1,5 +1,5 @@ { - "version": "3.0.19", + "version": "3.1.6", "name": "Redux DevTools", "description": "Redux DevTools for debugging application's state changes.", "homepage_url": "https://github.com/reduxjs/redux-devtools", diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json index 9c52efc8..c19b76e8 100644 --- a/extension/firefox/manifest.json +++ b/extension/firefox/manifest.json @@ -1,5 +1,5 @@ { - "version": "3.0.19", + "version": "3.1.6", "name": "Redux DevTools", "manifest_version": 2, "description": "Redux Developer Tools for debugging application state changes.", diff --git a/extension/jest.config.js b/extension/jest.config.js index e48385f6..2c331668 100644 --- a/extension/jest.config.js +++ b/extension/jest.config.js @@ -6,6 +6,6 @@ module.exports = { '\\.css$': '/test/__mocks__/styleMock.ts', }, transformIgnorePatterns: [ - 'node_modules/(?!.pnpm|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)', + 'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)', ], }; diff --git a/extension/package.json b/extension/package.json index f536fc5c..7cab99a3 100644 --- a/extension/package.json +++ b/extension/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "remotedev-redux-devtools-extension", - "version": "3.0.19", + "version": "3.1.9", "description": "Redux Developer Tools for debugging application state changes.", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension", "license": "MIT", @@ -11,12 +11,8 @@ "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "start": "webpack --env development --watch", - "build": "pnpm run build:extension && pnpm run build:chrome && pnpm run build:edge && pnpm run build:firefox", - "build:extension": "webpack --env production && webpack --config wrap.webpack.config.js", - "build:chrome": "cpy . ../chrome/dist --cwd dist && cpy manifest.json dist --cwd chrome", - "build:edge": "cpy . ../edge/dist --cwd dist && cpy manifest.json dist --cwd edge", - "build:firefox": "cpy . ../firefox/dist --cwd dist && cpy manifest.json dist --cwd firefox", + "build": "pnpm run build:extension && pnpm run type-check", + "build:extension": "node build.mjs", "build:examples": "babel-node examples/buildAll.js", "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist", "test:app": "cross-env BABEL_ENV=test jest test/app", @@ -28,69 +24,61 @@ }, "dependencies": { "@babel/polyfill": "^7.12.1", - "@redux-devtools/app": "^2.2.1", - "@redux-devtools/core": "^3.13.0", + "@emotion/react": "^11.11.4", + "@redux-devtools/app": "^6.0.1", + "@redux-devtools/core": "^4.0.0", "@redux-devtools/instrument": "^2.1.0", "@redux-devtools/serialize": "^0.4.1", - "@redux-devtools/slider-monitor": "^4.0.0", - "@redux-devtools/ui": "^1.3.0", - "@redux-devtools/utils": "^2.0.0", - "@types/jsan": "^3.1.2", + "@redux-devtools/slider-monitor": "^5.0.1", + "@redux-devtools/ui": "^1.3.2", + "@redux-devtools/utils": "^3.0.0", + "@types/jsan": "^3.1.5", "jsan": "^3.1.14", "localforage": "^1.10.0", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^4.10.1", + "react-icons": "^5.0.1", "react-is": "^18.2.0", - "react-json-tree": "^0.18.0", - "react-redux": "^8.1.2", + "react-json-tree": "^0.19.0", + "react-redux": "^8.1.3", "redux": "^4.2.1", "redux-persist": "^6.0.0", "styled-components": "^5.3.11" }, "devDependencies": { - "@babel/core": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@babel/register": "^7.22.5", - "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^14.0.0", - "@types/chrome": "^0.0.243", - "@types/lodash": "^4.14.196", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/styled-components": "^5.1.26", - "babel-loader": "^9.1.3", - "chromedriver": "^114.0.3", - "copy-webpack-plugin": "^11.0.0", - "cpy-cli": "^5.0.0", + "@babel/core": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@babel/register": "^7.23.7", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^14.2.2", + "@types/chrome": "^0.0.263", + "@types/lodash": "^4.17.0", + "@types/react": "^18.2.72", + "@types/react-dom": "^18.2.22", + "@types/styled-components": "^5.1.34", + "chromedriver": "^118.0.1", "cross-env": "^7.0.3", - "css-loader": "^6.8.1", - "electron": "^25.4.0", - "eslint": "^8.46.0", + "electron": "^27.3.7", + "esbuild": "^0.20.2", + "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", - "eslint-plugin-import": "^2.28.0", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.33.1", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "file-loader": "^6.2.0", - "fork-ts-checker-webpack-plugin": "^8.0.0", - "immutable": "^4.3.2", - "jest": "^29.6.2", - "jest-environment-jsdom": "^29.6.2", - "pug-html-loader": "^1.1.5", - "raw-loader": "^4.0.2", - "react-transform-catch-errors": "^1.0.2", - "react-transform-hmr": "^1.0.4", - "rimraf": "^5.0.1", - "selenium-webdriver": "^4.11.1", + "immutable": "^4.3.5", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "pug": "^3.0.2", + "rimraf": "^5.0.5", + "selenium-webdriver": "^4.18.1", "sinon-chrome": "^3.0.1", - "style-loader": "^3.3.3", - "ts-jest": "^29.1.1", - "typescript": "~5.1.6", - "webpack": "^5.88.2", + "ts-jest": "^29.1.2", + "typescript": "~5.3.3", + "webpack": "^5.91.0", "webpack-cli": "^5.1.4" } } diff --git a/extension/src/background/index.ts b/extension/src/background/index.ts index c7236e2e..0fc24ea7 100644 --- a/extension/src/background/index.ts +++ b/extension/src/background/index.ts @@ -1,3 +1,4 @@ +import '../chromeApiMock'; import { Store } from 'redux'; import configureStore, { BackgroundAction } from './store/backgroundStore'; import openDevToolsWindow, { DevToolsPosition } from './openWindow'; diff --git a/extension/src/background/store/apiMiddleware.ts b/extension/src/background/store/apiMiddleware.ts index f533943b..480f6682 100644 --- a/extension/src/background/store/apiMiddleware.ts +++ b/extension/src/background/store/apiMiddleware.ts @@ -84,7 +84,7 @@ export interface NAAction { readonly id: string | number; } -interface InitMessage> { +interface InitMessage> { readonly type: 'INIT'; readonly payload: string; instanceId: string; @@ -137,7 +137,7 @@ interface SerializedActionMessage { readonly nextActionId: number; } -interface SerializedStateMessage> { +interface SerializedStateMessage> { readonly type: 'STATE'; readonly payload: Omit< LiftedState, @@ -151,7 +151,7 @@ interface SerializedStateMessage> { readonly committedState: boolean; } -type UpdateStateRequest> = +type UpdateStateRequest> = | InitMessage | LiftedMessage | SerializedPartialStateMessage @@ -163,7 +163,7 @@ export interface EmptyUpdateStateAction { readonly type: typeof UPDATE_STATE; } -interface UpdateStateAction> { +interface UpdateStateAction> { readonly type: typeof UPDATE_STATE; request: UpdateStateRequest; readonly id: string | number; @@ -177,7 +177,7 @@ export type TabMessage = | ImportAction | ActionAction | ExportAction; -export type PanelMessage> = +export type PanelMessage> = | NAAction | ErrorMessage | UpdateStateAction @@ -192,7 +192,7 @@ type TabPort = Omit & { postMessage: (message: TabMessage) => void; }; type PanelPort = Omit & { - postMessage: >( + postMessage: >( message: PanelMessage, ) => void; }; @@ -214,7 +214,7 @@ const connections: { const chunks: { [instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors< unknown, - Action + Action >; } = {}; let monitors = 0; @@ -223,13 +223,13 @@ let isMonitored = false; const getId = (sender: chrome.runtime.MessageSender, name?: string) => sender.tab ? sender.tab.id! : name || sender.id!; -type MonitorAction> = +type MonitorAction> = | NAAction | ErrorMessage | UpdateStateAction | SetPersistAction; -function toMonitors>( +function toMonitors>( action: MonitorAction, tabId?: string | number, verbose?: boolean, @@ -387,14 +387,14 @@ export type SingleMessage = | OpenOptionsMessage | GetOptionsMessage; -type BackgroundStoreMessage> = +type BackgroundStoreMessage> = | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance | SplitMessage | SingleMessage; type BackgroundStoreResponse = { readonly options: Options }; // Receive messages from content scripts -function messaging>( +function messaging>( request: BackgroundStoreMessage, sender: chrome.runtime.MessageSender, sendResponse?: (response?: BackgroundStoreResponse) => void, @@ -508,7 +508,7 @@ function disconnect( }; } -function onConnect>(port: chrome.runtime.Port) { +function onConnect>(port: chrome.runtime.Port) { let id: number | string; let listener; diff --git a/extension/src/contentScript/index.ts b/extension/src/contentScript/index.ts index 287ce228..b9894ab3 100644 --- a/extension/src/contentScript/index.ts +++ b/extension/src/contentScript/index.ts @@ -1,3 +1,4 @@ +import '../chromeApiMock'; import { injectOptions, getOptionsFromBg, @@ -91,18 +92,18 @@ export type ContentScriptToPageScriptMessage = | ExportAction | UpdateAction; -interface ImportStatePayload> { +interface ImportStatePayload> { readonly type: 'IMPORT_STATE'; readonly nextLiftedState: LiftedState | readonly A[]; readonly preloadedState?: S; } -interface ImportStateDispatchAction> { +interface ImportStateDispatchAction> { readonly type: 'DISPATCH'; readonly payload: ImportStatePayload; } -export type ListenerMessage> = +export type ListenerMessage> = | StartAction | StopAction | DispatchAction @@ -203,7 +204,7 @@ export type SplitMessage = | SplitMessageChunk | SplitMessageEnd; -function tryCatch>( +function tryCatch>( fn: ( args: | PageScriptToContentScriptMessageWithoutDisconnect @@ -263,24 +264,24 @@ interface InitInstanceContentScriptToBackgroundMessage { readonly instanceId: number; } -interface RelayMessage> { +interface RelayMessage> { readonly name: 'RELAY'; readonly message: | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance | SplitMessage; } -export type ContentScriptToBackgroundMessage> = +export type ContentScriptToBackgroundMessage> = | InitInstanceContentScriptToBackgroundMessage | RelayMessage; -function postToBackground>( +function postToBackground>( message: ContentScriptToBackgroundMessage, ) { bg!.postMessage(message); } -function send>( +function send>( message: | PageScriptToContentScriptMessageWithoutDisconnect | SplitMessage, @@ -295,7 +296,7 @@ function send>( } // Resend messages from the page to the background script -function handleMessages>( +function handleMessages>( event: MessageEvent>, ) { if (!isAllowed()) return; diff --git a/extension/src/devpanel/devpanel.pug b/extension/src/devpanel/devpanel.pug index 4aa1268d..bf5105d3 100644 --- a/extension/src/devpanel/devpanel.pug +++ b/extension/src/devpanel/devpanel.pug @@ -12,4 +12,5 @@ html body #root + link(href='/devpanel.bundle.css', rel='stylesheet') script(src='/devpanel.bundle.js') diff --git a/extension/src/devpanel/index.tsx b/extension/src/devpanel/index.tsx index 3c132940..546aa3a6 100644 --- a/extension/src/devpanel/index.tsx +++ b/extension/src/devpanel/index.tsx @@ -1,3 +1,4 @@ +import '../chromeApiMock'; import React, { CSSProperties, ReactNode } from 'react'; import { createRoot, Root } from 'react-dom/client'; import { Provider } from 'react-redux'; @@ -6,7 +7,6 @@ import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app'; import App from '../app/App'; import configureStore from './store/panelStore'; -import './devpanel.pug'; import { Action, Store } from 'redux'; import type { PanelMessage } from '../background/store/apiMiddleware'; import type { StoreStateWithoutSocket } from './store/panelReducer'; @@ -96,7 +96,7 @@ function init(id: number) { name: id ? id.toString() : undefined, }); bgConnection.onMessage.addListener( - >(message: PanelMessage) => { + >(message: PanelMessage) => { if (message.type === 'NA') { if (message.id === id) renderNA(); else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id }); diff --git a/extension/src/devpanel/store/panelReducer.ts b/extension/src/devpanel/store/panelReducer.ts index 568a080f..9dc14c71 100644 --- a/extension/src/devpanel/store/panelReducer.ts +++ b/extension/src/devpanel/store/panelReducer.ts @@ -12,6 +12,8 @@ import { ReportsState, section, SectionState, + StateTreeSettings, + stateTreeSettings, StoreAction, theme, ThemeState, @@ -25,6 +27,7 @@ export interface StoreStateWithoutSocket { readonly instances: InstancesState; readonly reports: ReportsState; readonly notification: NotificationState; + readonly stateTreeSettings: StateTreeSettings; } const rootReducer: Reducer = @@ -36,6 +39,7 @@ const rootReducer: Reducer = section, theme, connection, + stateTreeSettings, }); export default rootReducer; diff --git a/extension/src/devtools/index.ts b/extension/src/devtools/index.ts index b72ecaa4..202e6c97 100644 --- a/extension/src/devtools/index.ts +++ b/extension/src/devtools/index.ts @@ -1,5 +1,3 @@ -import './devtools.pug'; - function createPanel(url: string) { chrome.devtools.panels.create( 'Redux', diff --git a/extension/src/options/index.tsx b/extension/src/options/index.tsx index 181fa1b1..2e0fd7a4 100644 --- a/extension/src/options/index.tsx +++ b/extension/src/options/index.tsx @@ -1,10 +1,9 @@ +import '../chromeApiMock'; import React from 'react'; import { createRoot } from 'react-dom/client'; import OptionsComponent from './Options'; import { Options } from './syncOptions'; -import './options.pug'; - chrome.runtime.getBackgroundPage((background) => { const syncOptions = background!.syncOptions; diff --git a/extension/src/options/syncOptions.ts b/extension/src/options/syncOptions.ts index 7f5ac82b..4b51685f 100644 --- a/extension/src/options/syncOptions.ts +++ b/extension/src/options/syncOptions.ts @@ -62,13 +62,13 @@ const migrateOldOptions = (oldOptions: OldOrNewOptions): Options => ({ ? oldOptions.filter && oldOptions.whitelist.length > 0 ? FilterState.ALLOWLIST_SPECIFIC : oldOptions.filter - ? FilterState.DENYLIST_SPECIFIC - : FilterState.DO_NOT_FILTER + ? FilterState.DENYLIST_SPECIFIC + : FilterState.DO_NOT_FILTER : oldOptions.filter === 'WHITELIST_SPECIFIC' - ? FilterState.ALLOWLIST_SPECIFIC - : oldOptions.filter === 'BLACKLIST_SPECIFIC' - ? FilterState.DENYLIST_SPECIFIC - : oldOptions.filter, + ? FilterState.ALLOWLIST_SPECIFIC + : oldOptions.filter === 'BLACKLIST_SPECIFIC' + ? FilterState.DENYLIST_SPECIFIC + : oldOptions.filter, }); const get = (callback: (options: Options) => void) => { diff --git a/extension/src/pageScript/Monitor.ts b/extension/src/pageScript/Monitor.ts index a6eac428..f2d9d79c 100644 --- a/extension/src/pageScript/Monitor.ts +++ b/extension/src/pageScript/Monitor.ts @@ -8,7 +8,7 @@ declare global { } } -export default class Monitor> { +export default class Monitor> { update: ( liftedState?: LiftedState | undefined, libConfig?: LibConfig, diff --git a/extension/src/pageScript/api/filters.ts b/extension/src/pageScript/api/filters.ts index 7410ae38..f60ca14d 100644 --- a/extension/src/pageScript/api/filters.ts +++ b/extension/src/pageScript/api/filters.ts @@ -21,7 +21,7 @@ export const noFiltersApplied = (localFilter: LocalFilter | undefined) => !window.devToolsOptions.filter || window.devToolsOptions.filter === FilterState.DO_NOT_FILTER); -export function isFiltered>( +export function isFiltered>( action: A | string, localFilter: LocalFilter | undefined, ) { @@ -41,7 +41,7 @@ export function isFiltered>( ); } -function filterActions>( +function filterActions>( actionsById: { [p: number]: PerformAction }, actionSanitizer: ((action: A, id: number) => A) | undefined, ): { [p: number]: PerformAction } { @@ -63,7 +63,7 @@ function filterStates( })); } -export function filterState>( +export function filterState>( state: LiftedState, localFilter: LocalFilter | undefined, stateSanitizer: ((state: S, index: number) => S) | undefined, @@ -120,7 +120,7 @@ export function filterState>( }; } -export interface PartialLiftedState> { +export interface PartialLiftedState> { readonly actionsById: { [actionId: number]: PerformAction }; readonly computedStates: { state: S; error?: string }[]; readonly stagedActionIds: readonly number[]; @@ -129,16 +129,16 @@ export interface PartialLiftedState> { readonly committedState?: S; } -export function startingFrom>( +export function startingFrom>( sendingActionId: number, state: LiftedState, localFilter: LocalFilter | undefined, stateSanitizer: ((state: S, index: number) => S) | undefined, actionSanitizer: - | (>(action: A, id: number) => A) + | (>(action: A, id: number) => A) | undefined, predicate: - | (>(state: S, action: A) => boolean) + | (>(state: S, action: A) => boolean) | undefined, ): LiftedState | PartialLiftedState | undefined { const stagedActionIds = state.stagedActionIds; diff --git a/extension/src/pageScript/api/importState.ts b/extension/src/pageScript/api/importState.ts index 319a7008..0fe648f0 100644 --- a/extension/src/pageScript/api/importState.ts +++ b/extension/src/pageScript/api/importState.ts @@ -30,7 +30,7 @@ interface ParsedSerializedLiftedState { readonly preloadedState?: string; } -export default function importState>( +export default function importState>( state: string | undefined, { serialize }: Config, ) { diff --git a/extension/src/pageScript/api/index.ts b/extension/src/pageScript/api/index.ts index 7292718b..86eb2756 100644 --- a/extension/src/pageScript/api/index.ts +++ b/extension/src/pageScript/api/index.ts @@ -115,7 +115,7 @@ interface DisconnectMessage { readonly source: typeof source; } -interface InitMessage> { +interface InitMessage> { readonly type: 'INIT'; readonly payload: string; readonly instanceId: number; @@ -161,7 +161,7 @@ interface SerializedActionMessage { readonly nextActionId?: number; } -interface SerializedStateMessage> { +interface SerializedStateMessage> { readonly type: 'STATE'; readonly payload: Omit< LiftedState, @@ -183,7 +183,7 @@ interface OpenMessage { export type PageScriptToContentScriptMessageForwardedToMonitors< S, - A extends Action, + A extends Action, > = | InitMessage | LiftedMessage @@ -194,7 +194,7 @@ export type PageScriptToContentScriptMessageForwardedToMonitors< export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance< S, - A extends Action, + A extends Action, > = | PageScriptToContentScriptMessageForwardedToMonitors | ErrorMessage @@ -204,17 +204,17 @@ export type PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance< export type PageScriptToContentScriptMessageWithoutDisconnect< S, - A extends Action, + A extends Action, > = | PageScriptToContentScriptMessageWithoutDisconnectOrInitInstance | InitInstancePageScriptToContentScriptMessage | InitInstanceMessage; -export type PageScriptToContentScriptMessage> = +export type PageScriptToContentScriptMessage> = | PageScriptToContentScriptMessageWithoutDisconnect | DisconnectMessage; -function post>( +function post>( message: PageScriptToContentScriptMessage, ) { window.postMessage(message, '*'); @@ -258,7 +258,7 @@ function getStackTrace( return stack; } -function amendActionType>( +function amendActionType>( action: | A | StructuralPerformAction @@ -288,7 +288,7 @@ interface LiftedMessage { readonly source: typeof source; } -interface PartialStateMessage> { +interface PartialStateMessage> { readonly type: 'PARTIAL_STATE'; readonly payload: PartialLiftedState; readonly source: typeof source; @@ -296,7 +296,7 @@ interface PartialStateMessage> { readonly maxAge: number; } -interface ExportMessage> { +interface ExportMessage> { readonly type: 'EXPORT'; readonly payload: readonly A[]; readonly committedState: S; @@ -304,21 +304,21 @@ interface ExportMessage> { readonly instanceId: number; } -export interface StructuralPerformAction> { +export interface StructuralPerformAction> { readonly action: A; readonly timestamp?: number; readonly stack?: string; } -type SingleUserAction> = +type SingleUserAction> = | PerformAction | StructuralPerformAction | A; -type UserAction> = +type UserAction> = | SingleUserAction | readonly SingleUserAction[]; -interface ActionMessage> { +interface ActionMessage> { readonly type: 'ACTION'; readonly payload: S; readonly source: typeof source; @@ -329,7 +329,7 @@ interface ActionMessage> { readonly name?: string; } -interface StateMessage> { +interface StateMessage> { readonly type: 'STATE'; readonly payload: LiftedState; readonly source: typeof source; @@ -369,7 +369,7 @@ interface StopMessage { readonly instanceId: number; } -type ToContentScriptMessage> = +type ToContentScriptMessage> = | LiftedMessage | PartialStateMessage | ExportMessage @@ -380,7 +380,7 @@ type ToContentScriptMessage> = | GetReportMessage | StopMessage; -export function toContentScript>( +export function toContentScript>( message: ToContentScriptMessage, serializeState?: Serialize | undefined, serializeAction?: Serialize | undefined, @@ -425,7 +425,7 @@ export function toContentScript>( } } -export function sendMessage>( +export function sendMessage>( action: StructuralPerformAction | StructuralPerformAction[], state: LiftedState, config: Config, @@ -496,7 +496,7 @@ export function setListener( } const liftListener = - >( + >( listener: (message: ListenerMessage) => void, config: Config, ) => @@ -520,15 +520,15 @@ export function disconnect() { } export interface ConnectResponse { - init: >( + init: >( state: S, liftedData?: LiftedState, ) => void; - subscribe: >( + subscribe: >( listener: (message: ListenerMessage) => void, ) => (() => void) | undefined; unsubscribe: () => void; - send: >( + send: >( action: A, state: LiftedState, ) => void; @@ -550,8 +550,8 @@ export function connect(preConfig: Config): ConnectResponse { const localFilter = getLocalFilter(config); const autoPause = config.autoPause; let isPaused = autoPause; - let delayedActions: StructuralPerformAction>[] = []; - let delayedStates: LiftedState, unknown>[] = []; + let delayedActions: StructuralPerformAction>[] = []; + let delayedStates: LiftedState, unknown>[] = []; const rootListener = (action: ContentScriptToPageScriptMessage) => { if (autoPause) { @@ -574,7 +574,7 @@ export function connect(preConfig: Config): ConnectResponse { listeners[id] = [rootListener]; - const subscribe = >( + const subscribe = >( listener: (message: ListenerMessage) => void, ) => { if (!listener) return undefined; @@ -600,7 +600,7 @@ export function connect(preConfig: Config): ConnectResponse { delayedStates = []; }, latency); - const send = >( + const send = >( action: A, state: LiftedState, ) => { @@ -643,7 +643,7 @@ export function connect(preConfig: Config): ConnectResponse { ); }; - const init = >( + const init = >( state: S, liftedData?: LiftedState, ) => { diff --git a/extension/src/pageScript/api/openWindow.ts b/extension/src/pageScript/api/openWindow.ts index 02cd850f..f48c3b6b 100644 --- a/extension/src/pageScript/api/openWindow.ts +++ b/extension/src/pageScript/api/openWindow.ts @@ -3,7 +3,7 @@ import type { PageScriptToContentScriptMessage } from './index'; export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote'; -function post>( +function post>( message: PageScriptToContentScriptMessage, ) { window.postMessage(message, '*'); diff --git a/extension/src/pageScript/enhancerStore.ts b/extension/src/pageScript/enhancerStore.ts index dfe0e7f8..c48cd0da 100644 --- a/extension/src/pageScript/enhancerStore.ts +++ b/extension/src/pageScript/enhancerStore.ts @@ -18,9 +18,9 @@ declare global { export default function configureStore< S, - A extends Action, + A extends Action, MonitorState, - MonitorAction extends Action, + MonitorAction extends Action, >( next: StoreEnhancerStoreCreator, monitorReducer: Reducer, diff --git a/extension/src/pageScript/index.ts b/extension/src/pageScript/index.ts index b9b4b029..00a4df49 100644 --- a/extension/src/pageScript/index.ts +++ b/extension/src/pageScript/index.ts @@ -56,7 +56,7 @@ import type { ContentScriptToPageScriptMessage } from '../contentScript'; type EnhancedStoreWithInitialDispatch< S, - A extends Action, + A extends Action, MonitorState, > = EnhancedStore & { initialDispatch: Dispatch }; @@ -64,7 +64,7 @@ const source = '@devtools-page'; let stores: { [K in string | number]: EnhancedStoreWithInitialDispatch< unknown, - Action, + Action, unknown >; } = {}; @@ -97,18 +97,18 @@ export interface ConfigWithExpandedMaxAge { readonly actionsAllowlist?: string | readonly string[]; serialize?: boolean | SerializeWithImmutable; readonly stateSanitizer?: (state: S, index?: number) => S; - readonly actionSanitizer?: >( + readonly actionSanitizer?: >( action: A, id?: number, ) => A; - readonly predicate?: >( + readonly predicate?: >( state: S, action: A, ) => boolean; readonly latency?: number; readonly maxAge?: | number - | (>( + | (>( currentLiftedAction: LiftedAction, previousLiftedState: LiftedState | undefined, ) => number); @@ -123,9 +123,9 @@ export interface ConfigWithExpandedMaxAge { readonly autoPause?: boolean; readonly features?: Features; readonly type?: string; - readonly getActionType?: >(action: A) => A; + readonly getActionType?: >(action: A) => A; readonly actionCreators?: { - readonly [key: string]: ActionCreator>; + readonly [key: string]: ActionCreator>; }; } @@ -137,7 +137,7 @@ interface ReduxDevtoolsExtension { (config?: Config): StoreEnhancer; open: (position?: Position) => void; notifyErrors: (onError?: () => boolean) => void; - send: >( + send: >( action: StructuralPerformAction | StructuralPerformAction[], state: LiftedState, config: Config, @@ -158,7 +158,7 @@ declare global { } } -function __REDUX_DEVTOOLS_EXTENSION__>( +function __REDUX_DEVTOOLS_EXTENSION__>( config?: Config, ): StoreEnhancer { /* eslint-disable no-param-reassign */ diff --git a/extension/src/pageScriptWrap.ts b/extension/src/pageScriptWrap.ts index 5e1c4319..5b02a9ce 100644 --- a/extension/src/pageScriptWrap.ts +++ b/extension/src/pageScriptWrap.ts @@ -1,8 +1,10 @@ +// @ts-ignore +import script from '../dist/page.bundle.js'; + let s = document.createElement('script'); s.type = 'text/javascript'; if (process.env.NODE_ENV === 'production') { - const { default: script } = require('raw-loader!../dist/page.bundle.js'); s.appendChild(document.createTextNode(script)); (document.head || document.documentElement).appendChild(s); s.parentNode!.removeChild(s); diff --git a/extension/src/remote/index.tsx b/extension/src/remote/index.tsx index 60031214..dceae3b5 100644 --- a/extension/src/remote/index.tsx +++ b/extension/src/remote/index.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { Root } from '@redux-devtools/app'; -import './remote.pug'; - chrome.storage.local.get( { 'select-monitor': 'InspectorMonitor', diff --git a/extension/src/remote/remote.pug b/extension/src/remote/remote.pug index 259bd8f4..a64a926e 100644 --- a/extension/src/remote/remote.pug +++ b/extension/src/remote/remote.pug @@ -8,4 +8,5 @@ html body #root + link(href='/remote.bundle.css', rel='stylesheet') script(src='/remote.bundle.js') diff --git a/extension/src/window/index.tsx b/extension/src/window/index.tsx index 94b1a686..6f40e055 100644 --- a/extension/src/window/index.tsx +++ b/extension/src/window/index.tsx @@ -7,8 +7,6 @@ import App from '../app/App'; import configureStore from './store/windowStore'; import type { MonitorMessage } from '../background/store/apiMiddleware'; -import './window.pug'; - const position = location.hash; chrome.runtime.getBackgroundPage((window) => { @@ -35,4 +33,5 @@ chrome.runtime.getBackgroundPage((window) => { ); }); +if (position === '#popup') document.body.style.minWidth = '760px'; if (position !== '#popup') document.body.style.minHeight = '100%'; diff --git a/extension/src/window/window.pug b/extension/src/window/window.pug index 630a3edf..efda47db 100644 --- a/extension/src/window/window.pug +++ b/extension/src/window/window.pug @@ -14,4 +14,5 @@ html height=300, width=350, style='position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -175px;' ) + link(href='/window.bundle.css', rel='stylesheet') script(src='/window.bundle.js') diff --git a/extension/test/app/containers/App.spec.js b/extension/test/app/containers/App.spec.js index 7817da64..051f5b30 100644 --- a/extension/test/app/containers/App.spec.js +++ b/extension/test/app/containers/App.spec.js @@ -37,8 +37,6 @@ describe('App container', () => { , ); const actionList = screen.getByTestId('actionList'); - expect( - within(actionList).getByTestId('actionListRows'), - ).toBeEmptyDOMElement(); + expect(within(actionList).queryByRole('button')).not.toBeInTheDocument(); }); }); diff --git a/extension/test/chrome/extension.spec.js b/extension/test/chrome/extension.spec.js index b3eba673..7c52fe46 100644 --- a/extension/test/chrome/extension.spec.js +++ b/extension/test/chrome/extension.spec.js @@ -1,10 +1,8 @@ import { resolve } from 'path'; import webdriver from 'selenium-webdriver'; import chrome from 'selenium-webdriver/chrome'; -import chromedriver from 'chromedriver'; import { switchMonitorTests, delay } from '../utils/e2e'; -const port = 9515; const path = resolve(__dirname, '..', '..', 'dist'); const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd'; const actionsPattern = @@ -14,12 +12,11 @@ describe('Chrome extension', function () { let driver; beforeAll(async () => { - chromedriver.start(); - await delay(2000); driver = new webdriver.Builder() - .usingServer(`http://localhost:${port}`) .setChromeOptions( - new chrome.Options().addArguments(`load-extension=${path}`), + new chrome.Options() + .setBrowserVersion('stable') + .addArguments(`load-extension=${path}`), ) .forBrowser('chrome') .build(); @@ -27,7 +24,6 @@ describe('Chrome extension', function () { afterAll(async () => { await driver.quit(); - chromedriver.stop(); }); it("should open extension's window", async () => { @@ -44,16 +40,14 @@ describe('Chrome extension', function () { it("should contain inspector monitor's component", async () => { await delay(1000); const val = await driver - .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]')) + .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]')) .getText(); expect(val).toBeDefined(); }); it('should contain an empty actions list', async () => { const val = await driver - .findElement( - webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'), - ) + .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]')) .getText(); expect(val).toBe(''); }); @@ -63,7 +57,7 @@ describe('Chrome extension', function () { ); it('should get actions list', async () => { - const url = 'http://zalmoxisus.github.io/examples/router/'; + const url = 'https://zalmoxisus.github.io/examples/router/'; await driver.executeScript(`window.open('${url}')`); await delay(2000); @@ -76,9 +70,7 @@ describe('Chrome extension', function () { const result = await driver.wait( driver - .findElement( - webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'), - ) + .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]')) .getText() .then((val) => { return actionsPattern.test(val); diff --git a/extension/test/electron/devpanel.spec.js b/extension/test/electron/devpanel.spec.js index 62705f71..ca59117a 100644 --- a/extension/test/electron/devpanel.spec.js +++ b/extension/test/electron/devpanel.spec.js @@ -5,7 +5,6 @@ import electronPath from 'electron'; import chromedriver from 'chromedriver'; import { switchMonitorTests, delay } from '../utils/e2e'; -const port = 9515; const devPanelPath = 'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html'; @@ -16,7 +15,7 @@ describe('DevTools panel for Electron', function () { chromedriver.start(); await delay(1000); driver = new webdriver.Builder() - .usingServer(`http://localhost:${port}`) + .usingServer('http://localhost:9515') .setChromeOptions( new chrome.Options() .setChromeBinaryPath(electronPath) @@ -90,7 +89,7 @@ describe('DevTools panel for Electron', function () { it('should contain INIT action', async () => { const element = await driver.wait( webdriver.until.elementLocated( - webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'), + webdriver.By.xpath('//div[@data-testid="actionListRows"]'), ), 5000, 'Element not found', @@ -101,7 +100,7 @@ describe('DevTools panel for Electron', function () { it("should contain Inspector monitor's component", async () => { const val = await driver - .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]')) + .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]')) .getText(); expect(val).toBeDefined(); }); diff --git a/extension/webpack.config.js b/extension/webpack.config.js deleted file mode 100644 index 9e31302e..00000000 --- a/extension/webpack.config.js +++ /dev/null @@ -1,81 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); -const CopyPlugin = require('copy-webpack-plugin'); -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); - -module.exports = function (env) { - return { - mode: env.production ? 'production' : 'development', - devtool: env.production ? undefined : 'eval-source-map', - entry: { - background: [ - path.resolve(__dirname, 'src/chromeApiMock'), - path.resolve(__dirname, 'src/background/index'), - ], - options: [ - path.resolve(__dirname, 'src/chromeApiMock'), - path.resolve(__dirname, 'src/options/index'), - ], - window: [path.resolve(__dirname, 'src/window/index')], - remote: [path.resolve(__dirname, 'src/remote/index')], - devpanel: [ - path.resolve(__dirname, 'src/chromeApiMock'), - path.resolve(__dirname, 'src/devpanel/index'), - ], - devtools: path.resolve(__dirname, 'src/devtools/index'), - content: [ - path.resolve(__dirname, 'src/chromeApiMock'), - path.resolve(__dirname, 'src/contentScript/index'), - ], - page: path.join(__dirname, 'src/pageScript'), - ...(env.production - ? {} - : { pagewrap: path.resolve(__dirname, 'src/pageScriptWrap') }), - }, - output: { - filename: '[name].bundle.js', - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env.BABEL_ENV': JSON.stringify(process.env.NODE_ENV), - }), - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: 'tsconfig.json', - }, - }), - new CopyPlugin({ - patterns: [ - { - from: path.join(__dirname, 'chrome/manifest.json'), - to: path.join(__dirname, 'dist/manifest.json'), - }, - { - from: path.join(__dirname, 'src/assets'), - to: path.join(__dirname, 'dist'), - }, - ], - }), - ], - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - module: { - rules: [ - { - test: /\.(js|ts)x?$/, - use: 'babel-loader', - exclude: /node_modules/, - }, - { - test: /\.css?$/, - use: ['style-loader', 'css-loader'], - }, - { - test: /\.pug$/, - use: ['file-loader?name=[name].html', 'pug-html-loader'], - }, - ], - }, - }; -}; diff --git a/extension/wrap.webpack.config.js b/extension/wrap.webpack.config.js deleted file mode 100644 index 1eb38ca1..00000000 --- a/extension/wrap.webpack.config.js +++ /dev/null @@ -1,31 +0,0 @@ -const path = require('path'); -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); - -module.exports = { - mode: 'production', - entry: { - pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'), - }, - output: { - filename: '[name].bundle.js', - }, - plugins: [ - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: 'tsconfig.json', - }, - }), - ], - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - module: { - rules: [ - { - test: /\.(js|ts)x?$/, - use: 'babel-loader', - exclude: /(node_modules|dist\/page\.bundle)/, - }, - ], - }, -}; diff --git a/package.json b/package.json index 0769d94d..6334f8ef 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,21 @@ { "private": true, "devDependencies": { - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@changesets/cli": "^2.26.2", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "eslint-plugin-react": "^7.33.1", + "@babel/core": "^7.24.3", + "@babel/eslint-parser": "^7.24.1", + "@changesets/cli": "^2.27.1", + "@nrwl/nx-cloud": "^18.0.0", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "jest": "^29.6.2", - "prettier": "3.0.1", - "typescript": "~5.1.6", - "nx": "^16.6.0", - "@nrwl/nx-cloud": "^16.2.0" + "jest": "^29.7.0", + "nx": "^18.1.3", + "prettier": "3.2.5", + "typescript": "~5.3.3" }, "scripts": { "format": "prettier --write .", @@ -39,10 +39,5 @@ "packages/redux-devtools-rtk-query-monitor/demo", "packages/redux-devtools-slider-monitor/examples/todomvc" ], - "packageManager": "pnpm@8.6.12", - "pnpm": { - "overrides": { - "@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process" - } - } + "packageManager": "pnpm@8.15.5" } diff --git a/packages/d3-state-visualizer/.eslintrc.js b/packages/d3-state-visualizer/.eslintrc.cjs similarity index 86% rename from packages/d3-state-visualizer/.eslintrc.js rename to packages/d3-state-visualizer/.eslintrc.cjs index 90313a76..6435f877 100644 --- a/packages/d3-state-visualizer/.eslintrc.js +++ b/packages/d3-state-visualizer/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, ], diff --git a/packages/d3-state-visualizer/CHANGELOG.md b/packages/d3-state-visualizer/CHANGELOG.md index 5895a7d0..e3dc0054 100644 --- a/packages/d3-state-visualizer/CHANGELOG.md +++ b/packages/d3-state-visualizer/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## 3.0.0 + +### Major Changes + +- 191d419: Convert d3 packages to ESM + +### Patch Changes + +- Updated dependencies [191d419] + - d3tooltip@4.0.0 + - map2tree@4.0.0 + ## 2.0.0 ### Major Changes diff --git a/packages/d3-state-visualizer/babel.config.esm.json b/packages/d3-state-visualizer/babel.config.esm.json deleted file mode 100644 index 1c02687e..00000000 --- a/packages/d3-state-visualizer/babel.config.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/d3-state-visualizer/babel.config.json b/packages/d3-state-visualizer/babel.config.json deleted file mode 100644 index 5ed95986..00000000 --- a/packages/d3-state-visualizer/babel.config.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/d3-state-visualizer/examples/tree/.eslintrc.js b/packages/d3-state-visualizer/examples/tree/.eslintrc.js index 4217bea7..8c163509 100644 --- a/packages/d3-state-visualizer/examples/tree/.eslintrc.js +++ b/packages/d3-state-visualizer/examples/tree/.eslintrc.js @@ -2,7 +2,7 @@ module.exports = { extends: '../../../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, overrides: [ { diff --git a/packages/d3-state-visualizer/examples/tree/CHANGELOG.md b/packages/d3-state-visualizer/examples/tree/CHANGELOG.md index 8d99c778..5528069f 100644 --- a/packages/d3-state-visualizer/examples/tree/CHANGELOG.md +++ b/packages/d3-state-visualizer/examples/tree/CHANGELOG.md @@ -1,5 +1,13 @@ # d3-state-visualizer-tree-example +## 0.1.6 + +### Patch Changes + +- Updated dependencies [191d419] + - d3-state-visualizer@3.0.0 + - map2tree@4.0.0 + ## 0.1.5 ### Patch Changes diff --git a/packages/d3-state-visualizer/examples/tree/package.json b/packages/d3-state-visualizer/examples/tree/package.json index db7c84bf..06b2f4cd 100644 --- a/packages/d3-state-visualizer/examples/tree/package.json +++ b/packages/d3-state-visualizer/examples/tree/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "d3-state-visualizer-tree-example", - "version": "0.1.5", + "version": "0.1.6", "description": "Visualize your app state as a tree", "keywords": [ "d3", @@ -25,26 +25,26 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "d3-state-visualizer": "^2.0.0", - "map2tree": "^3.0.0" + "d3-state-visualizer": "^3.0.0", + "map2tree": "^4.0.0" }, "devDependencies": { - "@babel/core": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-typescript": "^7.22.5", - "@types/node": "^18.17.3", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", + "@babel/core": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-typescript": "^7.24.1", + "@types/node": "^20.11.30", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", "babel-loader": "^9.1.3", "cross-env": "^7.0.3", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "fork-ts-checker-webpack-plugin": "^8.0.0", - "html-webpack-plugin": "^5.5.3", - "ts-node": "^10.9.1", - "typescript": "~5.1.6", - "webpack": "^5.88.2", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "fork-ts-checker-webpack-plugin": "^9.0.2", + "html-webpack-plugin": "^5.6.0", + "ts-node": "^10.9.2", + "typescript": "~5.3.3", + "webpack": "^5.91.0", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1" + "webpack-dev-server": "^5.0.4" } } diff --git a/packages/d3-state-visualizer/package.json b/packages/d3-state-visualizer/package.json index 74d81aa2..69261177 100644 --- a/packages/d3-state-visualizer/package.json +++ b/packages/d3-state-visualizer/package.json @@ -1,6 +1,6 @@ { "name": "d3-state-visualizer", - "version": "2.0.0", + "version": "3.0.0", "description": "Visualize your app state with a range of reusable charts", "keywords": [ "d3", @@ -20,46 +20,37 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types", - "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build": "tsc", "clean": "rimraf lib", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint" + "prepublish": "pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/d3": "^7.4.0", - "d3": "^7.8.5", - "d3tooltip": "^3.0.0", + "@types/d3": "^7.4.3", + "d3": "^7.9.0", + "d3tooltip": "^4.0.0", "deepmerge": "^4.3.1", - "map2tree": "^3.0.0", - "ramda": "^0.29.0" + "map2tree": "^4.0.0", + "ramda": "^0.29.1" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-typescript": "^7.22.5", - "@types/ramda": "^0.29.3", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "rimraf": "^5.0.1", - "typescript": "~5.1.6" + "@types/ramda": "^0.29.11", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "rimraf": "^5.0.5", + "typescript": "~5.3.3" } } diff --git a/packages/d3-state-visualizer/src/charts/index.ts b/packages/d3-state-visualizer/src/charts/index.ts index 90e07fa8..c3b555d1 100644 --- a/packages/d3-state-visualizer/src/charts/index.ts +++ b/packages/d3-state-visualizer/src/charts/index.ts @@ -1,4 +1,4 @@ export type { HierarchyPointNode } from 'd3'; export type { StyleValue } from 'd3tooltip'; -export { default as tree } from './tree/tree'; -export type { Node, Options } from './tree/tree'; +export { default as tree } from './tree/tree.js'; +export type { Node, Options } from './tree/tree.js'; diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts index 4a87ffc8..058886c8 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.ts +++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts @@ -9,7 +9,7 @@ import { toggleChildren, visit, getNodeGroupByDepthCount, -} from './utils'; +} from './utils.js'; import { tooltip } from 'd3tooltip'; import type { StyleValue } from 'd3tooltip'; @@ -401,8 +401,8 @@ export default function (DOMNode: HTMLElement, options: Partial = {}) { d.data._children && d.data._children.length > 0 ? nodeStyleOptions.colors.collapsed : d.data.children && d.data.children.length > 0 - ? nodeStyleOptions.colors.parent - : nodeStyleOptions.colors.default, + ? nodeStyleOptions.colors.parent + : nodeStyleOptions.colors.default, ); // transition nodes to their new position @@ -473,9 +473,10 @@ export default function (DOMNode: HTMLElement, options: Partial = {}) { // update the links const link = vis - .selectAll>( - 'path.link', - ) + .selectAll< + SVGPathElement, + HierarchyPointLink + >('path.link') .data(links, (d) => d.target.data.id); // enter any new links at the parent's previous position diff --git a/packages/d3-state-visualizer/src/charts/tree/utils.ts b/packages/d3-state-visualizer/src/charts/tree/utils.ts index 8f229cae..b63baf74 100644 --- a/packages/d3-state-visualizer/src/charts/tree/utils.ts +++ b/packages/d3-state-visualizer/src/charts/tree/utils.ts @@ -1,6 +1,6 @@ import { is, join, pipe, replace } from 'ramda'; -import sortAndSerialize from './sortAndSerialize'; -import type { InternalNode } from './tree'; +import sortAndSerialize from './sortAndSerialize.js'; +import type { InternalNode } from './tree.js'; export function collapseChildren(node: InternalNode) { if (node.children) { diff --git a/packages/d3-state-visualizer/src/index.ts b/packages/d3-state-visualizer/src/index.ts index a2ce88d8..e73eb6c6 100644 --- a/packages/d3-state-visualizer/src/index.ts +++ b/packages/d3-state-visualizer/src/index.ts @@ -1,2 +1,7 @@ -export { tree } from './charts'; -export type { HierarchyPointNode, Node, Options, StyleValue } from './charts'; +export { tree } from './charts/index.js'; +export type { + HierarchyPointNode, + Node, + Options, + StyleValue, +} from './charts/index.js'; diff --git a/packages/d3-state-visualizer/tsconfig.json b/packages/d3-state-visualizer/tsconfig.json index 19e4e718..e3160ce3 100644 --- a/packages/d3-state-visualizer/tsconfig.json +++ b/packages/d3-state-visualizer/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/d3tooltip/.eslintrc.js b/packages/d3tooltip/.eslintrc.cjs similarity index 86% rename from packages/d3tooltip/.eslintrc.js rename to packages/d3tooltip/.eslintrc.cjs index 90313a76..6435f877 100644 --- a/packages/d3tooltip/.eslintrc.js +++ b/packages/d3tooltip/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, ], diff --git a/packages/d3tooltip/CHANGELOG.md b/packages/d3tooltip/CHANGELOG.md index 92313349..eef00978 100644 --- a/packages/d3tooltip/CHANGELOG.md +++ b/packages/d3tooltip/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## 4.0.0 + +### Major Changes + +- 191d419: Convert d3 packages to ESM + +## 3.0.1 + +### Patch Changes + +- 7f5bddbd: Widen peer dependencies + ## 3.0.0 ### Major Changes diff --git a/packages/d3tooltip/babel.config.esm.json b/packages/d3tooltip/babel.config.esm.json deleted file mode 100644 index 1c02687e..00000000 --- a/packages/d3tooltip/babel.config.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/d3tooltip/babel.config.json b/packages/d3tooltip/babel.config.json deleted file mode 100644 index 5ed95986..00000000 --- a/packages/d3tooltip/babel.config.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/d3tooltip/package.json b/packages/d3tooltip/package.json index 8fc8fe59..0b998232 100644 --- a/packages/d3tooltip/package.json +++ b/packages/d3tooltip/package.json @@ -1,6 +1,6 @@ { "name": "d3tooltip", - "version": "3.0.0", + "version": "4.0.0", "description": "A highly configurable tooltip for d3", "keywords": [ "d3", @@ -16,45 +16,34 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types", - "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build": "tsc", "clean": "rimraf lib", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint" - }, - "dependencies": { - "@babel/runtime": "^7.22.6" + "prepublish": "pnpm run lint" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-typescript": "^7.22.5", - "@types/d3": "^7.4.0", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "d3": "^7.8.5", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "rimraf": "^5.0.1", - "typescript": "~5.1.6" + "@types/d3": "^7.4.3", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "d3": "^7.9.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "rimraf": "^5.0.5", + "typescript": "~5.3.3" }, "peerDependencies": { - "@types/d3": "^7.4.0", - "d3": "^7.8.5" + "@types/d3": "^7.4.3", + "d3": "^7.9.0" } } diff --git a/packages/d3tooltip/tsconfig.json b/packages/d3tooltip/tsconfig.json index 0aade49a..e3160ce3 100644 --- a/packages/d3tooltip/tsconfig.json +++ b/packages/d3tooltip/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/react-base16-styling/.eslintrc.js b/packages/map2tree/.eslintrc.cjs similarity index 92% rename from packages/react-base16-styling/.eslintrc.js rename to packages/map2tree/.eslintrc.cjs index 84c5da42..b01386d0 100644 --- a/packages/react-base16-styling/.eslintrc.js +++ b/packages/map2tree/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.jest.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/map2tree/CHANGELOG.md b/packages/map2tree/CHANGELOG.md index 3cc16126..28ea8823 100644 --- a/packages/map2tree/CHANGELOG.md +++ b/packages/map2tree/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 4.0.0 + +### Major Changes + +- 191d419: Convert d3 packages to ESM + ## 3.0.0 ### Major Changes diff --git a/packages/map2tree/babel.config.esm.json b/packages/map2tree/babel.config.esm.json deleted file mode 100644 index 1c02687e..00000000 --- a/packages/map2tree/babel.config.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/map2tree/babel.config.json b/packages/map2tree/babel.config.json deleted file mode 100644 index 5ed95986..00000000 --- a/packages/map2tree/babel.config.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/map2tree/jest.config.cjs b/packages/map2tree/jest.config.cjs new file mode 100644 index 00000000..3fb8088b --- /dev/null +++ b/packages/map2tree/jest.config.cjs @@ -0,0 +1,9 @@ +module.exports = { + extensionsToTreatAsEsm: ['.ts'], + moduleNameMapper: { + '^(\\.{1,2}/.*)\\.js$': '$1', + }, + transform: { + '^.+\\.ts$': ['ts-jest', { tsconfig: 'tsconfig.test.json', useESM: true }], + }, +}; diff --git a/packages/map2tree/jest.config.js b/packages/map2tree/jest.config.js deleted file mode 100644 index f68efd05..00000000 --- a/packages/map2tree/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - preset: 'ts-jest', - transform: { - '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], - }, -}; diff --git a/packages/map2tree/package.json b/packages/map2tree/package.json index 58216432..b6505cd6 100755 --- a/packages/map2tree/package.json +++ b/packages/map2tree/package.json @@ -1,6 +1,6 @@ { "name": "map2tree", - "version": "3.0.0", + "version": "4.0.0", "description": "Utility for mapping maps to trees", "keywords": [ "map2tree", @@ -19,47 +19,38 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types", - "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build": "tsc", "clean": "rimraf lib", - "test": "jest", + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" + "prepublish": "pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "lodash": "^4.17.21" + "lodash-es": "^4.17.21" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-typescript": "^7.22.5", - "@types/jest": "^29.5.3", - "@types/lodash": "^4.14.196", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "immutable": "^4.3.2", - "jest": "^29.6.2", - "rimraf": "^5.0.1", - "ts-jest": "^29.1.1", - "typescript": "~5.1.6" + "@types/jest": "^29.5.12", + "@types/lodash-es": "^4.17.12", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "immutable": "^4.3.5", + "jest": "^29.7.0", + "rimraf": "^5.0.5", + "ts-jest": "^29.1.2", + "typescript": "~5.3.3" } } diff --git a/packages/map2tree/src/index.ts b/packages/map2tree/src/index.ts index 74e231fb..322379e5 100644 --- a/packages/map2tree/src/index.ts +++ b/packages/map2tree/src/index.ts @@ -1,6 +1,4 @@ -import isArray from 'lodash/isArray'; -import isPlainObject from 'lodash/isPlainObject'; -import mapValues from 'lodash/mapValues'; +import { isArray, isPlainObject, mapValues } from 'lodash-es'; export interface Node { name: string; diff --git a/packages/map2tree/test/map2tree.spec.ts b/packages/map2tree/test/map2tree.spec.ts index 6cd6a10d..415c1e6d 100644 --- a/packages/map2tree/test/map2tree.spec.ts +++ b/packages/map2tree/test/map2tree.spec.ts @@ -1,4 +1,4 @@ -import { map2tree, Node } from '../src'; +import { map2tree, Node } from '../src/index.js'; import * as immutable from 'immutable'; test('# rootNodeKey', () => { diff --git a/packages/map2tree/tsconfig.json b/packages/map2tree/tsconfig.json index 0aade49a..e3160ce3 100644 --- a/packages/map2tree/tsconfig.json +++ b/packages/map2tree/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/map2tree/tsconfig.test.json b/packages/map2tree/tsconfig.test.json index d0d15f67..52e69314 100644 --- a/packages/map2tree/tsconfig.test.json +++ b/packages/map2tree/tsconfig.test.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { "types": ["jest"] }, diff --git a/packages/map2tree/.eslintrc.js b/packages/react-base16-styling/.eslintrc.cjs similarity index 92% rename from packages/map2tree/.eslintrc.js rename to packages/react-base16-styling/.eslintrc.cjs index 84c5da42..b01386d0 100644 --- a/packages/map2tree/.eslintrc.js +++ b/packages/react-base16-styling/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.jest.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/react-base16-styling/CHANGELOG.md b/packages/react-base16-styling/CHANGELOG.md index dd8b4bc0..314e2f17 100644 --- a/packages/react-base16-styling/CHANGELOG.md +++ b/packages/react-base16-styling/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.10.0 + +### Minor Changes + +- bbb1a40: Convert React packages to ESM + ## 0.9.0 - Adds ESM build (https://github.com/reduxjs/redux-devtools/pull/997). diff --git a/packages/react-base16-styling/babel.config.esm.json b/packages/react-base16-styling/babel.config.esm.json deleted file mode 100644 index 1c02687e..00000000 --- a/packages/react-base16-styling/babel.config.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-base16-styling/babel.config.json b/packages/react-base16-styling/babel.config.json deleted file mode 100644 index 5ed95986..00000000 --- a/packages/react-base16-styling/babel.config.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-base16-styling/jest.config.cjs b/packages/react-base16-styling/jest.config.cjs new file mode 100644 index 00000000..648065e7 --- /dev/null +++ b/packages/react-base16-styling/jest.config.cjs @@ -0,0 +1,10 @@ +module.exports = { + testEnvironment: 'jsdom', + extensionsToTreatAsEsm: ['.ts'], + moduleNameMapper: { + '^(\\.{1,2}/.*)\\.js$': '$1', + }, + transform: { + '^.+\\.ts$': ['ts-jest', { tsconfig: 'tsconfig.test.json', useESM: true }], + }, +}; diff --git a/packages/react-base16-styling/jest.config.js b/packages/react-base16-styling/jest.config.js deleted file mode 100644 index dcef0803..00000000 --- a/packages/react-base16-styling/jest.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - preset: 'ts-jest', - testEnvironment: 'jsdom', - transform: { - '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], - }, -}; diff --git a/packages/react-base16-styling/package.json b/packages/react-base16-styling/package.json index 2f404e6b..dd7ea363 100644 --- a/packages/react-base16-styling/package.json +++ b/packages/react-base16-styling/package.json @@ -1,6 +1,6 @@ { "name": "react-base16-styling", - "version": "0.9.1", + "version": "0.10.0", "description": "React styling with base16 color scheme support", "keywords": [ "react", @@ -18,54 +18,42 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "git+https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types", - "build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build": "tsc", "clean": "rimraf lib", - "test": "jest", + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "lint": "eslint . --ext .ts", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" + "prepublish": "pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/base16": "^1.0.2", - "@types/lodash": "^4.14.196", - "base16": "^1.0.0", + "@types/lodash": "^4.17.0", "color": "^4.2.3", - "csstype": "^3.1.2", - "lodash.curry": "^4.1.1" + "csstype": "^3.1.3", + "lodash-es": "^4.17.21" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/plugin-transform-runtime": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-typescript": "^7.22.5", - "@types/color": "^3.0.3", - "@types/jest": "^29.5.3", - "@types/lodash.curry": "^4.1.7", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "jest": "^29.6.2", - "jest-environment-jsdom": "^29.6.2", - "rimraf": "^5.0.1", - "ts-jest": "^29.1.1", - "typescript": "~5.1.6" + "@types/color": "^3.0.6", + "@types/jest": "^29.5.12", + "@types/lodash-es": "^4.17.12", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "rimraf": "^5.0.5", + "ts-jest": "^29.1.2", + "typescript": "~5.3.3" } } diff --git a/packages/react-base16-styling/src/index.ts b/packages/react-base16-styling/src/index.ts index 181373fa..99efaa18 100644 --- a/packages/react-base16-styling/src/index.ts +++ b/packages/react-base16-styling/src/index.ts @@ -1,10 +1,8 @@ -import * as base16 from 'base16'; -import { Base16Theme } from 'base16'; import Color from 'color'; import * as CSS from 'csstype'; -import curry from 'lodash.curry'; +import { curry } from 'lodash-es'; import type { CurriedFunction3 } from 'lodash'; -import { Color as ColorTuple, yuv2rgb, rgb2yuv } from './colorConverters'; +import { Color as ColorTuple, yuv2rgb, rgb2yuv } from './colorConverters.js'; import { Styling, StylingConfig, @@ -12,7 +10,9 @@ import { StylingValue, StylingValueFunction, Theme, -} from './types'; +} from './types.js'; +import { base16Themes as base16 } from './themes/index.js'; +import type { Base16Theme } from './themes/index.js'; const DEFAULT_BASE16 = base16.default; @@ -190,8 +190,8 @@ export const invertBase16Theme = (base16Theme: Base16Theme): Base16Theme => (t[key as keyof Base16Theme] = /^base/.test(key) ? invertColor(base16Theme[key as keyof Base16Theme]) : key === 'scheme' - ? base16Theme[key] + ':inverted' - : base16Theme[key as keyof Base16Theme]), + ? base16Theme[key] + ':inverted' + : base16Theme[key as keyof Base16Theme]), t ), {} as Base16Theme, @@ -272,7 +272,7 @@ export const getBase16Theme = ( if (base16Themes) { theme = base16Themes[themeName]; } else { - theme = base16[themeName as keyof typeof base16]; + theme = base16[themeName as keyof typeof base16] as Base16Theme; } if (modifier === 'inverted') { theme = invertBase16Theme(theme); @@ -308,4 +308,5 @@ export const invertTheme = (theme: Theme | undefined): Theme | undefined => { }; export type { Base16Theme }; -export * from './types'; +export { base16 as base16Themes }; +export * from './types.js'; diff --git a/packages/react-base16-styling/src/themes/apathy.ts b/packages/react-base16-styling/src/themes/apathy.ts new file mode 100644 index 00000000..8a3474ce --- /dev/null +++ b/packages/react-base16-styling/src/themes/apathy.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'apathy', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#031A16', + base01: '#0B342D', + base02: '#184E45', + base03: '#2B685E', + base04: '#5F9C92', + base05: '#81B5AC', + base06: '#A7CEC8', + base07: '#D2E7E4', + base08: '#3E9688', + base09: '#3E7996', + base0A: '#3E4C96', + base0B: '#883E96', + base0C: '#963E4C', + base0D: '#96883E', + base0E: '#4C963E', + base0F: '#3E965B', +}; diff --git a/packages/react-base16-styling/src/themes/ashes.ts b/packages/react-base16-styling/src/themes/ashes.ts new file mode 100644 index 00000000..2ef32090 --- /dev/null +++ b/packages/react-base16-styling/src/themes/ashes.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'ashes', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#1C2023', + base01: '#393F45', + base02: '#565E65', + base03: '#747C84', + base04: '#ADB3BA', + base05: '#C7CCD1', + base06: '#DFE2E5', + base07: '#F3F4F5', + base08: '#C7AE95', + base09: '#C7C795', + base0A: '#AEC795', + base0B: '#95C7AE', + base0C: '#95AEC7', + base0D: '#AE95C7', + base0E: '#C795AE', + base0F: '#C79595', +}; diff --git a/packages/react-base16-styling/src/themes/atelier-dune.ts b/packages/react-base16-styling/src/themes/atelier-dune.ts new file mode 100644 index 00000000..34590bbf --- /dev/null +++ b/packages/react-base16-styling/src/themes/atelier-dune.ts @@ -0,0 +1,21 @@ +export default { + scheme: 'atelier dune', + author: + 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)', + base00: '#20201d', + base01: '#292824', + base02: '#6e6b5e', + base03: '#7d7a68', + base04: '#999580', + base05: '#a6a28c', + base06: '#e8e4cf', + base07: '#fefbec', + base08: '#d73737', + base09: '#b65611', + base0A: '#cfb017', + base0B: '#60ac39', + base0C: '#1fad83', + base0D: '#6684e1', + base0E: '#b854d4', + base0F: '#d43552', +}; diff --git a/packages/react-base16-styling/src/themes/atelier-forest.ts b/packages/react-base16-styling/src/themes/atelier-forest.ts new file mode 100644 index 00000000..e065a29b --- /dev/null +++ b/packages/react-base16-styling/src/themes/atelier-forest.ts @@ -0,0 +1,21 @@ +export default { + scheme: 'atelier forest', + author: + 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)', + base00: '#1b1918', + base01: '#2c2421', + base02: '#68615e', + base03: '#766e6b', + base04: '#9c9491', + base05: '#a8a19f', + base06: '#e6e2e0', + base07: '#f1efee', + base08: '#f22c40', + base09: '#df5320', + base0A: '#d5911a', + base0B: '#5ab738', + base0C: '#00ad9c', + base0D: '#407ee7', + base0E: '#6666ea', + base0F: '#c33ff3', +}; diff --git a/packages/react-base16-styling/src/themes/atelier-heath.ts b/packages/react-base16-styling/src/themes/atelier-heath.ts new file mode 100644 index 00000000..4612d99c --- /dev/null +++ b/packages/react-base16-styling/src/themes/atelier-heath.ts @@ -0,0 +1,21 @@ +export default { + scheme: 'atelier heath', + author: + 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)', + base00: '#1b181b', + base01: '#292329', + base02: '#695d69', + base03: '#776977', + base04: '#9e8f9e', + base05: '#ab9bab', + base06: '#d8cad8', + base07: '#f7f3f7', + base08: '#ca402b', + base09: '#a65926', + base0A: '#bb8a35', + base0B: '#379a37', + base0C: '#159393', + base0D: '#516aec', + base0E: '#7b59c0', + base0F: '#cc33cc', +}; diff --git a/packages/react-base16-styling/src/themes/atelier-lakeside.ts b/packages/react-base16-styling/src/themes/atelier-lakeside.ts new file mode 100644 index 00000000..582c81a7 --- /dev/null +++ b/packages/react-base16-styling/src/themes/atelier-lakeside.ts @@ -0,0 +1,21 @@ +export default { + scheme: 'atelier lakeside', + author: + 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)', + base00: '#161b1d', + base01: '#1f292e', + base02: '#516d7b', + base03: '#5a7b8c', + base04: '#7195a8', + base05: '#7ea2b4', + base06: '#c1e4f6', + base07: '#ebf8ff', + base08: '#d22d72', + base09: '#935c25', + base0A: '#8a8a0f', + base0B: '#568c3b', + base0C: '#2d8f6f', + base0D: '#257fad', + base0E: '#5d5db1', + base0F: '#b72dd2', +}; diff --git a/packages/react-base16-styling/src/themes/atelier-seaside.ts b/packages/react-base16-styling/src/themes/atelier-seaside.ts new file mode 100644 index 00000000..041d06e2 --- /dev/null +++ b/packages/react-base16-styling/src/themes/atelier-seaside.ts @@ -0,0 +1,21 @@ +export default { + scheme: 'atelier seaside', + author: + 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)', + base00: '#131513', + base01: '#242924', + base02: '#5e6e5e', + base03: '#687d68', + base04: '#809980', + base05: '#8ca68c', + base06: '#cfe8cf', + base07: '#f0fff0', + base08: '#e6193c', + base09: '#87711d', + base0A: '#c3c322', + base0B: '#29a329', + base0C: '#1999b3', + base0D: '#3d62f5', + base0E: '#ad2bee', + base0F: '#e619c3', +}; diff --git a/packages/react-base16-styling/src/themes/bespin.ts b/packages/react-base16-styling/src/themes/bespin.ts new file mode 100644 index 00000000..ed068adb --- /dev/null +++ b/packages/react-base16-styling/src/themes/bespin.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'bespin', + author: 'jan t. sott', + base00: '#28211c', + base01: '#36312e', + base02: '#5e5d5c', + base03: '#666666', + base04: '#797977', + base05: '#8a8986', + base06: '#9d9b97', + base07: '#baae9e', + base08: '#cf6a4c', + base09: '#cf7d34', + base0A: '#f9ee98', + base0B: '#54be0d', + base0C: '#afc4db', + base0D: '#5ea6ea', + base0E: '#9b859d', + base0F: '#937121', +}; diff --git a/packages/react-base16-styling/src/themes/brewer.ts b/packages/react-base16-styling/src/themes/brewer.ts new file mode 100644 index 00000000..b9925c33 --- /dev/null +++ b/packages/react-base16-styling/src/themes/brewer.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'brewer', + author: 'timothée poisot (http://github.com/tpoisot)', + base00: '#0c0d0e', + base01: '#2e2f30', + base02: '#515253', + base03: '#737475', + base04: '#959697', + base05: '#b7b8b9', + base06: '#dadbdc', + base07: '#fcfdfe', + base08: '#e31a1c', + base09: '#e6550d', + base0A: '#dca060', + base0B: '#31a354', + base0C: '#80b1d3', + base0D: '#3182bd', + base0E: '#756bb1', + base0F: '#b15928', +}; diff --git a/packages/react-base16-styling/src/themes/bright.ts b/packages/react-base16-styling/src/themes/bright.ts new file mode 100644 index 00000000..c72c3f73 --- /dev/null +++ b/packages/react-base16-styling/src/themes/bright.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'bright', + author: 'chris kempson (http://chriskempson.com)', + base00: '#000000', + base01: '#303030', + base02: '#505050', + base03: '#b0b0b0', + base04: '#d0d0d0', + base05: '#e0e0e0', + base06: '#f5f5f5', + base07: '#ffffff', + base08: '#fb0120', + base09: '#fc6d24', + base0A: '#fda331', + base0B: '#a1c659', + base0C: '#76c7b7', + base0D: '#6fb3d2', + base0E: '#d381c3', + base0F: '#be643c', +}; diff --git a/packages/react-base16-styling/src/themes/chalk.ts b/packages/react-base16-styling/src/themes/chalk.ts new file mode 100644 index 00000000..92c1bede --- /dev/null +++ b/packages/react-base16-styling/src/themes/chalk.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'chalk', + author: 'chris kempson (http://chriskempson.com)', + base00: '#151515', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#b0b0b0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#f5f5f5', + base08: '#fb9fb1', + base09: '#eda987', + base0A: '#ddb26f', + base0B: '#acc267', + base0C: '#12cfc0', + base0D: '#6fc2ef', + base0E: '#e1a3ee', + base0F: '#deaf8f', +}; diff --git a/packages/react-base16-styling/src/themes/codeschool.ts b/packages/react-base16-styling/src/themes/codeschool.ts new file mode 100644 index 00000000..d344b856 --- /dev/null +++ b/packages/react-base16-styling/src/themes/codeschool.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'codeschool', + author: 'brettof86', + base00: '#232c31', + base01: '#1c3657', + base02: '#2a343a', + base03: '#3f4944', + base04: '#84898c', + base05: '#9ea7a6', + base06: '#a7cfa3', + base07: '#b5d8f6', + base08: '#2a5491', + base09: '#43820d', + base0A: '#a03b1e', + base0B: '#237986', + base0C: '#b02f30', + base0D: '#484d79', + base0E: '#c59820', + base0F: '#c98344', +}; diff --git a/packages/react-base16-styling/src/themes/colors.ts b/packages/react-base16-styling/src/themes/colors.ts new file mode 100644 index 00000000..93475456 --- /dev/null +++ b/packages/react-base16-styling/src/themes/colors.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'colors', + author: 'mrmrs (http://clrs.cc)', + base00: '#111111', + base01: '#333333', + base02: '#555555', + base03: '#777777', + base04: '#999999', + base05: '#bbbbbb', + base06: '#dddddd', + base07: '#ffffff', + base08: '#ff4136', + base09: '#ff851b', + base0A: '#ffdc00', + base0B: '#2ecc40', + base0C: '#7fdbff', + base0D: '#0074d9', + base0E: '#b10dc9', + base0F: '#85144b', +}; diff --git a/packages/react-base16-styling/src/themes/default.ts b/packages/react-base16-styling/src/themes/default.ts new file mode 100644 index 00000000..bd9ea246 --- /dev/null +++ b/packages/react-base16-styling/src/themes/default.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'default', + author: 'chris kempson (http://chriskempson.com)', + base00: '#181818', + base01: '#282828', + base02: '#383838', + base03: '#585858', + base04: '#b8b8b8', + base05: '#d8d8d8', + base06: '#e8e8e8', + base07: '#f8f8f8', + base08: '#ab4642', + base09: '#dc9656', + base0A: '#f7ca88', + base0B: '#a1b56c', + base0C: '#86c1b9', + base0D: '#7cafc2', + base0E: '#ba8baf', + base0F: '#a16946', +}; diff --git a/packages/react-base16-styling/src/themes/eighties.ts b/packages/react-base16-styling/src/themes/eighties.ts new file mode 100644 index 00000000..3839f768 --- /dev/null +++ b/packages/react-base16-styling/src/themes/eighties.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'eighties', + author: 'chris kempson (http://chriskempson.com)', + base00: '#2d2d2d', + base01: '#393939', + base02: '#515151', + base03: '#747369', + base04: '#a09f93', + base05: '#d3d0c8', + base06: '#e8e6df', + base07: '#f2f0ec', + base08: '#f2777a', + base09: '#f99157', + base0A: '#ffcc66', + base0B: '#99cc99', + base0C: '#66cccc', + base0D: '#6699cc', + base0E: '#cc99cc', + base0F: '#d27b53', +}; diff --git a/packages/react-base16-styling/src/themes/embers.ts b/packages/react-base16-styling/src/themes/embers.ts new file mode 100644 index 00000000..96f03d63 --- /dev/null +++ b/packages/react-base16-styling/src/themes/embers.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'embers', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#16130F', + base01: '#2C2620', + base02: '#433B32', + base03: '#5A5047', + base04: '#8A8075', + base05: '#A39A90', + base06: '#BEB6AE', + base07: '#DBD6D1', + base08: '#826D57', + base09: '#828257', + base0A: '#6D8257', + base0B: '#57826D', + base0C: '#576D82', + base0D: '#6D5782', + base0E: '#82576D', + base0F: '#825757', +}; diff --git a/packages/react-base16-styling/src/themes/flat.ts b/packages/react-base16-styling/src/themes/flat.ts new file mode 100644 index 00000000..14c1cf15 --- /dev/null +++ b/packages/react-base16-styling/src/themes/flat.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'flat', + author: 'chris kempson (http://chriskempson.com)', + base00: '#2C3E50', + base01: '#34495E', + base02: '#7F8C8D', + base03: '#95A5A6', + base04: '#BDC3C7', + base05: '#e0e0e0', + base06: '#f5f5f5', + base07: '#ECF0F1', + base08: '#E74C3C', + base09: '#E67E22', + base0A: '#F1C40F', + base0B: '#2ECC71', + base0C: '#1ABC9C', + base0D: '#3498DB', + base0E: '#9B59B6', + base0F: '#be643c', +}; diff --git a/packages/react-base16-styling/src/themes/google.ts b/packages/react-base16-styling/src/themes/google.ts new file mode 100644 index 00000000..cbe708e7 --- /dev/null +++ b/packages/react-base16-styling/src/themes/google.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'google', + author: 'seth wright (http://sethawright.com)', + base00: '#1d1f21', + base01: '#282a2e', + base02: '#373b41', + base03: '#969896', + base04: '#b4b7b4', + base05: '#c5c8c6', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#CC342B', + base09: '#F96A38', + base0A: '#FBA922', + base0B: '#198844', + base0C: '#3971ED', + base0D: '#3971ED', + base0E: '#A36AC7', + base0F: '#3971ED', +}; diff --git a/packages/react-base16-styling/src/themes/grayscale.ts b/packages/react-base16-styling/src/themes/grayscale.ts new file mode 100644 index 00000000..506feea4 --- /dev/null +++ b/packages/react-base16-styling/src/themes/grayscale.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'grayscale', + author: 'alexandre gavioli (https://github.com/alexx2/)', + base00: '#101010', + base01: '#252525', + base02: '#464646', + base03: '#525252', + base04: '#ababab', + base05: '#b9b9b9', + base06: '#e3e3e3', + base07: '#f7f7f7', + base08: '#7c7c7c', + base09: '#999999', + base0A: '#a0a0a0', + base0B: '#8e8e8e', + base0C: '#868686', + base0D: '#686868', + base0E: '#747474', + base0F: '#5e5e5e', +}; diff --git a/packages/react-base16-styling/src/themes/greenscreen.ts b/packages/react-base16-styling/src/themes/greenscreen.ts new file mode 100644 index 00000000..0471d164 --- /dev/null +++ b/packages/react-base16-styling/src/themes/greenscreen.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'green screen', + author: 'chris kempson (http://chriskempson.com)', + base00: '#001100', + base01: '#003300', + base02: '#005500', + base03: '#007700', + base04: '#009900', + base05: '#00bb00', + base06: '#00dd00', + base07: '#00ff00', + base08: '#007700', + base09: '#009900', + base0A: '#007700', + base0B: '#00bb00', + base0C: '#005500', + base0D: '#009900', + base0E: '#00bb00', + base0F: '#005500', +}; diff --git a/packages/react-base16-styling/src/themes/harmonic.ts b/packages/react-base16-styling/src/themes/harmonic.ts new file mode 100644 index 00000000..261e3a07 --- /dev/null +++ b/packages/react-base16-styling/src/themes/harmonic.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'harmonic16', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#0b1c2c', + base01: '#223b54', + base02: '#405c79', + base03: '#627e99', + base04: '#aabcce', + base05: '#cbd6e2', + base06: '#e5ebf1', + base07: '#f7f9fb', + base08: '#bf8b56', + base09: '#bfbf56', + base0A: '#8bbf56', + base0B: '#56bf8b', + base0C: '#568bbf', + base0D: '#8b56bf', + base0E: '#bf568b', + base0F: '#bf5656', +}; diff --git a/packages/react-base16-styling/src/themes/hopscotch.ts b/packages/react-base16-styling/src/themes/hopscotch.ts new file mode 100644 index 00000000..6839e6e2 --- /dev/null +++ b/packages/react-base16-styling/src/themes/hopscotch.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'hopscotch', + author: 'jan t. sott', + base00: '#322931', + base01: '#433b42', + base02: '#5c545b', + base03: '#797379', + base04: '#989498', + base05: '#b9b5b8', + base06: '#d5d3d5', + base07: '#ffffff', + base08: '#dd464c', + base09: '#fd8b19', + base0A: '#fdcc59', + base0B: '#8fc13e', + base0C: '#149b93', + base0D: '#1290bf', + base0E: '#c85e7c', + base0F: '#b33508', +}; diff --git a/packages/react-base16-styling/src/themes/index.ts b/packages/react-base16-styling/src/themes/index.ts new file mode 100644 index 00000000..2ab0b091 --- /dev/null +++ b/packages/react-base16-styling/src/themes/index.ts @@ -0,0 +1,100 @@ +import { default as threezerotwofour } from './threezerotwofour.js'; +import { default as apathy } from './apathy.js'; +import { default as ashes } from './ashes.js'; +import { default as atelierDune } from './atelier-dune.js'; +import { default as atelierForest } from './atelier-forest.js'; +import { default as atelierHeath } from './atelier-heath.js'; +import { default as atelierLakeside } from './atelier-lakeside.js'; +import { default as atelierSeaside } from './atelier-seaside.js'; +import { default as bespin } from './bespin.js'; +import { default as brewer } from './brewer.js'; +import { default as bright } from './bright.js'; +import { default as chalk } from './chalk.js'; +import { default as codeschool } from './codeschool.js'; +import { default as colors } from './colors.js'; +import { default as defaultTheme } from './default.js'; +import { default as eighties } from './eighties.js'; +import { default as embers } from './embers.js'; +import { default as flat } from './flat.js'; +import { default as google } from './google.js'; +import { default as grayscale } from './grayscale.js'; +import { default as greenscreen } from './greenscreen.js'; +import { default as harmonic } from './harmonic.js'; +import { default as hopscotch } from './hopscotch.js'; +import { default as isotope } from './isotope.js'; +import { default as marrakesh } from './marrakesh.js'; +import { default as mocha } from './mocha.js'; +import { default as monokai } from './monokai.js'; +import { default as nicinabox } from './nicinabox.js'; +import { default as ocean } from './ocean.js'; +import { default as paraiso } from './paraiso.js'; +import { default as pop } from './pop.js'; +import { default as railscasts } from './railscasts.js'; +import { default as shapeshifter } from './shapeshifter.js'; +import { default as solarized } from './solarized.js'; +import { default as summerfruit } from './summerfruit.js'; +import { default as tomorrow } from './tomorrow.js'; +import { default as tube } from './tube.js'; +import { default as twilight } from './twilight.js'; + +export interface Base16Theme { + scheme: string; + author: string; + base00: string; + base01: string; + base02: string; + base03: string; + base04: string; + base05: string; + base06: string; + base07: string; + base08: string; + base09: string; + base0A: string; + base0B: string; + base0C: string; + base0D: string; + base0E: string; + base0F: string; +} + +export const base16Themes = { + threezerotwofour, + apathy, + ashes, + atelierDune, + atelierForest, + atelierHeath, + atelierLakeside, + atelierSeaside, + bespin, + brewer, + bright, + chalk, + codeschool, + colors, + default: defaultTheme, + eighties, + embers, + flat, + google, + grayscale, + greenscreen, + harmonic, + hopscotch, + isotope, + marrakesh, + mocha, + monokai, + nicinabox, + ocean, + paraiso, + pop, + railscasts, + shapeshifter, + solarized, + summerfruit, + tomorrow, + tube, + twilight, +}; diff --git a/packages/react-base16-styling/src/themes/isotope.ts b/packages/react-base16-styling/src/themes/isotope.ts new file mode 100644 index 00000000..69f4ac91 --- /dev/null +++ b/packages/react-base16-styling/src/themes/isotope.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'isotope', + author: 'jan t. sott', + base00: '#000000', + base01: '#404040', + base02: '#606060', + base03: '#808080', + base04: '#c0c0c0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#ff0000', + base09: '#ff9900', + base0A: '#ff0099', + base0B: '#33ff00', + base0C: '#00ffff', + base0D: '#0066ff', + base0E: '#cc00ff', + base0F: '#3300ff', +}; diff --git a/packages/react-base16-styling/src/themes/marrakesh.ts b/packages/react-base16-styling/src/themes/marrakesh.ts new file mode 100644 index 00000000..fef5d5e3 --- /dev/null +++ b/packages/react-base16-styling/src/themes/marrakesh.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'marrakesh', + author: 'alexandre gavioli (http://github.com/alexx2/)', + base00: '#201602', + base01: '#302e00', + base02: '#5f5b17', + base03: '#6c6823', + base04: '#86813b', + base05: '#948e48', + base06: '#ccc37a', + base07: '#faf0a5', + base08: '#c35359', + base09: '#b36144', + base0A: '#a88339', + base0B: '#18974e', + base0C: '#75a738', + base0D: '#477ca1', + base0E: '#8868b3', + base0F: '#b3588e', +}; diff --git a/packages/react-base16-styling/src/themes/mocha.ts b/packages/react-base16-styling/src/themes/mocha.ts new file mode 100644 index 00000000..b7179a95 --- /dev/null +++ b/packages/react-base16-styling/src/themes/mocha.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'mocha', + author: 'chris kempson (http://chriskempson.com)', + base00: '#3B3228', + base01: '#534636', + base02: '#645240', + base03: '#7e705a', + base04: '#b8afad', + base05: '#d0c8c6', + base06: '#e9e1dd', + base07: '#f5eeeb', + base08: '#cb6077', + base09: '#d28b71', + base0A: '#f4bc87', + base0B: '#beb55b', + base0C: '#7bbda4', + base0D: '#8ab3b5', + base0E: '#a89bb9', + base0F: '#bb9584', +}; diff --git a/packages/react-base16-styling/src/themes/monokai.ts b/packages/react-base16-styling/src/themes/monokai.ts new file mode 100644 index 00000000..07218407 --- /dev/null +++ b/packages/react-base16-styling/src/themes/monokai.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'monokai', + author: 'wimer hazenberg (http://www.monokai.nl)', + base00: '#272822', + base01: '#383830', + base02: '#49483e', + base03: '#75715e', + base04: '#a59f85', + base05: '#f8f8f2', + base06: '#f5f4f1', + base07: '#f9f8f5', + base08: '#f92672', + base09: '#fd971f', + base0A: '#f4bf75', + base0B: '#a6e22e', + base0C: '#a1efe4', + base0D: '#66d9ef', + base0E: '#ae81ff', + base0F: '#cc6633', +}; diff --git a/packages/react-base16-styling/src/themes/nicinabox.ts b/packages/react-base16-styling/src/themes/nicinabox.ts new file mode 100644 index 00000000..e21f484e --- /dev/null +++ b/packages/react-base16-styling/src/themes/nicinabox.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'nicinabox', + author: 'nicinabox (http://github.com/nicinabox)', + base00: '#2A2F3A', + base01: '#3C444F', + base02: '#4F5A65', + base03: '#BEBEBE', + base04: '#b0b0b0', // based on ocean theme + base05: '#d0d0d0', // based on ocean theme + base06: '#FFFFFF', + base07: '#f5f5f5', // based on ocean theme + base08: '#fb9fb1', // based on ocean theme + base09: '#FC6D24', + base0A: '#ddb26f', // based on ocean theme + base0B: '#A1C659', + base0C: '#12cfc0', // based on ocean theme + base0D: '#6FB3D2', + base0E: '#D381C3', + base0F: '#deaf8f', // based on ocean theme +}; diff --git a/packages/react-base16-styling/src/themes/ocean.ts b/packages/react-base16-styling/src/themes/ocean.ts new file mode 100644 index 00000000..91101119 --- /dev/null +++ b/packages/react-base16-styling/src/themes/ocean.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'ocean', + author: 'chris kempson (http://chriskempson.com)', + base00: '#2b303b', + base01: '#343d46', + base02: '#4f5b66', + base03: '#65737e', + base04: '#a7adba', + base05: '#c0c5ce', + base06: '#dfe1e8', + base07: '#eff1f5', + base08: '#bf616a', + base09: '#d08770', + base0A: '#ebcb8b', + base0B: '#a3be8c', + base0C: '#96b5b4', + base0D: '#8fa1b3', + base0E: '#b48ead', + base0F: '#ab7967', +}; diff --git a/packages/react-base16-styling/src/themes/paraiso.ts b/packages/react-base16-styling/src/themes/paraiso.ts new file mode 100644 index 00000000..9d39f3c8 --- /dev/null +++ b/packages/react-base16-styling/src/themes/paraiso.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'paraiso', + author: 'jan t. sott', + base00: '#2f1e2e', + base01: '#41323f', + base02: '#4f424c', + base03: '#776e71', + base04: '#8d8687', + base05: '#a39e9b', + base06: '#b9b6b0', + base07: '#e7e9db', + base08: '#ef6155', + base09: '#f99b15', + base0A: '#fec418', + base0B: '#48b685', + base0C: '#5bc4bf', + base0D: '#06b6ef', + base0E: '#815ba4', + base0F: '#e96ba8', +}; diff --git a/packages/react-base16-styling/src/themes/pop.ts b/packages/react-base16-styling/src/themes/pop.ts new file mode 100644 index 00000000..8eec43f7 --- /dev/null +++ b/packages/react-base16-styling/src/themes/pop.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'pop', + author: 'chris kempson (http://chriskempson.com)', + base00: '#000000', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#b0b0b0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#eb008a', + base09: '#f29333', + base0A: '#f8ca12', + base0B: '#37b349', + base0C: '#00aabb', + base0D: '#0e5a94', + base0E: '#b31e8d', + base0F: '#7a2d00', +}; diff --git a/packages/react-base16-styling/src/themes/railscasts.ts b/packages/react-base16-styling/src/themes/railscasts.ts new file mode 100644 index 00000000..5fa4f5a6 --- /dev/null +++ b/packages/react-base16-styling/src/themes/railscasts.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'railscasts', + author: 'ryan bates (http://railscasts.com)', + base00: '#2b2b2b', + base01: '#272935', + base02: '#3a4055', + base03: '#5a647e', + base04: '#d4cfc9', + base05: '#e6e1dc', + base06: '#f4f1ed', + base07: '#f9f7f3', + base08: '#da4939', + base09: '#cc7833', + base0A: '#ffc66d', + base0B: '#a5c261', + base0C: '#519f50', + base0D: '#6d9cbe', + base0E: '#b6b3eb', + base0F: '#bc9458', +}; diff --git a/packages/react-base16-styling/src/themes/shapeshifter.ts b/packages/react-base16-styling/src/themes/shapeshifter.ts new file mode 100644 index 00000000..96b031e9 --- /dev/null +++ b/packages/react-base16-styling/src/themes/shapeshifter.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'shapeshifter', + author: 'tyler benziger (http://tybenz.com)', + base00: '#000000', + base01: '#040404', + base02: '#102015', + base03: '#343434', + base04: '#555555', + base05: '#ababab', + base06: '#e0e0e0', + base07: '#f9f9f9', + base08: '#e92f2f', + base09: '#e09448', + base0A: '#dddd13', + base0B: '#0ed839', + base0C: '#23edda', + base0D: '#3b48e3', + base0E: '#f996e2', + base0F: '#69542d', +}; diff --git a/packages/react-base16-styling/src/themes/solarized.ts b/packages/react-base16-styling/src/themes/solarized.ts new file mode 100644 index 00000000..aaf42b64 --- /dev/null +++ b/packages/react-base16-styling/src/themes/solarized.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'solarized', + author: 'ethan schoonover (http://ethanschoonover.com/solarized)', + base00: '#002b36', + base01: '#073642', + base02: '#586e75', + base03: '#657b83', + base04: '#839496', + base05: '#93a1a1', + base06: '#eee8d5', + base07: '#fdf6e3', + base08: '#dc322f', + base09: '#cb4b16', + base0A: '#b58900', + base0B: '#859900', + base0C: '#2aa198', + base0D: '#268bd2', + base0E: '#6c71c4', + base0F: '#d33682', +}; diff --git a/packages/react-base16-styling/src/themes/summerfruit.ts b/packages/react-base16-styling/src/themes/summerfruit.ts new file mode 100644 index 00000000..ad2165b6 --- /dev/null +++ b/packages/react-base16-styling/src/themes/summerfruit.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'summerfruit', + author: 'christopher corley (http://cscorley.github.io/)', + base00: '#151515', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#B0B0B0', + base05: '#D0D0D0', + base06: '#E0E0E0', + base07: '#FFFFFF', + base08: '#FF0086', + base09: '#FD8900', + base0A: '#ABA800', + base0B: '#00C918', + base0C: '#1faaaa', + base0D: '#3777E6', + base0E: '#AD00A1', + base0F: '#cc6633', +}; diff --git a/packages/react-base16-styling/src/themes/threezerotwofour.ts b/packages/react-base16-styling/src/themes/threezerotwofour.ts new file mode 100644 index 00000000..5084183e --- /dev/null +++ b/packages/react-base16-styling/src/themes/threezerotwofour.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'threezerotwofour', + author: 'jan t. sott (http://github.com/idleberg)', + base00: '#090300', + base01: '#3a3432', + base02: '#4a4543', + base03: '#5c5855', + base04: '#807d7c', + base05: '#a5a2a2', + base06: '#d6d5d4', + base07: '#f7f7f7', + base08: '#db2d20', + base09: '#e8bbd0', + base0A: '#fded02', + base0B: '#01a252', + base0C: '#b5e4f4', + base0D: '#01a0e4', + base0E: '#a16a94', + base0F: '#cdab53', +}; diff --git a/packages/react-base16-styling/src/themes/tomorrow.ts b/packages/react-base16-styling/src/themes/tomorrow.ts new file mode 100644 index 00000000..27af0af3 --- /dev/null +++ b/packages/react-base16-styling/src/themes/tomorrow.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'tomorrow', + author: 'chris kempson (http://chriskempson.com)', + base00: '#1d1f21', + base01: '#282a2e', + base02: '#373b41', + base03: '#969896', + base04: '#b4b7b4', + base05: '#c5c8c6', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#cc6666', + base09: '#de935f', + base0A: '#f0c674', + base0B: '#b5bd68', + base0C: '#8abeb7', + base0D: '#81a2be', + base0E: '#b294bb', + base0F: '#a3685a', +}; diff --git a/packages/react-base16-styling/src/themes/tube.ts b/packages/react-base16-styling/src/themes/tube.ts new file mode 100644 index 00000000..ca8a1f0c --- /dev/null +++ b/packages/react-base16-styling/src/themes/tube.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'london tube', + author: 'jan t. sott', + base00: '#231f20', + base01: '#1c3f95', + base02: '#5a5758', + base03: '#737171', + base04: '#959ca1', + base05: '#d9d8d8', + base06: '#e7e7e8', + base07: '#ffffff', + base08: '#ee2e24', + base09: '#f386a1', + base0A: '#ffd204', + base0B: '#00853e', + base0C: '#85cebc', + base0D: '#009ddc', + base0E: '#98005d', + base0F: '#b06110', +}; diff --git a/packages/react-base16-styling/src/themes/twilight.ts b/packages/react-base16-styling/src/themes/twilight.ts new file mode 100644 index 00000000..59b165bc --- /dev/null +++ b/packages/react-base16-styling/src/themes/twilight.ts @@ -0,0 +1,20 @@ +export default { + scheme: 'twilight', + author: 'david hart (http://hart-dev.com)', + base00: '#1e1e1e', + base01: '#323537', + base02: '#464b50', + base03: '#5f5a60', + base04: '#838184', + base05: '#a7a7a7', + base06: '#c3c3c3', + base07: '#ffffff', + base08: '#cf6a4c', + base09: '#cda869', + base0A: '#f9ee98', + base0B: '#8f9d6a', + base0C: '#afc4db', + base0D: '#7587a6', + base0E: '#9b859d', + base0F: '#9b703f', +}; diff --git a/packages/react-base16-styling/src/types.ts b/packages/react-base16-styling/src/types.ts index e4a489ee..d0318d00 100644 --- a/packages/react-base16-styling/src/types.ts +++ b/packages/react-base16-styling/src/types.ts @@ -1,5 +1,5 @@ -import { Base16Theme } from 'base16'; import * as CSS from 'csstype'; +import type { Base16Theme } from './themes/index.js'; export interface Styling { className?: string; diff --git a/packages/react-base16-styling/test/index.test.ts b/packages/react-base16-styling/test/index.test.ts index 734b6f68..0a58cea9 100644 --- a/packages/react-base16-styling/test/index.test.ts +++ b/packages/react-base16-styling/test/index.test.ts @@ -1,6 +1,10 @@ -import { createStyling, invertBase16Theme, getBase16Theme } from '../src'; -import { apathy, Base16Theme } from 'base16'; -import { Styling, StylingConfig } from '../src/types'; +import { + createStyling, + invertBase16Theme, + getBase16Theme, +} from '../src/index.js'; +import { base16Themes, Base16Theme } from '../src/themes/index.js'; +import { Styling, StylingConfig } from '../src/types.js'; const base16Theme = { scheme: 'myscheme', @@ -94,34 +98,34 @@ test('invertTheme', () => { }); test('getBase16Theme', () => { - expect(getBase16Theme('apathy')).toEqual(apathy); - expect(getBase16Theme({ extend: 'apathy' })).toEqual(apathy); + expect(getBase16Theme('apathy')).toEqual(base16Themes.apathy); + expect(getBase16Theme({ extend: 'apathy' })).toEqual(base16Themes.apathy); expect(getBase16Theme('apathy:inverted')).toEqual(apathyInverted); expect(getBase16Theme({})).toBeUndefined(); }); test('createStyling (default)', () => { const styling = createStyling(getStylingFromBase16, { - defaultBase16: apathy, + defaultBase16: base16Themes.apathy, }); const defaultStyling = styling(undefined); expect(defaultStyling('testClass')).toEqual({ className: 'testClass' }); expect(defaultStyling('testStyle')).toEqual({ - style: { color: apathy.base00 }, + style: { color: base16Themes.apathy.base00 }, }); expect(defaultStyling('testFunc', 'mod')).toEqual({ className: 'testClass--mod', style: { width: 0, - color: apathy.base00, + color: base16Themes.apathy.base00, }, }); }); test('createStyling (custom)', () => { const styling = createStyling(getStylingFromBase16, { - defaultBase16: apathy, + defaultBase16: base16Themes.apathy, }); let customStyling = styling({ testClass: 'customClass', @@ -146,13 +150,13 @@ test('createStyling (custom)', () => { className: 'testClass customClass', }); expect(customStyling('testStyle')).toEqual({ - style: { color: apathy.base00, height: 0 }, + style: { color: base16Themes.apathy.base00, height: 0 }, }); expect(customStyling('testFunc', 'mod')).toEqual({ className: 'testClass--mod customClass--mod', style: { width: 0, - color: apathy.base00, + color: base16Themes.apathy.base00, border: 0, }, }); @@ -180,7 +184,7 @@ test('createStyling (custom)', () => { test('createStyling (multiple)', () => { const styling = createStyling(getStylingFromBase16, { - defaultBase16: apathy, + defaultBase16: base16Themes.apathy, }); let customStyling = styling({ baseStyle: ({ style }) => ({ style: { ...style, color: 'blue' } }), diff --git a/packages/react-base16-styling/tsconfig.json b/packages/react-base16-styling/tsconfig.json index 19e4e718..e3160ce3 100644 --- a/packages/react-base16-styling/tsconfig.json +++ b/packages/react-base16-styling/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/react-base16-styling/tsconfig.test.json b/packages/react-base16-styling/tsconfig.test.json index d0d15f67..52e69314 100644 --- a/packages/react-base16-styling/tsconfig.test.json +++ b/packages/react-base16-styling/tsconfig.test.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.esm.base.json", "compilerOptions": { "types": ["jest"] }, diff --git a/packages/react-dock/.eslintrc.js b/packages/react-dock/.eslintrc.cjs similarity index 92% rename from packages/react-dock/.eslintrc.js rename to packages/react-dock/.eslintrc.cjs index e62f5871..33fb8f94 100644 --- a/packages/react-dock/.eslintrc.js +++ b/packages/react-dock/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/react-dock/CHANGELOG.md b/packages/react-dock/CHANGELOG.md index c12be2ae..52144956 100644 --- a/packages/react-dock/CHANGELOG.md +++ b/packages/react-dock/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.7.0 + +### Minor Changes + +- bbb1a40: Convert React packages to ESM + ## 0.6.0 ### Minor Changes diff --git a/packages/react-dock/babel.config.esm.json b/packages/react-dock/babel.config.esm.json deleted file mode 100644 index d616aff2..00000000 --- a/packages/react-dock/babel.config.esm.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-dock/babel.config.json b/packages/react-dock/babel.config.json deleted file mode 100644 index 814fca2b..00000000 --- a/packages/react-dock/babel.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-dock/demo/.eslintrc.js b/packages/react-dock/demo/.eslintrc.js index a9cf623b..6a8196ce 100644 --- a/packages/react-dock/demo/.eslintrc.js +++ b/packages/react-dock/demo/.eslintrc.js @@ -2,7 +2,7 @@ module.exports = { extends: '../../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, overrides: [ { diff --git a/packages/react-dock/demo/CHANGELOG.md b/packages/react-dock/demo/CHANGELOG.md index fa789e88..36b7ba38 100644 --- a/packages/react-dock/demo/CHANGELOG.md +++ b/packages/react-dock/demo/CHANGELOG.md @@ -1,5 +1,12 @@ # react-dock-demo +## 0.1.6 + +### Patch Changes + +- Updated dependencies [bbb1a40] + - react-dock@0.7.0 + ## 0.1.5 ### Patch Changes diff --git a/packages/react-dock/demo/package.json b/packages/react-dock/demo/package.json index f5cf200d..c63cabb7 100644 --- a/packages/react-dock/demo/package.json +++ b/packages/react-dock/demo/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-dock-demo", - "version": "0.1.5", + "version": "0.1.6", "license": "MIT", "scripts": { "start": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack serve --open", @@ -11,36 +11,36 @@ }, "dependencies": { "react": "^18.2.0", - "react-bootstrap": "^2.8.0", - "react-dock": "^0.6.0", + "react-bootstrap": "^2.10.2", + "react-dock": "^0.7.0", "react-dom": "^18.2.0", - "react-icons": "^4.10.1", + "react-icons": "^5.0.1", "react-is": "^18.2.0", "styled-components": "^5.3.11" }, "devDependencies": { - "@babel/core": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@types/node": "^18.17.3", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", + "@babel/core": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@types/node": "^20.11.30", + "@types/react": "^18.2.72", + "@types/react-dom": "^18.2.22", + "@types/styled-components": "^5.1.34", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", "babel-loader": "^9.1.3", "cross-env": "^7.0.3", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-react": "^7.33.1", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^8.0.0", - "html-webpack-plugin": "^5.5.3", - "ts-node": "^10.9.1", - "typescript": "~5.1.6", - "webpack": "^5.88.2", + "fork-ts-checker-webpack-plugin": "^9.0.2", + "html-webpack-plugin": "^5.6.0", + "ts-node": "^10.9.2", + "typescript": "~5.3.3", + "webpack": "^5.91.0", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1" + "webpack-dev-server": "^5.0.4" } } diff --git a/packages/react-dock/demo/src/App.tsx b/packages/react-dock/demo/src/App.tsx index fff6a77e..752a8f2e 100644 --- a/packages/react-dock/demo/src/App.tsx +++ b/packages/react-dock/demo/src/App.tsx @@ -4,7 +4,7 @@ import Form from 'react-bootstrap/Form'; import { BsX } from 'react-icons/bs'; import styled from 'styled-components'; -import Dock from '../../src/Dock'; +import { Dock } from 'react-dock'; const Root = styled.div` font-size: 16px; diff --git a/packages/react-dock/jest.config.cjs b/packages/react-dock/jest.config.cjs new file mode 100644 index 00000000..eb51aefc --- /dev/null +++ b/packages/react-dock/jest.config.cjs @@ -0,0 +1,13 @@ +module.exports = { + testEnvironment: 'jsdom', + extensionsToTreatAsEsm: ['.ts', '.tsx'], + moduleNameMapper: { + '^(\\.{1,2}/.*)\\.js$': '$1', + }, + transform: { + '^.+\\.tsx?$': [ + 'ts-jest', + { tsconfig: 'tsconfig.test.json', useESM: true }, + ], + }, +}; diff --git a/packages/react-dock/jest.config.js b/packages/react-dock/jest.config.js deleted file mode 100644 index dcef0803..00000000 --- a/packages/react-dock/jest.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - preset: 'ts-jest', - testEnvironment: 'jsdom', - transform: { - '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], - }, -}; diff --git a/packages/react-dock/package.json b/packages/react-dock/package.json index e69137f7..459ef373 100644 --- a/packages/react-dock/package.json +++ b/packages/react-dock/package.json @@ -1,6 +1,6 @@ { "name": "react-dock", - "version": "0.6.0", + "version": "0.7.0", "description": "Resizable dockable react component", "keywords": [ "react", @@ -18,59 +18,45 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types", - "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", + "build": "tsc", "clean": "rimraf lib", - "test": "jest", + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" + "prepublish": "pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/lodash": "^4.14.196", - "@types/prop-types": "^15.7.5", - "lodash.debounce": "^4.0.8", - "prop-types": "^15.8.1" + "@types/lodash-es": "^4.17.12", + "lodash-es": "^4.17.21" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/plugin-transform-runtime": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@types/jest": "^29.5.3", - "@types/lodash.debounce": "^4.0.7", - "@types/react": "^18.2.18", - "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "eslint-plugin-react": "^7.33.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.2.72", + "@types/react-test-renderer": "^18.0.7", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "jest": "^29.6.2", - "jest-environment-jsdom": "^29.6.2", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "react": "^18.2.0", "react-test-renderer": "^18.2.0", - "rimraf": "^5.0.1", - "ts-jest": "^29.1.1", - "typescript": "~5.1.6" + "rimraf": "^5.0.5", + "ts-jest": "^29.1.2", + "typescript": "~5.3.3" }, "peerDependencies": { "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/react-dock/src/Dock.tsx b/packages/react-dock/src/Dock.tsx index 45d6f0f2..a555c6cf 100644 --- a/packages/react-dock/src/Dock.tsx +++ b/packages/react-dock/src/Dock.tsx @@ -1,8 +1,7 @@ import React, { Component, ReactNode } from 'react'; -import PropTypes from 'prop-types'; -import debounce from 'lodash.debounce'; -import type { DebouncedFunc } from 'lodash'; -import autoprefix from './autoprefix'; +import { debounce } from 'lodash-es'; +import type { DebouncedFunc } from 'lodash-es'; +import autoprefix from './autoprefix.js'; interface Styles { [key: string]: React.CSSProperties; @@ -260,21 +259,6 @@ export default class Dock extends Component { isWindowResizing: false, }; - static propTypes = { - position: PropTypes.oneOf(['left', 'right', 'top', 'bottom']), - zIndex: PropTypes.number, - fluid: PropTypes.bool, - size: PropTypes.number, - defaultSize: PropTypes.number, - dimMode: PropTypes.oneOf(['none', 'transparent', 'opaque']), - isVisible: PropTypes.bool, - onVisibleChange: PropTypes.func, - onSizeChange: PropTypes.func, - dimStyle: PropTypes.object, - dockStyle: PropTypes.object, - duration: PropTypes.number, - }; - static defaultProps = { position: 'left', zIndex: 99999999, diff --git a/packages/react-dock/src/index.ts b/packages/react-dock/src/index.ts index 40652fcc..8c1931d2 100644 --- a/packages/react-dock/src/index.ts +++ b/packages/react-dock/src/index.ts @@ -1 +1 @@ -export { default as Dock } from './Dock'; +export { default as Dock } from './Dock.js'; diff --git a/packages/react-dock/test/index.test.tsx b/packages/react-dock/test/index.test.tsx index 336272dc..33826cb8 100644 --- a/packages/react-dock/test/index.test.tsx +++ b/packages/react-dock/test/index.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { createRenderer } from 'react-test-renderer/shallow'; -import Dock from '../src/Dock'; +import TestRenderer from 'react-test-renderer/shallow'; +import Dock from '../src/Dock.js'; describe('Dock component', function () { it('should have shallow rendering', function () { - const renderer = createRenderer(); + const renderer = TestRenderer.createRenderer(); const DockEl = ; renderer.render(DockEl); diff --git a/packages/react-dock/tsconfig.json b/packages/react-dock/tsconfig.json index 0aade49a..73069549 100644 --- a/packages/react-dock/tsconfig.json +++ b/packages/react-dock/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/react-dock/tsconfig.test.json b/packages/react-dock/tsconfig.test.json index 434e50ff..d0d1a7be 100644 --- a/packages/react-dock/tsconfig.test.json +++ b/packages/react-dock/tsconfig.test.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { "types": ["jest"] }, diff --git a/packages/react-json-tree/.eslintrc.js b/packages/react-json-tree/.eslintrc.cjs similarity index 94% rename from packages/react-json-tree/.eslintrc.js rename to packages/react-json-tree/.eslintrc.cjs index cda9a035..da9d7dfc 100644 --- a/packages/react-json-tree/.eslintrc.js +++ b/packages/react-json-tree/.eslintrc.cjs @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/react-json-tree/CHANGELOG.md b/packages/react-json-tree/CHANGELOG.md index c540052d..5dc60501 100644 --- a/packages/react-json-tree/CHANGELOG.md +++ b/packages/react-json-tree/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +## 0.19.0 + +### Minor Changes + +- bbb1a40: Convert React packages to ESM + +### Patch Changes + +- Updated dependencies [bbb1a40] + - react-base16-styling@0.10.0 + ## 0.18.0 ### Major Changes diff --git a/packages/react-json-tree/README.md b/packages/react-json-tree/README.md index 7a55b3e1..678a5b6a 100644 --- a/packages/react-json-tree/README.md +++ b/packages/react-json-tree/README.md @@ -26,7 +26,7 @@ const json = { #### Result: -![](http://cl.ly/image/3f2C2k2t3D0o/screenshot%202015-08-26%20at%2010.24.12%20AM.png) +![](https://i.ibb.co/0KSYRJg/example-result.png) Check out [examples](examples) directory for more details. diff --git a/packages/react-json-tree/babel.config.esm.json b/packages/react-json-tree/babel.config.esm.json deleted file mode 100644 index d616aff2..00000000 --- a/packages/react-json-tree/babel.config.esm.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults", "modules": false }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-json-tree/babel.config.json b/packages/react-json-tree/babel.config.json deleted file mode 100644 index 814fca2b..00000000 --- a/packages/react-json-tree/babel.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { "targets": "defaults" }], - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/react-json-tree/examples/.eslintrc.js b/packages/react-json-tree/examples/.eslintrc.js index a9cf623b..6a8196ce 100644 --- a/packages/react-json-tree/examples/.eslintrc.js +++ b/packages/react-json-tree/examples/.eslintrc.js @@ -2,7 +2,7 @@ module.exports = { extends: '../../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, overrides: [ { diff --git a/packages/react-json-tree/examples/CHANGELOG.md b/packages/react-json-tree/examples/CHANGELOG.md index 8db8a322..2a782f0a 100644 --- a/packages/react-json-tree/examples/CHANGELOG.md +++ b/packages/react-json-tree/examples/CHANGELOG.md @@ -1,5 +1,13 @@ # react-json-tree-example +## 1.1.9 + +### Patch Changes + +- Updated dependencies [bbb1a40] + - react-base16-styling@0.10.0 + - react-json-tree@0.19.0 + ## 1.1.8 ### Patch Changes diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index ad0097d2..bd425e8d 100644 --- a/packages/react-json-tree/examples/package.json +++ b/packages/react-json-tree/examples/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-json-tree-example", - "version": "1.1.8", + "version": "1.1.9", "description": "React-Json-Tree example", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples", "bugs": { @@ -19,34 +19,34 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "immutable": "^4.3.2", + "immutable": "^4.3.5", "react": "^18.2.0", - "react-base16-styling": "^0.9.1", + "react-base16-styling": "^0.10.0", "react-dom": "^18.2.0", - "react-json-tree": "^0.18.0" + "react-json-tree": "^0.19.0" }, "devDependencies": { - "@babel/core": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@types/node": "^18.17.3", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", + "@babel/core": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@types/node": "^20.11.30", + "@types/react": "^18.2.72", + "@types/react-dom": "^18.2.22", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", "babel-loader": "^9.1.3", "cross-env": "^7.0.3", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-react": "^7.33.1", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^8.0.0", - "html-webpack-plugin": "^5.5.3", - "ts-node": "^10.9.1", - "typescript": "~5.1.6", - "webpack": "^5.88.2", + "fork-ts-checker-webpack-plugin": "^9.0.2", + "html-webpack-plugin": "^5.6.0", + "ts-node": "^10.9.2", + "typescript": "~5.3.3", + "webpack": "^5.91.0", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1" + "webpack-dev-server": "^5.0.4" } } diff --git a/packages/react-json-tree/jest.config.cjs b/packages/react-json-tree/jest.config.cjs new file mode 100644 index 00000000..7dd68539 --- /dev/null +++ b/packages/react-json-tree/jest.config.cjs @@ -0,0 +1,12 @@ +module.exports = { + extensionsToTreatAsEsm: ['.ts', '.tsx'], + moduleNameMapper: { + '^(\\.{1,2}/.*)\\.js$': '$1', + }, + transform: { + '^.+\\.tsx?$': [ + 'ts-jest', + { tsconfig: 'tsconfig.test.json', useESM: true }, + ], + }, +}; diff --git a/packages/react-json-tree/jest.config.js b/packages/react-json-tree/jest.config.js deleted file mode 100644 index f68efd05..00000000 --- a/packages/react-json-tree/jest.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - preset: 'ts-jest', - transform: { - '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], - }, -}; diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json index 27342b38..969c6bdb 100644 --- a/packages/react-json-tree/package.json +++ b/packages/react-json-tree/package.json @@ -1,6 +1,6 @@ { "name": "react-json-tree", - "version": "0.18.0", + "version": "0.19.0", "description": "React JSON Viewer Component, Extracted from redux-devtools", "keywords": [ "react", @@ -22,65 +22,44 @@ "lib", "src" ], - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", - "unpkg": "lib/umd/react-json-tree.umd.js", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "type": "module", "sideEffects": false, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd", - "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", - "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm", - "build:types": "tsc --emitDeclarationOnly", - "build:umd": "rollup -c", + "build": "tsc", "clean": "rimraf lib", - "test": "jest", + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit", "prepack": "pnpm run clean && pnpm run build", - "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" + "prepublish": "pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/lodash": "^4.14.196", - "react-base16-styling": "^0.9.1" + "@types/lodash": "^4.17.0", + "react-base16-styling": "^0.10.0" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/plugin-transform-runtime": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@rollup/plugin-babel": "^6.0.3", - "@rollup/plugin-commonjs": "^25.0.3", - "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-terser": "^0.4.3", - "@types/jest": "^29.5.3", - "@types/node": "^18.17.3", - "@types/react": "^18.2.18", - "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "eslint-plugin-react": "^7.33.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.2.72", + "@types/react-test-renderer": "^18.0.7", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "jest": "^29.6.2", + "jest": "^29.7.0", "react": "^18.2.0", "react-test-renderer": "^18.2.0", - "rimraf": "^5.0.1", - "rollup": "^3.27.2", - "rollup-plugin-typescript2": "^0.35.0", - "ts-jest": "^29.1.1", - "tslib": "^2.6.1", - "typescript": "~5.1.6" + "rimraf": "^5.0.5", + "ts-jest": "^29.1.2", + "typescript": "~5.3.3" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/packages/react-json-tree/rollup.config.mjs b/packages/react-json-tree/rollup.config.mjs deleted file mode 100644 index de6c3688..00000000 --- a/packages/react-json-tree/rollup.config.mjs +++ /dev/null @@ -1,59 +0,0 @@ -import typescript from 'rollup-plugin-typescript2'; -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import babel from '@rollup/plugin-babel'; -import terser from '@rollup/plugin-terser'; - -const config = [ - { - input: 'src/index.tsx', - output: { - name: 'ReactJsonTree', - file: 'lib/umd/react-json-tree.js', - format: 'umd', - globals: { - react: 'React', - }, - }, - plugins: [ - typescript({ - tsconfigOverride: { compilerOptions: { declaration: false } }, - }), - resolve(), - commonjs(), - babel({ - babelHelpers: 'runtime', - extensions: ['.ts', '.tsx'], - plugins: ['@babel/plugin-transform-runtime'], - }), - ], - external: ['react'], - }, - { - input: 'src/index.tsx', - output: { - name: 'ReactJsonTree', - file: 'lib/umd/react-json-tree.min.js', - format: 'umd', - globals: { - react: 'React', - }, - }, - plugins: [ - typescript({ - tsconfigOverride: { compilerOptions: { declaration: false } }, - }), - resolve(), - commonjs(), - babel({ - babelHelpers: 'runtime', - extensions: ['.ts', '.tsx'], - plugins: ['@babel/plugin-transform-runtime'], - }), - terser(), - ], - external: ['react'], - }, -]; - -export default config; diff --git a/packages/react-json-tree/src/ItemRange.tsx b/packages/react-json-tree/src/ItemRange.tsx index 52abad4a..a051a015 100644 --- a/packages/react-json-tree/src/ItemRange.tsx +++ b/packages/react-json-tree/src/ItemRange.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from 'react'; -import JSONArrow from './JSONArrow'; -import type { CircularCache, CommonInternalProps } from './types'; +import JSONArrow from './JSONArrow.js'; +import type { CircularCache, CommonInternalProps } from './types.js'; interface Props extends CommonInternalProps { data: unknown; diff --git a/packages/react-json-tree/src/JSONArrayNode.tsx b/packages/react-json-tree/src/JSONArrayNode.tsx index 76da807c..7faf5c45 100644 --- a/packages/react-json-tree/src/JSONArrayNode.tsx +++ b/packages/react-json-tree/src/JSONArrayNode.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import JSONNestedNode from './JSONNestedNode'; -import type { CommonInternalProps } from './types'; +import JSONNestedNode from './JSONNestedNode.js'; +import type { CommonInternalProps } from './types.js'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. diff --git a/packages/react-json-tree/src/JSONIterableNode.tsx b/packages/react-json-tree/src/JSONIterableNode.tsx index 0357b511..defce1bd 100644 --- a/packages/react-json-tree/src/JSONIterableNode.tsx +++ b/packages/react-json-tree/src/JSONIterableNode.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import JSONNestedNode from './JSONNestedNode'; -import type { CommonInternalProps } from './types'; +import JSONNestedNode from './JSONNestedNode.js'; +import type { CommonInternalProps } from './types.js'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. diff --git a/packages/react-json-tree/src/JSONNestedNode.tsx b/packages/react-json-tree/src/JSONNestedNode.tsx index e62d6532..956f1e5f 100644 --- a/packages/react-json-tree/src/JSONNestedNode.tsx +++ b/packages/react-json-tree/src/JSONNestedNode.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useState } from 'react'; -import JSONArrow from './JSONArrow'; -import getCollectionEntries from './getCollectionEntries'; -import JSONNode from './JSONNode'; -import ItemRange from './ItemRange'; -import type { CircularCache, CommonInternalProps } from './types'; +import JSONArrow from './JSONArrow.js'; +import getCollectionEntries from './getCollectionEntries.js'; +import JSONNode from './JSONNode.js'; +import ItemRange from './ItemRange.js'; +import type { CircularCache, CommonInternalProps } from './types.js'; /** * Renders nested values (eg. objects, arrays, lists, etc.) diff --git a/packages/react-json-tree/src/JSONNode.tsx b/packages/react-json-tree/src/JSONNode.tsx index f7703350..e41092fd 100644 --- a/packages/react-json-tree/src/JSONNode.tsx +++ b/packages/react-json-tree/src/JSONNode.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import objType from './objType'; -import JSONObjectNode from './JSONObjectNode'; -import JSONArrayNode from './JSONArrayNode'; -import JSONIterableNode from './JSONIterableNode'; -import JSONValueNode from './JSONValueNode'; -import type { CommonInternalProps } from './types'; +import objType from './objType.js'; +import JSONObjectNode from './JSONObjectNode.js'; +import JSONArrayNode from './JSONArrayNode.js'; +import JSONIterableNode from './JSONIterableNode.js'; +import JSONValueNode from './JSONValueNode.js'; +import type { CommonInternalProps } from './types.js'; interface Props extends CommonInternalProps { value: unknown; diff --git a/packages/react-json-tree/src/JSONObjectNode.tsx b/packages/react-json-tree/src/JSONObjectNode.tsx index 95401f83..09c50744 100644 --- a/packages/react-json-tree/src/JSONObjectNode.tsx +++ b/packages/react-json-tree/src/JSONObjectNode.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import JSONNestedNode from './JSONNestedNode'; -import type { CommonInternalProps } from './types'; +import JSONNestedNode from './JSONNestedNode.js'; +import type { CommonInternalProps } from './types.js'; // Returns the "n Items" string for this node, // generating and caching it if it hasn't been created yet. diff --git a/packages/react-json-tree/src/JSONValueNode.tsx b/packages/react-json-tree/src/JSONValueNode.tsx index 24e4272d..38a7297d 100644 --- a/packages/react-json-tree/src/JSONValueNode.tsx +++ b/packages/react-json-tree/src/JSONValueNode.tsx @@ -6,7 +6,7 @@ import type { LabelRenderer, Styling, ValueRenderer, -} from './types'; +} from './types.js'; /** * Renders simple values (eg. strings, numbers, booleans, etc) diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts index 5c776c7e..47665c19 100644 --- a/packages/react-json-tree/src/createStylingFromTheme.ts +++ b/packages/react-json-tree/src/createStylingFromTheme.ts @@ -6,7 +6,7 @@ import type { StylingFunction, Theme, } from 'react-base16-styling'; -import solarized from './themes/solarized'; +import solarized from './themes/solarized.js'; const colorMap = (theme: Base16Theme) => ({ BACKGROUND_COLOR: theme.base00, diff --git a/packages/react-json-tree/src/getCollectionEntries.ts b/packages/react-json-tree/src/getCollectionEntries.ts index f11d36de..67918949 100644 --- a/packages/react-json-tree/src/getCollectionEntries.ts +++ b/packages/react-json-tree/src/getCollectionEntries.ts @@ -1,4 +1,4 @@ -import type { SortObjectKeys } from './types'; +import type { SortObjectKeys } from './types.js'; function getLength(type: string, collection: unknown) { if (type === 'Object') { diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx index 5fc23dae..6f298f0e 100644 --- a/packages/react-json-tree/src/index.tsx +++ b/packages/react-json-tree/src/index.tsx @@ -4,17 +4,17 @@ // port by Daniele Zannotti http://www.github.com/dzannotti import React, { useMemo } from 'react'; -import JSONNode from './JSONNode'; -import createStylingFromTheme from './createStylingFromTheme'; import { invertTheme } from 'react-base16-styling'; import type { StylingValue, Theme } from 'react-base16-styling'; +import JSONNode from './JSONNode.js'; +import createStylingFromTheme from './createStylingFromTheme.js'; import type { CommonExternalProps, GetItemString, IsCustomNode, LabelRenderer, ShouldExpandNodeInitially, -} from './types'; +} from './types.js'; interface Props extends Partial { data: unknown; @@ -86,5 +86,5 @@ export type { SortObjectKeys, Styling, CommonExternalProps, -} from './types'; +} from './types.js'; export type { StylingValue }; diff --git a/packages/react-json-tree/test/index.spec.tsx b/packages/react-json-tree/test/index.spec.tsx index 99661291..ac49b523 100644 --- a/packages/react-json-tree/test/index.spec.tsx +++ b/packages/react-json-tree/test/index.spec.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { createRenderer } from 'react-test-renderer/shallow'; +import TestRenderer from 'react-test-renderer/shallow'; -import { JSONTree } from '../src/index'; -import JSONNode from '../src/JSONNode'; +import { JSONTree } from '../src/index.js'; +import JSONNode from '../src/JSONNode.js'; const BASIC_DATA = { a: 1, b: 'c' }; function render(component: React.ReactElement) { - const renderer = createRenderer(); + const renderer = TestRenderer.createRenderer(); renderer.render(component); return renderer.getRenderOutput(); } diff --git a/packages/react-json-tree/test/objType.spec.ts b/packages/react-json-tree/test/objType.spec.ts index fce81ef9..6a76ac4c 100644 --- a/packages/react-json-tree/test/objType.spec.ts +++ b/packages/react-json-tree/test/objType.spec.ts @@ -1,4 +1,4 @@ -import objType from '../src/objType'; +import objType from '../src/objType.js'; describe('objType', () => { it('should determine the correct type', () => { diff --git a/packages/react-json-tree/tsconfig.json b/packages/react-json-tree/tsconfig.json index 0aade49a..73069549 100644 --- a/packages/react-json-tree/tsconfig.json +++ b/packages/react-json-tree/tsconfig.json @@ -1,7 +1,7 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { - "outDir": "lib/types" + "outDir": "lib" }, "include": ["src"] } diff --git a/packages/react-json-tree/tsconfig.test.json b/packages/react-json-tree/tsconfig.test.json index 434e50ff..d0d1a7be 100644 --- a/packages/react-json-tree/tsconfig.test.json +++ b/packages/react-json-tree/tsconfig.test.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.esm.react.base.json", "compilerOptions": { "types": ["jest"] }, diff --git a/packages/redux-devtools-app/.eslintrc.js b/packages/redux-devtools-app/.eslintrc.js index a8a72eb9..02b8bb24 100644 --- a/packages/redux-devtools-app/.eslintrc.js +++ b/packages/redux-devtools-app/.eslintrc.js @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/redux-devtools-app/CHANGELOG.md b/packages/redux-devtools-app/CHANGELOG.md index 2ccdeae8..56c97c29 100644 --- a/packages/redux-devtools-app/CHANGELOG.md +++ b/packages/redux-devtools-app/CHANGELOG.md @@ -1,5 +1,145 @@ # Change Log +## 6.0.1 + +### Patch Changes + +- 191d419: Convert d3 packages to ESM +- Updated dependencies [191d419] + - d3-state-visualizer@3.0.0 + - @redux-devtools/chart-monitor@5.0.1 + +## 6.0.0 + +### Major Changes + +- 5cfe3e5: Update min required React version to 16.8.4 + +### Patch Changes + +- Updated dependencies [5cfe3e5] +- Updated dependencies [decc035] + - @redux-devtools/chart-monitor@5.0.0 + - @redux-devtools/inspector-monitor-test-tab@4.0.0 + - @redux-devtools/inspector-monitor-trace-tab@4.0.0 + - @redux-devtools/inspector-monitor@6.0.0 + - @redux-devtools/log-monitor@5.0.0 + - @redux-devtools/rtk-query-monitor@5.0.0 + - @redux-devtools/slider-monitor@5.0.0 + - @redux-devtools/core@4.0.0 + +## 5.0.0 + +### Major Changes + +- 158ba2c: Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency. + +### Patch Changes + +- Updated dependencies [158ba2c] +- Updated dependencies [6954eb9] + - @redux-devtools/inspector-monitor-test-tab@3.0.0 + - @redux-devtools/inspector-monitor-trace-tab@3.0.0 + - @redux-devtools/inspector-monitor@5.0.0 + - @redux-devtools/rtk-query-monitor@4.0.0 + +## 4.0.2 + +### Patch Changes + +- 7f5bddbd: Widen peer dependencies +- Updated dependencies [7f5bddbd] +- Updated dependencies [6fc18ed7] + - @redux-devtools/chart-monitor@4.1.0 + - @redux-devtools/inspector-monitor-test-tab@2.1.0 + - @redux-devtools/inspector-monitor-trace-tab@2.1.0 + - @redux-devtools/inspector-monitor@4.1.0 + - @redux-devtools/log-monitor@4.1.0 + - @redux-devtools/rtk-query-monitor@3.2.0 + - @redux-devtools/slider-monitor@4.1.0 + - @redux-devtools/ui@1.3.1 + - @redux-devtools/core@3.14.0 + +## 4.0.1 + +### Patch Changes + +- 65205f90: Replace Action with Action +- Updated dependencies [65205f90] + - @redux-devtools/chart-monitor@4.0.1 + - @redux-devtools/inspector-monitor-test-tab@2.0.1 + - @redux-devtools/inspector-monitor-trace-tab@2.0.1 + - @redux-devtools/inspector-monitor@4.0.1 + - @redux-devtools/core@3.13.2 + +## 4.0.0 + +### Major Changes + +- e57bcb39: The UMD bundle now exports the same thing as the library and includes the CSS in a sperate file. Therfore, the new usage is: + + ```diff + + + + + Redux DevTools + + + + +
+ + + + + + + + ``` + +## 3.0.0 + +### Major Changes + +- 57751ff9: Add react-dom peerDependency and bump react peerDependency to `^16.8.0 || ^17.0.0 || ^18.0.0` + +### Patch Changes + +- Updated dependencies [57751ff9] + - @redux-devtools/inspector-monitor-test-tab@2.0.0 + - @redux-devtools/inspector-monitor-trace-tab@2.0.0 + - @redux-devtools/inspector-monitor@4.0.0 + +## 2.2.3 + +### Patch Changes + +- fe32709c: Update jsondiffpatch to fix bundling issues. +- Updated dependencies [fe32709c] + - @redux-devtools/inspector-monitor@3.1.1 + +## 2.2.2 + +### Patch Changes + +- Updated dependencies [14a79573] +- Updated dependencies [d54adb76] +- Updated dependencies [bb9bd907] + - @redux-devtools/inspector-monitor@3.1.0 + - @redux-devtools/inspector-monitor-test-tab@2.0.0 + - @redux-devtools/inspector-monitor-trace-tab@2.0.0 + ## 2.2.1 ### Patch Changes diff --git a/packages/redux-devtools-app/buildUmd.mjs b/packages/redux-devtools-app/buildUmd.mjs new file mode 100644 index 00000000..8c3db4a7 --- /dev/null +++ b/packages/redux-devtools-app/buildUmd.mjs @@ -0,0 +1,67 @@ +import * as esbuild from 'esbuild'; + +const args = process.argv.slice(2); +const prod = !args.includes('--dev'); + +await esbuild.build({ + bundle: true, + logLevel: 'info', + format: 'iife', + globalName: 'ReduxDevToolsApp', + outfile: prod ? 'umd/redux-devtools-app.min.js' : 'umd/redux-devtools-app.js', + minify: prod, + sourcemap: true, + define: { + 'process.env.NODE_ENV': prod ? '"production"' : '"development"', + }, + entryPoints: ['src/index.tsx'], + loader: { + '.woff2': 'dataurl', + }, + plugins: [ + importAsGlobals({ + react: 'React', + 'react-dom': 'ReactDOM', + }), + ], +}); + +// https://github.com/evanw/esbuild/issues/337#issuecomment-954633403 +function importAsGlobals(mapping) { + // https://stackoverflow.com/a/3561711/153718 + const escRe = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); + const filter = new RegExp( + Object.keys(mapping) + .map((mod) => `^${escRe(mod)}$`) + .join('|'), + ); + + return { + name: 'global-imports', + setup(build) { + build.onResolve({ filter }, (args) => { + if (!mapping[args.path]) { + throw new Error('Unknown global: ' + args.path); + } + return { + path: args.path, + namespace: 'external-global', + }; + }); + + build.onLoad( + { + filter, + namespace: 'external-global', + }, + async (args) => { + const global = mapping[args.path]; + return { + contents: `module.exports = ${global};`, + loader: 'js', + }; + }, + ); + }, + }; +} diff --git a/packages/redux-devtools-app/jest.config.js b/packages/redux-devtools-app/jest.config.js index e5abc3cc..a65c379b 100644 --- a/packages/redux-devtools-app/jest.config.js +++ b/packages/redux-devtools-app/jest.config.js @@ -10,6 +10,6 @@ module.exports = { '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }], }, transformIgnorePatterns: [ - 'node_modules/(?!.pnpm|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)', + 'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)', ], }; diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json index bf3636f3..1c15706a 100644 --- a/packages/redux-devtools-app/package.json +++ b/packages/redux-devtools-app/package.json @@ -1,6 +1,6 @@ { "name": "@redux-devtools/app", - "version": "2.2.1", + "version": "6.0.1", "description": "Redux DevTools app", "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-app", "bugs": { @@ -30,8 +30,8 @@ "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm", "build:types": "tsc --emitDeclarationOnly", "build:web": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env platform=web", - "build:umd": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --config webpack.config.umd.ts", - "build:umd:min": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack --env production --config webpack.config.umd.ts", + "build:umd": "node buildUmd.mjs --dev", + "build:umd:min": "node buildUmd.mjs", "clean": "rimraf build lib umd", "test": "jest", "lint": "eslint . --ext .ts,.tsx", @@ -40,86 +40,87 @@ "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@redux-devtools/chart-monitor": "^4.0.0", - "@redux-devtools/core": "^3.13.0", - "@redux-devtools/inspector-monitor": "^3.0.2", - "@redux-devtools/inspector-monitor-test-tab": "^1.0.0", - "@redux-devtools/inspector-monitor-trace-tab": "^1.0.0", - "@redux-devtools/log-monitor": "^4.0.2", - "@redux-devtools/rtk-query-monitor": "^3.1.1", - "@redux-devtools/slider-monitor": "^4.0.0", - "@redux-devtools/ui": "^1.3.0", - "@reduxjs/toolkit": "^1.9.5", - "@types/prop-types": "^15.7.5", - "d3-state-visualizer": "^2.0.0", + "@babel/runtime": "^7.24.1", + "@redux-devtools/chart-monitor": "^5.0.1", + "@redux-devtools/core": "^4.0.0", + "@redux-devtools/inspector-monitor": "^6.0.0", + "@redux-devtools/inspector-monitor-test-tab": "^4.0.0", + "@redux-devtools/inspector-monitor-trace-tab": "^4.0.0", + "@redux-devtools/log-monitor": "^5.0.0", + "@redux-devtools/rtk-query-monitor": "^5.0.0", + "@redux-devtools/slider-monitor": "^5.0.0", + "@redux-devtools/ui": "^1.3.1", + "@reduxjs/toolkit": "^1.9.7", + "d3-state-visualizer": "^3.0.0", "javascript-stringify": "^2.1.0", "jsan": "^3.1.14", - "jsondiffpatch": "^0.4.1", + "jsondiffpatch": "^0.6.0", "jsonpath-plus": "github:80avin/JSONPath#de0566aee8abf14b7f0f57e2711dbea06cf997fa", "localforage": "^1.10.0", "lodash": "^4.17.21", - "prop-types": "^15.8.1", - "react-icons": "^4.10.1", + "react-icons": "^5.0.1", "react-is": "^18.2.0", - "react-redux": "^8.1.2", + "react-redux": "^8.1.3", "redux": "^4.2.1", "redux-persist": "^6.0.0", - "socketcluster-client": "^17.2.2" + "socketcluster-client": "^19.1.0" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/plugin-transform-runtime": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", + "@babel/cli": "^7.24.1", + "@babel/core": "^7.24.3", + "@babel/eslint-parser": "^7.24.1", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@emotion/react": "^11.11.4", "@rjsf/core": "^4.2.3", - "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^14.0.0", - "@types/jest": "^29.5.3", - "@types/jsan": "^3.1.2", - "@types/json-schema": "^7.0.12", - "@types/lodash": "^4.14.196", - "@types/node": "^18.17.3", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/socketcluster-client": "^16.0.0", - "@types/styled-components": "^5.1.26", - "@types/testing-library__jest-dom": "^5.14.9", - "@types/webpack-env": "^1.18.1", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^14.2.2", + "@types/jest": "^29.5.12", + "@types/jsan": "^3.1.5", + "@types/json-schema": "^7.0.15", + "@types/lodash": "^4.17.0", + "@types/node": "^20.11.30", + "@types/react": "^18.2.72", + "@types/react-dom": "^18.2.22", + "@types/socketcluster-client": "^19.1.0", + "@types/styled-components": "^5.1.34", + "@types/webpack-env": "^1.18.4", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", "babel-loader": "^9.1.3", "cross-env": "^7.0.3", - "css-loader": "^6.8.1", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.2.3", - "eslint-plugin-react": "^7.33.1", + "css-loader": "^6.10.0", + "esbuild": "^0.20.2", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "fork-ts-checker-webpack-plugin": "^8.0.0", - "html-loader": "^4.2.0", - "html-webpack-plugin": "^5.5.3", - "jest": "^29.6.2", - "jest-environment-jsdom": "^29.6.2", + "fork-ts-checker-webpack-plugin": "^9.0.2", + "html-loader": "^5.0.0", + "html-webpack-plugin": "^5.6.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "rimraf": "^5.0.1", - "style-loader": "^3.3.3", + "rimraf": "^5.0.5", + "style-loader": "^3.3.4", "styled-components": "^5.3.11", - "ts-jest": "^29.1.1", - "ts-node": "^10.9.1", - "typescript": "~5.1.6", - "webpack": "^5.88.2", + "ts-jest": "^29.1.2", + "ts-node": "^10.9.2", + "typescript": "~5.3.3", + "webpack": "^5.91.0", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1" + "webpack-dev-server": "^5.0.4" }, "peerDependencies": { - "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "@types/styled-components": "^5.1.26", - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", + "@emotion/react": "^11.11.4", + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "@types/styled-components": "^5.1.34", + "react": "^16.8.4 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0", "styled-components": "^5.3.11" } } diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index d1b6cf87..f5b933ad 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/packages/redux-devtools-app/src/actions/index.ts @@ -55,7 +55,7 @@ import { StateFilterState } from '../reducers/stateFilter'; let monitorReducer: ( monitorProps: unknown, state: unknown | undefined, - action: Action, + action: Action, ) => unknown; let monitorProps: unknown = {}; @@ -125,7 +125,7 @@ export interface InitMonitorAction { update: ( monitorProps: unknown, state: unknown | undefined, - action: Action, + action: Action, ) => unknown; monitorProps: unknown; } @@ -135,7 +135,7 @@ export interface MonitorActionAction { monitorReducer: ( monitorProps: unknown, state: unknown | undefined, - action: Action, + action: Action, ) => unknown; monitorProps: unknown; } @@ -174,8 +174,8 @@ interface ReorderActionAction { interface ImportStateAction { type: 'IMPORT_STATE'; nextLiftedState: - | LiftedState, unknown> - | readonly Action[]; + | LiftedState, unknown> + | readonly Action[]; preloadedState?: unknown; noRecompute?: boolean | undefined; } @@ -226,7 +226,7 @@ export function liftedDispatch( | InitMonitorAction | JumpToStateAction | JumpToActionAction - | LiftedAction, unknown>, + | LiftedAction, unknown>, ): MonitorActionAction | LiftedActionDispatchAction { if (action.type[0] === '@') { if (action.type === '@@INIT_MONITOR') { diff --git a/packages/redux-devtools-app/src/components/BottomButtons.tsx b/packages/redux-devtools-app/src/components/BottomButtons.tsx index fbb1ff29..395f1cc7 100644 --- a/packages/redux-devtools-app/src/components/BottomButtons.tsx +++ b/packages/redux-devtools-app/src/components/BottomButtons.tsx @@ -1,7 +1,5 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Button, Toolbar, Divider } from '@redux-devtools/ui'; -import { MdSave } from 'react-icons/md'; +import { Toolbar, Divider } from '@redux-devtools/ui'; import ExportButton from './buttons/ExportButton'; import ImportButton from './buttons/ImportButton'; import PrintButton from './buttons/PrintButton'; @@ -17,12 +15,6 @@ interface Props { } export default class BottomButtons extends Component { - static propTypes = { - dispatcherIsOpen: PropTypes.bool, - sliderIsOpen: PropTypes.bool, - options: PropTypes.object.isRequired, - }; - shouldComponentUpdate(nextProps: Props) { return ( nextProps.dispatcherIsOpen !== this.props.dispatcherIsOpen || diff --git a/packages/redux-devtools-app/src/components/TopButtons.tsx b/packages/redux-devtools-app/src/components/TopButtons.tsx index df80847c..d27fbeec 100644 --- a/packages/redux-devtools-app/src/components/TopButtons.tsx +++ b/packages/redux-devtools-app/src/components/TopButtons.tsx @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { ActionCreators, LiftedAction } from '@redux-devtools/core'; import { Button, Toolbar, Divider } from '@redux-devtools/ui'; import { Action } from 'redux'; @@ -10,23 +9,15 @@ import InstanceSelector from './InstanceSelector'; import SyncButton from './buttons/SyncButton'; import { Options, State } from '../reducers/instances'; -// eslint-disable-next-line @typescript-eslint/unbound-method const { reset, rollback, commit, sweep } = ActionCreators; interface Props { - dispatch: (action: LiftedAction, unknown>) => void; + dispatch: (action: LiftedAction, unknown>) => void; liftedState: State; options: Options; } export default class TopButtons extends Component { - static propTypes = { - // shouldSync: PropTypes.bool, - liftedState: PropTypes.object.isRequired, - dispatch: PropTypes.func.isRequired, - options: PropTypes.object.isRequired, - }; - shouldComponentUpdate(nextProps: Props) { return ( nextProps.options !== this.props.options || diff --git a/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx b/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx index 9bc0de86..a7d59172 100644 --- a/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx +++ b/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { connect, ResolveThunks } from 'react-redux'; import { Button } from '@redux-devtools/ui'; import { FaThumbtack } from 'react-icons/fa'; diff --git a/packages/redux-devtools-app/src/containers/DevTools.tsx b/packages/redux-devtools-app/src/containers/DevTools.tsx index e3cfb966..abebcec6 100644 --- a/packages/redux-devtools-app/src/containers/DevTools.tsx +++ b/packages/redux-devtools-app/src/containers/DevTools.tsx @@ -14,7 +14,7 @@ interface Props { liftedState: State; monitorState: MonitorStateMonitorState | undefined; dispatch: ( - action: LiftedAction, unknown> | InitMonitorAction, + action: LiftedAction, unknown> | InitMonitorAction, ) => void; features: Features | undefined; theme: ThemeFromProvider; @@ -24,12 +24,13 @@ interface Props { class DevTools extends Component { monitorProps?: object; Monitor?: React.ComponentType< - LiftedState, unknown> + LiftedState, unknown> > & { update( + this: void, monitorProps: unknown, state: unknown | undefined, - action: Action, + action: Action, ): unknown; }; preventRender?: boolean; @@ -44,7 +45,6 @@ class DevTools extends Component { this.monitorProps = monitorElement.props; this.Monitor = monitorElement.type; - // eslint-disable-next-line @typescript-eslint/unbound-method const update = this.Monitor!.update; if (update) { let newMonitorState; @@ -58,7 +58,7 @@ class DevTools extends Component { newMonitorState = update( this.monitorProps, undefined, - {} as Action, + {} as Action, ); if (newMonitorState !== monitorState) { this.preventRender = true; @@ -88,7 +88,7 @@ class DevTools extends Component { } dispatch = ( - action: LiftedAction, unknown> | InitMonitorAction, + action: LiftedAction, unknown> | InitMonitorAction, ) => { this.props.dispatch(action); }; diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx index ed9d9302..e9cd741d 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx @@ -21,7 +21,7 @@ type StateProps = ReturnType; type DispatchProps = ResolveThunks; type Props = StateProps & DispatchProps & - TabComponentProps>; + TabComponentProps>; class SubTabs extends Component { tabs?: (Tab | Tab<{ data: unknown }> | Tab<{ data?: Delta }>)[]; @@ -40,7 +40,7 @@ class SubTabs extends Component { filteredData = () => { const [data, _error] = filter( this.props.nextState as object, - this.props.stateFilter + this.props.stateFilter, ); return data; }; @@ -79,7 +79,7 @@ class SubTabs extends Component { component: DiffTab, selector: this.selectorCreator( this.props.parentTab, - 'Tree' + 'Tree', ) as () => Props, }, { @@ -99,7 +99,7 @@ class SubTabs extends Component { component: parentTab === 'Action' ? ActionTab : StateTab, selector: this.selectorCreator( this.props.parentTab, - 'Tree' + 'Tree', ) as () => Props, }, { diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx index f9296bb9..8fe54ee6 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Delta, formatters } from 'jsondiffpatch'; +import type { Delta } from 'jsondiffpatch'; +import * as htmlFormatter from 'jsondiffpatch/formatters/html'; import styled, { ThemedStyledProps } from 'styled-components'; import { effects, Theme } from '@redux-devtools/ui'; @@ -240,7 +241,7 @@ export default class VisualDiffTab extends Component { let __html: string | undefined; const data = this.props.data; if (data) { - __html = formatters.html.format(data, undefined); + __html = htmlFormatter.format(data, undefined); } return ; diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx index d44e9caa..3a9acafc 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/index.tsx @@ -39,17 +39,17 @@ class InspectorWrapper extends Component { render() { const { features, ...rest } = this.props; - let tabs: () => Tab>[]; + let tabs: () => Tab>[]; if (features && features.test) { tabs = () => [ - ...(DEFAULT_TABS as Tab>[]), + ...(DEFAULT_TABS as Tab>[]), { name: 'Test', component: TestTab } as unknown as Tab< unknown, - Action + Action >, ]; } else { - tabs = () => DEFAULT_TABS as Tab>[]; + tabs = () => DEFAULT_TABS as Tab>[]; } return ( diff --git a/packages/redux-devtools-app/src/containers/monitors/Slider.tsx b/packages/redux-devtools-app/src/containers/monitors/Slider.tsx index a465b0ff..74a5f11d 100644 --- a/packages/redux-devtools-app/src/containers/monitors/Slider.tsx +++ b/packages/redux-devtools-app/src/containers/monitors/Slider.tsx @@ -14,7 +14,7 @@ const SliderWrapper = styled.div` interface Props { liftedState: State; - dispatch: (action: LiftedAction, unknown>) => void; + dispatch: (action: LiftedAction, unknown>) => void; theme: ThemeFromProvider; } diff --git a/packages/redux-devtools-app/src/reducers/instances.ts b/packages/redux-devtools-app/src/reducers/instances.ts index 9623a742..14d721eb 100644 --- a/packages/redux-devtools-app/src/reducers/instances.ts +++ b/packages/redux-devtools-app/src/reducers/instances.ts @@ -45,7 +45,7 @@ export interface Options { } export interface State { - actionsById: { [actionId: number]: PerformAction> }; + actionsById: { [actionId: number]: PerformAction> }; computedStates: { state: unknown; error?: string }[]; currentStateIndex: number; nextActionId: number; @@ -109,7 +109,7 @@ function updateState( let newState; const liftedState = state[id] || state.default; const action = ((request.action && parseJSON(request.action, serialize)) || - {}) as PerformAction>; + {}) as PerformAction>; switch (request.type) { case 'INIT': @@ -129,7 +129,7 @@ function updateState( newState = recompute( newState, request.batched ? payload : (payload as unknown as State[])[i], - action[i] as PerformAction>, + action[i] as PerformAction>, newState.nextActionId + 1, maxAge, isExcess, diff --git a/packages/redux-devtools-app/src/store/configureStore.ts b/packages/redux-devtools-app/src/store/configureStore.ts index c5470ebd..aee3e094 100644 --- a/packages/redux-devtools-app/src/store/configureStore.ts +++ b/packages/redux-devtools-app/src/store/configureStore.ts @@ -35,14 +35,6 @@ export default function configureStore( } ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; } - if (module.hot) { - // Enable Webpack hot module replacement for reducers - module.hot.accept('../reducers', () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires - const nextReducer = require('../reducers'); // eslint-disable-line global-require - store.replaceReducer(nextReducer as Reducer); - }); - } } const store = createStore( diff --git a/packages/redux-devtools-app/src/utils/updateState.ts b/packages/redux-devtools-app/src/utils/updateState.ts index d8e5c04b..0d25167c 100644 --- a/packages/redux-devtools-app/src/utils/updateState.ts +++ b/packages/redux-devtools-app/src/utils/updateState.ts @@ -7,8 +7,8 @@ export function recompute( previousLiftedState: State, storeState: State, action: - | PerformAction> - | { action: Action; timestamp?: number; stack?: string }, + | PerformAction> + | { action: Action; timestamp?: number; stack?: string }, nextActionId = 1, maxAge?: number, isExcess?: boolean, @@ -24,10 +24,8 @@ export function recompute( } liftedState.stagedActionIds = [...liftedState.stagedActionIds, actionId]; liftedState.actionsById = { ...liftedState.actionsById }; - if ((action as PerformAction>).type === 'PERFORM_ACTION') { - liftedState.actionsById[actionId] = action as PerformAction< - Action - >; + if ((action as PerformAction>).type === 'PERFORM_ACTION') { + liftedState.actionsById[actionId] = action as PerformAction>; } else { liftedState.actionsById[actionId] = { action: action.action || action, diff --git a/packages/redux-devtools-app/test/app.spec.tsx b/packages/redux-devtools-app/test/app.spec.tsx index bbfa9181..30389c81 100644 --- a/packages/redux-devtools-app/test/app.spec.tsx +++ b/packages/redux-devtools-app/test/app.spec.tsx @@ -45,9 +45,7 @@ describe('App container', () => { , ); const actionList = screen.getByTestId('actionList'); - expect( - within(actionList).getByTestId('actionListRows'), - ).toBeEmptyDOMElement(); + expect(within(actionList).queryByRole('button')).not.toBeInTheDocument(); }); }); diff --git a/packages/redux-devtools-app/tsconfig.json b/packages/redux-devtools-app/tsconfig.json index bfbbbab0..4b076071 100644 --- a/packages/redux-devtools-app/tsconfig.json +++ b/packages/redux-devtools-app/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.react.base.json", "compilerOptions": { "outDir": "lib/types", - "types": ["webpack-env"] + "types": [] }, "include": ["src"] } diff --git a/packages/redux-devtools-app/tsconfig.webpack.json b/packages/redux-devtools-app/tsconfig.webpack.json index d02c0a8f..d728d6be 100644 --- a/packages/redux-devtools-app/tsconfig.webpack.json +++ b/packages/redux-devtools-app/tsconfig.webpack.json @@ -3,5 +3,5 @@ "compilerOptions": { "types": ["node", "webpack-dev-server"] }, - "include": ["webpack.config.ts", "webpack.config.umd.ts"] + "include": ["webpack.config.ts"] } diff --git a/packages/redux-devtools-app/webpack.config.umd.ts b/packages/redux-devtools-app/webpack.config.umd.ts deleted file mode 100644 index d3f4e829..00000000 --- a/packages/redux-devtools-app/webpack.config.umd.ts +++ /dev/null @@ -1,69 +0,0 @@ -import * as path from 'path'; -import * as webpack from 'webpack'; -import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; - -export default (env: { production?: boolean } = {}): webpack.Configuration => ({ - mode: env.production ? 'production' : 'development', - entry: { - app: ['./src/index'], - }, - output: { - library: 'ReduxDevToolsApp', - libraryExport: 'Root', - libraryTarget: 'umd', - path: path.resolve(__dirname, 'umd'), - filename: env.production - ? 'redux-devtools-app.min.js' - : 'redux-devtools-app.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)x?$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - { - test: /\.html$/, - loader: 'html-loader', - }, - { - test: /\.css$/, - use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], - }, - { - test: /\.woff2$/, - type: 'asset/inline', - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - PLATFORM: JSON.stringify('web'), - }, - }), - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: 'tsconfig.json', - }, - }), - ], - externals: { - react: { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react', - }, - 'react-dom': { - root: 'ReactDOM', - commonjs2: 'react-dom', - commonjs: 'react-dom', - amd: 'react-dom', - }, - }, -}); diff --git a/packages/redux-devtools-chart-monitor/.eslintrc.js b/packages/redux-devtools-chart-monitor/.eslintrc.js index 87abc2e1..d94e24bd 100644 --- a/packages/redux-devtools-chart-monitor/.eslintrc.js +++ b/packages/redux-devtools-chart-monitor/.eslintrc.js @@ -6,7 +6,7 @@ module.exports = { extends: '../../eslintrc.ts.react.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, ], diff --git a/packages/redux-devtools-chart-monitor/CHANGELOG.md b/packages/redux-devtools-chart-monitor/CHANGELOG.md index 1fdc0dec..3fd17b8b 100644 --- a/packages/redux-devtools-chart-monitor/CHANGELOG.md +++ b/packages/redux-devtools-chart-monitor/CHANGELOG.md @@ -1,5 +1,48 @@ # Change Log +## 5.0.2 + +### Patch Changes + +- Updated dependencies [bbb1a40] + - react-base16-styling@0.10.0 + +## 5.0.1 + +### Patch Changes + +- Updated dependencies [191d419] + - d3-state-visualizer@3.0.0 + +## 5.0.0 + +### Major Changes + +- 5cfe3e5: Update min required React version to 16.8.4 + +### Patch Changes + +- Updated dependencies [decc035] + - @redux-devtools/core@4.0.0 + +## 4.1.0 + +### Minor Changes + +- 6fc18ed7: Add new Redux version to peer dependencies + +### Patch Changes + +- 7f5bddbd: Widen peer dependencies + +## 4.0.1 + +### Patch Changes + +- 65205f90: Replace Action with Action +- Updated dependencies [65205f90] + - @redux-devtools/core@3.13.2 + ## 4.0.0 ### Major Changes diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json index f1943664..eae62637 100644 --- a/packages/redux-devtools-chart-monitor/package.json +++ b/packages/redux-devtools-chart-monitor/package.json @@ -1,6 +1,6 @@ { "name": "@redux-devtools/chart-monitor", - "version": "4.0.0", + "version": "5.0.2", "description": "Chart monitor for Redux DevTools", "keywords": [ "redux", @@ -39,37 +39,36 @@ "prepublish": "pnpm run type-check && pnpm run lint" }, "dependencies": { - "@babel/runtime": "^7.22.6", - "@types/redux-devtools-themes": "^1.0.0", - "d3-state-visualizer": "^2.0.0", + "@babel/runtime": "^7.24.1", + "d3-state-visualizer": "^3.0.0", "deepmerge": "^4.3.1", - "redux-devtools-themes": "^1.0.0" + "react-base16-styling": "^0.10.0" }, "devDependencies": { - "@babel/cli": "^7.22.9", - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/plugin-transform-runtime": "^7.22.9", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@babel/preset-typescript": "^7.22.5", - "@redux-devtools/core": "^3.13.1", - "@types/react": "^18.2.18", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", - "eslint": "^8.46.0", - "eslint-config-prettier": "^9.0.0", - "eslint-plugin-react": "^7.33.1", + "@babel/cli": "^7.24.1", + "@babel/core": "^7.24.3", + "@babel/eslint-parser": "^7.24.1", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@redux-devtools/core": "^4.0.0", + "@types/react": "^18.2.72", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", + "eslint": "^8.57.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", "redux": "^4.2.1", - "rimraf": "^5.0.1", - "typescript": "~5.1.6" + "rimraf": "^5.0.5", + "typescript": "~5.3.3" }, "peerDependencies": { - "@redux-devtools/core": "^3.13.1", - "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "redux": "^3.4.0 || ^4.0.0" + "@redux-devtools/core": "^4.0.0", + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.4 || ^17.0.0 || ^18.0.0", + "redux": "^3.4.0 || ^4.0.0 || ^5.0.0" } } diff --git a/packages/redux-devtools-chart-monitor/src/Chart.tsx b/packages/redux-devtools-chart-monitor/src/Chart.tsx index 3ea4ada8..10a13d50 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.tsx +++ b/packages/redux-devtools-chart-monitor/src/Chart.tsx @@ -1,9 +1,10 @@ import React, { Component, createRef } from 'react'; import { tree } from 'd3-state-visualizer'; import type { Options } from 'd3-state-visualizer'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { Action, Dispatch } from 'redux'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; -import * as themes from 'redux-devtools-themes'; import { ChartMonitorState } from './reducers'; const wrapperStyle = { @@ -11,20 +12,20 @@ const wrapperStyle = { height: '100%', }; -export interface Props> +export interface Props> extends LiftedState, Options { dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | themes.Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; invertTheme: boolean; state: S | null; defaultIsVisible?: boolean; } -class Chart> extends Component> { +class Chart> extends Component> { divRef = createRef(); // eslint-disable-next-line @typescript-eslint/ban-types renderChart?: (state?: {} | null | undefined) => void; diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx index 405cd8ac..78bdb7e7 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx +++ b/packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx @@ -1,5 +1,6 @@ import React, { CSSProperties, PureComponent } from 'react'; -import * as themes from 'redux-devtools-themes'; +import { base16Themes } from 'react-base16-styling'; +import type { Base16Theme } from 'react-base16-styling'; import { ActionCreators, LiftedAction, @@ -11,7 +12,7 @@ import type { Options } from 'd3-state-visualizer'; import reducer, { ChartMonitorState } from './reducers'; import Chart, { Props } from './Chart'; -// eslint-disable-next-line @typescript-eslint/unbound-method + const { reset, rollback, commit, sweep, toggleAction } = ActionCreators; const styles: { container: CSSProperties } = { @@ -25,7 +26,7 @@ const styles: { container: CSSProperties } = { }, }; -function invertColors(theme: themes.Base16Theme) { +function invertColors(theme: Base16Theme) { return { ...theme, base00: theme.base07, @@ -39,19 +40,19 @@ function invertColors(theme: themes.Base16Theme) { }; } -export interface ChartMonitorProps> +export interface ChartMonitorProps> extends LiftedState, Options { dispatch: Dispatch>; preserveScrollTop: boolean; select: (state: S) => unknown; - theme: keyof typeof themes | themes.Base16Theme; + theme: keyof typeof base16Themes | Base16Theme; invertTheme: boolean; defaultIsVisible?: boolean; } -class ChartMonitor> extends PureComponent< +class ChartMonitor> extends PureComponent< ChartMonitorProps > { static update = reducer; @@ -89,14 +90,18 @@ class ChartMonitor> extends PureComponent< return invertTheme ? invertColors(theme) : theme; } - if (typeof themes[theme] !== 'undefined') { - return invertTheme ? invertColors(themes[theme]) : themes[theme]; + if (typeof base16Themes[theme] !== 'undefined') { + return invertTheme + ? invertColors(base16Themes[theme]) + : base16Themes[theme]; } console.warn( 'DevTools theme ' + theme + ' not found, defaulting to nicinabox', ); - return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox; + return invertTheme + ? invertColors(base16Themes.nicinabox) + : base16Themes.nicinabox; } getChartOptions(props = this.props): Props { diff --git a/packages/redux-devtools-chart-monitor/src/reducers.ts b/packages/redux-devtools-chart-monitor/src/reducers.ts index fff11481..86b9ed56 100644 --- a/packages/redux-devtools-chart-monitor/src/reducers.ts +++ b/packages/redux-devtools-chart-monitor/src/reducers.ts @@ -2,7 +2,7 @@ import { Action } from 'redux'; import { ChartMonitorAction, TOGGLE_VISIBILITY } from './actions'; import { ChartMonitorProps } from './ChartMonitor'; -function toggleVisibility>( +function toggleVisibility>( props: ChartMonitorProps, state = props.defaultIsVisible, action: ChartMonitorAction, @@ -22,7 +22,7 @@ export interface ChartMonitorState { isVisible?: boolean; } -export default function reducer>( +export default function reducer>( props: ChartMonitorProps, state: ChartMonitorState | undefined = {}, action: ChartMonitorAction, diff --git a/packages/redux-devtools-cli/.eslintrc.cjs b/packages/redux-devtools-cli/.eslintrc.cjs index ca152822..dcb61ae7 100644 --- a/packages/redux-devtools-cli/.eslintrc.cjs +++ b/packages/redux-devtools-cli/.eslintrc.cjs @@ -5,7 +5,7 @@ module.exports = { extends: '../../eslintrc.ts.base.json', parserOptions: { tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], + project: true, }, }, { diff --git a/packages/redux-devtools-cli/CHANGELOG.md b/packages/redux-devtools-cli/CHANGELOG.md index f33776ad..5377c5a5 100644 --- a/packages/redux-devtools-cli/CHANGELOG.md +++ b/packages/redux-devtools-cli/CHANGELOG.md @@ -1,5 +1,49 @@ # Change Log +## 4.0.0 + +### Major Changes + +- 4dd0dd2: Require Node.js 18 + +## 3.0.4 + +### Patch Changes + +- Updated dependencies [5cfe3e5] + - @redux-devtools/app@6.0.0 + +## 3.0.3 + +### Patch Changes + +- Updated dependencies [158ba2c] + - @redux-devtools/app@5.0.0 + +## 3.0.2 + +### Patch Changes + +- Updated dependencies [e57bcb39] + - @redux-devtools/app@4.0.0 + +## 3.0.1 + +### Patch Changes + +- Updated dependencies [57751ff9] + - @redux-devtools/app@3.0.0 + +## 3.0.0 + +### Major Changes + +- 81ba239e: Dropped support for Node.js 14. + +### Patch Changes + +- @redux-devtools/app@2.2.2 + ## 2.0.0 ### Major Changes diff --git a/packages/redux-devtools-cli/app/index.html b/packages/redux-devtools-cli/app/index.html index b884f7ae..a8364246 100644 --- a/packages/redux-devtools-cli/app/index.html +++ b/packages/redux-devtools-cli/app/index.html @@ -23,6 +23,7 @@ height: 100%; } +
@@ -32,7 +33,7 @@