Fix type graph viewer to display scopeless decorator state

[Copilot]

Fix type graph viewer to display scopeless decorator state

Scopeless decorators (e.g., @clientName("enabled") without a scope parameter) store their state using Symbol keys. The type graph viewer's ObjectInspector and ObjectPreview only iterated over string properties via Object.getOwnPropertyNames() and for...in loops, causing Symbol-keyed decorator state to appear empty in both expanded and collapsed views.

Changes:

• Add Symbol key iteration in object-inspector.tsx using Object.getOwnPropertySymbols()
• Add Symbol key iteration in object-preview.tsx to show Symbol properties in collapsed view
• Get all property keys (string and Symbol) upfront and process them together
• Update getPropertyValue() in property-utils.tsx to accept string | symbol
• Add Symbol key sorting for consistent display ordering when sortObjectKeys is enabled
• Remove nested describe blocks in tests per review feedback
• Add test for Symbol property sorting in object inspector
• Add tests for Symbol properties in object preview
• Fix inconsistency in empty string key handling for enumerable and non-enumerable properties
• Add changelog entry for the fix

Example:

@clientName("EnabledProperty")  // Scopeless - uses Symbol key
model Example {
  @clientName("isEnabled")      // Now displays in type graph viewer
  enable: true;
}

Previously, the decorator data would render as Symbol(...): { } in both collapsed and expanded views. Now it correctly displays the decorator properties in both the collapsed object preview and the expanded inspector view.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Type graph does not contain scopeless clientName</issue_title>
<issue_description>If I specify a @clientName decorator with a different rename value than the property name and no scope, as is supported by documentation for all emitters, the type graph view at least in the Playground does not show a value despite the autorest emitter emitting an x-ms-enum.name correctly:

Only if I specify a scope does it show up right. Surely, this is a bug since the emitters need to get it from the type graph. But is it only a bug in the playground? Does this happen if other optional decorator properties aren't specified?

Playground Link</issue_description>

<agent_instructions>In the html program viewer it seems like we are not displaying state entries without a name and so the key is a symbol which seems is skipped</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@timotheeguerin I think this is a bug in the program viewer, when no scope is provided the key is a symbol and seems like we might not be showing those keys

• Fixes Type graph does not contain scopeless clientName Azure/typespec-azure#534

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[timotheeguerin]

/azp run typespec - pr tools

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[azure-sdk]

You can try these changes here

🛝 Playground	🌐 Website	🛝 VSCode Extension

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/typespec/typespec/website/node_modules/.bin/../astro/astro.js build node /hom�� tput-dir ../../website/src/content/docs/docs/libraries/versioning/reference . .0_tmp_3760/node_modules/pnpm/dist/node-gyp-bin/sh r --no-emit node .0_tmp_3760/nodegenerate-scenarios-summary sh pec/�� lmstxt --output-dir ../../website/src/content/docs/docs/libraries/http/reference node /.bin/sh n --local --verbsh . _modules/pnpm/ditsx ./.scripts/regen-compiler-docs.ts node (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[timotheeguerin]

Result

[timotheeguerin]

@copilot you need to add a changelog

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/microsoft/typespec/@typespec/html-program-viewer@9541

commit: 1cdb165

[Copilot]

@copilot you need to add a changelog

Added changelog entry in f23be14 for @typespec/html-program-viewer as a bug fix.

[github-actions]

All changed packages have been documented.

• ✅ @typespec/html-program-viewer

Show changes

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

Fix type graph viewer to display Symbol-keyed decorator state

[markcowl]

/azp run typespec - PR Tools

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).