@typespec/playground 0.3.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.3.0",
+  "version": "0.4.0-dev.1",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -57,24 +57,25 @@
   "dependencies": {
     "@fluentui/react-components": "~9.52.0",
     "@fluentui/react-icons": "^2.0.240",
+    "@typespec/bundler": "~0.1.4 || >=0.2.0-dev <0.2.0",
+    "@typespec/compiler": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/html-program-viewer": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/http": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/openapi": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/openapi3": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/protobuf": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/rest": "~0.57.0 || >=0.58.0-dev <0.58.0",
+    "@typespec/versioning": "~0.57.0 || >=0.58.0-dev <0.58.0",
     "clsx": "^2.1.1",
     "debounce": "~2.0.0",
     "lzutf8": "0.6.3",
     "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",
-    "@typespec/bundler": "~0.1.4",
-    "@typespec/compiler": "~0.57.0",
-    "@typespec/html-program-viewer": "~0.57.0",
-    "@typespec/http": "~0.57.0",
-    "@typespec/openapi": "~0.57.0",
-    "@typespec/protobuf": "~0.57.0",
-    "@typespec/openapi3": "~0.57.0",
-    "@typespec/rest": "~0.57.0",
-    "@typespec/versioning": "~0.57.0"
+    "vscode-languageserver-textdocument": "~1.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -90,6 +91,7 @@
     "@types/react": "~18.3.2",
     "@types/react-dom": "~18.3.0",
     "@types/swagger-ui-dist": "~3.30.4",
+    "@typespec/bundler": "~0.1.4 || >=0.2.0-dev <0.2.0",
     "@vitejs/plugin-react": "~4.2.1",
     "c8": "^9.1.0",
     "cross-env": "~7.0.3",
@@ -98,9 +100,9 @@
     "typescript": "~5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-checker": "^0.6.4",
-    "vite-plugin-dts": "^3.9.1",
-    "@typespec/bundler": "~0.1.4"
+    "vite-plugin-dts": "^3.9.1"
   },
+  "peerDependencies": {},
   "scripts": {
     "clean": "rimraf ./dist ./dist-dev ./temp ./typespecContents.json",
     "build": "vite build",