From 38945955ab227dbb974b2630eae5869eebf3c902 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Tue, 11 Aug 2015 14:41:38 -0700 Subject: [PATCH] refactor: Remove IQueryList BREAKING CHANGE: Closes #3577 --- modules/angular2/core.ts | 1 - .../src/core/compiler/interface_query.ts | 78 ------------------- .../src/core/compiler/query_list.dart | 72 +++++++++++++++-- .../angular2/src/core/compiler/query_list.ts | 73 +++++++++++++++-- 4 files changed, 134 insertions(+), 90 deletions(-) delete mode 100644 modules/angular2/src/core/compiler/interface_query.ts diff --git a/modules/angular2/core.ts b/modules/angular2/core.ts index f1e398da9e..57fb867ac2 100644 --- a/modules/angular2/core.ts +++ b/modules/angular2/core.ts @@ -16,7 +16,6 @@ export {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver'; export {Compiler} from 'angular2/src/core/compiler/compiler'; export {AppViewManager} from 'angular2/src/core/compiler/view_manager'; -export {IQueryList} from 'angular2/src/core/compiler/interface_query'; export {QueryList} from 'angular2/src/core/compiler/query_list'; export {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; export {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle'; diff --git a/modules/angular2/src/core/compiler/interface_query.ts b/modules/angular2/src/core/compiler/interface_query.ts deleted file mode 100644 index d84aae266c..0000000000 --- a/modules/angular2/src/core/compiler/interface_query.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * An iterable live list of components in the Light DOM. - * - * Injectable Objects that contains a live list of child directives in the light DOM of a directive. - * The directives are kept in depth-first pre-order traversal of the DOM. - * - * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop - * as well as in - * template with `*ng-for="of"` directive. - * - * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain - * list of observable - * callbacks. - * - * # Example: - * - * Assume that `` component would like to get a list its children which are `` - * components as shown in this - * example: - * - * ```html - * - * ... - * {{o.text}} - * - * ``` - * - * In the above example the list of `` elements needs to get a list of `` elements so - * that it could render - * tabs with the correct titles and in the correct order. - * - * A possible solution would be for a `` to inject `` component and then register itself - * with `` - * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this - * would only work - * partialy since `*ng-for` could rearrange the list of `` components which would not be - * reported to `` - * component and thus the list of `` components would be out of sync with respect to the list - * of `` elements. - * - * A preferred solution is to inject a `QueryList` which is a live list of directives in the - * component`s light DOM. - * - * ```javascript - * @Component({ - * selector: 'tabs' - * }) - * @View({ - * template: ` - *
    - *
  • {{pane.title}}
    • - *
- * - * ` - * }) - * class Tabs { - * panes: QueryList - * - * constructor(@Query(Pane) panes:QueryList) { - * this.panes = panes; - * } - * } - * - * @Component({ - * selector: 'pane', - * properties: ['title'] - * }) - * @View(...) - * class Pane { - * title:string; - * } - * ``` - */ -// So far this interface is only used for purposes of having unified documentation. -// There are limitations for exposing the interface as the main entry point. -// - Typescript does not support getters/setters in interfaces -// - Dart does not support generic methods (needed for map). -export interface IQueryList {} diff --git a/modules/angular2/src/core/compiler/query_list.dart b/modules/angular2/src/core/compiler/query_list.dart index a924764a0f..5cd008fdbd 100644 --- a/modules/angular2/src/core/compiler/query_list.dart +++ b/modules/angular2/src/core/compiler/query_list.dart @@ -1,18 +1,78 @@ library angular2.src.core.compiler.query_list; import 'dart:collection'; -import './interface_query.dart'; /** - * Injectable Objects that contains a live list of child directives in the light Dom of a directive. + * An iterable and observable live list of components in the DOM. + * + * A QueryList contains a live list of child directives in the DOM of a directive. * The directives are kept in depth-first pre-order traversal of the DOM. * - * In the future this class will implement an Observable interface. - * For now it uses a plain list of observable callbacks. + * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop + * as well as in template with `*ng-for="of"` directive. + * + * QueryList is updated as part of the change-detection cycle of a directive. Since change detection + * happens after construction of a directive, QueryList will always be empty when observed in the + * constructor. + * + * + * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain + * list of observable callbacks. + * + * # Example: + * + * Assume that `` component would like to get a list its children which are `` + * components as shown in this example: + * + * ```html + * + * ... + * {{o.text}} + * + * ``` + * + * In the above example the list of `` elements needs to get a list of `` elements so + * that it could render tabs with the correct titles and in the correct order. + * + * A possible solution would be for a `` to inject `` component and then register itself + * with `` component's on `hydrate` and deregister on `dehydrate` event. While a reasonable + * approach, this would only work partialy since `*ng-for` could rearrange the list of `` + * components which would not be reported to `` component and thus the list of `` + * components would be out of sync with respect to the list of `` elements. + * + * A preferred solution is to inject a `QueryList` which is a live list of directives in the + * component`s light DOM. + * + * ```javascript + * @Component( + * selector: 'tabs' + * ) + * @View( + * template: ` + *
    + *
  • {{pane.title}}
    • + *
+ * + * ` + * ) + * class Tabs { + * QueryList panes; + * + * constructor(@Query(Pane) QueryList this.panes) { } + * } + * + * @Component( + * selector: 'pane', + * properties: ['title'] + * ) + * @View(...) + * class Pane { + * String title; + * } + * ``` */ class QueryList extends Object - with IterableMixin - implements IQueryList { + with IterableMixin { List _results = []; List _callbacks = []; bool _dirty = false; diff --git a/modules/angular2/src/core/compiler/query_list.ts b/modules/angular2/src/core/compiler/query_list.ts index efdd352703..8154bf078d 100644 --- a/modules/angular2/src/core/compiler/query_list.ts +++ b/modules/angular2/src/core/compiler/query_list.ts @@ -1,14 +1,77 @@ import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection'; -import {IQueryList} from './interface_query'; /** - * Injectable Objects that contains a live list of child directives in the light Dom of a directive. + * An iterable and observable live list of components in the DOM. + * + * A QueryList contains a live list of child directives in the DOM of a directive. * The directives are kept in depth-first pre-order traversal of the DOM. * - * In the future this class will implement an Observable interface. - * For now it uses a plain list of observable callbacks. + * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop + * as well as in template with `*ng-for="of"` directive. + * + * QueryList is updated as part of the change-detection cycle of a directive. Since change detection + * happens after construction of a directive, QueryList will always be empty when observed in the + * constructor. + * + * + * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain + * list of observable callbacks. + * + * # Example: + * + * Assume that `` component would like to get a list its children which are `` + * components as shown in this example: + * + * ```html + * + * ... + * {{o.text}} + * + * ``` + * + * In the above example the list of `` elements needs to get a list of `` elements so + * that it could render tabs with the correct titles and in the correct order. + * + * A possible solution would be for a `` to inject `` component and then register itself + * with `` component's on `hydrate` and deregister on `dehydrate` event. While a reasonable + * approach, this would only work partialy since `*ng-for` could rearrange the list of `` + * components which would not be reported to `` component and thus the list of `` + * components would be out of sync with respect to the list of `` elements. + * + * A preferred solution is to inject a `QueryList` which is a live list of directives in the + * component`s light DOM. + * + * ```javascript + * @Component({ + * selector: 'tabs' + * }) + * @View({ + * template: ` + *
    + *
  • {{pane.title}}
    • + *
+ * + * ` + * }) + * class Tabs { + * panes: QueryList + * + * constructor(@Query(Pane) panes:QueryList) { + * this.panes = panes; + * } + * } + * + * @Component({ + * selector: 'pane', + * properties: ['title'] + * }) + * @View(...) + * class Pane { + * title:string; + * } + * ``` */ -export class QueryList implements IQueryList { +export class QueryList { protected _results: List < T >= []; protected _callbacks: List < () => void >= []; protected _dirty: boolean = false;