fix: hydration native tag no-update issue

marko-js · Apr 15, 2024 · 7d1bbdb · 7d1bbdb
1 parent 695b9f6
commit 7d1bbdb
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 37 deletions.
diff --git a/.changeset/fuzzy-shoes-wave.md b/.changeset/fuzzy-shoes-wave.md
@@ -0,0 +1,7 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+"@marko/compiler": patch
+---
+
+I completely messed up the release of https://github.com/marko-js/marko/pull/2205, this fixes that.
diff --git a/.changeset/grumpy-shirts-cross.md b/.changeset/grumpy-shirts-cross.md
@@ -0,0 +1,5 @@
+---
+"marko": patch
+---
+
+Fix issue where native tags with `no-update` were not having their key serialized from the server causing a hydration diffing issue in some cases.
diff --git a/packages/marko/src/runtime/html/AsyncStream.js b/packages/marko/src/runtime/html/AsyncStream.js
@@ -597,7 +597,12 @@ var proto = (AsyncStream.prototype = {
     var str =
       "<" +
       tagName +
-      markoAttr(this, componentDef, props, key) +
+      markoAttr(
+        this,
+        componentDef,
+        props,
+        key && key[0] === "@" ? key : undefined,
+      ) +
       attrsHelper(elementAttrs);
 
     if (selfClosingTags.voidElements.indexOf(tagName) !== -1) {

diff --git a/packages/marko/src/runtime/html/helpers/data-marko.js b/packages/marko/src/runtime/html/helpers/data-marko.js
@@ -23,7 +23,7 @@ module.exports = function dataMarko(out, componentDef, props, key) {
       }
     }
 
-    if (key && key[0] === "@") {
+    if (key) {
       result +=
         ' data-marko-key="' +
         escapeDoubleQuotes(

diff --git a/packages/marko/test/components-browser/fixtures/preserve-dom-server-mismatch/test.js b/packages/marko/test/components-browser/fixtures/preserve-dom-server-mismatch/test.js
@@ -9,5 +9,3 @@ module.exports = function (helpers) {
 
   expect(component.getEl("list").textContent).to.equal("123");
 };
-
-module.exports.fails_hydrate = true;
diff --git a/packages/translator-default/src/tag/native-tag[html]/index.js b/packages/translator-default/src/tag/native-tag[html]/index.js
@@ -102,12 +102,12 @@ export default function (path, isNullable) {
         dataMarkoArgs.push(t.objectExpression(tagProperties));
       }
 
-      if (hasUserKey(path)) {
+      if (hasUserKey(path) || (key && node.isPreserved)) {
         if (dataMarkoArgs.length === 2) {
           dataMarkoArgs.push(t.numericLiteral(0));
         }
 
-        dataMarkoArgs.push(key, file._componentDefIdentifier);
+        dataMarkoArgs.push(key);
       }
 
       if (dataMarkoArgs.length > 2) {

diff --git a/packages/translator-default/test/fixtures/for-tag/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/for-tag/snapshots/cjs-expected.js
@@ -49,20 +49,20 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
     let i = _i2++;
     const _keyValue = `@${i}`,
       _keyScope4 = `[${_keyValue}]`;
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue, _componentDef)}>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue)}>`);
     out.w((0, _escapeXml.x)(i));
     out.w(": ");
     out.w((0, _escapeXml.x)(val));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   let _i3 = 0;
   const list = arr;
   for (const val of list) {
     let i = _i3++;
     const _keyValue2 = `@${i}`;
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue2, _componentDef)}>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue2)}>`);
     out.w((0, _escapeXml.x)(list.length));
     out.w(": ");
     out.w((0, _escapeXml.x)(val));
@@ -72,43 +72,43 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
     const val = obj[key];
     const _keyValue3 = `@${key}`,
       _keyScope5 = `[${_keyValue3}]`;
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue3, _componentDef)}>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue3)}>`);
     out.w((0, _escapeXml.x)(key));
     out.w(": ");
     out.w((0, _escapeXml.x)(val));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${key}`, _componentDef)}></div>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${key}`)}></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${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue4, _componentDef)}>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue4)}>`);
     out.w((0, _escapeXml.x)(i));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`)}></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${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue5, _componentDef)}>`);
+      out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue5)}>`);
       out.w((0, _escapeXml.x)(i));
       out.w("</div>");
       out.w("<div></div>");
-      out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+      out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`)}></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${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue6, _componentDef)}>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, _keyValue6)}>`);
     out.w((0, _escapeXml.x)(i));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   for (let _steps5 = (10 - 0) / 1, _step5 = 0; _step5 <= _steps5; _step5++) {
     out.w("Hello");

diff --git a/packages/translator-default/test/fixtures/for-tag/snapshots/html-expected.js b/packages/translator-default/test/fixtures/for-tag/snapshots/html-expected.js
@@ -44,20 +44,20 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     let i = _i2++;
     const _keyValue = `@${i}`,
       _keyScope4 = `[${_keyValue}]`;
-    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue, _componentDef)}>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue)}>`);
     out.w(_marko_escapeXml(i));
     out.w(": ");
     out.w(_marko_escapeXml(val));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   let _i3 = 0;
   const list = arr;
   for (const val of list) {
     let i = _i3++;
     const _keyValue2 = `@${i}`;
-    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue2, _componentDef)}>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue2)}>`);
     out.w(_marko_escapeXml(list.length));
     out.w(": ");
     out.w(_marko_escapeXml(val));
@@ -67,43 +67,43 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     const val = obj[key];
     const _keyValue3 = `@${key}`,
       _keyScope5 = `[${_keyValue3}]`;
-    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue3, _componentDef)}>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue3)}>`);
     out.w(_marko_escapeXml(key));
     out.w(": ");
     out.w(_marko_escapeXml(val));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${key}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${key}`)}></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(out, _componentDef, 0, _keyValue4, _componentDef)}>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue4)}>`);
     out.w(_marko_escapeXml(i));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></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(out, _componentDef, 0, _keyValue5, _componentDef)}>`);
+      out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue5)}>`);
       out.w(_marko_escapeXml(i));
       out.w("</div>");
       out.w("<div></div>");
-      out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+      out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></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(out, _componentDef, 0, _keyValue6, _componentDef)}>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue6)}>`);
     out.w(_marko_escapeXml(i));
     out.w("</div>");
     out.w("<div></div>");
-    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   for (let _steps5 = (10 - 0) / 1, _step5 = 0; _step5 <= _steps5; _step5++) {
     out.w("Hello");

diff --git a/packages/translator-default/test/fixtures/for-tag/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/for-tag/snapshots/htmlProduction-expected.js
@@ -28,38 +28,38 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     let i = _i2++;
     const _keyValue = `@${i}`,
       _keyScope4 = `[${_keyValue}]`;
-    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue, _componentDef)}>${_marko_escapeXml(i)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue)}>${_marko_escapeXml(i)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   let _i3 = 0;
   const list = arr;
   for (const val of list) {
     let i = _i3++;
     const _keyValue2 = `@${i}`;
-    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue2, _componentDef)}>${_marko_escapeXml(list.length)}: ${_marko_escapeXml(val)}</div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue2)}>${_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(out, _componentDef, 0, _keyValue3, _componentDef)}>${_marko_escapeXml(key)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${key}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue3)}>${_marko_escapeXml(key)}: ${_marko_escapeXml(val)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${key}`)}></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(out, _componentDef, 0, _keyValue4, _componentDef)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue4)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></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(out, _componentDef, 0, _keyValue5, _componentDef)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+      out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue5)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></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(out, _componentDef, 0, _keyValue6, _componentDef)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`, _componentDef)}></div>`);
+    out.w(`<div${_marko_props(out, _componentDef, 0, _keyValue6)}>${_marko_escapeXml(i)}</div><div></div><div${_marko_props(out, _componentDef, 0, `@other-${i}`)}></div>`);
   }
   for (let _steps5 = (10 - 0) / 1, _step5 = 0; _step5 <= _steps5; _step5++) {
     out.w("Hello");

diff --git a/packages/translator-default/test/fixtures/no-update-directives/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/no-update-directives/snapshots/cjs-expected.js
@@ -6,6 +6,7 @@ var _index = require("marko/src/runtime/html/index.js");
 var _index2 = _interopRequireDefault(require("./components/hello/index.marko"));
 var _renderTag = _interopRequireDefault(require("marko/src/runtime/helpers/render-tag.js"));
 var _preserveTag = _interopRequireDefault(require("marko/src/core-tags/components/preserve-tag.js"));
+var _dataMarko = _interopRequireDefault(require("marko/src/runtime/html/helpers/data-marko.js"));
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const _marko_componentType = "packages/translator-default/test/fixtures/no-update-directives/template.marko",
@@ -128,7 +129,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef,
   (0, _renderTag.default)(_preserveTag.default, {
     "n": true,
     "renderBody": out => {
-      out.w("<div class=test></div>");
+      out.w(`<div${(0, _dataMarko.default)(out, _componentDef, 0, "18")} class=test></div>`);
     }
   }, out, _componentDef, "18");
 }, {

diff --git a/packages/translator-default/test/fixtures/no-update-directives/snapshots/html-expected.js b/packages/translator-default/test/fixtures/no-update-directives/snapshots/html-expected.js
@@ -5,6 +5,7 @@ export default _marko_template;
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/src/runtime/helpers/render-tag.js";
 import _preserve from "marko/src/core-tags/components/preserve-tag.js";
+import _marko_props from "marko/src/runtime/html/helpers/data-marko.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
@@ -123,7 +124,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_preserve, {
     "n": true,
     "renderBody": out => {
-      out.w("<div class=test></div>");
+      out.w(`<div${_marko_props(out, _componentDef, 0, "18")} class=test></div>`);
     }
   }, out, _componentDef, "18");
 }, {

diff --git a/...ranslator-default/test/fixtures/no-update-directives/snapshots/htmlProduction-expected.js b/...ranslator-default/test/fixtures/no-update-directives/snapshots/htmlProduction-expected.js
@@ -5,6 +5,7 @@ export default _marko_template;
 import _hello from "./components/hello/index.marko";
 import _marko_tag from "marko/dist/runtime/helpers/render-tag.js";
 import _preserve from "marko/dist/core-tags/components/preserve-tag.js";
+import _marko_props from "marko/dist/runtime/html/helpers/data-marko.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
@@ -123,7 +124,7 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
   _marko_tag(_preserve, {
     "n": true,
     "renderBody": out => {
-      out.w("<div class=test></div>");
+      out.w(`<div${_marko_props(out, _componentDef, 0, "18")} class=test></div>`);
     }
   }, out, _componentDef, "18");
 }, {