fix: build wasm files before running webpack

build-wasm.mjs

@@ -0,0 +1,32 @@
+import { fileURLToPath } from "url"
+import path from "path"
+import { spawn } from "child_process"
+
+function runProcess(bin, args, options) {
+  return new Promise((resolve, reject) => {
+    const p = spawn(bin, args, options)
+
+    p.on("close", (code) => {
+      if (code === 0) {
+        resolve()
+      } else {
+        reject(new Error("Rust compilation."))
+      }
+    })
+
+    p.on("error", reject)
+  })
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+runProcess("wasm-pack", [
+  "--verbose",
+  "build",
+  path.resolve(__dirname, "crate"),
+  "--out-dir",
+  path.resolve(__dirname, "crate", "pkg"),
+  "--out-name",
+  "index",
+  "--target",
+  "bundler",
+])

package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "start": "export NODE_ENV=development && webpack serve --open",
-    "build": "rm -rf lib lib-test && export $(grep -v '^#' .env | xargs) && export NODE_ENV=production && webpack && tsc --project tsconfig.build.json --emitDeclarationOnly ",
+    "build": "rm -rf lib lib-test && export $(grep -v '^#' .env | xargs) && export NODE_ENV=production && node build-wasm.mjs && webpack && tsc --project tsconfig.build.json --emitDeclarationOnly ",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "test-e2e": "npx playwright test",
     "format": "eslint --fix \"src/**/*.{ts,js}\" \"integration-tests/**/*.{ts,js}\""
@@ -45,6 +45,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.0",
+    "wasm-pack": "^0.13.1",
     "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",

src/run.ts

@@ -1,6 +1,6 @@
 import getCanvasRenderDescriptor from "getCanvasRenderDescriptor"
 import { drawTexture } from "WebGPU/programs/initPrograms"
-import { type State } from "../crate/pkg"
+import { State } from "../crate/glue_code"
 import getCanvasMatrix from "getCanvasMatrix"
 
 export const transformMatrix = new Float32Array()

webpack.config.js

@@ -97,7 +97,7 @@ const testConfig = {
   },
   plugins: [
     ...baseConfig.plugins,
-    new HtmlWebpackPlugin({
+    !isProd && new HtmlWebpackPlugin({
       template: path.resolve(__dirname, "integration-tests/template.html"),
       inject: true,
       chunks: ['integrationTest'],
@@ -106,4 +106,4 @@ const testConfig = {
   ],
 }
 
-export default isProd ? [libConfig, testConfig] : testConfig
+export default isProd ? [libConfig, testConfig] : testConfig