Skip to content

Commit

Permalink
implements disable-upgrade attribute which prevents readying an ele…
Browse files Browse the repository at this point in the history
…ment until the attribute is removed.
  • Loading branch information
Steven Orvell committed Mar 9, 2017
1 parent 4ae65ba commit a222078
Show file tree
Hide file tree
Showing 8 changed files with 421 additions and 17 deletions.
1 change: 1 addition & 0 deletions lib/legacy/legacy-element-mixin.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@

constructor() {
super();
this.root = this;
this.created();
}

Expand Down
42 changes: 29 additions & 13 deletions lib/mixins/element-mixin.html
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,8 @@

let caseMap = Polymer.CaseMap;

const DISABLED = 'disable-upgrade';

/**
* Returns the `properties` object specifically on `klass`. Use for:
* (1) super chain mixes togther to make `propertiesForClass` which is
Expand Down Expand Up @@ -437,7 +439,7 @@
*/
static get observedAttributes() {
if (!this.hasOwnProperty(goog.reflect.objectProperty('__observedAttributes', this))) {
let list = [];
let list = [DISABLED];
let properties = propertiesForClass(this);
for (let prop in properties) {
list.push(Polymer.CaseMap.camelToDashCase(prop));
Expand Down Expand Up @@ -533,17 +535,6 @@
return this._importPath;
}

constructor() {
super();
Polymer.telemetry.instanceCount++;
// Stamp template
if (this._template) {
this.root = this._stampTemplate(this._template);
} else {
this.root = this;
}
}

/**
* Overrides the default `Polymer.PropertyAccessors` to ensure class
* metaprogramming related to property accessors and effects has
Expand All @@ -555,6 +546,8 @@
* @override
*/
_initializeProperties() {
Polymer.telemetry.instanceCount++;
this.__upgradeFlush = null;
this.constructor.finalize();
const importPath = this.constructor.importPath;
// note: finalize template when we have access to `localName` to
Expand Down Expand Up @@ -615,6 +608,18 @@
*/
disconnectedCallback() {}

/**
* Stamps the element template.
*
* @override
*/
ready() {
if (this._template) {
this.root = this._stampTemplate(this._template);
}
super.ready();
}

/**
* Implements `PropertyEffects`'s `_readyClients` call. Attaches
* element dom by calling `_attachDom` with the dom stamped from the
Expand Down Expand Up @@ -673,7 +678,18 @@
* @override
*/
attributeChangedCallback(name, old, value) {
if (old !== value) {
// process `disable-upgrade` specially
if (name === DISABLED) {
const disabled = value !== null;
if (this.__upgradeFlush && !disabled) {
this._flushProperties = this.__upgradeFlush;
this.__upgradeFlush = null;
this._flushProperties();
} else if (disabled) {
this.__upgradeFlush = this._flushProperties;
this._flushProperties = function() {};
}
} else if (old !== value) {
let property = caseMap.dashToCamelCase(name);
let type = propertiesForClass(this.constructor)[property].type;
if (!this._hasReadOnlyEffect(property)) {
Expand Down
4 changes: 2 additions & 2 deletions lib/mixins/template-stamp.html
Original file line number Diff line number Diff line change
Expand Up @@ -454,8 +454,8 @@

return class TemplateStamp extends superClass {

constructor() {
super();
_initializeProperties() {
super._initializeProperties();
this.$ = null;
this.__templateNodes = null;
this.__templateNotes = null;
Expand Down
5 changes: 4 additions & 1 deletion lib/utils/render-status.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@
}

function flushQueue(queue) {
while (queue.length) {
const max = queue.length;
let i=0;
while (queue.length && i < max) {
i++;
const q = queue.shift();
const context = q[0];
const callback = q[1];
Expand Down
3 changes: 2 additions & 1 deletion test/runner.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@
'unit/logging.html',
'unit/mixin-utils.html',
'unit/mixin-behaviors.html',
'unit/render-status.html'
'unit/render-status.html',
'unit/disable-upgrade.html'
];

// http://eddmann.com/posts/cartesian-product-in-javascript/
Expand Down
98 changes: 98 additions & 0 deletions test/smoke/disable-upgrade.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!--
@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
-->
<!DOCTYPE html>
<html>
<head>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
</head>
<body>

<dom-module id="x-child">
<template>
<style>
:host {
display: block;
border: 2px solid lightgreen;
margin: 2px;
padding: 2px;
};
</style>
<div>I'm a child, yo!</div>
</template>
<script>
HTMLImports.whenReady(function() {
class XChild extends Polymer.Element {
static get is() { return 'x-child'}
static get properties() {
return {
prop: { value: 'hi'}
}
}
}
customElements.define(XChild.is, XChild);
});
</script>
</dom-module>


<dom-module id="x-test">
<template>
<style>
:host {
display: block;
border: 2px solid orange;
padding: 2px;
};
</style>
<div>element says: {{prop}}</div>
<x-child id="child" disable-upgrade$="[[disabled]]"></x-child>
</template>
<script>
HTMLImports.whenReady(function() {
class XTest extends Polymer.Element {
static get is() { return 'x-test'}
static get properties() {
return {
prop: { value: 'hi'},
disabled: {value: true}
}
}

ready() {
super.ready();
setTimeout(() => {
// this.$.child.removeAttribute('disable-upgrade');
this.disabled = false;
}, 1000)
}
}
customElements.define(XTest.is, XTest);
});
</script>
</dom-module>


<h2>Enabled</h2>
<x-test></x-test>
<x-test></x-test>
<h2>Disabled</h2>
<script>
function go() {
Array.from(document.querySelectorAll('[disable-upgrade]'))
.forEach((e) => e.removeAttribute('disable-upgrade'));
}
</script>
<button onclick="go()">Go</button>
<x-test id="one" disable-upgrade></x-test>
<x-test id="two" disable-upgrade></x-test>

</body>
</html>
Loading

0 comments on commit a222078

Please sign in to comment.