From 55b656138072578f62bede4e006f71f00a428b18 Mon Sep 17 00:00:00 2001 From: Peter Froud Date: Thu, 4 Aug 2022 17:44:09 -0700 Subject: [PATCH 1/4] Suggest returning `String(wasmURL)` in worker.js See https://github.com/aduh95/viz.js/issues/27 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index d42db3c9..9c4dfa8b 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,8 @@ import wasmURL from "@aduh95/viz.js/wasm"; initWASM({ locateFile() { return wasmURL; + // If that does not work, try this: + // return String(wasmURL); }, }); ``` From 2b5d3356f361714d01b6bd8ddee4d0c120c8425e Mon Sep 17 00:00:00 2001 From: Peter Froud Date: Thu, 4 Aug 2022 17:48:52 -0700 Subject: [PATCH 2/4] Clarify how to use viz.js in web browser * Clarify imports to use with different bundlers * Emphasize that you need to create worker.js * Clarify Viz constructor parameter * Add links to bundler plugins documentation --- README.md | 45 ++++++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 9c4dfa8b..fc2861f0 100644 --- a/README.md +++ b/README.md @@ -96,8 +96,8 @@ Key differences with async API: #### Using a bundler -You can either use the `worker` or the `workerURL` on the constructor. Note that -when using `workerURL`, `Viz` constructor will try to spawn a webworker using +You can either use the `worker` or the `workerURL` on the `Viz` constructor. Note that +when using `workerURL`, the `Viz` constructor will try to spawn a webworker using `type=module`. If you don't want a module worker, you should provide a `worker` instead. @@ -106,20 +106,29 @@ The Worker module exports a function that takes You can use that to tweak the defaults, the only requirement is to define a `locateFile` method that returns the URL of the WASM file. +Create file worker.js: + ```js // worker.js import initWASM from "@aduh95/viz.js/worker"; -// If you are not using a bundler that supports package.json#exports -// use "./node_modules/@aduh95/viz.js/dist/render.browser.js" instead. +// If you are not using a bundler that supports `package.json#exports`, +// use this import declaration: +// import initWASM from "./node_modules/@aduh95/viz.js/dist/render.browser.js"; // You need to configure your bundler to treat `.wasm` file as file to return a URL. import wasmURL from "@aduh95/viz.js/wasm"; -// With Rollup, use the `@rollup/plugin-url` plugin and add `**/*.wasm` to the -// `include` list in the plugin config. -// With Webpack, use the `file-loader` plugin: "file-loader!@aduh95/viz.js/wasm" - -// If you are not using a bundler that supports package.json#exports -// or doesn't have a file-loader plugin to get URL of the asset: +// If you are using Rollup, use the `@rollup/plugin-url` plugin and +// add `**/*.wasm` to the `include` list in the plugin config. +// See https://www.npmjs.com/package/@rollup/plugin-url. +// +// If you are using Webpack, use the `file-loader` plugin and use this import +// declaration: +// import wasmURL from "file-loader!@aduh95/viz.js/wasm"; +// See https://v4.webpack.js.org/loaders/file-loader/. +// +// If you are not using a bundler that supports `package.json#exports`, +// or you are using a bundler which doesn't have a file-loader plugin to get +// URL of the asset, use this const declaration instead of an import declaration: // const wasmURL = // new URL("./node_modules/@aduh95/viz.js/dist/render.wasm", import.meta.url); @@ -132,17 +141,23 @@ initWASM({ }); ``` -And give feed that module to the main thread: +And give the worker.js module to the main thread: ```js //main.js import Viz from "@aduh95/viz.js"; -// If you are not using a bundler that supports package.json#exports: +// If you are not using a bundler that supports `package.json#exports`, +// use this import declaration: // import Viz from "./node_modules/@aduh95/viz.js/dist/index.mjs"; - -// If you are using Rollup, use `@surma/rollup-plugin-off-main-thread` plugin. -// If you are using Webpack, use the `worker-loader` plugin and add this import: +// +// If you are using Rollup, use the `@surma/rollup-plugin-off-main-thread` +// plugin. +// See https://www.npmjs.com/package/@surma/rollup-plugin-off-main-thread. +// +// If you are using Webpack, use the `worker-loader` plugin and use +// this import declaration: // import VizWorker from "worker-loader!./worker.js"; +// See https://v4.webpack.js.org/loaders/worker-loader/. let viz; async function dot2svg(dot, options) { From 0ba79692b731a55354131ae7b72b415a810bbc8b Mon Sep 17 00:00:00 2001 From: Peter Froud Date: Fri, 5 Aug 2022 13:32:57 -0700 Subject: [PATCH 3/4] Put name of js file in code block Co-authored-by: Antoine du Hamel --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fc2861f0..ac39514a 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,7 @@ initWASM({ }); ``` -And give the worker.js module to the main thread: +And give the `worker.js` module to the main thread: ```js //main.js From 52def18d0f8006da30b5d6f7f2a402dea5e9e01f Mon Sep 17 00:00:00 2001 From: Peter Froud Date: Fri, 5 Aug 2022 13:33:05 -0700 Subject: [PATCH 4/4] Put name of js file in code block again Co-authored-by: Antoine du Hamel --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ac39514a..5e5b838a 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ The Worker module exports a function that takes You can use that to tweak the defaults, the only requirement is to define a `locateFile` method that returns the URL of the WASM file. -Create file worker.js: +Create file `worker.js`: ```js // worker.js