Support babel-plugin-macros #2171

apalm · 2017-10-27T05:23:36Z

This PR adds support for babel-plugin-macros.

Usage:

import {graphql} from 'react-relay/macro';
// Or: 
// const {graphql} = require('react-relay/macro');

graphql is exported from both the react-relay and relay-runtime packages, but as I created this PR mostly in the interest of possible Create React App integration, I only added an export to react-relay.

This PR currently only adds support for Relay Modern. I'm not sure if Compat and/or Classic should be supported?

I currently only have a single basic test. I certainly could copy over the fixtures in __tests__/fixtures-modern and change the imports, although I'm not sure how beneficial that would be, as most of the logic is shared with babel-plugin-relay.

Closes #1968

Related: facebook/create-react-app#2730 (comment)

/cc @kentcdodds

apalm · 2017-10-27T05:24:31Z

packages/babel-plugin-relay/__tests__/__snapshots__/BabelPluginRelayMacro-test.js.snap

+exports[`BabelPluginRelayMacro works 1`] = `
+"
+'use strict';
+


Unlike in babel-plugin-relay, the import is not currently retained. I'm not sure if that's acceptable? AFAIK the import is retained with babel-plugin-relay only for the "unexpected invocation at runtime" warning (someone correct me if I'm wrong).

If the import needs to be retained (or replaced with something else) then your macros can get the Program node from the state that's passed in and you can unshift an import yourself 👍

The import is not needed in Modern (classic pulls some runtime helpers from it).

apalm · 2017-10-27T05:25:10Z

packages/react-relay/modern/ReactRelayGraphQL.macro.js

@@ -0,0 +1 @@
+module.exports = require('../../babel-plugin-relay/BabelPluginRelayMacro');


This module is named the way it is because babel-macros requires the source string to match the regex /[./]macro(\.js)?$/, and I import this module in the test suite.

You might want to add that as a comment in the file 👍

apalm · 2017-10-27T05:25:25Z

gulpfile.js

@@ -162,7 +162,8 @@ const builds = [
    exports: {
      classic: 'ReactRelayClassicExports.js',
      compat: 'ReactRelayCompatPublic.js',
-      index: 'ReactRelayPublic.js'
+      index: 'ReactRelayPublic.js',
+      macro: 'ReactRelayGraphQL.macro.js'


This outputs macro.js in dist/react-relay.

kentcdodds

This is looking great! I left a few comments.

Thanks so much for putting the work into it!

kentcdodds · 2017-10-27T16:06:39Z

packages/babel-plugin-relay/__tests__/__snapshots__/BabelPluginRelayMacro-test.js.snap

+exports[`BabelPluginRelayMacro works 1`] = `
+"
+'use strict';
+


If the import needs to be retained (or replaced with something else) then your macros can get the Program node from the state that's passed in and you can unshift an import yourself 👍

kentcdodds · 2017-10-27T16:07:10Z

packages/react-relay/modern/ReactRelayGraphQL.macro.js

@@ -0,0 +1 @@
+module.exports = require('../../babel-plugin-relay/BabelPluginRelayMacro');


You might want to add that as a comment in the file 👍

kentcdodds · 2017-10-27T16:09:28Z

packages/babel-plugin-relay/__tests__/BabelPluginRelayMacro-test.js

+      parserOpts: {plugins: ['jsx']},
+      babelrc: false,
+    });
+    expect(code).toMatchSnapshot();


Have you considered using babel-plugin-tester? It reduces the amount of boilerplate and the snapshot is a bit more insightful. Here's an example with a macro and here are the snapshots.

kentcdodds · 2017-10-27T16:11:59Z

packages/babel-plugin-relay/BabelPluginRelayMacro.js

+  });
+}
+
+module.exports = createMacro(BabelPluginRelayMacro);


It looks like babel-plugin-relay is configurable. Part of the point of using the macro is so people don't need to update the babel configuration (so they can use it with create-react-app). However it is still handy to be able to configure specific plugins, so babel-macros has an experimental config feature. Learn about config.

Thanks for the pointer. I didn't address this yet, as most of the options only pertain to Compat and Classic. Maybe @gaearon can help answer whether Compat and Classic should be supported?

If configuration is an edge case, I'd suggest omitting it for now. That's something that can be added later and I think it's better to not slow down the merge-ability of this PR for something that not many folks will need/use.

I don't think we would want to support classic and compat for anything new. The rest of the options are only to allow us to use the same plugin internally at FB and shouldn't be needed in OSS.

kentcdodds · 2017-10-27T16:14:11Z

docs/modern/BabelPluginRelay.md

@@ -100,3 +100,11 @@ When compiling code for production deployment, the plugin can be configured to i
  ]
 }
 ```
+
+### Alternatives


If you want to, you could add the babel-macro badge:

[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-macros)

kassens

This is really cool, thanks for working on it!

Seems like it might actually be ready and no longer WIP?

kassens · 2017-10-27T20:20:19Z

packages/babel-plugin-relay/BabelPluginRelayMacro.js

+  });
+}
+
+module.exports = createMacro(BabelPluginRelayMacro);


I don't think we would want to support classic and compat for anything new. The rest of the options are only to allow us to use the same plugin internally at FB and shouldn't be needed in OSS.

kassens · 2017-10-27T20:23:03Z

packages/babel-plugin-relay/__tests__/__snapshots__/BabelPluginRelayMacro-test.js.snap

+exports[`BabelPluginRelayMacro works 1`] = `
+"
+'use strict';
+


The import is not needed in Modern (classic pulls some runtime helpers from it).

apalm · 2017-10-27T20:53:01Z

@kassens Thanks for looking!

Since it sounds like only Modern needs to be supported, I'll update BabelPluginRelay.md to note that this only works in Modern.

I presume your comment is referring to the haste option, and it doesn't need to be supported?

Did you have any opinions on testing? i.e. like using the fixtures in __tests__/fixtures-modern. Also, the current way of testing by importing from ../../react-relay/modern/ReactRelayGraphQL.macro feels iffy, since consumers would import from react-relay/macro, but not sure if there's a better way.

DavidBabel · 2017-11-13T11:16:49Z

Any status on this PR ?

apalm · 2017-11-13T18:23:38Z

Sorry for dropping the ball; been busy. I plan to update the PR either later this week or early next week.

wtgtybhertgeghgtwtg · 2017-12-16T20:41:08Z

package.json

@@ -21,6 +21,7 @@
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-generator": "^6.26.0",
+    "babel-macros": "1.2.0",


babel-macros is now babel-plugin-macros.

kassens · 2017-12-23T17:43:06Z

@apalm: I still think this would be awesome, do you want to continue this or have someone take over?

apalm · 2017-12-26T15:48:37Z

@kassens: Yes, I still want to continue this. Sorry again for dropping the ball.

With the latest commits, I:

Fixed merge conflicts
Changed from babel-macros -> babel-plugin-macros
Addressed a few review comments. I followed Kent's suggestion and used babel-plugin-tester, but if you're not keen on the extra dependency, it's easy to revert, as the change is in a separate commit.

Let me know if you need anything else from me.

wtgtybhertgeghgtwtg · 2017-12-28T01:51:24Z

Is it still a work in progress, then?

wtgtybhertgeghgtwtg · 2018-01-18T04:25:03Z

babel-plugin-macros support has landed in latest alpha for create-react-app: facebook/create-react-app#3675 (comment)

alloy · 2018-01-28T21:26:46Z

@apalm Your last comment makes it sound like this PR is no longer a WIP, is that the case? If so, please update the PR title.

apalm · 2018-01-28T21:30:48Z

@alloy Yes, that's correct. I've updated the title.

alloy · 2018-01-28T21:31:48Z

@kassens @jstejada Good to go?

facebook-github-bot

@jstejada has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

zachasme · 2018-06-04T07:51:38Z

This is the last remaining blocker for using relay in CRA@next without ejecting.

kassens · 2018-08-08T16:02:13Z

Finally found some time to figure out what was wrong in the gulpfile and got a working CRA with Relay 🎉

I couldn't figure out how to push to this branch, so put up my commit with the fixes at kassens/relay@d7321f9e

The last things I'm not clear about:

First, I want to avoid a dependency from relay-runtime on the babel plugin, so I moved the macro into the babel plugin:

import graphql from "babel-plugin-relay/macro";

Is this weird? We could also move to a new package, maybe import graphql from 'relay.macro'?

Second, should babel-plugin-relay have some sort of dependency on babel-plugin-macros as there's a require in there?

kentcdodds · 2018-08-08T16:16:36Z

That's great news!

Is this weird?

Nope, not weird at all. I have several packages that do this.

We could also move to a new package, maybe import graphql from 'relay.macro'?

This is what I do. For example codegen.macro's entry file:

// the entire point of this package is to make it easier to use
// babel-plugin-codegen/macro
module.exports = require('babel-plugin-codegen/macro')

should babel-plugin-relay have some sort of dependency on babel-plugin-macros as there's a require in there?

Yes, if babel-plugin-relay publishes code that uses babel-plugin-macros then it should have babel-plugin-macros as a regular dependency.

kassens · 2018-08-08T16:43:15Z

@apalm want to merge the changes from kassens/relay@d7321f9e here? When I merge this it'll all be a single commit and you did most of the work :)

facebook-github-bot

kassens has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

kassens · 2018-08-08T18:00:04Z

Figured it out, hopefully not running into problems with the internal merge now!

apalm · 2018-08-08T18:10:46Z

@kassens Thank you for picking this back up (and for fixing the issues with the original approach 😅).

I think the docs still need updating though, per the changes you mentioned in #2171 (comment).

I was also able to confirm a working CRA locally using react-scripts@2.0.0-next.3e165448 and using import graphql from "babel-plugin-relay/macro" :)

[WIP] Support babel-macros

948b24f

facebook-github-bot added the CLA Signed label Oct 27, 2017

apalm commented Oct 27, 2017

View reviewed changes

kentcdodds reviewed Oct 27, 2017

View reviewed changes

kassens reviewed Oct 27, 2017

View reviewed changes

wtgtybhertgeghgtwtg reviewed Dec 16, 2017

View reviewed changes

apalm added 5 commits December 26, 2017 09:56

Merge branch 'master' into babel-macros

40e513d

babel-macros -> babel-plugin-macros

9bb9f2b

Update snapshot

072b937

Add comment

76e4a38

Use babel-plugin-tester

acf85fa

apalm force-pushed the babel-macros branch from 16946b4 to acf85fa Compare December 26, 2017 15:46

gaearon mentioned this pull request Jan 18, 2018

Document Babel macros support and common uses facebook/create-react-app#3858

Open

apalm changed the title ~~[WIP] Support babel-macros~~ Support babel-plugin-macros Jan 28, 2018

facebook-github-bot reviewed Jan 28, 2018

View reviewed changes

Merge remote-tracking branch 'facebook/master' into HEAD

d74c37e

Move macro export to babel-plugin-relay

d7321f9

facebook-github-bot reviewed Aug 8, 2018

View reviewed changes

facebook-github-bot closed this in f74387d Aug 13, 2018

petetnt mentioned this pull request Aug 15, 2018

Consider decoupling CRA 2.0 from graphql-tag version facebook/create-react-app#4893

Closed

		@@ -0,0 +1 @@
		module.exports = require('../../babel-plugin-relay/BabelPluginRelayMacro');

Support babel-plugin-macros #2171

Support babel-plugin-macros #2171

Conversation

apalm commented Oct 27, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kentcdodds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kassens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apalm commented Oct 27, 2017

DavidBabel commented Nov 13, 2017

apalm commented Nov 13, 2017

Choose a reason for hiding this comment

kassens commented Dec 23, 2017

apalm commented Dec 26, 2017

wtgtybhertgeghgtwtg commented Dec 28, 2017

wtgtybhertgeghgtwtg commented Jan 18, 2018

alloy commented Jan 28, 2018

apalm commented Jan 28, 2018

alloy commented Jan 28, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

zachasme commented Jun 4, 2018

kassens commented Aug 8, 2018 • edited

kentcdodds commented Aug 8, 2018 • edited

kassens commented Aug 8, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

kassens commented Aug 8, 2018

apalm commented Aug 8, 2018

apalm commented Oct 27, 2017 •

edited

kassens commented Aug 8, 2018 •

edited

kentcdodds commented Aug 8, 2018 •

edited