Typespec playground monaco worker

packages/playground/definitions/index.d.ts

@@ -1,2 +1,15 @@
 declare module "*.module.css";
+
+declare module "monaco-editor/esm/vs/editor/editor.worker.js" {
+  interface IWorkerContext {
+    host: Record<string, Function>;
+    getMirrorModels(): Array<{
+      readonly uri: import("monaco-editor").Uri;
+      readonly version: number;
+      getValue(): string;
+    }>;
+  }
+
+  export function initialize(callback: (ctx: IWorkerContext, createData: unknown) => object): void;
+}
 declare module "*.css";

packages/playground/package.json

@@ -47,6 +47,14 @@
       "types": "./dist/src/react/viewers/index.d.ts",
       "default": "./dist/react/viewers/index.js"
     },
+    "./worker": {
+      "types": "./dist/src/worker/index.d.ts",
+      "default": "./dist/worker/index.js"
+    },
+    "./worker/playground-worker": {
+      "types": "./dist/src/worker/playground-worker.d.ts",
+      "default": "./dist/worker/playground-worker.js"
+    },
     "./style.css": "./dist/style.css",
     "./styles.css": "./dist/style.css"
   },

packages/playground/src/monaco-worker.ts

@@ -8,6 +8,12 @@ export function registerMonacoDefaultWorkersForVite() {
           );
           return jsonWorker();
         }
+        case "typespec": {
+          const { default: typespecWorker } = await import(
+            "@typespec/playground/worker/playground-worker?worker" as any
+          );
+          return typespecWorker();
+        }
         default: {
           const { default: editorWorker } = await import(
             "monaco-editor/esm/vs/editor/editor.worker?worker" as any

packages/playground/src/react/types.ts

@@ -1,22 +1,35 @@
 import type { Program } from "@typespec/compiler";
 import type { ReactNode } from "react";
+import type { SerializedDiagnostic } from "../worker/protocol.js";
 
 export type CompilationCrashed = {
   readonly internalCompilerError: any;
 };
 
 export type CompileResult = {
-  readonly program: Program;
-  readonly outputFiles: string[];
+  /**
+   * The compiler Program object. Only available in main-thread compilation mode.
+   * Not available in worker mode since Program cannot cross the worker boundary.
+   */
+  readonly program?: Program;
+
+  /** Diagnostics from the compilation, serialized for display. */
+  readonly diagnostics: readonly SerializedDiagnostic[];
+
+  /** Map from relative output path to file content. */
+  readonly outputFiles: Record<string, string>;
 };
 export type CompilationState = CompileResult | CompilationCrashed;
 
 export type EmitterOptions = Record<string, Record<string, unknown>>;
 
 export interface OutputViewerProps {
-  readonly program: Program;
-  /** Files emitted */
-  readonly outputFiles: string[];
+  /**
+   * The compiler Program object. May be undefined in worker mode.
+   */
+  readonly program?: Program;
+  /** Map from relative output path to file content. */
+  readonly outputFiles: Record<string, string>;
   /** Current viewer state (for viewers that have internal state) */
   readonly viewerState?: Record<string, any>;
   /** Callback to update viewer state */

packages/playground/src/worker-client.ts

@@ -0,0 +1,41 @@
+import * as monaco from "monaco-editor";
+import type { LibraryImportOptions } from "./core.js";
+import type { TypeSpecWorkerApi, WorkerInitResult } from "./worker/protocol.js";
+
+export interface TypeSpecWorkerClient {
+  /** The proxy to call worker methods from the main thread. */
+  readonly proxy: TypeSpecWorkerApi;
+  /** Capabilities returned by the worker after initialization. */
+  readonly initResult: WorkerInitResult;
+  /** Dispose the worker. */
+  dispose(): void;
+}
+
+/**
+ * Create a TypeSpec web worker using Monaco's `createWebWorker` infrastructure.
+ *
+ * The worker runs compilation and language services off the main thread.
+ * Callers must ensure `MonacoEnvironment.getWorker` handles `label: "typespec"`.
+ */
+export async function createTypeSpecWorker(params: {
+  libraries: readonly string[];
+  importConfig?: LibraryImportOptions;
+}): Promise<TypeSpecWorkerClient> {
+  const worker = monaco.editor.createWebWorker<TypeSpecWorkerApi>({
+    moduleId: "typespec-playground-worker",
+    label: "typespec",
+    keepIdleModels: true,
+  });
+
+  const proxy = await worker.getProxy();
+  const initResult = await proxy.initialize({
+    libraries: params.libraries,
+    importConfig: params.importConfig,
+  });
+
+  return {
+    proxy,
+    initResult,
+    dispose: () => worker.dispose(),
+  };
+}