Fix dynamic interpolations #486

[ijjk]

After digging into this issue it looks like a change from babel-plugin-transform-es2015-arrow-functions to @babel/plugin-transform-arrow-functions in babel 7's @babel/preset-env broke the dynamic interpolation. If you had the spec option set to true on the @babel/plugin-transform-arrow-functions you wouldn't have encountered this error, but since the default is false most people using babel 7 and dynamic interpolation in this way would encounter an error.

After talking in Babel's slack it seems one of the ways to fix this is to make sure to traverse the JSX elements before @babel/plugin-transform-arrow-functions has a chance to transform preventing this from being changed before the className attribute is added to the elements.

This is based off my upgrade-babel branch so that should probably be finished first. I wasn't sure if you wanted this fix on a separate pull request or not so if you want me to just push it on the other branch and merge it on that pull request let me know. Fixes #486

[giuseppeg]

Can you rebase with master?

[ijjk]

It should be rebased to master now

[giuseppeg]

thanks for looking into this! I will need to run a few tests to see if such a change would slow down builds

[giuseppeg]

this is not "cool" we should call traverse with the state and opts we get from the plugin https://github.com/babel/babel/blob/aaec2cd51dd24a1ecf52b82e0bbad0a5ccd60b6f/packages/babel-traverse/src/index.js#L14-L20

[ijjk]

Yeah that was a bit hacky sorry, it's updated to pass the state the correct way now

[giuseppeg]

No worries and no need to be sorry! Thank you

[giuseppeg]

maybe install @babel/plugin-transform-arrow-functions and run it like this:

const { code } = await transform(
  './fixtures/dynamic-this-value-in-arrow.js',
  {
    plugins: [
      '@babel/plugin-transform-arrow-functions',
      plugin,
    ]
  }
)

[ijjk]

That works, I updated it to just use the @babel/plugin-transform-arrow-functions plugin instead of the @babel/preset-env preset

[giuseppeg]

I will need to run a few tests to see if such a change would slow down builds

Probably this is not a big deal after all. I ran zeit.co and in dev it is built in 87ms. @timneutkens FYI we are switching to visiting the Program and then start a traversal manually to solve conflicts with other Babel plugins.

[giuseppeg]

thanks again @ijjk I'll cut a release tomorrow morning (EU time)

[ijjk]

Ok sounds good. Thanks for getting this merged!