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

…1499)

package.json

@@ -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"

src/core-tags/components/helpers/markoKeyAttr.js

@@ -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;

src/runtime/helpers/dynamic-tag.js

@@ -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) {

src/runtime/html/AsyncStream.js

@@ -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;

src/runtime/vdom/AsyncVDOMBuilder.js

@@ -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

test/components-pages/fixtures/empty-tag-with-key/components/dynamic-tag-key/index.marko

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

test/components-pages/fixtures/empty-tag-with-key/components/split-tag-key/component-browser.js

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

test/components-pages/fixtures/empty-tag-with-key/components/split-tag-key/index.marko

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

test/components-pages/fixtures/empty-tag-with-key/marko.json

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

test/components-pages/fixtures/empty-tag-with-key/template.marko

@@ -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/>
+

test/components-pages/fixtures/empty-tag-with-key/tests.js

@@ -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);
+});

test/render/fixtures/dynamic-split-component/components/dynamic-non-split-no-body/index.marko

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

test/render/fixtures/dynamic-split-component/components/dynamic-non-split/index.marko

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

test/render/fixtures/dynamic-split-component/components/dynamic-split-no-body/component-browser.js

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

test/render/fixtures/dynamic-split-component/components/dynamic-split-no-body/index.marko

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

test/render/fixtures/dynamic-split-component/components/dynamic-split/component-browser.js

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

test/render/fixtures/dynamic-split-component/components/dynamic-split/index.marko

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

test/render/fixtures/dynamic-split-component/expected.html

@@ -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/-->

test/render/fixtures/dynamic-split-component/template.marko

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

test/render/fixtures/dynamic-split-component/test.js

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

test/render/fixtures/dynamic-split-component/vdom-expected.html

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

test/render/fixtures/self-closing-dynamic/expected.html

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

test/render/fixtures/self-closing-dynamic/template.marko

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

test/render/fixtures/self-closing-dynamic/vdom-expected.html

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