Merge pull request #69 from ts-graphviz/fix-web-module-api

Fix Graphviz component api

Author: kamiazya

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+lib

.gitignore

@@ -131,7 +131,7 @@ Temporary Items
 # End of https://www.gitignore.io/api/macos
 
 # Output Modules
-core
-web
+lib
 docs
+!src/**/*
 *.d.ts

.prettierignore

@@ -1 +1,2 @@
 node_modules
+lib

README.md

@@ -1,6 +1,6 @@
 # @ts-graphviz/react
 
-Graphviz-dot Renderer for React.
+Graphviz-dot Renderer using React.
 
 ## Installation
 
@@ -25,20 +25,16 @@ $ npm install @ts-graphviz/react
 # Peer Dependencies
 $ yarn add react ts-graphviz
 # Optional Peer Dependencies
-$ yarn add @hpcc-js/wasm
+$ yarn add @hpcc-js/wasm react-dom
 ```
 
-## API
-
-### Core Module
+## DEMO
 
-The core is designed to be independent of the execution environment.
+- [Storybook](https://ts-graphviz.github.io/react/)
 
-It is designed to work in both browsers and Node.js.
-
-It provides core components and hooks of `@ts-graphviz/react` and render functions.
+## API
 
-#### Script
+### Script
 
 ```tsx
 import React, { FC } from 'react';
@@ -81,7 +77,7 @@ const dot = renderToDot(<Example />);
 console.log(dot);
 ```
 
-#### Output dot
+### Output dot
 
 ```dot
 digraph {
@@ -113,9 +109,9 @@ digraph {
 
 ![dot](./example/example.svg)
 
-### Web Module
+### Web
 
-The `Graphviz` component of `@ts-graphviz/react/web` can be rendered directly in the browser.
+The `Graphviz` component 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`.
 
@@ -124,8 +120,7 @@ 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 { Graphviz, Digraph, Node, Edge } from '@ts-graphviz/react';
 import { wasmFolder } from '@hpcc-js/wasm';
 
 wasmFolder('https://unpkg.com/@hpcc-js/wasm/dist/');

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   verbose: true,
   collectCoverage: true,
   setupFilesAfterEnv: ['<rootDir>/config/jest/setup-jest.ts'],

package.json

@@ -23,9 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "core/index.js",
-  "module": "core/index.mjs",
-  "types": "core/index.d.ts",
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
   "scripts": {
     "example": "ts-node example/example",
     "build": "ts-node rollup.build",
@@ -55,6 +55,8 @@
     "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/react": "^5.3.18",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.4",
     "@testing-library/react-hooks": "^3.2.1",
     "@types/fs-extra": "^8.1.0",
     "@types/prop-types": "^15.7.3",

rollup.build.ts

@@ -2,7 +2,7 @@ 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';
+import { remove } from 'fs-extra';
 
 async function build({
   input,
@@ -43,21 +43,11 @@ async function build({
 }
 
 (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');
+  await remove('lib');
+  await build({
+    input: 'src/index.ts',
+    output: 'lib',
+    declaration: true,
+    external: ['react', 'react-dom/server', 'ts-graphviz', 'prop-types', 'react-reconciler', '@hpcc-js/wasm'],
+  });
 })();

src/web/components/Graphviz.tsx renamed to src/components/Graphviz.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/prop-types */
-import React, { FC, ReactElement, useMemo } from 'react';
-import { renderToDot } from '../../renderer/render';
-import { useRendered, Engine, Image, File } from '../hooks/rendered';
+import React, { FC, useMemo, ReactElement } from 'react';
+import { renderToDot } from '../renderer/render';
+import { useRendered, Engine, Image, File } from '../hooks/use-rendered';
 
 type Props = {
   children: ReactElement;
@@ -11,6 +11,9 @@ type Props = {
   files?: File[];
 };
 
+/**
+ * Web only
+ */
 export const Graphviz: FC<Props> = ({ children, engine, images, files }) => {
   const dot = useMemo(() => renderToDot(children), [children]);
   const rendered = useRendered(dot, engine, 'svg', { images, files });

src/components/__tests__/Graphviz.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Graphviz } from '../Graphviz';
+import { Engine, Format, Image } from '../../hooks/use-rendered';
+import { Digraph } from '../Digraph';
+import { Node } from '../Node';
+import { Edge } from '../Edge';
+
+jest.mock('../../hooks/use-rendered', () => {
+  return {
+    useRendered: (
+      dot: string,
+      engine?: Engine,
+      format?: Format,
+      ext?: {
+        images?: Image[];
+        files?: File[];
+      },
+    ): string => JSON.stringify({ dot, engine, format, ext }),
+  };
+});
+
+describe('Graphviz component', () => {
+  test('render dot element', () => {
+    const { container } = render(
+      <Graphviz>
+        <Digraph>
+          <Node id="n1" />
+          <Node id="n2" />
+          <Node id="n3" />
+          <Edge targets={['n1', 'n2', 'n3']} />
+          <Edge targets={['n1', 'n3']} />
+        </Digraph>
+      </Graphviz>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/__tests__/__snapshots__/Graphviz.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Graphviz component render dot element 1`] = `
+<div>
+  <div>
+    {"dot":"digraph {\\n  \\"n1\\";\\n  \\"n2\\";\\n  \\"n3\\";\\n  \\"n1\\" -&gt; \\"n2\\" -&gt; \\"n3\\";\\n  \\"n1\\" -&gt; \\"n3\\";\\n}","format":"svg","ext":{"images":[],"files":[]}}
+  </div>
+</div>
+`;