@typespec/playground 0.8.0-dev.0 → 0.8.0-dev.2

package/dist/index.js

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

package/dist/react/index.js

@@ -5,7 +5,7 @@ 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 { a as resolveVirtualPath, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-VCejxTUV.js';
+import { a as resolveVirtualPath, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-CPLOnj6Z.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import { TypeGraph } from '@typespec/html-program-viewer/react';
 import '@typespec/html-program-viewer/style.css';
@@ -13,11 +13,11 @@ import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
 import { createUrlStateStorage } from '../state-storage.js';
 
-const PlaygroundContext = createContext(void 0);
+const PlaygroundContext = createContext(undefined);
 const PlaygroundContextProvider = PlaygroundContext.Provider;
 function usePlaygroundContext() {
   const context = useContext(PlaygroundContext);
-  if (context === void 0) {
+  if (context === undefined) {
     throw new Error("usePlaygroundContext must be used within a PlaygroundContextProvider");
   }
   return context;
@@ -138,7 +138,7 @@ const Footer = ({ className, children }) => {
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
   const [value, setValue] = useState(defaultUncontrolledValue);
-  const isControlled = useMemo(() => controlledValue !== void 0, []);
+  const isControlled = useMemo(() => controlledValue !== undefined, []);
   const currentValue = isControlled ? controlledValue : value;
   const valueRef = useRef(currentValue);
   const onChangeRef = useRef(onChange);
@@ -180,8 +180,8 @@ var hasRequiredReactJsxRuntime_production_min;
 function requireReactJsxRuntime_production_min () {
 	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
 	hasRequiredReactJsxRuntime_production_min = 1;
-var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:true,ref:true,__self:true,__source:true};
+	function q(c,a,g){var b,d={},e=null,h=null;undefined!==g&&(e=""+g);undefined!==a.key&&(e=""+a.key);undefined!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a) undefined===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
 	return reactJsxRuntime_production_min;
 }
 
@@ -787,7 +787,7 @@ function requireReactJsxRuntime_development () {
 
 	    for (var typeSpecName in typeSpecs) {
 	      if (has(typeSpecs, typeSpecName)) {
-	        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+	        var error$1 = undefined; // Prop type validation may throw. In case they do, we don't want to
 	        // fail the render phase where it didn't fail before. So we log it.
 	        // After these have been cleaned up, we'll let them throw.
 
@@ -911,11 +911,6 @@ function requireReactJsxRuntime_development () {
 	};
 	var specialPropKeyWarningShown;
 	var specialPropRefWarningShown;
-	var didWarnAboutStringRefs;
-
-	{
-	  didWarnAboutStringRefs = {};
-	}
 
 	function hasValidRef(config) {
 	  {
@@ -947,15 +942,7 @@ function requireReactJsxRuntime_development () {
 
 	function warnIfStringRefCannotBeAutoConverted(config, self) {
 	  {
-	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
-	      var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
-
-	      if (!didWarnAboutStringRefs[componentName]) {
-	        error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
-
-	        didWarnAboutStringRefs[componentName] = true;
-	      }
-	    }
+	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self) ;
 	  }
 	}
 
@@ -1521,13 +1508,21 @@ function requireReactJsxRuntime_development () {
 	return reactJsxRuntime_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production_min();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production_min();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
 }
 
-var jsxRuntimeExports = jsxRuntime.exports;
+var jsxRuntimeExports = requireJsxRuntime();
 
 function Pane({
   children,
@@ -1926,7 +1921,7 @@ const EmitterOptionsForm = ({
     [library.name, options, optionsChanged]
   );
   const emitterOptionsSchema = library.definition?.emitter?.options?.properties;
-  if (emitterOptionsSchema === void 0) {
+  if (emitterOptionsSchema === undefined) {
     return /* @__PURE__ */ jsx(Fragment, { children: '"No options"' });
   }
   const entries = Object.entries(emitterOptionsSchema);
@@ -2175,8 +2170,8 @@ const EditorCommandBar = ({
   onSelectedSampleNameChange,
   commandBarButtons
 }) => {
-  const documentation = documentationUrl ? /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) }) : void 0;
-  const bugButton = fileBug ? /* @__PURE__ */ jsx(FileBugButton, { onClick: fileBug }) : void 0;
+  const documentation = documentationUrl ? /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) }) : undefined;
+  const bugButton = fileBug ? /* @__PURE__ */ jsx(FileBugButton, { onClick: fileBug }) : undefined;
   const emitters = useMemo(
     () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
     [host.libraries]
@@ -2420,7 +2415,7 @@ const OutputView = ({
     () => resolveViewers(viewers, fileViewers),
     [fileViewers, viewers]
   );
-  if (compilationState === void 0) {
+  if (compilationState === undefined) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   if ("internalCompilerError" in compilationState) {
@@ -2571,7 +2566,7 @@ const style$1 = {
 
 const ProblemPaneHeader = memo(({ compilationState, ...props }) => {
   const noProblem = /* @__PURE__ */ jsx(Container, { status: "none", ...props, children: "No problems" });
-  if (compilationState === void 0) {
+  if (compilationState === undefined) {
     return noProblem;
   }
   if ("internalCompilerError" in compilationState) {
@@ -2605,7 +2600,7 @@ const Container = ({ children, className, status, onClick, collaped }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      tabIndex: onClick === void 0 ? void 0 : 0,
+      tabIndex: onClick === undefined ? undefined : 0,
       className: mergeClasses(
         style$1["header"],
         status === "error" && style$1["header--error"],
@@ -2664,7 +2659,7 @@ const ProblemPaneContent = ({
   compilationState,
   onDiagnosticSelected
 }) => {
-  if (compilationState === void 0) {
+  if (compilationState === undefined) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   if ("internalCompilerError" in compilationState) {
@@ -2676,7 +2671,7 @@ const ProblemPaneContent = ({
 
 const Playground = (props) => {
   const { host, onSave } = props;
-  const editorRef = useRef(void 0);
+  const editorRef = useRef(undefined);
   useEffect(() => {
     editor.setTheme(props.editorOptions?.theme ?? "typespec");
   }, [props.editorOptions?.theme]);
@@ -2700,7 +2695,7 @@ const Playground = (props) => {
     return Boolean(selectedSampleName && content === props.samples?.[selectedSampleName]?.content);
   }, [content, selectedSampleName, props.samples]);
   const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
-  const [compilationState, setCompilationState] = useState(void 0);
+  const [compilationState, setCompilationState] = useState(undefined);
   const doCompile = useCallback(async () => {
     const content2 = typespecModel.getValue();
     setContent(content2);
@@ -2712,7 +2707,7 @@ const Playground = (props) => {
         ...getMonacoRange(typespecCompiler, diag.target),
         message: diag.message,
         severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
-        tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : void 0
+        tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined
       }));
       editor.setModelMarkers(typespecModel, "owner", markers ?? []);
     } else {
@@ -2767,7 +2762,7 @@ const Playground = (props) => {
         content: typespecModel.getValue(),
         emitter: selectedEmitter,
         options: compilerOptions,
-        sampleName: isSampleUntouched ? selectedSampleName : void 0
+        sampleName: isSampleUntouched ? selectedSampleName : undefined
       });
     }
   }, [
@@ -2843,7 +2838,7 @@ const Playground = (props) => {
               onSelectedSampleNameChange,
               saveCode,
               formatCode,
-              fileBug: props.onFileBug ? fileBug : void 0,
+              fileBug: props.onFileBug ? fileBug : undefined,
               commandBarButtons: props.commandBarButtons,
               documentationUrl: props.links?.documentationUrl
             }
@@ -2882,8 +2877,8 @@ const Playground = (props) => {
   ] }) });
 };
 const verticalPaneSizesConst = {
-  collapsed: [void 0, 30],
-  expanded: [void 0, 200]
+  collapsed: [undefined, 30],
+  expanded: [undefined, 200]
 };
 const outputDir = resolveVirtualPath("tsp-output");
 async function compile(host, content, selectedEmitter, options) {
@@ -2985,7 +2980,7 @@ const StandalonePlayground = (config) => {
     },
     [config.defaultEmitter, config.libraries, context]
   );
-  if (context === void 0 || fixedOptions === void 0) {
+  if (context === undefined || fixedOptions === undefined) {
     return config.fallback;
   }
   const options = {
@@ -2995,7 +2990,7 @@ const StandalonePlayground = (config) => {
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Toaster, { toasterId }),
-    options && /* @__PURE__ */ jsx(Playground, { ...options })
+    /* @__PURE__ */ jsx(Playground, { ...options })
   ] });
 };
 async function createReactPlayground(config) {

package/dist/{services-VCejxTUV.js → services-CPLOnj6Z.js}

@@ -51,7 +51,7 @@ function createBrowserHostInternal(options) {
     libraries,
     async readUrl(url) {
       const contents = virtualFs.get(url);
-      if (contents === void 0) {
+      if (contents === undefined) {
         const e = new Error(`File ${url} not found.`);
         e.code = "ENOENT";
         throw e;
@@ -61,7 +61,7 @@ function createBrowserHostInternal(options) {
     async readFile(path) {
       path = resolveVirtualPath(path);
       const contents = virtualFs.get(path);
-      if (contents === void 0) {
+      if (contents === undefined) {
         const e = new Error(`File ${path} not found.`);
         e.code = "ENOENT";
         throw e;
@@ -101,7 +101,7 @@ function createBrowserHostInternal(options) {
     async getJsImport(path) {
       path = resolveVirtualPath(path);
       const module = await jsImports.get(path);
-      if (module === void 0) {
+      if (module === undefined) {
         const e = new Error(`Module ${path} not found`);
         e.code = "MODULE_NOT_FOUND";
         throw e;
@@ -185,7 +185,7 @@ function foldingRange(range2) {
   return {
     start: range2.startLine + 1,
     end: range2.endLine + 1,
-    kind: range2.kind ? new monaco.languages.FoldingRangeKind(range2.kind) : void 0
+    kind: range2.kind ? new monaco.languages.FoldingRangeKind(range2.kind) : undefined
   };
 }
 function textEdits(edit) {
@@ -274,11 +274,11 @@ function getTypeSpecLanguageConfiguration() {
     onEnterRules: TypeSpecLanguageConfiguration.onEnterRules.map((rule) => {
       return {
         beforeText: new RegExp(rule.beforeText.pattern),
-        previousLineText: "previousLineText" in rule ? new RegExp(rule.previousLineText.pattern) : void 0,
+        previousLineText: "previousLineText" in rule ? new RegExp(rule.previousLineText.pattern) : undefined,
         action: {
           indentAction: getIndentAction(rule.action.indent),
-          appendText: "appendText" in rule.action ? rule.action.appendText : void 0,
-          removeText: "removeText" in rule.action ? rule.action.removeText : void 0
+          appendText: "appendText" in rule.action ? rule.action.appendText : undefined,
+          removeText: "removeText" in rule.action ? rule.action.removeText : undefined
         }
       };
     })
@@ -295,7 +295,7 @@ async function registerMonacoLanguage(host) {
     compilerHost: host,
     getOpenDocumentByURL(url) {
       const model = monaco.editor.getModel(monaco.Uri.parse(url));
-      return model ? textDocumentForModel(model) : void 0;
+      return model ? textDocumentForModel(model) : undefined;
     },
     sendDiagnostics() {
     },
@@ -377,7 +377,7 @@ async function registerMonacoLanguage(host) {
       case DocumentHighlightKind.Write:
         return monaco.languages.DocumentHighlightKind.Write;
       default:
-        return void 0;
+        return undefined;
     }
   }
   function monacoHoverContents(contents) {
@@ -389,7 +389,7 @@ async function registerMonacoLanguage(host) {
     }
     return {
       contents: monacoHoverContents(hover.contents),
-      range: hover.range ? LspToMonaco.range(hover.range) : void 0
+      range: hover.range ? LspToMonaco.range(hover.range) : undefined
     };
   }
   function monacoWorkspaceEdit(edit) {
@@ -397,7 +397,7 @@ async function registerMonacoLanguage(host) {
     for (const [uri, changes] of Object.entries(edit.changes ?? {})) {
       const resource = monaco.Uri.parse(uri);
       for (const change of changes) {
-        edits.push({ resource, textEdit: LspToMonaco.textEdit(change), versionId: void 0 });
+        edits.push({ resource, textEdit: LspToMonaco.textEdit(change), versionId: undefined });
       }
     }
     return { edits };
@@ -556,7 +556,7 @@ async function registerMonacoLanguage(host) {
 }
 function getMonacoRange(typespecCompiler, target) {
   const loc = typespecCompiler.getSourceLocation(target);
-  if (loc === void 0 || loc.file.path !== "/test/main.tsp") {
+  if (loc === undefined || loc.file.path !== "/test/main.tsp") {
     return {
       startLineNumber: 1,
       startColumn: 1,

package/dist/state-storage.js

@@ -24,7 +24,7 @@ function createUrlStateStorage(schema) {
           `Error decompressing query parameter ${item.queryParam} with content:`,
           value
         );
-        return void 0;
+        return undefined;
       }
     } else {
       return value;
@@ -39,7 +39,7 @@ function createUrlStateStorage(schema) {
           `Error decompressing query parameter ${item.queryParam} with content:`,
           value
         );
-        return void 0;
+        return undefined;
       }
     } else {
       return value;
@@ -50,7 +50,7 @@ function createUrlStateStorage(schema) {
     history.pushState(null, "", window.location.pathname + "?" + params.toString());
   }
   function resolveSearchParams(data, mergeWithExisting = false) {
-    const params = new URLSearchParams(mergeWithExisting ? location.search : void 0);
+    const params = new URLSearchParams(mergeWithExisting ? location.search : undefined);
     for (const [key, item] of Object.entries(schema)) {
       const value = data[key];
       if (value) {

package/dist/vite/index.js

@@ -13,7 +13,7 @@ function definePlaygroundViteConfig(config) {
             if (id.includes("/node_modules/monaco-editor/esm/vs/editor")) {
               return "monaco";
             }
-            return void 0;
+            return undefined;
           }
         }
       }
@@ -31,7 +31,7 @@ function definePlaygroundViteConfig(config) {
       !config.skipBundleLibraries ? typespecBundlePlugin({
         folderName: "libs",
         libraries: config.libraries
-      }) : void 0
+      }) : undefined
     ],
     server: {
       fs: {
@@ -83,7 +83,7 @@ function playgroundManifestPlugin(config) {
         };`;
         return file;
       }
-      return void 0;
+      return undefined;
     }
   };
 }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.8.0-dev.0",
+  "version": "0.8.0-dev.2",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -59,8 +59,8 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@fluentui/react-components": "~9.55.0",
-    "@fluentui/react-icons": "^2.0.260",
+    "@fluentui/react-components": "~9.57.0",
+    "@fluentui/react-icons": "^2.0.271",
     "@typespec/bundler": "~0.1.11 || >=0.2.0-dev <0.2.0",
     "@typespec/compiler": "~0.64.0 || >=0.65.0-dev <0.65.0",
     "@typespec/html-program-viewer": "~0.64.0 || >=0.65.0-dev <0.65.0",
@@ -71,40 +71,40 @@
     "@typespec/rest": "~0.64.0 || >=0.65.0-dev <0.65.0",
     "@typespec/versioning": "~0.64.0 || >=0.65.0-dev <0.65.0",
     "clsx": "^2.1.1",
-    "debounce": "~2.1.1",
+    "debounce": "~2.2.0",
     "lzutf8": "0.6.3",
-    "monaco-editor": "~0.52.0",
+    "monaco-editor": "~0.52.2",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "react-error-boundary": "^4.0.13",
-    "swagger-ui-dist": "^5.17.14",
+    "react-error-boundary": "^5.0.0",
+    "swagger-ui-dist": "^5.18.2",
     "vscode-languageserver": "~9.0.1",
     "vscode-languageserver-textdocument": "~1.0.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@playwright/test": "^1.48.0",
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/cli": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/types": "^8.3.5",
+    "@babel/core": "^7.26.0",
+    "@playwright/test": "^1.49.1",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/cli": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@storybook/types": "^8.5.0",
     "@types/debounce": "~1.2.4",
-    "@types/node": "~22.7.9",
+    "@types/node": "~22.10.10",
     "@types/react": "~18.3.11",
     "@types/react-dom": "~18.3.0",
     "@types/swagger-ui-dist": "~3.30.5",
     "@typespec/bundler": "~0.1.11 || >=0.2.0-dev <0.2.0",
-    "@vitejs/plugin-react": "~4.3.2",
-    "c8": "^10.1.2",
+    "@vitejs/plugin-react": "~4.3.4",
+    "c8": "^10.1.3",
     "cross-env": "~7.0.3",
-    "es-module-shims": "~1.10.0",
+    "es-module-shims": "~2.0.5",
     "rimraf": "~6.0.1",
-    "typescript": "~5.6.3",
-    "vite": "^5.4.8",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.11",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-dts": "4.2.3",
+    "vite-plugin-dts": "4.5.0",
     "@typespec/react-components": "~0.57.0"
   },
   "peerDependencies": {},