core: refactor run into a write atom

also use uuid as preview id.

packages/webassembly-playground/package.json

@@ -14,7 +14,8 @@
     "start": "webpack serve --mode development",
     "build": "webpack --mode production",
     "build:analyze": "webpack --mode production --analyze",
-    "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-require-module\" jest"
+    "test": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --experimental-require-module\" jest",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -53,6 +54,7 @@
     "monaco-editor-wrapper": "^5.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "uuid": "^11.0.3",
     "wabt": "1.0.36",
     "wat-lsp": "workspace:*"
   },

packages/webassembly-playground/src/state/index.ts

@@ -1,7 +1,8 @@
 import { atom } from "jotai";
+import { v4 as uuidv4 } from "uuid";
 import type { Message as ConsoleMessage } from "console-feed/lib/definitions/Component";
 
-import type { CompileLog } from "../service/lib";
+import { compile, type CompileLog } from "../service/lib";
 import { type Example, type File } from "../types";
 import { WASM_FEATURES_LIST, type WasmFeatures } from "../features";
 import examples from "../examples.json";
@@ -21,19 +22,40 @@ export const consoleLogsAtom = atom<Array<ConsoleMessage>>([]);
 
 export const compileLogsAtom = atom<Array<CompileLog>>([]);
 
-// This `previewId` state is an self-incremental integer.
+// `previewId` is a uuid or null.
 // We use an iframe for preview, and `previewId` is used as the key for the
 // iframe element. When a new preview session is created, `previewId` is
-// incremented by 1, where a new iframe element will be rendered.
-// The initial value of `previewId` is 0, which means there is no preview session.
-export const previewIdAtom = atom<number>(0);
+// updated with a new uuid, then a new iframe element will be rendered.
+// The null value of `previewId` means there is no preview session.
+const _previewIdAtom = atom<string | null>(null);
+
+export const previewIdAtom = atom((get) => get(_previewIdAtom));
+
+export const runAtom = atom(null, async (get, set) => {
+  const sw = navigator.serviceWorker.controller;
+  if (!sw) return;
+
+  const files = get(filesAtom);
+  const features = get(featuresAtom);
+
+  const logs = await compile(sw, files, features);
+  set(compileLogsAtom, logs);
+
+  if (logs.some((log) => log.result === "err")) {
+    set(utilPanelTabAtom, "compile_log");
+  } else {
+    set(consoleLogsAtom, []);
+    set(utilPanelTabAtom, "console");
+    set(_previewIdAtom, uuidv4());
+  }
+});
 
 export const selectExampleAtom = atom(null, (_get, set, example: Example) => {
   set(filesAtom, example.files);
   if (example.features) {
     set(featuresAtom, example.features);
   }
-  set(previewIdAtom, 0);
+  set(_previewIdAtom, null);
   set(consoleLogsAtom, []);
   set(compileLogsAtom, []);
 });

packages/webassembly-playground/src/ui/App.tsx

@@ -1,16 +1,8 @@
 import { lazy, Suspense } from "react";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 
 import type { File } from "../types";
-import { compile } from "../service/lib";
-import {
-  compileLogsAtom,
-  consoleLogsAtom,
-  featuresAtom,
-  filesAtom,
-  previewIdAtom,
-  utilPanelTabAtom,
-} from "../state";
+import { filesAtom, runAtom } from "../state";
 import { getLanguageByFileName } from "../lib/file";
 
 import Examples from "./Examples";
@@ -25,11 +17,7 @@ const Editor = lazy(() => import("../editor"));
 
 function App() {
   const [files, setFiles] = useAtom(filesAtom);
-  const features = useAtomValue(featuresAtom);
-  const setPreviewId = useSetAtom(previewIdAtom);
-  const setConsoleLogs = useSetAtom(consoleLogsAtom);
-  const setCompileLogs = useSetAtom(compileLogsAtom);
-  const setUtilPanelTab = useSetAtom(utilPanelTabAtom);
+  const run = useSetAtom(runAtom);
 
   const updateFileContent = (filename: string, content: string) => {
     const newFiles = files.reduce<Array<File>>((acc, cur) => {
@@ -40,26 +28,6 @@ function App() {
     setFiles(newFiles);
   };
 
-  const preview = () => {
-    setPreviewId((id) => id + 1);
-  };
-
-  const run = async () => {
-    const sw = navigator.serviceWorker.controller;
-    if (!sw) return;
-
-    const logs = await compile(sw, files, features);
-    setCompileLogs(logs);
-
-    if (logs.some((log) => log.result === "err")) {
-      setUtilPanelTab("compile_log");
-    } else {
-      setConsoleLogs([]);
-      setUtilPanelTab("console");
-      preview();
-    }
-  };
-
   const renderLoading = () => {
     return <div className="main-loading">Loading...</div>;
   };

packages/webassembly-playground/src/ui/Preview.tsx

@@ -32,7 +32,7 @@ function Preview() {
 
   return (
     <div className="preview">
-      {previewId > 0 && (
+      {!!previewId && (
         <iframe key={previewId} ref={iframeRef} src="./preview/index.html" />
       )}
     </div>