Integrate Wasm module into frontend with Rust CI/CD

.eslintrc.cjs

@@ -5,9 +5,9 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "prettier"
+    "prettier",
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "momonga/"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {

.github/workflows/cicd.yaml

@@ -0,0 +1,58 @@
+name: cicd
+
+on: push
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: 1.72
+          target: wasm32-unknown-unknown
+          override: true
+          components: clippy
+      - uses: actions-rs/[email protected]
+        with:
+          crate: wasm-pack
+          version: 0.12.1
+          use-tool-cache: true
+      - run: npm install
+      - run: npm run lint
+      - run: npm run test
+      - run: npm run build
+      - uses: actions/upload-artifact@v2
+        with:
+          name: build-artifact
+          path: ./dist
+
+  deploy:
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/download-artifact@v2
+        with:
+          name: build-artifact
+          path: ./dist
+      - uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist
+      - uses: actions/deploy-pages@v2
+        id: deployment

momonga/.gitignore

@@ -0,0 +1,14 @@
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb

momonga/Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "momonga"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"

momonga/src/lib.rs

@@ -0,0 +1,26 @@
+use wasm_bindgen::prelude::*;
+
+pub fn add(left: usize, right: usize) -> usize {
+    left + right
+}
+
+#[wasm_bindgen]
+extern {
+    pub fn alert(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn greet(name: &str) {
+    alert(&format!("Hello, {}!", name));
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn it_works() {
+        let result = add(2, 2);
+        assert_eq!(result, 4);
+    }
+}

package.json

@@ -8,16 +8,22 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "npm run build:core && npm run build:web",
+    "build:core": "cd ./momonga && wasm-pack build --release --target web",
+    "build:web": "tsc && vite build",
+    "test": "npm run test:core",
+    "test:core": "cd momonga && cargo test",
+    "lint": "npm run lint:web && npm run lint:core",
+    "lint:core": "cd momonga && cargo clippy -- -D warnings",
+    "lint:web": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prepare": "simple-git-hooks"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "*": [
+    "*.{js,jsx,ts,tsx,css,md,json}": [
       "npx prettier --write"
     ]
   },

src/App.tsx

@@ -1,10 +1,15 @@
-import { useState } from "react";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
 
+import { useEffect } from "react";
+
+import init, { greet } from "../momonga/pkg/momonga";
+
 function App() {
-  const [count, setCount] = useState(0);
+  useEffect(() => {
+    init();
+  }, []);
 
   return (
     <>
@@ -18,8 +23,12 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
+        <button
+          onClick={() => {
+            greet("WebAssembly");
+          }}
+        >
+          greet
         </button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR