@typespec/playground 0.1.0-alpha.4-dev.13 → 0.1.0-alpha.4-dev.15

package/README.md

@@ -42,6 +42,7 @@ 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";
@@ -49,6 +50,8 @@ import { SwaggerUIViewer } from "@typespec/playground/react/viewers";
 // Import styles
 import "@typespec/playground/styles.css";
 
+registerMonacoDefaultWorkersForVite();
+
 await renderReactPlayground({
   ...PlaygroundManifest,
   emitterViewers: {

package/dist/index.css

@@ -41,12 +41,12 @@
 .split-pane-module_sash-content__DLAt4 {
   width: 100%;
   height: 100%;
-  background-color: #e5e5e5;
+  background-color: var(--colorNeutralStroke2);
 }
 
 .split-pane-module_sash-content-dragging__NkKQP,
 .split-pane-module_sash-content__DLAt4:hover {
-  background-color: #c3c3c3;
+  background-color: var(--colorNeutralStroke1Pressed);
 }
 
 .split-pane-module_pane__m1zQB {

package/dist/index.js

@@ -1,7 +1,39 @@
-export { c as createBrowserHost, b as createUrlStateStorage, r as registerMonacoDefaultWorkers, a as registerMonacoLanguage } from './state-storage-ad8a9d39.js';
+export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-1ccb8536.js';
 import '@typespec/compiler';
 import 'monaco-editor';
 import 'vscode-languageserver';
 import 'vscode-languageserver-textdocument';
 import 'lzutf8';
+
+function registerMonacoDefaultWorkersForVite() {
+    self.MonacoEnvironment = {
+        getWorker: function (workerId, label) {
+            const getWorkerModule = (moduleUrl, label) => {
+                return new Worker(self.MonacoEnvironment.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);
+            }
+        },
+    };
+}
+
+export { registerMonacoDefaultWorkersForVite };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/monaco-worker.ts"],"sourcesContent":["export function registerMonacoDefaultWorkersForVite() {\n  self.MonacoEnvironment = {\n    getWorker: function (workerId, label) {\n      const getWorkerModule = (moduleUrl: string, label: string) => {\n        return new Worker((self.MonacoEnvironment as any).getWorkerUrl(moduleUrl), {\n          name: label,\n          type: \"module\",\n        });\n      };\n\n      switch (label) {\n        case \"json\":\n          return getWorkerModule(\"/monaco-editor/esm/vs/language/json/json.worker?worker\", label);\n        case \"css\":\n        case \"scss\":\n        case \"less\":\n          return getWorkerModule(\"/monaco-editor/esm/vs/language/css/css.worker?worker\", label);\n        case \"html\":\n        case \"handlebars\":\n        case \"razor\":\n          return getWorkerModule(\"/monaco-editor/esm/vs/language/html/html.worker?worker\", label);\n        case \"typescript\":\n        case \"javascript\":\n          return getWorkerModule(\n            \"/monaco-editor/esm/vs/language/typescript/ts.worker?worker\",\n            label\n          );\n        default:\n          return getWorkerModule(\"/monaco-editor/esm/vs/editor/editor.worker?worker\", label);\n      }\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;;;SAAgB,mCAAmC,GAAA;IACjD,IAAI,CAAC,iBAAiB,GAAG;AACvB,QAAA,SAAS,EAAE,UAAU,QAAQ,EAAE,KAAK,EAAA;AAClC,YAAA,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,KAAa,KAAI;gBAC3D,OAAO,IAAI,MAAM,CAAE,IAAI,CAAC,iBAAyB,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;AACzE,oBAAA,IAAI,EAAE,KAAK;AACX,oBAAA,IAAI,EAAE,QAAQ;AACf,iBAAA,CAAC,CAAC;AACL,aAAC,CAAC;AAEF,YAAA,QAAQ,KAAK;AACX,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,eAAe,CAAC,wDAAwD,EAAE,KAAK,CAAC,CAAC;AAC1F,gBAAA,KAAK,KAAK,CAAC;AACX,gBAAA,KAAK,MAAM,CAAC;AACZ,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,eAAe,CAAC,sDAAsD,EAAE,KAAK,CAAC,CAAC;AACxF,gBAAA,KAAK,MAAM,CAAC;AACZ,gBAAA,KAAK,YAAY,CAAC;AAClB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,eAAe,CAAC,wDAAwD,EAAE,KAAK,CAAC,CAAC;AAC1F,gBAAA,KAAK,YAAY,CAAC;AAClB,gBAAA,KAAK,YAAY;AACf,oBAAA,OAAO,eAAe,CACpB,4DAA4D,EAC5D,KAAK,CACN,CAAC;AACJ,gBAAA;AACE,oBAAA,OAAO,eAAe,CAAC,mDAAmD,EAAE,KAAK,CAAC,CAAC;AACtF,aAAA;SACF;KACF,CAAC;AACJ;;;;"}

package/dist/react/index.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import debounce from 'debounce';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
-import { useCallback, useMemo, useState, useEffect, useRef, useId as useId$1 } from 'react';
+import { useCallback, useMemo, useRef, useEffect, useState, useId as useId$1 } from 'react';
 import { CompletionItemTag } from 'vscode-languageserver';
-import { g as getMarkerLocation, c as createBrowserHost, a as registerMonacoLanguage, r as registerMonacoDefaultWorkers, b as createUrlStateStorage } from '../state-storage-ad8a9d39.js';
-import { Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Link, Toolbar, Tooltip, ToolbarButton, Dialog, DialogTrigger, DialogSurface, DialogBody, mergeClasses, useToastController, Toast, ToastTitle, ToastBody, FluentProvider, webLightTheme, Toaster } from '@fluentui/react-components';
+import { g as getMarkerLocation, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-1ccb8536.js';
+import { Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Link, tokens, Toolbar, Tooltip, ToolbarButton, Dialog, DialogTrigger, DialogSurface, DialogBody, mergeClasses, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { Save16Regular, Broom16Filled, Settings24Regular, Bug16Regular } from '@fluentui/react-icons';
 import { css } from '@emotion/react';
-import { MANIFEST } from '@typespec/compiler';
 import { TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { createRoot } from 'react-dom/client';
+import '@typespec/compiler';
 import 'vscode-languageserver-textdocument';
 import 'lzutf8';
 
@@ -36,8 +36,8 @@ const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChan
 };
 
 const EmitterOptionsForm = ({ library, options, optionsChanged, }) => {
-    var _a, _b;
-    const emitterOptionsSchema = (_b = (_a = library.emitter) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.properties;
+    var _a, _b, _c;
+    const emitterOptionsSchema = (_c = (_b = (_a = library.definition) === null || _a === void 0 ? void 0 : _a.emitter) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.properties;
     if (emitterOptionsSchema === undefined) {
         return jsx(Fragment, { children: "\"No options\"" });
     }
@@ -72,7 +72,7 @@ const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
 };
 
 const LinterForm = ({ libraries, linterRuleSet, onLinterRuleSetChanged, }) => {
-    const rulesets = libraries.flatMap((lib) => {
+    const rulesets = Object.values(libraries).flatMap((lib) => {
         var _a, _b, _c;
         return Object.keys((_c = (_b = (_a = lib.definition) === null || _a === void 0 ? void 0 : _a.linter) === null || _b === void 0 ? void 0 : _b.ruleSets) !== null && _c !== void 0 ? _c : {}).map((x) => `${lib.name}/${x}`);
     });
@@ -101,7 +101,7 @@ const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
     return jsx(Checkbox, { label: ruleSet, checked: checked, onChange: handleChange });
 };
 
-const CompilerSettings = ({ selectedEmitter, libraries, options, onOptionsChanged, }) => {
+const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, }) => {
     var _a, _b;
     const emitterOptionsChanged = useCallback((emitterOptions) => {
         onOptionsChanged({
@@ -109,7 +109,7 @@ const CompilerSettings = ({ selectedEmitter, libraries, options, onOptionsChange
             options: emitterOptions,
         });
     }, [options]);
-    const library = useTypeSpecLibrary(selectedEmitter);
+    const library = host.libraries[selectedEmitter];
     const linterRuleSet = (_a = options.linterRuleSet) !== null && _a !== void 0 ? _a : {};
     const linterRuleSetChanged = useCallback((linterRuleSet) => {
         onOptionsChanged({
@@ -117,32 +117,16 @@ const CompilerSettings = ({ selectedEmitter, libraries, options, onOptionsChange
             linterRuleSet,
         });
     }, [options]);
-    return (jsxs("div", { css: { padding: 10 }, children: [jsx("h2", { children: "Settings" }), jsxs(Fragment, { children: ["Emitter: ", selectedEmitter] }), jsx("h3", { children: "Options" }), library && (jsx(EmitterOptionsForm, { library: library, options: (_b = options.options) !== null && _b !== void 0 ? _b : {}, optionsChanged: emitterOptionsChanged })), jsx("h3", { children: "Linter" }), jsx(LinterForm, { libraries: libraries, linterRuleSet: linterRuleSet, onLinterRuleSetChanged: linterRuleSetChanged })] }));
+    return (jsxs("div", { css: { padding: 10 }, children: [jsx("h2", { children: "Settings" }), jsxs(Fragment, { children: ["Emitter: ", selectedEmitter] }), jsx("h3", { children: "Options" }), library && (jsx(EmitterOptionsForm, { library: library, options: (_b = options.options) !== null && _b !== void 0 ? _b : {}, optionsChanged: emitterOptionsChanged })), jsx("h3", { children: "Linter" }), jsx(LinterForm, { libraries: host.libraries, linterRuleSet: linterRuleSet, onLinterRuleSetChanged: linterRuleSetChanged })] }));
 };
-function useTypeSpecLibrary(name) {
-    const [lib, setLib] = useState();
-    useEffect(() => {
-        setLib(undefined);
-        import(/* @vite-ignore */ name)
-            .then((module) => {
-            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;
-}
 
-const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, newIssue, libraries, selectedEmitter, onSelectedEmitterChange, compilerOptions: emitterOptions, onCompilerOptionsChange, samples, selectedSampleName, onSelectedSampleNameChange, }) => {
+const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, newIssue, host, selectedEmitter, onSelectedEmitterChange, compilerOptions: emitterOptions, onCompilerOptionsChange, samples, selectedSampleName, onSelectedSampleNameChange, }) => {
     const documentation = documentationUrl ? (jsx("label", { children: jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) })) : undefined;
     const bugButton = newIssue ? jsx(FileBugButton, { onClick: newIssue }) : undefined;
-    return (jsx("div", { css: { borderBottom: "1px solid #f5f5f5" }, children: jsxs(Toolbar, { children: [jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Save", icon: jsx(Save16Regular, {}), onClick: saveCode }) }), jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Format", icon: jsx(Broom16Filled, {}), onClick: formatCode }) }), samples && (jsx(SamplesDropdown, { samples: samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange })), jsx(EmitterDropdown, { emitters: libraries.filter((x) => x.isEmitter).map((x) => x.name), onSelectedEmitterChange: onSelectedEmitterChange, selectedEmitter: selectedEmitter }), jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}) }) }), jsx(DialogSurface, { children: jsx(DialogBody, { children: jsx(CompilerSettings, { libraries: libraries, selectedEmitter: selectedEmitter, options: emitterOptions, onOptionsChanged: onCompilerOptionsChange }) }) })] }), documentation, jsx("div", { css: { flex: "1" } }), bugButton] }) }));
+    const emitters = useMemo(() => Object.values(host.libraries)
+        .filter((x) => x.isEmitter)
+        .map((x) => x.name), [host.libraries]);
+    return (jsx("div", { css: { borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }, children: jsxs(Toolbar, { children: [jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Save", icon: jsx(Save16Regular, {}), onClick: saveCode }) }), jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Format", icon: jsx(Broom16Filled, {}), onClick: formatCode }) }), samples && (jsx(SamplesDropdown, { samples: samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange })), jsx(EmitterDropdown, { emitters: emitters, onSelectedEmitterChange: onSelectedEmitterChange, selectedEmitter: selectedEmitter }), jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}) }) }), jsx(DialogSurface, { children: jsx(DialogBody, { children: jsx(CompilerSettings, { host: host, selectedEmitter: selectedEmitter, options: emitterOptions, onOptionsChanged: onCompilerOptionsChange }) }) })] }), documentation, jsx("div", { css: { flex: "1" } }), bugButton] }) }));
 };
 const FileBugButton = ({ onClick }) => {
     return (jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { appearance: "subtle", "aria-label": "File Bug Report", icon: jsx(Bug16Regular, {}), onClick: onClick, children: "File bug" }) }));
@@ -159,6 +143,10 @@ const Editor = ({ model, options, actions, onMount }) => {
         });
         onMount === null || onMount === void 0 ? void 0 : onMount({ editor: editorRef.current });
     }, []);
+    useEffect(() => {
+        var _a;
+        editor.setTheme((_a = options.theme) !== null && _a !== void 0 ? _a : "typespec");
+    }, [options.theme]);
     useEffect(() => {
         const disposables = [];
         for (const command of actions !== null && actions !== void 0 ? actions : []) {
@@ -183,7 +171,8 @@ function useMonacoModel(uri, language) {
     }, [uri, language]);
 }
 
-const Footer = () => {
+const Footer = ({ host }) => {
+    const { MANIFEST } = host.compiler;
     const prItem = MANIFEST.pr ? (jsxs(FooterItem, { link: `https://github.com/microsoft/typespec/pull/${MANIFEST.pr}`, children: [jsx("span", { children: "PR " }), jsx("span", { children: MANIFEST.pr })] })) : (jsx(Fragment, {}));
     return (jsxs("div", { css: [
             {
@@ -267,17 +256,17 @@ const DiagnosticList = ({ diagnostics }) => {
         }) }));
 };
 const DiagnosticItem = ({ diagnostic }) => {
-    return (jsxs("div", { css: { display: "flex" }, children: [jsx("div", { css: [{ padding: "0 5px" }, diagnostic.severity === "error" ? errorColor : warningColor], children: diagnostic.severity }), jsx("div", { css: { padding: "0 5px", color: "#333333" }, children: diagnostic.code }), jsx("div", { css: { padding: "0 5px" }, children: diagnostic.message })] }));
+    return (jsxs("div", { css: { display: "flex" }, children: [jsx("div", { css: [{ padding: "0 5px" }, diagnostic.severity === "error" ? errorColor : warningColor], children: diagnostic.severity }), jsx("div", { css: { padding: "0 5px", color: tokens.colorNeutralForeground2 }, children: diagnostic.code }), jsx("div", { css: { padding: "0 5px" }, children: diagnostic.message })] }));
 };
-const errorColor = css({ color: "#cc2222" });
-const warningColor = css({ color: "orange" });
+const errorColor = css({ color: tokens.colorStatusDangerForeground1 });
+const warningColor = css({ color: tokens.colorStatusWarningForeground1 });
 
 const ErrorTab = ({ internalCompilerError, diagnostics, }) => {
     return (jsxs(Fragment, { children: [internalCompilerError && jsx(InternalCompilerError, { error: internalCompilerError }), diagnostics && jsx(DiagnosticList, { diagnostics: diagnostics })] }));
 };
 const InternalCompilerError = ({ error }) => {
     return (jsx("div", { css: { CenterStyles }, children: jsxs("div", { css: {
-                border: "1px solid #cc2222",
+                border: `1px solid ${tokens.colorStatusDangerBorder1}`,
                 padding: "10px",
                 margin: "20px",
             }, children: [jsx("h3", { children: "Internal Compiler error" }), jsx("div", { children: "File issue at https://github.com/microsoft/typespec" }), jsx("hr", {}), jsx("div", { children: error.stack })] }) }));
@@ -318,25 +307,24 @@ const DropdownStyle = css({
 
 const OutputTabs = ({ tabs, selected, onSelect }) => {
     const [leftTabs, rightTabs] = chunk(tabs, (x) => x.align === "left");
-    return (jsxs("div", { css: { display: "flex", borderBottom: "1px solid #c5c5c5" }, children: [leftTabs.map((tab) => {
+    return (jsxs("div", { css: { display: "flex", borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }, children: [leftTabs.map((tab) => {
                 return (jsx(OutputTab, { tab: tab, selected: selected === tab.id, onSelect: onSelect }, tab.id));
-            }), jsx("span", { css: { flex: 1, borderRight: "1px solid #ccc" } }), rightTabs.map((tab) => {
+            }), jsx("span", { css: { flex: 1, borderRight: `1px solid ${tokens.colorNeutralStroke1}` } }), rightTabs.map((tab) => {
                 return (jsx(OutputTab, { tab: tab, selected: selected === tab.id, onSelect: onSelect }, tab.id));
             })] }));
 };
 const OutputTab = ({ tab, selected, onSelect }) => {
-    return (jsx("a", { css: [
+    return (jsx("div", { tabIndex: 0, css: [
             {
                 height: "26px",
                 padding: "0 5px",
-                borderRight: "1px solid #ccc",
+                borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
                 borderTop: "none",
                 borderBottom: "none",
-                color: "#000",
                 textDecoration: "none",
                 cursor: "pointer",
             },
-            selected ? { fontWeight: "bold", backgroundColor: "#eee" } : {},
+            selected ? { fontWeight: "bold", backgroundColor: tokens.colorNeutralBackground5 } : {},
         ], onClick: () => onSelect(tab.id), children: tab.name }));
 };
 function chunk(items, condition) {
@@ -365,11 +353,12 @@ const TypeSpecEditor = ({ actions, options, ...other }) => {
     };
     return jsx(Editor, { actions: actions, options: resolvedOptions, ...other });
 };
-const OutputEditor = ({ filename, value, }) => {
+const OutputEditor = ({ filename, value, editorOptions }) => {
     if (filename === "") {
         return null;
     }
     const options = {
+        ...editorOptions,
         readOnly: true,
         automaticLayout: true,
         minimap: {
@@ -381,16 +370,16 @@ const OutputEditor = ({ filename, value, }) => {
     return jsx(Editor, { model: model, options: options });
 };
 
-const OutputView = ({ compilationState, viewers }) => {
+const OutputView = ({ compilationState, viewers, editorOptions, }) => {
     if (compilationState === undefined) {
         return jsx(Fragment, {});
     }
     if ("internalCompilerError" in compilationState) {
         return jsx(InternalCompilerError, { error: compilationState.internalCompilerError });
     }
-    return jsx(OutputViewInternal, { compilationResult: compilationState, viewers: viewers });
+    return (jsx(OutputViewInternal, { compilationResult: compilationState, viewers: viewers, editorOptions: editorOptions }));
 };
-const OutputViewInternal = ({ compilationResult, viewers }) => {
+const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
     const { program, outputFiles } = compilationResult;
     const [viewSelection, setViewSelection] = useState({
         type: "file",
@@ -439,15 +428,17 @@ const OutputViewInternal = ({ compilationResult, viewers }) => {
             void loadOutputFile(tabId);
         }
     }, []);
-    return (jsxs(Fragment, { children: [jsx(OutputTabs, { tabs: tabs, selected: viewSelection.type === "file" ? viewSelection.filename : viewSelection.type, onSelect: handleTabSelection }), jsx("div", { className: "output-content", css: { width: "100%", height: "100%", overflow: "hidden" }, children: jsx(OutputContent, { viewSelection: viewSelection, program: program, viewers: viewers }) })] }));
+    return (jsxs(Fragment, { children: [jsx(OutputTabs, { tabs: tabs, selected: viewSelection.type === "file" ? viewSelection.filename : viewSelection.type, onSelect: handleTabSelection }), jsx("div", { className: "output-content", css: { width: "100%", height: "100%", overflow: "hidden" }, children: jsx(OutputContent, { viewSelection: viewSelection, editorOptions: editorOptions, program: program, viewers: viewers }) })] }));
 };
-const rawFileViewer = {
-    key: "raw",
-    label: "File",
-    render: ({ filename, content }) => (jsx(OutputEditor, { filename: filename, value: content })),
-};
-const OutputContent = ({ viewSelection, program, viewers, }) => {
-    const resolvedViewers = useMemo(() => [rawFileViewer, ...(viewers !== null && viewers !== void 0 ? viewers : [])], [viewers]);
+function getRawFileViewer(editorOptions) {
+    return {
+        key: "raw",
+        label: "File",
+        render: ({ filename, content }) => (jsx(OutputEditor, { editorOptions: editorOptions, filename: filename, value: content })),
+    };
+}
+const OutputContent = ({ viewSelection, program, viewers, editorOptions, }) => {
+    const resolvedViewers = useMemo(() => [getRawFileViewer(editorOptions), ...(viewers !== null && viewers !== void 0 ? viewers : [])], [viewers]);
     switch (viewSelection.type) {
         case "file":
             return (jsx(FileOutput, { filename: viewSelection.filename, content: viewSelection.content, viewers: resolvedViewers }));
@@ -465,8 +456,8 @@ const ErrorTabLabel = ({ diagnostics }) => {
     return (jsxs("div", { children: ["Errors ", errorCount > 0 ? jsx("span", { css: ErrorTabCountStyles, children: errorCount }) : ""] }));
 };
 const ErrorTabCountStyles = css({
-    backgroundColor: "#cc2222",
-    color: "#f5f5f5",
+    backgroundColor: tokens.colorStatusDangerBackground3,
+    color: tokens.colorNeutralForegroundOnBrand,
     padding: "0 5px",
     borderRadius: "20px",
 });
@@ -732,7 +723,6 @@ const Playground = (props) => {
     const onTypeSpecEditorMount = useCallback(({ editor }) => {
         editorRef.current = editor;
     }, []);
-    const libraries = useMemo(() => Object.values(host.libraries), [host.libraries]);
     return (jsxs("div", { css: {
             display: "grid",
             gridTemplateColumns: "1",
@@ -742,7 +732,7 @@ const Playground = (props) => {
             height: "100%",
             overflow: "hidden",
             fontFamily: `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`,
-        }, children: [jsxs(SplitPane, { initialSizes: ["50%", "50%"], css: { gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }, children: [jsxs(Pane, { children: [jsx(EditorCommandBar, { libraries: libraries, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, formatCode: formatCode, newIssue: ((_b = props === null || props === void 0 ? void 0 : props.links) === null || _b === void 0 ? void 0 : _b.githubIssueUrl) ? newIssue : undefined, documentationUrl: (_c = props.links) === null || _c === void 0 ? void 0 : _c.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, viewers: (_d = props.emitterViewers) === null || _d === void 0 ? void 0 : _d[selectedEmitter] }) })] }), jsx(Footer, {})] }));
+        }, children: [jsxs(SplitPane, { initialSizes: ["50%", "50%"], css: { gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }, children: [jsxs(Pane, { children: [jsx(EditorCommandBar, { host: host, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, formatCode: formatCode, newIssue: ((_b = props === null || props === void 0 ? void 0 : props.links) === null || _b === void 0 ? void 0 : _b.githubIssueUrl) ? newIssue : undefined, documentationUrl: (_c = props.links) === null || _c === void 0 ? void 0 : _c.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, options: props.editorOptions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, editorOptions: props.editorOptions, viewers: (_d = props.emitterViewers) === null || _d === void 0 ? void 0 : _d[selectedEmitter] }) })] }), jsx(Footer, { host: host })] }));
 };
 const outputDir = "./tsp-output";
 async function compile(host, content, selectedEmitter, options) {
@@ -803,40 +793,60 @@ async function emptyOutputDir(host) {
     }
 }
 
-async function createReactPlayground(config) {
-    const host = await createBrowserHost(config.libraries, config.importConfig);
-    await registerMonacoLanguage(host);
-    registerMonacoDefaultWorkers();
-    const stateStorage = createStandalonePlaygroundStateStorage();
-    const initialState = stateStorage.load();
-    const App = () => {
-        const toasterId = useId$1();
-        const { dispatchToast } = useToastController(toasterId);
-        const options = useMemo(() => {
-            var _a;
-            return ({
-                ...config,
-                host,
-                libraries: config.libraries,
-                defaultContent: initialState.content,
-                defaultEmitter: (_a = initialState.emitter) !== null && _a !== void 0 ? _a : config.defaultEmitter,
-                defaultCompilerOptions: initialState.options,
-                defaultSampleName: initialState.sampleName,
-                onSave: (value) => {
-                    stateStorage.save(value);
-                    void navigator.clipboard.writeText(window.location.toString());
-                    dispatchToast(jsxs(Toast, { children: [jsx(ToastTitle, { children: "Saved!" }), jsx(ToastBody, { children: "Playground link has been copied to the clipboard." })] }), { intent: "success" });
-                },
-            });
-        }, [dispatchToast]);
-        return (jsxs(FluentProvider, { theme: webLightTheme, children: [jsx(Toaster, { toasterId: toasterId }), jsx("div", { css: { height: "100vh" }, children: jsx(Playground, { ...options }) })] }));
+function useStandalonePlaygroundContext(config) {
+    const [context, setContext] = useState();
+    useEffect(() => {
+        const load = async () => {
+            const host = await createBrowserHost(config.libraries, config.importConfig);
+            await registerMonacoLanguage(host);
+            const stateStorage = createStandalonePlaygroundStateStorage();
+            const initialState = stateStorage.load();
+            setContext({ host, initialState, stateStorage });
+        };
+        void load();
+    }, []);
+    return context;
+}
+const StandalonePlayground = (config) => {
+    const context = useStandalonePlaygroundContext(config);
+    const toasterId = useId$1();
+    const { dispatchToast } = useToastController(toasterId);
+    const onSave = useCallback((value) => {
+        if (!context) {
+            return;
+        }
+        context.stateStorage.save(value);
+        void navigator.clipboard.writeText(window.location.toString());
+        dispatchToast(jsxs(Toast, { children: [jsx(ToastTitle, { children: "Saved!" }), jsx(ToastBody, { children: "Playground link has been copied to the clipboard." })] }), { intent: "success" });
+    }, [dispatchToast, context]);
+    const fixedOptions = useMemo(() => {
+        var _a;
+        return context && {
+            host: context.host,
+            libraries: config.libraries,
+            defaultContent: context.initialState.content,
+            defaultEmitter: (_a = context.initialState.emitter) !== null && _a !== void 0 ? _a : config.defaultEmitter,
+            defaultCompilerOptions: context.initialState.options,
+            defaultSampleName: context.initialState.sampleName,
+        };
+    }, [context]);
+    if (context === undefined || fixedOptions === undefined) {
+        return jsx(Fragment, {});
+    }
+    const options = {
+        ...config,
+        ...fixedOptions,
+        onSave,
     };
-    return jsx(App, {});
+    return (jsxs(Fragment, { children: [jsx(Toaster, { toasterId: toasterId }), options && jsx(Playground, { ...options })] }));
+};
+async function createReactPlayground(config) {
+    return jsx(StandalonePlayground, { ...config });
 }
 async function renderReactPlayground(config) {
     const app = await createReactPlayground(config);
     const root = createRoot(document.getElementById("root"));
-    root.render(app);
+    root.render(jsx(FluentProvider, { theme: webLightTheme, style: { height: "100vh" }, children: app }));
 }
 function createStandalonePlaygroundStateStorage() {
     const stateStorage = createUrlStateStorage({
@@ -863,5 +873,5 @@ function createStandalonePlaygroundStateStorage() {
     };
 }
 
-export { Playground, createReactPlayground, renderReactPlayground };
+export { Playground, StandalonePlayground, createReactPlayground, renderReactPlayground };
 //# sourceMappingURL=index.js.map