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
• Fix timeout issue: Filter Symbol properties to only enumerable ones in object-preview.tsx to match original behavior

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.

Bug Fix:
The initial implementation was including all Symbol properties (including non-enumerable ones) which caused test timeouts. This has been fixed to only include enumerable Symbol properties by default, matching the original for...in loop behavior.

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: 2f6ddc9

[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).

[timotheeguerin]

@copilot those changes are causing some issues in the test in the CI which get stuck and timeout

[Copilot]

@copilot those changes are causing some issues in the test in the CI which get stuck and timeout

Fixed in a7dd819. The issue was that object-preview.tsx was using Object.getOwnPropertyNames() and Object.getOwnPropertySymbols() which return ALL properties (including non-enumerable ones), instead of just enumerable properties like the original for...in loop. This caused the code to iterate over built-in symbols and non-enumerable properties, leading to test timeouts. Changed to use Object.keys() for string properties and filter Object.getOwnPropertySymbols() results using propertyIsEnumerable() to match the original behavior.

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: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/typespec/typespec/website/node_modules/.bin/../astro/astro.js build node /hom�� ebsite/src/conte--llmstxt . tools/pnpm/10.23../../website/src/content/docs/docs/emitters/openapi3/reference signature && tscnode git _modules/pnpm/digenerate-scenarios-summary sh /nod�� e/petstore --warn-as-error --no---typekits sh pec/node_modules/.bin/sh --no-emit tr .0_tmp_3855/nodedoc sh (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)