Skip to content

Commit

Permalink
Add 2.x hybrid affordances for stamping template content. Fixes #4536
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinpschaaf
kevinpschaaf committed Apr 15, 2017
1 parent f9bc452 commit 53053eb
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 29 deletions.
12 changes: 10 additions & 2 deletions src/lib/template/dom-bind.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,16 @@
},

_insertChildren: function() {
var parentDom = Polymer.dom(Polymer.dom(this).parentNode);
parentDom.insertBefore(this.root, this);
var refNode;
var parentNode = Polymer.dom(this).parentNode;
// Affordance for 2.x hybrid mode
if (parentNode.localName == this.is) {
refNode = parentNode;
parentNode = Polymer.dom(parentNode).parentNode;
} else {
refNode = this;
}
Polymer.dom(parentNode).insertBefore(this.root, refNode);
},

_removeChildren: function() {
Expand Down
13 changes: 10 additions & 3 deletions src/lib/template/dom-if.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,19 +134,26 @@
var parentNode = Polymer.dom(this).parentNode;
// Guard against element being detached while render was queued
if (parentNode) {
var parent = Polymer.dom(parentNode);
var refNode;
// Affordance for 2.x hybrid mode
if (parentNode.localName == this.is) {
refNode = parentNode;
parentNode = Polymer.dom(parentNode).parentNode;
} else {
refNode = this;
}
if (!this._instance) {
this._instance = this.stamp();
var root = this._instance.root;
parent.insertBefore(root, this);
Polymer.dom(parentNode).insertBefore(root, refNode);
} else {
var c$ = this._instance._children;
if (c$ && c$.length) {
// Detect case where dom-if was re-attached in new position
var lastChild = Polymer.dom(this).previousSibling;
if (lastChild !== c$[c$.length-1]) {
for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
parent.insertBefore(n, this);
Polymer.dom(parentNode).insertBefore(n, refNode);
}
}
}
Expand Down
7 changes: 7 additions & 0 deletions src/lib/template/dom-repeat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -710,6 +710,13 @@
var beforeRow = this._instances[idx + 1];
var beforeNode = beforeRow && !beforeRow.isPlaceholder ? beforeRow._children[0] : this;
var parentNode = Polymer.dom(this).parentNode;
// Affordance for 2.x hybrid mode
if (parentNode.localName == this.is) {
if (beforeNode == this) {
beforeNode = parentNode;
}
parentNode = Polymer.dom(parentNode).parentNode;
}
Polymer.dom(parentNode).insertBefore(inst.root, beforeNode);
this._instances[idx] = inst;
return inst;
Expand Down
37 changes: 35 additions & 2 deletions test/unit/dom-bind.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</template>

<script>
/* global earlyDomBind earlyBoundChild decEl1 decEl2 decDomBind z container needsHost*/
/* global earlyDomBind earlyBoundChild decEl1 decEl2 decDomBind z container needsHost hybridDomBind hybridEl1 hybridEl2*/
earlyDomBind.value = 'hi!';
</script>

Expand All @@ -42,6 +42,13 @@
<x-needs-host id="needsHost"></x-needs-host>
</template>

<dom-bind>
<template is="dom-bind" id="hybridDomBind">
<x-basic value="{{value}}" id="hybridEl1"></x-basic>
<x-basic value="{{value}}" id="hybridEl2"></x-basic>
</template>
</dom-bind>

<script>

suite('dom-bind touched before upgrade', function() {
Expand Down Expand Up @@ -235,7 +242,7 @@
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
done();
});
});
});

test('re-enable dom-change', function(done) {
if (Polymer.Settings.suppressTemplateNotifications) {
Expand All @@ -255,6 +262,32 @@

});

suite('hybrid dom-bind', function() {

var domBind;
var el1;
var el2;

setup(function() {
domBind = hybridDomBind;
el1 = hybridEl1;
el2 = hybridEl2;
});

test('value binds top-down', function() {
domBind.value = 'foo';
assert.equal(el1.value, 'foo');
assert.equal(el2.value, 'foo');
});

test('parent is parent of <dom-bind>', function() {
domBind.value = 'foo';
assert.equal(el1.parentNode, document.body);
assert.equal(el2.parentNode, document.body);
});

});

</script>

<link rel="import" href="dom-bind-elements2.html">
Expand Down
39 changes: 32 additions & 7 deletions test/unit/dom-if.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,33 @@
<template is="dom-if" if id="toBeRemoved"><div id="shouldBeRemoved"></div></template>
</div>

<!-- 2.x hybrid test -->
<dom-if>
<template is="dom-if" id="hybridDomIf" if restamp>
<div hybrid-stamped>[[prop]]</div>
</template>
</dom-if>

<script>
/* global configured individual unconfigured1 unconfigured2 inDocumentContainer inDocumentIf structuredContainer structuredDomIf structuredDomBind outerContainer innerContainer shouldBeRemoved toBeRemoved removalContainer*/
/* global configured individual unconfigured1 unconfigured2 inDocumentContainer inDocumentIf structuredContainer structuredDomIf structuredDomBind outerContainer innerContainer shouldBeRemoved toBeRemoved removalContainer hybridDomIf*/

suite('hybrid dom-if', function() {

test('parent is parent of <dom-if>', function() {
var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
assert.equal(stamped.length, 1);
assert.equal(stamped[0].parentNode, document.body);
});

test('children removed correctly', function() {
hybridDomIf.if = false;
hybridDomIf.render();
var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
assert.equal(stamped.length, 0);
});

});

suite('nested pre-configured dom-if', function() {

test('parent scope binding', function() {
Expand Down Expand Up @@ -337,7 +362,7 @@
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
assert.equal(stamped.length, 3, 'total stamped count incorrect');
stamped[0].prop = 'outer';
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
});

Expand All @@ -352,7 +377,7 @@
stamped.forEach(function(n) {
assert.equal(getComputedStyle(n).display, 'none', 'node was not hidden but should have been');
});
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
});

Expand All @@ -368,7 +393,7 @@
stamped.forEach(function(n) {
assert.equal(getComputedStyle(n).display, 'inline', 'node was hidden but should not have been');
});
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
});

Expand All @@ -380,10 +405,10 @@
CustomElements.takeRecords();
CustomElements.takeRecords();
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template)');
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
assert.equal(stamped.length, 0, 'total stamped count incorrect');
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
});

Expand All @@ -398,7 +423,7 @@
var stamped = Polymer.dom(unconfigured1.root).querySelectorAll('*:not(template):not(span)');
assert.equal(stamped.length, 3, 'total stamped count incorrect');
stamped[0].prop = 'outer';
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
});

Expand Down
55 changes: 40 additions & 15 deletions test/unit/dom-repeat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,15 @@ <h4>x-repeat-chunked</h4>
<div id="inDocumentContainer">
</div>

<!-- 2.x hybrid test -->
<dom-repeat>
<template is="dom-repeat" id="hybridDomRepeat" items='[{"prop":"a"},{"prop":"b"},{"prop":"c"}]'>
<div hybrid-stamped>[[item.prop]]</div>
</template>
</dom-repeat>

<script>
/* global unconfigured1 unconfigured primitive limited inDocumentRepeater configured inDocumentContainer inDocumentContainerOrig unconfigured2 primitiveLarge simple:true model:true stamped:true chunked */
/* global unconfigured1 unconfigured primitive limited inDocumentRepeater configured inDocumentContainer inDocumentContainerOrig unconfigured2 primitiveLarge simple:true model:true stamped:true chunked hybridDomRepeat*/

/*
Expected:
Expand All @@ -100,7 +107,6 @@ <h4>x-repeat-chunked</h4>
stamped[38] .. 3-3-3
*/


suite('errors', function() {

test('items must be array', function() {
Expand Down Expand Up @@ -830,7 +836,7 @@ <h4>x-repeat-chunked</h4>
assert.equal(stamped2[39].itemaProp, 'new-1');
assert.equal(stamped2[40].itemaProp, 'new-2');
assert.equal(stamped2[41], undefined);
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
done();
});
Expand All @@ -854,7 +860,7 @@ <h4>x-repeat-chunked</h4>
assert.equal(stamped2[38].indexb, 2);
assert.equal(stamped2[38].indexc, 2);
assert.equal(stamped2[39], undefined);
assert.equal(unconfigured1.domUpdateHandlerCount,
assert.equal(unconfigured1.domUpdateHandlerCount,
Polymer.Settings.suppressTemplateNotifications ? 0 : 1);
done();
});
Expand Down Expand Up @@ -3870,22 +3876,41 @@ <h4>x-repeat-chunked</h4>

});

suite('notification suppression', function() {
}

test('re-enable dom-change', function() {
if (Polymer.Settings.suppressTemplateNotifications) {
unconfigured1.$.repeater.setAttribute('notify-dom-change', '');
unconfigured1.domUpdateHandlerCount = 0;
unconfigured.items = unconfigured.items.slice();
setTimeout(function() {
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
});
}
suite('notification suppression', function() {

test('re-enable dom-change', function() {
if (Polymer.Settings.suppressTemplateNotifications) {
unconfigured1.$.repeater.setAttribute('notify-dom-change', '');
unconfigured1.domUpdateHandlerCount = 0;
unconfigured.items = unconfigured.items.slice();
setTimeout(function() {
assert.equal(unconfigured1.domUpdateHandlerCount, 1);
});
}
});

});

suite('hybrid dom-repeat', function() {

test('parent is parent of <dom-repeat>', function() {
var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
assert.equal(stamped.length, 3);
stamped.forEach(function(el) {
assert.equal(el.parentNode, document.body);
});
});

test('children removed correctly', function() {
hybridDomRepeat.items = null;
hybridDomRepeat.render();
var stamped = Array.from(document.querySelectorAll('[hybrid-stamped]'));
assert.equal(stamped.length, 0);
});

}
});

</script>

Expand Down

0 comments on commit 53053eb

Please sign in to comment.