@typespec/playground 0.1.0-alpha.3 → 0.1.0-alpha.4-dev.14

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,4 +1,4 @@
-export { c as createBrowserHost, b as createUrlStateStorage, r as registerMonacoDefaultWorkers, a as registerMonacoLanguage } from './state-storage-ad8a9d39.js';
+export { c as createBrowserHost, b as createUrlStateStorage, r as registerMonacoDefaultWorkers, a as registerMonacoLanguage } from './state-storage-e765354d.js';
 import '@typespec/compiler';
 import 'monaco-editor';
 import 'vscode-languageserver';

package/dist/react/index.js

@@ -3,13 +3,13 @@ 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 { 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 { i as importLibrary, g as getMarkerLocation, c as createBrowserHost, a as registerMonacoLanguage, r as registerMonacoDefaultWorkers, b as createUrlStateStorage } from '../state-storage-e765354d.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';
 
@@ -123,7 +123,7 @@ function useTypeSpecLibrary(name) {
     const [lib, setLib] = useState();
     useEffect(() => {
         setLib(undefined);
-        import(/* @vite-ignore */ name)
+        importLibrary(name, {})
             .then((module) => {
             if (module.$lib === undefined) {
                 // eslint-disable-next-line no-console
@@ -142,7 +142,7 @@ function useTypeSpecLibrary(name) {
 const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, newIssue, libraries, 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] }) }));
+    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: 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 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 +159,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 : "vs");
+    }, [options.theme]);
     useEffect(() => {
         const disposables = [];
         for (const command of actions !== null && actions !== void 0 ? actions : []) {
@@ -183,7 +187,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 +272,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 +323,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 +369,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 +386,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 +444,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 }) })] }));
-};
-const rawFileViewer = {
-    key: "raw",
-    label: "File",
-    render: ({ filename, content }) => (jsx(OutputEditor, { filename: filename, value: content })),
+    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 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 +472,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",
 });
@@ -742,7 +749,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, { 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, 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 +810,61 @@ 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);
+            registerMonacoDefaultWorkers();
+            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 +891,5 @@ function createStandalonePlaygroundStateStorage() {
     };
 }
 
-export { Playground, createReactPlayground, renderReactPlayground };
+export { Playground, StandalonePlayground, createReactPlayground, renderReactPlayground };
 //# sourceMappingURL=index.js.map