feat(WASM): allow data-url to point to VTK package registry tar.gz file

jspanchu · jspanchu · commit 1f8ac8965f7d · 2025-09-14T13:11:03.000-04:00
diff --git a/docs/guide/js/plain.md b/docs/guide/js/plain.md
@@ -34,6 +34,13 @@ In this example we tag the script to autoload WASM and create a global vtk names
 <<< ../../public/demo/example.js
 :::
 
+In this example we tag the script to autoload WASM directly from the VTK repository's package registry and create a global vtk namespace. You can customize the wasm architecture and version by changing the data-url.
+
+::: code-group
+<<< ../../public/demo/plain-javascript-annotation-wasm-registry.html
+<<< ../../public/demo/example.js
+:::
+
 ## Configuration options
 
 The method `createNamespace(url, config)` takes two arguments. The first one is used to specify the base directory where the wasm file from VTK will be find. When the module is loaded, the __url__ parameter could be skipped. For the __config__ it is aimed to tune how you would like your WASM environement to behave. The following sections cover the various options and what it means.
@@ -50,4 +57,4 @@ The method `createNamespace(url, config)` takes two arguments. The first one is
   - WebGPU only works with the asynchronous implementation of method execution.
   - This require WebAssembly JavaScript Promise Integration (JSPI) support in your browser
 
-For the __annotation__ usecase you can add `data-config="{'rendering': 'webgpu'}"` attribute in your HTML to adjust the config setting.
+For the __annotation__ usecase you can add `data-config="{'rendering': 'webgpu'}"` attribute in your HTML to adjust the config setting.
diff --git a/docs/public/demo/plain-javascript-annotation-wasm-registry.html b/docs/public/demo/plain-javascript-annotation-wasm-registry.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <script
+      src="https://unpkg.com/@kitware/vtk-wasm/vtk-umd.js"
+      id="vtk-wasm"
+      data-url="https://gitlab.kitware.com/api/v4/projects/13/packages/generic/vtk-wasm32-emscripten/9.5.20250913/vtk-9.5.20250913-wasm32-emscripten.tar.gz"
+    ></script>
+    <script src="example.js"></script>
+  </head>
+  <body>
+    <canvas id="vtk-wasm-window"></canvas>
+    <script>
+      vtkReady.then((vtk) => {
+        buildWASMScene(vtk); // Also available on window.vtk
+      });
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,15 +25,16 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "js-untar": "^2.0.0",
     "jszip": "3.10.1"
   },
   "devDependencies": {
+    "conventional-changelog-conventionalcommits": "9.1.0",
     "eslint": "^9.22.0",
     "globals": "^16.0.0",
     "prettier": "3.5.3",
     "rimraf": "^6.0.1",
     "semantic-release": "24.2.7",
-    "conventional-changelog-conventionalcommits": "9.1.0",
     "vite": "^6.2.4",
     "vitepress": "^1.6.3"
   },
diff --git a/src/wasmLoader.js b/src/wasmLoader.js
@@ -1,5 +1,8 @@
+import untar from "js-untar";
+
 const LOADED_URLS = [];
 const PROMISES = {};
+let WASM_FILE_OBJECT = null;
 
 /**
  * Create a future that returns
@@ -33,18 +36,22 @@ function isSameConfig(a, b) {
 }
 
 export function generateWasmConfig(config) {
-  if (config?.rendering === "webgpu") {
-    console.log("WASM use WebGPU");
-    return {
-      preRun: [
-        function (module) {
-          module.ENV.VTK_GRAPHICS_BACKEND = "WEBGPU";
-        },
-      ],
-    };
+  return {
+    locateFile: (fileName) => {
+      if (WASM_FILE_OBJECT && fileName == WASM_FILE_OBJECT.name) {
+        return URL.createObjectURL(WASM_FILE_OBJECT);
+      }
+      return new URL(fileName, import.meta.url).href;
+    },
+    onRuntimeInitialized: (module) => {
+      if (WASM_FILE_OBJECT) {
+        URL.revokeObjectURL(WASM_FILE_OBJECT);
+      }
+    },
+    preRun: config?.rendering === "webgpu" ? [(module) => {
+      module.ENV.VTK_GRAPHICS_BACKEND = "WEBGPU";
+    }] : [],
   }
-  console.log("WASM use WebGL2");
-  return {};
 }
 
 /**
@@ -148,14 +155,34 @@ export class VtkWASMLoader {
         let jsModuleURL = null;
 
         // Try newest version first
-        url = `${wasmBaseURL}/${wasmBaseName}WebAssembly${this.config?.exec === "async" ? "Async" : ""}.mjs`;
-        const newModuleResponse = await fetch(url);
-        if (newModuleResponse.ok) {
-          // In docker we serve the index.html when file don't exist
-          const content = await newModuleResponse.text();
-          if (content[0] !== "<") {
-            // Not html content
-            jsModuleURL = url;
+        let newModuleResponse = null;
+        if (wasmBaseURL.startsWith("http") && wasmBaseURL.endsWith(".gz")) {
+          // Absolute URL pointing to a GZIP file.
+          newModuleResponse = await fetch(wasmBaseURL);
+          const ds = new DecompressionStream("gzip");
+          const decompressedStream = newModuleResponse.body.pipeThrough(ds);
+          const blob = await new Response(decompressedStream).blob();
+          const arrayBuffer = await blob.arrayBuffer();
+          const files = await untar(arrayBuffer);
+          files.forEach((file) => {
+            file.name = file.name.replace("./", "");
+            if (file.name === `${wasmBaseName}WebAssembly${this.config?.exec === "async" ? "Async" : ""}.mjs`) {
+              jsModuleURL = URL.createObjectURL(new File([file.buffer], file.name, { type: "text/javascript" }));
+            } else if (file.name === `${wasmBaseName}WebAssembly${this.config?.exec === "async" ? "Async" : ""}.wasm`) {
+              // Create a file URL for the wasm file so it can be loaded
+              WASM_FILE_OBJECT = new File([file.buffer], file.name, { type: "application/wasm" });
+            }
+          });
+        } else {
+          url = `${wasmBaseURL}/${wasmBaseName}WebAssembly${this.config?.exec === "async" ? "Async" : ""}.mjs`;
+          newModuleResponse = await fetch(url);
+          if (newModuleResponse.ok) {
+            // In docker we serve the index.html when file don't exist
+            const content = await newModuleResponse.text();
+            if (content[0] !== "<") {
+              // Not html content
+              jsModuleURL = url;
+            }
           }
         }
 
@@ -181,6 +208,10 @@ export class VtkWASMLoader {
         // Load JS
         console.log("WASM use", jsModuleURL);
         await loadScriptAsModule(jsModuleURL);
+        // Cleanup object URL corresponding to the JavaScript module.
+        if (jsModuleURL.startsWith("blob:")) {
+          URL.revokeObjectURL(jsModuleURL);
+        }
       }
 
       // Load WASM
