fix: issue with data-marko attributes under 'no-update' with <await>

marko-js · Apr 30, 2020 · 1cab05a · 1cab05a
1 parent f793a99
commit 1cab05a
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 19 deletions.
diff --git a/packages/marko/src/compiler/ast/HtmlElement/html/StartTag.js b/packages/marko/src/compiler/ast/HtmlElement/html/StartTag.js
@@ -27,7 +27,10 @@ class StartTag extends Node {
     var attributes = this.attributes;
 
     if (this.includeDataMarko) {
-      var dataMarkoArgs = [];
+      var dataMarkoArgs = [
+        builder.identifier("out"),
+        builder.identifier("__component")
+      ];
 
       var properties = this.properties;
       if (properties) {
@@ -48,14 +51,14 @@ class StartTag extends Node {
       }
 
       if (this.userKey) {
-        if (dataMarkoArgs.length === 0) {
-          dataMarkoArgs.push(builder.literal(null));
+        if (dataMarkoArgs.length === 2) {
+          dataMarkoArgs.push(builder.literal(0));
         }
 
-        dataMarkoArgs.push(this.userKey, builder.identifier("__component"));
+        dataMarkoArgs.push(this.userKey);
       }
 
-      if (dataMarkoArgs.length) {
+      if (dataMarkoArgs.length > 2) {
         nodes.push(
           builder.html(
             builder.functionCall(context.helper("dataMarko"), dataMarkoArgs)

diff --git a/packages/marko/src/runtime/html/AsyncStream.js b/packages/marko/src/runtime/html/AsyncStream.js
@@ -502,7 +502,7 @@ var proto = (AsyncStream.prototype = {
     var str =
       "<" +
       tagName +
-      markoAttr(props, key, componentDef) +
+      markoAttr(this, componentDef, props, key) +
       attrsHelper(elementAttrs) +
       ">";
 
@@ -533,7 +533,7 @@ var proto = (AsyncStream.prototype = {
     var str =
       "<" +
       name +
-      markoAttr(props, key, componentDef) +
+      markoAttr(this, componentDef, props, key) +
       attrsHelper(elementAttrs) +
       ">";
 

diff --git a/packages/marko/src/runtime/html/helpers/data-marko.js b/packages/marko/src/runtime/html/helpers/data-marko.js
@@ -8,13 +8,12 @@ var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 // var FLAG_IS_LEGACY = 4;
 // var FLAG_OLD_HYDRATE_NO_CREATE = 8;
 
-module.exports = function dataMarko(props, key, componentDef) {
+module.exports = function dataMarko(out, componentDef, props, key) {
   var result = "";
   var willNotRerender =
-    !componentDef ||
+    out.___components.___isPreserved ||
     (componentDef.___renderBoundary &&
-      (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) === 0) ||
-    componentDef.___componentsContext.___isPreserved;
+      (componentDef.___flags & FLAG_WILL_RERENDER_IN_BROWSER) === 0);
 
   if (willNotRerender) {
     if (props) {

diff --git a/packages/marko/test/compiler/fixtures-html/no-update-multiple/expected.js b/packages/marko/test/compiler/fixtures-html/no-update-multiple/expected.js
@@ -12,14 +12,14 @@ function render(input, out, __component, component, state) {
   var data = input;
 
   out.w("<div><input" +
-    marko_dataMarko({
+    marko_dataMarko(out, __component, {
       noupdate: [
         "value"
       ]
     }) +
     marko_attr("value", input.defaultValue) +
     "><input" +
-    marko_dataMarko({
+    marko_dataMarko(out, __component, {
       noupdate: [
         "value"
       ]

diff --git a/packages/marko/test/compiler/fixtures-html/no-update/expected.js b/packages/marko/test/compiler/fixtures-html/no-update/expected.js
@@ -12,7 +12,7 @@ function render(input, out, __component, component, state) {
   var data = input;
 
   out.w("<input" +
-    marko_dataMarko({
+    marko_dataMarko(out, __component, {
       noupdate: [
         "value"
       ]

diff --git a/...ges/marko/test/components-compilation/fixtures-html-deprecated/bind-component/expected.js b/...ges/marko/test/components-compilation/fixtures-html-deprecated/bind-component/expected.js
@@ -11,7 +11,7 @@ function render(input, out, __component, widget, component) {
   var data = input;
 
   out.w("<div" +
-    marko_dataMarko(null, "@_wbind", __component) +
+    marko_dataMarko(out, __component, 0, "@_wbind") +
     " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-component/index" +
     marko_attr("id", __component.elId()) +
     "></div>");

diff --git a/packages/marko/test/components-compilation/fixtures-html-deprecated/bind-widget/expected.js b/packages/marko/test/components-compilation/fixtures-html-deprecated/bind-widget/expected.js
@@ -10,7 +10,7 @@ function render(input, out, __component, widget, component) {
   var data = input;
 
   out.w("<div" +
-    marko_dataMarko(null, "@_wbind", __component) +
+    marko_dataMarko(out, __component, 0, "@_wbind") +
     " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-widget/widget" +
     marko_attr("id", __component.elId()) +
     "></div>");

diff --git a/...o/test/components-compilation/fixtures-html-deprecated/component-include-attr/expected.js b/...o/test/components-compilation/fixtures-html-deprecated/component-include-attr/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, widget, component) {
   var data = input;
 
   out.w("<div" +
-    marko_dataMarko(null, "@_wbind", __component) +
+    marko_dataMarko(out, __component, 0, "@_wbind") +
     " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-include-attr/index" +
     marko_attr("id", __component.elId()) +
     "><h1>Header</h1><div>");

diff --git a/...test/components-compilation/fixtures-html-deprecated/component-template-entry/expected.js b/...test/components-compilation/fixtures-html-deprecated/component-template-entry/expected.js
@@ -10,7 +10,7 @@ function render(input, out, __component, widget, component) {
   var data = input;
 
   out.w("<div" +
-    marko_dataMarko(null, "@_wbind", __component) +
+    marko_dataMarko(out, __component, 0, "@_wbind") +
     " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-template-entry/component" +
     marko_attr("id", __component.elId()) +
     "></div>");

diff --git a/packages/marko/test/components-compilation/fixtures-html-deprecated/widget-types/expected.js b/packages/marko/test/components-compilation/fixtures-html-deprecated/widget-types/expected.js
@@ -14,7 +14,7 @@ function render(input, out, __component, widget, component) {
   __component.t(marko_componentTypes[data.isMobile ? "default" : "mobile"]);
 
   out.w("<div" +
-    marko_dataMarko(null, "@_wbind", __component) +
+    marko_dataMarko(out, __component, 0, "@_wbind") +
     "></div>");
 }
 

diff --git a/packages/marko/test/render/fixtures/await-no-update-content/component-browser.js b/packages/marko/test/render/fixtures/await-no-update-content/component-browser.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/packages/marko/test/render/fixtures/await-no-update-content/expected.html b/packages/marko/test/render/fixtures/await-no-update-content/expected.html
@@ -0,0 +1 @@
+<!--F#p_abc--><button data-marko='{"onclick":"handleClick s0 false"}' data-marko-key="@abc s0">Click Me</button><!--F/-->
diff --git a/packages/marko/test/render/fixtures/await-no-update-content/template.marko b/packages/marko/test/render/fixtures/await-no-update-content/template.marko
@@ -0,0 +1,7 @@
+<await(data.promiseData)>
+    <@then>
+        <button key="abc" no-update on-click("handleClick")>
+            Click Me
+        </button>
+    </@then>
+</await>
diff --git a/packages/marko/test/render/fixtures/await-no-update-content/test.js b/packages/marko/test/render/fixtures/await-no-update-content/test.js
@@ -0,0 +1,5 @@
+exports.templateData = {
+  promiseData: Promise.resolve("Test promise")
+};
+
+exports.skip_vdom = "This test is only used to test the hydrate boundaries.";