fix: data-marko attributes under 'no-update' with <await> (#1564)

(cherry picked from commit 211a8a3)
marko-js · May 19, 2020 · 0a227d0 · 0a227d0
1 parent 370c7bc
commit 0a227d0
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 24 deletions.
diff --git a/packages/marko/src/runtime/html/AsyncStream.js b/packages/marko/src/runtime/html/AsyncStream.js
@@ -500,7 +500,7 @@ var proto = (AsyncStream.prototype = {
     var str =
       "<" +
       tagName +
-      markoAttr(props, key, componentDef) +
+      markoAttr(this, componentDef, props, key) +
       attrsHelper(elementAttrs) +
       ">";
 
@@ -531,7 +531,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
@@ -6,13 +6,12 @@ var escapeDoubleQuotes = escapeQuoteHelpers.___escapeDoubleQuotes;
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 // var FLAG_HAS_RENDER_BODY = 2;
 
-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/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.";
diff --git a/packages/translator-default/src/tag/native-tag[html]/index.js b/packages/translator-default/src/tag/native-tag[html]/index.js
@@ -77,22 +77,25 @@ export default function(path) {
     const needsDataMarkoAttr = isSplit || isImplicit || isPreserved(path);
 
     if (needsDataMarkoAttr) {
-      const dataMarkoArgs = [];
+      const dataMarkoArgs = [
+        t.identifier("out"),
+        hub._componentDefIdentifier
+      ];
 
       if (tagProperties.length) {
         // TODO we should pre evaluate this if it is static.
         dataMarkoArgs.push(t.objectExpression(tagProperties));
       }
 
       if (hasUserKey(path)) {
-        if (dataMarkoArgs.length === 0) {
-          dataMarkoArgs.push(t.nullLiteral());
+        if (dataMarkoArgs.length === 2) {
+          dataMarkoArgs.push(t.numericLiteral(0));
         }
 
         dataMarkoArgs.push(path.get("key").node, hub._componentDefIdentifier);
       }
 
-      if (dataMarkoArgs.length) {
+      if (dataMarkoArgs.length > 2) {
         dataMarko = t.callExpression(
           hub.importDefault(
             path,

diff --git a/packages/translator-default/test/fixtures/data-marko-implicit-component/html-expected.js b/packages/translator-default/test/fixtures/data-marko-implicit-component/html-expected.js
@@ -8,7 +8,7 @@ import { t as _t } from "marko/src/runtime/html";
 const _marko_componentType = "PGtLNOSk",
       _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
-  out.w(`<div${_marko_props({
+  out.w(`<div${_marko_props(out, _component, {
     noupdate: ["class"]
   })} class=test>Hello ${_marko_escapeXml(input.name)}</div>`);
 }, {

diff --git a/packages/translator-default/test/fixtures/event-handlers/html-expected.js b/packages/translator-default/test/fixtures/event-handlers/html-expected.js
@@ -9,11 +9,11 @@ import { t as _t } from "marko/src/runtime/html";
 const _marko_componentType = "BaPp2UaD",
       _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
-  out.w(`<div${_marko_props({
+  out.w(`<div${_marko_props(out, _component, {
     "onclick": _component.d("click", "handleClick", false, [a, b, ...d])
-  })}></div><div${_marko_props({
+  })}></div><div${_marko_props(out, _component, {
     "onDashed-cased-Event": _component.d("Dashed-cased-Event", "handle", false)
-  })}></div><div${_marko_props({
+  })}></div><div${_marko_props(out, _component, {
     "oncamelcasedevent": _component.d("camelcasedevent", "handle", false)
   })} onmouseout=someStringHandler></div>`);
 

diff --git a/packages/translator-default/test/fixtures/for-tag/html-expected.js b/packages/translator-default/test/fixtures/for-tag/html-expected.js
@@ -34,7 +34,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
     let i = _i2++;
     const _keyValue = `@${i}`,
           _keyScope4 = `[${_keyValue}]`;
-    out.w(`<div${_marko_props(null, _keyValue, _component)}>${_marko_escapeXml(i)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(null, `@other-${i}`, _component)}></div>`);
+    out.w(`<div${_marko_props(out, _component, 0, _keyValue, _component)}>${_marko_escapeXml(i)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _component, 0, `@other-${i}`, _component)}></div>`);
   }
 
   let _i3 = 0;
@@ -43,35 +43,35 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
   for (const val of list) {
     let i = _i3++;
     const _keyValue2 = `@${i}`;
-    out.w(`<div${_marko_props(null, _keyValue2, _component)}>${_marko_escapeXml(list.length)}: ${_marko_escapeXml(val)}</div>`);
+    out.w(`<div${_marko_props(out, _component, 0, _keyValue2, _component)}>${_marko_escapeXml(list.length)}: ${_marko_escapeXml(val)}</div>`);
   }
 
   for (const key in obj) {
     const val = obj[key];
     const _keyValue3 = `@${key}`,
           _keyScope5 = `[${_keyValue3}]`;
-    out.w(`<div${_marko_props(null, _keyValue3, _component)}>${_marko_escapeXml(key)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(null, `@other-${key}`, _component)}></div>`);
+    out.w(`<div${_marko_props(out, _component, 0, _keyValue3, _component)}>${_marko_escapeXml(key)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _component, 0, `@other-${key}`, _component)}></div>`);
   }
 
   for (let _steps3 = (10 - 0) / 2, _step3 = 0; _step3 <= _steps3; _step3++) {
     const i = 0 + _step3 * 2;
     const _keyValue4 = `@${i}`,
           _keyScope6 = `[${_keyValue4}]`;
-    out.w(`<div${_marko_props(null, _keyValue4, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(null, `@other-${i}`, _component)}></div>`);
+    out.w(`<div${_marko_props(out, _component, 0, _keyValue4, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _component, 0, `@other-${i}`, _component)}></div>`);
 
     for (let _steps2 = (10 - 0) / 2, _step2 = 0; _step2 <= _steps2; _step2++) {
       const i = 0 + _step2 * 2;
       const _keyValue5 = `@${i}`,
             _keyScope7 = `[${_keyValue5}]`;
-      out.w(`<div${_marko_props(null, _keyValue5, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(null, `@other-${i}`, _component)}></div>`);
+      out.w(`<div${_marko_props(out, _component, 0, _keyValue5, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _component, 0, `@other-${i}`, _component)}></div>`);
     }
   }
 
   for (let _steps4 = (0 - 10) / -2, _step4 = 0; _step4 <= _steps4; _step4++) {
     const i = 10 + _step4 * -2;
     const _keyValue6 = `@${i}`,
           _keyScope8 = `[${_keyValue6}]`;
-    out.w(`<div${_marko_props(null, _keyValue6, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(null, `@other-${i}`, _component)}></div>`);
+    out.w(`<div${_marko_props(out, _component, 0, _keyValue6, _component)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _component, 0, `@other-${i}`, _component)}></div>`);
   }
 }, {
   t: _marko_componentType,

diff --git a/packages/translator-default/test/fixtures/no-update-modifier-multiple/html-expected.js b/packages/translator-default/test/fixtures/no-update-modifier-multiple/html-expected.js
@@ -8,9 +8,9 @@ import { t as _t } from "marko/src/runtime/html";
 const _marko_componentType = "jWznNrMq",
       _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
-  out.w(`<div><input${_marko_props({
+  out.w(`<div><input${_marko_props(out, _component, {
     noupdate: ["value"]
-  })}${_marko_attr("value", input.defaultValue)}><input${_marko_props({
+  })}${_marko_attr("value", input.defaultValue)}><input${_marko_props(out, _component, {
     noupdate: ["value", "checked"]
   })} type=checkbox${_marko_attr("value", input.defaultValue)}${_marko_attr("checked", input.checked)}></div>`);
 }, {

diff --git a/packages/translator-default/test/fixtures/no-update-modifier/html-expected.js b/packages/translator-default/test/fixtures/no-update-modifier/html-expected.js
@@ -8,7 +8,7 @@ import { t as _t } from "marko/src/runtime/html";
 const _marko_componentType = "jmf6k77l",
       _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
-  out.w(`<input${_marko_props({
+  out.w(`<input${_marko_props(out, _component, {
     noupdate: ["value"]
   })}${_marko_attr("value", input.defaultValue)}>`);
 }, {

diff --git a/packages/translator-default/test/fixtures/simple-attrs-tag/html-expected.js b/packages/translator-default/test/fixtures/simple-attrs-tag/html-expected.js
@@ -7,7 +7,7 @@ import { t as _t } from "marko/src/runtime/html";
 const _marko_componentType = "YBWmqrQ3",
       _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
-  out.w(`<div style=c:1px; class=b id=a></div><div style=c:1px; id=a></div><div style=c:1px;></div><div${_marko_props({
+  out.w(`<div style=c:1px; class=b id=a></div><div style=c:1px; id=a></div><div style=c:1px;></div><div${_marko_props(out, _component, {
     noupdate: ["style"]
   })} style=c:1px;></div><div a=1 style=c:1px;></div>`);
 }, {