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

package/dist/index.css

@@ -1,3 +1,22 @@
+.footer-module_footer__QqUEE {
+  grid-area: footer;
+  display: flex;
+  font-size: 14px;
+
+  background-color: #007acc;
+}
+
+.footer-module_footer-item__7rhbZ {
+  text-decoration: none;
+  color: #fefefe;
+  border-right: 1px solid #d5d5d5;
+  padding: 0 5px;
+}
+
+.footer-module_footer-item__7rhbZ:hover {
+  background-color: #063a5c;
+}
+
 .split-pane-module_split-pane__XCqR8 {
   flex: 1;
   height: 100%;
@@ -56,3 +75,12 @@
   width: 100%;
   overflow: hidden;
 }
+
+.footer-version-item-module_version-item__pjuvV {
+  padding: 0;
+}
+.footer-version-item-module_button__70iqf {
+  cursor: pointer;
+  height: 100%;
+  padding: 0 5px;
+}

package/dist/index.js

@@ -1,4 +1,4 @@
-export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-1ccb8536.js';
+export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-2a373027.js';
 import '@typespec/compiler';
 import 'monaco-editor';
 import 'vscode-languageserver';

package/dist/react/index.js

@@ -1,18 +1,67 @@
+import { createContext, useContext, memo, useCallback, useMemo, useRef, useEffect, useState, useId as useId$1 } from 'react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Link, tokens, Toolbar, Tooltip, ToolbarButton, Dialog, DialogTrigger, DialogSurface, DialogBody, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import debounce from 'debounce';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
-import { useCallback, useMemo, useRef, useEffect, useState, useId as useId$1 } from 'react';
 import { CompletionItemTag } from 'vscode-languageserver';
-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 { g as getMarkerLocation, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-2a373027.js';
 import { Save16Regular, Broom16Filled, Settings24Regular, Bug16Regular } from '@fluentui/react-icons';
 import { css } from '@emotion/react';
-import { TypeSpecProgramViewer } from '@typespec/html-program-viewer';
+import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { createRoot } from 'react-dom/client';
 import '@typespec/compiler';
 import 'vscode-languageserver-textdocument';
 import 'lzutf8';
 
+const PlaygroundContext = createContext(undefined);
+const PlaygroundContextProvider = PlaygroundContext.Provider;
+function usePlaygroundContext() {
+    const context = useContext(PlaygroundContext);
+    if (context === undefined) {
+        throw new Error("usePlaygroundContext must be used within a PlaygroundContextProvider");
+    }
+    return context;
+}
+
+var style$2 = {"footer":"footer-module_footer__QqUEE","footer-item":"footer-module_footer-item__7rhbZ"};
+
+const FooterItem = ({ children, link, className }) => {
+    const resolvedClassName = mergeClasses(style$2["footer-item"], className);
+    return link ? (jsx("a", { className: resolvedClassName, href: link, target: "_blank", children: children })) : (jsx("div", { className: resolvedClassName, children: children }));
+};
+
+var style$1 = {"version-item":"footer-version-item-module_version-item__pjuvV","button":"footer-version-item-module_button__70iqf"};
+
+const FooterVersionItem = memo(({ versionSelector }) => {
+    var _a;
+    const { host } = usePlaygroundContext();
+    const latest = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.latest;
+    const selected = (_a = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.selected) !== null && _a !== void 0 ? _a : host.compiler.MANIFEST.version;
+    return (jsx(FooterItem, { className: style$1["version-item"], children: jsxs(Popover, { children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsxs("div", { className: style$1["button"], children: [jsx("span", { children: "Version " }), jsx("span", { children: selected }), jsx("span", { children: latest ? (latest === selected ? " (latest)" : " (old)") : "" })] }) }), jsx(PopoverSurface, { children: jsx(VersionsPopup, { versionSelector: versionSelector }) })] }) }));
+});
+const VersionsPopup = memo(({ versionSelector }) => {
+    const { host } = usePlaygroundContext();
+    return (jsxs("div", { style: { maxWidth: "400px" }, children: [versionSelector && jsx(VersionSelector, { ...versionSelector }), jsxs("div", { children: [jsx(Title3, { children: "Loaded libraries" }), jsxs(Table, { size: "small", children: [jsx(TableHeader, { children: jsx(TableRow, { children: columns.map((column) => (jsx(TableHeaderCell, { children: column.label }, column.columnKey))) }) }), jsx(TableBody, { children: Object.values(host.libraries).map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: item.name }), jsx(TableCell, { children: item.packageJson.version })] }, item.name))) })] })] })] }));
+});
+const columns = [
+    { columnKey: "name", label: "Library" },
+    { columnKey: "version", label: "Version" },
+];
+const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
+    const changeVersion = useCallback((ev, data) => {
+        onChange(versions.find((x) => x.name === data.value));
+    }, [versions, onChange]);
+    return (jsxs("div", { children: [jsx(Title3, { children: "Select release" }), jsx(Select, { value: selected, onChange: changeVersion, children: versions.map((version) => (jsxs("option", { value: version.name, children: [version.label, " ", version.name === latest ? "(latest)" : ""] }, version.name))) })] }));
+});
+
+const Footer = ({ className, children }) => {
+    return jsx("div", { className: mergeClasses(style$2.footer, className), children: children });
+};
+
+const DefaultFooter = () => {
+    return (jsx(Footer, { children: jsx(FooterVersionItem, {}) }));
+};
+
 const EmitterDropdown = ({ emitters, onSelectedEmitterChange, selectedEmitter, }) => {
     const options = emitters.map((emitterName) => {
         return jsx("option", { children: emitterName }, emitterName);
@@ -171,33 +220,6 @@ function useMonacoModel(uri, language) {
     }, [uri, language]);
 }
 
-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: [
-            {
-                gridArea: "footer",
-                gridRow: "3",
-                backgroundColor: "#007acc",
-                display: "flex",
-                fontSize: "14px",
-            },
-            MANIFEST.pr ? { backgroundColor: "#ce662a" } : {},
-        ], children: [prItem, jsxs(FooterItem, { children: [jsx("span", { children: "TypeSpec Version " }), jsx("span", { children: MANIFEST.version })] }), jsxs(FooterItem, { link: `https://github.com/microsoft/typespec/commit/${MANIFEST.commit}`, children: [jsx("span", { children: "Commit " }), jsx("span", { children: MANIFEST.commit.slice(0, 6) })] })] }));
-};
-const FooterItem = ({ children, link }) => {
-    return link ? (jsx("a", { css: FooterItemStyles, href: link, target: "_blank", children: children })) : (jsx("div", { css: FooterItemStyles, children: children }));
-};
-const FooterItemStyles = css({
-    textDecoration: "none",
-    color: "#fefefe",
-    borderRight: "1px solid #d5d5d5",
-    padding: "0 5px",
-    "&:hover": {
-        backgroundColor: "#063a5c",
-    },
-});
-
 /**
  * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
  * text box string.
@@ -448,7 +470,7 @@ const OutputContent = ({ viewSelection, program, viewers, editorOptions, }) => {
             return (jsx("div", { css: {
                     height: "100%",
                     overflow: "scroll",
-                }, children: program && jsx(TypeSpecProgramViewer, { program: program }) }));
+                }, children: program && jsx(TypeGraphViewer, { program: program }) }));
     }
 };
 const ErrorTabLabel = ({ diagnostics }) => {
@@ -461,6 +483,19 @@ const ErrorTabCountStyles = css({
     padding: "0 5px",
     borderRadius: "20px",
 });
+const TypeGraphViewer = ({ program }) => {
+    return (jsx(ColorProvider, { colors: TypeGraphColors, children: jsx(TypeSpecProgramViewer, { program: program }) }));
+};
+const TypeGraphColors = {
+    background: tokens.colorNeutralBackground1,
+    typeKind: tokens.colorPaletteBerryForeground2,
+    typeName: tokens.colorNeutralForeground2,
+    dataKey: tokens.colorNeutralForeground2,
+    ref: tokens.colorBrandForeground1,
+    literal: tokens.colorPaletteLightGreenForeground2,
+    indentationGuide: tokens.colorNeutralForeground4,
+    property: tokens.colorPaletteMarigoldForeground2,
+};
 
 function Pane({ children, ...props }) {
     return jsx("div", { ...props, children: children });
@@ -622,7 +657,7 @@ function assertsSize(size, sum, defaultValue = Infinity) {
 }
 
 const Playground = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { host, onSave } = props;
     const editorRef = useRef(undefined);
     const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(props.emitter, props.defaultEmitter, props.onEmitterChange);
@@ -723,16 +758,14 @@ const Playground = (props) => {
     const onTypeSpecEditorMount = useCallback(({ editor }) => {
         editorRef.current = editor;
     }, []);
-    return (jsxs("div", { css: {
-            display: "grid",
-            gridTemplateColumns: "1",
-            gridTemplateRows: "1fr auto",
-            gridTemplateAreas: '"typespeceditor"\n    "footer"',
-            width: "100%",
-            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, { 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 })] }));
+    return (jsx(PlaygroundContextProvider, { value: { host }, children: jsxs("div", { css: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                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, { 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] }) })] }), (_e = props.footer) !== null && _e !== void 0 ? _e : jsx(DefaultFooter, {})] }) }));
 };
 const outputDir = "./tsp-output";
 async function compile(host, content, selectedEmitter, options) {
@@ -873,5 +906,5 @@ function createStandalonePlaygroundStateStorage() {
     };
 }
 
-export { Playground, StandalonePlayground, createReactPlayground, renderReactPlayground };
+export { Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, renderReactPlayground, usePlaygroundContext };
 //# sourceMappingURL=index.js.map