fix playground usage from external package

packages/playground-website/src/main.tsx

@@ -1,4 +1,4 @@
-import { PlaygroundManifest } from "@typespec/playground/manifest";
+import PlaygroundManifest from "@typespec/playground/manifest";
 import { renderReactPlayground } from "@typespec/playground/react";
 import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
 import "./style.css";

packages/playground/definitions/manifest.d.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import { PlaygroundConfig } from "../src/vite/types.js";
+
+const config: PlaygroundConfig = {} as any;
+export default config;

packages/playground/package.json

@@ -21,7 +21,10 @@
  "exports": {
  ".": "./dist/src/index.js",
  "./vite": "./dist/src/vite/index.js",
- "./manifest": "./dist/src/manifest.js",
+ "./manifest": {
+ "default": "./do-not-use-virtual-import",
+ "types": "./definitions/manifest.d.ts"
+ },
  "./react": "./dist/src/react/index.js",
  "./react/viewers": "./dist/src/react/viewers.js"
  },

packages/playground/src/monaco-worker.ts

@@ -1,18 +1,33 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-
 export function registerMonacoDefaultWorkers() {
  self.MonacoEnvironment = {
- createTrustedTypesPolicy: () => undefined,
- getWorker(_: any, label: string) {
- if (label === "json") {
- return new jsonWorker();
+ getWorker: function (workerId, label) {
+ const getWorkerModule = (moduleUrl: string, label: string) => {
+ return new Worker((self.MonacoEnvironment as any).getWorkerUrl(moduleUrl), {
+ name: label,
+ type: "module",
+ });
+ };
+
+ switch (label) {
+ case "json":
+ return getWorkerModule("/monaco-editor/esm/vs/language/json/json.worker?worker", label);
+ case "css":
+ case "scss":
+ case "less":
+ return getWorkerModule("/monaco-editor/esm/vs/language/css/css.worker?worker", label);
+ case "html":
+ case "handlebars":
+ case "razor":
+ return getWorkerModule("/monaco-editor/esm/vs/language/html/html.worker?worker", label);
+ case "typescript":
+ case "javascript":
+ return getWorkerModule(
+ "/monaco-editor/esm/vs/language/typescript/ts.worker?worker",
+ label
+ );
+ default:
+ return getWorkerModule("/monaco-editor/esm/vs/editor/editor.worker?worker", label);
  }
- return new editorWorker();
  },
  };
 }

packages/playground/src/vite/index.ts

@@ -58,13 +58,13 @@ function playgroundManifestPlugin(config: PlaygroundUserConfig): Plugin {
  viteConfig = c;
  },
  resolveId(id: string) {
- if (id === "playground-manifest.js") {
+ if (id === "@typespec/playground/manifest") {
  return id;
  }
  return null;
  },
  load(id: string) {
- if (id === `playground-manifest.js`) {
+ if (id === `@typespec/playground/manifest`) {
  const sampleImport = Object.values(samples)
  .map(
  (sampleValue, index) =>

packages/playground/tsconfig.json

@@ -16,5 +16,12 @@
  "lib": ["DOM"],
  "types": ["@emotion/react"]
  },
- "include": ["src/**/*.ts", "src/**/*.tsx", "test/**/*.ts", "e2e/**/*.ts", "vite.config.ts"]
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "test/**/*.ts",
+ "e2e/**/*.ts",
+ "vite.config.ts",
+ "definitions/*.d.ts"
+ ]
 }