From c0b1716be4d682200c5a42088a0c0d05034b33d6 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 9 Jan 2022 15:50:45 -0500 Subject: [PATCH] Use rollup in redux-devtools-rtk-query-monitor --- .../src/path-browserify.ts | 150 ------------------ .../redux-devtools-rtk-query-monitor/.babelrc | 5 +- .../.eslintignore | 2 +- .../.eslintrc.js | 16 +- .../README.md | 2 +- .../demo/src/features/DevTools/DevTools.tsx | 4 +- .../package.json | 19 ++- .../rollup.config.js | 43 +++++ .../src/components/TreeView.tsx | 2 +- .../src/index.ts | 2 +- yarn.lock | 8 +- 11 files changed, 82 insertions(+), 171 deletions(-) delete mode 100644 packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts create mode 100644 packages/redux-devtools-rtk-query-monitor/rollup.config.js diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts b/packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts deleted file mode 100644 index 3ec81d6b..00000000 --- a/packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts +++ /dev/null @@ -1,150 +0,0 @@ -declare module 'path-browserify' { - /** - * A parsed path object generated by path.parse() or consumed by path.format(). - */ - interface ParsedPath { - /** - * The root of the path such as '/' or 'c:\' - */ - root: string; - /** - * The full directory path such as '/home/user/dir' or 'c:\path\dir' - */ - dir: string; - /** - * The file name including extension (if any) such as 'index.html' - */ - base: string; - /** - * The file extension (if any) such as '.html' - */ - ext: string; - /** - * The file name without extension (if any) such as 'index' - */ - name: string; - } - interface FormatInputPathObject { - /** - * The root of the path such as '/' or 'c:\' - */ - root?: string | undefined; - /** - * The full directory path such as '/home/user/dir' or 'c:\path\dir' - */ - dir?: string | undefined; - /** - * The file name including extension (if any) such as 'index.html' - */ - base?: string | undefined; - /** - * The file extension (if any) such as '.html' - */ - ext?: string | undefined; - /** - * The file name without extension (if any) such as 'index' - */ - name?: string | undefined; - } - interface PlatformPath { - /** - * Normalize a string path, reducing '..' and '.' parts. - * When multiple slashes are found, they're replaced by a single one; when the path contains a trailing slash, it is preserved. On Windows backslashes are used. - * - * @param p string path to normalize. - */ - normalize(p: string): string; - /** - * Join all arguments together and normalize the resulting path. - * Arguments must be strings. In v0.8, non-string arguments were silently ignored. In v0.10 and up, an exception is thrown. - * - * @param paths paths to join. - */ - join(...paths: string[]): string; - /** - * The right-most parameter is considered {to}. Other parameters are considered an array of {from}. - * - * Starting from leftmost {from} parameter, resolves {to} to an absolute path. - * - * If {to} isn't already absolute, {from} arguments are prepended in right to left order, - * until an absolute path is found. If after using all {from} paths still no absolute path is found, - * the current working directory is used as well. The resulting path is normalized, - * and trailing slashes are removed unless the path gets resolved to the root directory. - * - * @param pathSegments string paths to join. Non-string arguments are ignored. - */ - resolve(...pathSegments: string[]): string; - /** - * Determines whether {path} is an absolute path. An absolute path will always resolve to the same location, regardless of the working directory. - * - * @param path path to test. - */ - isAbsolute(p: string): boolean; - /** - * Solve the relative path from {from} to {to}. - * At times we have two absolute paths, and we need to derive the relative path from one to the other. This is actually the reverse transform of path.resolve. - */ - relative(from: string, to: string): string; - /** - * Return the directory name of a path. Similar to the Unix dirname command. - * - * @param p the path to evaluate. - */ - dirname(p: string): string; - /** - * Return the last portion of a path. Similar to the Unix basename command. - * Often used to extract the file name from a fully qualified path. - * - * @param p the path to evaluate. - * @param ext optionally, an extension to remove from the result. - */ - basename(p: string, ext?: string): string; - /** - * Return the extension of the path, from the last '.' to end of string in the last portion of the path. - * If there is no '.' in the last portion of the path or the first character of it is '.', then it returns an empty string - * - * @param p the path to evaluate. - */ - extname(p: string): string; - /** - * The platform-specific file separator. '\\' or '/'. - */ - readonly sep: string; - /** - * The platform-specific file delimiter. ';' or ':'. - */ - readonly delimiter: string; - /** - * Returns an object from a path string - the opposite of format(). - * - * @param pathString path to evaluate. - */ - parse(p: string): ParsedPath; - /** - * Returns a path string from an object - the opposite of parse(). - * - * @param pathString path to evaluate. - */ - format(pP: FormatInputPathObject): string; - /** - * On Windows systems only, returns an equivalent namespace-prefixed path for the given path. - * If path is not a string, path will be returned without modifications. - * This method is meaningful only on Windows system. - * On POSIX systems, the method is non-operational and always returns path without modifications. - */ - toNamespacedPath(path: string): string; - /** - * Posix specific pathing. - * Same as parent object on posix. - */ - readonly posix: PlatformPath; - /** - * Windows specific pathing. - * Same as parent object on windows - */ - readonly win32: PlatformPath; - } - - const path: PlatformPath; - export = path; -} diff --git a/packages/redux-devtools-rtk-query-monitor/.babelrc b/packages/redux-devtools-rtk-query-monitor/.babelrc index 202d425a..814fca2b 100644 --- a/packages/redux-devtools-rtk-query-monitor/.babelrc +++ b/packages/redux-devtools-rtk-query-monitor/.babelrc @@ -1,7 +1,8 @@ { "presets": [ - "@babel/preset-env", + ["@babel/preset-env", { "targets": "defaults" }], "@babel/preset-react", "@babel/preset-typescript" - ] + ], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintignore b/packages/redux-devtools-rtk-query-monitor/.eslintignore index d3c23dcb..5df41e2c 100644 --- a/packages/redux-devtools-rtk-query-monitor/.eslintignore +++ b/packages/redux-devtools-rtk-query-monitor/.eslintignore @@ -1,2 +1,2 @@ demo -lib +dist diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js index 555b727d..87abc2e1 100644 --- a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js +++ b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js @@ -1,7 +1,13 @@ module.exports = { - extends: '../../eslintrc.ts.react.base.json', - parserOptions: { - tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - }, + extends: '../../eslintrc.js.base.json', + overrides: [ + { + files: ['*.ts', '*.tsx'], + extends: '../../eslintrc.ts.react.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tsconfig.json'], + }, + }, + ], }; diff --git a/packages/redux-devtools-rtk-query-monitor/README.md b/packages/redux-devtools-rtk-query-monitor/README.md index af801474..2c4bea67 100644 --- a/packages/redux-devtools-rtk-query-monitor/README.md +++ b/packages/redux-devtools-rtk-query-monitor/README.md @@ -36,7 +36,7 @@ You can use `RtkQueryMonitor` as the only monitor in your app: ```ts import React from 'react'; import { createDevTools } from '@redux-devtools/core'; -import RtkQueryrMonitor from '@redux-devtools/rtk-query-monitor'; +import { RtkQueryrMonitor } from '@redux-devtools/rtk-query-monitor'; export default createDevTools(); ``` diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx index 6c1e48f9..b33cde48 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { createDevTools } from '@redux-devtools/core'; -import DockMonitor from '@redux-devtools/dock-monitor'; -import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor'; +import { DockMonitor } from '@redux-devtools/dock-monitor'; +import { RtkQueryMonitor } from '@redux-devtools/rtk-query-monitor'; const largeScreenQuery = window.matchMedia('(min-width: 1024px)'); diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index 545f6cd0..b79b373f 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/packages/redux-devtools-rtk-query-monitor/package.json @@ -23,23 +23,23 @@ "lib", "src" ], - "main": "lib/index.js", - "types": "lib/index.d.ts", + "main": "dist/redux-devtools-rtk-query-monitor.cjs.js", + "module": "dist/redux-devtools-rtk-query-monitor.esm.js", + "types": "dist/index.d.ts", "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "build": "yarn run build:types && yarn run build:js", - "build:types": "tsc --emitDeclarationOnly", - "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", - "clean": "rimraf lib", + "build": "rollup -c", + "clean": "rimraf dist", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit", "prepack": "yarn run clean && yarn run build", "prepublish": "yarn run type-check && yarn run lint" }, "dependencies": { + "@babel/runtime": "^7.16.7", "@redux-devtools/ui": "^1.0.0", "@types/prop-types": "^15.7.4", "@types/redux-devtools-themes": "^1.0.0", @@ -54,13 +54,15 @@ "redux-devtools-themes": "^1.0.0" }, "devDependencies": { - "@babel/cli": "^7.16.7", "@babel/core": "^7.16.7", + "@babel/eslint-parser": "^7.16.5", + "@babel/plugin-transform-runtime": "^7.16.7", "@babel/preset-env": "^7.16.7", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@redux-devtools/core": "^3.9.2", "@reduxjs/toolkit": "^1.7.1", + "@rollup/plugin-babel": "^5.3.0", "@types/hex-rgba": "^1.0.1", "@types/lodash.debounce": "^4.0.6", "@types/react": "^17.0.38", @@ -73,6 +75,9 @@ "react": "^17.0.2", "redux": "^4.1.2", "rimraf": "^3.0.2", + "rollup": "^2.63.0", + "rollup-plugin-typescript2": "^0.31.1", + "tslib": "^2.3.1", "typescript": "~4.5.4" }, "peerDependencies": { diff --git a/packages/redux-devtools-rtk-query-monitor/rollup.config.js b/packages/redux-devtools-rtk-query-monitor/rollup.config.js new file mode 100644 index 00000000..48489878 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/rollup.config.js @@ -0,0 +1,43 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from '@rollup/plugin-babel'; + +const config = [ + { + input: 'src/index.ts', + output: [ + { + file: 'dist/redux-devtools-rtk-query-monitor.cjs.js', + format: 'cjs', + }, + { + file: 'dist/redux-devtools-rtk-query-monitor.esm.js', + format: 'esm', + }, + ], + plugins: [ + typescript(), + babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'], + plugins: ['@babel/plugin-transform-runtime'], + }), + ], + external: [ + /@babel\/runtime/, + 'react', + 'prop-types', + /@reduxjs\/toolkit/, + 'jss', + 'jss-preset-default', + 'react-base16-styling', + 'hex-rgba', + 'redux-devtools-themes', + '@redux-devtools/ui', + 'lodash.debounce', + 'immutable', + 'react-json-tree', + ], + }, +]; + +export default config; diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx index a5a5c399..d02c0349 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx @@ -1,6 +1,6 @@ import { createSelector, Selector } from '@reduxjs/toolkit'; import React, { ComponentProps, ReactNode } from 'react'; -import JSONTree from 'react-json-tree'; +import { JSONTree } from 'react-json-tree'; import { Base16Theme, StylingFunction } from 'react-base16-styling'; import { DATA_TYPE_KEY } from '../monitor-config'; import { diff --git a/packages/redux-devtools-rtk-query-monitor/src/index.ts b/packages/redux-devtools-rtk-query-monitor/src/index.ts index 4ddffd77..95960151 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/index.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/index.ts @@ -1,2 +1,2 @@ -export { default } from './containers/RtkQueryMonitor'; +export { default as RtkQueryMonitor } from './containers/RtkQueryMonitor'; export type { ExternalProps } from './types'; diff --git a/yarn.lock b/yarn.lock index cfcfb85c..adf3127f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5106,14 +5106,17 @@ __metadata: version: 0.0.0-use.local resolution: "@redux-devtools/rtk-query-monitor@workspace:packages/redux-devtools-rtk-query-monitor" dependencies: - "@babel/cli": ^7.16.7 "@babel/core": ^7.16.7 + "@babel/eslint-parser": ^7.16.5 + "@babel/plugin-transform-runtime": ^7.16.7 "@babel/preset-env": ^7.16.7 "@babel/preset-react": ^7.16.7 "@babel/preset-typescript": ^7.16.7 + "@babel/runtime": ^7.16.7 "@redux-devtools/core": ^3.9.2 "@redux-devtools/ui": ^1.0.0 "@reduxjs/toolkit": ^1.7.1 + "@rollup/plugin-babel": ^5.3.0 "@types/hex-rgba": ^1.0.1 "@types/lodash.debounce": ^4.0.6 "@types/prop-types": ^15.7.4 @@ -5137,6 +5140,9 @@ __metadata: redux: ^4.1.2 redux-devtools-themes: ^1.0.0 rimraf: ^3.0.2 + rollup: ^2.63.0 + rollup-plugin-typescript2: ^0.31.1 + tslib: ^2.3.1 typescript: ~4.5.4 peerDependencies: "@redux-devtools/core": ^3.7.0