Merge pull request #129 from GordonSmith/SFX

feat:  Add self extracting wasm "sfx-graphviz"

Author: GordonSmith

.gitignore

@@ -12,6 +12,7 @@
 /node_modules
 /rust
 /src-*
+/src/*.wasm.ts
 /tmp
 /types
 /vcpkg

CMakeLists.txt

@@ -19,6 +19,8 @@ SET(EM_FLAGS
     "-s IGNORE_CLOSURE_COMPILER_ERRORS=0"
     "-s USE_ES6_IMPORT_META=0"
     # "-s WASM_BIGINT=1"
+    "-s STANDALONE_WASM=0"
+    # "-s DYNAMIC_EXECUTION=0"
     "--pre-js ${CMAKE_CURRENT_SOURCE_DIR}/cpp/src/pre.js"
     "--post-js ${CMAKE_CURRENT_SOURCE_DIR}/cpp/src/post.js"
 )

index.html

@@ -9,8 +9,7 @@
         var wasmBinaryFile;
         switch (window.location.hostname) {
             case "localhost":
-                document.write('<script type="text/javascript" src="./dist/index.js"><' + '/script>');
-                wasmBinaryFile = "./dist/graphvizlib.wasm";
+                document.write('<script type="text/javascript" src="./dist/sfx-graphviz.js"><' + '/script>');
                 break;
             default:
                 document.write('<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.min.js"><' + '/script>');
@@ -21,7 +20,6 @@
 
     <script>
         var hpccWasm = window["@hpcc-js/wasm"];
-        // hpccWasm.wasmFolder("build/cpp/graphviz/graphvizlib");
     </script>
 </head>
 
@@ -36,11 +34,10 @@ <h3>Two</h3>
     <h3>Sync DOT</h3>
     <div id="placeholder3"></div>
     <hr>
-    <h3>Cached wasmBinary</h3>
+    <h3>ESM wasmBinary</h3>
     <div id="placeholder4"></div>
     <hr>
     <script>
-        hpccWasm.expatVersion().then(v => alert(v));
         const dot = `
             digraph G {
                 node [shape=rect];
@@ -112,19 +109,27 @@ <h3>Cached wasmBinary</h3>
             }
         });
 
-        fetch(wasmBinaryFile, { credentials: 'same-origin' }).then(response => {
-            if (!response.ok) {
-                throw "failed to load wasm binary file at '" + wasmBinaryFile + "'";
-            }
-            return response.arrayBuffer();
-        }).then(wasmBinary => {
-            hpccWasm.graphviz.layout(dot, "svg", "dot", { wasmBinary: wasmBinary }).then(svg => {
-                const div = document.getElementById("placeholder4");
-                div.innerHTML = svg;
-            }).catch(err => console.error(err.message));
-        });
     </script>
 
+    <script type="module">
+        import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/sfx-graphviz.esm.js";
+        if (Graphviz) {
+            const graphviz = await Graphviz.load();
+            const svg = graphviz.layout(dot, "svg", "dot");
+            const div = document.getElementById("placeholder4");
+            div.innerHTML = svg;
+        } 
+    </script>
+
+    <script type="module">
+        import { Graphviz } from "./dist/sfx-graphviz.esm.js";
+        if (Graphviz) {
+            const graphviz = await Graphviz.load();
+            const svg = graphviz.layout(dot, "svg", "dot");
+            const div = document.getElementById("placeholder4");
+            div.innerHTML = svg;
+        }
+    </script>
 </body>
 
 </html>

package.json

@@ -38,6 +38,10 @@
         "import": "./dist/graphviz.es6.js",
         "default": "./dist/graphviz.js"
       },
+      "sfx-graphviz": {
+        "import": "./dist/sfx-graphviz.esm.js",
+        "default": "./dist/sfx-graphviz.js"
+      },
       "zstd": {
         "import": "./dist/zstd.es6.js",
         "default": "./dist/zstd.js"
@@ -80,8 +84,14 @@
     "compile-cpp:win32": "wsl -e ./scripts/cpp-build.sh",
     "bundle": "rollup -c",
     "bundle-watch": "npm run bundle -- -w",
-    "minimize": "terser dist/index.js -c -m --source-map -o dist/index.min.js",
-    "build": "run-s compile-cpp compile bundle minimize",
+    "bundle-sfx": "rollup -c ./rollup-sfx.config.mjs",
+    "gen-sfx-base91": "node ./bin/sfx-wasm.mjs ./build/cpp/base91/base91lib.wasm > ./lib-es6/base91lib.wasm.js",
+    "gen-sfx-expat": "node ./bin/sfx-wasm.mjs ./build/cpp/expat/expatlib/expatlib.wasm > ./lib-es6/expatlib.wasm.js",
+    "gen-sfx-graphviz": "node ./bin/sfx-wasm.mjs ./build/cpp/graphviz/graphvizlib/graphvizlib.wasm > ./lib-es6/graphvizlib.wasm.js",
+    "gen-sfx-zstd": "node ./bin/sfx-wasm.mjs ./build/cpp/zstd/zstdlib.wasm > ./lib-es6/zstdlib.wasm.js",
+    "gen-sfx": "run-p gen-sfx-base91 gen-sfx-expat gen-sfx-graphviz gen-sfx-graphviz",
+    "minimize": "terser dist/index.js -c -m --source-map -o dist/index.min.js && terser dist/sfx-graphviz.js -c -m --source-map -o dist/sfx-graphviz.min.js",
+    "build": "run-s compile-cpp compile bundle gen-sfx bundle-sfx minimize",
     "build-docker": "docker build --rm --progress plain -f \"./docker/ubuntu-dev.dockerfile\" -t hpcc-js-wasm-build:latest \".\"",
     "standard-version": "standard-version",
     "standard-version-dryrun": "standard-version --dry-run",

rollup-sfx.config.mjs

@@ -0,0 +1,31 @@
+import commonjs from "@rollup/plugin-commonjs";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import sourcemaps from "rollup-plugin-sourcemaps";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const pkg = require("./package.json");
+const browserTpl = (input, umdOutput, esOutput) => ({
+    input: input,
+    output: [{
+        file: umdOutput + ".js",
+        format: "umd",
+        sourcemap: true,
+        name: pkg.name
+    }, {
+        file: esOutput + ".js",
+        format: "es",
+        sourcemap: true
+    }],
+    plugins: [
+        nodeResolve({
+            preferBuiltins: true
+        }),
+        commonjs({}),
+        sourcemaps()
+    ]
+});
+
+export default [
+    browserTpl("lib-es6/sfx-graphviz", "dist/sfx-graphviz", "dist/sfx-graphviz.esm"),
+];

rollup.config.mjs

@@ -96,7 +96,6 @@ export default [
     browserTpl("lib-es6/graphviz", "dist/graphviz", "dist/graphviz.es6"),
     browserTpl("lib-es6/expat", "dist/expat", "dist/expat.es6"),
     browserTpl("lib-es6/zstd", "dist/zstd", "dist/zstd.es6"),
-    browserTpl("lib-es6/extract", "dist/extract", "dist/extract.es6"),
 
     browserTpl("lib-es6/__tests__/index", "dist-test/index", "dist-test/index.es6"),
     nodeTpl("lib-es6/__tests__/index-node", "dist-test/index.node", "dist-test/index.node.es6"),

src/__bin__/sfx-wasm.mts

@@ -1,7 +1,7 @@
 import fs from "fs";
 import yargs from "yargs";
 import { hideBin } from 'yargs/helpers'
-import { Zstd, Base91, extract } from "../index-node";
+import { Zstd, Base91 } from "../index-node";
 
 const myYargs = yargs(hideBin(process.argv)) as yargs.Argv<{}>;
 myYargs
@@ -28,13 +28,21 @@ try {
         const str = base91.encode(compressed);
         console.log(`\
 import { extract } from "./extract";
+import wrapper from "../${wasmPath.replace(".wasm", ".js")}";
+
 const blobStr = '${str}';
-export const wasmBinary = extract(blobStr);
+
+let g_module;
+export function loadWasm() {
+    if (!g_module) {
+        g_module = wrapper({
+            wasmBinary: extract(blobStr)
+        });
+    }
+    return g_module;
+}
+
         `);
-        const test = extract(str);
-        if (test.length !== wasmContent.length) {
-            throw new Error("Oh oh");
-        }
     } else {
         throw new Error("'filePath' is required.")
     }

src/extract.ts

@@ -1,6 +1,5 @@
 import * as fzstd from 'fzstd';
 
-
 //  See:  https://github.com/Equim-chan/base91
 const table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,./:;<=>?@[]^_`{|}~"';
 

src/graphviz.ts

@@ -48,13 +48,15 @@ function createFiles(graphviz: any, _ext?: Ext) {
 }
 
 export function graphvizVersion(wasmFolder?: string, wasmBinary?: ArrayBuffer) {
+    console.warn("Deprecation Warning:  'graphvizVersion' will be refactored into 'Graphviz' in 2.0.0");
     return loadWasm(graphvizlib, "graphvizlib", wasmFolder, wasmBinary).then(module => {
         return module.Graphviz.prototype.version();
     });
 }
 
 export const graphviz = {
     layout(dotSource: string, outputFormat: Format = "svg", layoutEngine: Engine = "dot", ext?: Ext): Promise<string> {
+        console.warn("Deprecation Warning:  'graphviz' will be replaced with 'Graphviz' in 2.0.0");
         if (!dotSource) return Promise.resolve("");
         return loadWasm(graphvizlib, "graphvizlib", ext?.wasmFolder, ext?.wasmBinary).then(module => {
             const graphViz = new module.Graphviz(ext?.yInvert ? 1 : 0, ext?.nop ? ext?.nop : 0);
@@ -105,6 +107,7 @@ export class GraphvizSync {
     }
 
     layout(dotSource: string, outputFormat: Format = "svg", layoutEngine: Engine = "dot", ext?: Ext): string {
+        console.warn("Deprecation Warning:  'GraphvizSync' will be replaced with 'Graphviz' in 2.0.0");
         if (!dotSource) return "";
         const graphViz = new this._wasm.Graphviz(ext?.yInvert ? 1 : 0, ext?.nop ? ext?.nop : 0);
         createFiles(graphViz, ext);

src/index-common.ts

@@ -1,6 +1,5 @@
 export { wasmFolder } from "./util";
 export * from "./base91";
 export * from "./expat";
-export * from "./extract";
 export * from "./graphviz";
 export * from "./zstd";