@typespec/playground 0.1.0-alpha.3-dev.7 → 0.1.0-alpha.3-dev.12

package/dist/react/index.js

@@ -0,0 +1,867 @@
+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 { 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 { 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 'vscode-languageserver-textdocument';
+import 'lzutf8';
+
+const EmitterDropdown = ({ emitters, onSelectedEmitterChange, selectedEmitter, }) => {
+    const options = emitters.map((emitterName) => {
+        return jsx("option", { children: emitterName }, emitterName);
+    });
+    const handleSelected = useCallback((evt) => {
+        onSelectedEmitterChange(evt.target.value);
+    }, [onSelectedEmitterChange]);
+    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedEmitter, children: [jsx("option", { value: "", disabled: true, children: "Select emitter..." }), options] }));
+};
+
+const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChange, }) => {
+    const options = Object.keys(samples).map((sample) => {
+        return jsx("option", { children: sample }, sample);
+    });
+    const handleSelected = useCallback((evt) => {
+        if (samples[evt.target.value]) {
+            onSelectedSampleNameChange(evt.target.value);
+        }
+    }, [onSelectedSampleNameChange]);
+    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedSampleName !== null && selectedSampleName !== void 0 ? selectedSampleName : "", children: [jsx("option", { value: "", disabled: true, children: "Select sample..." }), options] }));
+};
+
+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;
+    if (emitterOptionsSchema === undefined) {
+        return jsx(Fragment, { children: "\"No options\"" });
+    }
+    const entries = Object.entries(emitterOptionsSchema);
+    const handleChange = useCallback(({ name, value }) => {
+        optionsChanged({
+            ...options,
+            [library.name]: {
+                ...options[library.name],
+                [name]: value,
+            },
+        });
+    }, [options, optionsChanged]);
+    return (jsx("div", { children: entries.map(([key, value]) => {
+            var _a;
+            return (jsx("div", { css: { margin: "16px 0" }, children: jsx(JsonSchemaPropertyInput, { emitterOptions: (_a = options[library.name]) !== null && _a !== void 0 ? _a : {}, name: key, prop: value, onChange: handleChange }) }, key));
+        }) }));
+};
+const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
+    var _a;
+    const prettyName = useMemo(() => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "), [name]);
+    const inputId = useId("input");
+    const value = (_a = emitterOptions[name]) !== null && _a !== void 0 ? _a : prop.default;
+    const handleChange = useCallback((_, data) => onChange({ name, value: "value" in data ? data.value : data.checked }), [onChange]);
+    switch (prop.type) {
+        case "boolean":
+            return jsx(Switch, { label: prettyName, checked: value, onChange: handleChange });
+        case "string":
+        default:
+            return (jsxs("div", { children: [jsx("div", { children: jsx(Label, { htmlFor: inputId, title: name, children: prettyName }) }), jsx("div", { children: prop.enum ? (jsx(RadioGroup, { layout: "horizontal", id: inputId, value: value, onChange: handleChange, children: prop.enum.map((x) => (jsx(Radio, { value: x, label: x }, x))) })) : (jsx(Input, { id: inputId, value: value, onChange: handleChange })) })] }));
+    }
+};
+
+const LinterForm = ({ libraries, linterRuleSet, onLinterRuleSetChanged, }) => {
+    const rulesets = 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}`);
+    });
+    if (rulesets.length === 0) {
+        return jsx(Fragment, { children: "No ruleset available" });
+    }
+    const handleChange = (ruleSet, checked) => {
+        var _a;
+        const ruleSets = (_a = linterRuleSet.extends) !== null && _a !== void 0 ? _a : [];
+        const updatedRuleSets = checked
+            ? [...ruleSets, ruleSet]
+            : ruleSets.filter((x) => x !== ruleSet);
+        onLinterRuleSetChanged({
+            extends: updatedRuleSets,
+        });
+    };
+    return (jsx(Fragment, { children: rulesets.map((ruleSet) => {
+            var _a;
+            return (jsx(RuleSetCheckbox, { ruleSet: ruleSet, checked: (_a = linterRuleSet.extends) === null || _a === void 0 ? void 0 : _a.includes(ruleSet), onChange: handleChange }, ruleSet));
+        }) }));
+};
+const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
+    const handleChange = useCallback((_, data) => {
+        onChange(ruleSet, !!data.checked);
+    }, [ruleSet, checked, onChange]);
+    return jsx(Checkbox, { label: ruleSet, checked: checked, onChange: handleChange });
+};
+
+const CompilerSettings = ({ selectedEmitter, libraries, options, onOptionsChanged, }) => {
+    var _a, _b;
+    const emitterOptionsChanged = useCallback((emitterOptions) => {
+        onOptionsChanged({
+            ...options,
+            options: emitterOptions,
+        });
+    }, [options]);
+    const library = useTypeSpecLibrary(selectedEmitter);
+    const linterRuleSet = (_a = options.linterRuleSet) !== null && _a !== void 0 ? _a : {};
+    const linterRuleSetChanged = useCallback((linterRuleSet) => {
+        onOptionsChanged({
+            ...options,
+            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 })] }));
+};
+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 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 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" }) }));
+};
+
+const Editor = ({ model, options, actions, onMount }) => {
+    const editorContainerRef = useRef(null);
+    const editorRef = useRef(null);
+    useEffect(() => {
+        editorRef.current = editor.create(editorContainerRef.current, {
+            model,
+            automaticLayout: true,
+            ...options,
+        });
+        onMount === null || onMount === void 0 ? void 0 : onMount({ editor: editorRef.current });
+    }, []);
+    useEffect(() => {
+        const disposables = [];
+        for (const command of actions !== null && actions !== void 0 ? actions : []) {
+            disposables.push(editorRef.current.addAction(command));
+        }
+        return () => {
+            disposables.forEach((x) => x.dispose());
+        };
+    }, [actions]);
+    useEffect(() => {
+        if (editorRef.current) {
+            editorRef.current.setModel(model);
+        }
+    }, [model]);
+    return (jsx("div", { className: "monaco-editor-container", css: { width: "100%", height: "100%", overflow: "hidden" }, ref: editorContainerRef }));
+};
+function useMonacoModel(uri, language) {
+    return useMemo(() => {
+        var _a;
+        const monacoUri = Uri.parse(uri);
+        return (_a = editor.getModel(monacoUri)) !== null && _a !== void 0 ? _a : editor.createModel("", language, monacoUri);
+    }, [uri, language]);
+}
+
+const Footer = () => {
+    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.
+ * @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
+ * and the internal state will be updated to reflect it.
+ * @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
+ * @returns An array of the current value and an updater callback. Like `React.useState`, the updater
+ * callback always has the same identity, and it can take either a new value, or a function which
+ * is passed the previous value and returns the new value.
+ * @see https://reactjs.org/docs/uncontrolled-components.html
+ */
+function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
+    const [value, setValue] = useState(defaultUncontrolledValue);
+    const isControlled = useMemo(() => controlledValue !== undefined, []);
+    const currentValue = isControlled ? controlledValue : value;
+    // Duplicate the current value and onChange in refs so they're accessible from
+    // setValueOrCallOnChange without creating a new callback every time
+    const valueRef = useRef(currentValue);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        valueRef.current = currentValue;
+        onChangeRef.current = onChange;
+    });
+    // To match the behavior of the setter returned by React.useState, this callback's identity
+    // should never change. This means it MUST NOT directly reference variables that can change.
+    const setValueOrCallOnChange = useMemo(() => (update) => {
+        // Assuming here that TValue is not a function, because a controllable value will typically
+        // be something a user can enter as input
+        const newValue = typeof update === "function" ? update(valueRef.current) : update;
+        if (onChangeRef.current) {
+            onChangeRef.current(newValue);
+        }
+        if (!isControlled) {
+            setValue(newValue);
+        }
+    }, []);
+    return [currentValue, setValueOrCallOnChange];
+}
+function useAsyncMemo(callback, defaultValue, deps) {
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => {
+        callback()
+            .then(setValue)
+            // eslint-disable-next-line no-console
+            .catch(() => console.error("Failed to load async memo"));
+    }, deps);
+    return value;
+}
+
+const DiagnosticList = ({ diagnostics }) => {
+    if (diagnostics.length === 0) {
+        return jsx("div", { className: "center", children: "No errors" });
+    }
+    return (jsx("div", { css: { height: "100%", overflow: "auto" }, children: diagnostics.map((x, i) => {
+            return jsx(DiagnosticItem, { diagnostic: x }, i);
+        }) }));
+};
+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 })] }));
+};
+const errorColor = css({ color: "#cc2222" });
+const warningColor = css({ color: "orange" });
+
+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",
+                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 })] }) }));
+};
+const CenterStyles = css({
+    display: "flex",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+});
+
+/**
+ * Display a file output using different viewers.
+ */
+const FileOutput = ({ filename, content, viewers }) => {
+    if (viewers.length === 0) {
+        return jsx(Fragment, { children: "No viewers" });
+    }
+    else if (viewers.length === 1) {
+        return viewers[0].render({ filename, content });
+    }
+    const [selected, setSelected] = useState(viewers[0].key);
+    const handleSelected = useCallback((_, data) => {
+        setSelected(data.value);
+    }, [selected]);
+    const selectedRender = useMemo(() => {
+        var _a;
+        return (_a = viewers.find((x) => x.key === selected)) === null || _a === void 0 ? void 0 : _a.render;
+    }, [selected, viewers]);
+    return (jsxs("div", { css: { width: "100%", height: "100%", overflow: "hidden" }, children: [jsx(Select, { value: selected, onChange: handleSelected, css: DropdownStyle, children: viewers.map(({ key, label }) => (jsx("option", { value: key, children: label }, key))) }), selectedRender && selectedRender({ filename, content })] }));
+};
+const DropdownStyle = css({
+    margin: "0.5rem 1.5rem",
+    position: "absolute",
+    "z-index": 1,
+    right: 0,
+});
+
+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 (jsx(OutputTab, { tab: tab, selected: selected === tab.id, onSelect: onSelect }, tab.id));
+            }), jsx("span", { css: { flex: 1, borderRight: "1px solid #ccc" } }), 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: [
+            {
+                height: "26px",
+                padding: "0 5px",
+                borderRight: "1px solid #ccc",
+                borderTop: "none",
+                borderBottom: "none",
+                color: "#000",
+                textDecoration: "none",
+                cursor: "pointer",
+            },
+            selected ? { fontWeight: "bold", backgroundColor: "#eee" } : {},
+        ], onClick: () => onSelect(tab.id), children: tab.name }));
+};
+function chunk(items, condition) {
+    const match = [];
+    const unMatch = [];
+    for (const item of items) {
+        if (condition(item)) {
+            match.push(item);
+        }
+        else {
+            unMatch.push(item);
+        }
+    }
+    return [match, unMatch];
+}
+
+const TypeSpecEditor = ({ actions, options, ...other }) => {
+    const resolvedOptions = {
+        "semanticHighlighting.enabled": true,
+        automaticLayout: true,
+        tabSize: 2,
+        minimap: {
+            enabled: false,
+        },
+        ...options,
+    };
+    return jsx(Editor, { actions: actions, options: resolvedOptions, ...other });
+};
+const OutputEditor = ({ filename, value, }) => {
+    if (filename === "") {
+        return null;
+    }
+    const options = {
+        readOnly: true,
+        automaticLayout: true,
+        minimap: {
+            enabled: false,
+        },
+    };
+    const model = useMonacoModel(filename);
+    model.setValue(value);
+    return jsx(Editor, { model: model, options: options });
+};
+
+const OutputView = ({ compilationState, viewers }) => {
+    if (compilationState === undefined) {
+        return jsx(Fragment, {});
+    }
+    if ("internalCompilerError" in compilationState) {
+        return jsx(InternalCompilerError, { error: compilationState.internalCompilerError });
+    }
+    return jsx(OutputViewInternal, { compilationResult: compilationState, viewers: viewers });
+};
+const OutputViewInternal = ({ compilationResult, viewers }) => {
+    const { program, outputFiles } = compilationResult;
+    const [viewSelection, setViewSelection] = useState({
+        type: "file",
+        filename: "",
+        content: "",
+    });
+    useEffect(() => {
+        if (viewSelection.type === "file") {
+            if (outputFiles.length > 0) {
+                const fileStillThere = outputFiles.find((x) => x === viewSelection.filename);
+                void loadOutputFile(fileStillThere !== null && fileStillThere !== void 0 ? fileStillThere : outputFiles[0]);
+            }
+            else {
+                setViewSelection({ type: "file", filename: viewSelection.filename, content: "" });
+            }
+        }
+    }, [program, outputFiles]);
+    async function loadOutputFile(path) {
+        const contents = await program.host.readFile("./tsp-output/" + path);
+        setViewSelection({ type: "file", filename: path, content: contents.text });
+    }
+    const diagnostics = program.diagnostics;
+    const tabs = useMemo(() => {
+        return [
+            ...outputFiles.map((x) => ({
+                align: "left",
+                name: x,
+                id: x,
+            })),
+            { id: "type-graph", name: "Type Graph", align: "right" },
+            {
+                id: "errors",
+                name: jsx(ErrorTabLabel, { diagnostics: diagnostics }),
+                align: "right",
+            },
+        ];
+    }, [outputFiles, diagnostics]);
+    const handleTabSelection = useCallback((tabId) => {
+        if (tabId === "type-graph") {
+            setViewSelection({ type: "type-graph" });
+        }
+        else if (tabId === "errors") {
+            setViewSelection({ type: "errors" });
+        }
+        else {
+            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 })),
+};
+const OutputContent = ({ viewSelection, program, viewers, }) => {
+    const resolvedViewers = useMemo(() => [rawFileViewer, ...(viewers !== null && viewers !== void 0 ? viewers : [])], [viewers]);
+    switch (viewSelection.type) {
+        case "file":
+            return (jsx(FileOutput, { filename: viewSelection.filename, content: viewSelection.content, viewers: resolvedViewers }));
+        case "errors":
+            return jsx(ErrorTab, { diagnostics: program === null || program === void 0 ? void 0 : program.diagnostics });
+        default:
+            return (jsx("div", { css: {
+                    height: "100%",
+                    overflow: "scroll",
+                }, children: program && jsx(TypeSpecProgramViewer, { program: program }) }));
+    }
+};
+const ErrorTabLabel = ({ diagnostics }) => {
+    const errorCount = diagnostics ? diagnostics.length : 0;
+    return (jsxs("div", { children: ["Errors ", errorCount > 0 ? jsx("span", { css: ErrorTabCountStyles, children: errorCount }) : ""] }));
+};
+const ErrorTabCountStyles = css({
+    backgroundColor: "#cc2222",
+    color: "#f5f5f5",
+    padding: "0 5px",
+    borderRadius: "20px",
+});
+
+function Pane({ children, ...props }) {
+    return jsx("div", { ...props, children: children });
+}
+
+var style = {"split-pane":"split-pane-module_split-pane__XCqR8","split-disabled":"split-pane-module_split-disabled__fZ0Sg","split-pane-dragging":"split-pane-module_split-pane-dragging__mQJnZ","react-split-vertical":"split-pane-module_react-split-vertical__WTUQ1","react-split-horizontal":"split-pane-module_react-split-horizontal__Fpls-","sash":"split-pane-module_sash__hNWH6","sash-disabled":"split-pane-module_sash-disabled__z6uCV","sash-vertical":"split-pane-module_sash-vertical__S8HbH","sash-horizontal":"split-pane-module_sash-horizontal__BTUaN","sash-content":"split-pane-module_sash-content__DLAt4","sash-content-dragging":"split-pane-module_sash-content-dragging__NkKQP","pane":"split-pane-module_pane__m1zQB"};
+
+const SashContent = ({ className, children, dragging, ...others }) => {
+    return (jsx("div", { className: mergeClasses(style["sash-content"], dragging && style["sash-content-dragging"], className), ...others, children: children }));
+};
+
+const Sash = ({ className, render, onDragStart, onDragging, onDragEnd, onReset, ...others }) => {
+    const [draging, setDrag] = useState(false);
+    const handleMouseMove = (e) => {
+        onDragging(e);
+    };
+    const handleMouseUp = (e) => {
+        setDrag(false);
+        onDragEnd(e);
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+    };
+    return (jsx("div", { className: mergeClasses(style["sash"], className), onMouseDown: (e) => {
+            setDrag(true);
+            onDragStart(e);
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+        }, onDoubleClick: onReset, ...others, children: render(draging) }));
+};
+
+const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, allowResize = true, split = "vertical", className: wrapClassName, sashRender = (_, active) => jsx(SashContent, { dragging: active }), resizerSize = 4, performanceMode = false, onChange = () => null, onDragStart = () => null, onDragEnd = () => null, ...others }) => {
+    var _a;
+    const [resolvedPropSize, updateSizes] = useControllableValue(propSizes, defaultSizes, onChange);
+    const axis = useRef({ x: 0, y: 0 });
+    const wrapper = useRef(null);
+    const cacheSizes = useRef({ sizes: [], sashPosSizes: [] });
+    const [wrapperRect, setWrapperRect] = useState({});
+    const [isDragging, setDragging] = useState(false);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            var _a, _b;
+            setWrapperRect((_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : {});
+        });
+        resizeObserver.observe(wrapper.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const { sizeName, splitPos, splitAxis } = useMemo(() => ({
+        sizeName: split === "vertical" ? "width" : "height",
+        splitPos: split === "vertical" ? "left" : "top",
+        splitAxis: split === "vertical" ? "x" : "y",
+    }), [split]);
+    const wrapSize = (_a = wrapperRect[sizeName]) !== null && _a !== void 0 ? _a : 0;
+    // Get limit sizes via children
+    const paneLimitSizes = useMemo(() => children.map((childNode) => {
+        const limits = [0, Infinity];
+        if ((childNode === null || childNode === void 0 ? void 0 : childNode.type) === Pane) {
+            const { minSize, maxSize } = childNode.props;
+            limits[0] = assertsSize(minSize, wrapSize, 0);
+            limits[1] = assertsSize(maxSize, wrapSize);
+        }
+        return limits;
+    }), [children, wrapSize]);
+    const sizes = useMemo(function () {
+        let count = 0;
+        let curSum = 0;
+        const res = children.map((_, index) => {
+            const size = assertsSize(resolvedPropSize[index], wrapSize);
+            size === Infinity ? count++ : (curSum += size);
+            return size;
+        });
+        // resize or illegal size input,recalculate pane sizes
+        if (curSum > wrapSize || (!count && curSum < wrapSize)) {
+            const cacheNum = (curSum - wrapSize) / curSum;
+            return res.map((size) => {
+                return size === Infinity ? 0 : size - size * cacheNum;
+            });
+        }
+        if (count > 0) {
+            const average = (wrapSize - curSum) / count;
+            return res.map((size) => {
+                return size === Infinity ? average : size;
+            });
+        }
+        return res;
+    }, [...resolvedPropSize, children.length, wrapSize]);
+    const sashPosSizes = useMemo(() => sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]), [...sizes]);
+    const dragStart = useCallback((e) => {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(style["split-disabled"]);
+        axis.current = { x: e.pageX, y: e.pageY };
+        cacheSizes.current = { sizes, sashPosSizes };
+        setDragging(true);
+        onDragStart(e);
+    }, [onDragStart, sizes, sashPosSizes]);
+    const resetPosition = useCallback(() => {
+        updateSizes(defaultSizes);
+    }, [defaultSizes, updateSizes]);
+    const dragEnd = useCallback((e) => {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(style["split-disabled"]);
+        axis.current = { x: e.pageX, y: e.pageY };
+        cacheSizes.current = { sizes, sashPosSizes };
+        setDragging(false);
+        onDragEnd(e);
+    }, [onDragEnd, sizes, sashPosSizes]);
+    const onDragging = useCallback(function (e, i) {
+        const curAxis = { x: e.pageX, y: e.pageY };
+        let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
+        const leftBorder = -Math.min(sizes[i] - paneLimitSizes[i][0], paneLimitSizes[i + 1][1] - sizes[i + 1]);
+        const rightBorder = Math.min(sizes[i + 1] - paneLimitSizes[i + 1][0], paneLimitSizes[i][1] - sizes[i]);
+        if (distanceX < leftBorder) {
+            distanceX = leftBorder;
+        }
+        if (distanceX > rightBorder) {
+            distanceX = rightBorder;
+        }
+        const nextSizes = [...sizes];
+        nextSizes[i] += distanceX;
+        nextSizes[i + 1] -= distanceX;
+        updateSizes(nextSizes);
+    }, [paneLimitSizes, onChange]);
+    const paneFollow = !(performanceMode && isDragging);
+    const paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
+    const panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+    return (jsxs("div", { className: mergeClasses(style["split-pane"], split === "vertical" && style["split-pane-vertical"], split === "horizontal" && style["split-pane-horizontal"], isDragging && style["split-pane-dragging"], wrapClassName), ref: wrapper, ...others, children: [children.map((childNode, childIndex) => {
+                const isPane = childNode.type === Pane;
+                const paneProps = isPane ? childNode.props : {};
+                return (jsx(Pane, { className: mergeClasses(style["pane"], paneProps.className), style: {
+                        ...paneProps.style,
+                        [sizeName]: paneSizes[childIndex],
+                        [splitPos]: panePoses[childIndex],
+                    }, children: isPane ? paneProps.children : childNode }, childIndex));
+            }), sashPosSizes.slice(1, -1).map((posSize, index) => (jsx(Sash, { className: mergeClasses(!allowResize && style["sash-disabled"], split === "vertical" ? style["sash-vertical"] : style["sash-horizontal"]), style: {
+                    [sizeName]: resizerSize,
+                    [splitPos]: posSize - resizerSize / 2,
+                }, render: sashRender.bind(null, index), onReset: resetPosition, onDragStart: dragStart, onDragging: (e) => onDragging(e, index), onDragEnd: dragEnd }, index)))] }));
+};
+/**
+ * Convert size to absolute number or Infinity
+ * SplitPane allows sizes in string and number, but the state sizes only support number,
+ * so convert string and number to number in here
+ * 'auto' -> divide the remaining space equally
+ * 'xxx px' -> xxx
+ * 'xxx%' -> wrapper.size * xxx/100
+ *  xxx -> xxx
+ */
+function assertsSize(size, sum, defaultValue = Infinity) {
+    if (typeof size === "undefined")
+        return defaultValue;
+    if (typeof size === "number")
+        return size;
+    if (size.endsWith("%"))
+        return sum * (+size.replace("%", "") / 100);
+    if (size.endsWith("px"))
+        return +size.replace("px", "");
+    return defaultValue;
+}
+
+const Playground = (props) => {
+    var _a, _b, _c, _d;
+    const { host, onSave } = props;
+    const editorRef = useRef(undefined);
+    const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(props.emitter, props.defaultEmitter, props.onEmitterChange);
+    const [compilerOptions, onCompilerOptionsChange] = useControllableValue(props.compilerOptions, (_a = props.defaultCompilerOptions) !== null && _a !== void 0 ? _a : {}, props.onCompilerOptionsChange);
+    const [selectedSampleName, onSelectedSampleNameChange] = useControllableValue(props.sampleName, props.defaultSampleName, props.onSampleNameChange);
+    const [content, setContent] = useState(props.defaultContent);
+    const isSampleUntouched = useMemo(() => {
+        var _a, _b;
+        return Boolean(selectedSampleName && content === ((_b = (_a = props.samples) === null || _a === void 0 ? void 0 : _a[selectedSampleName]) === null || _b === void 0 ? void 0 : _b.content));
+    }, [content, selectedSampleName, props.samples]);
+    const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
+    const [compilationState, setCompilationState] = useState(undefined);
+    const doCompile = useCallback(async () => {
+        const content = typespecModel.getValue();
+        setContent(content);
+        const typespecCompiler = host.compiler;
+        const state = await compile(host, content, selectedEmitter, compilerOptions);
+        setCompilationState(state);
+        if ("program" in state) {
+            const markers = state.program.diagnostics.map((diag) => ({
+                ...getMarkerLocation(typespecCompiler, diag.target),
+                message: diag.message,
+                severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
+                tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined,
+            }));
+            editor.setModelMarkers(typespecModel, "owner", markers !== null && markers !== void 0 ? markers : []);
+        }
+        else {
+            editor.setModelMarkers(typespecModel, "owner", []);
+        }
+    }, [host, selectedEmitter, compilerOptions, typespecModel, setContent]);
+    const updateTypeSpec = useCallback((value) => {
+        if (typespecModel.getValue() !== value) {
+            typespecModel.setValue(value);
+        }
+    }, [typespecModel]);
+    useEffect(() => {
+        var _a;
+        updateTypeSpec((_a = props.defaultContent) !== null && _a !== void 0 ? _a : "");
+    }, []);
+    useEffect(() => {
+        if (selectedSampleName && props.samples) {
+            const config = props.samples[selectedSampleName];
+            if (config.content) {
+                updateTypeSpec(config.content);
+                if (config.preferredEmitter) {
+                    onSelectedEmitterChange(config.preferredEmitter);
+                }
+                if (config.compilerOptions) {
+                    onCompilerOptionsChange(config.compilerOptions);
+                }
+            }
+        }
+    }, [updateTypeSpec, selectedSampleName]);
+    useEffect(() => {
+        const debouncer = debounce(() => doCompile(), 200);
+        const disposable = typespecModel.onDidChangeContent(debouncer);
+        return () => {
+            debouncer.clear();
+            disposable.dispose();
+        };
+    }, [typespecModel, doCompile]);
+    useEffect(() => {
+        void doCompile();
+    }, [doCompile]);
+    const saveCode = useCallback(() => {
+        if (onSave) {
+            onSave({
+                content: typespecModel.getValue(),
+                emitter: selectedEmitter,
+                options: compilerOptions,
+                sampleName: isSampleUntouched ? selectedSampleName : undefined,
+            });
+        }
+    }, [
+        typespecModel,
+        onSave,
+        selectedEmitter,
+        compilerOptions,
+        selectedSampleName,
+        isSampleUntouched,
+    ]);
+    const formatCode = useCallback(() => {
+        var _a, _b;
+        void ((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getAction("editor.action.formatDocument")) === null || _b === void 0 ? void 0 : _b.run());
+    }, [typespecModel]);
+    const newIssue = useCallback(async () => {
+        var _a;
+        saveCode();
+        const bodyPayload = encodeURIComponent(`\n\n\n[Playground Link](${document.location.href})`);
+        const url = `${(_a = props === null || props === void 0 ? void 0 : props.links) === null || _a === void 0 ? void 0 : _a.githubIssueUrl}?body=${bodyPayload}`;
+        window.open(url, "_blank");
+    }, [saveCode, typespecModel]);
+    const typespecEditorActions = useMemo(() => [
+        // ctrl/cmd+S => save
+        { id: "save", label: "Save", keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS], run: saveCode },
+    ], [saveCode]);
+    const onTypeSpecEditorMount = useCallback(({ editor }) => {
+        editorRef.current = editor;
+    }, []);
+    const libraries = useMemo(() => Object.values(host.libraries), [host.libraries]);
+    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, { 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, {})] }));
+};
+const outputDir = "./tsp-output";
+async function compile(host, content, selectedEmitter, options) {
+    var _a;
+    await host.writeFile("main.tsp", content);
+    await emptyOutputDir(host);
+    try {
+        const typespecCompiler = host.compiler;
+        const program = await typespecCompiler.compile(host, "main.tsp", {
+            ...options,
+            options: {
+                ...options.options,
+                [selectedEmitter]: {
+                    ...(_a = options.options) === null || _a === void 0 ? void 0 : _a[selectedEmitter],
+                    "emitter-output-dir": "tsp-output",
+                },
+            },
+            outputDir: "tsp-output",
+            emit: [selectedEmitter],
+        });
+        const outputFiles = await findOutputFiles(host);
+        return { program, outputFiles };
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("Internal compiler error", error);
+        return { internalCompilerError: error };
+    }
+}
+async function findOutputFiles(host) {
+    const files = [];
+    async function addFiles(dir) {
+        const items = await host.readDir(outputDir + dir);
+        for (const item of items) {
+            const itemPath = `${dir}/${item}`;
+            if ((await host.stat(outputDir + itemPath)).isDirectory()) {
+                await addFiles(itemPath);
+            }
+            else {
+                files.push(dir === "" ? item : `${dir}/${item}`);
+            }
+        }
+    }
+    await addFiles("");
+    return files;
+}
+async function emptyOutputDir(host) {
+    // empty output directory
+    const dirs = await host.readDir("./tsp-output");
+    for (const file of dirs) {
+        const path = "./tsp-output/" + file;
+        const uri = Uri.parse(host.pathToFileURL(path));
+        const model = editor.getModel(uri);
+        if (model) {
+            model.dispose();
+        }
+        await host.rm(path, { recursive: true });
+    }
+}
+
+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 }) })] }));
+    };
+    return jsx(App, {});
+}
+async function renderReactPlayground(config) {
+    const app = await createReactPlayground(config);
+    const root = createRoot(document.getElementById("root"));
+    root.render(app);
+}
+function createStandalonePlaygroundStateStorage() {
+    const stateStorage = createUrlStateStorage({
+        content: {
+            queryParam: "c",
+            compress: "lz-base64",
+        },
+        emitter: {
+            queryParam: "e",
+        },
+        options: {
+            type: "object",
+            queryParam: "options",
+        },
+        sampleName: {
+            queryParam: "sample",
+        },
+    });
+    return {
+        load: stateStorage.load,
+        save(data) {
+            stateStorage.save(data.sampleName ? { sampleName: data.sampleName, options: data.options } : data);
+        },
+    };
+}
+
+export { Playground, createReactPlayground, renderReactPlayground };
+//# sourceMappingURL=index.js.map