Use rollup in redux-devtools-rtk-query-monitor

packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts

@@ -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;
-}

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"]
 }

packages/redux-devtools-rtk-query-monitor/.eslintignore

@@ -1,2 +1,2 @@
 demo
-lib
+dist

packages/redux-devtools-rtk-query-monitor/.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
-  extends: '../../eslintrc.ts.react.base.json',
+  extends: '../../eslintrc.js.base.json',
-  parserOptions: {
+  overrides: [
-    tsconfigRootDir: __dirname,
+    {
-    project: ['./tsconfig.json'],
+      files: ['*.ts', '*.tsx'],
-  },
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+  ],
 };

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(<RtkQueryrMonitor />);
 ```

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 { DockMonitor } from '@redux-devtools/dock-monitor';
-import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor';
+import { RtkQueryMonitor } from '@redux-devtools/rtk-query-monitor';
 
 const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
 

packages/redux-devtools-rtk-query-monitor/package.json

@@ -23,23 +23,23 @@
     "lib",
     "src"
   ],
-  "main": "lib/index.js",
+  "main": "dist/redux-devtools-rtk-query-monitor.cjs.js",
-  "types": "lib/index.d.ts",
+  "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": "rollup -c",
-    "build:types": "tsc --emitDeclarationOnly",
+    "clean": "rimraf dist",
-    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
-    "clean": "rimraf lib",
     "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": {

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;

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 {

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';

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