wasm lib and wire-up

Author: analogrelay

2023/package-lock.json

@@ -15,10 +15,13 @@
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "aoc2023": "file:./wasm"
   },
   "scripts": {
     "start": "react-scripts start",
+    "build:wasm:dev": "cd rust-aoc2023 && rm -Rf ../wasm && wasm-pack build --out-dir ../wasm --dev --target web",
+    "build:wasm:release": "cd rust-aoc2023 && rm -Rf ../wasm && wasm-pack build --out-dir ../wasm --target web",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

2023/package.json

@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log

2023/rust-aoc2023/.gitignore

@@ -0,0 +1,69 @@
+language: rust
+sudo: false
+
+cache: cargo
+
+matrix:
+  include:
+
+  # Builds with wasm-pack.
+  - rust: beta
+    env: RUST_BACKTRACE=1
+    addons:
+      firefox: latest
+      chrome: stable
+    before_script:
+      - (test -x $HOME/.cargo/bin/cargo-install-update || cargo install cargo-update)
+      - (test -x $HOME/.cargo/bin/cargo-generate || cargo install --vers "^0.2" cargo-generate)
+      - cargo install-update -a
+      - curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -f
+    script:
+      - cargo generate --git . --name testing
+      # Having a broken Cargo.toml (in that it has curlies in fields) anywhere
+      # in any of our parent dirs is problematic.
+      - mv Cargo.toml Cargo.toml.tmpl
+      - cd testing
+      - wasm-pack build
+      - wasm-pack test --chrome --firefox --headless
+
+  # Builds on nightly.
+  - rust: nightly
+    env: RUST_BACKTRACE=1
+    before_script:
+      - (test -x $HOME/.cargo/bin/cargo-install-update || cargo install cargo-update)
+      - (test -x $HOME/.cargo/bin/cargo-generate || cargo install --vers "^0.2" cargo-generate)
+      - cargo install-update -a
+      - rustup target add wasm32-unknown-unknown
+    script:
+      - cargo generate --git . --name testing
+      - mv Cargo.toml Cargo.toml.tmpl
+      - cd testing
+      - cargo check
+      - cargo check --target wasm32-unknown-unknown
+      - cargo check                                 --no-default-features
+      - cargo check --target wasm32-unknown-unknown --no-default-features
+      - cargo check                                 --no-default-features --features console_error_panic_hook
+      - cargo check --target wasm32-unknown-unknown --no-default-features --features console_error_panic_hook
+      - cargo check                                 --no-default-features --features "console_error_panic_hook wee_alloc"
+      - cargo check --target wasm32-unknown-unknown --no-default-features --features "console_error_panic_hook wee_alloc"
+
+  # Builds on beta.
+  - rust: beta
+    env: RUST_BACKTRACE=1
+    before_script:
+      - (test -x $HOME/.cargo/bin/cargo-install-update || cargo install cargo-update)
+      - (test -x $HOME/.cargo/bin/cargo-generate || cargo install --vers "^0.2" cargo-generate)
+      - cargo install-update -a
+      - rustup target add wasm32-unknown-unknown
+    script:
+      - cargo generate --git . --name testing
+      - mv Cargo.toml Cargo.toml.tmpl
+      - cd testing
+      - cargo check
+      - cargo check --target wasm32-unknown-unknown
+      - cargo check                                 --no-default-features
+      - cargo check --target wasm32-unknown-unknown --no-default-features
+      - cargo check                                 --no-default-features --features console_error_panic_hook
+      - cargo check --target wasm32-unknown-unknown --no-default-features --features console_error_panic_hook
+      # Note: no enabling the `wee_alloc` feature here because it requires
+      # nightly for now.

2023/rust-aoc2023/.travis.yml

@@ -0,0 +1,27 @@
+[package]
+name = "rust-aoc2023"
+version = "0.1.0"
+authors = ["Ashley Stanton-Nurse <[email protected]>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+wasm-bindgen = "0.2.84"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.7", optional = true }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.34"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

2023/rust-aoc2023/Cargo.toml

@@ -0,0 +1,13 @@
+mod utils;
+
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn greet() {
+    alert("Hello, rust-aoc2023!");
+}

2023/rust-aoc2023/src/lib.rs

@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}

2023/rust-aoc2023/src/utils.rs

@@ -2,6 +2,7 @@ import { RouteObject, RouterProvider, createBrowserRouter } from 'react-router-d
 import './App.css';
 import Home from './Home';
 import Day from './Day';
+import init from "aoc2023";
 
 const dayRoutes: RouteObject[] = Array.from({ length: 25 }, (_, i) => ({
   path: `days/${i + 1}`,

2023/src/App.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useCallback, useRef, DragEvent, useState } from "react"
 import { Link } from "react-router-dom"
+import { useWasm } from "./Wasm";
 
 export interface DayProps {
     day: number
@@ -63,6 +64,7 @@ function StandardDayPart({part}: {part: number}) {
     const [ result, setResult ] = useState<string | null>(null);
     const [ file, setFile ] = useState<File | null>(null);
     const [ input, setInput ] = useState<string | null>(null);
+    const wasm = useWasm();
 
     const handleFileSelect = useCallback((file: File) => {
         setFile(file);
@@ -73,6 +75,10 @@ function StandardDayPart({part}: {part: number}) {
     }, [setInput]);
 
     const handleSolve = useCallback(async () => {
+        if(!wasm) {
+            return;
+        }
+
         // Get an array buffer with either the file or input text, preferring the input text
         const inputBuffer = input 
             ? new TextEncoder().encode(input) 
@@ -81,9 +87,21 @@ function StandardDayPart({part}: {part: number}) {
             return;
         }
 
-        alert(`TODO: Send ${inputBuffer?.byteLength} byte input to Rust and get result back`);
+        wasm.greet();
     }, [file, input]);
 
+    const disabledReason = useCallback(() => {
+        if(!wasm) {
+            return "(loading WASM...)";
+        }
+
+        if(!file && !input) {
+            return "(no input provided)";
+        }
+
+        return "";
+    }, [wasm, file, input]);
+
     return <div className="text-center flex flex-col gap-2">
         <h3 className="font-semibold text-lg">Part {part}</h3>
         <p>Upload or enter your input (entered input has priority)</p>
@@ -94,12 +112,12 @@ function StandardDayPart({part}: {part: number}) {
                 className="border-2 rounded-lg p-4 w-full h-96" 
                 onChange={handleTextInput} />
         </div>
-        {file || input 
+        {wasm && (file || input)
             ? <button onClick={handleSolve} className="bg-green-100 hover:ring-blue-500 hover:ring-2 active:bg-white rounded p-2 m-2 text-center">
                 Solve
             </button>
             : <button disabled={true} className="bg-gray-100 rounded p-2 m-2">
-                Solve
+                Solve {disabledReason()}
             </button>}
         {result && <>
             <h3 className="font-semibold text-lg">Result</h3>

2023/src/Day.tsx

@@ -0,0 +1,34 @@
+import init, { type InitOutput } from "aoc2023";
+import { PropsWithChildren, createContext, useContext, useEffect, useState } from "react";
+
+export interface WasmContextState {
+    wasm: InitOutput | null;
+}
+
+export const WasmContext = createContext<WasmContextState | null>(null);
+
+export function useWasm() {
+    const state = useContext(WasmContext);
+    return state?.wasm;
+}
+
+export default function WasmProvider({ children }: PropsWithChildren) {
+    const [ wasm, setWasm ] = useState<InitOutput | null>(null);
+
+    useEffect(() => {
+        (async function initWasm() {
+            console.log("Loading WASM Module...");
+            const module = await init();
+            console.log("WASM Module loaded!");
+            setWasm(module);
+        })();
+    }, [wasm, setWasm]);
+
+    const state = {
+        wasm,
+    };
+
+    return <WasmContext.Provider value={state}>
+        {children}
+    </WasmContext.Provider>
+}

2023/src/Wasm.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import WasmProvider from './Wasm';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <WasmProvider>
+      <App />
+  </WasmProvider>
   </React.StrictMode>
 );