TypeGraph Viewer V2

[timotheeguerin]

https://cadlplayground.z22.web.core.windows.net/prs/3713/

[azure-sdk]

All changed packages have been documented.

• ✅ @typespec/html-program-viewer
• ✅ @typespec/playground

Show changes

@typespec/react-components - internal ✏️

Initial

@typespec/playground - feature ✏️

Extract splitpane into separate package

@typespec/html-program-viewer - feature ✏️

Complete new dynamic UI to navigate the TypeSpec type graph

[azure-sdk]

You can try these changes at https://cadlplayground.z22.web.core.windows.net/prs/3713/

Check the website changes at https://tspwebsitepr.z22.web.core.windows.net/prs/3713/

[chrisradek]

I started commenting on some of the hooks in the react-components package - many of them seem to have an inexhaustive list of dependencies. In some cases I'm not sure if that's intended or not (e.g. useControllableValue has a useMemo with an empty dependency list - which means isControlled won't change if controlledValue changes to/from undefined.)

Might be worth updating the eslint rules to include the react-hooks rules from eslint-plugin-react-hooks:

export function getTypeScriptProjectRules(root) {
  return tsEslint.config({
    files: ["**/*.ts", "**/*.tsx"],
    ignores: ["packages/http-client-csharp/**/*"], // Ignore isolated modules
    plugins: {
      deprecation,
      "react-hooks": reactHooks,
    },
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.json",
        tsconfigRootDir: root,
      },
    },
    rules: {
      // Only put rules here that need typescript project information
      "@typescript-eslint/no-floating-promises": "error",
      "deprecation/deprecation": ["warn"],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
    },
  });

[chrisradek]

Really like these UI updates!