Fix anonymous union variant in tree viewer (#4353)

fix https://github.com/Azure/typespec-azure/issues/1480

.chronus/changes/fix-anon-union-variant-program-viewer-2024-8-5-13-29-8.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/html-program-viewer"
+---
+
+Fix crash when using anonymous union variant

.chronus/changes/fix-anon-union-variant-program-viewer-2024-8-5-13-29-9.md

@@ -0,0 +1,6 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: internal
+packages:
+  - "@typespec/playground"
+---

packages/html-program-viewer/package.json

@@ -23,6 +23,7 @@
       "default": "./dist/emitter/index.js"
     },
     "./react": {
+      "development": "./src/react/index.ts",
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },

packages/html-program-viewer/src/react/type-graph.test.tsx

@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react";
+import { it } from "vitest";
+import { createViewerTestRunner } from "../../test/test-host.js";
+import { TypeGraph } from "./index.js";
+
+async function renderTypeGraphFor(code: string) {
+  const runner = await createViewerTestRunner();
+  await runner.compile(code);
+  render(<TypeGraph program={runner.program} />);
+}
+
+it("operation", async () => {
+  await renderTypeGraphFor(`op foo(): string;`);
+});
+
+it("compile unnamed union variant without error", async () => {
+  await renderTypeGraphFor(`union Foo { "a", "b" }`);
+});

packages/html-program-viewer/src/react/use-tree-navigation.tsx

@@ -137,12 +137,14 @@ function computeTypeNodeProps(path: string, type: NamedType, name?: string): Typ
 }
 
 function computeItemList(path: string, name: string, items: Map<string, NamedType>): TypeGraphNode {
+  let index = 0;
   return {
     kind: "list",
     id: path,
     name,
     children: Array.from(items.entries()).map(([key, value]) => {
-      return computeTypeNode(path, value, key);
+      const name = typeof key === "symbol" ? `sym(${index++})` : key;
+      return computeTypeNode(path, value, name);
     }),
   };
 }

packages/html-program-viewer/test/emitter.test.ts

@@ -8,10 +8,8 @@ beforeEach(async () => {
   runner = await createViewerTestRunner();
 });
 
-it("create html view", async () => {
-  await runner.compile(`op foo(): string;`);
+it("runs emitter", async () => {
+  await runner.compile(`op foo(): string;`, {
+    emitters: { "@typespec/html-program-viewer": {} },
   });
-
-it("compile unnamed union variant without error", async () => {
-  await runner.compile(`union Foo { "a", "b" }`);
 });

packages/html-program-viewer/test/test-host.ts

@@ -11,8 +11,5 @@ export async function createViewerTestRunner() {
   const host = await createViewerTestHost();
   return createTestWrapper(host, {
     autoImports: [],
-    compilerOptions: {
-      emitters: { "@typespec/html-program-viewer": {} },
-    },
   });
 }

packages/html-program-viewer/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
+}

packages/html-program-viewer/tsconfig.json

@@ -13,6 +13,5 @@
     "jsx": "react-jsx",
     "lib": ["DOM", "ES2022"],
     "types": ["vite/client", "@testing-library/jest-dom"]
-  },
-  "include": ["src"]
+  }
 }

packages/html-program-viewer/vite.config.ts

@@ -32,9 +32,12 @@ export default defineConfig({
     react(),
     dts({
       logLevel: "silent", // checker reports the errors
+      tsconfigPath: "./tsconfig.build.json",
     }),
     checker({
-      typescript: true,
+      typescript: {
+        tsconfigPath: "./tsconfig.build.json",
+      },
     }),
   ],
 });

packages/playground/package.json

@@ -20,26 +20,32 @@
   "main": "dist/src/index.js",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/src/index.d.ts",
       "default": "./dist/index.js"
     },
     "./vite": {
+      "development": "./src/vite/index.ts",
       "types": "./dist/src/vite/index.d.ts",
       "default": "./dist/vite/index.js"
     },
     "./tooling": {
+      "development": "./src/tooling/index.ts",
       "types": "./dist/src/tooling/index.d.ts",
       "default": "./dist/tooling/index.js"
     },
     "./manifest": {
+      "development": "./src/manifest.ts",
       "types": "./dist/src/manifest.d.ts",
       "default": "./dist/manifest.js"
     },
     "./react": {
+      "development": "./src/react/index.ts",
       "types": "./dist/src/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
     "./react/viewers": {
+      "development": "./src/react/viewers/index.tsx",
       "types": "./dist/src/react/viewers/index.d.ts",
       "default": "./dist/react/viewers/index.js"
     },

packages/react-components/package.json

@@ -21,6 +21,7 @@
   "main": "dist/index.js",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },

vitest.workspace.ts

@@ -18,7 +18,11 @@ export const defaultTypeSpecVitestConfig = defineConfig({
     outputFile: {
       junit: "./test-results.xml",
     },
-    watchExclude: [],
     exclude: ["node_modules", "dist/test"],
   },
+  server: {
+    watch: {
+      ignored: [],
+    },
+  },
 });