auto wasm compilation

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# webassembly
+/wasm

next.config.js

@@ -1,6 +1,26 @@
+const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');
+const path = require('path');
+
+let loadedWasm = false;
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack(nextConfig) {
+    if (!loadedWasm) {
+      loadedWasm = true;
+      nextConfig.plugins.push(
+        new WasmPackPlugin({
+          crateDirectory: path.resolve(__dirname, '..', 'utfdump', 'wasm'),
+          outDir: path.resolve(__dirname, 'wasm', 'utfdump'),
+          forceMode: 'production',
+          extraArgs: '--target web',
+        })
+      );
+    }
+
+    return nextConfig;
+  },
 };
 
 module.exports = nextConfig;

package-lock.json

@@ -17,7 +17,10 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "5.1.3",
-        "utfdump_wasm": "file:pkg"
+        "utfdump_wasm": "file:wasm/utfdump"
+      },
+      "devDependencies": {
+        "@wasm-tool/wasm-pack-plugin": "^1.7.0"
       }
     },
     "node_modules/@babel/runtime": {
@@ -459,6 +462,89 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@wasm-tool/wasm-pack-plugin": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@wasm-tool/wasm-pack-plugin/-/wasm-pack-plugin-1.7.0.tgz",
+      "integrity": "sha512-WikzYsw7nTd5CZxH75h7NxM/FLJAgqfWt+/gk3EL3wYKxiIlpMIYPja+sHQl3ARiicIYy4BDfxkbAVjRYlouTA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "command-exists": "^1.2.7",
+        "watchpack": "^2.1.1",
+        "which": "^2.0.2"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@wasm-tool/wasm-pack-plugin/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -788,6 +874,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/command-exists": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "dev": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3543,7 +3635,7 @@
       }
     },
     "node_modules/utfdump_wasm": {
-      "resolved": "pkg",
+      "resolved": "wasm/utfdump",
       "link": true
     },
     "node_modules/watchpack": {
@@ -3658,6 +3750,12 @@
       }
     },
     "pkg": {
+      "name": "utfdump_wasm",
+      "version": "0.1.0",
+      "extraneous": true
+    },
+    "wasm/utfdump": {
+      "name": "utfdump_wasm",
       "version": "0.1.0"
     }
   },
@@ -3926,6 +4024,76 @@
         "eslint-visitor-keys": "^3.3.0"
       }
     },
+    "@wasm-tool/wasm-pack-plugin": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@wasm-tool/wasm-pack-plugin/-/wasm-pack-plugin-1.7.0.tgz",
+      "integrity": "sha512-WikzYsw7nTd5CZxH75h7NxM/FLJAgqfWt+/gk3EL3wYKxiIlpMIYPja+sHQl3ARiicIYy4BDfxkbAVjRYlouTA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "command-exists": "^1.2.7",
+        "watchpack": "^2.1.1",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -4154,6 +4322,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "command-exists": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6040,7 +6214,7 @@
       }
     },
     "utfdump_wasm": {
-      "version": "file:pkg"
+      "version": "file:wasm/utfdump"
     },
     "watchpack": {
       "version": "2.4.0",

package.json

@@ -18,6 +18,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3",
-    "utfdump_wasm": "file:pkg"
+    "utfdump_wasm": "file:wasm/utfdump"
+  },
+  "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "^1.7.0"
   }
 }

src/components/inspector.tsx

@@ -3,7 +3,7 @@
 import { useContext, useState } from 'react';
 import styles from '@/app/page.module.css'
 import { TextField } from './textfield';
-import { WASMContext, WASMContextProvider } from '@/context/utfdump';
+import { UtfdumpContext, UtfdumpContextProvider } from '@/context/utfdump';
 
 type InspectorProps = {
   sourceUrl: string,
@@ -13,7 +13,7 @@ export function Inspector(props: InspectorProps) {
   const [currentString, setCurrentString] = useState('');
 
   return (
-    <WASMContextProvider>
+    <UtfdumpContextProvider>
       <section className={styles.inspector_section}>
         <section className={styles.input_section}>
           <TextField
@@ -31,14 +31,14 @@ export function Inspector(props: InspectorProps) {
 
         <Out currentString={currentString} />
       </section>
-    </WASMContextProvider>
+    </UtfdumpContextProvider>
   );
 }
 
 function Out(props: { currentString: string }) {
-  const ctx = useContext(WASMContext);
+  const ctx = useContext(UtfdumpContext);
 
-  if (!ctx.wasm) {
+  if (!ctx.utfdump) {
     return (
       <p>Loading WASM...</p>
     );
@@ -46,8 +46,7 @@ function Out(props: { currentString: string }) {
 
   return (
     <section className={styles.output_section}>
-      {/* <p id='out_test'>{spongebob_case(currentString)}</p> */}
+      <p id='out_test'>{ctx.utfdump.spongebob_case(props.currentString)}</p>
-      <p id='out_test'>{ctx.wasm.spongebob_case(props.currentString)}</p>
     </section>
   );
 }

src/context/utfdump.tsx

@@ -1,49 +1,38 @@
-// using solution from https://github.com/satelllte/nextjs-wasm for now
+import { useState, createContext, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
 
-import { useState, createContext, useEffect, useRef } from 'react'
+type UtfdumpContextTy = {
-import type { ReactNode } from 'react'
+  utfdump?: typeof import('utfdump_wasm'),
+};
 
-const initial: IWASMContext = {}
+type UtfdumpContextProviderProps = {
+  children: ReactNode,
+};
+
+export const UtfdumpContext = createContext<UtfdumpContextTy>({});
+
+export function UtfdumpContextProvider(props: UtfdumpContextProviderProps) {
+  const hasLoaded = useRef(false);
+  const [contextValue, setContextValue] = useState<UtfdumpContextTy>({});
   
-const useMountEffectOnce = (fn: () => void) => {
-  const wasExecutedRef = useRef(false)
   useEffect(() => {
-    if (!wasExecutedRef.current) {
+    // Ensure the WASM module is only run once, as this effect callback is called twice when React
-      fn()
+    // is in strict mode.
+    // FIXME: is atomic compare-and-swap necessary? Does React run this in a multithreaded context?
+    if (!hasLoaded.current) {
+      hasLoaded.current = true;
+
+      (async() => {
+        const utfdumpWasmModule = await import('utfdump_wasm');
+        await utfdumpWasmModule.default();
+        setContextValue({ utfdump: utfdumpWasmModule });
+      })();
     }
-    wasExecutedRef.current = true
+  }, []);
-  }, [fn])
-}
-
-export const WASMContext = createContext(initial)
-
-export const WASMContextProvider: React.FC<WASMContextProviderProps> = ({
-  children
-}) => {
-  const [state, setState] = useState<IWASMContext>(initial)
-
-  // This has to run only once: https://github.com/rustwasm/wasm-bindgen/issues/3153
-  // Though, in development React renders twice when Strict Mode is enabled: https://reactjs.org/docs/strict-mode.html
-  // That's why it must be limited to a single mount run
-  useMountEffectOnce(() => {
-    (async() => {
-      const wasm = await import("utfdump_wasm");
-      await wasm.default();
-      setState({ wasm });
-    })()
-  })
 
   return (
-    <WASMContext.Provider value={state}>
+    <UtfdumpContext.Provider value={contextValue}>
-      {children}
+      {props.children}
-    </WASMContext.Provider>
+    </UtfdumpContext.Provider>
-  )
+  );
-}
-
-interface IWASMContext {
-  wasm?: typeof import('utfdump_wasm')
-}
-
-interface WASMContextProviderProps {
-  children: ReactNode
 }