@typespec/playground 0.1.0-alpha.0

package/dist/src/react/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/react/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAE7D,eAAO,MAAM,MAAM,EAAE,iBAiCpB,CAAC"}

package/dist/src/react/footer.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import { MANIFEST } from "@typespec/compiler";
+export 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",
+    },
+});
+//# sourceMappingURL=footer.js.map

package/dist/src/react/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/react/footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C,MAAM,CAAC,MAAM,MAAM,GAAsB,GAAG,EAAE;IAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAC3B,MAAC,UAAU,IAAC,IAAI,EAAE,8CAA8C,QAAQ,CAAC,EAAE,EAAE,aAC3E,iCAAgB,EAChB,yBAAO,QAAQ,CAAC,EAAE,GAAQ,IACf,CACd,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,CAAC;IACF,OAAO,CACL,eACE,GAAG,EAAE;YACH;gBACE,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,GAAG;gBACZ,eAAe,EAAE,SAAS;gBAC1B,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;aACjB;YACD,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;SAClD,aAEA,MAAM,EACP,MAAC,UAAU,eACT,+CAA8B,EAC9B,yBAAO,QAAQ,CAAC,OAAO,GAAQ,IACpB,EACb,MAAC,UAAU,IAAC,IAAI,EAAE,gDAAgD,QAAQ,CAAC,MAAM,EAAE,aACjF,qCAAoB,EACpB,yBAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,IAC/B,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,UAAU,GAA0D,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/F,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,YAAG,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,YAClD,QAAQ,GACP,CACL,CAAC,CAAC,CAAC,CACF,cAAK,GAAG,EAAE,gBAAgB,YAAG,QAAQ,GAAO,CAC7C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,CAAC;IAC3B,cAAc,EAAE,MAAM;IACtB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,mBAAmB;IAChC,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE;QACT,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CAAC"}

package/dist/src/react/hooks.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * 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
+ */
+export declare function useControllableValue<TValue>(controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, onChange?: (value: TValue) => void | undefined): readonly [TValue, (update: TValue) => void];
+export declare function useAsyncMemo<T>(callback: () => Promise<T>, defaultValue: T, deps?: React.DependencyList): T;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/src/react/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/react/hooks.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EACzC,eAAe,EAAE,MAAM,GAAG,SAAS,EACnC,wBAAwB,EAAE,MAAM,GAAG,SAAS,EAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,SAAS,GAC7C,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAkC7C;AAED,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAC1B,YAAY,EAAE,CAAC,EACf,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,CAAC,CASH"}

package/dist/src/react/hooks.js

@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+/**
+ * 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
+ */
+export 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];
+}
+export 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;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/src/react/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/react/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,oBAAoB,CAClC,eAAmC,EACnC,wBAA4C,EAC5C,QAA8C;IAE9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,wBAAwB,CAAC,CAAC;IACjF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,KAAK,SAAS,EAAE,EAAE,CAAC,CAAC;IACtE,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC;IAE5D,8EAA8E;IAC9E,oEAAoE;IACpE,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,GAAG,YAAY,CAAC;QAChC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,2FAA2F;IAC3F,4FAA4F;IAC5F,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC,MAAgD,EAAE,EAAE;QACzD,2FAA2F;QAC3F,yCAAyC;QACzC,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAE,MAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAE3F,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;SAC/B;QAED,IAAI,CAAC,YAAY,EAAE;YACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CAAC,YAAY,EAAE,sBAAsB,CAAQ,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,QAA0B,EAC1B,YAAe,EACf,IAA2B;IAE3B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,YAAY,CAAC,CAAC;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE;aACP,IAAI,CAAC,QAAQ,CAAC;YACf,sCAAsC;aACrC,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAC7D,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/src/react/index.d.ts

@@ -0,0 +1,4 @@
+export { Playground, PlaygroundProps } from "./playground.js";
+export { createReactPlayground, renderReactPlayground } from "./standalone.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,cAAc,YAAY,CAAC"}

package/dist/src/react/index.js

@@ -0,0 +1,4 @@
+export { Playground } from "./playground.js";
+export { createReactPlayground, renderReactPlayground } from "./standalone.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/src/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,cAAc,YAAY,CAAC"}

package/dist/src/react/output-tabs.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent, ReactElement } from "react";
+export interface Tab {
+    id: string;
+    name: string | ReactElement<any, any>;
+    align: "left" | "right";
+}
+export interface OutputTabsProps {
+    tabs: Tab[];
+    selected: string;
+    onSelect: (file: string) => void;
+}
+export declare const OutputTabs: FunctionComponent<OutputTabsProps>;
+export interface OutputTabProps {
+    tab: Tab;
+    selected: boolean;
+    onSelect: (id: string) => void;
+}
+export declare const OutputTab: FunctionComponent<OutputTabProps>;
+//# sourceMappingURL=output-tabs.d.ts.map

package/dist/src/react/output-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-tabs.d.ts","sourceRoot":"","sources":["../../../src/react/output-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAExD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AACD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAiBzD,CAAC;AACF,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AACD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAqBvD,CAAC"}

package/dist/src/react/output-tabs.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+export 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));
+            })] }));
+};
+export 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];
+}
+//# sourceMappingURL=output-tabs.js.map

package/dist/src/react/output-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-tabs.js","sourceRoot":"","sources":["../../../src/react/output-tabs.tsx"],"names":[],"mappings":";AAaA,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IACrE,OAAO,CACL,eAAK,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAC7D,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACpB,OAAO,CACL,KAAC,SAAS,IAAc,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,KAAK,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAnE,GAAG,CAAC,EAAE,CAAiE,CACxF,CAAC;YACJ,CAAC,CAAC,EACF,eAAM,GAAG,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAS,EAC7D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACrB,OAAO,CACL,KAAC,SAAS,IAAc,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,KAAK,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAnE,GAAG,CAAC,EAAE,CAAiE,CACxF,CAAC;YACJ,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1F,OAAO,CACL,YACE,GAAG,EAAE;YACH;gBACE,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,OAAO;gBAChB,WAAW,EAAE,gBAAgB;gBAC7B,SAAS,EAAE,MAAM;gBACjB,YAAY,EAAE,MAAM;gBACpB,KAAK,EAAE,MAAM;gBACb,cAAc,EAAE,MAAM;gBACtB,MAAM,EAAE,SAAS;aAClB;YACD,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;SAChE,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,YAE9B,GAAG,CAAC,IAAI,GACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,KAAK,CAAI,KAAU,EAAE,SAA+B;IAC3D,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE;YACnB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAClB;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACpB;KACF;IACD,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC1B,CAAC"}

package/dist/src/react/output-view.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import "swagger-ui/dist/swagger-ui.css";
+import { CompilationState, FileOutputViewer } from "./types.js";
+export interface OutputViewProps {
+    compilationState: CompilationState | undefined;
+    viewers?: FileOutputViewer[];
+}
+export declare const OutputView: FunctionComponent<OutputViewProps>;
+//# sourceMappingURL=output-view.d.ts.map

package/dist/src/react/output-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../src/react/output-view.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AACrF,OAAO,gCAAgC,CAAC;AAIxC,OAAO,EAAE,gBAAgB,EAAiB,gBAAgB,EAAe,MAAM,YAAY,CAAC;AAG5F,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAQzD,CAAC"}

package/dist/src/react/output-view.js

@@ -0,0 +1,99 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import { TypeSpecProgramViewer } from "@typespec/html-program-viewer";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import "swagger-ui/dist/swagger-ui.css";
+import { ErrorTab, InternalCompilerError } from "./error-tab.js";
+import { FileOutput } from "./file-output.js";
+import { OutputTabs } from "./output-tabs.js";
+import { OutputEditor } from "./typespec-editor.js";
+export 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",
+});
+//# sourceMappingURL=output-view.js.map

package/dist/src/react/output-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-view.js","sourceRoot":"","sources":["../../../src/react/output-view.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAqB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAO,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAOpD,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,IAAI,gBAAgB,KAAK,SAAS,EAAE;QAClC,OAAO,mBAAK,CAAC;KACd;IACD,IAAI,uBAAuB,IAAI,gBAAgB,EAAE;QAC/C,OAAO,KAAC,qBAAqB,IAAC,KAAK,EAAE,gBAAgB,CAAC,qBAAqB,GAAI,CAAC;KACjF;IACD,OAAO,KAAC,kBAAkB,IAAC,iBAAiB,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACvF,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAGnB,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,EAAE;IACtC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,iBAAiB,CAAC;IAEnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB;QAChE,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,CAAC,IAAI,KAAK,MAAM,EAAE;YACjC,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC1B,MAAM,cAAc,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAC7E,KAAK,cAAc,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;aACvD;iBAAM;gBACL,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;aACnF;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,KAAK,UAAU,cAAc,CAAC,IAAY;QACxC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;QACrE,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IACxC,MAAM,IAAI,GAAU,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO;YACL,GAAG,WAAW,CAAC,GAAG,CAChB,CAAC,CAAC,EAAO,EAAE,CAAC,CAAC;gBACX,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,CAAC;aACN,CAAC,CACH;YACD,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE;YACxD;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,GAAI;gBACjD,KAAK,EAAE,OAAO;aACf;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/B,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACvD,IAAI,KAAK,KAAK,YAAY,EAAE;YAC1B,gBAAgB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1C;aAAM,IAAI,KAAK,KAAK,QAAQ,EAAE;YAC7B,gBAAgB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;SACtC;aAAM;YACL,KAAK,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,aAAa,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EACrF,QAAQ,EAAE,kBAAkB,GAC5B,EACF,cAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YACxF,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,GAC/E,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG;IACpB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAe,EAAE,EAAE,CAAC,CAC9C,KAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAI,CACrD;CACF,CAAC;AASF,MAAM,aAAa,GAA0C,CAAC,EAC5D,aAAa,EACb,OAAO,EACP,OAAO,GACR,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACtF,QAAQ,aAAa,CAAC,IAAI,EAAE;QAC1B,KAAK,MAAM;YACT,OAAO,CACL,KAAC,UAAU,IACT,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,eAAe,GACxB,CACH,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,KAAC,QAAQ,IAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,GAAI,CAAC;QACzD;YACE,OAAO,CACL,cACE,GAAG,EAAE;oBACH,MAAM,EAAE,MAAM;oBACd,QAAQ,EAAE,QAAQ;iBACnB,YAEA,OAAO,IAAI,KAAC,qBAAqB,IAAC,OAAO,EAAE,OAAO,GAAI,GACnD,CACP,CAAC;KACL;AACH,CAAC,CAAC;AAOF,MAAM,aAAa,GAEd,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACvB,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD,OAAO,CACL,qCAAa,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,eAAM,GAAG,EAAE,mBAAmB,YAAG,UAAU,GAAQ,CAAC,CAAC,CAAC,EAAE,IAAO,CAC9F,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,GAAG,CAAC;IAC9B,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,OAAO;IAChB,YAAY,EAAE,MAAM;CACrB,CAAC,CAAC"}

package/dist/src/react/playground.d.ts

@@ -0,0 +1,56 @@
+import { CompilerOptions } from "@typespec/compiler";
+import { FunctionComponent } from "react";
+import "swagger-ui/dist/swagger-ui.css";
+import { BrowserHost } from "../browser-host.js";
+import { PlaygroundSample } from "../types.js";
+import { FileOutputViewer } from "./types.js";
+export interface PlaygroundProps {
+    host: BrowserHost;
+    /** Default emitter if leaving this unmanaged. */
+    defaultContent?: string;
+    /** List of available libraries */
+    libraries: string[];
+    /** Emitter to use */
+    emitter?: string;
+    /** Default emitter if leaving this unmanaged. */
+    defaultEmitter?: string;
+    /** Callback when emitter change */
+    onEmitterChange?: (emitter: string) => void;
+    /** Emitter options */
+    compilerOptions?: CompilerOptions;
+    /** Default emitter options if leaving this unmanaged. */
+    defaultCompilerOptions?: CompilerOptions;
+    /** Callback when emitter options change */
+    onCompilerOptionsChange?: (emitter: CompilerOptions) => void;
+    /** Samples available */
+    samples?: Record<string, PlaygroundSample>;
+    /** Sample to use */
+    sampleName?: string;
+    /** Default sample if leaving this unmanaged. */
+    defaultSampleName?: string;
+    /** Callback when sample change */
+    onSampleNameChange?: (sampleName: string) => void;
+    /** Playground links */
+    links?: PlaygroundLinks;
+    /** Custom viewers that enabled for certain emitters. Key of the map is emitter name */
+    emitterViewers?: Record<string, FileOutputViewer[]>;
+    onSave?: (value: PlaygroundSaveData) => void;
+}
+export interface PlaygroundSaveData {
+    /** Current content of the playground.   */
+    content: string;
+    /** Emitter name. */
+    emitter: string;
+    /** Emitter options. */
+    options?: CompilerOptions;
+    /** If a sample is selected and the content hasn't changed since. */
+    sampleName?: string;
+}
+export interface PlaygroundLinks {
+    /** Link to documentation */
+    documentationUrl?: string;
+    /** Issue to github issue to open a new issue. */
+    githubIssueUrl?: string;
+}
+export declare const Playground: FunctionComponent<PlaygroundProps>;
+//# sourceMappingURL=playground.d.ts.map

package/dist/src/react/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AACrF,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,OAAO,EAAoB,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGhE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,SAAS,EAAE,MAAM,EAAE,CAAC;IAEpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,sBAAsB;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAE7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAElD,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAEhB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;IAEhB,uBAAuB;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA0KzD,CAAC"}

package/dist/src/react/playground.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import debounce from "debounce";
+import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import "swagger-ui/dist/swagger-ui.css";
+import { CompletionItemTag } from "vscode-languageserver";
+import { importTypeSpecCompiler } from "../core.js";
+import { getMarkerLocation } from "../services.js";
+import { resolveLibraries } from "../utils.js";
+import { EditorCommandBar } from "./editor-command-bar.js";
+import { useMonacoModel } from "./editor.js";
+import { Footer } from "./footer.js";
+import { useAsyncMemo, useControllableValue } from "./hooks.js";
+import { OutputView } from "./output-view.js";
+import { TypeSpecEditor } from "./typespec-editor.js";
+export const Playground = (props) => {
+    var _a, _b, _c, _d;
+    const { host, onSave } = props;
+    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 = await importTypeSpecCompiler();
+        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 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 libraries = useAsyncMemo(async () => resolveLibraries(props.libraries), [], [props.libraries]);
+    return (_jsxs("div", { css: {
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gridTemplateRows: "1fr auto",
+            gridTemplateAreas: '"typespeceditor output"\n    "footer footer"',
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            fontFamily: `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`,
+        }, children: [_jsxs("div", { css: { gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }, children: [_jsx(EditorCommandBar, { libraries: libraries, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, 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 })] }), _jsx("div", { css: {
+                    gridArea: "output",
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    borderLeft: "1px solid #c5c5c5",
+                }, 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 = await importTypeSpecCompiler();
+        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 });
+    }
+}
+//# sourceMappingURL=playground.js.map

package/dist/src/react/playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"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"}

package/dist/src/react/samples-dropdown.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { PlaygroundSample } from "../types.js";
+export interface SamplesDropdownProps {
+    samples: Record<string, PlaygroundSample>;
+    selectedSampleName: string;
+    onSelectedSampleNameChange: (sampleName: string) => void;
+}
+export declare const SamplesDropdown: FunctionComponent<SamplesDropdownProps>;
+//# sourceMappingURL=samples-dropdown.d.ts.map

package/dist/src/react/samples-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"samples-dropdown.d.ts","sourceRoot":"","sources":["../../../src/react/samples-dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAyBnE,CAAC"}

package/dist/src/react/samples-dropdown.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Select } from "@fluentui/react-components";
+import { useCallback } from "react";
+export 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] }));
+};
+//# sourceMappingURL=samples-dropdown.js.map

package/dist/src/react/samples-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"samples-dropdown.js","sourceRoot":"","sources":["../../../src/react/samples-dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,OAAO,CAAC;AASvD,MAAM,CAAC,MAAM,eAAe,GAA4C,CAAC,EACvE,OAAO,EACP,kBAAkB,EAClB,0BAA0B,GAC3B,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QAClD,OAAO,2BAAsB,MAAM,IAAf,MAAM,CAAmB,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,GAAQ,EAAE,EAAE;QACX,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC7B,0BAA0B,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC9C;IACH,CAAC,EACD,CAAC,0BAA0B,CAAC,CAC7B,CAAC;IACF,OAAO,CACL,MAAC,MAAM,IAAC,SAAS,EAAC,iBAAiB,EAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,aAC3F,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,uCAEhB,EACR,OAAO,IACD,CACV,CAAC;AACJ,CAAC,CAAC"}