Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure ~ operator converts to string #125

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Ensure ~ operator converts to string #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed5f71f
Ensure ~ operator converts to string
Jun 25, 2019
438ae4c
Update changelog
Jun 25, 2019
c9149fc
Remove unused code from a comment
Jun 28, 2019
42f95e8
Reinstalled node_modules
Jun 28, 2019
2060dcd
Merge branch 'master' into bugfix/123-ensure-binary-concat-converts-t…
pago Jul 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## master
- Do not log warning for component first emission in `melody-streams` in production [#128](https://github.com/trivago/melody/pull/128)
- Remove prefetch for async components [#130](https://github.com/trivago/melody/pull/130)
- Fixed `~` operator must convert value to string [#123](https://github.com/trivago/melody/pull/123)

## 1.2.0

Expand Down
5 changes: 5 additions & 0 deletions packages/melody-compiler/__tests__/__fixtures__/success/expressions.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
{{ a+b }}
{{ a-b }}
{{ a~b }}
{{ a~b~c }}
{{ "a"~b }}
{{ a~"b" }}
{{ "a"~"b" }}
{{ "a"~"b"~"c" }}
{{ a*b }}
{{ a/b }}
{{ a%b }}
Expand Down
46 changes: 27 additions & 19 deletions packages/melody-compiler/__tests__/__snapshots__/CompilerSpec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ _embed$1.renderHello = function (_context) {
_embed$1.renderTest = function (_context) {};

_template.renderHello = function (_context) {
elementOpen(\\"div\\", null, null, \\"class\\", \\"test-\\" + _context.foo + \\" bar\\");
elementOpen(\\"div\\", null, null, \\"class\\", \`test-\${ _context.foo } bar\`);

_embed$3.render(createSubContext(_context, {
foo: \\"bar\\"
Expand Down Expand Up @@ -239,7 +239,12 @@ _template.render = function (_context) {
text(range(_context.a, _context.b));
text(_context.a + _context.b);
text(_context.a - _context.b);
text(_context.a + _context.b);
text(\`\${ _context.a }\${ _context.b }\`);
text(\`\${ _context.a }\${ _context.b }\${ _context.c }\`);
text(\`a\${ _context.b }\`);
text(\`\${ _context.a }b\`);
text(\\"ab\\");
text(\\"abc\\");
text(_context.a * _context.b);
text(_context.a / _context.b);
text(_context.a % _context.b);
Expand Down Expand Up @@ -620,7 +625,7 @@ _template.render = function (_context) {
foo = _sequence[0];

for (; _index < _length; _index++, foo = _sequence[_index]) {
elementOpen(\\"span\\", \\"\\" + foo, null, \\"class\\", \\"qtp-item__star icon-ic icon-icn_star--white \\" + foo);
elementOpen(\\"span\\", \\"\\" + foo, null, \\"class\\", \`qtp-item__star icon-ic icon-icn_star--white \${ foo }\`);

_include();

Expand Down Expand Up @@ -666,7 +671,7 @@ _template.render = function (_context) {
});

for (; _index < _length; _index++) {
elementOpen(\\"span\\", \\"\\" + _context$1.foo, null, \\"class\\", \\"qtp-item__star icon-ic icon-icn_star--white \\" + _context$1.foo);
elementOpen(\\"span\\", \\"\\" + _context$1.foo, null, \\"class\\", \`qtp-item__star icon-ic icon-icn_star--white \${ _context$1.foo }\`);

_include(_context$1);

Expand Down Expand Up @@ -1650,8 +1655,8 @@ _template.render = function (_context) {
foo: \\"bar\\"
}
});
component(AsyncComponent, \\"\\" + (\\"bar-\\" + _context.part), {
promisedComponent: () => import( /* webpackPrefetch: true */\\"./parts/\\" + _context.part + \\".twig\\"),
component(AsyncComponent, \\"\\" + \`bar-\${ _context.part }\`, {
promisedComponent: () => import( /* webpackPrefetch: true */\`./parts/\${ _context.part }.twig\`),
delayLoadingAnimation: 1000,
whileLoading: () => {
text(\\" Loading... \\");
Expand All @@ -1666,7 +1671,7 @@ _template.render = function (_context) {
}
});
component(AsyncComponent, \\"bar\\", {
promisedComponent: () => import( /* webpackChunkName: \\"bar\\", webpackPrefetch: true */\\"./parts/\\" + _context.part + \\".twig\\"),
promisedComponent: () => import( /* webpackChunkName: \\"bar\\", webpackPrefetch: true */\`./parts/\${ _context.part }.twig\`),
delayLoadingAnimation: 1000,
whileLoading: () => {
text(\\" Loading... \\");
Expand All @@ -1677,7 +1682,7 @@ _template.render = function (_context) {
}
});
component(AsyncComponent, \\"bar\\", {
promisedComponent: () => import( /* webpackChunkName: \\"bar\\", webpackPrefetch: true */\\"./parts/\\" + _context.part + \\".twig\\"),
promisedComponent: () => import( /* webpackChunkName: \\"bar\\", webpackPrefetch: true */\`./parts/\${ _context.part }.twig\`),
delayLoadingAnimation: 1000,
whileLoading: () => {
elementOpen(\\"strong\\", null, null);
Expand Down Expand Up @@ -1725,7 +1730,10 @@ _template.render = function (_context) {
bClickoutClientside = false;
sBtnModifiers = \\"\\";
elementOpen(\\"section\\", \\"f-%v2ak\\", _statics$9, \\"itemscope\\", true);
elementOpenStart(\\"div\\", \\"K$/#=(h\\", _statics$8, \\"class\\", \\"item__deal-best-link ov-hidden font-dark js_item_bestprice\\\\n \\" + (!_context.isItemAvailable ? \\"no_availability\\" : !_context.bestPriceDeal ? \\"incomplete\\" : \\"\\") + \\"\\\\n \\" + (_context.bestPriceDeal ? \\"js_cClickoutLink\\" : \\"\\") + \\"\\\\n \\" + (_context.saving >= 20 ? \\"reduced\\" : \\"\\"), \\"itemscope\\", true);
elementOpenStart(\\"div\\", \\"K$/#=(h\\", _statics$8, \\"class\\", \`item__deal-best-link ov-hidden font-dark js_item_bestprice
\${ !_context.isItemAvailable ? \\"no_availability\\" : !_context.bestPriceDeal ? \\"incomplete\\" : \\"\\" }
\${ _context.bestPriceDeal ? \\"js_cClickoutLink\\" : \\"\\" }
\${ _context.saving >= 20 ? \\"reduced\\" : \\"\\" }\`, \\"itemscope\\", true);

for (let _i = 0, _a = process.env.NODE_ENV === \\"production\\" || Array.isArray((_context.bestPriceDeal ? attrs({
onclick: \\"\\",
Expand Down Expand Up @@ -1788,7 +1796,7 @@ _template.render = function (_context) {
\\"data-topdeal-path-name\\": _context.pathName,
\\"data-topdeal-overall-liking\\": _context.overallLiking
};
flagModifiers = flagModifiers + \\" top_deals js_top_deals \\" + _context.topDealCriterion;
flagModifiers = \`\${ flagModifiers } top_deals js_top_deals \${ _context.topDealCriterion }\`;
dataVariables = merge(dataVariables, {
\\"data-topdeal-log\\": \\"1\\"
});
Expand All @@ -1803,7 +1811,7 @@ _template.render = function (_context) {
_include({
\\"styleModifier\\": flagModifiers,
\\"dataVariables\\": dataVariables,
\\"text\\": \\"-\\" + _context.saving + \\"%\\"
\\"text\\": \`-\${ _context.saving }%\`
});
}
}
Expand All @@ -1828,14 +1836,14 @@ _template.render = function (_context) {
if (_context.maxPriceDeal) {
elementVoid(\\"meta\\", \\"ECmr>3o\\", _statics$2, \\"content\\", _context.maxPriceDeal.displayPrice);
elementVoid(\\"meta\\", \\"e_NpGiT\\", _statics$3, \\"content\\", _context.bestPriceDeal.displayPrice);
elementOpen(\\"s\\", null, null, \\"class\\", \\"item__price-striked block cur-pointer--hover\\" + (!_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\"));
elementOpen(\\"s\\", null, null, \\"class\\", \`item__price-striked block cur-pointer--hover\${ !_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\" }\`);
text(_context.maxPriceDeal.price);
elementClose(\\"s\\");
} else {
elementVoid(\\"meta\\", \\"1ntl?'O\\", _statics$4, \\"content\\", _context.bestPriceDeal.displayPrice);
}

elementOpen(\\"strong\\", null, null, \\"class\\", \\"item__best-price block cur-pointer--hover price\\" + (_context.maxPriceDeal ? \\"_min\\" : \\" single\\") + (!_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\"));
elementOpen(\\"strong\\", null, null, \\"class\\", \`item__best-price block cur-pointer--hover price\${ _context.maxPriceDeal ? \\"_min\\" : \\" single\\" }\${ !_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\" }\`);
text(_context.bestPriceDeal.price);
elementClose(\\"strong\\");

Expand All @@ -1856,7 +1864,7 @@ _template.render = function (_context) {
}

if (false) {
sBtnModifiers = sBtnModifiers + \\" alt\\";
sBtnModifiers = \`\${ sBtnModifiers } alt\`;
}
} else if (_context.state == 1) {
elementOpen(\\"p\\", \\"$J_dRYB\\", _statics$6);
Expand Down Expand Up @@ -2087,7 +2095,7 @@ export const _template = {};
const _statics = [\\"class\\", \\"qtp-item__text\\"];

_template.render = function (_context) {
elementOpen(\\"div\\", \\"S9hzS{)\\", _statics, \\"data-test\\", \\"Speceless testing:\\" + _context.formattedIncentive + \\"foo\\");
elementOpen(\\"div\\", \\"S9hzS{)\\", _statics, \\"data-test\\", \`Speceless testing:\${ _context.formattedIncentive }foo\`);
text(\\"Receive \\");
text(_context.formattedIncentive);
text(\\" cash back for testing this hotel.\\\\n Or just \\");
Expand Down Expand Up @@ -2219,7 +2227,7 @@ _template.render = function (_context) {
elementClose(\\"div\\");
elementOpen(\\"div\\", null, null, \\"style\\", styles({
\\"color\\": _context.color,
[\\"border-\\" + _context.borderSide]: _context.border,
[\`border-\${ _context.borderSide }\`]: _context.border,
[_context.position]: _context.positionValue
}));
text(\\"Lorem Ipsum\\");
Expand Down Expand Up @@ -2369,7 +2377,7 @@ exports[`Compiler should fail transforming wrong include.template 1`] = `
3 | </div>
4 |

The Include Statement expected a StringLiteral but got a BinaryExpression.
The Include Statement expected a StringLiteral but got a TemplateLiteral.
Includes only support static strings as argument.

To include a template asynchronously you can use the \\"mount async\\" statement:
Expand Down Expand Up @@ -2483,7 +2491,7 @@ export const _template = {};
_template.render = function (_context) {
text({
a: \\"foo\\",
[\\"b\\" + _context.a]: \\"bar\\",
[\`b\${ _context.a }\`]: \\"bar\\",
2: 4,
[_context.a]: _context.foo
});
Expand Down Expand Up @@ -2540,7 +2548,7 @@ export const _template = {};
const _statics = [\\"class\\", \\"foo\\"];

_template.render = function (_context) {
elementOpenStart(\\"div\\", \\"\\" + (_context._i + _context._len), _statics);
elementOpenStart(\\"div\\", \\"\\" + \`\${ _context._i }\${ _context._len }\`, _statics);

for (let _i$1 = 0, _a = process.env.NODE_ENV === \\"production\\" || Array.isArray(_context.dataAttributes) ? _context.dataAttributes : (() => {
throw new Error(\\"Dynamic attributes have to be an array, found \\" + typeof _context.dataAttributes + \\" instead\\");
Expand Down
56 changes: 50 additions & 6 deletions packages/melody-compiler/src/convert/expressions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,56 @@ export default {
BinaryConcatExpression: {
exit(path) {
const node = path.node;
path.replaceWithJS({
type: 'BinaryExpression',
operator: '+',
left: node.left,
right: node.right,
});
if (t.isStringLiteral(node.left)) {
if (t.isStringLiteral(node.right)) {
path.replaceWithJS(
t.stringLiteral(node.left.value + node.right.value)
);
} else {
path.replaceWithJS(
t.templateLiteral(
[t.templateElement({cooked: node.left.value, raw: node.left.value}), t.templateElement({cooked: '', raw: ''})],
[node.right]
)
);
}
} else if (t.isTemplateLiteral(node.left)) {
if (t.isStringLiteral(node.right)) {
// we need to append the new value to the last quasi
// to keep things predictable and pure we start by cloning the existing structure
const quasis = node.left.quasis.map(quasi => t.templateElement({ cooked: quasi.value.cooked, raw: quasi.value.raw }));
const last = quasis[quasis.length - 1];
last.value.cooked += node.right.value;
last.value.raw += node.right.value;
path.replaceWithJS(
t.templateLiteral(
quasis,
node.left.expressions
)
);
} else {
path.replaceWithJS(
t.templateLiteral(
[...node.left.quasis, t.templateElement({cooked: '', raw: ''})],
[...node.left.expressions, node.right]
)
);
}
} else if (t.isStringLiteral(node.right)) {
path.replaceWithJS(
t.templateLiteral(
[t.templateElement({cooked: '', raw: ''}), t.templateElement({cooked: node.right.value, raw: node.right.value})],
[node.left]
)
);
} else {
path.replaceWithJS(
t.templateLiteral(
[t.templateElement({cooked: '', raw: ''}), t.templateElement({cooked: '', raw: ''}), t.templateElement({cooked: '', raw: ''})],
[node.left, node.right]
)
);
}
},
},
BinaryPowerExpression: {
Expand Down
25 changes: 14 additions & 11 deletions packages/melody-plugin-jsx/__tests__/__snapshots__/CompilerSpec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ _embed$1.renderHello = function (_context) {
_embed$1.renderTest = function (_context) {};

_template.renderHello = function (_context) {
return <div className={\\"test-\\" + _context.foo + \\" bar\\"}>{_embed$3.render(createSubContext(_context, {
return <div className={\`test-\${ _context.foo } bar\`}>{_embed$3.render(createSubContext(_context, {
foo: \\"bar\\"
}))}</div>;
};
Expand Down Expand Up @@ -428,7 +428,7 @@ _template.render = function (_context) {
foo = _sequence[0];

for (; _index < _length; _index++, foo = _sequence[_index]) {
_child[_child.length] = <span key={foo} className={\\"qtp-item__star icon-ic icon-icn_star--white \\" + foo}>{_include()}</span>;
_child[_child.length] = <span key={foo} className={\`qtp-item__star icon-ic icon-icn_star--white \${ foo }\`}>{_include()}</span>;
}
}
return <div>{_child}</div>;
Expand Down Expand Up @@ -472,7 +472,7 @@ _template.render = function (_context) {
});

for (; _index < _length; _index++) {
_child[_child.length] = <span key={_context$1.foo} className={\\"qtp-item__star icon-ic icon-icn_star--white \\" + _context$1.foo}>{_include(_context$1)}</span>;
_child[_child.length] = <span key={_context$1.foo} className={\`qtp-item__star icon-ic icon-icn_star--white \${ _context$1.foo }\`}>{_include(_context$1)}</span>;
_context$1.loop.index0++;
_context$1.loop.index++;
_context$1.loop.revindex--;
Expand Down Expand Up @@ -623,7 +623,7 @@ _template.render = function (_context) {
\\"data-topdeal-path-name\\": _context.pathName,
\\"data-topdeal-overall-liking\\": _context.overallLiking
};
flagModifiers = flagModifiers + \\" top_deals js_top_deals \\" + _context.topDealCriterion;
flagModifiers = \`\${ flagModifiers } top_deals js_top_deals \${ _context.topDealCriterion }\`;
dataVariables = merge(dataVariables, {
\\"data-topdeal-log\\": \\"1\\"
});
Expand All @@ -637,7 +637,7 @@ _template.render = function (_context) {
_child$4 = _include({
\\"styleModifier\\": flagModifiers,
\\"dataVariables\\": dataVariables,
\\"text\\": \\"-\\" + _context.saving + \\"%\\"
\\"text\\": \`-\${ _context.saving }%\`
});
}
}
Expand All @@ -663,12 +663,12 @@ _template.render = function (_context) {
if (_context.maxPriceDeal) {
_child$10 = <meta itemProp=\\"maxPrice\\" content={_context.maxPriceDeal.displayPrice} />;
_child$11 = <meta itemProp=\\"minPrice\\" content={_context.bestPriceDeal.displayPrice} />;
_child$12 = <s className={\\"item__price-striked block cur-pointer--hover\\" + (!_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\")}>{_context.maxPriceDeal.price}</s>;
_child$12 = <s className={\`item__price-striked block cur-pointer--hover\${ !_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\" }\`}>{_context.maxPriceDeal.price}</s>;
} else {
_child$14 = <meta itemProp=\\"price\\" content={_context.bestPriceDeal.displayPrice} />;
}

_child$15 = <strong className={\\"item__best-price block cur-pointer--hover price\\" + (_context.maxPriceDeal ? \\"_min\\" : \\" single\\") + (!_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\")}>{_context.bestPriceDeal.price}</strong>;
_child$15 = <strong className={\`item__best-price block cur-pointer--hover price\${ _context.maxPriceDeal ? \\"_min\\" : \\" single\\" }\${ !_context.isBigFontSiteInBestPrice ? \\" long_digit\\" : \\"\\" }\`}>{_context.bestPriceDeal.price}</strong>;

if (false) {
let _child$18, _child$19;
Expand All @@ -687,7 +687,7 @@ _template.render = function (_context) {
}

if (false) {
sBtnModifiers = sBtnModifiers + \\" alt\\";
sBtnModifiers = \`\${ sBtnModifiers } alt\`;
}
} else if (_context.state == 1) {
_child$20 = <p className=\\"font-trv-maincolor-04-lighter cur-disabled--hover\\">unavailable_deal</p>;
Expand Down Expand Up @@ -716,7 +716,10 @@ _template.render = function (_context) {
\\"data-teb\\": _context.bestPriceDeal.expressBookingAvailable && tEB_SAME_WINDOW_CLICKOUT ? \\"1\\" : \\"\\",
\\"data-alternative\\": _context.isAlternativeHotel ? \\"1\\" : \\"0\\",
\\"data-dbid\\": _context.bestPriceDeal.debuggingId != null && _context.bestPriceDeal.debuggingId !== '' ? _context.bestPriceDeal.debuggingId : \\"\\"
} : []} className={\\"item__deal-best-link ov-hidden font-dark js_item_bestprice\\\\n \\" + (!_context.isItemAvailable ? \\"no_availability\\" : !_context.bestPriceDeal ? \\"incomplete\\" : \\"\\") + \\"\\\\n \\" + (_context.bestPriceDeal ? \\"js_cClickoutLink\\" : \\"\\") + \\"\\\\n \\" + (_context.saving >= 20 ? \\"reduced\\" : \\"\\")} itemProp=\\"priceSpecification\\" itemScope itemType=\\"http://schema.org/PriceSpecification\\">{_child$1}{_child$3}{_child$4}{_child$5}{_child$22}</div>;
} : []} className={\`item__deal-best-link ov-hidden font-dark js_item_bestprice
\${ !_context.isItemAvailable ? \\"no_availability\\" : !_context.bestPriceDeal ? \\"incomplete\\" : \\"\\" }
\${ _context.bestPriceDeal ? \\"js_cClickoutLink\\" : \\"\\" }
\${ _context.saving >= 20 ? \\"reduced\\" : \\"\\" }\`} itemProp=\\"priceSpecification\\" itemScope itemType=\\"http://schema.org/PriceSpecification\\">{_child$1}{_child$3}{_child$4}{_child$5}{_child$22}</div>;
return <section className=\\"item__deal-best\\" itemProp=\\"makesOffer\\" itemScope itemType=\\"http://schema.org/Offer\\">{_child}</section>;
};

Expand Down Expand Up @@ -785,7 +788,7 @@ exports[`Compiler should correctly transform spaceless.template 1`] = `
export const _template = {};

_template.render = function (_context) {
return <div className=\\"qtp-item__text\\" data-test={\\"Speceless testing:\\" + _context.formattedIncentive + \\"foo\\"}>Receive {_context.formattedIncentive} cash back for testing this hotel.
return <div className=\\"qtp-item__text\\" data-test={\`Speceless testing:\${ _context.formattedIncentive }foo\`}>Receive {_context.formattedIncentive} cash back for testing this hotel.
Or just <span>be</span> happy!</div>;
};

Expand Down Expand Up @@ -838,7 +841,7 @@ _template.render = function (_context) {
})}>Lorem Ipsum</div>;
return <div style={styles({
\\"color\\": _context.color,
[\\"border-\\" + _context.borderSide]: _context.border,
[\`border-\${ _context.borderSide }\`]: _context.border,
[_context.position]: _context.positionValue
})}>Lorem Ipsum</div>;
};
Expand Down
4 changes: 2 additions & 2 deletions packages/melody-plugin-jsx/__tests__/__snapshots__/JSXSpec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,12 +184,12 @@ _template.render = function (_context) {

for (; _index < _length; _index++, item = _sequence[_index]) {
let className;
className = \\"li-\\" + _context.id;
className = \`li-\${ _context.id }\`;

let _prop = className,
_child$1;

className = \\"span-\\" + _context.id;
className = \`span-\${ _context.id }\`;
_child$1 = <span className={className}>{item.label}</span>;
_child[_child.length] = <li key={item.id} className={_prop}>{_child$1}</li>;
}
Expand Down