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

* feat(d3-state-visualizer): convert to TypeScript

* dep

* Odd

packages/d3-state-visualizer/.babelrc

@@ -1,7 +1,4 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
-  "plugins": [
+  "plugins": ["@babel/plugin-proposal-class-properties"]
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-export-default-from"
-  ]
 }

packages/d3-state-visualizer/.eslintignore

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

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

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

packages/d3-state-visualizer/package.json

@@ -2,24 +2,6 @@
   "name": "d3-state-visualizer",
   "version": "1.3.4",
   "description": "Visualize your app state with a range of reusable charts",
-  "main": "lib/index.js",
-  "files": [
-    "dist",
-    "lib",
-    "src"
-  ],
-  "scripts": {
-    "clean": "rimraf lib dist",
-    "build": "babel src --out-dir lib",
-    "build:umd": "webpack src/index.js -o dist/d3-state-visualizer.js --config webpack.config.development.js",
-    "build:umd:min": "webpack src/index.js -o dist/d3-state-visualizer.min.js --config webpack.config.production.js",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm run clean && npm run build && npm run build:umd && npm run build:umd:min"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/reduxjs/redux-devtools.git"
-  },
   "keywords": [
     "d3",
     "state",
@@ -27,27 +9,46 @@
     "tree",
     "visualization"
   ],
-  "author": "romseguy",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
-  "homepage": "https://github.com/reduxjs/redux-devtools",
+  "license": "MIT",
-  "devDependencies": {
+  "author": "romseguy",
-    "@babel/cli": "^7.10.5",
+  "files": [
-    "@babel/core": "^7.11.1",
+    "dist",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "lib",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
+    "src"
-    "@babel/preset-env": "^7.11.0",
+  ],
-    "babel-loader": "^8.1.0",
+  "main": "lib/index.js",
-    "rimraf": "^3.0.2",
+  "types": "lib/index.d.ts",
-    "webpack": "^4.44.1"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reduxjs/redux-devtools.git"
+  },
+  "scripts": {
+    "build": "npm run build:types && npm run build:js && npm run build:umd && npm run build:umd:min",
+    "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",
+    "lint:fix": "eslint . --ext .ts --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "preversion": "npm run type-check && npm run lint",
+    "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
+    "@types/d3": "^3.5.43",
     "d3": "^3.5.17",
     "d3tooltip": "^1.2.3",
     "deepmerge": "^4.2.2",
     "map2tree": "^1.4.2",
     "ramda": "^0.27.1"
+  },
+  "devDependencies": {
+    "@types/ramda": "^0.27.17"
   }
 }

packages/d3-state-visualizer/src/charts/index.js

@@ -1 +0,0 @@
-export tree from './tree/tree';

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

@@ -0,0 +1 @@
+export { default as tree } from './tree/tree';

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

@@ -1,4 +1,4 @@
-function sortObject(obj, strict) {
+function sortObject(obj: unknown, strict?: boolean) {
   if (obj instanceof Array) {
     let ary;
     if (strict) {
@@ -10,16 +10,16 @@ function sortObject(obj, strict) {
   }
 
   if (obj && typeof obj === 'object') {
-    const tObj = {};
+    const tObj: { [key: string]: unknown } = {};
     Object.keys(obj)
       .sort()
-      .forEach((key) => (tObj[key] = sortObject(obj[key])));
+      .forEach((key) => (tObj[key] = sortObject(obj[key as keyof typeof obj])));
     return tObj;
   }
 
   return obj;
 }
 
-export default function sortAndSerialize(obj) {
+export default function sortAndSerialize(obj: unknown) {
   return JSON.stringify(sortObject(obj, true), undefined, 2);
 }

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

@@ -1,4 +1,4 @@
-import d3 from 'd3';
+import d3, { ZoomEvent, Primitive } from 'd3';
 import { isEmpty } from 'ramda';
 import map2tree from 'map2tree';
 import deepmerge from 'deepmerge';
@@ -10,7 +10,63 @@ import {
 } from './utils';
 import d3tooltip from 'd3tooltip';
 
-const defaultOptions = {
+interface Options {
+  // 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: {
+    node: {
+      colors: {
+        default: string;
+        collapsed: string;
+        parent: string;
+      };
+      radius: number;
+    };
+    text: {
+      colors: {
+        default: string;
+        hover: string;
+      };
+    };
+    link: {
+      stroke: string;
+      fill: string;
+    };
+  };
+  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;
+  };
+}
+
+const defaultOptions: Options = {
   state: undefined,
   rootKeyName: 'state',
   pushMethod: 'push',
@@ -50,11 +106,13 @@ const defaultOptions = {
   widthBetweenNodesCoeff: 1,
   transitionDuration: 750,
   blinkDuration: 100,
-  onClickText: () => {},
+  onClickText: () => {
+    // noop
+  },
   tooltipOptions: {
     disabled: false,
     left: undefined,
-    right: undefined,
+    top: undefined,
     offset: {
       left: 0,
       top: 0,
@@ -63,7 +121,27 @@ const defaultOptions = {
   },
 };
 
-export default function (DOMNode, options = {}) {
+export interface NodeWithId {
+  name: string;
+  children?: NodeWithId[] | null;
+  _children?: NodeWithId[] | null;
+  value?: unknown;
+  id: string;
+
+  parent?: NodeWithId;
+  depth?: number;
+  x?: number;
+  y?: number;
+}
+
+interface NodePosition {
+  parentId: string | null | undefined;
+  id: string;
+  x: number | undefined;
+  y: number | undefined;
+}
+
+export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
   const {
     id,
     style,
@@ -89,16 +167,19 @@ export default function (DOMNode, options = {}) {
   const fullWidth = size;
   const fullHeight = size * aspectRatio;
 
-  const attr = {
+  const attr: { [key: string]: Primitive } = {
     id,
     preserveAspectRatio: 'xMinYMin slice',
   };
 
-  if (!style.width) {
+  if (!((style as unknown) as { [key: string]: Primitive }).width) {
     attr.width = fullWidth;
   }
 
-  if (!style.width || !style.height) {
+  if (
+    !((style as unknown) as { [key: string]: Primitive }).width ||
+    !((style as unknown) as { [key: string]: Primitive }).height
+  ) {
     attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
   }
 
@@ -107,11 +188,16 @@ export default function (DOMNode, options = {}) {
   const vis = root
     .append('svg')
     .attr(attr)
-    .style({ cursor: '-webkit-grab', ...style })
+    .style(({ cursor: '-webkit-grab', ...style } as unknown) as {
+      [key: string]: Primitive;
+    })
     .call(
       zoom.on('zoom', () => {
-        const { translate, scale } = d3.event;
+        const { translate, scale } = d3.event as ZoomEvent;
-        vis.attr('transform', `translate(${translate})scale(${scale})`);
+        vis.attr(
+          'transform',
+          `translate(${translate.toString()})scale(${scale})`
+        );
       })
     )
     .append('g')
@@ -122,18 +208,21 @@ export default function (DOMNode, options = {}) {
     });
 
   let layout = d3.layout.tree().size([width, height]);
-  let data;
+  let data: NodeWithId;
 
   if (isSorted) {
     layout.sort((a, b) =>
-      b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1
+      (b as NodeWithId).name.toLowerCase() <
+      (a as NodeWithId).name.toLowerCase()
+        ? 1
+        : -1
     );
   }
 
   // previousNodePositionsById stores node x and y
   // as well as hierarchy (id / parentId);
   // helps animating transitions
-  let previousNodePositionsById = {
+  let previousNodePositionsById: { [nodeId: string]: NodePosition } = {
     root: {
       id: 'root',
       parentId: null,
@@ -145,10 +234,14 @@ export default function (DOMNode, options = {}) {
   // traverses a map with node positions by going through the chain
   // of parent ids; once a parent that matches the given filter is found,
   // the parent position gets returned
-  function findParentNodePosition(nodePositionsById, nodeId, filter) {
+  function findParentNodePosition(
+    nodePositionsById: { [nodeId: string]: NodePosition },
+    nodeId: string,
+    filter: (nodePosition: NodePosition) => boolean
+  ) {
     let currentPosition = nodePositionsById[nodeId];
     while (currentPosition) {
-      currentPosition = nodePositionsById[currentPosition.parentId];
+      currentPosition = nodePositionsById[currentPosition.parentId!];
       if (!currentPosition) {
         return null;
       }
@@ -160,14 +253,18 @@ export default function (DOMNode, options = {}) {
 
   return function renderChart(nextState = tree || state) {
     data = !tree
-      ? map2tree(nextState, { key: rootKeyName, pushMethod })
+      ? // eslint-disable-next-line @typescript-eslint/ban-types
-      : nextState;
+        (map2tree(nextState as {}, {
+          key: rootKeyName,
+          pushMethod,
+        }) as NodeWithId)
+      : (nextState as NodeWithId);
 
     if (isEmpty(data) || !data.name) {
-      data = {
+      data = ({
         name: 'error',
         message: 'Please provide a state map or a tree structure',
-      };
+      } as unknown) as NodeWithId;
     }
 
     let nodeIndex = 0;
@@ -191,13 +288,13 @@ export default function (DOMNode, options = {}) {
           : null
     );
 
-    /*eslint-disable*/
     update();
-    /*eslint-enable*/
 
     function update() {
       // path generator for links
-      const diagonal = d3.svg.diagonal().projection((d) => [d.y, d.x]);
+      const diagonal = d3.svg
+        .diagonal<NodePosition>()
+        .projection((d) => [d.y!, d.x!]);
       // set tree dimensions and spacing between branches and nodes
       const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
 
@@ -206,12 +303,12 @@ export default function (DOMNode, options = {}) {
         width,
       ]);
 
-      let nodes = layout.nodes(data);
+      const nodes = layout.nodes(data as d3.layout.tree.Node) as NodeWithId[];
-      let links = layout.links(nodes);
+      const links = layout.links(nodes as d3.layout.tree.Node[]);
 
       nodes.forEach(
         (node) =>
-          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+          (node.y = node.depth! * (maxLabelLength * 7 * widthBetweenNodesCoeff))
       );
 
       const nodePositions = nodes.map((n) => ({
@@ -220,15 +317,18 @@ export default function (DOMNode, options = {}) {
         x: n.x,
         y: n.y,
       }));
-      const nodePositionsById = {};
+      const nodePositionsById: { [nodeId: string]: NodePosition } = {};
       nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
 
       // process the node selection
-      let node = vis
+      const node = vis
         .selectAll('g.node')
-        .property('__oldData__', (d) => d)
+        .property('__oldData__', (d: NodeWithId) => d)
-        .data(nodes, (d) => d.id || (d.id = ++nodeIndex));
+        .data(
-      let nodeEnter = node
+          nodes,
+          (d) => d.id || (d.id = (++nodeIndex as unknown) as string)
+        );
+      const nodeEnter = node
         .enter()
         .append('g')
         .attr({
@@ -237,35 +337,39 @@ export default function (DOMNode, options = {}) {
             const position = findParentNodePosition(
               nodePositionsById,
               d.id,
-              (n) => previousNodePositionsById[n.id]
+              (n) => !!previousNodePositionsById[n.id]
             );
             const previousPosition =
               (position && previousNodePositionsById[position.id]) ||
               previousNodePositionsById.root;
-            return `translate(${previousPosition.y},${previousPosition.x})`;
+            return `translate(${previousPosition.y!},${previousPosition.x!})`;
           },
         })
         .style({
           fill: style.text.colors.default,
           cursor: 'pointer',
         })
-        .on({
+        .on('mouseover', function mouseover(this: any) {
-          mouseover: function mouseover() {
+          d3.select(this).style({
-            d3.select(this).style({
+            fill: style.text.colors.hover,
-              fill: style.text.colors.hover,
+          });
-            });
+        })
-          },
+        .on('mouseout', function mouseout(this: any) {
-          mouseout: function mouseout() {
+          d3.select(this).style({
-            d3.select(this).style({
+            fill: style.text.colors.default,
-              fill: style.text.colors.default,
+          });
-            });
-          },
         });
 
       if (!tooltipOptions.disabled) {
         nodeEnter.call(
           d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
-            .text((d, i) => getTooltipString(d, i, tooltipOptions))
+            .text((d, i) =>
+              getTooltipString(
+                d,
+                i,
+                (tooltipOptions as unknown) as { indentationSize: number }
+              )
+            )
             .style(tooltipOptions.style)
         );
       }
@@ -279,12 +383,10 @@ export default function (DOMNode, options = {}) {
           class: 'nodeCircle',
           r: 0,
         })
-        .on({
+        .on('click', (clickedNode) => {
-          click: (clickedNode) => {
+          if ((d3.event as Event).defaultPrevented) return;
-            if (d3.event.defaultPrevented) return;
+          toggleChildren(clickedNode);
-            toggleChildren(clickedNode);
+          update();
-            update();
-          },
         });
 
       nodeEnterInnerGroup
@@ -299,9 +401,7 @@ export default function (DOMNode, options = {}) {
           'fill-opacity': 0,
         })
         .text((d) => d.name)
-        .on({
+        .on('click', onClickText);
-          click: onClickText,
-        });
 
       // update the text to reflect whether node has children or not
       node.select('text').text((d) => d.name);
@@ -319,11 +419,11 @@ export default function (DOMNode, options = {}) {
       });
 
       // transition nodes to their new position
-      let nodeUpdate = node
+      const nodeUpdate = node
         .transition()
         .duration(transitionDuration)
         .attr({
-          transform: (d) => `translate(${d.y},${d.x})`,
+          transform: (d) => `translate(${d.y!},${d.x!})`,
         });
 
       // ensure circle radius is correct
@@ -334,7 +434,7 @@ export default function (DOMNode, options = {}) {
         .select('text')
         .style('fill-opacity', 1)
         .attr({
-          transform: function transform(d) {
+          transform: function transform(this: SVGGraphicsElement, d) {
             const x =
               (d.children || d._children ? -1 : 1) *
               (this.getBBox().width / 2 + style.node.radius + 5);
@@ -344,7 +444,7 @@ export default function (DOMNode, options = {}) {
 
       // blink updated nodes
       node
-        .filter(function flick(d) {
+        .filter(function flick(this: any, d) {
           // test whether the relevant properties of d match
           // the equivalent property of the oldData
           // also test whether the old data exists,
@@ -358,7 +458,7 @@ export default function (DOMNode, options = {}) {
         .style('opacity', '1');
 
       // transition exiting nodes to the parent's new position
-      let nodeExit = node
+      const nodeExit = node
         .exit()
         .transition()
         .duration(transitionDuration)
@@ -367,12 +467,12 @@ export default function (DOMNode, options = {}) {
             const position = findParentNodePosition(
               previousNodePositionsById,
               d.id,
-              (n) => nodePositionsById[n.id]
+              (n) => !!nodePositionsById[n.id]
             );
             const futurePosition =
               (position && nodePositionsById[position.id]) ||
               nodePositionsById.root;
-            return `translate(${futurePosition.y},${futurePosition.x})`;
+            return `translate(${futurePosition.y!},${futurePosition.x!})`;
           },
         })
         .remove();
@@ -382,7 +482,9 @@ export default function (DOMNode, options = {}) {
       nodeExit.select('text').style('fill-opacity', 0);
 
       // update the links
-      let link = vis.selectAll('path.link').data(links, (d) => d.target.id);
+      const link = vis
+        .selectAll('path.link')
+        .data(links, (d) => (d.target as NodeWithId).id);
 
       // enter any new links at the parent's previous position
       link
@@ -393,8 +495,8 @@ export default function (DOMNode, options = {}) {
           d: (d) => {
             const position = findParentNodePosition(
               nodePositionsById,
-              d.target.id,
+              (d.target as NodeWithId).id,
-              (n) => previousNodePositionsById[n.id]
+              (n) => !!previousNodePositionsById[n.id]
             );
             const previousPosition =
               (position && previousNodePositionsById[position.id]) ||
@@ -402,15 +504,18 @@ export default function (DOMNode, options = {}) {
             return diagonal({
               source: previousPosition,
               target: previousPosition,
-            });
+            } as d3.svg.diagonal.Link<NodePosition>);
           },
         })
         .style(style.link);
 
       // transition links to their new position
-      link.transition().duration(transitionDuration).attr({
+      link
-        d: diagonal,
+        .transition()
-      });
+        .duration(transitionDuration)
+        .attr({
+          d: (diagonal as unknown) as Primitive,
+        });
 
       // transition exiting nodes to the parent's new position
       link
@@ -421,8 +526,8 @@ export default function (DOMNode, options = {}) {
           d: (d) => {
             const position = findParentNodePosition(
               previousNodePositionsById,
-              d.target.id,
+              (d.target as NodeWithId).id,
-              (n) => nodePositionsById[n.id]
+              (n) => !!nodePositionsById[n.id]
             );
             const futurePosition =
               (position && nodePositionsById[position.id]) ||

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

@@ -1,7 +1,8 @@
 import { is, join, pipe, replace } from 'ramda';
 import sortAndSerialize from './sortAndSerialize';
+import { NodeWithId } from './tree';
 
-export function collapseChildren(node) {
+export function collapseChildren(node: NodeWithId) {
   if (node.children) {
     node._children = node.children;
     node._children.forEach(collapseChildren);
@@ -9,7 +10,7 @@ export function collapseChildren(node) {
   }
 }
 
-export function expandChildren(node) {
+export function expandChildren(node: NodeWithId) {
   if (node._children) {
     node.children = node._children;
     node.children.forEach(expandChildren);
@@ -17,7 +18,7 @@ export function expandChildren(node) {
   }
 }
 
-export function toggleChildren(node) {
+export function toggleChildren(node: NodeWithId) {
   if (node.children) {
     node._children = node.children;
     node.children = null;
@@ -28,16 +29,20 @@ export function toggleChildren(node) {
   return node;
 }
 
-export function visit(parent, visitFn, childrenFn) {
+export function visit(
+  parent: NodeWithId,
+  visitFn: (parent: NodeWithId) => void,
+  childrenFn: (parent: NodeWithId) => NodeWithId[] | null | undefined
+) {
   if (!parent) {
     return;
   }
 
   visitFn(parent);
 
-  let children = childrenFn(parent);
+  const children = childrenFn(parent);
   if (children) {
-    let count = children.length;
+    const count = children.length;
 
     for (let i = 0; i < count; i++) {
       visit(children[i], visitFn, childrenFn);
@@ -45,10 +50,10 @@ export function visit(parent, visitFn, childrenFn) {
   }
 }
 
-export function getNodeGroupByDepthCount(rootNode) {
+export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
-  let nodeGroupByDepthCount = [1];
+  const nodeGroupByDepthCount = [1];
 
-  const traverseFrom = function traverseFrom(node, depth = 0) {
+  const traverseFrom = function traverseFrom(node: NodeWithId, depth = 0) {
     if (!node.children || node.children.length === 0) {
       return 0;
     }
@@ -68,7 +73,11 @@ export function getNodeGroupByDepthCount(rootNode) {
   return nodeGroupByDepthCount;
 }
 
-export function getTooltipString(node, i, { indentationSize = 4 }) {
+export function getTooltipString(
+  node: unknown,
+  i: number | undefined,
+  { indentationSize = 4 }
+) {
   if (!is(Object, node)) return '';
 
   const spacer = join('&nbsp;&nbsp;');
@@ -76,10 +85,13 @@ export function getTooltipString(node, i, { indentationSize = 4 }) {
   const spaces2nbsp = replace(/\s{2}/g, spacer(new Array(indentationSize)));
   const json2html = pipe(sortAndSerialize, cr2br, spaces2nbsp);
 
-  const children = node.children || node._children;
+  const children = (node as any).children || (node as any)._children;
 
-  if (typeof node.value !== 'undefined') return json2html(node.value);
+  if (typeof (node as any).value !== 'undefined')
-  if (typeof node.object !== 'undefined') return json2html(node.object);
+    return json2html((node as any).value);
-  if (children && children.length) return 'childrenCount: ' + children.length;
+  if (typeof (node as any).object !== 'undefined')
+    return json2html((node as any).object);
+  if (children && children.length)
+    return `childrenCount: ${(children as unknown[]).length}`;
   return 'empty';
 }

packages/d3-state-visualizer/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}

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

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

packages/d3-state-visualizer/webpack.config.base.js

@@ -1,17 +0,0 @@
-'use strict';
-
-module.exports = {
-  module: {
-    rules: [
-      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
-    ],
-  },
-  output: {
-    library: 'd3-state-visualizer',
-    libraryExport: 'default',
-    libraryTarget: 'umd',
-  },
-  resolve: {
-    extensions: ['.js'],
-  },
-};

packages/d3-state-visualizer/webpack.config.development.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var webpack = require('webpack');
-var baseConfig = require('./webpack.config.base');
-
-var config = Object.assign({}, baseConfig);
-config.mode = 'development';
-config.plugins = [
-  new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('development'),
-  }),
-];
-
-module.exports = config;

packages/d3-state-visualizer/webpack.config.production.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var webpack = require('webpack');
-var baseConfig = require('./webpack.config.base');
-
-var config = Object.assign({}, baseConfig);
-config.mode = 'production';
-config.plugins = [
-  new webpack.DefinePlugin({
-    'process.env.NODE_ENV': JSON.stringify('production'),
-  }),
-];
-
-module.exports = config;

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

@@ -0,0 +1,28 @@
+import * as path from 'path';
+
+export default (env: { production?: boolean } = {}) => ({
+  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/package.json

@@ -34,14 +34,17 @@
     "lint:fix": "eslint . --ext .ts --fix",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "preversion": "npm run type-check && npm run lint && npm run test",
+    "preversion": "npm run type-check && npm run lint",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
     "ramda": "^0.27.1"
   },
   "devDependencies": {
-    "@types/d3": "^3.5.43",
     "@types/ramda": "^0.27.17"
+  },
+  "peerDependencies": {
+    "@types/d3": "^3.5.43",
+    "d3": "^3.5.17"
   }
 }

packages/d3tooltip/src/index.ts

@@ -3,7 +3,17 @@ import { is } from 'ramda';
 import utils from './utils';
 const { prependClass, functor } = utils;
 
-const defaultOptions = {
+interface Options<Datum> {
+  left: number | undefined;
+  top: number | undefined;
+  offset: {
+    left: number;
+    top: number;
+  };
+  root: Selection<Datum> | undefined;
+}
+
+const defaultOptions: Options<unknown> = {
   left: undefined, // mouseX
   top: undefined, // mouseY
   offset: { left: 0, top: 0 },
@@ -13,9 +23,12 @@ const defaultOptions = {
 export default function tooltip<Datum>(
   d3: typeof d3Package,
   className = 'tooltip',
-  options = {}
+  options: Partial<Options<Datum>> = {}
 ) {
-  const { left, top, offset, root } = { ...defaultOptions, ...options };
+  const { left, top, offset, root } = {
+    ...defaultOptions,
+    ...options,
+  } as Options<Datum>;
 
   let attrs = { class: className };
   let text: (datum: Datum, index?: number, outerIndex?: number) => string = (
@@ -44,7 +57,7 @@ export default function tooltip<Datum>(
           top: `${y}px`,
           ...styles,
         })
-        .html(() => text(node));
+        .html(() => text(node)) as Selection<Datum>;
     });
 
     selection.on('mousemove.tip', (node) => {

packages/d3tooltip/webpack.config.umd.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-module.exports = (env: { production?: boolean } = {}) => ({
+export default (env: { production?: boolean } = {}) => ({
   mode: env.production ? 'production' : 'development',
   entry: {
     app: ['./src/index'],

packages/map2tree/package.json

@@ -38,7 +38,7 @@
     "lint:fix": "eslint . --ext .ts --fix",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "preversion": "npm run type-check && npm run lint",
+    "preversion": "npm run type-check && npm run lint && npm run test",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {

packages/map2tree/src/index.ts

@@ -2,16 +2,16 @@ import isArray from 'lodash/isArray';
 import isPlainObject from 'lodash/isPlainObject';
 import mapValues from 'lodash/mapValues';
 
-interface Node {
+export interface Node {
   name: string;
-  children?: Node[];
+  children?: Node[] | null;
   value?: unknown;
 }
 
 function visit(
   parent: Node,
   visitFn: (parent: Node) => void,
-  childrenFn: (parent: Node) => Node[] | undefined
+  childrenFn: (parent: Node) => Node[] | undefined | null
 ) {
   if (!parent) return;
 
@@ -47,17 +47,18 @@ export default function map2tree(
   root: {},
   options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},
   tree: Node = { name: options.key || 'state', children: [] }
-): Node {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+): Node | {} {
   // eslint-disable-next-line @typescript-eslint/ban-types
   if (!isPlainObject(root) && root && !(root as { toJS: () => {} }).toJS) {
-    return {} as Node;
+    return {};
   }
 
   const { key: rootNodeKey = 'state', pushMethod = 'push' } = options;
   const currentNode = getNode(tree, rootNodeKey);
 
   if (currentNode === null) {
-    return {} as Node;
+    return {};
   }
 
   mapValues(

packages/map2tree/test/map2tree.spec.ts

@@ -1,11 +1,11 @@
-import map2tree from '../src';
+import map2tree, { Node } from '../src';
 import * as immutable from 'immutable';
 
 test('# rootNodeKey', () => {
   const map = {};
   const options = { key: 'foo' };
 
-  expect(map2tree(map, options).name).toBe('foo');
+  expect((map2tree(map, options) as Node).name).toBe('foo');
 });
 
 describe('# shallow map', () => {

packages/map2tree/webpack.config.umd.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 
-module.exports = (env: { production?: boolean } = {}) => ({
+export default (env: { production?: boolean } = {}) => ({
   mode: env.production ? 'production' : 'development',
   entry: {
     app: ['./src/index'],

packages/redux-devtools-log-monitor/src/LogMonitor.tsx

@@ -4,6 +4,7 @@ import { Action, Dispatch } from 'redux';
 import * as themes from 'redux-devtools-themes';
 import { Base16Theme } from 'redux-devtools-themes';
 import { ActionCreators, LiftedAction, LiftedState } from 'redux-devtools';
+import debounce from 'lodash.debounce';
 import {
   updateScrollTop,
   startConsecutiveToggle,
@@ -12,9 +13,6 @@ import {
 import reducer, { LogMonitorState } from './reducers';
 import LogMonitorButtonBar from './LogMonitorButtonBar';
 import LogMonitorEntryList from './LogMonitorEntryList';
-import debounce from 'lodash.debounce';
-import { DockMonitorState } from 'redux-devtools-dock-monitor/lib/reducers';
-import { DockMonitorAction } from 'redux-devtools-dock-monitor/lib/actions';
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const { toggleAction, setActionsActive } = ActionCreators;
@@ -276,8 +274,8 @@ export default (LogMonitor as unknown) as React.ComponentType<
 > & {
   update(
     monitorProps: ExternalProps<unknown, Action<unknown>>,
-    state: DockMonitorState | undefined,
+    state: LogMonitorState | undefined,
-    action: DockMonitorAction
+    action: LogMonitorAction
-  ): DockMonitorState;
+  ): LogMonitorState;
   defaultProps: DefaultProps<unknown>;
 };