@typespec/playground 0.4.0-dev.0 → 0.4.0-dev.1

package/dist/react/index.js

@@ -1,11 +1,12 @@
 import { createContext, useContext, memo, useCallback, useMemo, useRef, useEffect, useState, useId as useId$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Tooltip, Link, TabList, Tab, tokens, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Tooltip, Link, TabList, Tab, tokens, Button, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import debounce from 'debounce';
 import { Uri, editor, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { CompletionItemTag } from 'vscode-languageserver';
 import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import { g as getMonacoRange, a as createUrlStateStorage, c as createBrowserHost, r as registerMonacoLanguage } from '../state-storage-BjOULkS3.js';
+import { ErrorBoundary } from 'react-error-boundary';
 import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
@@ -608,12 +609,13 @@ const OutputTabs = ({
 };
 
 const style$5 = {
-	"output-view": "_output-view_18pnu_1",
-	"file-viewer": "_file-viewer_18pnu_6",
-	"output-content": "_output-content_18pnu_12",
-	"file-viewer-content": "_file-viewer-content_18pnu_16",
-	"type-graph-viewer": "_type-graph-viewer_18pnu_21",
-	"viewer-tabs-container": "_viewer-tabs-container_18pnu_26"
+	"output-view": "_output-view_omce4_1",
+	"file-viewer": "_file-viewer_omce4_6",
+	"output-content": "_output-content_omce4_12",
+	"file-viewer-content": "_file-viewer-content_omce4_16",
+	"type-graph-viewer": "_type-graph-viewer_omce4_21",
+	"viewer-tabs-container": "_viewer-tabs-container_omce4_26",
+	"viewer-error": "_viewer-error_omce4_30"
 };
 
 const FileViewerComponent = ({
@@ -730,13 +732,13 @@ const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
     return viewers.programViewers[selected];
   }, [viewers.programViewers, selected]);
   return /* @__PURE__ */ jsxs("div", { className: style$5["output-view"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$5["output-content"], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$5["output-content"], children: /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender, children: /* @__PURE__ */ jsx(
       viewer.render,
       {
         program: compilationResult.program,
         outputFiles: compilationResult.outputFiles
       }
-    ) }),
+    ) }) }),
     /* @__PURE__ */ jsx("div", { className: style$5["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
       TabList,
       {
@@ -752,6 +754,13 @@ const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
     ) })
   ] });
 };
+function fallbackRender({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: style$5["viewer-error"], children: [
+    /* @__PURE__ */ jsx("h2", { children: "Something went wrong:" }),
+    /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.toString() }),
+    /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, children: "Try again" })
+  ] });
+}
 
 const layout = "_layout_l03ni_1";
 const style$4 = {

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

@@ -1 +1 @@
-{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoBzD,CAAC"}
+{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoBzD,CAAC"}

package/dist/style.css

@@ -80,34 +80,38 @@
 ._tab--selected_1x6x2_18 {
   background-color: var(--colorNeutralBackground5) !important;
 }
-._output-view_18pnu_1 {
+._output-view_omce4_1 {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
-._file-viewer_18pnu_6 {
+._file-viewer_omce4_6 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-._output-content_18pnu_12 {
+._output-content_omce4_12 {
   flex: 1;
   min-width: 0;
 }
-._file-viewer-content_18pnu_16 {
+._file-viewer-content_omce4_16 {
   flex: 1;
   min-height: 0;
 }
 
-._type-graph-viewer_18pnu_21 {
+._type-graph-viewer_omce4_21 {
   height: 100%;
   overflow-y: auto;
 }
 
-._viewer-tabs-container_18pnu_26 {
+._viewer-tabs-container_omce4_26 {
   background-color: var(--colorNeutralBackground3);
 }
+
+._viewer-error_omce4_30 {
+  padding: 20px;
+}
 ._layout_l03ni_1 {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.4.0-dev.0",
+  "version": "0.4.0-dev.1",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -72,6 +72,7 @@
     "monaco-editor": "~0.46.0",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
+    "react-error-boundary": "^4.0.13",
     "swagger-ui-dist": "^5.17.10",
     "vscode-languageserver": "~9.0.1",
     "vscode-languageserver-textdocument": "~1.0.11"