Use rollup for d3-state-visualizer

packages/d3-state-visualizer/.babelrc

@@ -1,3 +1,11 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults"
+      }
+    ],
+    "@babel/preset-typescript"
+  ]
 }

packages/d3-state-visualizer/.eslintignore

@@ -1,3 +1,2 @@
 examples
-lib
 dist

packages/d3-state-visualizer/.eslintrc.js

@@ -1,16 +1,12 @@
 module.exports = {
-  extends: '../../eslintrc.ts.base.json',
+  extends: '../../eslintrc.js.base.json',
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
-  },
   overrides: [
     {
-      files: ['webpack.config.umd.ts'],
+      files: ['*.ts'],
       extends: '../../eslintrc.ts.base.json',
       parserOptions: {
         tsconfigRootDir: __dirname,
-        project: ['./tsconfig.webpack.json'],
+        project: ['./tsconfig.json'],
       },
     },
   ],

packages/d3-state-visualizer/package.json

@@ -20,18 +20,16 @@
     "lib",
     "src"
   ],
-  "main": "lib/index.js",
+  "main": "dist/d3-state-visualizer.cjs.js",
-  "types": "lib/index.d.ts",
+  "module": "dist/d3-state-visualizer.esm.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/d3-state-visualizer.umd.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "yarn run build:types && yarn run build:js && yarn run build:umd && yarn run build:umd:min",
+    "build": "rollup -c",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:js": "babel src --out-dir lib --extensions \".ts\" --source-maps inline",
-    "build:umd": "webpack --env production --progress --config webpack.config.umd.ts",
-    "build:umd:min": "webpack --env production --progress --config webpack.config.umd.ts",
     "clean": "rimraf lib dist",
     "lint": "eslint . --ext .ts",
     "type-check": "tsc --noEmit",
@@ -39,6 +37,7 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.7",
     "@types/d3": "^3.5.46",
     "d3": "^3.5.17",
     "d3tooltip": "^1.3.2",
@@ -47,21 +46,24 @@
     "ramda": "^0.27.1"
   },
   "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-typescript": "^7.16.7",
-    "@types/node": "^16.11.17",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/ramda": "^0.27.62",
     "@typescript-eslint/eslint-plugin": "^5.8.1",
     "@typescript-eslint/parser": "^5.8.1",
-    "babel-loader": "^8.2.3",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "rimraf": "^3.0.2",
-    "ts-node": "^10.4.0",
+    "rollup": "^2.63.0",
-    "typescript": "~4.5.4",
+    "rollup-plugin-terser": "^7.0.2",
-    "webpack": "^5.65.0",
+    "rollup-plugin-typescript2": "^0.31.1",
-    "webpack-cli": "^4.9.1"
+    "tslib": "^2.3.1",
+    "typescript": "~4.5.4"
   }
 }

packages/d3-state-visualizer/rollup.config.js

@@ -0,0 +1,73 @@
+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.ts',
+    output: {
+      name: 'd3-state-visualizer',
+      file: 'dist/d3-state-visualizer.umd.js',
+      format: 'umd',
+    },
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+        babelHelpers: 'runtime',
+        extensions: ['.ts'],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+    ],
+  },
+  {
+    input: 'src/index.ts',
+    output: {
+      name: 'd3-state-visualizer',
+      file: 'dist/d3-state-visualizer.umd.min.js',
+      format: 'umd',
+    },
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+        babelHelpers: 'runtime',
+        extensions: ['.ts'],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      terser(),
+    ],
+  },
+  {
+    input: 'src/index.ts',
+    output: [
+      { file: 'dist/d3-state-visualizer.cjs.js', format: 'cjs' },
+      { file: 'dist/d3-state-visualizer.esm.js', format: 'esm' },
+    ],
+    plugins: [
+      typescript(),
+      babel({
+        exclude: 'node_modules/**',
+        babelHelpers: 'runtime',
+        extensions: ['.ts'],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+    ],
+    external: [
+      /@babel\/runtime/,
+      'd3',
+      'ramda',
+      'map2tree',
+      'deepmerge',
+      'd3tooltip',
+    ],
+  },
+];
+
+export default config;

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -1,6 +1,6 @@
 import d3, { ZoomEvent, Primitive } from 'd3';
 import { isEmpty } from 'ramda';
-import map2tree from 'map2tree';
+import { map2tree } from 'map2tree';
 import deepmerge from 'deepmerge';
 import {
   getTooltipString,
@@ -8,7 +8,7 @@ import {
   visit,
   getNodeGroupByDepthCount,
 } from './utils';
-import d3tooltip from 'd3tooltip';
+import { tooltip } from 'd3tooltip';
 
 export interface InputOptions {
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -401,7 +401,7 @@ export default function (
 
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
-          d3tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
+          tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
             .text((d, i) => getTooltipString(d, i, tooltipOptions))
             .style(tooltipOptions.style)
         );

packages/d3-state-visualizer/src/index.ts

@@ -1,6 +1,2 @@
-import * as charts from './charts';
-
 export { tree } from './charts';
 export type { InputOptions, NodeWithId } from './charts';
-
-export default charts;

packages/d3-state-visualizer/tsconfig.webpack.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["webpack.config.umd.ts"]
-}

packages/d3-state-visualizer/webpack.config.umd.ts

@@ -1,29 +0,0 @@
-import * as path from 'path';
-import * as webpack from 'webpack';
-
-export default (env: { production?: boolean } = {}): webpack.Configuration => ({
-  mode: env.production ? 'production' : 'development',
-  entry: {
-    app: ['./src/index'],
-  },
-  output: {
-    library: 'd3-state-visualizer',
-    libraryTarget: 'umd',
-    path: path.resolve(__dirname, 'dist'),
-    filename: env.production
-      ? 'd3-state-visualizer.min.js'
-      : 'd3-state-visualizer.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts)$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
-});

packages/d3tooltip/rollup.config.js

@@ -47,7 +47,7 @@ const config = [
   {
     input: 'src/index.ts',
     output: [
-      { file: 'dist/d3tooltip.cjs.js', format: 'cjs', exports: 'auto' },
+      { file: 'dist/d3tooltip.cjs.js', format: 'cjs' },
       { file: 'dist/d3tooltip.esm.js', format: 'esm' },
     ],
     plugins: [

packages/d3tooltip/src/index.ts

@@ -49,7 +49,7 @@ interface Tip<Datum> {
   ) => this;
 }
 
-export default function tooltip<Datum>(
+export function tooltip<Datum>(
   d3: typeof d3Package,
   className = 'tooltip',
   options: Partial<Options<Datum>> = {}

packages/map2tree/package.json

@@ -65,8 +65,6 @@
     "rollup-plugin-typescript2": "^0.31.1",
     "ts-jest": "^27.1.2",
     "tslib": "^2.3.1",
-    "typescript": "~4.5.4",
+    "typescript": "~4.5.4"
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
   }
 }

packages/map2tree/rollup.config.js

@@ -47,7 +47,7 @@ const config = [
   {
     input: 'src/index.ts',
     output: [
-      { file: 'dist/map2tree.cjs.js', format: 'cjs', exports: 'auto' },
+      { file: 'dist/map2tree.cjs.js', format: 'cjs' },
       { file: 'dist/map2tree.esm.js', format: 'esm' },
     ],
     plugins: [

packages/map2tree/src/index.ts

@@ -42,7 +42,7 @@ function getNode(tree: Node, key: string): Node | null {
   return node;
 }
 
-export default function map2tree(
+export function map2tree(
   // eslint-disable-next-line @typescript-eslint/ban-types
   root: unknown,
   options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},

yarn.lock

@@ -12489,16 +12489,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "d3-state-visualizer@workspace:packages/d3-state-visualizer"
   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-typescript": ^7.16.7
+    "@babel/runtime": ^7.16.7
+    "@rollup/plugin-babel": ^5.3.0
+    "@rollup/plugin-commonjs": ^21.0.1
+    "@rollup/plugin-node-resolve": ^13.1.3
     "@types/d3": ^3.5.46
-    "@types/node": ^16.11.17
     "@types/ramda": ^0.27.62
     "@typescript-eslint/eslint-plugin": ^5.8.1
     "@typescript-eslint/parser": ^5.8.1
-    babel-loader: ^8.2.3
     d3: ^3.5.17
     d3tooltip: ^1.3.2
     deepmerge: ^4.2.2
@@ -12507,10 +12510,11 @@ __metadata:
     map2tree: ^1.5.2
     ramda: ^0.27.1
     rimraf: ^3.0.2
-    ts-node: ^10.4.0
+    rollup: ^2.63.0
+    rollup-plugin-terser: ^7.0.2
+    rollup-plugin-typescript2: ^0.31.1
+    tslib: ^2.3.1
     typescript: ~4.5.4
-    webpack: ^5.65.0
-    webpack-cli: ^4.9.1
   languageName: unknown
   linkType: soft
 
@@ -20092,8 +20096,6 @@ __metadata:
     ts-jest: ^27.1.2
     tslib: ^2.3.1
     typescript: ~4.5.4
-    webpack: ^5.65.0
-    webpack-cli: ^4.9.1
   languageName: unknown
   linkType: soft