TypeGraph Viewer V2

.chronus/changes/typegraph-v2-2024-6-1-10-17-30.md

@@ -0,0 +1,7 @@
+---
+changeKind: internal
+packages:
+  - "@typespec/react-components"
+---
+
+Initial

.chronus/changes/typegraph-v2-2024-6-1-10-17-58.md

@@ -0,0 +1,7 @@
+---
+changeKind: feature
+packages:
+  - "@typespec/playground"
+---
+
+Extract splitpane into separate package

.chronus/changes/typegraph-v2-2024-6-1-17-14-9.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: feature
+packages:
+  - "@typespec/html-program-viewer"
+---
+
+Complete new dynamic UI to navigate the TypeSpec type graph

packages/html-program-viewer/package.json

@@ -17,57 +17,66 @@
     "typespec"
   ],
   "type": "module",
-  "main": "dist/src/index.js",
+  "main": "dist/emitter/index.js",
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/src/index.js"
+      "default": "./dist/emitter/index.js"
     },
-    "./testing": {
-      "types": "./dist/src/testing/index.d.ts",
-      "default": "./dist/src/testing/index.js"
-    }
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./style.css": "./dist/style.css"
   },
-  "tspMain": "dist/src/index.js",
   "engines": {
     "node": ">=14.0.0"
   },
   "scripts": {
     "clean": "rimraf ./dist ./temp",
-    "build": "tsc -p .",
-    "watch": "tsc -p . --watch",
+    "build": "pnpm build:react && pnpm build:emitter",
+    "build:react": "vite build",
+    "build:emitter": "vite build --config vite.emitter.config.ts",
+    "watch": "vite build --watch",
     "test": "vitest run",
     "test:ui": "vitest --ui",
     "test:ci": "vitest run --coverage --reporter=junit --reporter=default",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix"
   },
   "files": [
-    "lib/*.tsp",
     "dist/**",
     "!dist/test/**"
   ],
   "peerDependencies": {
     "@typespec/compiler": "workspace:~"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "prettier": "~3.3.2",
+    "@fluentui/react-components": "~9.54.2",
+    "@fluentui/react-icons": "^2.0.247",
+    "@fluentui/react-list-preview": "^0.2.8",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "react-is": "~18.3.1"
+    "react-hotkeys-hook": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "~18.11.19",
     "@types/react": "~18.3.3",
     "@types/react-dom": "~18.3.0",
     "@typespec/compiler": "workspace:~",
+    "@typespec/react-components": "workspace:~",
+    "@vitejs/plugin-react": "~4.3.1",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
     "c8": "^10.1.2",
     "rimraf": "~5.0.7",
     "typescript": "~5.5.3",
+    "vite": "^5.3.2",
+    "vite-plugin-checker": "^0.7.0",
+    "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.6.0"
   }
 }

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

@@ -1,7 +1,18 @@
-import { EmitContext, emitFile, resolvePath } from "@typespec/compiler";
-import { renderProgram } from "./ui.js";
-
-import { createTypeSpecLibrary, JSONSchemaType } from "@typespec/compiler";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import {
+  createTypeSpecLibrary,
+  emitFile,
+  getDirectoryPath,
+  resolvePath,
+  type EmitContext,
+  type JSONSchemaType,
+  type Program,
+} from "@typespec/compiler";
+import { readFile } from "fs/promises";
+import { createElement } from "react";
+import ReactDOMServer from "react-dom/server";
+import { fileURLToPath } from "url";
+import { InspectType } from "./react/inspect-type/inspect-type.js";
 
 export interface HtmlProgramViewerOptions {
   /**
@@ -19,8 +30,18 @@ const EmitterOptionsSchema: JSONSchemaType<HtmlProgramViewerOptions> = {
   required: [],
 };
 
+export function renderProgram(program: Program) {
+  const html = ReactDOMServer.renderToString(
+    createElement(FluentProvider, {
+      theme: webLightTheme,
+      children: createElement(InspectType, { entity: program.getGlobalNamespaceType() }),
+    }) // [1
+  );
+  return html;
+}
+
 export const libDef = {
-  name: "@typespec/openapi3",
+  name: "@typespec/html-program-viewer",
   diagnostics: {},
   emitter: {
     options: EmitterOptionsSchema as JSONSchemaType<HtmlProgramViewerOptions>,
@@ -37,4 +58,12 @@ export async function $onEmit(context: EmitContext<HtmlProgramViewerOptions>) {
     path: htmlPath,
     content: `<!DOCTYPE html><html lang="en"><link rel="stylesheet" href="style.css"><body>${html}</body></html>`,
   });
+
+  const css = await readFile(
+    resolvePath(getDirectoryPath(fileURLToPath(import.meta.url)), "style.css")
+  );
+  await emitFile(context.program, {
+    path: resolvePath(outputDir, "style.css"),
+    content: css.toString(),
+  });
 }

packages/html-program-viewer/src/index.ts

@@ -1,4 +1 @@
-export { ColorProvider, ColorProviderProps } from "./color-provider.js";
-export type { ColorPalette } from "./constants.js";
 export * from "./emitter.js";
-export { TypeSpecProgramViewer } from "./ui.js";

packages/html-program-viewer/src/react/common.module.css

@@ -0,0 +1,26 @@
+.mono {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.literal {
+  color: var(--colorPaletteLightGreenForeground2);
+}
+
+.type-kind {
+  color: var(--colorPaletteBerryForeground2);
+}
+.type-kind-tag {
+  color: white;
+  background-color: var(--colorPaletteBerryForeground2);
+  border-radius: 2px;
+}
+.type-kind-tag-small {
+  height: 16px;
+  line-height: 16px;
+  font-size: 10px;
+  padding: 0 3px;
+}
+
+.type-kind-tag-auto {
+  padding: 1px 5px;
+}

packages/html-program-viewer/src/react/common.tsx

@@ -0,0 +1,24 @@
+import { mergeClasses } from "@fluentui/react-components";
+import type { Type } from "@typespec/compiler";
+import type { FunctionComponent } from "react";
+import style from "./common.module.css";
+
+export const Mono = ({ children, className }: { children: any; className?: string }) => (
+  <span className={mergeClasses(style["mono"], className)}>{children}</span>
+);
+
+export const Literal: FunctionComponent<{ children: any }> = ({ children }) => (
+  <Mono className={style["literal"]}>{children}</Mono>
+);
+
+export const TypeKind = ({ type }: { type: Type }) => {
+  return <span className={style["type-kind"]}>{type.kind}</span>;
+};
+
+export const TypeKindTag = ({ type, size = "auto" }: { type: Type; size?: "small" | "auto" }) => {
+  return (
+    <Mono className={mergeClasses(style["type-kind-tag"], style[`type-kind-tag-${size}`])}>
+      {type.kind}
+    </Mono>
+  );
+};

packages/html-program-viewer/src/react/current-path/current-path.module.css

@@ -0,0 +1,41 @@
+.current-path {
+  overflow-y: auto;
+  border: 1px solid var(--colorNeutralStroke1);
+}
+
+.current-path.focus {
+  border-bottom: 1px solid var(--colorBrandForeground1);
+}
+.breadcrumb-search {
+  width: 100%;
+  border-radius: 0 !important;
+  border: none !important;
+}
+
+.breadcrumb-search::after {
+  border: none !important;
+}
+
+.option {
+  padding: 2px 4px !important;
+}
+
+.option .doc {
+  color: var(--colorNeutralForeground4);
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
+.flex-gap {
+  flex: 1;
+}
+
+.search-placeholder {
+  color: var(--colorNeutralForeground4);
+  font-size: 12px;
+  margin: 5px;
+  text-wrap: nowrap;
+}