@typespec/playground 0.6.0-dev.1 → 0.6.0-dev.3

package/dist/index.js

@@ -1,4 +1,5 @@
-export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-DqG2VXgn.js';
+export { c as createBrowserHost, r as registerMonacoLanguage } from './services-VCejxTUV.js';
+export { createUrlStateStorage } from './state-storage.js';
 
 function registerMonacoDefaultWorkersForVite() {
   self.MonacoEnvironment = {

package/dist/react/index.js

@@ -5,12 +5,13 @@ import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, T
 import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import debounce from 'debounce';
 import { CompletionItemTag } from 'vscode-languageserver';
-import { b as resolveVirtualPath, g as getMonacoRange, a as createUrlStateStorage, c as createBrowserHost, r as registerMonacoLanguage } from '../state-storage-DqG2VXgn.js';
+import { a as resolveVirtualPath, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-VCejxTUV.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import { TypeGraph } from '@typespec/html-program-viewer/react';
 import '@typespec/html-program-viewer/style.css';
 import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
+import { createUrlStateStorage } from '../state-storage.js';
 
 const PlaygroundContext = createContext(void 0);
 const PlaygroundContextProvider = PlaygroundContext.Provider;
@@ -33,9 +34,6 @@ const Editor = ({ model, options, actions, onMount }) => {
     });
     onMount?.({ editor: editorRef.current });
   }, []);
-  useEffect(() => {
-    editor.setTheme(options.theme ?? "typespec");
-  }, [options.theme]);
   useEffect(() => {
     const disposables = [];
     for (const command of actions ?? []) {
@@ -2599,6 +2597,9 @@ const ProblemPaneContent = ({
 const Playground = (props) => {
   const { host, onSave } = props;
   const editorRef = useRef(void 0);
+  useEffect(() => {
+    editor.setTheme(props.editorOptions?.theme ?? "typespec");
+  }, [props.editorOptions?.theme]);
   const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
     props.emitter,
     props.defaultEmitter,

package/dist/{state-storage-DqG2VXgn.js → services-VCejxTUV.js}

@@ -3,7 +3,6 @@ import * as monaco from 'monaco-editor';
 import * as lsp from 'vscode-languageserver';
 import { DiagnosticSeverity, FormattingOptions, DocumentHighlightKind } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import lzutf8 from 'lzutf8';
 
 async function importTypeSpecCompiler(config) {
   return await importLibrary("@typespec/compiler", config);
@@ -519,7 +518,6 @@ async function registerMonacoLanguage(host) {
       { token: "function", foreground: "#E06C75" }
     ]
   });
-  monaco.editor.setTheme("typespec");
   monaco.languages.registerDocumentSemanticTokensProvider("typespec", {
     getLegend() {
       const legend = lsConfig.capabilities.semanticTokensProvider.legend;
@@ -576,83 +574,4 @@ function getMonacoRange(typespecCompiler, target) {
   };
 }
 
-function createUrlStateStorage(schema) {
-  return { load, save, resolveSearchParams };
-  function load() {
-    const result = {};
-    const parsed = new URLSearchParams(window.location.search);
-    for (const [key, item] of Object.entries(schema)) {
-      const value = parsed.get(item.queryParam);
-      const decompressed = value && decompress(item, value);
-      const deserialized = decompressed && deserialize(item, decompressed);
-      if (deserialized) {
-        result[key] = deserialized;
-      }
-    }
-    return result;
-  }
-  function decompress(item, value) {
-    if (item.compress) {
-      try {
-        return lzutf8.decompress(value, { inputEncoding: "Base64" });
-      } catch (e) {
-        console.error(
-          `Error decompressing query parameter ${item.queryParam} with content:`,
-          value
-        );
-        return void 0;
-      }
-    } else {
-      return value;
-    }
-  }
-  function deserialize(item, value) {
-    if (item.type === "object") {
-      try {
-        return JSON.parse(value);
-      } catch (e) {
-        console.error(
-          `Error decompressing query parameter ${item.queryParam} with content:`,
-          value
-        );
-        return void 0;
-      }
-    } else {
-      return value;
-    }
-  }
-  function save(data) {
-    const params = resolveSearchParams(data, true);
-    history.pushState(null, "", window.location.pathname + "?" + params.toString());
-  }
-  function resolveSearchParams(data, mergeWithExisting = false) {
-    const params = new URLSearchParams(mergeWithExisting ? location.search : void 0);
-    for (const [key, item] of Object.entries(schema)) {
-      const value = data[key];
-      if (value) {
-        const serialized = serialize(item, value);
-        const compressed = compress(item, serialized);
-        params.set(item.queryParam, compressed);
-      } else {
-        params.delete(item.queryParam);
-      }
-    }
-    return params;
-  }
-  function compress(item, value) {
-    if (item.compress) {
-      return lzutf8.compress(value, { outputEncoding: "Base64" });
-    } else {
-      return value;
-    }
-  }
-  function serialize(item, value) {
-    if (item.type === "object") {
-      return JSON.stringify(value);
-    } else {
-      return value;
-    }
-  }
-}
-
-export { createUrlStateStorage as a, resolveVirtualPath as b, createBrowserHost as c, getMonacoRange as g, registerMonacoLanguage as r };
+export { resolveVirtualPath as a, createBrowserHost as c, getMonacoRange as g, registerMonacoLanguage as r };

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

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/react/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAA8B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC,oCAAoC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA2CjD,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAK5E"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/react/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAA8B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC,oCAAoC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAuCjD,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAK5E"}

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

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEtE,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAOjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGpF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,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,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA4NzD,CAAC"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEtE,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAOjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGpF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,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,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAgOzD,CAAC"}

package/dist/src/services.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../../src/services.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EAEd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAKxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAmC9C,wBAAsB,sBAAsB,CAAC,IAAI,EAAE,WAAW,iBAiU7D;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,cAAc,oBAAoB,CAAC,EACrD,MAAM,EAAE,gBAAgB,GAAG,OAAO,QAAQ,GACzC,MAAM,CAAC,MAAM,CAkBf"}
+{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../../src/services.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EAEd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAKxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAmC9C,wBAAsB,sBAAsB,CAAC,IAAI,EAAE,WAAW,iBAgU7D;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,cAAc,oBAAoB,CAAC,EACrD,MAAM,EAAE,gBAAgB,GAAG,OAAO,QAAQ,GACzC,MAAM,CAAC,MAAM,CAkBf"}

package/dist/state-storage.js

@@ -0,0 +1,82 @@
+import lzutf8 from 'lzutf8';
+
+function createUrlStateStorage(schema) {
+  return { load, save, resolveSearchParams };
+  function load() {
+    const result = {};
+    const parsed = new URLSearchParams(window.location.search);
+    for (const [key, item] of Object.entries(schema)) {
+      const value = parsed.get(item.queryParam);
+      const decompressed = value && decompress(item, value);
+      const deserialized = decompressed && deserialize(item, decompressed);
+      if (deserialized) {
+        result[key] = deserialized;
+      }
+    }
+    return result;
+  }
+  function decompress(item, value) {
+    if (item.compress) {
+      try {
+        return lzutf8.decompress(value, { inputEncoding: "Base64" });
+      } catch (e) {
+        console.error(
+          `Error decompressing query parameter ${item.queryParam} with content:`,
+          value
+        );
+        return void 0;
+      }
+    } else {
+      return value;
+    }
+  }
+  function deserialize(item, value) {
+    if (item.type === "object") {
+      try {
+        return JSON.parse(value);
+      } catch (e) {
+        console.error(
+          `Error decompressing query parameter ${item.queryParam} with content:`,
+          value
+        );
+        return void 0;
+      }
+    } else {
+      return value;
+    }
+  }
+  function save(data) {
+    const params = resolveSearchParams(data, true);
+    history.pushState(null, "", window.location.pathname + "?" + params.toString());
+  }
+  function resolveSearchParams(data, mergeWithExisting = false) {
+    const params = new URLSearchParams(mergeWithExisting ? location.search : void 0);
+    for (const [key, item] of Object.entries(schema)) {
+      const value = data[key];
+      if (value) {
+        const serialized = serialize(item, value);
+        const compressed = compress(item, serialized);
+        params.set(item.queryParam, compressed);
+      } else {
+        params.delete(item.queryParam);
+      }
+    }
+    return params;
+  }
+  function compress(item, value) {
+    if (item.compress) {
+      return lzutf8.compress(value, { outputEncoding: "Base64" });
+    } else {
+      return value;
+    }
+  }
+  function serialize(item, value) {
+    if (item.type === "object") {
+      return JSON.stringify(value);
+    } else {
+      return value;
+    }
+  }
+}
+
+export { createUrlStateStorage };

package/dist/vite.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAwBA,wBAwCG"}
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAwBA,wBAyCG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.6.0-dev.1",
+  "version": "0.6.0-dev.3",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -23,6 +23,10 @@
       "types": "./dist/src/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./state-storage": {
+      "types": "./dist/src/state-storage.d.ts",
+      "default": "./dist/state-storage.js"
+    },
     "./vite": {
       "types": "./dist/src/vite/index.d.ts",
       "default": "./dist/vite/index.js"
@@ -58,7 +62,7 @@
     "@fluentui/react-components": "~9.55.0",
     "@fluentui/react-icons": "^2.0.260",
     "@typespec/bundler": "~0.1.8 || >=0.2.0-dev <0.2.0",
-    "@typespec/compiler": "~0.61.0 || >=0.62.0-dev <0.62.0",
+    "@typespec/compiler": "~0.61.2 || >=0.62.0-dev <0.62.0",
     "@typespec/html-program-viewer": "~0.61.0 || >=0.62.0-dev <0.62.0",
     "@typespec/http": "~0.61.0 || >=0.62.0-dev <0.62.0",
     "@typespec/openapi": "~0.61.0 || >=0.62.0-dev <0.62.0",