Fix playground: bundle TypeScript locally, add CDN fallback, create serve.ts

- Bundle TypeScript compiler into playground/dist/ during CI build
  so the playground doesn't depend on external CDN availability
- Update playground-runtime.js to load TypeScript from local bundle
  first, with CDN fallback and timeout handling
- Add playground/serve.ts for local development (referenced in
  package.json but was missing)
- Update docs/playground.md with new architecture details
- Add playground/serve.ts to biome ignore (dev tool, not library)

Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/526f7361-16a1-4b0c-8ef4-4c405e36044b

Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>

Author: Copilot

.github/workflows/pages.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Build library for browser
         run: bun build ./src/index.ts --outdir ./playground/dist --target browser --minify
 
+      - name: Bundle TypeScript compiler for offline playground
+        run: cp node_modules/typescript/lib/typescript.js ./playground/dist/typescript.js
+
       - name: Setup Pages
         uses: actions/configure-pages@v5
         with:

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist/**", "node_modules/**", "*.d.ts", "playground/**/*.js"]
+    "ignore": ["dist/**", "node_modules/**", "*.d.ts", "playground/**/*.js", "playground/serve.ts"]
   },
   "formatter": {
     "enabled": true,

docs/playground.md

@@ -24,7 +24,8 @@ compiler from CDN and transpiles user code to JavaScript before execution.
 Users can write type annotations, interfaces, and generics — the compiler
 strips them automatically.
 
-- TypeScript compiler: loaded from `https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js`
+- TypeScript compiler: bundled locally (`playground/dist/typescript.js`) with
+  CDN fallback (`https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js`).
 - No WASM required — the compiler runs natively in JavaScript.
 
 ### 3. Live tsb Library Access
@@ -112,6 +113,7 @@ playground/
 
 ```bash
 bun build ./src/index.ts --outdir ./playground/dist --target browser --minify
+cp node_modules/typescript/lib/typescript.js ./playground/dist/typescript.js
 ```
 
 The CI pipeline (`pages.yml`) runs this automatically during deployment.

playground/playground-runtime.js

@@ -5,34 +5,55 @@
  *
  * Architecture:
  *   1. Loads the tsb browser bundle (built by CI into playground/dist/)
- *   2. Loads the TypeScript compiler from CDN for in-browser transpilation
+ *   2. Loads the TypeScript compiler (local bundle first, CDN fallback)
  *   3. Converts playground blocks into editable editors with Run/Reset buttons
  *   4. Transforms imports, transpiles TS → JS, and executes with output capture
  *
  * No WASM needed — the TypeScript compiler runs natively in JavaScript.
  */
 
-// ── Load TypeScript compiler from CDN ──────────────────────────────
+// ── Load TypeScript compiler (local bundle → CDN fallback) ─────────
 
-function loadTypeScript() {
+function loadScriptWithTimeout(src, timeoutMs) {
   return new Promise(function (resolve, reject) {
-    if (window.ts) {
-      resolve(window.ts);
-      return;
-    }
     var script = document.createElement("script");
-    script.src =
-      "https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js";
+    var timer = setTimeout(function () {
+      reject(new Error("Timeout loading " + src));
+    }, timeoutMs);
+    script.src = src;
     script.onload = function () {
-      resolve(window.ts);
+      clearTimeout(timer);
+      resolve();
     };
     script.onerror = function () {
-      reject(new Error("Failed to load TypeScript compiler from CDN"));
+      clearTimeout(timer);
+      reject(new Error("Failed to load " + src));
     };
     document.head.appendChild(script);
   });
 }
 
+function loadTypeScript() {
+  if (window.ts) return Promise.resolve(window.ts);
+
+  // Try local bundle first (built by CI), then fall back to CDN
+  return loadScriptWithTimeout("./dist/typescript.js", 15000)
+    .catch(function () {
+      return loadScriptWithTimeout(
+        "https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.js",
+        30000,
+      );
+    })
+    .then(function () {
+      if (!window.ts) {
+        throw new Error(
+          "TypeScript compiler loaded but window.ts is not available",
+        );
+      }
+      return window.ts;
+    });
+}
+
 // ── Load tsb browser bundle ────────────────────────────────────────
 
 function loadTsb() {
@@ -199,16 +220,20 @@ async function initPlayground() {
   var loadingEl = document.getElementById("playground-loading");
   var statusEl = document.getElementById("playground-status");
 
-  try {
-    if (statusEl)
-      statusEl.textContent = "Loading TypeScript compiler & tsb library\u2026";
+  function setStatus(msg) {
+    if (statusEl) statusEl.textContent = msg;
+  }
 
-    // Load both dependencies in parallel
-    var results = await Promise.all([loadTypeScript(), loadTsb()]);
-    var ts = results[0];
-    var tsb = results[1];
+  try {
+    setStatus("Loading tsb library\u2026");
+    var tsb = await loadTsb();
     window.__tsb = tsb;
 
+    setStatus("Loading TypeScript compiler\u2026");
+    var ts = await loadTypeScript();
+
+    setStatus("Initializing editors\u2026");
+
     // Initialize all playground blocks on the page
     var blocks = document.querySelectorAll(".playground-block");
     blocks.forEach(function (block) {

playground/serve.ts

@@ -0,0 +1,88 @@
+/**
+ * Local development server for the tsb playground.
+ *
+ * Usage: bun run playground (or: bun run playground/serve.ts)
+ *
+ * Builds the tsb browser bundle and TypeScript compiler into playground/dist/,
+ * then serves the playground on http://localhost:3000.
+ */
+
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { extname, join } from "node:path";
+
+const PORT = 3000;
+const PLAYGROUND_DIR = import.meta.dir;
+const PROJECT_ROOT = join(PLAYGROUND_DIR, "..");
+const DIST_DIR = join(PLAYGROUND_DIR, "dist");
+
+const MIME_TYPES: Record<string, string> = {
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+};
+
+async function buildBundle() {
+  console.log("Building tsb browser bundle…");
+  const result = await Bun.build({
+    entrypoints: [join(PROJECT_ROOT, "src", "index.ts")],
+    outdir: DIST_DIR,
+    target: "browser",
+    minify: true,
+  });
+  if (!result.success) {
+    console.error("Build failed:");
+    for (const log of result.logs) {
+      console.error(log);
+    }
+    process.exit(1);
+  }
+  console.log("  → playground/dist/index.js");
+}
+
+function copyTypeScript() {
+  const src = join(PROJECT_ROOT, "node_modules", "typescript", "lib", "typescript.js");
+  const dest = join(DIST_DIR, "typescript.js");
+  if (!existsSync(src)) {
+    console.warn("⚠ TypeScript compiler not found at", src);
+    console.warn("  Run `npm install` first. CDN fallback will be used.");
+    return;
+  }
+  copyFileSync(src, dest);
+  console.log("  → playground/dist/typescript.js");
+}
+
+async function main() {
+  if (!existsSync(DIST_DIR)) {
+    mkdirSync(DIST_DIR, { recursive: true });
+  }
+
+  await buildBundle();
+  copyTypeScript();
+
+  console.log(`\nPlayground ready at http://localhost:${PORT}\n`);
+
+  Bun.serve({
+    port: PORT,
+    fetch(req) {
+      const url = new URL(req.url);
+      const pathname = url.pathname === "/" ? "/index.html" : url.pathname;
+      const filePath = join(PLAYGROUND_DIR, pathname);
+
+      const file = Bun.file(filePath);
+      const ext = extname(filePath);
+      const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
+
+      return new Response(file, {
+        headers: { "Content-Type": contentType },
+      });
+    },
+    error() {
+      return new Response("Not found", { status: 404 });
+    },
+  });
+}
+
+main();