Optionally output eager es modules #2781

TrySound · 2019-06-24T13:29:58Z

In this PR I added eagerESModules option to relay-runtime and babel-plugin-relay. I have two problem which can be solved with this change

Rollup handles only es modules. To handle commonjs there is a plugin
which converts it into esm. Though it always skips module if
import/export statements are found. As a result I get runtime error:
"require is not defined".

To workaround this I wrote custom plugin. Though it would be cool to
have proper solution out of the box.

{
  name: 'relay-generated',
  transform(code) {
    // convert __generated__ requires into imports
    // remove after relay-compiler will be able to emit esm
    if (code.includes('__generated__')) {
      let i = -1;
      const paths = [];
      const processed = code.replace(
        /require\((.+__generated__.+)\)/g,
        (req, pathString) => {
          i += 1;
          paths.push(pathString);
          return `__generated__${i}`;
        },
      );
      const imports = paths.map(
        (p, i) => `import __generated__${i} from ${p};\n`,
      );
      return {
        code: imports.join('') + processed,
      };
    }
  },
},

Another problem is flow bug (import type allows not existent types, despite untyped-type-import being enabled flow#7444) which treats all not existent types as any.
This leads to many type unsafe places.

import type {NotExistentType} from './__generated__/MyQuery.graphql';

type Props = {|
  my: NotExistentType
|}

TrySound · 2019-06-28T17:57:22Z

Hi @josephsavona. What do you think about this change?

TrySound · 2019-07-07T09:45:19Z

Hi @kassens Could you take look?

dousaitis · 2019-07-24T10:46:57Z

This will be very useful for people who use rollup to bundle their app.

frenzzy · 2019-07-29T20:14:52Z

PR resolves the following issue: #2445

P.S.: I linked the related issue to help people like me find a solution and of course would be great to get this feature accepted.

TrySound · 2019-08-03T17:22:20Z

Friendly ping @kassens @josephsavona

TrySound · 2019-08-07T16:07:51Z

/cc @jstejada

dousaitis · 2019-08-20T21:49:01Z

Any update on this?

TrySound · 2019-08-23T22:33:34Z

@kassens Do you mind to review this PR? Any changes required to move it forward?

sgwilym · 2019-08-27T14:47:29Z

This would be a really great addition.

frenzzy · 2019-09-04T16:23:00Z

I just published this feature under @frenzzy/babel-plugin-relay.
I use the feature to run my app in browsers with es6 support without bundling to speed up dev process and I hope it may help someone else too.

Inspired by: - facebook/relay#2445 - facebook/relay#2781 - facebook/relay#2841 kiwicom-source-id: a0181e85ec323a361502ef8275739cf18ef114ac

facebook-github-bot

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

TrySound · 2019-10-21T18:52:10Z

Hi @jstejada. Any news on this? Do you want me to assist with something?

TrySound · 2019-11-15T10:13:46Z

Friendly ping @jstejada

TrySound · 2019-12-11T08:47:25Z

Friendly ping @jstejada @kassens @alunyov. Do you need me to rebase this PR or you have something internally?

dousaitis · 2019-12-24T10:50:45Z

Hi @frenzzy! Could you please add the latest version 8.0.0 to @frenzzy/babel-plugin-relay as this MR still remains open and we can't bundle with rollup at all...

@jstejada @kassens @alunyov could you please merge this MR? It's open from the summer!!

frenzzy · 2019-12-24T11:25:54Z

I would like to release v8, but need to resolve conflicts first, it is quite complex now after so radical changes. @TrySound can you please update your PR (rebase on master)?

TrySound · 2019-12-24T12:26:19Z

im out of computer til 5 jan, sorry

frenzzy · 2019-12-24T14:05:36Z

Just released @frenzzy/babel-plugin-relay v8.0.0, hope I rebased correctly (at least tests are passing). You can see the diff here: frenzzy@4d485bc
@TrySound thank you and enjoy your holiday :)

I have two problem which can be solved with this change 1. Rollup handles only es modules. To handle commonjs there is a plugin which converts it into esm. Though it always skips module if import/export statements are found. As a result I get runtime error: "require is not defined". To workaround this I wrote custom plugin. Though it would be cool to have proper solution out of the box. ```js { name: 'relay-generated', transform(code) { // convert __generated__ requires into imports // remove after relay-compiler will be able to emit esm if (code.includes('__generated__')) { let i = -1; const paths = []; const processed = code.replace( /require$(.+__generated__.+)$/g, (req, pathString) => { i += 1; paths.push(pathString); return `__generated__${i}`; }, ); const imports = paths.map( (p, i) => `import __generated__${i} from ${p};\n`, ); return { code: imports.join('') + processed, }; } }, }, ``` 2. Another problem is flow bug (facebook/flow#7444) which treats all not existent types as any. This leads to many type unsafe places. ```js import type {NotExistentType} from './__generated__/MyQuery.graphql'; type Props = {| my: NotExistentType |} ```

TrySound · 2020-01-11T15:31:27Z

@jstejada @kassens @alunyov @josephsavona I updated esm output considering recent thunks removal. Tests are much smaller now too.

TrySound · 2020-01-29T13:49:07Z

Friendly ping @jstejada @kassens @josephsavona

facebook-github-bot

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

TrySound · 2020-02-10T18:04:32Z

Yay!

facebook-github-bot · 2020-02-10T19:34:01Z

@tyao1 merged this pull request in db7a661.

Summary: In this PR I added `eagerESModules` option to `relay-runtime` and `babel-plugin-relay`. I have two problem which can be solved with this change 1. Rollup handles only es modules. To handle commonjs there is a plugin which converts it into esm. Though it always skips module if import/export statements are found. As a result I get runtime error: "require is not defined". To workaround this I wrote custom plugin. Though it would be cool to have proper solution out of the box. ```js { name: 'relay-generated', transform(code) { // convert __generated__ requires into imports // remove after relay-compiler will be able to emit esm if (code.includes('__generated__')) { let i = -1; const paths = []; const processed = code.replace( /require$(.+__generated__.+)$/g, (req, pathString) => { i += 1; paths.push(pathString); return `__generated__${i}`; }, ); const imports = paths.map( (p, i) => `import __generated__${i} from ${p};\n`, ); return { code: imports.join('') + processed, }; } }, }, ``` 2. Another problem is flow bug (facebook/flow#7444) which treats all not existent types as any. This leads to many type unsafe places. ```js import type {NotExistentType} from './__generated__/MyQuery.graphql'; type Props = {| my: NotExistentType |} ``` Pull Request resolved: #2781 Reviewed By: jstejada Differential Revision: D17385417 Pulled By: tyao1 fbshipit-source-id: dfa031412666b8afcac4cbae4678f64abbbe5ec9

facebook-github-bot added the CLA Signed label Jun 24, 2019

TrySound force-pushed the eager-es-modules branch from 0078c6f to b18b721 Compare July 7, 2019 09:30

TrySound force-pushed the eager-es-modules branch from 6e81bfd to 84558cc Compare July 24, 2019 13:05

TrySound force-pushed the eager-es-modules branch from 84558cc to e8e1542 Compare August 3, 2019 17:07

TrySound mentioned this pull request Sep 9, 2019

Add an option to generate esmodule imports/exports in babel-plugin-relay & relay-compiler #2841

Closed

adeira-github-bot pushed a commit to adeira/relay-example that referenced this pull request Sep 9, 2019

@kiwicom/relay: generate ES6 modules

c1a5e89

Inspired by: - facebook/relay#2445 - facebook/relay#2781 - facebook/relay#2841 kiwicom-source-id: a0181e85ec323a361502ef8275739cf18ef114ac

adeira-github-bot pushed a commit to kiwicom/relay that referenced this pull request Sep 9, 2019

@kiwicom/relay: generate ES6 modules

53f3a5e

Inspired by: - facebook/relay#2445 - facebook/relay#2781 - facebook/relay#2841 kiwicom-source-id: a0181e85ec323a361502ef8275739cf18ef114ac

facebook-github-bot reviewed Sep 14, 2019

View reviewed changes

TrySound force-pushed the eager-es-modules branch from dd89233 to 4388788 Compare January 11, 2020 14:19

TrySound force-pushed the eager-es-modules branch from 4388788 to 05f4b02 Compare January 11, 2020 14:20

TrySound added 2 commits January 11, 2020 17:44

Rebuild tests

622b7fe

Prefer atomic tests instead

f42b4c1

Simplify esm output

098d838

TrySound requested review from kassens, alloy and jstejada January 19, 2020 09:42

facebook-github-bot reviewed Feb 7, 2020

View reviewed changes

facebook-github-bot closed this in db7a661 Feb 10, 2020

facebook-github-bot added the Merged label Feb 10, 2020

This was referenced Feb 11, 2021

[relay-compiler] eager es module mode does produce require calls #3354

Closed

wip: collect inline require statements and convert them to top level imports relay-tools/relay-compiler-language-typescript#269

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optionally output eager es modules #2781

Optionally output eager es modules #2781

TrySound commented Jun 24, 2019 •

edited

TrySound commented Jun 28, 2019

TrySound commented Jul 7, 2019

dousaitis commented Jul 24, 2019

frenzzy commented Jul 29, 2019

TrySound commented Aug 3, 2019

TrySound commented Aug 7, 2019

dousaitis commented Aug 20, 2019

TrySound commented Aug 23, 2019

sgwilym commented Aug 27, 2019

frenzzy commented Sep 4, 2019

facebook-github-bot left a comment

TrySound commented Oct 21, 2019

TrySound commented Nov 15, 2019

TrySound commented Dec 11, 2019

dousaitis commented Dec 24, 2019

frenzzy commented Dec 24, 2019

TrySound commented Dec 24, 2019

frenzzy commented Dec 24, 2019

TrySound commented Jan 11, 2020

TrySound commented Jan 29, 2020

facebook-github-bot left a comment

TrySound commented Feb 10, 2020

facebook-github-bot commented Feb 10, 2020

Optionally output eager es modules #2781

Optionally output eager es modules #2781

Conversation

TrySound commented Jun 24, 2019 • edited

TrySound commented Jun 28, 2019

TrySound commented Jul 7, 2019

dousaitis commented Jul 24, 2019

frenzzy commented Jul 29, 2019

TrySound commented Aug 3, 2019

TrySound commented Aug 7, 2019

dousaitis commented Aug 20, 2019

TrySound commented Aug 23, 2019

sgwilym commented Aug 27, 2019

frenzzy commented Sep 4, 2019

facebook-github-bot left a comment

Choose a reason for hiding this comment

TrySound commented Oct 21, 2019

TrySound commented Nov 15, 2019

TrySound commented Dec 11, 2019

dousaitis commented Dec 24, 2019

frenzzy commented Dec 24, 2019

TrySound commented Dec 24, 2019

frenzzy commented Dec 24, 2019

TrySound commented Jan 11, 2020

TrySound commented Jan 29, 2020

facebook-github-bot left a comment

Choose a reason for hiding this comment

TrySound commented Feb 10, 2020

facebook-github-bot commented Feb 10, 2020

TrySound commented Jun 24, 2019 •

edited