206 lines
8.5 KiB
HTML
206 lines
8.5 KiB
HTML
<!--
|
|
@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
|
|
-->
|
|
|
|
<link rel="import" href="../utils/mixin.html">
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Common implementation for mixin & behavior
|
|
function mutablePropertyChange(inst, property, value, old, mutableData) {
|
|
let isObject;
|
|
if (mutableData) {
|
|
isObject = (typeof value === 'object' && value !== null);
|
|
// Pull `old` for Objects from temp cache, but treat `null` as a primitive
|
|
if (isObject) {
|
|
old = inst.__dataTemp[property];
|
|
}
|
|
}
|
|
// Strict equality check, but return false for NaN===NaN
|
|
let shouldChange = (old !== value && (old === old || value === value));
|
|
// Objects are stored in temporary cache (cleared at end of
|
|
// turn), which is used for dirty-checking
|
|
if (isObject && shouldChange) {
|
|
inst.__dataTemp[property] = value;
|
|
}
|
|
return shouldChange;
|
|
}
|
|
|
|
/**
|
|
* Element class mixin to skip strict dirty-checking for objects and arrays
|
|
* (always consider them to be "dirty"), for use on elements utilizing
|
|
* `Polymer.PropertyEffects`
|
|
*
|
|
* By default, `Polymer.PropertyEffects` performs strict dirty checking on
|
|
* objects, which means that any deep modifications to an object or array will
|
|
* not be propagated unless "immutable" data patterns are used (i.e. all object
|
|
* references from the root to the mutation were changed).
|
|
*
|
|
* Polymer also provides a proprietary data mutation and path notification API
|
|
* (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
|
|
* mutation and notification of deep changes in an object graph to all elements
|
|
* bound to the same object graph.
|
|
*
|
|
* In cases where neither immutable patterns nor the data mutation API can be
|
|
* used, applying this mixin will cause Polymer to skip dirty checking for
|
|
* objects and arrays (always consider them to be "dirty"). This allows a
|
|
* user to make a deep modification to a bound object graph, and then either
|
|
* simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
|
|
* (e.g. `this.notifyPath('items')`) to update the tree. Note that all
|
|
* elements that wish to be updated based on deep mutations must apply this
|
|
* mixin or otherwise skip strict dirty checking for objects/arrays.
|
|
* Specifically, any elements in the binding tree between the source of a
|
|
* mutation and the consumption of it must apply this mixin or enable the
|
|
* `Polymer.OptionalMutableData` mixin.
|
|
*
|
|
* In order to make the dirty check strategy configurable, see
|
|
* `Polymer.OptionalMutableData`.
|
|
*
|
|
* Note, the performance characteristics of propagating large object graphs
|
|
* will be worse as opposed to using strict dirty checking with immutable
|
|
* patterns or Polymer's path notification API.
|
|
*
|
|
* @mixinFunction
|
|
* @polymer
|
|
* @memberof Polymer
|
|
* @summary Element class mixin to skip strict dirty-checking for objects
|
|
* and arrays
|
|
*/
|
|
Polymer.MutableData = Polymer.dedupingMixin(superClass => {
|
|
|
|
/**
|
|
* @polymer
|
|
* @mixinClass
|
|
* @implements {Polymer_MutableData}
|
|
*/
|
|
class MutableData extends superClass {
|
|
/**
|
|
* Overrides `Polymer.PropertyEffects` to provide option for skipping
|
|
* strict equality checking for Objects and Arrays.
|
|
*
|
|
* This method pulls the value to dirty check against from the `__dataTemp`
|
|
* cache (rather than the normal `__data` cache) for Objects. Since the temp
|
|
* cache is cleared at the end of a turn, this implementation allows
|
|
* side-effects of deep object changes to be processed by re-setting the
|
|
* same object (using the temp cache as an in-turn backstop to prevent
|
|
* cycles due to 2-way notification).
|
|
*
|
|
* @param {string} property Property name
|
|
* @param {*} value New property value
|
|
* @param {*} old Previous property value
|
|
* @return {boolean} Whether the property should be considered a change
|
|
* @protected
|
|
*/
|
|
_shouldPropertyChange(property, value, old) {
|
|
return mutablePropertyChange(this, property, value, old, true);
|
|
}
|
|
|
|
}
|
|
|
|
return MutableData;
|
|
|
|
});
|
|
|
|
|
|
/**
|
|
* Element class mixin to add the optional ability to skip strict
|
|
* dirty-checking for objects and arrays (always consider them to be
|
|
* "dirty") by setting a `mutable-data` attribute on an element instance.
|
|
*
|
|
* By default, `Polymer.PropertyEffects` performs strict dirty checking on
|
|
* objects, which means that any deep modifications to an object or array will
|
|
* not be propagated unless "immutable" data patterns are used (i.e. all object
|
|
* references from the root to the mutation were changed).
|
|
*
|
|
* Polymer also provides a proprietary data mutation and path notification API
|
|
* (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
|
|
* mutation and notification of deep changes in an object graph to all elements
|
|
* bound to the same object graph.
|
|
*
|
|
* In cases where neither immutable patterns nor the data mutation API can be
|
|
* used, applying this mixin will allow Polymer to skip dirty checking for
|
|
* objects and arrays (always consider them to be "dirty"). This allows a
|
|
* user to make a deep modification to a bound object graph, and then either
|
|
* simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
|
|
* (e.g. `this.notifyPath('items')`) to update the tree. Note that all
|
|
* elements that wish to be updated based on deep mutations must apply this
|
|
* mixin or otherwise skip strict dirty checking for objects/arrays.
|
|
* Specifically, any elements in the binding tree between the source of a
|
|
* mutation and the consumption of it must enable this mixin or apply the
|
|
* `Polymer.MutableData` mixin.
|
|
*
|
|
* While this mixin adds the ability to forgo Object/Array dirty checking,
|
|
* the `mutableData` flag defaults to false and must be set on the instance.
|
|
*
|
|
* Note, the performance characteristics of propagating large object graphs
|
|
* will be worse by relying on `mutableData: true` as opposed to using
|
|
* strict dirty checking with immutable patterns or Polymer's path notification
|
|
* API.
|
|
*
|
|
* @mixinFunction
|
|
* @polymer
|
|
* @memberof Polymer
|
|
* @summary Element class mixin to optionally skip strict dirty-checking
|
|
* for objects and arrays
|
|
*/
|
|
Polymer.OptionalMutableData = Polymer.dedupingMixin(superClass => {
|
|
|
|
/**
|
|
* @mixinClass
|
|
* @polymer
|
|
* @implements {Polymer_OptionalMutableData}
|
|
*/
|
|
class OptionalMutableData extends superClass {
|
|
|
|
static get properties() {
|
|
return {
|
|
/**
|
|
* Instance-level flag for configuring the dirty-checking strategy
|
|
* for this element. When true, Objects and Arrays will skip dirty
|
|
* checking, otherwise strict equality checking will be used.
|
|
*/
|
|
mutableData: Boolean
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Overrides `Polymer.PropertyEffects` to provide option for skipping
|
|
* strict equality checking for Objects and Arrays.
|
|
*
|
|
* When `this.mutableData` is true on this instance, this method
|
|
* pulls the value to dirty check against from the `__dataTemp` cache
|
|
* (rather than the normal `__data` cache) for Objects. Since the temp
|
|
* cache is cleared at the end of a turn, this implementation allows
|
|
* side-effects of deep object changes to be processed by re-setting the
|
|
* same object (using the temp cache as an in-turn backstop to prevent
|
|
* cycles due to 2-way notification).
|
|
*
|
|
* @param {string} property Property name
|
|
* @param {*} value New property value
|
|
* @param {*} old Previous property value
|
|
* @return {boolean} Whether the property should be considered a change
|
|
* @protected
|
|
*/
|
|
_shouldPropertyChange(property, value, old) {
|
|
return mutablePropertyChange(this, property, value, old, this.mutableData);
|
|
}
|
|
}
|
|
|
|
return OptionalMutableData;
|
|
|
|
});
|
|
|
|
// Export for use by legacy behavior
|
|
Polymer.MutableData._mutablePropertyChange = mutablePropertyChange;
|
|
|
|
})();
|
|
</script>
|