Convert the Source to ES Modules #11389

gaearon · 2017-10-27T17:18:32Z

bvaughn

Nice work Dan! This is a big diff! Hope I didn't overlook something important. 😁

Tests, lint, and Flow checks all pass locally. I also did a local sync to fbsource to quickly test the React Native renderer and didn't notice any obvious problems so... 👍

I wondered about the impact on bundle size of converting conditional/DEV-only requires to imports, but it looks like this PR has a mostly positive impact on bundle size. There are a couple of small size increases but they seem to be primarily in test renderer and experimental packages.

I noticed lots of new warnings during yarn build:

'default' is imported from external module '...' but never used

Looks like these are all coming from prod builds, for code that used to only be imported within a DEV conditional. It's unfortunate that this clutters up the output of build.

bvaughn · 2017-11-01T17:30:37Z

packages/react-dom/src/client/ReactDOMFB.js

+import * as ReactFiberErrorLogger
+  from 'react-reconciler/src/ReactFiberErrorLogger';
+import ReactErrorUtils from 'shared/ReactErrorUtils';
+// TODO: direct imports like some-package/src/* are bad. Fix me.


This comment should be moved above line 14?

bvaughn · 2017-11-01T17:41:10Z

packages/shared/ReactVersion.js

@@ -7,4 +7,5 @@

 'use strict';

+// TODO: this is special because it gets imported during build.


The release script uses this, but it would be easy to change it. Looks like the only other reference is our version-check task which would also be easy to update.

I think those are the only 2 things blocking this TODO? If so, I'd be happy to help with a follow-up PR.

Maybe the cleanest way would be to shim this file with a fake module that is generated by reading package.json.

gaearon · 2017-11-01T17:49:17Z

There are a couple of small size increases but they seem to be primarily in test renderer and experimental packages.

I also noticed in some cases the size before gzip decreased, but slightly increased after. Since gzip number isn’t that solid anyway (it depends on surrounding context) I wouldn’t worry too much about that.

Looks like these are all coming from prod builds, for code that used to only be imported within a DEV conditional. It's unfortunate that this clutters up the output of build.

Yeah. Basically CommonJS builds now include calls like require('warning') that don’t actually do anything. Now that I think of it, this would slightly increase the bundle size for people consuming CommonJS builds (but not increase the bundle themselves). We should find a fix for this.

blling · 2017-11-01T22:47:40Z

Is this PR ready for merge ? It is really a greate work!

gaearon · 2017-11-01T23:20:19Z

Not yet. I'm still fixing up some things.

This is clearer because we can use ES imports in it.

selbekk · 2017-11-03T07:35:52Z

Great job!

jerrylau91 · 2017-11-03T08:05:17Z

Nice job!

Jaikant · 2017-11-03T08:33:47Z

Nice!

opeologist · 2017-11-03T09:52:45Z

this didn't make it into 16.1.0-beta, did it @gaearon ? been itching to import react in browsers that support modules

gaearon · 2017-11-03T10:27:51Z

That's not what it is. It's not for loading React from browsers, it's changing React's own internal module system. We can do the ES build too though—just needs somebody who wants to contribute it :-)

opeologist · 2017-11-03T15:15:42Z

ahh i see, thanks for the clarification!

* Update transforms to handle ES modules * Update Jest to handle ES modules * Convert react package to ES modules * Convert react-art package to ES Modules * Convert react-call-return package to ES Modules * Convert react-test-renderer package to ES Modules * Convert react-cs-renderer package to ES Modules * Convert react-rt-renderer package to ES Modules * Convert react-noop-renderer package to ES Modules * Convert react-dom/server to ES modules * Convert react-dom/{client,events,test-utils} to ES modules * Convert react-dom/shared to ES modules * Convert react-native-renderer to ES modules * Convert react-reconciler to ES modules * Convert events to ES modules * Convert shared to ES modules * Remove CommonJS support from transforms * Move ReactDOMFB entry point code into react-dom/src This is clearer because we can use ES imports in it. * Fix Rollup shim configuration to work with ESM * Fix incorrect comment * Exclude external imports without side effects * Fix ReactDOM FB build * Remove TODOs I don’t intend to fix yet

getspooky · 2021-03-11T20:43:51Z

Great job!

garretwilson · 2023-03-17T16:16:34Z

That's not what it is. It's not for loading React from browsers, it's changing React's own internal module system. We can do the ES build too though—just needs somebody who wants to contribute it :-)

So in 2023 I still have to use some conversion thingy to natively use React modules in the browser, even though basically all browsers support ES modules?

Any reason why the switch to ES modules hasn't been made in over 5 years? Is it lack of interest, lack of contributors, or some technical reason?

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

gaearon force-pushed the esm-react branch 4 times, most recently from d68f7c8 to ca686fe Compare October 31, 2017 15:49

gaearon requested a review from sebmarkbage October 31, 2017 19:51

gaearon force-pushed the esm-react branch 4 times, most recently from 38147b9 to 43b5a04 Compare October 31, 2017 23:01

gaearon mentioned this pull request Oct 31, 2017

Depend on prop-types/checkPropTypes, not prop-types itself #11420

Merged

gaearon force-pushed the esm-react branch from 43b5a04 to a6e7d01 Compare November 1, 2017 15:13

bvaughn requested review from bvaughn and removed request for sebmarkbage November 1, 2017 16:28

bvaughn approved these changes Nov 1, 2017

View reviewed changes

gaearon added 12 commits November 2, 2017 16:57

Update transforms to handle ES modules

e17bbe7

Update Jest to handle ES modules

cff14c6

Convert react package to ES modules

27956f1

Convert react-art package to ES Modules

82002bf

Convert react-call-return package to ES Modules

cda2ec6

Convert react-test-renderer package to ES Modules

e0bd572

Convert react-cs-renderer package to ES Modules

a0a1ee0

Convert react-rt-renderer package to ES Modules

0452dfd

Convert react-noop-renderer package to ES Modules

c90daf8

Convert react-dom/server to ES modules

d622fc3

Convert react-dom/{client,events,test-utils} to ES modules

78a0900

Convert react-dom/shared to ES modules

087cb44

gaearon added 3 commits November 2, 2017 18:34

Convert react-native-renderer to ES modules

8b8ec20

Convert react-reconciler to ES modules

b688ec2

Convert events to ES modules

1e95d12

gaearon force-pushed the esm-react branch from ab69de2 to 60ee019 Compare November 2, 2017 18:48

gaearon added 5 commits November 2, 2017 18:58

Convert shared to ES modules

b5513c3

Remove CommonJS support from transforms

c8e690b

Move ReactDOMFB entry point code into react-dom/src

15f7753

This is clearer because we can use ES imports in it.

Fix Rollup shim configuration to work with ESM

3b3d230

Fix incorrect comment

52081f6

gaearon force-pushed the esm-react branch 2 times, most recently from faeb440 to 9551d73 Compare November 2, 2017 19:15

gaearon added 2 commits November 2, 2017 19:27

Exclude external imports without side effects

1bd389f

Fix ReactDOM FB build

21bfd4c

gaearon force-pushed the esm-react branch from 9551d73 to 21bfd4c Compare November 2, 2017 19:28

Remove TODOs I don’t intend to fix yet

56519b4

gaearon merged commit 21d0c11 into facebook:master Nov 2, 2017

gaearon deleted the esm-react branch November 2, 2017 19:50

weswigham mentioned this pull request Nov 7, 2017

Synthesize namespace records on CommonJS imports if necessary microsoft/TypeScript#16093

Closed

gaearon mentioned this pull request Jan 2, 2018

DEV-only requires in FB bundles #10176

Closed

robrichard mentioned this pull request Jan 29, 2018

Create flat bundles using rollup facebook/relay#1610

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert the Source to ES Modules #11389

Convert the Source to ES Modules #11389

gaearon commented Oct 27, 2017 •

edited

Loading

bvaughn left a comment •

edited

Loading

bvaughn Nov 1, 2017

bvaughn Nov 1, 2017

gaearon Nov 1, 2017

gaearon commented Nov 1, 2017 •

edited

Loading

blling commented Nov 1, 2017

gaearon commented Nov 1, 2017

selbekk commented Nov 3, 2017

jerrylau91 commented Nov 3, 2017

Jaikant commented Nov 3, 2017

opeologist commented Nov 3, 2017

gaearon commented Nov 3, 2017

opeologist commented Nov 3, 2017

getspooky commented Mar 11, 2021

garretwilson commented Mar 17, 2023 •

edited

Loading

		@@ -7,4 +7,5 @@

		'use strict';

		// TODO: this is special because it gets imported during build.

Convert the Source to ES Modules #11389

Convert the Source to ES Modules #11389

Conversation

gaearon commented Oct 27, 2017 • edited Loading

bvaughn left a comment • edited Loading

Choose a reason for hiding this comment

bvaughn Nov 1, 2017

Choose a reason for hiding this comment

bvaughn Nov 1, 2017

Choose a reason for hiding this comment

gaearon Nov 1, 2017

Choose a reason for hiding this comment

gaearon commented Nov 1, 2017 • edited Loading

blling commented Nov 1, 2017

gaearon commented Nov 1, 2017

selbekk commented Nov 3, 2017

jerrylau91 commented Nov 3, 2017

Jaikant commented Nov 3, 2017

opeologist commented Nov 3, 2017

gaearon commented Nov 3, 2017

opeologist commented Nov 3, 2017

getspooky commented Mar 11, 2021

garretwilson commented Mar 17, 2023 • edited Loading

gaearon commented Oct 27, 2017 •

edited

Loading

bvaughn left a comment •

edited

Loading

gaearon commented Nov 1, 2017 •

edited

Loading

garretwilson commented Mar 17, 2023 •

edited

Loading