feat(design)!: convert tree to signals (#4408)

This also brings three new features:

- Node IDs are now scoped to each tree instance: ids are composed as `<treeId>.<id>` down the ancestor chain.

- `DaffTreeComponent` exposes an `id` input with an auto-incrementing fallback so multiple trees on the same page nlonger collide on element IDs.

- When a tree item becomes `selected`, the item opens its full ancestor chain via the new `daffTreeOpenAncestors` helper and notifies the tree to re-flatten, so selected items are revealed without consumers having to call `open` manually.

BREAKING CHANGE: `DaffTreeComponent` and `DaffTreeItemDirective` now expose their inputs (`tree`, `renderMode`, `node`, `selected`), content queries (`withChildrenTemplate`, `treeItemTemplate`), and the public `flatTree` field as signals rather than plain properties. Template bindings (`[tree]="data"`) continue to work, but any programmatic reads must invoke the signal: `component.flatTree` → `component.flatTree()`, `component.tree` → `component.tree()`,`directive.node` → `directive.node()`, and so on. Consumers that read these fields from tests or component code must update accordingly.

Author: damienwebdev

libs/design/tree/src/tree-item/tree-item.directive.ts

@@ -1,14 +1,18 @@
 /* eslint-disable quote-props */
 
+import { DOCUMENT } from '@angular/common';
 import {
+  computed,
   Directive,
-  Inject,
-  Input,
-  DOCUMENT,
+  effect,
+  inject,
+  input,
+  untracked,
 } from '@angular/core';
 
 import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
 import { DaffTreeFlatNode } from '../utils/flatten-tree';
+import { daffTreeOpenAncestors } from '../utils/open-ancestors';
 
 /**
  * The `DaffTreeItemDirective` marks elements as tree child nodes that interact with the parent tree structure.
@@ -34,89 +38,86 @@ import { DaffTreeFlatNode } from '../utils/flatten-tree';
   selector: '[daffTreeItem]',
   host: {
     'class': 'daff-tree-item',
-    '[class.selected]': 'selected',
-    '[class.parent]': 'isParent',
-    '[class.open]': 'open',
-    '[attr.id]': 'id',
-    '[attr.aria-expanded]': 'ariaExpanded',
-    '[style.--depth]': 'depth',
+    '[class.selected]': 'selected()',
+    '[class.parent]': 'isParent()',
+    '[class.open]': 'open()',
+    '[attr.id]': 'id()',
+    '[attr.aria-expanded]': 'ariaExpanded()',
+    '[style.--depth]': 'depth()',
     '(keydown.escape)': 'onEscape()',
     '(click)': 'onClick()',
   },
 })
 export class DaffTreeItemDirective {
-  private isParent = false;
+  private document = inject(DOCUMENT);
+  private treeNotifier = inject(DaffTreeNotifierService);
 
   /**
-   * The html `id` of the tree item. This is derived from the {@link DaffTreeData}.
-   *
+   * The {@link DaffTreeFlatNode} associated with this specific tree item.
    */
-  private id: string;
+  readonly node = input.required<DaffTreeFlatNode>();
 
   /**
-   * Accessibility property, notifying users about whether
-   * or not the tree item is open.
+   * Whether or not the tree item is the currently active item.
+   * Note that there is no requirement that there only be one active item at a time.
+   *
+   * When a tree item becomes selected, all of its ancestor nodes
+   * will be automatically opened so that the selected item is visible.
    */
-  private ariaExpanded: string;
+  readonly selected = input(false);
 
   /**
-   * A property indicating the depth of the tree.
+   * The html `id` of the tree item. This is derived from the {@link DaffTreeData}.
    */
-  private depth: number;
+  protected readonly id = computed(() => 'tree-' + this.node().id);
 
   /**
-   * Indicates whether or not the tree is `open`.
+   * A property indicating the depth of the tree.
    */
-  private open = false;
+  protected readonly depth = computed(() => this.node().level);
 
   /**
-   * The {@link DaffTreeFlatNode} associated with this specific tree item.
+   * Whether or not this node has children.
    */
-  private _node: DaffTreeFlatNode;
+  protected readonly isParent = computed(() => this.node().hasChildren);
 
   /**
-   * The {@link DaffTreeFlatNode} associated with this specific tree item.
+   * Indicates whether or not the tree is `open`.
    */
-  @Input()
-  get node() {
-    return this._node;
-  };
-  set node(val: DaffTreeFlatNode) {
-    this._node = val;
-    this.id = 'tree-' + this._node.id;
-    this.depth = this._node.level;
-    this.isParent = this._node.hasChildren;
-    this.open = this._node._treeRef.open;
-
-    if(this._node.hasChildren) {
-      this.ariaExpanded = this._node._treeRef.open ? 'true' : 'false';
-    }
-  }
+  protected readonly open = computed(() => this.node()._treeRef.open);
 
   /**
-   * Whether or not the tree item is the currently active item.
-   * Note that there is no requirement that there only be one active item at a time.
+   * Accessibility property, notifying users about whether
+   * or not the tree item is open.
    */
-  @Input() selected = false;
-
-  constructor(
-    @Inject(DOCUMENT) private document: any,
-    private treeNotifier: DaffTreeNotifierService,
-  ) {}
+  protected readonly ariaExpanded = computed(() => {
+    const node = this.node();
+    return node.hasChildren ? (node._treeRef.open ? 'true' : 'false') : undefined;
+  });
+
+  constructor() {
+    effect(() => {
+      if(this.selected()) {
+        const node = untracked(this.node);
+        daffTreeOpenAncestors(node._treeRef);
+        this.treeNotifier.notify();
+      }
+    });
+  }
 
   /**
    * @docs-private
    */
   onEscape() {
-    this.toggleParent(this.node);
+    this.toggleParent(this.node());
   }
 
   /**
    * @docs-private
    */
   onClick() {
-    if(this.node.hasChildren) {
-      this.toggleTree(this.node);
+    if(this.node().hasChildren) {
+      this.toggleTree(this.node());
     }
     this.treeNotifier.notify();
   }

libs/design/tree/src/tree/specs/defaults.spec.ts

@@ -33,7 +33,7 @@ describe('@daffodil/design/tree | DaffTreeComponent | Defaults', () => {
   });
 
   it('should have sane defaults', () => {
-    expect(component.flatTree).toEqual([]);
-    expect(component.tree).toEqual(undefined);
+    expect(component.flatTree()).toEqual([]);
+    expect(component.tree()).toEqual(undefined);
   });
 });

libs/design/tree/src/tree/specs/render-modes.spec.ts

@@ -1,6 +1,6 @@
 import {
   Component,
-  Input,
+  signal,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -15,7 +15,7 @@ import { DaffTreeComponent } from '../tree.component';
 
 @Component({
   template: `
-    <ul daff-tree [tree]="data" [renderMode]="renderMode">
+    <ul daff-tree [tree]="data()" [renderMode]="renderMode()">
       <ng-template #daffTreeItemWithChildrenTpl let-node>
           <button daffTreeItem [node]="node">{{ node.title }} </button>
       </ng-template>
@@ -31,8 +31,8 @@ import { DaffTreeComponent } from '../tree.component';
   ],
 })
 class WrapperComponent {
-  @Input() data: DaffTreeData<any>;
-  @Input() renderMode: DaffTreeRenderMode;
+  data = signal<DaffTreeData<any>>(undefined);
+  renderMode = signal<DaffTreeRenderMode>(undefined);
 }
 
 
@@ -62,25 +62,25 @@ describe('@daffodil/design/tree | DaffTreeComponent | renderModes', () => {
   });
 
   it('should render two nodes when renderMode is `not-in-dom`', () => {
-    wrapper.data = { title: 'Root', url: '', id: '', items: [
+    wrapper.data.set({ title: 'Root', url: '', id: '', items: [
       { title: 'Child A', url: '', id: '', items: [
         { title: 'Child Aa', url: '', id: '', items: [], data: {}},
       ], data: {}},
       { title: 'Child B', url: '', id: '', items: [], data: {}},
-    ], data: {}};
-    wrapper.renderMode = 'not-in-dom';
+    ], data: {}});
+    wrapper.renderMode.set('not-in-dom');
     fixture.detectChanges();
     expect(fixture.debugElement.queryAll(By.css('li')).length).toEqual(2);
   });
 
   it('should render three nodes when renderMode is `in-dom`', () => {
-    wrapper.data = { title: 'Root', url: '', id: '', items: [
+    wrapper.data.set({ title: 'Root', url: '', id: '', items: [
       { title: 'Child A', url: '', id: '', items: [
         { title: 'Child Aa', url: '', id: '', items: [], data: {}},
       ], data: {}},
       { title: 'Child B', url: '', id: '', items: [], data: {}},
-    ], data: {}};
-    wrapper.renderMode = 'in-dom';
+    ], data: {}});
+    wrapper.renderMode.set('in-dom');
     fixture.detectChanges();
     expect(fixture.debugElement.queryAll(By.css('li')).length).toEqual(3);
   });

libs/design/tree/src/tree/specs/simple.spec.ts

@@ -1,6 +1,6 @@
 import {
   Component,
-  Input,
+  signal,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -13,14 +13,14 @@ import { DaffTreeComponent } from '../tree.component';
 
 @Component({
   template: `
-    <ul daff-tree [tree]="data"></ul>
+    <ul daff-tree [tree]="data()"></ul>
   `,
   imports: [
     DaffTreeComponent,
   ],
 })
 class WrapperComponent {
-  @Input() data: DaffTreeData<any>;
+  data = signal<DaffTreeData<any>>(undefined);
 }
 
 describe('@daffodil/design/tree | DaffTreeComponent | Simple', () => {
@@ -54,7 +54,7 @@ describe('@daffodil/design/tree | DaffTreeComponent | Simple', () => {
   });
 
   it('should render nothing within the tree when data is provided with no templates', () => {
-    wrapper.data = { title: '', url: '', id: '', items: [], data: {}};
+    wrapper.data.set({ title: '', url: '', id: '', items: [], data: {}});
     fixture.detectChanges();
 
     expect(el).toBeTruthy();

libs/design/tree/src/tree/specs/with-template.spec.ts

@@ -1,6 +1,6 @@
 import {
   Component,
-  Input,
+  signal,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -14,7 +14,7 @@ import { DaffTreeComponent } from '../tree.component';
 
 @Component({
   template: `
-    <ul daff-tree [tree]="data">
+    <ul daff-tree [tree]="data()">
       <ng-template #daffTreeItemWithChildrenTpl let-node>
           <button daffTreeItem [node]="node">{{ node.title }} </button>
       </ng-template>
@@ -30,7 +30,7 @@ import { DaffTreeComponent } from '../tree.component';
   ],
 })
 class WrapperComponent {
-  @Input() data: DaffTreeData<any>;
+  data = signal<DaffTreeData<any>>(undefined);
 }
 
 
@@ -60,23 +60,23 @@ describe('@daffodil/design/tree - DaffTreeComponent | withTemplate', () => {
   });
 
   it('should render something when data and templates are provided', () => {
-    wrapper.data = { title: 'Root', url: '', id: '', items: [
+    wrapper.data.set({ title: 'Root', url: '', id: '', items: [
       { title: 'Child A', url: '', id: '', items: [
         { title: 'Child Aa', url: '', id: '', items: [], data: {}},
       ], data: {}},
       { title: 'Child B', url: '', id: '', items: [], data: {}},
-    ], data: {}};
+    ], data: {}});
     fixture.detectChanges();
     expect(fixture.debugElement.query(By.css('li')).componentInstance instanceof DaffTreeComponent).toBeTrue();
   });
 
   it('should render the same number of items as there are tree branches', () => {
-    wrapper.data = { title: 'Root', url: '', id: '', items: [
+    wrapper.data.set({ title: 'Root', url: '', id: '', items: [
       { title: 'Child A', url: '', id: '', items: [
         { title: 'Child Aa', url: '', id: '', items: [], data: {}},
       ], data: {}},
       { title: 'Child B', url: '', id: '', items: [], data: {}},
-    ], data: {}};
+    ], data: {}});
     fixture.detectChanges();
     expect(fixture.debugElement.queryAll(By.css('li')).length).toEqual(3);
   });

libs/design/tree/src/tree/tree.component.html

@@ -1,7 +1,7 @@
-@for (node of flatTree; track node.id) {
+@for (node of flatTree(); track node.id) {
 	<li [attr.aria-level]="node.level" [class.hidden]="!node.visible">
 		<ng-container
-			*ngTemplateOutlet="node.hasChildren ? withChildrenTemplate : treeItemTemplate; context: { $implicit: node }">
+			*ngTemplateOutlet="node.hasChildren ? withChildrenTemplate() : treeItemTemplate(); context: { $implicit: node }">
 		</ng-container>
 	</li>
 }