Fix playground usage from external package (#2540)

Playground usage was completely broken when used as a package. Local reference seems to make it work but hwne the package is in node_modules vite doesn't allow certain things
microsoft · Oct 5, 2023 · 99d80f8 · 99d80f8
1 parent e02b74a
commit 99d80f8
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 34 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,9 +6,7 @@
     "**/dist-dev/**": true,
     "**/.docusaurus/**": true,
     "**/CHANGELOG.json": true,
-    "**/CHANGELOG.md": true,
     "docs/spec.html": true,
-    "common/config/rush/pnpm-lock.yaml": true,
     "**/node_modules/**": true,
     "packages/website/versioned_docs/**": true,
     "packages/samples/scratch/**": false // Those files are in gitignore but we still want to search for them

diff --git a/common/changes/@typespec/bundler/fix-playground-external-use_2023-10-04-18-20.json b/common/changes/@typespec/bundler/fix-playground-external-use_2023-10-04-18-20.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/bundler",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/bundler"
+}
diff --git a/common/changes/@typespec/playground/fix-playground-external-use_2023-10-04-18-20.json b/common/changes/@typespec/playground/fix-playground-external-use_2023-10-04-18-20.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/bundler/package.json b/packages/bundler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typespec/bundler",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "author": "Microsoft Corporation",
   "description": "Package to bundle a typespec library.",
   "homepage": "https://microsoft.github.io/typespec",

diff --git a/packages/playground-website/package.json b/packages/playground-website/package.json
@@ -41,7 +41,7 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@typespec/playground": "workspace:~0.1.0-alpha.0",
+    "@typespec/playground": "workspace:~0.1.0-alpha.1",
     "@typespec/versioning": "workspace:~0.48.0",
     "@typespec/compiler": "workspace:~0.48.1",
     "@typespec/http": "workspace:~0.48.0",

diff --git a/packages/playground-website/src/main.tsx b/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";

diff --git a/packages/playground/CHANGELOG.json b/packages/playground/CHANGELOG.json
@@ -0,0 +1,17 @@
+{
+  "name": "@typespec/openapi",
+  "entries": [
+    {
+      "version": "0.1.0-alpha.1",
+      "tag": "@typespec/playground_v0.1.0-alpha.1",
+      "date": "Wed, 03 Oct 2023 18:00:18 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "Fix: Usage of the package in vite dev mode was broken. Some errors due to the loading of the manifest as well as monaco editor workers.\n**BREAKING CHANGE:** Changed `import { PlaygroundManifest } from \"@typespec/playground/manifest\";` to`import PlaygroundManifest from \"@typespec/playground/manifest\";`"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
@@ -0,0 +1,12 @@
+# Change Log - @typespec/playground
+
+This log was last generated on Wed, 04 Oct 2023 18:19:25 GMT and should not be manually modified.
+
+## 0.1.0-alpha.1
+Wed, 03 Oct 2023 18:00:18 GMT
+
+### Updates
+
+- Fix: Usage of the package in vite dev mode was broken. Some errors due to the loading of the manifest as well as monaco editor workers.
+**BREAKING CHANGE:** Changed `import { PlaygroundManifest } from "@typespec/playground/manifest";` to`import PlaygroundManifest from "@typespec/playground/manifest";`
+
diff --git a/packages/playground/README.md b/packages/playground/README.md
@@ -42,7 +42,7 @@ export default config;
 In `src/main.tsx`:
 
 ```tsx
-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";

diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://microsoft.github.io/typespec",

diff --git a/packages/playground/src/manifest.ts b/packages/playground/src/manifest.ts
@@ -1,6 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import manifest from "playground-manifest.js";
-import { PlaygroundConfig } from "./vite/types.js";
+/**
+ * THIS FILE IS MEANT TO BE STUBBED using the manifest plugin.
+ */
+import { PlaygroundConfig } from "../src/vite/types.js";
 
-export const PlaygroundManifest: PlaygroundConfig = manifest;
+const config: PlaygroundConfig = {} as any;
+export default config;
diff --git a/packages/playground/src/monaco-worker.ts b/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();
     },
   };
 }
diff --git a/packages/playground/src/vite/index.ts b/packages/playground/src/vite/index.ts
@@ -54,17 +54,18 @@ function playgroundManifestPlugin(config: PlaygroundUserConfig): Plugin {
 
   return {
     name: "playground-manifest",
+    enforce: "pre", // Need to run before resolving library imports to stub `@typespec/playground/manifest`
     async configResolved(c) {
       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) =>

diff --git a/packages/playground/tsconfig.json b/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"
+  ]
 }
diff --git a/packages/samples/package.json b/packages/samples/package.json
@@ -43,24 +43,25 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@typespec/versioning": "workspace:~0.48.0",
     "@typespec/best-practices": "workspace:~0.45.0",
     "@typespec/compiler": "workspace:~0.48.1",
+    "@typespec/html-program-viewer": "workspace:~0.48.0",
     "@typespec/http": "workspace:~0.48.0",
-    "@typespec/rest": "workspace:~0.48.0",
+    "@typespec/json-schema": "workspace:~0.48.0",
     "@typespec/openapi": "workspace:~0.48.0",
     "@typespec/openapi3": "workspace:~0.48.1",
-    "@typespec/html-program-viewer": "workspace:~0.48.0"
+    "@typespec/rest": "workspace:~0.48.0",
+    "@typespec/versioning": "workspace:~0.48.0"
   },
   "devDependencies": {
-    "@typespec/internal-build-utils": "workspace:~0.48.0",
-    "@typespec/eslint-config-typespec": "workspace:~0.48.0",
     "@types/mocha": "~10.0.1",
     "@types/node": "~18.11.9",
+    "@typespec/eslint-config-typespec": "workspace:~0.48.0",
+    "@typespec/internal-build-utils": "workspace:~0.48.0",
+    "autorest": "~3.3.2",
     "cross-env": "~7.0.3",
     "eslint": "^8.49.0",
     "mocha": "~10.2.0",
-    "autorest": "~3.3.2",
     "rimraf": "~5.0.1",
     "typescript": "~5.2.2"
   }