feat(core): reactive queries

Initial runtime implementation of the reactive view queries
(in preparation for the compiler work).

Author: pkozlowski-opensource

packages/core/src/core_reactivity_export_internal.ts

@@ -39,4 +39,5 @@ export {
 export {input} from './render3/reactivity/input';
 export {InputSignal, ɵɵGetInputSignalWriteType} from './render3/reactivity/input_signal';
 export {ModelSignal} from './render3/reactivity/model_signal';
+export {viewChild, viewChildren, ɵɵqueryCreate} from './render3/reactivity/queries';
 // clang-format on

packages/core/src/linker/query_list.ts

@@ -44,7 +44,8 @@ function symbolIterator<T>(this: QueryList<T>): Iterator<T> {
  * @publicApi
  */
 export class QueryList<T> implements Iterable<T> {
-  public readonly dirty = true;
+  public readonly dirty: boolean = true;
+  private _onDirty?: () => void;
   private _results: Array<T> = [];
   private _changesDetected: boolean = false;
   private _changes: EventEmitter<QueryList<T>>|null = null;
@@ -173,9 +174,19 @@ export class QueryList<T> implements Iterable<T> {
       this._changes.emit(this);
   }
 
+  /** internal */
+  onDirty(cb: () => void) {
+    this._onDirty = cb;
+  }
+
   /** internal */
   setDirty() {
-    (this as {dirty: boolean}).dirty = true;
+    if (this.dirty === false) {
+      (this as {dirty: boolean}).dirty = true;
+      if (this._onDirty) {
+        this._onDirty();
+      }
+    }
   }
 
   /** internal */

packages/core/src/render3/query.ts

@@ -418,12 +418,18 @@ function collectQueryResults<T>(tView: TView, lView: LView, queryIndex: number,
  */
 export function ɵɵqueryRefresh(queryList: QueryList<any>): boolean {
   const lView = getLView();
-  const tView = getTView();
   const queryIndex = getCurrentQueryIndex();
 
   setCurrentQueryIndex(queryIndex + 1);
+  return queryRefreshInternal(lView, queryIndex);
+}
 
+export function queryRefreshInternal(lView: LView, queryIndex: number): boolean {
+  const tView = lView[TVIEW];
   const tQuery = getTQuery(tView, queryIndex);
+  const lQuery = lView[QUERIES]!.queries![queryIndex];
+  const queryList = lQuery.queryList;
+
   if (queryList.dirty &&
       (isCreationMode(lView) ===
        ((tQuery.metadata.flags & QueryFlags.isStatic) === QueryFlags.isStatic))) {
@@ -453,6 +459,12 @@ export function ɵɵqueryRefresh(queryList: QueryList<any>): boolean {
  */
 export function ɵɵviewQuery<T>(
     predicate: ProviderToken<unknown>|string[], flags: QueryFlags, read?: any): void {
+  createViewQueryInternal(getLView(), predicate, flags, read);
+}
+
+export function createViewQueryInternal<T>(
+    lView: LView, predicate: ProviderToken<unknown>|string[], flags: QueryFlags,
+    read?: any): number {
   ngDevMode && assertNumber(flags, 'Expecting flags');
   const tView = getTView();
   if (tView.firstCreatePass) {
@@ -461,7 +473,7 @@ export function ɵɵviewQuery<T>(
       tView.staticViewQueries = true;
     }
   }
-  createLQuery<T>(tView, getLView(), flags);
+  return createLQuery<T>(tView, lView, flags);
 }
 
 /**
@@ -502,20 +514,22 @@ export function ɵɵloadQuery<T>(): QueryList<T> {
   return loadQueryInternal<T>(getLView(), getCurrentQueryIndex());
 }
 
-function loadQueryInternal<T>(lView: LView, queryIndex: number): QueryList<T> {
+export function loadQueryInternal<T>(lView: LView, queryIndex: number): QueryList<T> {
   ngDevMode &&
       assertDefined(lView[QUERIES], 'LQueries should be defined when trying to load a query');
   ngDevMode && assertIndexInRange(lView[QUERIES]!.queries, queryIndex);
   return lView[QUERIES]!.queries[queryIndex].queryList;
 }
 
-function createLQuery<T>(tView: TView, lView: LView, flags: QueryFlags) {
+function createLQuery<T>(tView: TView, lView: LView, flags: QueryFlags): number {
   const queryList = new QueryList<T>(
       (flags & QueryFlags.emitDistinctChangesOnly) === QueryFlags.emitDistinctChangesOnly);
   storeCleanupWithContext(tView, lView, queryList, queryList.destroy);
 
   if (lView[QUERIES] === null) lView[QUERIES] = new LQueries_();
   lView[QUERIES]!.queries.push(new LQuery_(queryList));
+
+  return lView[QUERIES]!.queries.length - 1;
 }
 
 function createTQuery(tView: TView, metadata: TQueryMetadata, nodeIndex: number): void {

packages/core/src/render3/reactivity/queries.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ProviderToken} from '../../di/provider_token';
+import {QueryList} from '../../linker';
+import {createSignalFromFunction, ReactiveNode, SIGNAL, Signal} from '../../signals';
+import {QueryFlags} from '../interfaces/query';
+import {LView} from '../interfaces/view';
+import {createViewQueryInternal, loadQueryInternal, queryRefreshInternal} from '../query';
+import {getLView} from '../state';
+
+export interface InternalQuerySignal {
+  bindToQuery(queryIndex: number): void;
+}
+
+abstract class QuerySignal<T> extends ReactiveNode implements InternalQuerySignal {
+  private _lView?: LView;
+  private _queryIndex?: number;
+  protected queryList?: QueryList<T>;
+
+  protected override consumerAllowSignalWrites = false;
+
+  protected override onConsumerDependencyMayHaveChanged(): void {
+    // This never happens for query signals as they're not consumers.
+  }
+  protected override onProducerUpdateValueVersion(): void {
+    if (this.queryList === undefined || !this.queryList?.dirty) {
+      // The current value and its version are already up to date.
+      return;
+    }
+
+    // The current value is stale. Check whether we need to produce a new one.
+    // TODO: assert: I've got both the lView and queryIndex stored
+    if (queryRefreshInternal(this._lView!, this._queryIndex!)) {
+      this.valueVersion++;
+    }
+  }
+
+  bindToQuery(queryIndex: number) {
+    // TODO: assert: should bind only once, make sure it is not re-assigned again
+    this._lView = getLView();
+    this._queryIndex = queryIndex;
+    this.queryList = loadQueryInternal(this._lView, queryIndex);
+
+    this.queryList.onDirty(() => {
+      // Notify any consumers about the potential change. Note that the onDirty callback will fire
+      // only on the initial dirty marking (that is, subsequent dirty notifications are not fired -
+      // until the QueryList becomes clean again).
+      this.producerMayHaveChanged();
+    });
+  }
+
+  protected signalInternal(): void {
+    // Check if the value needs updating before returning it.
+    this.onProducerUpdateValueVersion();
+
+    // Record that someone looked at this signal.
+    this.producerAccessed();
+  }
+}
+
+export class ChildQuerySignalImpl<T> extends QuerySignal<T> {
+  signal(): T|undefined {
+    this.signalInternal();
+    return this.queryList?.first;
+  }
+}
+
+export class ChildrenQuerySignalImpl<T> extends QuerySignal<T> {
+  signal(): T[] {
+    this.signalInternal();
+    // TODO: perf - I should not be obliged to create a new array every time we call signal()
+    return this.queryList?.toArray() ?? [];
+  }
+}
+
+// THINK: code duplication for predicate, flags etc.? Or would it be extracted by the compiler?
+export function ɵɵqueryCreate<T>(
+    target: Signal<T|undefined>, predicate: ProviderToken<unknown>|string[], flags: QueryFlags,
+    read?: any) {
+  const lView = getLView();
+  const reactiveQueryNode = target[SIGNAL] as InternalQuerySignal;
+  reactiveQueryNode.bindToQuery(createViewQueryInternal<T>(lView, predicate, flags, read));
+}
+
+// Q: assuming that the return type must be similar to InputSignal, with the write ability? (this is
+// needed only from the generated code so maybe not?)
+export function viewChild<T>(
+    selector: ProviderToken<unknown>|Function|string,
+    opts?: {read?: any, static?: boolean}): Signal<T|undefined> {
+  const node = new ChildQuerySignalImpl();
+  return createSignalFromFunction<T|undefined>(node, node.signal.bind(node) as Signal<T|undefined>);
+}
+
+export function viewChildren<T>(
+    selector: ProviderToken<unknown>|Function|string,
+    opts?: {read?: any, emitDistinctChangesOnly?: boolean}): Signal<T[]> {
+  // Q: by returning a signal we are effectively "dropping" QueryList from the public API. Is there
+  // anything valuable there that we would be loosing?
+  const node = new ChildrenQuerySignalImpl();
+  return createSignalFromFunction<T[]>(node, node.signal.bind(node) as Signal<T[]>);
+}

packages/core/test/acceptance/signal-components/queries.spec.ts

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, computed, ElementRef, ViewChild, viewChild, viewChildren, ɵɵdefineComponent, ɵɵelement, ɵɵqueryCreate, ɵɵStandaloneFeature} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+
+
+describe('queries', () => {
+  describe('view queries', () => {
+    xit('should support child query in a single view', () => {
+      @Component({
+        signals: true,
+        standalone: true,
+        template: `<div #el></div>`,
+      })
+      class App {
+        // Q1: similar to input, do we allow people to "observe" moment before assigning by throwing
+        // if it is not set? Or return null / undefined? Do static queries make sense in this
+        // context?
+        // Q2: similar to input, do we need both the viewChild function _and_ @ViewChild annotation?
+        @ViewChild('el') divEl = viewChild<ElementRef>('el');
+        foundEl = computed(() => this.divEl() != null);
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundEl()).toBeTrue();
+    });
+
+    xit('should support children query in a single view', () => {
+      @Component({
+        signals: true,
+        standalone: true,
+        template: `<div #el1><div><div #el2><div>`,
+      })
+      class App {
+        @ViewChild('el1,el2') divEls = viewChildren<ElementRef>('el');
+        foundEl = computed(() => this.divEls().length === 2);
+      }
+
+      const fixture = TestBed.createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundEl()).toBeTrue();
+    });
+
+    it('view child - HAND GENERATED CODE - delete after compiler is done', () => {
+      const _c0 = ['el'];
+      class AppComponent {
+        divEl = viewChild<ElementRef>('el');
+        foundEl = computed(() => this.divEl() != null);
+
+        static ɵfac = () => new AppComponent();
+        static ɵcmp = ɵɵdefineComponent({
+          type: AppComponent,
+          selectors: [['test-cmp']],
+          viewQuery:
+              function App_Query(rf, ctx) {
+                // TODO: there should be no update mode for queries any more
+                if (rf & 1) {
+                  ɵɵqueryCreate(ctx.divEl, _c0, 1);
+                }
+              },
+          standalone: true,
+          signals: true,
+          features: [ɵɵStandaloneFeature],
+          decls: 3,
+          vars: 0,
+          consts: [['el', '']],
+          template:
+              function App_Template(rf) {
+                if ((rf & 1)) {
+                  ɵɵelement(0, 'div', null, 0);
+                }
+              },
+          encapsulation: 2
+        });
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundEl()).toBeTrue();
+    });
+
+    it('view children - HAND GENERATED CODE - delete after compiler is done', () => {
+      const _c0 = ['el'];
+      class AppComponent {
+        divEls = viewChildren<ElementRef>('el');
+        foundElsCount = computed(() => this.divEls().length);
+
+        static ɵfac = () => new AppComponent();
+        static ɵcmp = ɵɵdefineComponent({
+          type: AppComponent,
+          selectors: [['test-cmp']],
+          viewQuery:
+              function App_Query(rf, ctx) {
+                // TODO: there should be no update mode for queries any more
+                if (rf & 1) {
+                  ɵɵqueryCreate(ctx.divEls, _c0, 1);
+                }
+              },
+          standalone: true,
+          signals: true,
+          features: [ɵɵStandaloneFeature],
+          decls: 3,
+          vars: 0,
+          consts: [['el', '']],
+          template:
+              function App_Template(rf) {
+                if ((rf & 1)) {
+                  ɵɵelement(0, 'div', null, 0);
+                }
+              },
+          encapsulation: 2
+        });
+      }
+
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.foundElsCount()).toBe(1);
+    });
+  });
+});