Drop Haste #11303

gaearon · 2017-10-20T18:35:20Z

TODO

Not sure how I feel about this.

This helps enforce that we have proper module boundaries between packages. It already exposes some renderers read directly from reconciler (and thus won't be accessible to third party renderers). So I think that is kind of nice.

This exposed an interesting issue with Jest and Yarn Workspaces (jestjs/jest#3830).

In a test, ../createReactNativeComponentClass and require('react-native-renderer').__SECRET_INTERNALS_DO_NOT_USE.createReactNativeComponentClass will be two different things. Because one is imported relatively (and thus is "located" in packages) while the other one is instantiated from code path going via node_modules/react-renderer. Jest thinks they are different.

This seemed like a show stopper to me at first. But then I thought, we don't like tests that do ../ anyway because they read internal modules. What if we just outlawed it?

In this case, you'd have to write react-native-renderer/src/createReactNativeComponentClass to get it in a test. Or read it from a secret bag exposed on react-native-renderer. But that might actually be okay because it makes "bad" code looks bad. All existing cases of this already have TODOs next to them (#11299). So we could forbid relative requires in tests. Thus also encouraging people to write integration tests for new features too.

We could also wait for Jest to fix it but I doubt that will happen soon since almost nobody else bumped into this.

Mostly seeking feedback if anyone has strong objections at this point. If not, I could further flatten the structure, forbid relative requires in tests, and then fix the build. I expect that Rollup configuration will be significantly simpler now that we can let it use Node resolving mechanism without silly whitelists like:

react/scripts/rollup/modules.js

Lines 32 to 50 in cc1ff87

    
           // these are the FBJS modules that are used throughout our bundles 
        
           const fbjsModules = [ 
        
             'fbjs/lib/warning', 
        
             'fbjs/lib/invariant', 
        
             'fbjs/lib/emptyFunction', 
        
             'fbjs/lib/emptyObject', 
        
             'fbjs/lib/hyphenateStyleName', 
        
             'fbjs/lib/getUnboundedScrollPosition', 
        
             'fbjs/lib/camelizeStyleName', 
        
             'fbjs/lib/containsNode', 
        
             'fbjs/lib/shallowEqual', 
        
             'fbjs/lib/getActiveElement', 
        
             'fbjs/lib/focusNode', 
        
             'fbjs/lib/EventListener', 
        
             'fbjs/lib/memoizeStringOnly', 
        
             'fbjs/lib/ExecutionEnvironment', 
        
             'fbjs/lib/createNodesFromMarkup', 
        
             'fbjs/lib/performanceNow', 
        
           ];

sebmarkbage · 2017-10-21T00:53:49Z

Not sure how I feel about this.

...goes on to list only benefits.

gaearon · 2017-10-21T10:49:03Z

I'll write something more comprehensive when I get it working :-)

gaearon · 2017-10-24T18:30:27Z

I don't understand what CI failure means. It builds locally. But on the server require.resolve('react') doesn't find anything. I expect it to resolve to node_modules/react per symlink. I cleared CI cache a few times.

This uncovered an interesting problem where ./b from package/src/a would resolve to a different instantiation of package/src/b in Jest. Either this is a showstopper or we can solve it by completely fobbidding remaining /src/.

It seems we can't use relative requires in tests anymore. Otherwise Jest becomes confused between real file and symlink. jestjs/jest#3830 This seems bad... Except that we already *don't* want people to create tests that import individual source files. All existing cases of us doing so are actually TODOs waiting to be fixed. So perhaps this requirement isn't too bad because it makes bad code looks bad. Of course, if we go with this, we'll have to lint against relative requires in tests. It also makes moving things more painful.

Shouldn't affect correctness (they were ignored) but fixes DEV size regression.

gaearon · 2017-10-24T21:25:41Z

Should be ready for initial review.

bvaughn

This is a pretty large change-set. I skimmed it, paying more attention to the bits in scripts/rollup.

I also did a build-and-sync locally and ran Catalyst with it for a couple of minutes. Had to update ReactNative.js to point to the new haste module name (ReactNativeFiber-* -> ReactNativeRenderer-*) but otherwise it seemed...ok. (I would expect this sort of change to fail fast and hard, if it broke things.)

Left a couple of minor thoughts. Overall this looks like a nice cleanup. 👍

bvaughn · 2017-10-24T21:54:35Z

packages/react-cs-renderer/src/ReactNativeCS.js

+// TODO: direct imports like some-package/src/* are bad. Fix me.
+const {
+  injectInternals,
+} = require('react-reconciler/src/ReactFiberDevToolsHook');


How do you feel about adding a lint rule for this?

Something like...

export default function(context) { return { Identifier(node) { if (node.name === 'require') { const path = node.parent.arguments[0].value; if (path.match(/^react.*\/src/)) { context.report(node, 'Do not import project internals'); } } } }; };

This would make us less likely to add more of these.

Yea, definitely. On todo list above after we know the change itself works.

bvaughn · 2017-10-24T22:11:31Z

packages/react-native-renderer/src/ReactNativeAttributePayload.js


+// Module provided by RN:


bvaughn · 2017-10-24T22:17:59Z

scripts/rollup/shims/rollup/ReactCurrentOwner-www.js

@@ -0,0 +1 @@
+module.exports = require('ReactCurrentOwner');


Note to self: I don't understand the purpose of scripts/rollup/shims/rollup/*

Update: Looks like it maps to a combination of forkedFBModules and getShims in modules.js. Still not entirely sure why it's necessary. Seems like it's related some some quirk/limitation of Rollup?

There should be comments close to getShims and its usage explaining.

The object-assign shim replaces object-assign reference in anything that depends on React with assign implementation exposed on React internals. This avoids ReactDOM UMD having to ship its own polyfill of object-assign while React UMD already includes one.

We use the www shims for overriding some modules in React. Basically we want to have some requires be "untouched" and actually require modules from www instead of our implementations in the open source. We can't just tell Rollup to turn require('react/src/ReactCurrentOwner') into require('ReactCurrentOwner') because then it will attempt to resolve it (and not find it). The trick with a shim file and a separate plugin to "transform" the original file to null in memory is the only reliable way I found to completely "rewire" these requires to external modules in Rollup.

Some of these hacks might fall away or become simpler after ES modules. CommonJS is afterthought in Rollup and it breaks some more unusual cases. It might be that we're in that territory, and migrating to ESM will allow to revisit and simplify those hacks.

Yeah, I saw the comments. I just didn't fully understand them I guess. The third paragraph above helps me understand a little.

bvaughn · 2017-10-24T22:24:02Z

scripts/rollup/bundles.js

  },

  /******* React DOM *******/
  {
-    babelOpts: babelOptsReact,
+    label: 'dom-fiber',


Should we drop the -fiber suffix from these now?

I wanted to do in a follow up pass renaming those. Ideally I want this to be explicit and just use package names instead of labels. But that makes yarn build react match everything. Maybe it had to be exact match but then it's more typing. I figured let's update these later when we have a better idea of how to do this ergonomically. Not coupled to build changes per se.

bvaughn · 2017-10-24T22:29:45Z

scripts/rollup/bundles.js

+    entry: 'react-art',
+    global: 'ReactART',
+    externals: ['react'],
+    babel: opts =>


nit: This could have a more meaningful name? Maybe like babelOptionsHook? I dunno. Names are hard.

I'll probably do another pass renaming them in this PR. I oscillated between long and short names here and used short ones. But maybe I was just tired of complex config and tried to simplify the perception by using shorter words. I don't care strongly either way and will think about them again.

bvaughn · 2017-10-24T22:33:35Z

scripts/rollup/build.js

@@ -503,44 +507,68 @@ function createBundle(bundle, bundleType) {
    }
  }

-  const filename = getFilename(bundle.name, bundle.hasteName, bundleType);
+  const filename = getFilename(
+    bundle.output || bundle.entry,


Looks like this only exists to map react-dom/server to react-dom/server.node

Couldn't we simplify by just renaming react-dom/server.js to react-dom/server.node.js?

Probably yes. I wanted to avoid an explicit separate entry point because it feels like public API. But I guess we have .browser anyway so might as well do that.

gaearon · 2017-10-24T23:21:01Z

Moved other follow up items into #11275.

This is getting pretty painful to keep up to date now so I'd prefer landing and addressing follow ups later this week.

bvaughn · 2017-10-25T01:55:41Z

That's fine of course 👍 I'm always happy to iterate on stuff like that.

* Use relative paths in packages/react * Use relative paths in packages/react-art * Use relative paths in packages/react-cs * Use relative paths in other packages * Fix as many issues as I can This uncovered an interesting problem where ./b from package/src/a would resolve to a different instantiation of package/src/b in Jest. Either this is a showstopper or we can solve it by completely fobbidding remaining /src/. * Fix all tests It seems we can't use relative requires in tests anymore. Otherwise Jest becomes confused between real file and symlink. jestjs/jest#3830 This seems bad... Except that we already *don't* want people to create tests that import individual source files. All existing cases of us doing so are actually TODOs waiting to be fixed. So perhaps this requirement isn't too bad because it makes bad code looks bad. Of course, if we go with this, we'll have to lint against relative requires in tests. It also makes moving things more painful. * Prettier * Remove @providesModule * Fix remaining Haste imports I missed earlier * Fix up paths to reflect new flat structure * Fix Flow * Fix CJS and UMD builds * Fix FB bundles * Fix RN bundles * Prettier * Fix lint * Fix warning printing and error codes * Fix buggy return * Fix lint and Flow * Use Yarn on CI * Unbreak Jest * Fix lint * Fix aliased originals getting included in DEV Shouldn't affect correctness (they were ignored) but fixes DEV size regression. * Record sizes * Fix weird version in package.json * Tweak bundle labels * Get rid of output option by introducing react-dom/server.node * Reconciler should depend on prop-types * Update sizes last time

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

gaearon mentioned this pull request Oct 20, 2017

Flatten everything #11304

Merged

gaearon force-pushed the no-haste-2 branch 3 times, most recently from b12a4f6 to a5a9e5d Compare October 21, 2017 00:51

gaearon mentioned this pull request Oct 22, 2017

Expose ReactCoroutine on __SECRET as unstable API #11311

Closed

gaearon force-pushed the no-haste-2 branch 9 times, most recently from f44aa96 to fc8bd83 Compare October 24, 2017 16:50

gaearon changed the title ~~[RFC] Drop Haste~~ Drop Haste Oct 24, 2017

gaearon added 11 commits October 24, 2017 20:36

Use relative paths in packages/react

2917505

Use relative paths in packages/react-art

ecc8061

Use relative paths in packages/react-cs

3b5d962

Use relative paths in other packages

c3f23f4

Fix as many issues as I can

6aba381

This uncovered an interesting problem where ./b from package/src/a would resolve to a different instantiation of package/src/b in Jest. Either this is a showstopper or we can solve it by completely fobbidding remaining /src/.

Prettier

20c8538

Remove @providesModule

81f6675

Fix remaining Haste imports I missed earlier

d5eb021

Fix up paths to reflect new flat structure

707b36a

Fix Flow

3a93972

gaearon added 7 commits October 24, 2017 20:36

Fix lint

a15dc5c

Fix warning printing and error codes

18f3f61

Fix buggy return

a9ac2f5

Fix lint and Flow

174df0a

Use Yarn on CI

4d42358

Unbreak Jest

958792f

Fix lint

4de7c15

gaearon force-pushed the no-haste-2 branch from 514e745 to 4de7c15 Compare October 24, 2017 19:36

gaearon added 3 commits October 24, 2017 22:14

Fix aliased originals getting included in DEV

474fd26

Shouldn't affect correctness (they were ignored) but fixes DEV size regression.

Record sizes

eceb301

Fix weird version in package.json

e566728

gaearon requested review from bvaughn and trueadm October 24, 2017 21:25

bvaughn approved these changes Oct 24, 2017

View reviewed changes

gaearon added 2 commits October 25, 2017 00:13

Tweak bundle labels

42b6613

Get rid of output option by introducing react-dom/server.node

3499f38

gaearon mentioned this pull request Oct 24, 2017

Yarn Workspaces Follow-up #11275

Closed

19 tasks

gaearon added 2 commits October 25, 2017 00:40

Reconciler should depend on prop-types

7aae950

Update sizes last time

5179733

gaearon merged commit 1eed302 into facebook:master Oct 24, 2017

gaearon mentioned this pull request Oct 25, 2017

Get rid of providesModule #6336

Closed

gaearon deleted the no-haste-2 branch December 14, 2017 18:28

robrichard mentioned this pull request Jan 29, 2018

Create flat bundles using rollup facebook/relay#1610

Closed

empyrical mentioned this pull request Nov 2, 2018

Move iOS and Android Specific Code to Their Own Packages react-native-community/discussions-and-proposals#49

Open

ayqy mentioned this pull request Nov 28, 2018

Duplicated definition references found when Go to Definition microsoft/vscode#63895

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drop Haste #11303

Drop Haste #11303

gaearon commented Oct 20, 2017 •

edited

Loading

sebmarkbage commented Oct 21, 2017

gaearon commented Oct 21, 2017

gaearon commented Oct 24, 2017

gaearon commented Oct 24, 2017

bvaughn left a comment •

edited

Loading

bvaughn Oct 24, 2017

gaearon Oct 24, 2017

bvaughn Oct 24, 2017

bvaughn Oct 24, 2017

gaearon Oct 24, 2017

bvaughn Oct 25, 2017

bvaughn Oct 24, 2017

gaearon Oct 24, 2017

bvaughn Oct 24, 2017

gaearon Oct 24, 2017

bvaughn Oct 24, 2017

gaearon Oct 24, 2017

gaearon commented Oct 24, 2017 •

edited

Loading

bvaughn commented Oct 25, 2017

	// these are the FBJS modules that are used throughout our bundles
	const fbjsModules = [
	'fbjs/lib/warning',
	'fbjs/lib/invariant',
	'fbjs/lib/emptyFunction',
	'fbjs/lib/emptyObject',
	'fbjs/lib/hyphenateStyleName',
	'fbjs/lib/getUnboundedScrollPosition',
	'fbjs/lib/camelizeStyleName',
	'fbjs/lib/containsNode',
	'fbjs/lib/shallowEqual',
	'fbjs/lib/getActiveElement',
	'fbjs/lib/focusNode',
	'fbjs/lib/EventListener',
	'fbjs/lib/memoizeStringOnly',
	'fbjs/lib/ExecutionEnvironment',
	'fbjs/lib/createNodesFromMarkup',
	'fbjs/lib/performanceNow',
	];

Drop Haste #11303

Drop Haste #11303

Conversation

gaearon commented Oct 20, 2017 • edited Loading

sebmarkbage commented Oct 21, 2017

gaearon commented Oct 21, 2017

gaearon commented Oct 24, 2017

gaearon commented Oct 24, 2017

bvaughn left a comment • edited Loading

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

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

gaearon commented Oct 24, 2017 • edited Loading

bvaughn commented Oct 25, 2017

gaearon commented Oct 20, 2017 •

edited

Loading

bvaughn left a comment •

edited

Loading

gaearon commented Oct 24, 2017 •

edited

Loading