forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 0
/
view.ts
351 lines (307 loc) · 11.2 KB
/
view.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
/**
* @license
* Copyright Google Inc. 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 {LContainer} from './container';
import {ComponentTemplate, DirectiveDef, PipeDef} from './definition';
import {LElementNode, LViewNode, TNode} from './node';
import {LQueries} from './query';
import {Renderer3} from './renderer';
/**
* `LView` stores all of the information needed to process the instructions as
* they are invoked from the template. Each embedded view and component view has its
* own `LView`. When processing a particular view, we set the `currentView` to that
* `LView`. When that view is done processing, the `currentView` is set back to
* whatever the original `currentView` was before (the parent `LView`).
*
* Keeping separate state for each view facilities view insertion / deletion, so we
* don't have to edit the data array based on which views are present.
*/
export interface LView {
/** Flags for this view (see LViewFlags for definition of each bit). */
flags: LViewFlags;
/**
* The parent view is needed when we exit the view and must restore the previous
* `LView`. Without this, the render method would have to keep a stack of
* views as it is recursively rendering templates.
*/
readonly parent: LView|null;
/**
* Pointer to the `LViewNode` or `LElementNode` which represents the root of the view.
*
* If `LViewNode`, this is an embedded view of a container. We need this to be able to
* efficiently find the `LViewNode` when inserting the view into an anchor.
*
* If `LElementNode`, this is the LView of a component.
*/
readonly node: LViewNode|LElementNode;
/**
* ID to determine whether this view is the same as the previous view
* in this position. If it's not, we know this view needs to be inserted
* and the one that exists needs to be removed (e.g. if/else statements)
*/
readonly id: number;
/** Renderer to be used for this view. */
readonly renderer: Renderer3;
/**
* The binding start index is the index at which the nodes array
* starts to store bindings only. Saving this value ensures that we
* will begin reading bindings at the correct point in the array when
* we are in update mode.
*/
bindingStartIndex: number|null;
/**
* When a view is destroyed, listeners need to be released and outputs need to be
* unsubscribed. This cleanup array stores both listener data (in chunks of 4)
* and output data (in chunks of 2) for a particular view. Combining the arrays
* saves on memory (70 bytes per array) and on a few bytes of code size (for two
* separate for loops).
*
* If it's a listener being stored:
* 1st index is: event name to remove
* 2nd index is: native element
* 3rd index is: listener function
* 4th index is: useCapture boolean
*
* If it's an output subscription:
* 1st index is: unsubscribe function
* 2nd index is: context for function
*/
cleanup: any[]|null;
/**
* This number tracks the next lifecycle hook that needs to be run.
*
* If lifecycleStage === LifecycleStage.ON_INIT, the init hooks haven't yet been run
* and should be executed by the first r() instruction that runs OR the first
* cR() instruction that runs (so inits are run for the top level view before any
* embedded views).
*
* If lifecycleStage === LifecycleStage.CONTENT_INIT, the init hooks have been run, but
* the content hooks have not yet been run. They should be executed on the first
* r() instruction that runs.
*
* If lifecycleStage === LifecycleStage.VIEW_INIT, both the init hooks and content hooks
* have already been run.
*/
lifecycleStage: LifecycleStage;
/**
* The first LView or LContainer beneath this LView in the hierarchy.
*
* Necessary to store this so views can traverse through their nested views
* to remove listeners and call onDestroy callbacks.
*
* For embedded views, we store the LContainer rather than the first ViewState
* to avoid managing splicing when views are added/removed.
*/
child: LView|LContainer|null;
/**
* The last LView or LContainer beneath this LView in the hierarchy.
*
* The tail allows us to quickly add a new state to the end of the view list
* without having to propagate starting from the first child.
*/
tail: LView|LContainer|null;
/**
* The next sibling LView or LContainer.
*
* Allows us to propagate between sibling view states that aren't in the same
* container. Embedded views already have a node.next, but it is only set for
* views in the same container. We need a way to link component views and views
* across containers as well.
*/
next: LView|LContainer|null;
/**
* This array stores all element/text/container nodes created inside this view
* and their bindings. Stored as an array rather than a linked list so we can
* look up nodes directly in the case of forward declaration or bindings
* (e.g. E(1))..
*
* All bindings for a given view are stored in the order in which they
* appear in the template, starting with `bindingStartIndex`.
* We use `bindingIndex` to internally keep track of which binding
* is currently active.
*/
readonly data: any[];
/**
* The static data for this view. We need a reference to this so we can easily walk up the
* node tree in DI and get the TView.data array associated with a node (where the
* directive defs are stored).
*/
tView: TView;
/**
* For dynamically inserted views, the template function to refresh the view.
*/
template: ComponentTemplate<{}>|null;
/**
* - For embedded views, the context with which to render the template.
* - For root view of the root component the context contains change detection data.
* - `null` otherwise.
*/
context: {}|RootContext|null;
/**
* A count of dynamic views that are children of this view (indirectly via containers).
*
* This is used to decide whether to scan children of this view when refreshing dynamic views
* after refreshing the view itself.
*/
dynamicViewCount: number;
/**
* Queries active for this view - nodes from a view are reported to those queries
*/
queries: LQueries|null;
}
/** Flags associated with an LView (saved in LView.flags) */
export const enum LViewFlags {
/**
* Whether or not the view is in creationMode.
*
* This must be stored in the view rather than using `data` as a marker so that
* we can properly support embedded views. Otherwise, when exiting a child view
* back into the parent view, `data` will be defined and `creationMode` will be
* improperly reported as false.
*/
CreationMode = 0b0001,
/** Whether this view has default change detection strategy (checks always) or onPush */
CheckAlways = 0b0010,
/** Whether or not this view is currently dirty (needing check) */
Dirty = 0b0100,
/** Whether or not this view is currently attached to change detection tree. */
Attached = 0b1000,
}
/** Interface necessary to work with view tree traversal */
export interface LViewOrLContainer {
next: LView|LContainer|null;
child?: LView|LContainer|null;
views?: LViewNode[];
parent: LView|null;
}
/**
* The static data for an LView (shared between all templates of a
* given type).
*
* Stored on the template function as ngPrivateData.
*/
export interface TView {
/** Static data equivalent of LView.data[]. Contains TNodes and directive defs. */
data: TData;
/** Whether or not this template has been processed. */
firstTemplatePass: boolean;
/**
* Array of ngOnInit and ngDoCheck hooks that should be executed for this view in
* creation mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
initHooks: HookData|null;
/**
* Array of ngDoCheck hooks that should be executed for this view in update mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
checkHooks: HookData|null;
/**
* Array of ngAfterContentInit and ngAfterContentChecked hooks that should be executed
* for this view in creation mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
contentHooks: HookData|null;
/**
* Array of ngAfterContentChecked hooks that should be executed for this view in update
* mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
contentCheckHooks: HookData|null;
/**
* Array of ngAfterViewInit and ngAfterViewChecked hooks that should be executed for
* this view in creation mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
viewHooks: HookData|null;
/**
* Array of ngAfterViewChecked hooks that should be executed for this view in
* update mode.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
viewCheckHooks: HookData|null;
/**
* Array of ngOnDestroy hooks that should be executed when this view is destroyed.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
destroyHooks: HookData|null;
/**
* A list of element indices for child components that will need to be refreshed when the
* current view has finished its check.
*/
components: number[]|null;
/**
* A list of indices for child directives that have host bindings.
*
* Even indices: Directive indices
* Odd indices: Element indices
*/
hostBindings: number[]|null;
}
/**
* RootContext contains information which is shared for all components which
* were bootstrapped with {@link renderComponent}.
*/
export interface RootContext {
/**
* A function used for scheduling change detection in the future. Usually
* this is `requestAnimationFrame`.
*/
scheduler: (workFn: () => void) => void;
/**
* A promise which is resolved when all components are considered clean (not dirty).
*
* This promise is overwritten every time a first call to {@link markDirty} is invoked.
*/
clean: Promise<null>;
/**
* RootComponent - The component which was instantiated by the call to
* {@link renderComponent}.
*/
component: {};
}
/**
* Array of hooks that should be executed for a view and their directive indices.
*
* Even indices: Directive index
* Odd indices: Hook function
*/
export type HookData = (number | (() => void))[];
/** Possible values of LView.lifecycleStage, used to determine which hooks to run. */
// TODO: Remove this enum when containerRefresh instructions are removed
export const enum LifecycleStage {
/* Init hooks need to be run, if any. */
INIT = 1,
/* Content hooks need to be run, if any. Init hooks have already run. */
AFTER_INIT = 2,
}
/**
* Static data that corresponds to the instance-specific data array on an LView.
*
* Each node's static data is stored in tData at the same index that it's stored
* in the data array. Each directive/pipe's definition is stored here at the same index
* as its directive/pipe instance in the data array. Any nodes that do not have static
* data store a null value in tData to avoid a sparse array.
*/
export type TData = (TNode | DirectiveDef<any>| PipeDef<any>| null)[];
// Note: This hack is necessary so we don't erroneously get a circular dependency
// failure based on types.
export const unusedValueExportToPlacateAjd = 1;