Fixes #199 - Better handling of open-only and self-closed tags in Marko v3

compiler/Builder.js

@@ -189,12 +189,12 @@ class Builder {
         return new HtmlComment({comment});
     }
 
-    htmlElement(tagName, attributes, body, argument) {
+    htmlElement(tagName, attributes, body, argument, openTagOnly, selfClosed) {
         if (typeof tagName === 'object' && !(tagName instanceof Node)) {
             let def = arguments[0];
             return new HtmlElement(def);
         } else {
-            return new HtmlElement({tagName, attributes, body, argument});
+            return new HtmlElement({tagName, attributes, body, argument, openTagOnly, selfClosed});
         }
     }
 

compiler/CompileContext.js

@@ -126,7 +126,7 @@ class CompileContext {
         return this._staticCode;
     }
 
-    createNodeForEl(tagName, attributes, argument) {
+    createNodeForEl(tagName, attributes, argument, openTagOnly, selfClosed) {
         var elDef;
         var builder = this.builder;
 
@@ -134,13 +134,8 @@ class CompileContext {
             elDef = tagName;
             tagName = elDef.tagName;
             attributes = elDef.attributes;
-            argument = elDef.argument;
         } else {
-            elDef = {
-                tagName: tagName,
-                argument: argument,
-                attributes: attributes
-            };
+            elDef = { tagName, argument, attributes, openTagOnly, selfClosed };
         }
 
         ok(typeof tagName === 'string', 'Invalid "tagName"');

compiler/Parser.js

@@ -107,6 +107,8 @@ class Parser {
         var elDef = {
             tagName: tagName,
             argument: argument,
+            openTagOnly: el.openTagOnly === true,
+            selfClosed: el.selfClosed === true,
             pos: el.pos,
             attributes: attributes.map((attr) => {
                 var isLiteral = false;

compiler/ast/HtmlElement.js

@@ -11,7 +11,7 @@ class StartTag extends Node {
         this.tagName = def.tagName;
         this.attributes = def.attributes;
         this.argument = def.argument;
-        this.selfClosing = def.selfClosing;
+        this.selfClosed = def.selfClosed;
         this.dynamicAttributes = def.dynamicAttributes;
     }
 
@@ -19,7 +19,7 @@ class StartTag extends Node {
         var builder = codegen.builder;
 
         var tagName = this.tagName;
-        var selfClosing = this.selfClosing;
+        var selfClosed = this.selfClosed;
         var dynamicAttributes = this.dynamicAttributes;
 
         // Starting tag
@@ -44,7 +44,7 @@ class StartTag extends Node {
             });
         }
 
-        if (selfClosing) {
+        if (selfClosed) {
             codegen.addWriteLiteral('/>');
         } else {
             codegen.addWriteLiteral('>');
@@ -80,8 +80,8 @@ class HtmlElement extends Node {
             this._attributes = new HtmlAttributeCollection(this._attributes);
         }
 
-        this.allowSelfClosing = false;
-        this.startTagOnly = false;
+        this.openTagOnly = def.openTagOnly;
+        this.selfClosed = def.selfClosed;
         this.dynamicAttributes = undefined;
         this.bodyOnlyIf = undefined;
     }
@@ -109,36 +109,31 @@ class HtmlElement extends Node {
         var body = this.body;
         var argument = this.argument;
         var hasBody = body && body.length;
-        var startTagOnly = this.startTagOnly;
-        var allowSelfClosing = this.allowSelfClosing === true;
+        var openTagOnly = this.openTagOnly;
         var bodyOnlyIf = this.bodyOnlyIf;
         var dynamicAttributes = this.dynamicAttributes;
-        var selfClosing = false;
+        var selfClosed = this.selfClosed === true;
 
         var builder = codegen.builder;
 
         if (hasBody || bodyOnlyIf) {
-            startTagOnly = false;
-            selfClosing = false;
-        } else {
-            if (allowSelfClosing) {
-                selfClosing = true;
-                startTagOnly = true;
-            }
+            openTagOnly = false;
+            selfClosed = false;
+        } else if (selfClosed){
+            openTagOnly = true;
         }
 
-
         var startTag = new StartTag({
             tagName: tagName,
             attributes: attributes,
             argument: argument,
-            selfClosing: selfClosing,
+            selfClosed: selfClosed,
             dynamicAttributes: dynamicAttributes
         });
 
         var endTag;
 
-        if (!startTagOnly) {
+        if (!openTagOnly) {
             endTag = new EndTag({
                 tagName: tagName
             });
@@ -159,7 +154,7 @@ class HtmlElement extends Node {
                 endIf
             ];
         } else {
-            if (startTagOnly) {
+            if (openTagOnly) {
                 codegen.generateCode(startTag);
             } else {
                 codegen.generateCode(startTag);

docs/compiler-api.md

@@ -383,7 +383,7 @@ builder.htmlComment(
 out.w("<--This is an HTML comment-->");
 ```
 
-### htmlElement(tagName, attributes, body, argument)
+### htmlElement(tagName, attributes, body, argument, openTagOnly, selfClosed)
 
 ```javascript
 builder.htmlElement(

test/fixtures/render/autotest/attr-boolean-placeholder/template.marko

@@ -5,7 +5,7 @@
 <select>
     <option value="${option.value}"
         selected="${option.selected}"
-        for="option in data.options">
+        for(option in data.options)>
 
         ${option.value}
 

test/fixtures/render/autotest/img/expected.html

@@ -0,0 +1 @@
+<img src="foo.jpg">

test/fixtures/render/autotest/img/template.marko

@@ -0,0 +1 @@
+<img src="foo.jpg">

test/fixtures/render/autotest/img/test.js

@@ -0,0 +1,18 @@
+exports.templateData = {
+    "options": [
+        {
+            "value": "red",
+            "selected": false
+        },
+        {
+            "value": "green",
+            "selected": true
+        },
+        {
+            "value": "blue",
+            "selected": false
+        }
+    ],
+    "disabled": false,
+    "checked": true
+};

test/fixtures/render/autotest/tag-code-generator-return-self/expected.html

@@ -1 +1 @@
-<test-tag-code-generator-return-self name="Frank" foo="bar"></test-tag-code-generator-return-self><test-tag-code-generator-return-self name="John" foo="bar"></test-tag-code-generator-return-self>
+<test-tag-code-generator-return-self name="Frank" foo="bar"/><test-tag-code-generator-return-self name="John" foo="bar"/>