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

Changed dynamic tags to add data-marko-key and to selfclose properly (#1499)

Browse Source
This commit is contained in:
Andrew Gliga 2020-02-12 11:39:16 -08:00 committed by GitHub
parent fc90708b29
commit 0339255526
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 139 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -6708,6 +6708,11 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
},
"self-closing-tags": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/self-closing-tags/-/self-closing-tags-1.0.1.tgz",
"integrity": "sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA=="
},
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",

1
package.json
View File

@ -49,6 +49,7 @@
"raptor-regexp": "^1.0.0",
"raptor-util": "^3.2.0",
"resolve-from": "^2.0.0",
"self-closing-tags": "^1.0.1",
"simple-sha1": "^2.1.0",
"strip-json-comments": "^2.0.1",
"warp10": "^2.0.1"

3
src/core-tags/components/helpers/markoKeyAttr.js
View File

@ -4,7 +4,8 @@ var FLAG_WILL_RERENDER_IN_BROWSER = 1;
module.exports = function markoKeyAttr(key, componentDef) {
if (
(componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) === 0 ||
(componentDef.___renderBoundary &&
(componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) === 0) ||
componentDef.___globalComponentsContext.___isPreserved
) {
return componentDef.___nextKey(key) + " " + componentDef.id;

6
src/runtime/helpers/dynamic-tag.js
View File

@ -50,15 +50,13 @@ module.exports = function dynamicTag(
tag,
attrs,
key,
component,
0,
0,
componentDef,
props
);
renderBody(out);
out.___endElement();
} else {
out.___elementDynamic(tag, attrs, key, component, 0, 0, props);
out.___elementDynamic(tag, attrs, key, componentDef, props);
}
} else {
if (attrs == null) {

37
src/runtime/html/AsyncStream.js
View File

@ -5,7 +5,10 @@ var BufferedWriter = require("./BufferedWriter");
var defaultDocument = typeof document != "undefined" && document;
var RenderResult = require("../RenderResult");
var attrsHelper = require("./helpers/attrs");
var attrHelper = require("./helpers/attr");
var markoKeyAttr = require("./../../core-tags/components/helpers/markoKeyAttr");
var escapeXml = require("./helpers/escape-xml").x;
var selfClosingTags = require("self-closing-tags");
var voidWriter = { write: function() {} };
@ -474,6 +477,21 @@ var proto = (AsyncStream.prototype = {
return newOut;
},
___elementDynamic: function(tagName, elementAttrs, key, componentDef) {
var str =
"<" +
tagName +
attrsHelper(elementAttrs) +
attrHelper("data-marko-key", markoKeyAttr(key, componentDef)) +
">";
if (selfClosingTags.indexOf(tagName) === -1) {
str += "</" + tagName + ">";
}
this.write(str);
},
element: function(tagName, elementAttrs, openTagOnly) {
var str = "<" + tagName + attrsHelper(elementAttrs) + ">";
@ -484,6 +502,23 @@ var proto = (AsyncStream.prototype = {
this.write(str);
},
___beginElementDynamic: function(name, elementAttrs, key, componentDef) {
var str =
"<" +
name +
attrsHelper(elementAttrs) +
attrHelper("data-marko-key", markoKeyAttr(key, componentDef)) +
">";
this.write(str);
if (this._elStack) {
this._elStack.push(name);
} else {
this._elStack = [name];
}
},
beginElement: function(name, elementAttrs) {
var str = "<" + name + attrsHelper(elementAttrs) + ">";
@ -585,8 +620,6 @@ var proto = (AsyncStream.prototype = {
// alias:
proto.w = proto.write;
proto.___elementDynamic = proto.element;
proto.___beginElementDynamic = proto.beginElement;
proto.___endElement = proto.endElement;
module.exports = AsyncStream;

20
src/runtime/vdom/AsyncVDOMBuilder.js
View File

@ -97,22 +97,14 @@ var proto = (AsyncVDOMBuilder.prototype = {
return this.___beginNode(element, childCount);
},
___elementDynamic: function(
tagName,
attrs,
key,
component,
childCount,
flags,
props
) {
___elementDynamic: function(tagName, attrs, key, componentDef, props) {
return this.element(
tagName,
attrsHelper(attrs),
key,
component,
childCount,
flags,
componentDef.___component,
0,
0,
props
);
},
@ -190,7 +182,7 @@ var proto = (AsyncVDOMBuilder.prototype = {
tagName,
attrs,
key,
component,
componentDef,
childCount,
flags,
props
@ -199,7 +191,7 @@ var proto = (AsyncVDOMBuilder.prototype = {
tagName,
attrsHelper(attrs),
key,
component,
componentDef.___component,
childCount,
flags,
props

9
test/components-pages/fixtures/empty-tag-with-key/components/dynamic-tag-key/index.marko Normal file
View File

@ -0,0 +1,9 @@
class {
onMount() {
window.dynamic = this;
}
};
<div>
<${true ? "div" : null} key="test">Content</>
</div>

5
test/components-pages/fixtures/empty-tag-with-key/components/split-tag-key/component-browser.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = class {
onMount() {
window.splitDynamic = this;
}
};

1
test/components-pages/fixtures/empty-tag-with-key/components/split-tag-key/index.marko Normal file
View File

@ -0,0 +1 @@
<${true ? "div" : null} key="test">Content</>

3
test/components-pages/fixtures/empty-tag-with-key/marko.json Normal file
View File

@ -0,0 +1,3 @@
{
"tags-dir": "./components"
}

14
test/components-pages/fixtures/empty-tag-with-key/template.marko Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
html lang="en"
head
meta charset="UTF-8"
title -- Marko Components Tests
body
div id="test"
div id="mocha"
div id="testsTarget"
<dynamic-tag-key/>
<split-tag-key/>

6
test/components-pages/fixtures/empty-tag-with-key/tests.js Normal file
View File

@ -0,0 +1,6 @@
var expect = require("chai").expect;
it("should allow getEl() with a dynamic component", function() {
expect(window.dynamic.getEl("test") !== undefined).to.equal(true);
expect(window.splitDynamic.getEl("test") !== undefined).to.equal(true);
});

8
test/render/fixtures/dynamic-split-component/components/dynamic-non-split-no-body/index.marko Normal file
View File

@ -0,0 +1,8 @@
class {
onMount() {
window.cls = this;
}
}
<${true ? "div": null} key="test">
</>

9
test/render/fixtures/dynamic-split-component/components/dynamic-non-split/index.marko Normal file
View File

@ -0,0 +1,9 @@
class {
onMount() {
window.cls = this;
}
}
<${true ? "div": null} key="test">
Body data
</>

5
test/render/fixtures/dynamic-split-component/components/dynamic-split-no-body/component-browser.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = class {
onMount() {
window.cls = this;
}
};

2
test/render/fixtures/dynamic-split-component/components/dynamic-split-no-body/index.marko Normal file
View File

@ -0,0 +1,2 @@
<${true ? "div": null} key="test">
</>

5
test/render/fixtures/dynamic-split-component/components/dynamic-split/component-browser.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = class {
onMount() {
window.cls = this;
}
};

3
test/render/fixtures/dynamic-split-component/components/dynamic-split/index.marko Normal file
View File

@ -0,0 +1,3 @@
<${true ? "div": null} key="test">
Body data
</>

1
test/render/fixtures/dynamic-split-component/expected.html Normal file
View File

@ -0,0 +1 @@
<!--M^s0-0 s0 0--><div data-marko-key="test s0-0">Body data</div><!--M/--><!--M^s0-1 s0 1--><div>Body data</div><!--M/--><!--M^s0-2 s0 2--><div data-marko-key="test s0-2"></div><!--M/--><!--M^s0-3 s0 3--><div></div><!--M/-->

4
test/render/fixtures/dynamic-split-component/template.marko Normal file
View File

@ -0,0 +1,4 @@
<dynamic-split/>
<dynamic-non-split/>
<dynamic-split-no-body/>
<dynamic-non-split-no-body/>

2
test/render/fixtures/dynamic-split-component/test.js Normal file
View File

@ -0,0 +1,2 @@
exports.skip_vdom =
"data-marko-key is not rendered in the vdom only runtime render";

6
test/render/fixtures/dynamic-split-component/vdom-expected.html Normal file
View File

@ -0,0 +1,6 @@
<DIV>
"Body data"
<DIV>
"Body data"
<DIV>
<DIV>

1
test/render/fixtures/self-closing-dynamic/expected.html Normal file
View File

@ -0,0 +1 @@
<input>

3
test/render/fixtures/self-closing-dynamic/template.marko Normal file
View File

@ -0,0 +1,3 @@
$ const tag = 'input';
<${tag} />

1
test/render/fixtures/self-closing-dynamic/vdom-expected.html Normal file
View File

@ -0,0 +1 @@
<INPUT>