Switch to wasm-pack build --target bundler and Vite plugins for loa…

…ding WebAssembly component (#75)

* Switch to `wasm-pack build --target bundler` and Vite plugins for loading WebAssembly component

Fixes dev-mode. This makes use of native Vite capabilities to load the
WebAssembly component and appears to be the recommended approach nowadays.

See: rustwasm/wasm-pack#1106 (comment)

* Fix package-lock.json not matching up

* Mention updated port for dev-environment with newer Vite

* Fix release builds by pinning @swc/core to 1.6.*

Apparently @swc/core 1.7.0 (recently released) has a regression that breaks
vite-plugin-top-level-await:
Menci/vite-plugin-top-level-await#52

* Commit difference between package-lock.json generated by NPM 10 in Docker environment vs NPM 9 locally

---------

Co-authored-by: Eric Zhang <[email protected]>

Dockerfile

@@ -10,7 +10,7 @@ WORKDIR /home/rust/src
 RUN apk --no-cache add curl musl-dev
 RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 COPY . .
-RUN wasm-pack build --target web rustpad-wasm
+RUN wasm-pack build rustpad-wasm
 
 FROM --platform=amd64 node:lts-alpine AS frontend
 WORKDIR /usr/src/app

README.md

@@ -37,7 +37,7 @@ To run this application, you need to install Rust, `wasm-pack`, and Node.js.
 Then, build the WebAssembly portion of the app:
 
 ```
-wasm-pack build --target web rustpad-wasm
+wasm-pack build rustpad-wasm
 ```
 
 When that is complete, you can install dependencies for the frontend React
@@ -60,7 +60,7 @@ to start the frontend portion.
 npm run dev
 ```
 
-This command will open a browser window to `http://localhost:3000`, with hot
+This command will open a browser window to `http://localhost:5173`, with hot
 reloading on changes.
 
 ## Testing

package.json

@@ -30,6 +30,11 @@
     "monaco-editor": "^0.31.1",
     "prettier": "2.5.1",
     "typescript": "~5.5.3",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
+  },
+  "overrides": {
+    "@swc/core": "~1.6.13"
   }
 }

src/index.tsx

@@ -1,18 +1,15 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { ChakraProvider } from "@chakra-ui/react";
-import init, { set_panic_hook } from "rustpad-wasm";
+import * as wasm from "rustpad-wasm";
 import App from "./App";
 import "./index.css";
 
-init().then(() => {
-  set_panic_hook();
-  ReactDOM.render(
-    <StrictMode>
-      <ChakraProvider>
-        <App />
-      </ChakraProvider>
-    </StrictMode>,
-    document.getElementById("root")
-  );
-});
+ReactDOM.render(
+  <StrictMode>
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
+  </StrictMode>,
+  document.getElementById("root")
+);

vite.config.ts

@@ -1,11 +1,17 @@
 import { defineConfig } from "vite";
+import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   build: {
     chunkSizeWarningLimit: 1000,
   },
-  plugins: [react()],
+  plugins: [
+    wasm(),
+    topLevelAwait(),
+    react()
+  ],
   server: {
     proxy: {
       "/api": {