Playground directly into the website (microsoft#2638)

Stop using an iframe and load the latest version(not next)

Author: timotheeguerin

.vscode/settings.json

@@ -27,7 +27,7 @@
     "editor.detectIndentation": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[json][[jsonc][yaml][typespec][markdown]": {
+  "[json][[jsonc][yaml][typespec][markdown][css]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,
     "editor.insertSpaces": true,

common/changes/@typespec/playground/feature-playground-in-website_2023-11-08-00-27.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Enable changing the theme",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}

common/config/rush/pnpm-lock.yaml

@@ -18,13 +18,19 @@
     "typespec"
   ],
   "type": "module",
-  "main": "dist/src/lib.js",
+  "exports": {
+    "./samples": {
+      "types": "./samples/dist/samples.d.ts",
+      "default": "./samples/dist/samples.js"
+    }
+  },
   "engines": {
     "node": ">=18.0.0"
   },
   "scripts": {
-    "clean": "rimraf ./dist ./dist-dev ./temp ./typespecContents.json",
-    "build": "tsc -p . && vite build 2>&1",
+    "clean": "rimraf ./dist ./dist-dev ./temp ./samples/dist",
+    "build-samples": "node ./samples/build.js",
+    "build": "npm run build-samples && tsc -p . && vite build 2>&1",
     "preview": "npm run build && vite preview",
     "start": "vite",
     "watch": "vite",

packages/playground-website/package.json

@@ -0,0 +1,36 @@
+// @ts-check
+import { buildSamples_experimental } from "@typespec/playground/tooling";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageRoot = resolve(__dirname, "..");
+
+await buildSamples_experimental(packageRoot, resolve(__dirname, "dist/samples.js"), {
+  "API versioning": {
+    filename: "samples/versioning.tsp",
+    preferredEmitter: "@typespec/openapi3",
+  },
+  "Discriminated unions": {
+    filename: "samples/unions.tsp",
+    preferredEmitter: "@typespec/openapi3",
+  },
+  "HTTP service": {
+    filename: "samples/http.tsp",
+    preferredEmitter: "@typespec/openapi3",
+    compilerOptions: { linterRuleSet: { extends: ["@typespec/http/all"] } },
+  },
+  "REST framework": {
+    filename: "samples/rest.tsp",
+    preferredEmitter: "@typespec/openapi3",
+    compilerOptions: { linterRuleSet: { extends: ["@typespec/http/all"] } },
+  },
+  "Protobuf Kiosk": {
+    filename: "samples/kiosk.tsp",
+    preferredEmitter: "@typespec/protobuf",
+  },
+  "Json Schema": {
+    filename: "samples/json-schema.tsp",
+    preferredEmitter: "@typespec/json-schema",
+  },
+});

packages/playground-website/samples/build.js

@@ -1,11 +1,14 @@
 import PlaygroundManifest from "@typespec/playground/manifest";
 import { renderReactPlayground } from "@typespec/playground/react";
 import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
+import samples from "../samples/dist/samples.js";
+
 import "@typespec/playground/style.css";
 import "./style.css";
 
 await renderReactPlayground({
   ...PlaygroundManifest,
+  samples,
   emitterViewers: {
     "@typespec/openapi3": [SwaggerUIViewer],
   },

packages/playground-website/src/main.tsx

@@ -12,9 +12,19 @@
     "skipLibCheck": true,
     "tsBuildInfoFile": "temp/tsconfig.tsbuildinfo",
     "jsx": "react-jsx",
+    "checkJs": true,
+    "allowJs": true,
     "jsxImportSource": "@emotion/react",
     "lib": ["DOM", "ES2022"],
     "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",
+    "samples/**/*.js",
+    "samples/**/*.d.ts"
+  ]
 }

packages/playground-website/tsconfig.json

@@ -17,34 +17,6 @@ export default defineConfig(({ mode }) => {
       "@typespec/json-schema",
       "@typespec/protobuf",
     ],
-    samples: {
-      "API versioning": {
-        filename: "samples/versioning.tsp",
-        preferredEmitter: "@typespec/openapi3",
-      },
-      "Discriminated unions": {
-        filename: "samples/unions.tsp",
-        preferredEmitter: "@typespec/openapi3",
-      },
-      "HTTP service": {
-        filename: "samples/http.tsp",
-        preferredEmitter: "@typespec/openapi3",
-        compilerOptions: { linterRuleSet: { extends: ["@typespec/http/all"] } },
-      },
-      "REST framework": {
-        filename: "samples/rest.tsp",
-        preferredEmitter: "@typespec/openapi3",
-        compilerOptions: { linterRuleSet: { extends: ["@typespec/http/all"] } },
-      },
-      "Protobuf Kiosk": {
-        filename: "samples/kiosk.tsp",
-        preferredEmitter: "@typespec/protobuf",
-      },
-      "Json Schema": {
-        filename: "samples/json-schema.tsp",
-        preferredEmitter: "@typespec/json-schema",
-      },
-    },
     enableSwaggerUI: true,
     links: {
       githubIssueUrl: `https://github.com/microsoft/typespec/issues/new`,

packages/playground-website/vite.config.ts

@@ -27,6 +27,10 @@
       "types": "./dist/src/vite/index.d.ts",
       "default": "./dist/vite/index.js"
     },
+    "./tooling": {
+      "types": "./dist/src/tooling/index.d.ts",
+      "default": "./dist/tooling/index.js"
+    },
     "./manifest": {
       "types": "./dist/src/manifest.d.ts",
       "default": "./dist/manifest.js"

packages/playground/package.json

@@ -18,13 +18,15 @@ const external = [
   "react-dom/client",
   "vite",
   "@vitejs/plugin-react",
+  "fs/promises",
 ];
 export default defineConfig([
   {
     input: {
       index: "src/index.ts",
       "react/index": "src/react/index.ts",
       "react/viewers": "src/react/viewers.tsx",
+      "tooling/index": "src/tooling/index.ts",
       "vite/index": "src/vite/index.ts",
     },
     treeshake: false,

packages/playground/rollup.config.ts

@@ -20,7 +20,9 @@ export async function importTypeSpecCompiler(
  * @returns Promise with the loaded module.
  */
 export async function importLibrary(name: string, config: LibraryImportOptions): Promise<unknown> {
-  return config.useShim ? importShim(name) : import(/* @vite-ignore */ name);
+  return config.useShim
+    ? importShim(name)
+    : import(/* @vite-ignore */ /* webpackIgnore: true */ name);
 }
 
 /**

packages/playground/src/core.ts

@@ -1,5 +1,5 @@
 export { createBrowserHost } from "./browser-host.js";
 export { registerMonacoDefaultWorkers } from "./monaco-worker.js";
 export { registerMonacoLanguage } from "./services.js";
-export { createUrlStateStorage } from "./state-storage.js";
-export type { PlaygroundSample } from "./types.js";
+export { StateStorage, createUrlStateStorage } from "./state-storage.js";
+export type { BrowserHost, PlaygroundSample } from "./types.js";

packages/playground/src/index.ts

@@ -1,4 +1,5 @@
 import { css } from "@emotion/react";
+import { tokens } from "@fluentui/react-components";
 import type { Diagnostic } from "@typespec/compiler";
 import { FunctionComponent } from "react";
 
@@ -31,11 +32,11 @@ export const DiagnosticItem: FunctionComponent<DiagnosticItemProps> = ({ diagnos
       >
         {diagnostic.severity}
       </div>
-      <div css={{ padding: "0 5px", color: "#333333" }}>{diagnostic.code}</div>
+      <div css={{ padding: "0 5px", color: tokens.colorNeutralForeground2 }}>{diagnostic.code}</div>
       <div css={{ padding: "0 5px" }}>{diagnostic.message}</div>
     </div>
   );
 };
 
-const errorColor = css({ color: "#cc2222" });
-const warningColor = css({ color: "orange" });
+const errorColor = css({ color: tokens.colorStatusDangerForeground1 });
+const warningColor = css({ color: tokens.colorStatusWarningForeground1 });

packages/playground/src/react/diagnostic-list.tsx

@@ -7,6 +7,7 @@ import {
   Toolbar,
   ToolbarButton,
   Tooltip,
+  tokens,
 } from "@fluentui/react-components";
 import {
   Broom16Filled,
@@ -61,7 +62,7 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
   const bugButton = newIssue ? <FileBugButton onClick={newIssue} /> : undefined;
 
   return (
-    <div css={{ borderBottom: "1px solid #f5f5f5" }}>
+    <div css={{ borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }}>
       <Toolbar>
         <Tooltip content="Save" relationship="description" withArrow>
           <ToolbarButton aria-label="Save" icon={<Save16Regular />} onClick={saveCode as any} />

packages/playground/src/react/editor-command-bar.tsx

@@ -30,6 +30,10 @@ export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions
     onMount?.({ editor: editorRef.current });
   }, []);
 
+  useEffect(() => {
+    editor.setTheme(options.theme ?? "vs");
+  }, [options.theme]);
+
   useEffect(() => {
     const disposables: IDisposable[] = [];
     for (const command of actions ?? []) {

packages/playground/src/react/editor.tsx

@@ -1,4 +1,5 @@
 import { css } from "@emotion/react";
+import { tokens } from "@fluentui/react-components";
 import type { Diagnostic } from "@typespec/compiler";
 import { FunctionComponent } from "react";
 import { DiagnosticList } from "./diagnostic-list.js";
@@ -28,7 +29,7 @@ export const InternalCompilerError: FunctionComponent<InternalCompilerErrorProps
     <div css={{ CenterStyles }}>
       <div
         css={{
-          border: "1px solid #cc2222",
+          border: `1px solid ${tokens.colorStatusDangerBorder1}`,
           padding: "10px",
           margin: "20px",
         }}

packages/playground/src/react/error-tab.tsx

@@ -1,8 +1,12 @@
 import { css } from "@emotion/react";
-import { MANIFEST } from "@typespec/compiler";
 import { FunctionComponent, PropsWithChildren } from "react";
+import { BrowserHost } from "../types.js";
 
-export const Footer: FunctionComponent = () => {
+export interface FooterProps {
+  host: BrowserHost;
+}
+export const Footer: FunctionComponent<FooterProps> = ({ host }) => {
+  const { MANIFEST } = host.compiler;
   const prItem = MANIFEST.pr ? (
     <FooterItem link={`https://github.com/microsoft/typespec/pull/${MANIFEST.pr}`}>
       <span>PR </span>

packages/playground/src/react/footer.tsx

@@ -1,4 +1,8 @@
 export { Playground } from "./playground.js";
-export type { PlaygroundProps } from "./playground.js";
-export { createReactPlayground, renderReactPlayground } from "./standalone.js";
+export type { PlaygroundProps, PlaygroundSaveData } from "./playground.js";
+export {
+  StandalonePlayground,
+  createReactPlayground,
+  renderReactPlayground,
+} from "./standalone.js";
 export * from "./types.js";