archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2026-02-01 16:07:13 +00:00
Code Issues Projects Releases Wiki Activity

fix(translator-default): hydration mismatch with conditional dynamic tag

Browse Source
This commit is contained in:
Dylan Piercey 2021-03-22 09:51:43 -07:00
parent b41c02150e
commit 91d3ee66b2
No known key found for this signature in database
GPG Key ID: 9736AB8CA3ED17CA
4 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/translator-default/src/tag/native-tag[html]/index.js
View File

@ -150,7 +150,11 @@ export default function (path, isNullable) {
t.expressionStatement(
t.callExpression(
t.memberExpression(t.identifier("out"), t.identifier("bf")),
[normalizeTemplateString`f_${key}`, t.identifier("component")]
[
normalizeTemplateString`f_${key}`,
t.identifier("component"),
t.numericLiteral(1)
]
)
)
);

12
packages/translator-default/test/fixtures/dynamic-tag-name/snapshots/cjs-expected.js vendored
View File

@ -37,11 +37,11 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _component, com
const _tagName = input.show ? "div" : null;
if (_tagName) out.w(`<${_tagName} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName}>`);else out.bf("f_2", component);
if (_tagName) out.w(`<${_tagName} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName}>`);else out.bf("f_2", component, 1);
const _tagName2 = input.show && "div";
if (_tagName2) out.w(`<${_tagName2} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component);
if (_tagName2) out.w(`<${_tagName2} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component, 1);
const _tagName3 = input.large ? "h1" : "h2";
@ -82,7 +82,7 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _component, com
const _tagName7 = largeHeading || "h2";
if (_tagName7) out.w(`<${_tagName7} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component);
if (_tagName7) out.w(`<${_tagName7} class="a b"${(0, _attr.default)("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component, 1);
const _tagName8 = global.x = "a" + "b";
@ -96,12 +96,12 @@ _marko_template._ = (0, _renderer.default)(function (input, out, _component, com
const tagConstA = "a";
out.w(`<${tagConstA} class="a b"${(0, _attr.default)("other", input.other)}></${tagConstA}>`);
const tagConstB = input.show ? "div" : null;
if (tagConstB) out.w(`<${tagConstB} class="a b"${(0, _attr.default)("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component);
if (tagConstB) out.w(`<${tagConstB} class="a b"${(0, _attr.default)("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component, 1);
let tagLazyAssign;
tagLazyAssign = "a";
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${(0, _attr.default)("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${(0, _attr.default)("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component, 1);
tagLazyAssign = input.show ? "div" : null;
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${(0, _attr.default)("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${(0, _attr.default)("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component, 1);
}, {
t: _marko_componentType,
i: true,

12
packages/translator-default/test/fixtures/dynamic-tag-name/snapshots/html-expected.js vendored
View File

@ -23,11 +23,11 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const _tagName = input.show ? "div" : null;
if (_tagName) out.w(`<${_tagName} class="a b"${_marko_attr("other", input.other)}></${_tagName}>`);else out.bf("f_2", component);
if (_tagName) out.w(`<${_tagName} class="a b"${_marko_attr("other", input.other)}></${_tagName}>`);else out.bf("f_2", component, 1);
const _tagName2 = input.show && "div";
if (_tagName2) out.w(`<${_tagName2} class="a b"${_marko_attr("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component);
if (_tagName2) out.w(`<${_tagName2} class="a b"${_marko_attr("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component, 1);
const _tagName3 = input.large ? "h1" : "h2";
@ -70,7 +70,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const _tagName7 = largeHeading || "h2";
if (_tagName7) out.w(`<${_tagName7} class="a b"${_marko_attr("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component);
if (_tagName7) out.w(`<${_tagName7} class="a b"${_marko_attr("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component, 1);
const _tagName8 = global.x = "a" + "b";
@ -84,12 +84,12 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const tagConstA = "a";
out.w(`<${tagConstA} class="a b"${_marko_attr("other", input.other)}></${tagConstA}>`);
const tagConstB = input.show ? "div" : null;
if (tagConstB) out.w(`<${tagConstB} class="a b"${_marko_attr("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component);
if (tagConstB) out.w(`<${tagConstB} class="a b"${_marko_attr("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component, 1);
let tagLazyAssign;
tagLazyAssign = "a";
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component, 1);
tagLazyAssign = input.show ? "div" : null;
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component, 1);
}, {
t: _marko_componentType,
i: true,

12
packages/translator-default/test/fixtures/dynamic-tag-name/snapshots/htmlProduction-expected.js vendored
View File

@ -23,11 +23,11 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const _tagName = input.show ? "div" : null;
if (_tagName) out.w(`<${_tagName} class="a b"${_marko_attr("other", input.other)}></${_tagName}>`);else out.bf("f_2", component);
if (_tagName) out.w(`<${_tagName} class="a b"${_marko_attr("other", input.other)}></${_tagName}>`);else out.bf("f_2", component, 1);
const _tagName2 = input.show && "div";
if (_tagName2) out.w(`<${_tagName2} class="a b"${_marko_attr("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component);
if (_tagName2) out.w(`<${_tagName2} class="a b"${_marko_attr("other", input.other)}></${_tagName2}>`);else out.bf("f_3", component, 1);
const _tagName3 = input.large ? "h1" : "h2";
@ -70,7 +70,7 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const _tagName7 = largeHeading || "h2";
if (_tagName7) out.w(`<${_tagName7} class="a b"${_marko_attr("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component);
if (_tagName7) out.w(`<${_tagName7} class="a b"${_marko_attr("other", input.other)}></${_tagName7}>`);else out.bf("f_9", component, 1);
const _tagName8 = global.x = "a" + "b";
@ -84,12 +84,12 @@ _marko_template._ = _marko_renderer(function (input, out, _component, component,
const tagConstA = "a";
out.w(`<${tagConstA} class="a b"${_marko_attr("other", input.other)}></${tagConstA}>`);
const tagConstB = input.show ? "div" : null;
if (tagConstB) out.w(`<${tagConstB} class="a b"${_marko_attr("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component);
if (tagConstB) out.w(`<${tagConstB} class="a b"${_marko_attr("other", input.other)}></${tagConstB}>`);else out.bf("f_14", component, 1);
let tagLazyAssign;
tagLazyAssign = "a";
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_15", component, 1);
tagLazyAssign = input.show ? "div" : null;
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component);
if (tagLazyAssign) out.w(`<${tagLazyAssign} class="a b"${_marko_attr("other", input.other)}></${tagLazyAssign}>`);else out.bf("f_16", component, 1);
}, {
t: _marko_componentType,
i: true