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.

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

Nested helpers/subexp are collapsed #84

Open
tylerturdenpants opened this issue Jul 27, 2019 · 1 comment
Open

Nested helpers/subexp are collapsed #84

tylerturdenpants opened this issue Jul 27, 2019 · 1 comment

Comments

@tylerturdenpants
Copy link
Contributor

One of the tests from https://github.com/ember-codemods/ember-angle-brackets-codemod/

Before ember-template-recast (correct)

input: 
{{some-component
  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)
  )
}}

output: 
<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)
  }}
/>

After ember-template-recast refactor (incorrect)

input: 
{{some-component
  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)
  )
}}


output: 
<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)}}></SomeComponent>
@rwjblue
Copy link
Member

rwjblue commented Jul 30, 2019

Can you share where you are building the ElementNode? The reason I ask is that in order to preserve the formatting / whitespace you have to use the original hash value directly as an AttrNode value.

This test shows that it can work properly:

QUnit.test('preserves nested invocation whitespace', function(assert) {
let template = stripIndent`
{{foo-bar baz=(something
goes=here
and=here
)}}
`;
let { code } = transform(template, codemod);
assert.equal(
code,
stripIndent`
<FooBar @baz={{something
goes=here
and=here
}} />
`
);

See here how I ensure to preserve the original source as much as possible:

return b.element(
{ name: tagName, selfClosing: true },
{
attrs: node.hash.pairs.map(pair => {
let value = b.mustache(pair.value);
if (pair.value.type === 'SubExpression') {
pair.value.type = 'MustacheStatement';
value = pair.value;
}
return b.attr(`@${pair.key}`, value);
}),
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants