Fix issues with playground in website (#2651)

- Themes actually should be the expanded theme otherwise we lose decorator highlighting - Didn't load webpack monaco plugin so json would cause error - failure to load the emitter options in the emitter option configuration
microsoft · Nov 9, 2023 · 511b9d5 · 511b9d5
1 parent b8dc20f
commit 511b9d5
Show file tree

Hide file tree

Showing 17 changed files with 88 additions and 53 deletions.
diff --git a/common/changes/@typespec/playground/fix-playground-in-website-issues_2023-11-09-01-51.json b/common/changes/@typespec/playground/fix-playground-in-website-issues_2023-11-09-01-51.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "`registerMonacoDefaultWorkers` renamed to `registerMonacoDefaultWorkersForVite` and must now be called if using vite.",
+      "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/playground-website/src/main.tsx b/packages/playground-website/src/main.tsx
@@ -1,3 +1,4 @@
+import { registerMonacoDefaultWorkersForVite } from "@typespec/playground";
 import PlaygroundManifest from "@typespec/playground/manifest";
 import { renderReactPlayground } from "@typespec/playground/react";
 import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
@@ -6,6 +7,8 @@ import samples from "../samples/dist/samples.js";
 import "@typespec/playground/style.css";
 import "./style.css";
 
+registerMonacoDefaultWorkersForVite();
+
 await renderReactPlayground({
   ...PlaygroundManifest,
   samples,

diff --git a/packages/playground/README.md b/packages/playground/README.md
@@ -42,13 +42,16 @@ export default config;
 In `src/main.tsx`:
 
 ```tsx
+import { registerMonacoDefaultWorkersForVite } from "@typespec/playground";
 import PlaygroundManifest from "@typespec/playground/manifest";
 import { renderReactPlayground } from "@typespec/playground/react";
 import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
 
 // Import styles
 import "@typespec/playground/styles.css";
 
+registerMonacoDefaultWorkersForVite();
+
 await renderReactPlayground({
   ...PlaygroundManifest,
   emitterViewers: {

diff --git a/packages/playground/src/index.ts b/packages/playground/src/index.ts
@@ -1,5 +1,5 @@
 export { createBrowserHost } from "./browser-host.js";
-export { registerMonacoDefaultWorkers } from "./monaco-worker.js";
+export { registerMonacoDefaultWorkersForVite } from "./monaco-worker.js";
 export { registerMonacoLanguage } from "./services.js";
 export { StateStorage, createUrlStateStorage } from "./state-storage.js";
 export type { BrowserHost, PlaygroundSample } from "./types.js";
diff --git a/packages/playground/src/monaco-worker.ts b/packages/playground/src/monaco-worker.ts
@@ -1,4 +1,4 @@
-export function registerMonacoDefaultWorkers() {
+export function registerMonacoDefaultWorkersForVite() {
   self.MonacoEnvironment = {
     getWorker: function (workerId, label) {
       const getWorkerModule = (moduleUrl: string, label: string) => {

diff --git a/packages/playground/src/react/editor-command-bar.tsx b/packages/playground/src/react/editor-command-bar.tsx
@@ -16,8 +16,8 @@ import {
   Settings24Regular,
 } from "@fluentui/react-icons";
 import { CompilerOptions } from "@typespec/compiler";
-import { FunctionComponent } from "react";
-import { PlaygroundSample, PlaygroundTspLibrary } from "../types.js";
+import { FunctionComponent, useMemo } from "react";
+import { BrowserHost, PlaygroundSample } from "../types.js";
 import { EmitterDropdown } from "./emitter-dropdown.js";
 import { SamplesDropdown } from "./samples-dropdown.js";
 import { CompilerSettings } from "./settings/compiler-settings.js";
@@ -27,7 +27,7 @@ export interface EditorCommandBarProps {
   saveCode: () => Promise<void> | void;
   formatCode: () => Promise<void> | void;
   newIssue?: () => Promise<void> | void;
-  libraries: PlaygroundTspLibrary[];
+  host: BrowserHost;
   selectedEmitter: string;
   onSelectedEmitterChange: (emitter: string) => void;
   compilerOptions: CompilerOptions;
@@ -42,7 +42,7 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
   saveCode,
   formatCode,
   newIssue,
-  libraries,
+  host,
   selectedEmitter,
   onSelectedEmitterChange,
   compilerOptions: emitterOptions,
@@ -61,6 +61,14 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
 
   const bugButton = newIssue ? <FileBugButton onClick={newIssue} /> : undefined;
 
+  const emitters = useMemo(
+    () =>
+      Object.values(host.libraries)
+        .filter((x) => x.isEmitter)
+        .map((x) => x.name),
+    [host.libraries]
+  );
+
   return (
     <div css={{ borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }}>
       <Toolbar>
@@ -78,7 +86,7 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
           />
         )}
         <EmitterDropdown
-          emitters={libraries.filter((x) => x.isEmitter).map((x) => x.name)}
+          emitters={emitters}
           onSelectedEmitterChange={onSelectedEmitterChange}
           selectedEmitter={selectedEmitter}
         />
@@ -89,7 +97,7 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
           <DialogSurface>
             <DialogBody>
               <CompilerSettings
-                libraries={libraries}
+                host={host}
                 selectedEmitter={selectedEmitter}
                 options={emitterOptions}
                 onOptionsChanged={onCompilerOptionsChange}

diff --git a/packages/playground/src/react/editor.tsx b/packages/playground/src/react/editor.tsx
@@ -31,7 +31,7 @@ export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions
   }, []);
 
   useEffect(() => {
-    editor.setTheme(options.theme ?? "vs");
+    editor.setTheme(options.theme ?? "typespec");
   }, [options.theme]);
 
   useEffect(() => {

diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx
@@ -212,7 +212,6 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
     editorRef.current = editor;
   }, []);
 
-  const libraries = useMemo(() => Object.values(host.libraries), [host.libraries]);
   return (
     <div
       css={{
@@ -232,7 +231,7 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
       >
         <Pane>
           <EditorCommandBar
-            libraries={libraries}
+            host={host}
             selectedEmitter={selectedEmitter}
             onSelectedEmitterChange={onSelectedEmitterChange}
             compilerOptions={compilerOptions}

diff --git a/packages/playground/src/react/settings/compiler-settings.tsx b/packages/playground/src/react/settings/compiler-settings.tsx
@@ -1,21 +1,20 @@
-import { CompilerOptions, LinterRuleSet, TypeSpecLibrary } from "@typespec/compiler";
-import { FunctionComponent, useCallback, useEffect, useState } from "react";
-import { importLibrary } from "../../core.js";
-import { PlaygroundTspLibrary } from "../../types.js";
+import { CompilerOptions, LinterRuleSet } from "@typespec/compiler";
+import { FunctionComponent, useCallback } from "react";
+import { BrowserHost } from "../../types.js";
 import { EmitterOptions } from "../types.js";
 import { EmitterOptionsForm } from "./emitter-options-form.js";
 import { LinterForm } from "./linter-form.js";
 
 export type CompilerSettingsProps = {
-  libraries: PlaygroundTspLibrary[];
+  host: BrowserHost;
   selectedEmitter: string;
   options: CompilerOptions;
   onOptionsChanged: (options: CompilerOptions) => void;
 };
 
 export const CompilerSettings: FunctionComponent<CompilerSettingsProps> = ({
   selectedEmitter,
-  libraries,
+  host,
   options,
   onOptionsChanged,
 }) => {
@@ -28,7 +27,7 @@ export const CompilerSettings: FunctionComponent<CompilerSettingsProps> = ({
     },
     [options]
   );
-  const library = useTypeSpecLibrary(selectedEmitter);
+  const library = host.libraries[selectedEmitter];
   const linterRuleSet = options.linterRuleSet ?? {};
   const linterRuleSetChanged = useCallback(
     (linterRuleSet: LinterRuleSet) => {
@@ -53,31 +52,10 @@ export const CompilerSettings: FunctionComponent<CompilerSettingsProps> = ({
       )}
       <h3>Linter</h3>
       <LinterForm
-        libraries={libraries}
+        libraries={host.libraries}
         linterRuleSet={linterRuleSet}
         onLinterRuleSetChanged={linterRuleSetChanged}
       />
     </div>
   );
 };
-
-function useTypeSpecLibrary(name: string): TypeSpecLibrary<any> | undefined {
-  const [lib, setLib] = useState<TypeSpecLibrary<any>>();
-
-  useEffect(() => {
-    setLib(undefined);
-    importLibrary(name, {})
-      .then((module: any) => {
-        if (module.$lib === undefined) {
-          // eslint-disable-next-line no-console
-          console.error(`Couldn't load library ${name} missing $lib export`);
-        }
-        setLib(module.$lib);
-      })
-      .catch((e) => {
-        // eslint-disable-next-line no-console
-        console.error("Failed to load library", name);
-      });
-  }, [name]);
-  return lib;
-}
diff --git a/packages/playground/src/react/settings/emitter-options-form.tsx b/packages/playground/src/react/settings/emitter-options-form.tsx
@@ -9,12 +9,12 @@ import {
   SwitchOnChangeData,
   useId,
 } from "@fluentui/react-components";
-import { TypeSpecLibrary } from "@typespec/compiler";
 import { FunctionComponent, useCallback, useMemo } from "react";
+import { PlaygroundTspLibrary } from "../../types.js";
 import { EmitterOptions } from "../types.js";
 
 export interface EmitterOptionsFormProps {
-  library: TypeSpecLibrary<any>;
+  library: PlaygroundTspLibrary;
   options: EmitterOptions;
   optionsChanged: (options: EmitterOptions) => void;
 }
@@ -23,7 +23,7 @@ export const EmitterOptionsForm: FunctionComponent<EmitterOptionsFormProps> = ({
   options,
   optionsChanged,
 }) => {
-  const emitterOptionsSchema = library.emitter?.options?.properties;
+  const emitterOptionsSchema = library.definition?.emitter?.options?.properties;
   if (emitterOptionsSchema === undefined) {
     return <>"No options"</>;
   }

diff --git a/packages/playground/src/react/settings/linter-form.tsx b/packages/playground/src/react/settings/linter-form.tsx
@@ -4,7 +4,7 @@ import { FunctionComponent, useCallback } from "react";
 import { PlaygroundTspLibrary } from "../../types.js";
 
 export interface LinterFormProps {
-  libraries: PlaygroundTspLibrary[];
+  libraries: Record<string, PlaygroundTspLibrary>;
   linterRuleSet: LinterRuleSet;
   onLinterRuleSetChanged: (options: LinterRuleSet) => void;
 }
@@ -14,7 +14,7 @@ export const LinterForm: FunctionComponent<LinterFormProps> = ({
   linterRuleSet,
   onLinterRuleSetChanged,
 }) => {
-  const rulesets = libraries.flatMap((lib) => {
+  const rulesets = Object.values(libraries).flatMap((lib) => {
     return Object.keys(lib.definition?.linter?.ruleSets ?? {}).map(
       (x) => `${lib.name}/${x}`
     ) as RuleRef[];

diff --git a/packages/playground/src/react/standalone.tsx b/packages/playground/src/react/standalone.tsx
@@ -11,7 +11,6 @@ import { FunctionComponent, useCallback, useEffect, useId, useMemo, useState } f
 import { createRoot } from "react-dom/client";
 import { createBrowserHost } from "../browser-host.js";
 import { LibraryImportOptions } from "../core.js";
-import { registerMonacoDefaultWorkers } from "../monaco-worker.js";
 import { registerMonacoLanguage } from "../services.js";
 import { StateStorage, createUrlStateStorage } from "../state-storage.js";
 import { BrowserHost } from "../types.js";
@@ -35,7 +34,6 @@ function useStandalonePlaygroundContext(
     const load = async () => {
       const host = await createBrowserHost(config.libraries, config.importConfig);
       await registerMonacoLanguage(host);
-      registerMonacoDefaultWorkers();
 
       const stateStorage = createStandalonePlaygroundStateStorage();
       const initialState = stateStorage.load();

diff --git a/packages/playground/src/services.ts b/packages/playground/src/services.ts
@@ -313,6 +313,15 @@ export async function registerMonacoLanguage(host: BrowserHost) {
       { token: "function", foreground: "#795E26" },
     ],
   });
+  monaco.editor.defineTheme("typespec-dark", {
+    base: "vs-dark",
+    inherit: true,
+    colors: {},
+    rules: [
+      { token: "macro", foreground: "#E06C75" },
+      { token: "function", foreground: "#E06C75" },
+    ],
+  });
   monaco.editor.setTheme("typespec");
 
   monaco.languages.registerDocumentSemanticTokensProvider("typespec", {

diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -3,8 +3,9 @@
 
 import type { VersionOptions } from "@docusaurus/plugin-content-docs";
 import type { Config, Plugin } from "@docusaurus/types";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
+import { resolve } from "path";
 import { themes } from "prism-react-renderer";
-const { resolve } = require("path");
 
 function getMajorMinorVersion(pkgJsonPath): string {
   const version = require(pkgJsonPath).version;
@@ -105,9 +106,18 @@ const config: Config = {
         configureWebpack: (config, isServer, utils) => {
           return {
             module: {
-              rules: [{ test: /\.tsp$/, use: "raw-loader" }],
+              rules: [
+                {
+                  test: /\.ttf$/,
+                  use: ["file-loader"],
+                },
+              ],
             },
-
+            plugins: [
+              new MonacoWebpackPlugin({
+                languages: ["json"],
+              }),
+            ],
             ignoreWarnings: [
               (warning, compilation) => {
                 const moduleName: string | undefined = (warning.module as any)?.resource;

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -59,6 +59,8 @@
     "mermaid": "~10.4.0",
     "@typespec/eslint-config-typespec": "workspace:~0.50.0",
     "eslint": "^8.49.0",
+    "file-loader": "~6.2.0",
+    "monaco-editor-webpack-plugin": "~7.1.0",
     "rimraf": "~5.0.1",
     "dotenv": "~16.3.1",
     "swc-loader": "^0.2.3",

diff --git a/packages/website/src/pages/playground.tsx b/packages/website/src/pages/playground.tsx
@@ -66,7 +66,7 @@ const AsyncPlayground = () => {
   }, []);
 
   const editorOptions = useMemo(() => {
-    return { theme: colorMode === "dark" ? "vs-dark" : "vs-light" };
+    return { theme: colorMode === "dark" ? "typespec-dark" : "typespec" };
   }, [colorMode]);
 
   return (