LS Document Symbols / Navigation Tree (or Bar) for JSX trees, like object literals

Nessuno ha ancora preso questa issue.

### 🔍 Search Terms

jsx symbols navigation tree language feature tsx

### ✅ Viability Checklist

- [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
- [x] This wouldn't change the runtime behavior of existing JavaScript code
- [x] This could be implemented without emitting different JS based on the types of the expressions
- [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
- [x] This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
- [x] This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

### ⭐ Suggestion

### 📃 Motivating Example

Microsoft CSS/HTML languages services, Astro, Svelte, Vue language-tools, all have an outline view and breadcrumbs for elements.
Also, JS object literals have them, and JSX is kinda close in shape.

### 💻 Use Cases

1. What do you want to use this for?

VSCode, maybe Monaco TS worker later

2. What shortcomings exist with current approaches?

It is just non-existent, maybe it's a plain overlook, or a design choice, or lack of ressources.

3. What workarounds are you using in the meantime?

I've implemented this, in a TS plugin (Web Elements Analyzer). It takes an original NavigationTree and extends it. It's a quick PoC (seen in the screenshot, it may have bugs).

```tsx
import type { Ts } from '../../../types.js';

export function extendWithJsx(
ts: typeof Ts,
tree: Ts.NavigationTree,
sourceFile: Ts.SourceFile,
): void {
function toSpan(node: Ts.Node, sourceFile: Ts.SourceFile): Ts.TextSpan {
return {
length: node.getEnd() - node.getStart(sourceFile),
start: node.getStart(sourceFile, /* includeJsDocComment */ false),
};
}

function makeJsxTree(
node: Ts.JsxElement | Ts.JsxSelfClosingElement,
sourceFile: Ts.SourceFile,
): Ts.NavigationTree {
const opening: Ts.JsxOpeningLikeElement = ts.isJsxElement(node)
? node.openingElement
: node;

const tagName = opening.tagName.getText(sourceFile);

const features: string[] = [];
for (const attribute of opening.attributes.properties) {
if (!ts.isJsxAttribute(attribute)) continue;
const name = attribute.name.getText(sourceFile);

if (
name === 'id' &&
attribute.initializer &&
ts.isStringLiteral(attribute.initializer)
) {
features.push(`#${attribute.initializer.text}`);
}
if (
(name === 'className' || name === 'class') &&
attribute.initializer &&
ts.isStringLiteral(attribute.initializer)
) {
features.push(
...attribute.initializer.text
.split(/\s+/)
.filter(Boolean)
.map((c) => `.${c}`),
);
}
if (
(name === 'part' || name === 'name') &&
attribute.initializer &&
ts.isStringLiteral(attribute.initializer)
) {
features.push(`[${name}=${attribute.initializer.text}]`);
}
}

const children: Ts.NavigationTree[] = [];
if (ts.isJsxElement(node)) {
for (const child of node.children) {
if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child)) {
children.push(makeJsxTree(child, sourceFile));
}
}
}

return {
childItems: children,
kind: ts.ScriptElementKind.variableElement,
kindModifiers: '',
nameSpan: {
length: opening.tagName.getWidth(sourceFile),
start: opening.tagName.getStart(sourceFile),
},
spans: [toSpan(node, sourceFile)],
text: `${tagName}${features.join('')}`,
};
}

function attachJsx(nav: Ts.NavigationTree, node: Ts.Node): void {
node.forEachChild((child) => {
if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child)) {
(nav.childItems ??= []).push(makeJsxTree(child, sourceFile));
return;
}
const matchingNav = findNavForSpan(nav, child, sourceFile);
if (matchingNav) attachJsx(matchingNav, child);
else attachJsx(nav, child);
});
}

attachJsx(tree, sourceFile);
}

function findNavForSpan(
nav: Ts.NavigationTree,
node: Ts.Node,
sourceFile: Ts.SourceFile,
): Ts.NavigationTree | undefined {
const start = node.getStart(sourceFile);
const end = node.getEnd();
return nav.childItems?.find((c) =>
c.spans.some((s) => s.start <= start && end <= s.start + s.length),
);
}

```

- `.class-1.class-2#unique-id[part=unique][name=unique]`
- Accepts both class/className (HTML, Solid, custom JSX runtimes…)

Class / ID / Part / Name are nice for uniqueness, frequency, relevance, greppability.
Everything is displayed as a CSS selector, _à-la_ browser DevTools.

The issue names no repository files or tests; start by reviewing the language-service NavigationTree API and the provided extendWithJsx and attachJsx proof of concept. Done means JSX elements appear in document symbols and navigation trees with nested structure and the proposed identifying labels, with behavior validated in the relevant language-service consumers.

Scritto dal modello di indicizzazione a partire dal testo della issue.