-
Notifications
You must be signed in to change notification settings - Fork 2k
/
property-effects.js
3205 lines (3081 loc) · 118 KB
/
property-effects.js
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
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/**
* @fileoverview
* @suppress {checkPrototypalTypes}
* @license Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
* Google as part of the polymer project is also subject to an additional IP
* rights grant found at http://polymer.github.io/PATENTS.txt
*/
import '../utils/boot.js';
import { wrap } from '../utils/wrap.js';
import { dedupingMixin } from '../utils/mixin.js';
import { root, isAncestor, isDescendant, get, translate, isPath, set, normalize } from '../utils/path.js';
/* for notify, reflect */
import { camelToDashCase, dashToCamelCase } from '../utils/case-map.js';
import { PropertyAccessors } from './property-accessors.js';
/* for annotated effects */
import { TemplateStamp } from './template-stamp.js';
import { sanitizeDOMValue, legacyUndefined, orderedComputed, removeNestedTemplates, fastDomIf } from '../utils/settings.js';
// Monotonically increasing unique ID used for de-duping effects triggered
// from multiple properties in the same turn
let dedupeId = 0;
const NOOP = [];
/**
* Property effect types; effects are stored on the prototype using these keys
* @enum {string}
*/
const TYPES = {
COMPUTE: '__computeEffects',
REFLECT: '__reflectEffects',
NOTIFY: '__notifyEffects',
PROPAGATE: '__propagateEffects',
OBSERVE: '__observeEffects',
READ_ONLY: '__readOnly'
};
const COMPUTE_INFO = '__computeInfo';
/** @const {!RegExp} */
const capitalAttributeRegex = /[A-Z]/;
/**
* @typedef {{
* name: (string | undefined),
* structured: (boolean | undefined),
* wildcard: (boolean | undefined)
* }}
*/
let DataTrigger; //eslint-disable-line no-unused-vars
/**
* @typedef {{
* info: ?,
* trigger: (!DataTrigger | undefined),
* fn: (!Function | undefined)
* }}
*/
let DataEffect; //eslint-disable-line no-unused-vars
/**
* Ensures that the model has an own-property map of effects for the given type.
* The model may be a prototype or an instance.
*
* Property effects are stored as arrays of effects by property in a map,
* by named type on the model. e.g.
*
* __computeEffects: {
* foo: [ ... ],
* bar: [ ... ]
* }
*
* If the model does not yet have an effect map for the type, one is created
* and returned. If it does, but it is not an own property (i.e. the
* prototype had effects), the the map is deeply cloned and the copy is
* set on the model and returned, ready for new effects to be added.
*
* @param {Object} model Prototype or instance
* @param {string} type Property effect type
* @param {boolean=} cloneArrays Clone any arrays assigned to the map when
* extending a superclass map onto this subclass
* @return {Object} The own-property map of effects for the given type
* @private
*/
function ensureOwnEffectMap(model, type, cloneArrays) {
let effects = model[type];
if (!effects) {
effects = model[type] = {};
} else if (!model.hasOwnProperty(type)) {
effects = model[type] = Object.create(model[type]);
if (cloneArrays) {
for (let p in effects) {
let protoFx = effects[p];
// Perf optimization over Array.slice
let instFx = effects[p] = Array(protoFx.length);
for (let i=0; i<protoFx.length; i++) {
instFx[i] = protoFx[i];
}
}
}
}
return effects;
}
// -- effects ----------------------------------------------
/**
* Runs all effects of a given type for the given set of property changes
* on an instance.
*
* @param {!Polymer_PropertyEffects} inst The instance with effects to run
* @param {?Object} effects Object map of property-to-Array of effects
* @param {?Object} props Bag of current property changes
* @param {?Object=} oldProps Bag of previous values for changed properties
* @param {boolean=} hasPaths True with `props` contains one or more paths
* @param {*=} extraArgs Additional metadata to pass to effect function
* @return {boolean} True if an effect ran for this property
* @private
*/
function runEffects(inst, effects, props, oldProps, hasPaths, extraArgs) {
if (effects) {
let ran = false;
const id = dedupeId++;
for (let prop in props) {
// Inline `runEffectsForProperty` for perf.
let rootProperty = hasPaths ? root(prop) : prop;
let fxs = effects[rootProperty];
if (fxs) {
for (let i=0, l=fxs.length, fx; (i<l) && (fx=fxs[i]); i++) {
if ((!fx.info || fx.info.lastRun !== id) &&
(!hasPaths || pathMatchesTrigger(prop, fx.trigger))) {
if (fx.info) {
fx.info.lastRun = id;
}
fx.fn(inst, prop, props, oldProps, fx.info, hasPaths, extraArgs);
ran = true;
}
}
}
}
return ran;
}
return false;
}
/**
* Runs a list of effects for a given property.
*
* @param {!Polymer_PropertyEffects} inst The instance with effects to run
* @param {!Object} effects Object map of property-to-Array of effects
* @param {number} dedupeId Counter used for de-duping effects
* @param {string} prop Name of changed property
* @param {*} props Changed properties
* @param {*} oldProps Old properties
* @param {boolean=} hasPaths True with `props` contains one or more paths
* @param {*=} extraArgs Additional metadata to pass to effect function
* @return {boolean} True if an effect ran for this property
* @private
*/
function runEffectsForProperty(inst, effects, dedupeId, prop, props, oldProps, hasPaths, extraArgs) {
let ran = false;
let rootProperty = hasPaths ? root(prop) : prop;
let fxs = effects[rootProperty];
if (fxs) {
for (let i=0, l=fxs.length, fx; (i<l) && (fx=fxs[i]); i++) {
if ((!fx.info || fx.info.lastRun !== dedupeId) &&
(!hasPaths || pathMatchesTrigger(prop, fx.trigger))) {
if (fx.info) {
fx.info.lastRun = dedupeId;
}
fx.fn(inst, prop, props, oldProps, fx.info, hasPaths, extraArgs);
ran = true;
}
}
}
return ran;
}
/**
* Determines whether a property/path that has changed matches the trigger
* criteria for an effect. A trigger is a descriptor with the following
* structure, which matches the descriptors returned from `parseArg`.
* e.g. for `foo.bar.*`:
* ```
* trigger: {
* name: 'a.b',
* structured: true,
* wildcard: true
* }
* ```
* If no trigger is given, the path is deemed to match.
*
* @param {string} path Path or property that changed
* @param {?DataTrigger} trigger Descriptor
* @return {boolean} Whether the path matched the trigger
*/
function pathMatchesTrigger(path, trigger) {
if (trigger) {
let triggerPath = /** @type {string} */ (trigger.name);
return (triggerPath == path) ||
!!(trigger.structured && isAncestor(triggerPath, path)) ||
!!(trigger.wildcard && isDescendant(triggerPath, path));
} else {
return true;
}
}
/**
* Implements the "observer" effect.
*
* Calls the method with `info.methodName` on the instance, passing the
* new and old values.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {string} property Name of property
* @param {Object} props Bag of current property changes
* @param {Object} oldProps Bag of previous values for changed properties
* @param {?} info Effect metadata
* @return {void}
* @private
*/
function runObserverEffect(inst, property, props, oldProps, info) {
let fn = typeof info.method === "string" ? inst[info.method] : info.method;
let changedProp = info.property;
if (fn) {
fn.call(inst, inst.__data[changedProp], oldProps[changedProp]);
} else if (!info.dynamicFn) {
console.warn('observer method `' + info.method + '` not defined');
}
}
/**
* Runs "notify" effects for a set of changed properties.
*
* This method differs from the generic `runEffects` method in that it
* will dispatch path notification events in the case that the property
* changed was a path and the root property for that path didn't have a
* "notify" effect. This is to maintain 1.0 behavior that did not require
* `notify: true` to ensure object sub-property notifications were
* sent.
*
* @param {!Polymer_PropertyEffects} inst The instance with effects to run
* @param {Object} notifyProps Bag of properties to notify
* @param {Object} props Bag of current property changes
* @param {Object} oldProps Bag of previous values for changed properties
* @param {boolean} hasPaths True with `props` contains one or more paths
* @return {void}
* @private
*/
function runNotifyEffects(inst, notifyProps, props, oldProps, hasPaths) {
// Notify
let fxs = inst[TYPES.NOTIFY];
let notified;
let id = dedupeId++;
// Try normal notify effects; if none, fall back to try path notification
for (let prop in notifyProps) {
if (notifyProps[prop]) {
if (fxs && runEffectsForProperty(inst, fxs, id, prop, props, oldProps, hasPaths)) {
notified = true;
} else if (hasPaths && notifyPath(inst, prop, props)) {
notified = true;
}
}
}
// Flush host if we actually notified and host was batching
// And the host has already initialized clients; this prevents
// an issue with a host observing data changes before clients are ready.
let host;
if (notified && (host = inst.__dataHost) && host._invalidateProperties) {
host._invalidateProperties();
}
}
/**
* Dispatches {property}-changed events with path information in the detail
* object to indicate a sub-path of the property was changed.
*
* @param {!Polymer_PropertyEffects} inst The element from which to fire the
* event
* @param {string} path The path that was changed
* @param {Object} props Bag of current property changes
* @return {boolean} Returns true if the path was notified
* @private
*/
function notifyPath(inst, path, props) {
let rootProperty = root(path);
if (rootProperty !== path) {
let eventName = camelToDashCase(rootProperty) + '-changed';
dispatchNotifyEvent(inst, eventName, props[path], path);
return true;
}
return false;
}
/**
* Dispatches {property}-changed events to indicate a property (or path)
* changed.
*
* @param {!Polymer_PropertyEffects} inst The element from which to fire the
* event
* @param {string} eventName The name of the event to send
* ('{property}-changed')
* @param {*} value The value of the changed property
* @param {string | null | undefined} path If a sub-path of this property
* changed, the path that changed (optional).
* @return {void}
* @private
* @suppress {invalidCasts}
*/
function dispatchNotifyEvent(inst, eventName, value, path) {
let detail = {
value: value,
queueProperty: true
};
if (path) {
detail.path = path;
}
// As a performance optimization, we could elide the wrap here since notifying
// events are non-bubbling and shouldn't need retargeting. However, a very
// small number of internal tests failed in obscure ways, which may indicate
// user code relied on timing differences resulting from ShadyDOM flushing
// as a result of the wrapped `dispatchEvent`.
wrap(/** @type {!HTMLElement} */(inst)).dispatchEvent(new CustomEvent(eventName, { detail }));
}
/**
* Implements the "notify" effect.
*
* Dispatches a non-bubbling event named `info.eventName` on the instance
* with a detail object containing the new `value`.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {string} property Name of property
* @param {Object} props Bag of current property changes
* @param {Object} oldProps Bag of previous values for changed properties
* @param {?} info Effect metadata
* @param {boolean} hasPaths True with `props` contains one or more paths
* @return {void}
* @private
*/
function runNotifyEffect(inst, property, props, oldProps, info, hasPaths) {
let rootProperty = hasPaths ? root(property) : property;
let path = rootProperty != property ? property : null;
let value = path ? get(inst, path) : inst.__data[property];
if (path && value === undefined) {
value = props[property]; // specifically for .splices
}
dispatchNotifyEvent(inst, info.eventName, value, path);
}
/**
* Handler function for 2-way notification events. Receives context
* information captured in the `addNotifyListener` closure from the
* `__notifyListeners` metadata.
*
* Sets the value of the notified property to the host property or path. If
* the event contained path information, translate that path to the host
* scope's name for that path first.
*
* @param {CustomEvent} event Notification event (e.g. '<property>-changed')
* @param {!Polymer_PropertyEffects} inst Host element instance handling the
* notification event
* @param {string} fromProp Child element property that was bound
* @param {string} toPath Host property/path that was bound
* @param {boolean} negate Whether the binding was negated
* @return {void}
* @private
*/
function handleNotification(event, inst, fromProp, toPath, negate) {
let value;
let detail = /** @type {Object} */(event.detail);
let fromPath = detail && detail.path;
if (fromPath) {
toPath = translate(fromProp, toPath, fromPath);
value = detail && detail.value;
} else {
value = event.currentTarget[fromProp];
}
value = negate ? !value : value;
if (!inst[TYPES.READ_ONLY] || !inst[TYPES.READ_ONLY][toPath]) {
if (inst._setPendingPropertyOrPath(toPath, value, true, Boolean(fromPath))
&& (!detail || !detail.queueProperty)) {
inst._invalidateProperties();
}
}
}
/**
* Implements the "reflect" effect.
*
* Sets the attribute named `info.attrName` to the given property value.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {string} property Name of property
* @param {Object} props Bag of current property changes
* @param {Object} oldProps Bag of previous values for changed properties
* @param {?} info Effect metadata
* @return {void}
* @private
*/
function runReflectEffect(inst, property, props, oldProps, info) {
let value = inst.__data[property];
if (sanitizeDOMValue) {
value = sanitizeDOMValue(value, info.attrName, 'attribute', /** @type {Node} */(inst));
}
inst._propertyToAttribute(property, info.attrName, value);
}
/**
* Runs "computed" effects for a set of changed properties.
*
* This method differs from the generic `runEffects` method in that it
* continues to run computed effects based on the output of each pass until
* there are no more newly computed properties. This ensures that all
* properties that will be computed by the initial set of changes are
* computed before other effects (binding propagation, observers, and notify)
* run.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {?Object} changedProps Bag of changed properties
* @param {?Object} oldProps Bag of previous values for changed properties
* @param {boolean} hasPaths True with `props` contains one or more paths
* @return {void}
* @private
*/
function runComputedEffects(inst, changedProps, oldProps, hasPaths) {
let computeEffects = inst[TYPES.COMPUTE];
if (computeEffects) {
if (orderedComputed) {
// Runs computed effects in efficient order by keeping a topologically-
// sorted queue of compute effects to run, and inserting subsequently
// invalidated effects as they are run
dedupeId++;
const order = getComputedOrder(inst);
const queue = [];
for (let p in changedProps) {
enqueueEffectsFor(p, computeEffects, queue, order, hasPaths);
}
let info;
while ((info = queue.shift())) {
if (runComputedEffect(inst, '', changedProps, oldProps, info)) {
enqueueEffectsFor(info.methodInfo, computeEffects, queue, order, hasPaths);
}
}
Object.assign(/** @type {!Object} */ (oldProps), inst.__dataOld);
Object.assign(/** @type {!Object} */ (changedProps), inst.__dataPending);
inst.__dataPending = null;
} else {
// Original Polymer 2.x computed effects order, which continues running
// effects until no further computed properties have been invalidated
let inputProps = changedProps;
while (runEffects(inst, computeEffects, inputProps, oldProps, hasPaths)) {
Object.assign(/** @type {!Object} */ (oldProps), inst.__dataOld);
Object.assign(/** @type {!Object} */ (changedProps), inst.__dataPending);
inputProps = inst.__dataPending;
inst.__dataPending = null;
}
}
}
}
/**
* Inserts a computed effect into a queue, given the specified order. Performs
* the insert using a binary search.
*
* Used by `orderedComputed: true` computed property algorithm.
*
* @param {Object} info Property effects metadata
* @param {Array<Object>} queue Ordered queue of effects
* @param {Map<string,number>} order Map of computed property name->topological
* sort order
*/
const insertEffect = (info, queue, order) => {
let start = 0;
let end = queue.length - 1;
let idx = -1;
while (start <= end) {
const mid = (start + end) >> 1;
// Note `methodInfo` is where the computed property name is stored in
// the effect metadata
const cmp = order.get(queue[mid].methodInfo) - order.get(info.methodInfo);
if (cmp < 0) {
start = mid + 1;
} else if (cmp > 0) {
end = mid - 1;
} else {
idx = mid;
break;
}
}
if (idx < 0) {
idx = end + 1;
}
queue.splice(idx, 0, info);
};
/**
* Inserts all downstream computed effects invalidated by the specified property
* into the topologically-sorted queue of effects to be run.
*
* Used by `orderedComputed: true` computed property algorithm.
*
* @param {string} prop Property name
* @param {Object} computeEffects Computed effects for this element
* @param {Array<Object>} queue Topologically-sorted queue of computed effects
* to be run
* @param {Map<string,number>} order Map of computed property name->topological
* sort order
* @param {boolean} hasPaths True with `changedProps` contains one or more paths
*/
const enqueueEffectsFor = (prop, computeEffects, queue, order, hasPaths) => {
const rootProperty = hasPaths ? root(prop) : prop;
const fxs = computeEffects[rootProperty];
if (fxs) {
for (let i=0; i<fxs.length; i++) {
const fx = fxs[i];
if ((fx.info.lastRun !== dedupeId) &&
(!hasPaths || pathMatchesTrigger(prop, fx.trigger))) {
fx.info.lastRun = dedupeId;
insertEffect(fx.info, queue, order);
}
}
}
};
/**
* Generates and retrieves a memoized map of computed property name to its
* topologically-sorted order.
*
* The map is generated by first assigning a "dependency count" to each property
* (defined as number properties it depends on, including its method for
* "dynamic functions"). Any properties that have no dependencies are added to
* the `ready` queue, which are properties whose order can be added to the final
* order map. Properties are popped off the `ready` queue one by one and a.) added as
* the next property in the order map, and b.) each property that it is a
* dependency for has its dep count decremented (and if that property's dep
* count goes to zero, it is added to the `ready` queue), until all properties
* have been visited and ordered.
*
* Used by `orderedComputed: true` computed property algorithm.
*
* @param {!Polymer_PropertyEffects} inst The instance to retrieve the computed
* effect order for.
* @return {Map<string,number>} Map of computed property name->topological sort
* order
*/
function getComputedOrder(inst) {
let ordered = inst.constructor.__orderedComputedDeps;
if (!ordered) {
ordered = new Map();
const effects = inst[TYPES.COMPUTE];
let {counts, ready, total} = dependencyCounts(inst);
let curr;
while ((curr = ready.shift())) {
ordered.set(curr, ordered.size);
const computedByCurr = effects[curr];
if (computedByCurr) {
computedByCurr.forEach(fx => {
// Note `methodInfo` is where the computed property name is stored
const computedProp = fx.info.methodInfo;
--total;
if (--counts[computedProp] === 0) {
ready.push(computedProp);
}
});
}
}
if (total !== 0) {
const el = /** @type {HTMLElement} */ (inst);
console.warn(`Computed graph for ${el.localName} incomplete; circular?`);
}
inst.constructor.__orderedComputedDeps = ordered;
}
return ordered;
}
/**
* Generates a map of property-to-dependency count (`counts`, where "dependency
* count" is the number of dependencies a given property has assuming it is a
* computed property, otherwise 0). It also returns a pre-populated list of
* `ready` properties that have no dependencies and a `total` count, which is
* used for error-checking the graph.
*
* Used by `orderedComputed: true` computed property algorithm.
*
* @param {!Polymer_PropertyEffects} inst The instance to generate dependency
* counts for.
* @return {!Object} Object containing `counts` map (property-to-dependency
* count) and pre-populated `ready` array of properties that had zero
* dependencies.
*/
function dependencyCounts(inst) {
const infoForComputed = inst[COMPUTE_INFO];
const counts = {};
const computedDeps = inst[TYPES.COMPUTE];
const ready = [];
let total = 0;
// Count dependencies for each computed property
for (let p in infoForComputed) {
const info = infoForComputed[p];
// Be sure to add the method name itself in case of "dynamic functions"
total += counts[p] =
info.args.filter(a => !a.literal).length + (info.dynamicFn ? 1 : 0);
}
// Build list of ready properties (that aren't themselves computed)
for (let p in computedDeps) {
if (!infoForComputed[p]) {
ready.push(p);
}
}
return {counts, ready, total};
}
/**
* Implements the "computed property" effect by running the method with the
* values of the arguments specified in the `info` object and setting the
* return value to the computed property specified.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {string} property Name of property
* @param {?Object} changedProps Bag of current property changes
* @param {?Object} oldProps Bag of previous values for changed properties
* @param {?} info Effect metadata
* @return {boolean} True when the property being computed changed
* @private
*/
function runComputedEffect(inst, property, changedProps, oldProps, info) {
// Dirty check dependencies and run if any invalid
let result = runMethodEffect(inst, property, changedProps, oldProps, info);
// Abort if method returns a no-op result
if (result === NOOP) {
return false;
}
let computedProp = info.methodInfo;
if (inst.__dataHasAccessor && inst.__dataHasAccessor[computedProp]) {
return inst._setPendingProperty(computedProp, result, true);
} else {
inst[computedProp] = result;
return false;
}
}
/**
* Computes path changes based on path links set up using the `linkPaths`
* API.
*
* @param {!Polymer_PropertyEffects} inst The instance whose props are changing
* @param {string} path Path that has changed
* @param {*} value Value of changed path
* @return {void}
* @private
*/
function computeLinkedPaths(inst, path, value) {
let links = inst.__dataLinkedPaths;
if (links) {
let link;
for (let a in links) {
let b = links[a];
if (isDescendant(a, path)) {
link = translate(a, b, path);
inst._setPendingPropertyOrPath(link, value, true, true);
} else if (isDescendant(b, path)) {
link = translate(b, a, path);
inst._setPendingPropertyOrPath(link, value, true, true);
}
}
}
}
// -- bindings ----------------------------------------------
/**
* Adds binding metadata to the current `nodeInfo`, and binding effects
* for all part dependencies to `templateInfo`.
*
* @param {Function} constructor Class that `_parseTemplate` is currently
* running on
* @param {TemplateInfo} templateInfo Template metadata for current template
* @param {NodeInfo} nodeInfo Node metadata for current template node
* @param {string} kind Binding kind, either 'property', 'attribute', or 'text'
* @param {string} target Target property name
* @param {!Array<!BindingPart>} parts Array of binding part metadata
* @param {string=} literal Literal text surrounding binding parts (specified
* only for 'property' bindings, since these must be initialized as part
* of boot-up)
* @return {void}
* @private
*/
function addBinding(constructor, templateInfo, nodeInfo, kind, target, parts, literal) {
// Create binding metadata and add to nodeInfo
nodeInfo.bindings = nodeInfo.bindings || [];
let /** Binding */ binding = { kind, target, parts, literal, isCompound: (parts.length !== 1) };
nodeInfo.bindings.push(binding);
// Add listener info to binding metadata
if (shouldAddListener(binding)) {
let {event, negate} = binding.parts[0];
binding.listenerEvent = event || (camelToDashCase(target) + '-changed');
binding.listenerNegate = negate;
}
// Add "propagate" property effects to templateInfo
let index = templateInfo.nodeInfoList.length;
for (let i=0; i<binding.parts.length; i++) {
let part = binding.parts[i];
part.compoundIndex = i;
addEffectForBindingPart(constructor, templateInfo, binding, part, index);
}
}
/**
* Adds property effects to the given `templateInfo` for the given binding
* part.
*
* @param {Function} constructor Class that `_parseTemplate` is currently
* running on
* @param {TemplateInfo} templateInfo Template metadata for current template
* @param {!Binding} binding Binding metadata
* @param {!BindingPart} part Binding part metadata
* @param {number} index Index into `nodeInfoList` for this node
* @return {void}
*/
function addEffectForBindingPart(constructor, templateInfo, binding, part, index) {
if (!part.literal) {
if (binding.kind === 'attribute' && binding.target[0] === '-') {
console.warn('Cannot set attribute ' + binding.target +
' because "-" is not a valid attribute starting character');
} else {
let dependencies = part.dependencies;
let info = { index, binding, part, evaluator: constructor };
for (let j=0; j<dependencies.length; j++) {
let trigger = dependencies[j];
if (typeof trigger == 'string') {
trigger = parseArg(trigger);
trigger.wildcard = true;
}
constructor._addTemplatePropertyEffect(templateInfo, trigger.rootProperty, {
fn: runBindingEffect,
info, trigger
});
}
}
}
}
/**
* Implements the "binding" (property/path binding) effect.
*
* Note that binding syntax is overridable via `_parseBindings` and
* `_evaluateBinding`. This method will call `_evaluateBinding` for any
* non-literal parts returned from `_parseBindings`. However,
* there is no support for _path_ bindings via custom binding parts,
* as this is specific to Polymer's path binding syntax.
*
* @param {!Polymer_PropertyEffects} inst The instance the effect will be run on
* @param {string} path Name of property
* @param {Object} props Bag of current property changes
* @param {Object} oldProps Bag of previous values for changed properties
* @param {?} info Effect metadata
* @param {boolean} hasPaths True with `props` contains one or more paths
* @param {Array} nodeList List of nodes associated with `nodeInfoList` template
* metadata
* @return {void}
* @private
*/
function runBindingEffect(inst, path, props, oldProps, info, hasPaths, nodeList) {
let node = nodeList[info.index];
let binding = info.binding;
let part = info.part;
// Subpath notification: transform path and set to client
// e.g.: foo="{{obj.sub}}", path: 'obj.sub.prop', set 'foo.prop'=obj.sub.prop
if (hasPaths && part.source && (path.length > part.source.length) &&
(binding.kind == 'property') && !binding.isCompound &&
node.__isPropertyEffectsClient &&
node.__dataHasAccessor && node.__dataHasAccessor[binding.target]) {
let value = props[path];
path = translate(part.source, binding.target, path);
if (node._setPendingPropertyOrPath(path, value, false, true)) {
inst._enqueueClient(node);
}
} else {
let value = info.evaluator._evaluateBinding(inst, part, path, props, oldProps, hasPaths);
// Propagate value to child
// Abort if value is a no-op result
if (value !== NOOP) {
applyBindingValue(inst, node, binding, part, value);
}
}
}
/**
* Sets the value for an "binding" (binding) effect to a node,
* either as a property or attribute.
*
* @param {!Polymer_PropertyEffects} inst The instance owning the binding effect
* @param {Node} node Target node for binding
* @param {!Binding} binding Binding metadata
* @param {!BindingPart} part Binding part metadata
* @param {*} value Value to set
* @return {void}
* @private
*/
function applyBindingValue(inst, node, binding, part, value) {
value = computeBindingValue(node, value, binding, part);
if (sanitizeDOMValue) {
value = sanitizeDOMValue(value, binding.target, binding.kind, node);
}
if (binding.kind == 'attribute') {
// Attribute binding
inst._valueToNodeAttribute(/** @type {Element} */(node), value, binding.target);
} else {
// Property binding
let prop = binding.target;
if (node.__isPropertyEffectsClient &&
node.__dataHasAccessor && node.__dataHasAccessor[prop]) {
if (!node[TYPES.READ_ONLY] || !node[TYPES.READ_ONLY][prop]) {
if (node._setPendingProperty(prop, value)) {
inst._enqueueClient(node);
}
}
} else {
// In legacy no-batching mode, bindings applied before dataReady are
// equivalent to the "apply config" phase, which only set managed props
inst._setUnmanagedPropertyToNode(node, prop, value);
}
}
}
/**
* Transforms an "binding" effect value based on compound & negation
* effect metadata, as well as handling for special-case properties
*
* @param {Node} node Node the value will be set to
* @param {*} value Value to set
* @param {!Binding} binding Binding metadata
* @param {!BindingPart} part Binding part metadata
* @return {*} Transformed value to set
* @private
*/
function computeBindingValue(node, value, binding, part) {
if (binding.isCompound) {
let storage = node.__dataCompoundStorage[binding.target];
storage[part.compoundIndex] = value;
value = storage.join('');
}
if (binding.kind !== 'attribute') {
// Some browsers serialize `undefined` to `"undefined"`
if (binding.target === 'textContent' ||
(binding.target === 'value' &&
(node.localName === 'input' || node.localName === 'textarea'))) {
value = value == undefined ? '' : value;
}
}
return value;
}
/**
* Returns true if a binding's metadata meets all the requirements to allow
* 2-way binding, and therefore a `<property>-changed` event listener should be
* added:
* - used curly braces
* - is a property (not attribute) binding
* - is not a textContent binding
* - is not compound
*
* @param {!Binding} binding Binding metadata
* @return {boolean} True if 2-way listener should be added
* @private
*/
function shouldAddListener(binding) {
return Boolean(binding.target) &&
binding.kind != 'attribute' &&
binding.kind != 'text' &&
!binding.isCompound &&
binding.parts[0].mode === '{';
}
/**
* Setup compound binding storage structures, notify listeners, and dataHost
* references onto the bound nodeList.
*
* @param {!Polymer_PropertyEffects} inst Instance that bas been previously
* bound
* @param {TemplateInfo} templateInfo Template metadata
* @return {void}
* @private
*/
function setupBindings(inst, templateInfo) {
// Setup compound storage, dataHost, and notify listeners
let {nodeList, nodeInfoList} = templateInfo;
if (nodeInfoList.length) {
for (let i=0; i < nodeInfoList.length; i++) {
let info = nodeInfoList[i];
let node = nodeList[i];
let bindings = info.bindings;
if (bindings) {
for (let i=0; i<bindings.length; i++) {
let binding = bindings[i];
setupCompoundStorage(node, binding);
addNotifyListener(node, inst, binding);
}
}
// This ensures all bound elements have a host set, regardless
// of whether they upgrade synchronous to creation
node.__dataHost = inst;
}
}
}
/**
* Initializes `__dataCompoundStorage` local storage on a bound node with
* initial literal data for compound bindings, and sets the joined
* literal parts to the bound property.
*
* When changes to compound parts occur, they are first set into the compound
* storage array for that property, and then the array is joined to result in
* the final value set to the property/attribute.
*
* @param {Node} node Bound node to initialize
* @param {Binding} binding Binding metadata
* @return {void}
* @private
*/
function setupCompoundStorage(node, binding) {
if (binding.isCompound) {
// Create compound storage map
let storage = node.__dataCompoundStorage ||
(node.__dataCompoundStorage = {});
let parts = binding.parts;
// Copy literals from parts into storage for this binding
let literals = new Array(parts.length);
for (let j=0; j<parts.length; j++) {
literals[j] = parts[j].literal;
}
let target = binding.target;
storage[target] = literals;
// Configure properties with their literal parts
if (binding.literal && binding.kind == 'property') {
// Note, className needs style scoping so this needs wrapping.
// We may also want to consider doing this for `textContent` and
// `innerHTML`.
if (target === 'className') {
node = wrap(node);
}
node[target] = binding.literal;
}
}
}
/**
* Adds a 2-way binding notification event listener to the node specified
*
* @param {Object} node Child element to add listener to
* @param {!Polymer_PropertyEffects} inst Host element instance to handle
* notification event
* @param {Binding} binding Binding metadata
* @return {void}
* @private
*/
function addNotifyListener(node, inst, binding) {
if (binding.listenerEvent) {
let part = binding.parts[0];
node.addEventListener(binding.listenerEvent, function(e) {
handleNotification(e, inst, binding.target, part.source, part.negate);
});
}
}
// -- for method-based effects (complexObserver & computed) --------------
/**
* Adds property effects for each argument in the method signature (and
* optionally, for the method name if `dynamic` is true) that calls the
* provided effect function.
*
* @param {Element | Object} model Prototype or instance
* @param {!MethodSignature} sig Method signature metadata
* @param {string} type Type of property effect to add
* @param {Function} effectFn Function to run when arguments change
* @param {*=} methodInfo Effect-specific information to be included in
* method effect metadata
* @param {boolean|Object=} dynamicFn Boolean or object map indicating whether
* method names should be included as a dependency to the effect. Note,
* defaults to true if the signature is static (sig.static is true).
* @return {!Object} Effect metadata for this method effect
* @private
*/
function createMethodEffect(model, sig, type, effectFn, methodInfo, dynamicFn) {
dynamicFn = sig.static || (dynamicFn &&
(typeof dynamicFn !== 'object' || dynamicFn[sig.methodName]));
let info = {
methodName: sig.methodName,
args: sig.args,
methodInfo,
dynamicFn
};
for (let i=0, arg; (i<sig.args.length) && (arg=sig.args[i]); i++) {