Skip to content

refactor(devtools): add static nodes for html-only block content in the component tree #69685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hawkgs wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(devtools): add static nodes for html-only block content in the component tree #69685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions devtools/cypress/cypress.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

module.exports = {
defaultCommandTimeout: 10000, // Increase the default command timeout to 10 seconds
viewportHeight: 2160,

@hawkgs hawkgs Jul 8, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the new collapsing affects the E2E tests somehow – nodes that are below the viewport are not detected due to virtual scroll; hence, the increased viewport size.

e2e: {
specPattern: 'integration/*.e2e.js',
supportFile: 'support/index.js',
Expand Down
1 change: 1 addition & 0 deletions devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,7 @@ const prepareForestForSerialization = (
children: prepareForestForSerialization(node.children, includeResolutionPath),
hydration: node.hydration,
controlFlowBlock: node.controlFlowBlock,
static: node.static,
changeDetection: node.component ? getDirectiveCdStrategy(node.component) : undefined,

// native elements are not serializable
Expand Down
1 change: 1 addition & 0 deletions devtools/projects/ng-devtools-backend/src/lib/directive-forest/control-flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export function createControlFlowTreeNode(
tagName: ELEMENT_NAME_MAP[controlFlowBlock.type],
nativeElement: undefined,
controlFlowBlock: mapToDevtoolsControlFlowModel(controlFlowBlock, iteratorCurrentIdx, rootId),
static: false,
};
}

Expand Down
3 changes: 2 additions & 1 deletion devtools/projects/ng-devtools-backend/src/lib/directive-forest/identity-tracker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,8 @@ const indexTree = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstan
hydration: node.hydration,
controlFlowBlock: node.controlFlowBlock,
injector: node.injector,
} as IndexedNode;
static: node.static,
} satisfies IndexedNode;
};

export const indexForest = <T extends DevToolsNode<DirectiveInstanceType, ComponentInstanceType>>(
Expand Down
2 changes: 2 additions & 0 deletions devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export class LTreeStrategy {
directives: [],
component: null,
controlFlowBlock: null, // neither there will be any control flow block
static: false,
};
}
for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
Expand All @@ -120,6 +121,7 @@ export class LTreeStrategy {
directives,
component,
controlFlowBlock: null, // neither there will be any control flow block
static: false,
};
}

Expand Down
46 changes: 46 additions & 0 deletions devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,4 +192,50 @@ describe('render tree extraction', () => {
}),
);
});

it('should add an `<html_content>` static node for a control flow block with HTML-only content', () => {
// Represent:
//
// <app>
// @defer {
// <div>plain HTML, no component/directive</div>
// }
// </app>

const appNode = document.createElement('app');
const deferHostNode = document.createElement('comment');
const htmlContentNode = document.createElement('div');

appNode.appendChild(deferHostNode);
appNode.appendChild(htmlContentNode);

componentMap.set(appNode, {});

controlFlowBlocksMap.set(appNode, [
{
type: ControlFlowBlockType.Defer,
hostNode: deferHostNode,
rootNodes: [htmlContentNode],
triggers: [],
},
]);

const rtree = treeStrategy.build(appNode);

expect(rtree[0].children.length).toBe(1);

const deferNode = rtree[0].children[0];

expect(deferNode.tagName).toBe('@defer');
expect(deferNode.children.length).toBe(1);
expect(deferNode.children[0]).toEqual(
jasmine.objectContaining({
tagName: '<html_content>',
static: true,
controlFlowBlock: null,
component: null,
children: [],
}),
);
});
});
24 changes: 20 additions & 4 deletions devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ function extractViewTree(
tagName: domNode.nodeName.toLowerCase(),
nativeElement: domNode,
hydration: hydrationStatus(domNode),
static: false,
controlFlowBlock: null,
};

Expand Down Expand Up @@ -88,9 +89,9 @@ function extractViewTree(

const childrenResult = isDisplayableNode ? componentTreeNode.children : result;

for (const node of domNode.childNodes) {
if (!nodesToSkip.has(node)) {
extractViewTree(node, childrenResult, ctx, nodesToSkip);
for (const child of domNode.childNodes) {
if (!nodesToSkip.has(child)) {
extractViewTree(child, childrenResult, ctx, nodesToSkip);
}
}
}
Expand All @@ -110,7 +111,8 @@ function groupControlFlowBlocksChildren(
}

ctx.blocksIterator.advance();
// It's important to store the here index before the recursive call.
// It's important to store the current index before the recursive call
// because it might change at the time of the passing to `createControlFlowTreeNode`.
const iteratorCurrentIdx = ctx.blocksIterator.currentIndex;

const childrenTree: ComponentTreeNode[] = [];
Expand All @@ -121,6 +123,20 @@ function groupControlFlowBlocksChildren(
}
}

// If the there isn't a children tree (i.e. child components)
// but the block has root nodes, we create a static node that
// informs the user that the control flow block
// has HTML-only content.
if (!childrenTree.length && currentBlock.rootNodes.length) {
childrenTree.push({
tagName: '<html_content>',
static: true,
controlFlowBlock: null,
component: null,
children: [],
});
}

const blockTreeNode = createControlFlowTreeNode(
currentBlock,
childrenTree,
Expand Down
15 changes: 15 additions & 0 deletions ...s/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const tree1: DevToolsNode = {
],
component: null,
controlFlowBlock: null,
static: false,

children: [
{
Expand All @@ -34,6 +35,7 @@ const tree1: DevToolsNode = {
tagName: 'bar',
nativeElement: document.createElement('bar'),
controlFlowBlock: null,
static: false,
},
],
nativeElement: document.createElement('foo'),
Expand All @@ -49,6 +51,7 @@ const tree2: DevToolsNode = {
],
component: null,
controlFlowBlock: null,
static: false,

children: [
{
Expand All @@ -62,6 +65,7 @@ const tree2: DevToolsNode = {
tagName: 'bar',
nativeElement: document.createElement('bar'),
controlFlowBlock: null,
static: false,
},
{
children: [],
Expand All @@ -73,6 +77,7 @@ const tree2: DevToolsNode = {
directives: [],
tagName: 'qux',
controlFlowBlock: null,
static: false,
},
],
nativeElement: document.createElement('foo'),
Expand All @@ -88,6 +93,8 @@ const tree3: DevToolsNode = {
],
component: null,
controlFlowBlock: null,
static: false,

children: [
{
children: [],
Expand All @@ -99,6 +106,7 @@ const tree3: DevToolsNode = {
directives: [],
tagName: '#comment',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
{
Expand All @@ -111,6 +119,7 @@ const tree3: DevToolsNode = {
directives: [],
tagName: '#comment',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
],
Expand All @@ -120,6 +129,7 @@ const tree3: DevToolsNode = {
const tree4: DevToolsNode = {
tagName: 'app',
controlFlowBlock: null,
static: false,
directives: [
{
id: 1,
Expand All @@ -146,6 +156,7 @@ const tree4: DevToolsNode = {
directives: [],
tagName: 'bar',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
],
Expand All @@ -157,6 +168,7 @@ const tree4: DevToolsNode = {
directives: [],
tagName: '#comment',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
],
Expand All @@ -168,6 +180,7 @@ const tree4: DevToolsNode = {
directives: [],
tagName: '#comment',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
],
Expand All @@ -179,6 +192,7 @@ const tree4: DevToolsNode = {
directives: [],
tagName: '#comment',
controlFlowBlock: null,
static: false,
nativeElement: document.createComment('bar'),
},
],
Expand All @@ -191,6 +205,7 @@ const tree4: DevToolsNode = {
tagName: '#comment',
nativeElement: document.createComment('bar'),
controlFlowBlock: null,
static: false,
},
],
nativeElement: document.createElement('foo'),
Expand Down
4 changes: 4 additions & 0 deletions .../src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export interface FlatNode {
hydration?: HydrationStatus;
controlFlowBlock: ControlFlowBlock | null;
changeDetection?: ChangeDetection;
collapsedByDefault: boolean;
static: boolean;
hasNativeElement: boolean;
}

Expand Down Expand Up @@ -110,8 +112,10 @@ export class ComponentDataSource extends DataSource<FlatNode> {
level,
hydration: node.hydration,
controlFlowBlock: node.controlFlowBlock,
static: node.static,
changeDetection: node.changeDetection,
hasNativeElement: node.hasNativeElement,
collapsedByDefault: node.children.every((n) => n.static),
};
this._nodeToFlat.set(node, flatNode);
return flatNode;
Expand Down
3 changes: 3 additions & 0 deletions .../src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,12 @@ describe('directive-forest-utils', () => {
directives,
controlFlowBlock: null,
hasNativeElement: true,
static: false,
},
controlFlowBlock: null,
hasNativeElement: true,
collapsedByDefault: false,
static: false,
};
}

Expand Down
20 changes: 17 additions & 3 deletions ...s/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,10 @@ export class DirectiveForestComponent {
}

select(node: FlatNode): void {
if (node.static) {
return;
}

this.populateParents(node.position);
this.selectNode.emit(node.original);
this.selectedNode.set(node);
Expand Down Expand Up @@ -347,13 +351,23 @@ export class DirectiveForestComponent {
this.forestRoot = this.dataSource.data[0];

if (!this.initialized && forest && forest.length) {
this.treeControl.expandAll();
for (const n of this.treeControl.dataNodes) {
if (!n.collapsedByDefault) {
this.treeControl.expand(n);
} else {
this.treeControl.collapse(n);
}
}

this.initialized = true;
result.newItems.forEach((item) => (item.newItem = false));
}
// We want to expand them once they are rendered.
// We want to expand them once they are rendered unless
// they are `collapsedByDefault`.
result.newItems.forEach((item) => {
this.treeControl.expand(item);
if (!item.collapsedByDefault) {
this.treeControl.expand(item);
}
});
return result;
}
Expand Down
Loading
Loading