add web module by using wasm

Author: kamiazya

.storybook/config.js

@@ -0,0 +1,3 @@
+import { wasmFolder } from '@hpcc-js/wasm';
+
+wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: ['../src/**/*.stories.[tj]sx'],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
+};

package.json

@@ -29,26 +29,36 @@
   "scripts": {
     "build": "rollup -c",
     "test": "jest",
-    "lint": "eslint -c .eslintrc.json --ext ts,tsx src"
+    "lint": "eslint -c .eslintrc.json --ext ts,tsx src",
+    "storybook": "start-storybook -p 9000"
   },
   "peerDependencies": {
+    "@hpcc-js/wasm": "^0.3.13",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "ts-graphviz": ">=0.10.0"
   },
+  "peerDependenciesMeta": {
+    "@hpcc-js/wasm": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "prop-types": "^15.7.2",
     "react-reconciler": "^0.24.0"
   },
   "devDependencies": {
+    "@hpcc-js/wasm": "^0.3.13",
     "@rollup/plugin-commonjs": "^11.1.0",
+    "@storybook/react": "^5.3.18",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
     "@types/react-reconciler": "^0.18.0",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.28.0",
+    "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.1",
@@ -69,6 +79,7 @@
     "rollup-plugin-typescript2": "^0.27.0",
     "ts-graphviz": "^0.10.0",
     "ts-jest": "^25.3.1",
+    "ts-loader": "^7.0.2",
     "typescript": "^3.8.2"
   }
 }

src/web/Graphviz.stories.tsx

@@ -0,0 +1,82 @@
+import React, { FC, useState, useEffect } from 'react';
+import { Graphviz } from './Graphviz';
+import { Digraph } from '../components/Digraph';
+import { Node } from '../components/Node';
+import { Edge } from '../components/Edge';
+import { Subgraph } from '../components/Subgraph';
+import { DOT } from '../components/HtmlLike';
+
+export default { title: 'Graphviz' };
+
+export const Example: FC = () => (
+  <Graphviz>
+    <Digraph
+      rankdir="TB"
+      edge={{
+        color: 'blue',
+        fontcolor: 'blue',
+      }}
+      node={{
+        shape: 'none',
+      }}
+    >
+      <Node
+        id="nodeA"
+        shape="none"
+        label={
+          <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+            <DOT.TR>
+              <DOT.TD>left</DOT.TD>
+              <DOT.TD PORT="m">middle</DOT.TD>
+              <DOT.TD PORT="r">right</DOT.TD>
+            </DOT.TR>
+          </DOT.TABLE>
+        }
+      />
+
+      <Subgraph id="cluster" label="Cluster" labeljust="l">
+        <Node id="nodeB" label="This is label for nodeB." />
+      </Subgraph>
+      <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
+    </Digraph>
+  </Graphviz>
+);
+
+const shapes = [
+  'box',
+  'polygon',
+  'ellipse',
+  'oval',
+  'circle',
+  'egg',
+  'triangle',
+  'parallelogram',
+  'house',
+  'pentagon',
+  'hexagon',
+];
+
+export const CircoAnime: FC = () => {
+  const [nodes, setNodes] = useState<string[]>(['n0', 'n1']);
+  const [i, setI] = useState<number>(2);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNodes([...nodes, `n${i}`]);
+      setI(i + 1);
+    }, 2000);
+    return (): void => {
+      clearInterval(interval);
+    };
+  }, [nodes, i, setNodes, setI]);
+  return (
+    <Graphviz engine="circo">
+      <Digraph>
+        {nodes.map((n, j) => (
+          <Node id={n} key={n} shape={shapes[j % shapes.length]} />
+        ))}
+        <Edge targets={nodes} />
+        <Edge targets={[`n${i - 1}`, 'n0']} />
+      </Digraph>
+    </Graphviz>
+  );
+};

src/web/Graphviz.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React, { FC, ReactElement, useRef, useMemo, useEffect } from 'react';
+import { graphviz } from '@hpcc-js/wasm';
+import { renderToDot } from '../renderer/render';
+
+type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi';
+interface Image {
+  path: string;
+  width: string;
+  height: string;
+}
+interface File {
+  path: string;
+  data: string;
+}
+
+type Props = {
+  children: ReactElement;
+  engine?: Engine;
+  images?: Image[];
+  files?: File[];
+};
+
+export const Graphviz: FC<Props> = ({ children, engine, images, files }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const dot = useMemo(() => renderToDot(children), [children]);
+  useEffect(() => {
+    const render = async (): Promise<void> => {
+      const result = await graphviz.layout(dot, 'svg', engine, { images, files });
+      if (ref.current) {
+        ref.current.innerHTML = result;
+      }
+    };
+    render();
+  }, [dot, engine, images, files]);
+  return <div ref={ref} />;
+};
+
+Graphviz.defaultProps = {
+  images: [],
+  files: [],
+};