Use dynamic import wasm module

README.md

@@ -17,15 +17,15 @@ $ npm install @ts-graphviz/react
 
 ### Peer Dependencies
 
-- [React](https://github.com/facebook/react/)(>=16.8)
+- [React and ReactDOM](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
+$ yarn add react react-dom ts-graphviz
 # Optional Peer Dependencies
-$ yarn add @hpcc-js/wasm react-dom
+$ yarn add @hpcc-js/wasm
 ```
 
 ## DEMO

rollup.build.ts

@@ -22,6 +22,7 @@ async function build({
       typescript({
         tsconfigOverride: {
           compilerOptions: {
+            module: 'ESNext',
             declaration,
           },
         },

src/hooks/use-rendered.ts

@@ -1,5 +1,4 @@
-import { useState, useEffect } from 'react';
-import { graphviz } from '@hpcc-js/wasm';
+import { useState, useEffect, useMemo } from 'react';
 
 export type Format = 'svg' | 'dot' | 'json' | 'dot_json' | 'xdot_json';
 
@@ -24,11 +23,9 @@ export const useRendered = (
   },
 ): string | undefined => {
   const [rendered, setRendered] = useState<string>();
+  const graphviz = useMemo(() => import('@hpcc-js/wasm').then(wasm => wasm.graphviz), []);
   useEffect(() => {
-    (async (): Promise<void> => {
-      const result = await graphviz.layout(dot, format, engine, ext);
-      setRendered(result);
-    })();
-  }, [dot, engine, format, ext, setRendered]);
+    graphviz.then(gv => gv.layout(dot, format, engine, ext)).then(setRendered);
+  }, [dot, engine, format, ext, setRendered, graphviz]);
   return rendered;
 };