marko-js · DylanPiercey · Apr 24, 2020 · Apr 24, 2020
diff --git a/packages/marko/src/runtime/components/beginComponent.js b/packages/marko/src/runtime/components/beginComponent.js
@@ -65,18 +65,18 @@ module.exports = function beginComponent(
 
   if ((ownerIsRenderBoundary || ownerWillRerender) && key != null) {
     out.w(
-      "<!" +
+      "<!--" +
         runtimeId +
         "^" +
         componentId +
         " " +
         ownerComponentDef.id +
         " " +
         key +
-        ">"
+        "-->"
     );
   } else {
-    out.w("<!" + runtimeId + "#" + componentId + ">");
+    out.w("<!--" + runtimeId + "#" + componentId + "-->");
   }
 
   return componentDef;

diff --git a/packages/marko/src/runtime/components/endComponent.js b/packages/marko/src/runtime/components/endComponent.js
@@ -5,7 +5,7 @@ var getComponentsContext = ComponentsContext.___getComponentsContext;
 
 module.exports = function endComponent(out, componentDef) {
   if (componentDef.___renderBoundary) {
-    out.w("<!" + out.global.runtimeId + "/>");
+    out.w("<!--" + out.global.runtimeId + "/-->");
     getComponentsContext(out).___isPreserved = componentDef.___parentPreserved;
   }
 };
diff --git a/packages/marko/src/runtime/html/AsyncStream.js b/packages/marko/src/runtime/html/AsyncStream.js
@@ -573,7 +573,7 @@ var proto = (AsyncStream.prototype = {
 
   ___beginFragment: function(key, component, preserve) {
     if (preserve) {
-      this.write("<!F#" + escapeXmlString(key) + ">");
+      this.write("<!--F#" + escapeXmlString(key) + "-->");
     }
     if (this._elStack) {
       this._elStack.push(preserve);
@@ -585,7 +585,7 @@ var proto = (AsyncStream.prototype = {
   ___endFragment: function() {
     var preserve = this._elStack.pop();
     if (preserve) {
-      this.write("<!F/>");
+      this.write("<!--F/-->");
     }
   },
 

diff --git a/packages/marko/src/runtime/html/helpers/attr.js b/packages/marko/src/runtime/html/helpers/attr.js
@@ -75,5 +75,5 @@ function guessQuotes(value) {
     }
   }
 
-  return value && "=" + value;
+  return value && "=" + (value[len - 1] === "/" ? value + " " : value);
 }
diff --git a/packages/marko/test/hot-reload/fixtures/component-to-template/initial-expected.html b/packages/marko/test/hot-reload/fixtures/component-to-template/initial-expected.html
@@ -1 +1 @@
-<!M#s0><div class=a>Hello Frank</div><!M/>
+<!--M#s0--><div class=a>Hello Frank</div><!--M/-->
diff --git a/packages/marko/test/hot-reload/fixtures/template-export-component/initial-expected.html b/packages/marko/test/hot-reload/fixtures/template-export-component/initial-expected.html
@@ -1 +1 @@
-<!M#s0><div class=a>Hello Frank</div><!M/>
+<!--M#s0--><div class=a>Hello Frank</div><!--M/-->
diff --git a/packages/marko/test/hot-reload/fixtures/template-export-component/reloaded-expected.html b/packages/marko/test/hot-reload/fixtures/template-export-component/reloaded-expected.html
@@ -1 +1 @@
-<!M#s0><div class=b>Hello Frank</div><!M/>
+<!--M#s0--><div class=b>Hello Frank</div><!--M/-->
diff --git a/packages/marko/test/hot-reload/fixtures/template-to-component/reloaded-expected.html b/packages/marko/test/hot-reload/fixtures/template-to-component/reloaded-expected.html
@@ -1 +1 @@
-<!M#s0><div class=b>Hello Jane</div><!M/>
+<!--M#s0--><div class=b>Hello Jane</div><!--M/-->
diff --git a/...ges/marko/test/render/fixtures-async-deprecated/components-await-beginAsync/expected.html b/...ges/marko/test/render/fixtures-async-deprecated/components-await-beginAsync/expected.html
@@ -1 +1 @@
-<html><body><!--FLUSH--><div class=inner><div class=inner-inner><!M#s0-7><div>Hello inner-inner</div><!M/></div><!M#s0-8><div>Hello inner</div><!M/></div><!M#s0-9><div>Hello outer</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>
+<html><body><!--FLUSH--><div class=inner><div class=inner-inner><!--M#s0-7--><div>Hello inner-inner</div><!--M/--></div><!--M#s0-8--><div>Hello inner</div><!--M/--></div><!--M#s0-9--><div>Hello outer</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures-async-deprecated/components-await-title/expected.html b/packages/marko/test/render/fixtures-async-deprecated/components-await-title/expected.html
@@ -1 +1 @@
-<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!M#s0-0-5-5><div>Hello</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-title/components/hello/index.marko"]})</script></body></html>
+<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!--M#s0-0-5-5--><div>Hello</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-title/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures-async-deprecated/components-await/expected.html b/packages/marko/test/render/fixtures-async-deprecated/components-await/expected.html
@@ -1 +1 @@
-<html><body><!--FLUSH--><div class=inner><!--FLUSH--><div class=inner-inner><!M#s0-8><div>Hello inner-inner</div><!M/></div><!M#s0-9><div>Hello inner</div><!M/></div><!M#s0-10><div>Hello outer</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"inner"},{"f":1}],["s0-10",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await/components/hello/index.marko"]})</script></body></html>
+<html><body><!--FLUSH--><div class=inner><!--FLUSH--><div class=inner-inner><!--M#s0-8--><div>Hello inner-inner</div><!--M/--></div><!--M#s0-9--><div>Hello inner</div><!--M/--></div><!--M#s0-10--><div>Hello outer</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"inner"},{"f":1}],["s0-10",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures-deprecated/component-aria-key/expected.html b/packages/marko/test/render/fixtures-deprecated/component-aria-key/expected.html
@@ -1 +1 @@
-<!M#s0><div id="s0-buttonDescription">Submit the form thing</div><button aria-described-by="s0-buttonDescription">Submit</button><!M/>
+<!--M#s0--><div id=s0-buttonDescription>Submit the form thing</div><button aria-described-by=s0-buttonDescription>Submit</button><!--M/-->
diff --git a/packages/marko/test/render/fixtures-deprecated/component-elId/expected.html b/packages/marko/test/render/fixtures-deprecated/component-elId/expected.html
@@ -1 +1 @@
-<!M#s0><div><input id="s0-checkbox"><label for="s0-checkbox"></label></div><!M/>
+<!--M#s0--><div><input id=s0-checkbox><label for=s0-checkbox></label></div><!--M/-->
diff --git a/packages/marko/test/render/fixtures-deprecated/component-getElId/expected.html b/packages/marko/test/render/fixtures-deprecated/component-getElId/expected.html
@@ -1 +1 @@
-<!M#s0><div><input id="s0-checkbox"><label for="s0-checkbox"></label></div><!M/>
+<!--M#s0--><div><input id=s0-checkbox><label for=s0-checkbox></label></div><!--M/-->
diff --git a/packages/marko/test/render/fixtures/attr-unquoted/expected.html b/packages/marko/test/render/fixtures/attr-unquoted/expected.html
@@ -0,0 +1,2 @@
+<div a=abc b="abc " c="abc'" d='abc"' e="abc'&#34;" f='abc"&#39;' g="abc	" h="abc
+" i="abc" j="abc" l=/abc k=abc/ ></div>

diff --git a/packages/marko/test/render/fixtures/attr-unquoted/template.marko b/packages/marko/test/render/fixtures/attr-unquoted/template.marko
@@ -0,0 +1,14 @@
+<div
+  a="abc"
+  b="abc "
+  c="abc'"
+  d='abc"'
+  e="abc'\""
+  f="abc\"'"
+  g="abc\t"
+  h="abc\n"
+  i="abc\r"
+  j="abc\f"
+  l="/abc"
+  k="abc/"
+/>
diff --git a/packages/marko/test/render/fixtures/attr-unquoted/test.js b/packages/marko/test/render/fixtures/attr-unquoted/test.js
@@ -0,0 +1 @@
+exports.templateData = {};
diff --git a/packages/marko/test/render/fixtures/attr-unquoted/vdom-expected.html b/packages/marko/test/render/fixtures/attr-unquoted/vdom-expected.html
@@ -0,0 +1,2 @@
+<DIV a="abc" b="abc " c="abc'" d="abc"" e="abc'"" f="abc"'" g="abc	" h="abc
+" i="abc" j="abc" k="abc/" l="/abc">

diff --git a/packages/marko/test/render/fixtures/component-aria-key/expected.html b/packages/marko/test/render/fixtures/component-aria-key/expected.html
@@ -1 +1 @@
-<!M#s0><div id="s0-buttonDescription">Submit the form thing</div><button aria-described-by="s0-buttonDescription">Submit</button><!M/>
+<!--M#s0--><div id=s0-buttonDescription>Submit the form thing</div><button aria-described-by=s0-buttonDescription>Submit</button><!--M/-->
diff --git a/packages/marko/test/render/fixtures/component-file-export-class/expected.html b/packages/marko/test/render/fixtures/component-file-export-class/expected.html
@@ -1 +1 @@
-<div><!M#s0-1><div class=hello>Hello Frank!</div><!M/></div>
+<div><!--M#s0-1--><div class=hello>Hello Frank!</div><!--M/--></div>
diff --git a/packages/marko/test/render/fixtures/component-label-for/expected.html b/packages/marko/test/render/fixtures/component-label-for/expected.html
@@ -1 +1 @@
-<!M#s0><label for="s0-submitButton">Submit</label><button id="s0-submitButton">Submit</button><!M/>
+<!--M#s0--><label for=s0-submitButton>Submit</label><button id=s0-submitButton>Submit</button><!--M/-->
diff --git a/packages/marko/test/render/fixtures/component-safe-json/expected.html b/packages/marko/test/render/fixtures/component-safe-json/expected.html
@@ -1 +1 @@
-<!M#s0><!DOCTYPE html><html lang=en><body>Hello <script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0",0,{"foo-0":"bar\u2028","foo-1":"bar\u2029","foo-2":"\u2028bar\u2029","foo-3":"Hello \u003C/script> \u2028bar\u2029"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/component-safe-json/template.marko"]})</script></body></html><!M/>
+<!--M#s0--><!DOCTYPE html><html lang=en><body>Hello <script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0",0,{"foo-0":"bar\u2028","foo-1":"bar\u2029","foo-2":"\u2028bar\u2029","foo-3":"Hello \u003C/script> \u2028bar\u2029"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/component-safe-json/template.marko"]})</script></body></html><!--M/-->
diff --git a/packages/marko/test/render/fixtures/components-await-beginAsync/expected.html b/packages/marko/test/render/fixtures/components-await-beginAsync/expected.html
@@ -1 +1 @@
-<html><body><!--FLUSH--><div class=inner><div class=inner-inner><!M#s0-7><div>Hello inner-inner</div><!M/></div><!M#s0-8><div>Hello inner</div><!M/></div><!M#s0-9><div>Hello outer</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>
+<html><body><!--FLUSH--><div class=inner><div class=inner-inner><!--M#s0-7--><div>Hello inner-inner</div><!--M/--></div><!--M#s0-8--><div>Hello inner</div><!--M/--></div><!--M#s0-9--><div>Hello outer</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures/components-await-title/expected.html b/packages/marko/test/render/fixtures/components-await-title/expected.html
@@ -1 +1 @@
-<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!M#s0-0-5-5><div>Hello</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await-title/components/hello/index.marko"]})</script></body></html>
+<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!--M#s0-0-5-5--><div>Hello</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await-title/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures/components-await/expected.html b/packages/marko/test/render/fixtures/components-await/expected.html
@@ -1 +1 @@
-<html><body><!--FLUSH--><div class=inner><!--FLUSH--><div class=inner-inner><!M#s0-8><div>Hello inner-inner</div><!M/></div><!M#s0-9><div>Hello inner</div><!M/></div><!M#s0-10><div>Hello outer</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"inner"},{"f":1}],["s0-10",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await/components/hello/index.marko"]})</script></body></html>
+<html><body><!--FLUSH--><div class=inner><!--FLUSH--><div class=inner-inner><!--M#s0-8--><div>Hello inner-inner</div><!--M/--></div><!--M#s0-9--><div>Hello inner</div><!--M/--></div><!--M#s0-10--><div>Hello outer</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"inner"},{"f":1}],["s0-10",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures/components-await/components/hello/index.marko"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures/components/expected.html b/packages/marko/test/render/fixtures/components/expected.html
@@ -1 +1 @@
-<html><head>Components</head><body><!M#s0-3><div><h1>foo1</h1><div><h1>bar1</h1></div><div><h1>bar2</h1></div><div><h1>foo-split1</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div><div><h1>foo-split2</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div></div><!M/><!M#s0-4><div><h1>foo2</h1><div><h1>bar1</h1></div><div><h1>bar2</h1></div><div><h1>foo-split1</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div><div><h1>foo-split2</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div></div><!M/><!M#s0-5><div><h1>split1</h1><!M^s0-5-split-child1 s0-5 split-child1><div><h1>split-child1</h1></div><!M/><!M^s0-5-split-child2 s0-5 split-child2><div><h1>split-child2</h1></div><!M/></div><!M/><!M#s0-6><div><h1>split2</h1><!M^s0-6-split-child1 s0-6 split-child1><div><h1>split-child1</h1></div><!M/><!M^s0-6-split-child2 s0-6 split-child2><div><h1>split-child2</h1></div><!M/></div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-3",0,{"name":"foo1"},{"f":1}],["s0-4",0,{"name":"foo2"},{"f":1}],["s0-5",1,{"name":"split1"}],["s0-5-split-child1",2,{"name":"split-child1"}],["s0-5-split-child2",2,{"name":"split-child2"}],["s0-6",1,{"name":"split2"}],["s0-6-split-child1",2,{"name":"split-child1"}],["s0-6-split-child2",2,{"name":"split-child2"}]],"t":["/marko-test$1.0.0/render/fixtures/components/components/foo/index.marko","/marko-test$1.0.0/render/fixtures/components/components/split/component-browser","/marko-test$1.0.0/render/fixtures/components/components/split/components/split-child/component-browser"]})</script></body></html>
+<html><head>Components</head><body><!--M#s0-3--><div><h1>foo1</h1><div><h1>bar1</h1></div><div><h1>bar2</h1></div><div><h1>foo-split1</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div><div><h1>foo-split2</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div></div><!--M/--><!--M#s0-4--><div><h1>foo2</h1><div><h1>bar1</h1></div><div><h1>bar2</h1></div><div><h1>foo-split1</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div><div><h1>foo-split2</h1><div><h1>split-child1</h1></div><div><h1>split-child2</h1></div></div></div><!--M/--><!--M#s0-5--><div><h1>split1</h1><!--M^s0-5-split-child1 s0-5 split-child1--><div><h1>split-child1</h1></div><!--M/--><!--M^s0-5-split-child2 s0-5 split-child2--><div><h1>split-child2</h1></div><!--M/--></div><!--M/--><!--M#s0-6--><div><h1>split2</h1><!--M^s0-6-split-child1 s0-6 split-child1--><div><h1>split-child1</h1></div><!--M/--><!--M^s0-6-split-child2 s0-6 split-child2--><div><h1>split-child2</h1></div><!--M/--></div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-3",0,{"name":"foo1"},{"f":1}],["s0-4",0,{"name":"foo2"},{"f":1}],["s0-5",1,{"name":"split1"}],["s0-5-split-child1",2,{"name":"split-child1"}],["s0-5-split-child2",2,{"name":"split-child2"}],["s0-6",1,{"name":"split2"}],["s0-6-split-child1",2,{"name":"split-child1"}],["s0-6-split-child2",2,{"name":"split-child2"}]],"t":["/marko-test$1.0.0/render/fixtures/components/components/foo/index.marko","/marko-test$1.0.0/render/fixtures/components/components/split/component-browser","/marko-test$1.0.0/render/fixtures/components/components/split/components/split-child/component-browser"]})</script></body></html>
diff --git a/packages/marko/test/render/fixtures/dynamic-split-component/expected.html b/packages/marko/test/render/fixtures/dynamic-split-component/expected.html
@@ -1 +1 @@
-<!M#s0-0><div data-marko-key="@test s0-0">Body data</div><!M/><!M#s0-1><div>Body data</div><!M/><!M#s0-2><div data-marko-key="@test s0-2"></div><!M/><!M#s0-3><div></div><!M/>
+<!--M#s0-0--><div data-marko-key="@test s0-0">Body data</div><!--M/--><!--M#s0-1--><div>Body data</div><!--M/--><!--M#s0-2--><div data-marko-key="@test s0-2"></div><!--M/--><!--M#s0-3--><div></div><!--M/-->
diff --git a/packages/marko/test/render/fixtures/dynamic-tag-arguments/expected.html b/packages/marko/test/render/fixtures/dynamic-tag-arguments/expected.html
@@ -1 +1 @@
-<!M#s0><!F#0>testPage http://ebay.com<div style="color:green"></div><!F/><!M/>
+<!--M#s0--><!--F#0-->testPage http://ebay.com<div style=color:green></div><!--F/--><!--M/-->
diff --git a/packages/marko/test/render/fixtures/global-runtime-id/expected.html b/packages/marko/test/render/fixtures/global-runtime-id/expected.html
@@ -1 +1 @@
-<!FOO#s0><div></div><!FOO/>
+<!--FOO#s0--><div></div><!--FOO/-->