Merge pull request #68 from ts-graphviz/web

Web Module

Author: kamiazya

.github/workflows/generate-doc-and-deploy.yml

@@ -0,0 +1,31 @@
+name: Generate Doc and Deploy
+
+on:
+  push:
+    branches:
+    - master
+
+jobs:
+  deploy:
+    name: Deploy to gh-pages
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+    - name: Install dependencies
+      run: yarn --frozen-lockfile
+      env:
+        CI: true
+    - name: Generate Storybook
+      run: yarn storybook:build
+      env:
+        CI: true
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v2.5.0
+      env:
+        PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
+        PUBLISH_BRANCH: gh-pages
+        PUBLISH_DIR: ./docs

.gitignore

@@ -130,4 +130,8 @@ Temporary Items
 
 # End of https://www.gitignore.io/api/macos
 
-lib
+# Output Modules
+core
+web
+docs
+*.d.ts

.npmignore

@@ -7,8 +7,9 @@
 .vscode
 config
 coverage
+docs
 jest.config.js
 LICENSE
-rollup.config.js
+rollup.build.ts
 src
 tsconfig.json

.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,19 @@
+module.exports = {
+  stories: ['../src/**/*.stories.[tj]sx'],
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs/register',
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
+};

README.md

@@ -19,20 +19,30 @@ $ npm install @ts-graphviz/react
 
 - [React](https://github.com/facebook/react/)(>=16.8)
 - [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)
+- [@hpcc-js/wasm](https://www.npmjs.com/package/@hpcc-js/wasm) (Optional)
 
 ```bash
+# Peer Dependencies
 $ yarn add react ts-graphviz
+# Optional Peer Dependencies
+$ yarn add @hpcc-js/wasm
 ```
 
-## Usage
+## API
 
-### Example
+### Core Module
+
+The core is designed to be independent of the execution environment.
+
+It is designed to work in both browsers and Node.js.
+
+It provides core components and hooks of `@ts-graphviz/react` and render functions.
 
 #### Script
 
 ```tsx
 import React, { FC } from 'react';
-import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '@ts-graphviz/react';
+import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';
 
 const Example: FC = () => (
   <Digraph
@@ -87,7 +97,6 @@ digraph {
     shape = "none",
     label = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
   ];
-  "nodeB";
   subgraph "cluster" {
     labeljust = "l";
     label = "Cluster";
@@ -104,6 +113,38 @@ digraph {
 
 ![dot](./example/example.svg)
 
+### Web Module
+
+The `Graphviz` component of `@ts-graphviz/react/web` can be rendered directly in the browser.
+
+Since this component uses the function of `@hpcc-js/wasm` internally, it is necessary to host `@hpcc-js/wasm/dist/graphviz.wasm` and specify its directory with `wasmFolder`.
+
+For development, I recommend using the one hosted by unpkg.
+
+```tsx
+import React, { FC } from 'react';
+import ReactDOM from 'react-dom';
+import { Digraph, Node, Edge } from '@ts-graphviz/react';
+import { Graphviz } from '@ts-graphviz/react/web';
+import { wasmFolder } from '@hpcc-js/wasm';
+
+wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');
+
+const App: FC = () => (
+  <Graphviz>
+    <Digraph>
+      <Node id="n1" />
+      <Node id="n2" />
+      <Node id="n3" />
+      <Edge targets={['n1', 'n2', 'n3']} />
+      <Edge targets={['n1', 'n3']} />
+    </Digraph>
+  </Graphviz>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
 ## See Also
 
 Graphviz-dot Test and Integration

package.json

@@ -23,32 +23,47 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "lib/index.js",
-  "module": "lib/index.mjs",
-  "types": "lib/index.d.ts",
+  "main": "core/index.js",
+  "module": "core/index.mjs",
+  "types": "core/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
+    "example": "ts-node example/example",
+    "build": "ts-node rollup.build",
     "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",
+    "storybook:build": "build-storybook -c .storybook -o docs"
   },
   "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/addon-knobs": "^5.3.18",
+    "@storybook/addon-storysource": "^5.3.18",
+    "@storybook/react": "^5.3.18",
     "@testing-library/react-hooks": "^3.2.1",
+    "@types/fs-extra": "^8.1.0",
     "@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",
@@ -58,6 +73,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
+    "fs-extra": "^9.0.0",
     "jest": "^25.3.0",
     "jest-graphviz": "^0.3.1",
     "prettier": "^1.19.1",
@@ -69,6 +85,8 @@
     "rollup-plugin-typescript2": "^0.27.0",
     "ts-graphviz": "^0.10.0",
     "ts-jest": "^25.3.1",
+    "ts-loader": "^7.0.2",
+    "ts-node": "^8.9.1",
     "typescript": "^3.8.2"
   }
 }

rollup.build.ts

@@ -0,0 +1,63 @@
+import { rollup } from 'rollup';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+import commonjs from '@rollup/plugin-commonjs';
+import { move, remove } from 'fs-extra';
+
+async function build({
+  input,
+  output,
+  declaration,
+  external,
+}: {
+  input: string;
+  output: string;
+  declaration: boolean;
+  external: string[];
+}): Promise<void> {
+  const bundle = await rollup({
+    input,
+    plugins: [
+      commonjs(),
+      typescript({
+        tsconfigOverride: {
+          compilerOptions: {
+            declaration,
+          },
+        },
+      }),
+      terser(),
+    ],
+    external,
+  });
+  await Promise.all([
+    bundle.write({
+      format: 'cjs',
+      file: `${output}/index.js`,
+    }),
+    bundle.write({
+      format: 'esm',
+      file: `${output}/index.mjs`,
+    }),
+  ]);
+}
+
+(async (): Promise<void> => {
+  await Promise.all([remove('core'), remove('web')]);
+  await Promise.all([
+    build({
+      input: 'src/index.ts',
+      output: 'core',
+      declaration: true,
+      external: ['react', 'react-dom/server', 'ts-graphviz', 'prop-types', 'react-reconciler'],
+    }),
+    build({
+      input: 'src/web/index.ts',
+      output: 'core/web',
+      declaration: false,
+      external: ['react', 'react-dom/server', 'ts-graphviz', 'react-reconciler', '@hpcc-js/wasm'],
+    }),
+  ]);
+
+  await move('core/web', 'web');
+})();

rollup.config.js

@@ -0,0 +1,44 @@
+import React, { FC, useState, useEffect } from 'react';
+import { Graphviz } from '../web';
+import { Digraph, Node, Edge } from '../index';
+
+export default { title: 'Graphviz/Animations' };
+
+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>
+  );
+};