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

…ding 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)

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 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

package.json

@@ -30,6 +30,8 @@
     "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"
   }
 }

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")
+);