Fix anonymous union variant in tree viewer

.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/smoke-test.test.ts → 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("compile unnamed union variant without error", async () => {
-  await runner.compile(`union Foo { "a", "b" }`);
+it("runs emitter", async () => {
+  await runner.compile(`op foo(): string;`, {
+    emitters: { "@typespec/html-program-viewer": {} },
+  });
 });

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

@@ -12,7 +12,7 @@ export async function createViewerTestRunner() {
   return createTestWrapper(host, {
     autoImports: [],
     compilerOptions: {
-      emitters: { "@typespec/html-program-viewer": {} },
+      // emitters: { "@typespec/html-program-viewer": {} },
     },
   });
 }

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"
     },