Relay: add support for babel-macros

[kentcdodds]

Hi there :wave:

I'm helping to investigate ways that create-react-app can use babel plugins like babel-plugin-relay without having to change configuration (see https://github.com/facebookincubator/create-react-app/issues/2730 for more context). This has resulted in the creation of babel-macros. With babel-macros, users can install and configure this plugin and have access to use any macro available (or create their own) without configuring anything else. This is appealing to create-react-app users because so far they've had to eject if they wanted to use something like preval, emotion, or the babel plugin for relay.

Adding support should be pretty simple (mostly a slight extracting refactor around here to allow code sharing between the plugin and macro) and starting out with experimental support would be totally fine considering we face a catch 22 situation (CRA wants to see usage of babel-macros in the community before adopting it and you all probably feel the same).

What do you all think?

[gaearon]

cc @josephsavona if you're still interested :-)

[kassens]

I'm not very familiar with create-react-app, if someone want's to publicise something or work on a create-relay-app example, feel free to open a PR or publish a new repo

[gaearon]

I don’t think this issue is about creating an example. It’s about supporting this: http://babeljs.io/blog/#zero-config-code-transformation-with-babel-macros

[kentcdodds]

That's correct. The idea is that hopefully if we get a babel-macros export as part of this package, then CRA could add babel-macros to the babel config and folks using create-react-app would be able to use relay without having to configure babel at all. That'd be a significant win IMO :)

[kassens]

Re-opening for now as there's clearly interest and potential value.

Trying to understand what this would involve. We could move the babel transform into the babel-macro framework, all the babel-plugin-relay does for Relay Modern is (pretty much) to replace

// input
graphql`fragment MyFragment on SomeType { ... }`
// output
require('./__generated__/MyFragment.graphql')

But we would still need to run the relay compiler to generate the files. I guess users of CRA could still install the relay-compiler to generate these files?

[kentcdodds]

But we would still need to run the relay compiler to generate the files. I guess users of CRA could still install the relay-compiler to generate these files?

I think that should work. I don't know relay very well though. How does it normally integrate with webpack projects? Do folks normally have two scripts running? One for webpack and the other for the relay-compiler?

[kassens]

Yes or a build process that invokes both of them sequentially / in watch mode.

[gaearon]

That sounds reasonable to me!