feat(d3-state-visualizer): convert example to TypeScript (#641)

packages/d3-state-visualizer/examples/tree/package.json

@@ -2,8 +2,17 @@
   "name": "d3-state-visualizer-tree-example",
   "version": "0.0.2",
   "description": "Visualize your app state as a tree",
-  "private": true,
+  "keywords": [
-  "main": "index.js",
+    "d3",
+    "state",
+    "store",
+    "visualization"
+  ],
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/tree",
+  "bugs": {
+    "url": "https://github.com/reduxjs/redux-devtools/issues"
+  },
+  "license": "MIT",
   "scripts": {
     "start": "webpack-dev-server --open"
   },
@@ -11,25 +20,9 @@
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
-  "keywords": [
-    "d3",
-    "state",
-    "store",
-    "visualization"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/reduxjs/redux-devtools/issues"
-  },
-  "homepage": "https://github.com/reduxjs/redux-devtools",
   "dependencies": {
     "d3-state-visualizer": "^1.3.4",
     "map2tree": "^1.4.2"
   },
-  "devDependencies": {
+  "private": true
-    "@babel/core": "^7.11.1",
-    "babel-loader": "^8.1.0",
-    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.11.0"
-  }
 }

packages/d3-state-visualizer/examples/tree/webpack.config.ts

@@ -1,9 +1,8 @@
-var path = require('path');
+import * as path from 'path';
-var webpack = require('webpack');
+import * as webpack from 'webpack';
 
-module.exports = {
+export default {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-  devtool: 'eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
@@ -14,23 +13,24 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/static/',
   },
-  plugins: [new webpack.HotModuleReplacementPlugin()],
-  resolve: {
-    extensions: ['.js'],
-  },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)$/,
-        loaders: ['babel-loader'],
+        loaders: 'babel-loader',
         exclude: /node_modules/,
         include: __dirname,
       },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
   devServer: {
     historyApiFallback: true,
     hot: true,
     port: 3000,
   },
+  devtool: 'eval-source-map',
 };

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

@@ -10,6 +10,44 @@ import {
 } from './utils';
 import d3tooltip from 'd3tooltip';
 
+interface InputOptions {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  state?: {};
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  tree?: NodeWithId | {};
+
+  rootKeyName: string;
+  pushMethod: 'push' | 'unshift';
+  id: string;
+  style: { [key: string]: Primitive };
+  size: number;
+  aspectRatio: number;
+  initialZoom: number;
+  margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  isSorted: boolean;
+  heightBetweenNodesCoeff: number;
+  widthBetweenNodesCoeff: number;
+  transitionDuration: number;
+  blinkDuration: number;
+  onClickText: () => void;
+  tooltipOptions: {
+    disabled?: boolean;
+    left?: number | undefined;
+    top?: number | undefined;
+    offset?: {
+      left: number;
+      top: number;
+    };
+    style?: { [key: string]: Primitive } | undefined;
+    indentationSize?: number;
+  };
+}
+
 interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
   state?: {};
@@ -63,6 +101,7 @@ interface Options {
       top: number;
     };
     style: { [key: string]: Primitive } | undefined;
+    indentationSize?: number;
   };
 }
 
@@ -141,7 +180,10 @@ interface NodePosition {
   y: number | undefined;
 }
 
-export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
+export default function (
+  DOMNode: HTMLElement,
+  options: Partial<InputOptions> = {}
+) {
   const {
     id,
     style,
@@ -160,7 +202,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
     tree,
     tooltipOptions,
     onClickText,
-  } = deepmerge(defaultOptions, options);
+  } = deepmerge(defaultOptions, options) as Options;
 
   const width = size - margin.left - margin.right;
   const height = size * aspectRatio - margin.top - margin.bottom;
@@ -363,13 +405,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
           d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
-            .text((d, i) =>
+            .text((d, i) => getTooltipString(d, i, tooltipOptions))
-              getTooltipString(
-                d,
-                i,
-                (tooltipOptions as unknown) as { indentationSize: number }
-              )
-            )
             .style(tooltipOptions.style)
         );
       }