fix module api

Author: kamiazya

.eslintignore

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

.gitignore

@@ -131,8 +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

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",

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/components/Graphviz.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable react/prop-types */
+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;
+  engine?: Engine;
+  images?: Image[];
+  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 });
+  const svg = useMemo((): { __html: string } | undefined => {
+    if (rendered) {
+      return {
+        __html: rendered,
+      };
+    }
+    return undefined;
+  }, [rendered]);
+  return <div dangerouslySetInnerHTML={svg} />;
+};
+
+Graphviz.defaultProps = {
+  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();
+  });
+});

…s__/__snapshots__/Graphviz.spec.tsx.snap …s__/__snapshots__/Graphviz.spec.tsx.snapsrc/web/components/__tests__/__snapshots__/Graphviz.spec.tsx.snap renamed to src/components/__tests__/__snapshots__/Graphviz.spec.tsx.snap src/web/components/__tests__/__snapshots__/Graphviz.spec.tsx.snap renamed to src/components/__tests__/__snapshots__/Graphviz.spec.tsx.snap

@@ -7,11 +7,3 @@ exports[`Graphviz component render dot element 1`] = `
   </div>
 </div>
 `;
-
-exports[`Graphviz component render dot string 1`] = `
-<div>
-  <div>
-    {"dot":"digraph { a -&gt; b -&gt; c; a-&gt;c; }","format":"svg","ext":{"images":[],"files":[]}}
-  </div>
-</div>
-`;

src/web/hooks/rendered.ts src/hooks/use-rendered.tssrc/web/hooks/rendered.ts renamed to src/hooks/use-rendered.ts

@@ -1,4 +1,5 @@
 export * from './renderer/render';
+export * from './hooks/use-rendered';
 export * from './hooks/use-cluster';
 export * from './hooks/use-graphviz-context';
 export * from './hooks/use-digraph';
@@ -8,6 +9,7 @@ export * from './hooks/use-edge';
 export * from './hooks/use-node';
 export * from './hooks/use-rendered-id';
 export * from './hooks/use-root-cluster';
+export * from './components/Graphviz';
 export * from './components/HtmlLike';
 export * from './components/Graph';
 export * from './components/Digraph';