Intent to remove: QueryList

[matanlurey]

The class QueryList is a narrow interface on top of List with a .changes getter:

class Comp implements AfterViewInit {
  @ViewChildren(ChildDirective)
  QueryList<ChildDirective> children;

  @override
  ngAfterViewInit() {
    children.listen((_) { ... });
  }
}

However, this pattern isn't used widely, and the changes stream just returns all of the items in the list anyway (no diffing). It would be less costly and more idiomatic with the rest of the framework to just support a setter:

class Comp {
  @ViewChildren(ChildDirective)
  set children(List<Directive> directives) {
    // List of directives has changed.
  }
}

It would also remove the code needed to support QueryList, and the delegating calls to List.

[matanlurey]

(The plan in my head would be to support the setter syntax, migrate all users to the setter syntax, and then remove the QueryList class. It would require relatively small changes in both the runtime and the compiler.)

[matanlurey]

This change has been accepted, and will be started.

The plan currently is:

• Add no-op support for a field typed with dart:core#List.
• Add actual implementation of the new query list.
• Deprecate QueryList.
• Allow the field to be typed Iterable as well as List for the new functionality.
• Migrate existing use cases to dart:core#List.
• Remove QueryList.

I expect this to take a decent amount of time, hopefully complete by v5.

[matanlurey]

Design

Currently the following code is generated to support QueryList:

// query.dart
import 'package:angular/angular.dart';

@Component(
  selector: 'example',
  directives: const [ChildDirective, NgIf],
  template: r'''
    <child *ngIf="someValue"></child>
    <child></child>
  ''',
)
class QueryExample {
  @ViewChildren(ChildDirective)
  QueryList<ChildDirective> childList;
}

@Directive(selector: 'child')
class ChildDirective {}

// query.template.dart
class ViewQueryExample0 extends AppView<import1.QueryExample> {
  import2.QueryList _viewQuery_ChildDirective_0;
  ViewContainer _appEl_0;
  import1.ChildDirective _ChildDirective_0_4;
  import1.ChildDirective _ChildDirective_1_4;

  @override
  ComponentRef<import1.QueryExample> build() {
    _viewQuery_ChildDirective_0 = new import2.QueryList();
    _ChildDirective_0_4 = new import1.ChildDirective();
    _ChildDirective_1_4 = new import1.ChildDirective();
  }

 @override
  void detectChangesInternal() {
    if (_viewQuery_ChildDirective_0.dirty) {
      _viewQuery_ChildDirective_0.reset([
        _appEl_0.mapNestedViews(_ViewQueryExample1, (nestedView) {
          return [nestedView._ChildDirective_0_4];
        }),
        _ChildDirective_1_4
      ]);
      ctx.childList = _viewQuery_ChildDirective_0;
      _viewQuery_ChildDirective_0.notifyOnChanges();
    }
  }
}

class _ViewQueryExample1 extends AppView<import1.QueryExample> {
 @override
  void dirtyParentQueriesInternal() {
    (parentView as ViewQueryExample0)._viewQuery_ChildDirective_0.setDirty();
  }
}

// query_proposal.dart
import 'package:angular/angular.dart';

@Component(
  selector: 'example',
  directives: const [ChildDirective, NgIf],
  template: r'''
    <child *ngIf="someValue"></child>
    <child></child>
  ''',
)
class QueryExample {
  @ViewChildren(ChildDirective)
  List<ChildDirective> childList;
}

@Directive(selector: 'child')
class ChildDirective {}

// query_proposal.template.dart
class ViewQueryExample0 extends AppView<import1.QueryExample> {
  bool _viewQuery_ChildDirective_0isDirty = true;
  ViewContainer _appEl_0;
  import1.ChildDirective _ChildDirective_0_4;
  import1.ChildDirective _ChildDirective_1_4;

  @override
  ComponentRef<import1.QueryExample> build() {
    _ChildDirective_0_4 = new import1.ChildDirective();
    _ChildDirective_1_4 = new import1.ChildDirective();
  }

 @override
  void detectChangesInternal() {
    if (_viewQuery_ChildDirective_0isDirty) {
      ctx.childList = someHelper([
        _appEl_0.mapNestedViews(_ViewQueryExample1, (nestedView) {
          return [nestedView._ChildDirective_0_4];
        }),
        _ChildDirective_1_4
      ]);
      _viewQuery_ChildDirective_0isDirty = false;
    }
  }
}

class _ViewQueryExample1 extends AppView<import1.QueryExample> {
 @override
  void dirtyParentQueriesInternal() {
    (parentView as ViewQueryExample0)._viewQuery_ChildDirective_0isDirty = true;
  }
}

Obviously this code could still use further optimizations, but the simplification of just setting immutable lists of child directives/elements/etc (and removed wrapping of QueryList, which Dart2JS knows isn't a JSArray) is an improvement overall and can lead to further improvements.

[matanlurey]

This is now considered deprecated, pending removal before 5.0.0-beta.

[matanlurey]

Done at HEAD.