From 0a227d0c7c27821df551c1367e160793dc9e234e Mon Sep 17 00:00:00 2001
From: Dylan Piercey <dpiercey@ebay.com>
Date: Thu, 30 Apr 2020 13:02:46 -0700
Subject: [PATCH] fix: data-marko attributes under 'no-update' with <await>
 (#1564)

(cherry picked from commit 211a8a334b58af035347cb4f91f4e6a625c35d82)
---
 packages/marko/src/runtime/html/AsyncStream.js       |  4 ++--
 .../marko/src/runtime/html/helpers/data-marko.js     |  7 +++----
 .../await-no-update-content/component-browser.js     |  1 +
 .../fixtures/await-no-update-content/expected.html   |  1 +
 .../fixtures/await-no-update-content/template.marko  |  7 +++++++
 .../render/fixtures/await-no-update-content/test.js  |  5 +++++
 .../src/tag/native-tag[html]/index.js                | 11 +++++++----
 .../data-marko-implicit-component/html-expected.js   |  2 +-
 .../test/fixtures/event-handlers/html-expected.js    |  6 +++---
 .../test/fixtures/for-tag/html-expected.js           | 12 ++++++------
 .../no-update-modifier-multiple/html-expected.js     |  4 ++--
 .../fixtures/no-update-modifier/html-expected.js     |  2 +-
 .../test/fixtures/simple-attrs-tag/html-expected.js  |  2 +-
 13 files changed, 40 insertions(+), 24 deletions(-)
 create mode 100644 packages/marko/test/render/fixtures/await-no-update-content/component-browser.js
 create mode 100644 packages/marko/test/render/fixtures/await-no-update-content/expected.html
 create mode 100644 packages/marko/test/render/fixtures/await-no-update-content/template.marko
 create mode 100644 packages/marko/test/render/fixtures/await-no-update-content/test.js

diff --git a/packages/marko/src/runtime/html/AsyncStream.js b/packages/marko/src/runtime/html/AsyncStream.js
index 286028f46f..6a30f37a9e 100644
--- 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
index ecc9d53ee5..fc12203890 100644
--- 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
new file mode 100644
index 0000000000..f053ebf797
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..fd42f999cf
--- /dev/null
+++ 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/-->
\ No newline at end of file
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
new file mode 100644
index 0000000000..4a0ac0ad84
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..2989a279c3
--- /dev/null
+++ 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
index 15f21bc00a..7457bf5d49 100644
--- a/packages/translator-default/src/tag/native-tag[html]/index.js
+++ b/packages/translator-default/src/tag/native-tag[html]/index.js
@@ -77,7 +77,10 @@ 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.
@@ -85,14 +88,14 @@ export default function(path) {
       }
 
       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
index e78d9d4325..d94a87bcb1 100644
--- 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
index 0afc89b026..d9d88558ce 100644
--- 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
index d2fbf20492..aa63ea4bd4 100644
--- 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,27 +43,27 @@ _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>`);
     }
   }
 
@@ -71,7 +71,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
     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
index 6f6e9d03b0..9adc9d806d 100644
--- 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
index 05cfd7b760..db89a3ca08 100644
--- 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
index 327be82d0a..b932efb9e3 100644
--- 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>`);
 }, {