feat(clack): display demos in webcontainer

.gitignore

@@ -2,6 +2,7 @@
 dist/
 # generated types
 .astro/
+public/snapshot
 
 # dependencies
 node_modules/

astro.config.mjs

@@ -12,6 +12,12 @@ export default defineConfig({
 	site: "https://bomb.sh/",
 	base: "/docs",
 	outDir: "./dist/docs/",
+	server: {
+		headers: {
+			'Cross-Origin-Embedder-Policy': 'require-corp',
+			'Cross-Origin-Opener-Policy': 'same-origin'
+		}
+	},
 	integrations: [
 		starlight({
 			title: "Bombshell",

package.json

@@ -4,10 +4,13 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
+    "dev:snapshot": "",
     "start": "astro dev",
+    "prebuild": "node run snapshot",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "snapshot": "node ./scripts/snapshot.ts"
   },
   "dependencies": {
     "@astrojs/starlight": "^0.37.1",
@@ -17,9 +20,17 @@
     "@types/node": "^22.19.3",
     "astro": "^5.16.6",
     "expressive-code-twoslash": "^0.5.3",
+    "@webcontainer/api": "^1.6.1",
+    "@webcontainer/snapshot": "^0.1.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "sharp": "^0.33.5",
     "starlight-sidebar-topics": "^0.6.2"
   },
+  "devDependencies": {
+    "tinyexec": "^1.0.2"
+  },
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",

scripts/snapshot.ts

@@ -0,0 +1,45 @@
+import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { snapshot } from '@webcontainer/snapshot';
+import {x} from 'tinyexec';
+import { createHash } from "node:crypto";
+
+const PACKAGE_JSON = {
+    name: 'example',
+    type: 'module',
+    version: '0.0.0',
+    dependencies: {
+        "@bomb.sh/args": "latest",
+        "@clack/core": "1.0.0-alpha.0",
+        "@clack/prompts": "1.0.0-alpha.0"
+    }
+}
+const IGNORE_FILES = ['*.md', '*.d.*', '*.map', 'LICENSE', 'license'];
+const rootDir = new URL('../', import.meta.url);
+const snapshotDir = new URL(`./snapshot-${hash()}/`, rootDir);
+const outFile = new URL('./public/snapshot', rootDir);
+
+async function run() {
+    await fs.mkdir(snapshotDir, { recursive: true });
+    await fs.writeFile(new URL('package.json', snapshotDir), JSON.stringify(PACKAGE_JSON));
+    await x('npm', ['install'], {
+        nodeOptions: {
+            cwd: fileURLToPath(snapshotDir),
+        }
+    })
+    for await (const file of fs.glob(IGNORE_FILES.map(file => `**/${file}`), { cwd: fileURLToPath(snapshotDir) })) {
+        await fs.rm(new URL(file, snapshotDir));
+    }
+    const output = await snapshot(fileURLToPath(snapshotDir));
+    await fs.writeFile(outFile, output);
+    await fs.rm(snapshotDir, { recursive: true, force: true });
+    console.log('snapshot generated');
+}
+
+run();
+
+function hash() {
+    return createHash("shake256", { outputLength: 8 })
+      .update(Date.now().toString())
+      .digest("hex");
+}

src/components/WebContainer/Terminal.astro

@@ -0,0 +1,76 @@
+<docs-terminal class="not-content" />
+
+<style>
+docs-terminal {
+  display: block;
+  height: 256px;
+}
+</style>
+
+<script>
+  import type { Terminal } from "@xterm/xterm";
+  import { theme } from "./theme.ts";
+
+  customElements.define(
+    "docs-terminal",
+    class extends HTMLElement {
+      instance: Terminal | undefined;
+      ro: ResizeObserver | undefined;
+      updateSize = () => {};
+
+      connectedCallback() {
+        this.boot();
+      }
+      disconnectedCallback() {
+        this.instance?.dispose();
+        this.ro?.disconnect();
+      }
+      handleResize() {
+        this.ro = new ResizeObserver(() => this.updateSize());
+        this.ro.observe(this);
+      }
+      async boot() {
+        if (this.instance) {
+          this.instance.options.theme = theme;
+          this.instance.open(this);
+          return;
+        }
+        this.innerHTML = "";
+        const [{ Terminal }, { FitAddon }, { WebLinksAddon }] =
+          await Promise.all([
+            import("@xterm/xterm"),
+            import("@xterm/addon-fit"),
+            import("@xterm/addon-web-links"),
+          ]);
+        this.instance = new Terminal({
+          convertEol: true,
+          cursorBlink: false,
+          disableStdin: false,
+          theme,
+          fontSize: 22,
+          fontFamily: "Menlo, courier-new, courier, monospace",
+        });
+
+        this.instance.open(this);
+
+        const fit = new FitAddon();
+        this.instance.loadAddon(fit);
+        this.instance.loadAddon(new WebLinksAddon());
+        this.updateSize = () => fit.fit();
+        this.updateSize();
+        this.handleResize();
+      }
+    }
+  );
+</script>
+
+<style is:global>
+  @import "@xterm/xterm/css/xterm.css" layer(xterm);
+
+  .xterm {
+    padding: 24px 12px;
+  }
+  .xterm-viewport {
+    background: #191B23;
+  }
+</style>

src/components/WebContainer/WebContainer.astro

@@ -0,0 +1,89 @@
+---
+import Terminal from "./Terminal.astro";
+
+interface Props {
+  name: string;
+}
+const { name } = Astro.props;
+---
+
+<web-container name={name}>
+  <slot />
+  <Terminal />
+</web-container>
+
+<script>
+  import type { Terminal } from "@xterm/xterm";
+  import { WebContainer } from "@webcontainer/api";
+  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+  let host: WebContainer;
+
+  host = await WebContainer.boot({ workdirName: 'demo' });
+  const snapshotResponse = await fetch(`/docs/snapshot`);
+  const snapshot = await snapshotResponse.arrayBuffer();
+  await host.mount(snapshot, { mountPoint: "/" });
+
+  customElements.define(
+    "web-container",
+    class extends HTMLElement {
+      get dir() {
+          return `${this.name}/`
+      }
+      get file() {
+        return `${this.dir}index.js`;
+      }
+      get fileContent() {
+        const text = this.querySelector("pre code")!.textContent;
+        return `import { intro, outro } from "@clack/prompts";console.clear();intro("\\x1b[46m\\x1b[30m ${this.name} \\x1b[0m");\n${text};`;
+      }
+      get name() {
+        return this.getAttribute("name")!;
+      }
+      get terminal(): Terminal | undefined {
+        return (this.querySelector("docs-terminal") as any)?.instance;
+      }
+      async connectedCallback() {
+        await host.fs.mkdir(this.dir, { recursive: true });
+        await host.fs.writeFile(
+          this.file,
+          this.fileContent,
+          { encoding: "utf-8" }
+        );
+        await this.render();
+      }
+
+      async render() {
+        const { terminal, name } = this;
+        terminal?.reset();
+        const main = async () => {
+          // we set an infinite loop so that when the node process exits, we restart
+          while (true) {
+            const process = await host.spawn("node", ["index.js"], {
+              cwd: name,
+              terminal: { rows: terminal?.rows!, cols: terminal?.cols! },
+            });
+            process.output.pipeTo(
+              new WritableStream({
+                write(data) {
+                  terminal?.write(data);
+                }
+              })
+            );
+            // write the terminal input to the process
+            const terminalWriter = terminal?.onData((data) => {
+              const writer = process.input.getWriter();
+              writer.write(data);
+              writer.releaseLock();
+            });
+            // wait for the process to finish
+            await process.exit;
+            await sleep(2000);
+            terminal?.clear();
+            terminalWriter?.dispose();
+          }
+        }
+        main();
+      }
+    }
+  );
+</script>

src/components/WebContainer/theme.ts

@@ -0,0 +1,30 @@
+export const theme = {
+  cursor: "#C4C7CF",
+  cursorAccent: '#00000000',
+  foreground: "#FFFFFF",
+  background: "#191B23",
+  red: "#ff3e47",
+  green: "#07F53F",
+  yellow: "#FFE228",
+  blue: "#054bff",
+  magenta: "#ff00d2",
+  cyan: "#00E5FF",
+  white: "#FFFFFF",
+  brightBlack: "#484A54",
+  brightRed: "#FF3E47",
+  brightGreen: "#07F53F",
+  brightYellow: "#FFE228",
+  brightBlue: "#054bff",
+  brightMagenta: "#FF00D2",
+  brightCyan: "#00E5FF",
+  brightWhite: "#FFFFFF",
+  selectionBackground: "#97979b33",
+};
+
+
+
+
+
+
+
+