core: share via link

packages/webassembly-playground/package.json

@@ -50,13 +50,15 @@
     "clsx": "^2.1.1",
     "console-feed": "^3.6.0",
     "jotai": "^2.10.3",
+    "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
     "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:*"
+    "wat-lsp": "workspace:*",
+    "zod": "^3.24.1"
   },
   "browserslist": {
     "production": [

packages/webassembly-playground/src/features.ts

@@ -103,5 +103,6 @@ export const WASM_FEATURES_LIST = [
   },
 ] as const satisfies Array<FeatureConfigItem>;
 
-export type WasmFeature = (typeof WASM_FEATURES_LIST)[number]["flag"];
-export type WasmFeatures = Partial<Record<WasmFeature, boolean>>;
+export const WASM_FEATURES = WASM_FEATURES_LIST.map((item) => item.flag);
+
+export type WasmFeature = (typeof WASM_FEATURES)[number];

packages/webassembly-playground/src/service/lib.ts

@@ -1,5 +1,4 @@
-import type { WasmFeatures } from "../features";
-import type { File } from "../types";
+import type { File, WasmFeatures } from "../types";
 
 export enum MessageType {
   Compile = "Compile",

packages/webassembly-playground/src/service/worker.ts

@@ -7,8 +7,7 @@ declare const self: ServiceWorkerGlobalScope;
 
 import initWabt from "wabt";
 import { MessageType, type CompileLog, type Message } from "./lib";
-import type { File } from "../types";
-import type { WasmFeatures } from "../features";
+import type { File, WasmFeatures } from "../types";
 import { extname, getMimeType } from "../lib/file";
 
 // This type is not exported, so define it by our own.

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

@@ -1,10 +1,19 @@
 import { atom } from "jotai";
 import { v4 as uuidv4 } from "uuid";
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from "lz-string";
 import type { Message as ConsoleMessage } from "console-feed/lib/definitions/Component";
 
 import { compile, type CompileLog } from "../service/lib";
-import { type Example, type File } from "../types";
-import { WASM_FEATURES_LIST, type WasmFeatures } from "../features";
+import {
+  projectSchema,
+  type Example,
+  type File,
+  type WasmFeatures,
+} from "../types";
+import { WASM_FEATURES_LIST } from "../features";
 import examples from "../examples.json";
 
 // Use the example "add" as default
@@ -60,3 +69,37 @@ export const selectExampleAtom = atom(null, (_get, set, example: Example) => {
 export type UtilPanelTab = "console" | "compile_log";
 
 export const utilPanelTabAtom = atom<UtilPanelTab>("console");
+
+export const shareAtom = atom(null, async (get, _set) => {
+  const files = get(filesAtom);
+  const features = get(featuresAtom);
+
+  const data = JSON.stringify({ files, features });
+  const compressed = compressToEncodedURIComponent(data);
+
+  const url = new URL(location.href);
+  url.hash = compressed;
+  await navigator.clipboard.writeText(url.href);
+  alert("Link copied to clipboard.");
+});
+
+export const loadProjectFromUrlAtom = atom(null, (_get, set) => {
+  const { hash } = location;
+  if (!hash) return;
+
+  try {
+    const json = decompressFromEncodedURIComponent(hash.substring(1));
+    const data = JSON.parse(json);
+    const project = projectSchema.parse(data);
+
+    const { files, features } = project;
+    set(filesAtom, files);
+    set(featuresAtom, features);
+  } catch (e) {
+    // failed to load project from url
+  } finally {
+    const url = new URL(location.href);
+    url.hash = "";
+    history.replaceState(null, "", url);
+  }
+});

packages/webassembly-playground/src/types.ts

@@ -1,9 +1,28 @@
-import type { WasmFeatures } from "./features";
+import { z } from "zod";
 
-export type File = {
-  filename: string;
-  content: string;
-};
+import { WASM_FEATURES, type WasmFeature } from "./features";
+
+type NonEmptyArray<T> = [T, ...T[]];
+
+export const fileSchema = z.object({
+  filename: z.string(),
+  content: z.string(),
+});
+
+export const featureSchema = z.enum(
+  WASM_FEATURES as NonEmptyArray<WasmFeature>,
+);
+
+export const featuresSchema = z.record(featureSchema, z.boolean());
+
+export const projectSchema = z.object({
+  files: z.array(fileSchema),
+  features: featuresSchema,
+});
+
+export type File = z.infer<typeof fileSchema>;
+
+export type WasmFeatures = z.infer<typeof featuresSchema>;
 
 export type Example = {
   title: string;

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

@@ -1,8 +1,14 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import { useAtom, useSetAtom } from "jotai";
 
 import type { File } from "../types";
-import { filesAtom, runAtom } from "../state";
+import {
+  featuresAtom,
+  filesAtom,
+  loadProjectFromUrlAtom,
+  runAtom,
+  shareAtom,
+} from "../state";
 import { getLanguageByFileName } from "../lib/file";
 
 import Examples from "./Examples";
@@ -18,6 +24,8 @@ const Editor = lazy(() => import("../editor"));
 function App() {
   const [files, setFiles] = useAtom(filesAtom);
   const run = useSetAtom(runAtom);
+  const share = useSetAtom(shareAtom);
+  const loadProjectFromUrl = useSetAtom(loadProjectFromUrlAtom);
 
   const updateFileContent = (filename: string, content: string) => {
     const newFiles = files.reduce<Array<File>>((acc, cur) => {
@@ -28,6 +36,10 @@ function App() {
     setFiles(newFiles);
   };
 
+  useEffect(() => {
+    loadProjectFromUrl();
+  }, []);
+
   const renderLoading = () => {
     return <div className="main-loading">Loading...</div>;
   };
@@ -47,6 +59,11 @@ function App() {
               Run
             </div>
           </li>
+          <li>
+            <div className="nav-item" onClick={share}>
+              Share
+            </div>
+          </li>
         </ul>
       </nav>
     );