Skip to content

Commit fe36558

Browse files
tylerturdenpantstylerturdenpants
authored
fix migrating away from arguments to attributes for non-builtins (#152)
* fix migrating away from arguments to attributes for non-builtins
1 parent b2c9be2 commit fe36558

2 files changed

Lines changed: 64 additions & 41 deletions

File tree

‎transforms/angle-brackets/test.js‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -109,29 +109,32 @@ test('data-attributes', () => {
109109

110110
expect(runTest('data-attributes.hbs', input)).toMatchInlineSnapshot(`
111111
"
112-
<XFoo data-foo={{true}} />
113-
<XFoo data-test-selector={{true}} />
114-
<XFoo data-test-selector={{post.id}} />
115-
<XFoo @label=\\"hi\\" data-test-selector={{true}} />
116-
<XFoo data-test-foo />
112+
<XFoo @data-foo={{true}} />
113+
<XFoo @data-test-selector={{true}} />
114+
<XFoo @data-test-selector={{post.id}} />
115+
<XFoo @label=\\"hi\\" @data-test-selector={{true}} />
116+
{{x-foo data-test-foo }}
117117
118-
<XFoo data-foo={{true}}>
118+
<XFoo @data-foo={{true}}>
119119
block
120120
</XFoo>
121121
122-
<XFoo data-test-selector={{true}}>
122+
<XFoo @data-test-selector={{true}}>
123123
block
124124
</XFoo>
125125
126-
<XFoo data-test-selector={{post.id}}>
126+
<XFoo @data-test-selector={{post.id}}>
127127
block
128128
</XFoo>
129129
130-
<Common::AccordionComponent data-test-accordion as |accordion|>
130+
{{#common/accordion-component data-test-accordion as |accordion|}}
131131
block
132-
</Common::AccordionComponent>
132+
{{/common/accordion-component}}
133133
134-
<XFoo data-foo @name=\\"Sophie\\" />
134+
{{x-foo
135+
data-foo
136+
name=\\"Sophie\\"
137+
}}
135138
"
136139
`);
137140
});
@@ -174,13 +177,13 @@ test('deeply-nested-sub', () => {
174177
*/
175178
expect(runTest('deeply-nested-sub.hbs', input)).toMatchInlineSnapshot(`
176179
"
177-
<SomeComponent class={{concat foo (some-helper ted (some-dude bar (a b c)))}}>
180+
<SomeComponent @class={{concat foo (some-helper ted (some-dude bar (a b c)))}}>
178181
help
179182
</SomeComponent>
180-
<SomeComponent class={{concat foo (some-helper ted (some-dude bar (a b c)))}} />
181-
<DeepComponent class={{concat foo (nice-helper ted (some-crazy bar (a d (d e f))))}} />
182-
<SomeComponent class={{concat foo (some-helper bar)}} />
183-
<SomeComponent class={{concat foo (some-helper bar quuz)}} />
183+
<SomeComponent @class={{concat foo (some-helper ted (some-dude bar (a b c)))}} />
184+
<DeepComponent @class={{concat foo (nice-helper ted (some-crazy bar (a d (d e f))))}} />
185+
<SomeComponent @class={{concat foo (some-helper bar)}} />
186+
<SomeComponent @class={{concat foo (some-helper bar quuz)}} />
184187
<SomeComponent @person={{hash name=\\"Sophie\\" age=1}} @message={{t \\"welcome\\" count=1}} />
185188
<SomeComponent @people={{array (hash name=\\"Alex\\" age=5 nested=(hash oldest=true amount=(format-currency 350 sign=\\"£\\")) disabled=(eq foo \\"bar\\")) (hash name=\\"Ben\\" age=4) (hash name=\\"Sophie\\" age=1)}} />
186189
"
@@ -216,7 +219,7 @@ test('entities', () => {
216219
expect(runTest('entities.hbs', input)).toMatchInlineSnapshot(`
217220
"
218221
&lt; &gt; &times;
219-
<Foo data-a=\\"&quot;Foo&nbsp;&amp;&nbsp;Bar&quot;\\">&nbsp;Some text &gt;</Foo>
222+
<Foo @data-a=\\"&quot;Foo&nbsp;&amp;&nbsp;Bar&quot;\\">&nbsp;Some text &gt;</Foo>
220223
"
221224
`);
222225
});
@@ -465,15 +468,15 @@ test('link-to-query-param', () => {
465468
<LinkTo @route=\\"posts\\" @query={{hash direction=\\"desc\\" showArchived=false}}>
466469
Recent Posts
467470
</LinkTo>
468-
<LinkTo @route=\\"posts\\" data-test-foo>
471+
{{#link-to data-test-foo \\"posts\\"}}
469472
Recent Posts
470-
</LinkTo>
473+
{{/link-to}}
471474
<LinkTo @route={{this.dynamicPath}} @query={{hash direction=\\"desc\\" showArchived=false}}>
472475
Recent Posts
473476
</LinkTo>
474-
<LinkTo @route={{this.dynamicPath}} @query={{hash direction=\\"desc\\" showArchived=false}} data-test-foo>
477+
{{#link-to data-test-foo this.dynamicPath (query-params direction=\\"desc\\" showArchived=false)}}
475478
Recent Posts
476-
</LinkTo>
479+
{{/link-to}}
477480
<LinkTo @query={{hash direction=\\"desc\\" showArchived=false}}>
478481
Recent Posts
479482
</LinkTo>
@@ -496,7 +499,7 @@ test('nested', () => {
496499

497500
expect(runTest('nested.hbs', input)).toMatchInlineSnapshot(`
498501
"
499-
<Ui::SiteHeader @user={{this.user}} class={{if this.user.isAdmin \\"admin\\"}} />
502+
<Ui::SiteHeader @user={{this.user}} @class={{if this.user.isAdmin \\"admin\\"}} />
500503
<Ui::Button @text=\\"Click me\\" />
501504
<SomePath::AnotherPath::SuperSelect @selected={{this.user.country}} as |s|>
502505
{{#each this.availableCountries as |country|}}
@@ -565,7 +568,7 @@ test('sample', () => {
565568

566569
expect(runTest('sample.hbs', input)).toMatchInlineSnapshot(`
567570
"
568-
<SiteHeader @user={{this.user}} class={{if this.user.isAdmin \\"admin\\"}} />
571+
<SiteHeader @user={{this.user}} @class={{if this.user.isAdmin \\"admin\\"}} />
569572
<SiteHeader @user={{null}} @address={{undefined}} />
570573
571574
<SuperSelect @selected={{this.user.country}} as |s|>
@@ -888,3 +891,19 @@ test('custom-options', () => {
888891
"
889892
`);
890893
});
894+
895+
test('preserve arguments', () => {
896+
let input = `
897+
{{foo-bar class="baz"}}
898+
{{foo-bar data-baz class="baz"}}
899+
{{link-to (t "show") "flight" event.flight.id class="btn btn-default btn-sm pull-right"}}
900+
`;
901+
902+
expect(runTest('preserve-arguments.hbs', input)).toMatchInlineSnapshot(`
903+
"
904+
<FooBar @class=\\"baz\\" />
905+
{{foo-bar data-baz class=\\"baz\\"}}
906+
<LinkTo @route=\\"flight\\" @model={{event.flight.id}} class=\\"btn btn-default btn-sm pull-right\\">{{t \\"show\\"}}</LinkTo>
907+
"
908+
`);
909+
});

‎transforms/angle-brackets/transform.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,15 @@ const HTML_ATTRIBUTES = ['class', 'placeholder', 'required'];
1212
const BUILT_IN_COMPONENTS = ['link-to', 'input', 'textarea'];
1313

1414
function isAttribute(key) {
15-
return HTML_ATTRIBUTES.includes(key) || key.startsWith('data-');
15+
return HTML_ATTRIBUTES.includes(key) || isDataAttribute(key);
16+
}
17+
18+
function isDataAttribute(key) {
19+
return key.startsWith('data-');
20+
}
21+
22+
function isBuiltInComponent(key) {
23+
return BUILT_IN_COMPONENTS.includes(key);
1624
}
1725

1826
function isNestedComponentTagName(tagName) {
@@ -129,12 +137,12 @@ function transformToAngleBracket(env, fileInfo, config) {
129137
/**
130138
* Transform the attributes names & values properly
131139
*/
132-
function transformAttrs(attrs) {
140+
function transformAttrs(tagName, attrs) {
133141
return attrs.map(a => {
134142
let _key = a.key;
135143
let _valueType = a.value.type;
136144
let _value;
137-
if (!isAttribute(a.key)) {
145+
if (!isAttribute(_key) || !isBuiltInComponent(tagName)) {
138146
_key = `@${_key}`;
139147
}
140148

@@ -261,19 +269,13 @@ function transformToAngleBracket(env, fileInfo, config) {
261269
return attributes.concat(dataAttributes);
262270
}
263271

264-
function tranformValuelessDataParams(params) {
265-
let dataAttributes = getDataAttributesFromParams(params);
266-
let valuelessDataAttributes = dataAttributes.map(param =>
267-
b.attr(param.parts[0], b.text(_EMPTY_STRING_))
268-
);
269-
return valuelessDataAttributes;
272+
function hasValuelessDataParams(params) {
273+
return getDataAttributesFromParams(params).length > 0;
270274
}
271275

272-
function transformNodeAttributes(node) {
273-
let params = tranformValuelessDataParams(node.params);
274-
let attributes = transformAttrs(node.hash.pairs);
275-
276-
return params.concat(attributes);
276+
function transformNodeAttributes(tagName, node) {
277+
let attributes = transformAttrs(tagName, node.hash.pairs);
278+
return node.params.concat(attributes);
277279
}
278280

279281
function getDataAttributesFromParams(params) {
@@ -305,10 +307,13 @@ function transformToAngleBracket(env, fileInfo, config) {
305307
}
306308

307309
function transformNode(node) {
310+
if (hasValuelessDataParams(node.params)) {
311+
return;
312+
}
308313
let selfClosing = node.type !== 'BlockStatement';
309314
const tagName = node.path.original;
310315

311-
if (config.skipBuiltInComponents && BUILT_IN_COMPONENTS.includes(tagName)) {
316+
if (config.skipBuiltInComponents && isBuiltInComponent(tagName)) {
312317
return;
313318
}
314319

@@ -331,7 +336,7 @@ function transformToAngleBracket(env, fileInfo, config) {
331336
attributes = transformLinkToAttrs(node.params);
332337
}
333338

334-
let namesParams = transformAttrs(node.hash.pairs);
339+
let namesParams = transformAttrs(tagName, node.hash.pairs);
335340
attributes = attributes.concat(namesParams);
336341
} else {
337342
if (nodeHasPositionalParameters(node)) {
@@ -340,9 +345,8 @@ function transformToAngleBracket(env, fileInfo, config) {
340345
);
341346
return;
342347
}
343-
attributes = transformNodeAttributes(node);
348+
attributes = transformNodeAttributes(tagName, node);
344349
}
345-
346350
return b.element(
347351
{ name: newTagName, selfClosing },
348352
{

0 commit comments

Comments
 (0)