archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

Fix component dom insert (#1129)

Browse Source
This commit is contained in:
Michael Rawlings 2018-09-14 13:25:39 -07:00 committed by GitHub
parent d1d3aa04d3
commit 12a8b4d06b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 87 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "marko",
"version": "4.13.4",
"version": "4.13.4-4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "marko",
"version": "4.13.4",
"version": "4.13.4-4",
"license": "MIT",
"description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
"scripts": {

4
src/morphdom/fragment.js
View File

@ -40,13 +40,13 @@ var fragmentPrototype = {
insertInto: function(newParentNode, referenceNode) {
this.nodes.forEach(function(node) {
insertBefore(node, referenceNode, newParentNode);
});
}, this);
return this;
},
remove: function() {
this.nodes.forEach(function(node) {
this.detachedContainer.appendChild(node);
});
}, this);
}
};

24
src/runtime/dom-insert.js
View File

@ -2,6 +2,11 @@ var extend = require("raptor-util/extend");
var componentsUtil = require("../components/util");
var destroyComponentForNode = componentsUtil.___destroyComponentForNode;
var destroyNodeRecursive = componentsUtil.___destroyNodeRecursive;
var helpers = require("../morphdom/helpers");
var insertBefore = helpers.___insertBefore;
var insertAfter = helpers.___insertAfter;
var removeChild = helpers.___removeChild;
function resolveEl(el) {
if (typeof el == "string") {
@ -24,20 +29,21 @@ module.exports = function(target, getEl, afterInsert) {
appendTo: function(referenceEl) {
referenceEl = resolveEl(referenceEl);
var el = getEl(this, referenceEl);
referenceEl.appendChild(el);
insertBefore(el, null, referenceEl);
return afterInsert(this, referenceEl);
},
prependTo: function(referenceEl) {
referenceEl = resolveEl(referenceEl);
var el = getEl(this, referenceEl);
referenceEl.insertBefore(el, referenceEl.firstChild || null);
insertBefore(el, referenceEl.firstChild || null, referenceEl);
return afterInsert(this, referenceEl);
},
replace: function(referenceEl) {
referenceEl = resolveEl(referenceEl);
var el = getEl(this, referenceEl);
beforeRemove(referenceEl);
referenceEl.parentNode.replaceChild(el, referenceEl);
insertBefore(el, referenceEl, referenceEl.parentNode);
removeChild(referenceEl);
return afterInsert(this, referenceEl);
},
replaceChildrenOf: function(referenceEl) {
@ -52,25 +58,19 @@ module.exports = function(target, getEl, afterInsert) {
}
referenceEl.innerHTML = "";
referenceEl.appendChild(el);
insertBefore(el, null, referenceEl);
return afterInsert(this, referenceEl);
},
insertBefore: function(referenceEl) {
referenceEl = resolveEl(referenceEl);
var el = getEl(this, referenceEl);
referenceEl.parentNode.insertBefore(el, referenceEl);
insertBefore(el, referenceEl, referenceEl.parentNode);
return afterInsert(this, referenceEl);
},
insertAfter: function(referenceEl) {
referenceEl = resolveEl(referenceEl);
var el = getEl(this, referenceEl);
var nextSibling = referenceEl.nextSibling;
var parentNode = referenceEl.parentNode;
if (nextSibling) {
parentNode.insertBefore(el, nextSibling);
} else {
parentNode.appendChild(el);
}
insertAfter(el, referenceEl, referenceEl.parentNode);
return afterInsert(this, referenceEl);
}
});

3
test/components-browser/fixtures/append-prepend/components/app-hello/index.marko Normal file
View File

@ -0,0 +1,3 @@
<div>
Hello ${input.value}
</div>

5
test/components-browser/fixtures/append-prepend/index.marko Normal file
View File

@ -0,0 +1,5 @@
class {}
<div key="renderTarget">
<span key="referenceElement">ref</span>
</div>

15
test/components-browser/fixtures/append-prepend/test.js Normal file
View File

@ -0,0 +1,15 @@
var expect = require("chai").expect;
module.exports = function(helpers) {
var component = helpers.mount(require.resolve("./index.marko"));
var hello = require("./components/app-hello");
var renderTarget = component.getEl("renderTarget");
expect(renderTarget.innerHTML).to.equal("<span>ref</span>");
hello.renderSync({ value: "before" }).prependTo(renderTarget);
hello.renderSync({ value: "after" }).appendTo(renderTarget);
expect(renderTarget.innerHTML).to.equal(
"<div>Hello before</div><span>ref</span><div>Hello after</div>"
);
};

10
test/components-browser/fixtures/component-api-move-root/index.marko Normal file
View File

@ -0,0 +1,10 @@
class {
onCreate() {
this.state = { count:0 };
}
increment() {
this.state.count++;
}
}
-- Hello World ${state.count}

14
test/components-browser/fixtures/component-api-move-root/test.js Normal file
View File

@ -0,0 +1,14 @@
var expect = require("chai").expect;
module.exports = function(helpers) {
var component = helpers.mount(require.resolve("./index"), {});
var newTarget = document.createElement("div");
document.body.appendChild(newTarget);
component.increment();
component.update();
component.appendTo(newTarget);
expect(newTarget.innerHTML).to.equal("Hello World 1");
component.increment();
component.update();
expect(newTarget.innerHTML).to.equal("Hello World 2");
};

3
test/components-browser/fixtures/insert-before-after/components/app-hello/index.marko Normal file
View File

@ -0,0 +1,3 @@
<div>
Hello ${input.value}
</div>

5
test/components-browser/fixtures/insert-before-after/index.marko Normal file
View File

@ -0,0 +1,5 @@
class {}
<div key="renderTarget">
<span key="referenceElement">ref</span>
</div>

16
test/components-browser/fixtures/insert-before-after/test.js Normal file
View File

@ -0,0 +1,16 @@
var expect = require("chai").expect;
module.exports = function(helpers) {
var component = helpers.mount(require.resolve("./index.marko"));
var hello = require("./components/app-hello");
var renderTarget = component.getEl("renderTarget");
var referenceElement = component.getEl("referenceElement");
expect(renderTarget.innerHTML).to.equal("<span>ref</span>");
hello.renderSync({ value: "before" }).insertBefore(referenceElement);
hello.renderSync({ value: "after" }).insertAfter(referenceElement);
expect(renderTarget.innerHTML).to.equal(
"<div>Hello before</div><span>ref</span><div>Hello after</div>"
);
};