fix: react-app and node build

.github/workflows/build-react-app.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd
 
       - name: Install Dependendencies
-        run: pnpm --filter react-example install
+        run: pnpm install
 
       - name: Download WASM artifacts
         if: ${{ inputs.wasm-artifacts-path }}
@@ -34,6 +34,10 @@ jobs:
           name: wasm-build
           path: ${{ inputs.wasm-artifacts-path }}
 
+      - name: Build img2num module
+        # Only build for browser since that is all we need here
+        run: pnpm -F img2num build:browser
+
       - name: Build React app
         run: pnpm -F react-example run build
 

Justfile

@@ -10,10 +10,13 @@ help:
     \t cpp: build c++ core and c bindings \n \
     \t js: build js/wasm bindings \n \
     \t py: build python bindings and python package \n \
+    \t packages-js: build browser and node packages using js/wasm bindings \n \
     \t all: build all of above \n \
     clean <target>: \n \
     \t cpp: delete c++ and c build folder (build-c-cpp) \n \
     \t js: delete js build folder (build-wasm) \n \
+    \t packages-js: delete packages/js/dist folder \n \
+    \t packages-py: delete packages/py/build-py folder \n \
     docs <action>: \n \
     \t build: build docusaurus server \n \
     \t start: start docusaurus server on port 3000 \n \
@@ -23,11 +26,13 @@ help:
     console-cpp <input_image>: run example C++ app on input image \n \
     console-c <input_image>: run example C app on input image \n \
     console-py <input_image>: run example python app on input image \n \
+    console-js <input_image>: run example node app on input image \n \
     "
 
 init:
     @echo "Pulling submodules"
     git submodule update --init
+    pnpm install
     just build all
 
 format:
@@ -49,19 +54,27 @@ build-py:
     uv sync --reinstall
     uv build --wheel
 
+build-packages-js:
+    @echo "Build js packages"
+    just build-wasm
+    pnpm -F img2num build
+
 build target:
     case "{{ target }}" in \
         cpp) just build-c-cpp ;; \
         js) just build-wasm ;; \
         py) just build-py ;; \
-        all) just build-c-cpp build-wasm build-py react-js build docs build ;; \
+        packages-js) just build-packages-js ;; \
+        all) just build-c-cpp build-wasm build-py build-packages-js react-js build docs build ;; \
     esac
 
 clean target:
     @echo "Remove {{ target }} folders"
     case "{{ target }}" in \
         cpp) rm -rf build-c-cpp/ ;; \
         js) rm -rf build-wasm/ ;; \
+        packages-js) rm -rf packages/js/dist/ ;; \
+        packages-py) rm -rf packages/py/build-py/ ;; \
     esac
 
 docs action:
@@ -71,7 +84,7 @@ docs action:
         start) cd docs/ && pnpm run serve ;; \
     esac
 
-react-js action: build-wasm
+react-js action: build-packages-js
     @echo "Run react sample app"
     case "{{ action }}" in \
         build) pnpm -F react-example run build ;; \
@@ -90,3 +103,7 @@ console-cpp input:
 console-c input:
     @echo "./build-c-cpp/example-apps/console-c/console_c_app {{ input }}"
     ./build-c-cpp/example-apps/console-c/CImg2NumExample_console_c "{{ input }}"
+
+console-js input:
+    @echo "node example-apps/console-js/index.js {{ input }}"
+    node example-apps/console-js/index.js "{{ input }}"

bindings/js/CMakeLists.txt

@@ -22,7 +22,7 @@ target_include_directories(img2num_wasm PRIVATE
 set(COMMON_FLAGS
     "SHELL:-sMODULARIZE=1"
     "SHELL:-sEXPORT_ES6=1"
-    "SHELL:-sENVIRONMENT=web,worker"
+    "SHELL:-sENVIRONMENT=web,worker,node"
     "SHELL:-sEXPORTED_FUNCTIONS=['_malloc','_free']"
     "SHELL:-sEXPORTED_RUNTIME_METHODS=['ccall','cwrap','getValue','setValue','HEAPU8','HEAP32','UTF8ToString','stringToUTF8','lengthBytesUTF8']"
     "SHELL:-sINITIAL_MEMORY=2GB"

core/include/internal/gpu.h

@@ -128,8 +128,7 @@ class GPU {
         );
     };
 
-    void init_gpu() { // wgpu::Instance& instance, wgpu::Adapter& adapter, wgpu::Device& device,
-                      // wgpu::Queue& queue) {
+    void init_gpu() {
         if (gpu_initialized)
             return;
 

docs/plugins/docusaurusPluginTypeDocConfig.js

@@ -2,13 +2,13 @@ const config = [
   "docusaurus-plugin-typedoc",
   {
     name: "API",
-    entryPoints: ["../packages/js/index.js"],
+    entryPoints: ["../packages/js/src/index.js"],
     entryPointStrategy: "expand",
     out: "docs/js/api",
     json: "static/js/api.json",
     readme: "none",
     tsconfig: "../packages/js/tsconfig.typedoc.json",
-    exclude: ["node_modules/", "build-wasm/", ".gitignore", "package.json", "*.test.*"],
+    exclude: ["node_modules/", "build-wasm/", "dist/", ".gitignore", "package.json", "*.test.*"],
     blockTags: ["@param", "@returns", "@throws", "@example", "@async", "@summary", "@property", "@todo", "@variation", "@description", "@module", "@author", "@license", "@exports", "@see", "@since"],
     gitRevision: "main",
     sourceLinkTemplate: "https://github.com/Ryan-Millard/Img2Num/blob/{gitRevision}/{path}#L{line}",

eslint.config.js

@@ -15,6 +15,7 @@ export default defineConfig([
 
     "scripts/img2num-dev-scripts/node_modules",
 
+    "packages/js/dist",
     "packages/js/build-wasm",
     "packages/js/node_modules",
 

example-apps/console-js/index.js

@@ -0,0 +1,26 @@
+import { writeFileSync } from "fs";
+import { imageToSvg } from "img2num";
+import sharp from "sharp";
+
+const imagePath = process.argv[2];
+
+if (!imagePath) {
+  console.error("Usage: node index.js <image-path>");
+  process.exit(1);
+}
+
+console.log(`Processing image: ${imagePath}`);
+
+const { data, info } = await sharp(imagePath).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+
+const pixels = new Uint8ClampedArray(data.buffer);
+const { width, height } = info;
+
+console.log(`Image size: ${width}x${height}`);
+console.log("Running img2num in Node.js...");
+
+const { svg } = await imageToSvg({ pixels, width, height });
+
+writeFileSync("output.svg", svg);
+console.log("Done! SVG saved to output.svg");
+process.exit();

example-apps/console-js/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "console-js",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "img2num": "workspace:*",
+    "sharp": "^0.33.0"
+  }
+}

example-apps/react-js/vite.config.js

@@ -34,4 +34,14 @@ export default defineConfig({
     generateContributorCreditsPlugin(),
     svgr(),
   ],
+  worker: {
+    format: "es", // Keeps your top-level awaits working
+  },
+  build: {
+    target: "esnext",
+    rollupOptions: {
+      // Tells the bundler to ignore these when building for the web browser
+      external: ["webgpu", "worker_threads", "url", "path", "fs"],
+    },
+  },
 });