Fix issue with hydrating nested fragments that are adjacent in the dom (#1294)

This commit is contained in:
Dylan Piercey 2019-03-19 16:08:37 -07:00 committed by GitHub
parent ba7ab297d8
commit 070b09becd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 6 deletions

View File

@ -302,7 +302,6 @@ Component.prototype = componentProto = {
root.detached = true;
delete componentLookup[this.id];
delete this.___rootNode;
this.___keyedElements = {};
},

View File

@ -356,12 +356,28 @@ function morphdom(fromNode, toNode, doc, componentsContext) {
) {
var content = curFromNodeChild.nodeValue;
if (content == "F#" + curToNodeKeyOriginal) {
var endNode = curFromNodeChild;
while (
endNode.nodeType !== COMMENT_NODE ||
endNode.nodeValue !== "F/"
)
var endNode = curFromNodeChild.nextSibling;
var depth = 0;
var nodeValue;
// eslint-disable-next-line no-constant-condition
while (true) {
if (endNode.nodeType === COMMENT_NODE) {
nodeValue = endNode.nodeValue;
if (nodeValue === "F/") {
if (depth === 0) {
break;
} else {
depth--;
}
} else if (
nodeValue.indexOf("F#") === 0
) {
depth++;
}
}
endNode = endNode.nextSibling;
}
var fragment = createFragmentNode(
curFromNodeChild,

View File

@ -0,0 +1,11 @@
<macro|{ type, value }| name="value">
${type}: ${value}
</macro>
<macro|{ value }| name="display">
$ const type = typeof value;
<value type=type value=value/>
<span>: ${type}</span>
</macro>
<display value=input.value/>

View File

@ -0,0 +1,17 @@
class {
onCreate() {
this.state = {
show: true
}
}
hide() {
this.state.show = false;
}
}
<div key="root">
<if(state.show)>
<text-display value=123/>
</if>
</div>

View File

@ -0,0 +1,10 @@
var expect = require("chai").expect;
module.exports = function(helpers) {
var component = helpers.mount(require.resolve("./index.marko"), {});
var root = component.getEl("root");
expect(root.textContent).to.equal("number: 123: number");
component.hide();
component.update();
expect(root.textContent).to.equal("");
};