React Reconciler Package #10758

iamdustan · 2017-09-20T15:12:02Z

Alternative approach to #10641. Rather than create the entire packaging and bundling script this exposes the React Reconciler as a factory package so all private+global state is unique per reconciler which solves the original concerns raised by @gaearon in #9103 (comment).

I think it also solves the open question How should we handle React-specific stuff pretty well since it doesn’t change the current rollup/build script at this point.

I added a really cheap fixtures/reconciler/* directory that requires some manual node_modules/react-reconciler/cjs/*.js modifications to test for now, but did test both versions.

This also (rather sloppily) modifies the scripts/rollup tasks to special case the react-reconciler wrapping.

TODO:

Generate a react-reconciler.js.flow file in the output package so external reconcilers can use flow for writing and maintaining reconcilers.
Versioning scheme? I would suspect this to have separate versioning from React and ReactDOM (React Reconciler Package #10758 (comment))
Change rollup/bundle regex match to a bundle type enum React Reconciler Package #10758 (comment)
Unbreak the build

cc @gaearon @bvaughn

iamdustan · 2017-09-20T15:20:55Z

packages/react-reconciler/README.md

@@ -0,0 +1,16 @@
+# react


derp, probably need to do more than simply copy-paste this.

bvaughn

Some thoughts 😄

bvaughn · 2017-09-20T15:26:25Z

packages/react-reconciler/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-reconciler",
+  "description": "React is a JavaScript library for building user interfaces.",


Prob needs better description?

bvaughn · 2017-09-20T15:29:12Z

fixtures/reconciler/README.md

+* `yarn install` 
+* edit node_modules/react-reconciler/cjs/react-reconciler.development.js 
+* Add the below snipper after `var valueStack = [];`
+* `yarn test`


It doesn't seem ideal that our test process involves editing content in node_modules. I would expect to see something more like:

yarn install yarn build yarn test

Where the yarn build step just runs yarn build -- reconciler in the main project to build a copy of the reconciler.

Then the test file (index.js I guess) should test something meaningful without any editing being required.

Idk if this needs to stick around or how to write a test that ensures that each reconciler has its own scope for reconciler-unique things like valueStack other than this really hacky way.

Possibly something with actually creating two reconcilers and then making them both do work that would indicate if they were clobbering each other or not.

Yes, we could automate it. At this point I don't think it's important if we manually verify it works once.

bvaughn · 2017-09-20T15:32:18Z

packages/react-reconciler/README.md

@@ -0,0 +1,16 @@
+# react


bvaughn · 2017-09-20T15:35:23Z

fixtures/reconciler/package.json

+  "private": true,
+  "dependencies": {
+    "react": "^16.0.0-",
+    "react-reconciler": "file:../../build/packages/react-reconciler"


Missing prop-types, fbjs, and object-assign dependencies?

🤷‍♂️ Everything worked okay for me so far. Idk if I even need those in the packages/react-reconciler area. There’s also a rollup warning right now for this package and apparently I broke bundling ReactDOM.

Whoops. I thought I was looking at packages/react-reconciler/package.json instead of the one in fixtures. Disregard. 😄

gaearon · 2017-09-20T15:49:28Z

packages/react-reconciler/package.json

+{
+  "name": "react-reconciler",
+  "description": "React is a JavaScript library for building user interfaces.",
+  "version": "16.0.0-rc.2",


Should we version this separately? Regular changes to React will be breaking changes for the reconciler.
We should either start with 0.0.1 or 1.0.0 😄

gaearon · 2017-09-20T15:51:20Z

scripts/rollup/build.js

@@ -78,6 +78,7 @@ function getHeaderSanityCheck(bundleType, hasteName) {
 }

 function getBanner(bundleType, hasteName, filename) {
+  const isReconciler = /react-reconciler/.test(filename);


I would prefer a flag on the bundle, like we do for isRenderer. Or, ideally, unify them under a required enum: 'isomorphic' | 'renderer' | 'reconciler'. But unification can wait.

gaearon · 2017-09-20T19:07:05Z

Looks like this broke the core build? yarn build -- core --type=FB

iamdustan · 2017-09-21T00:58:47Z

cc-ing @sebmarkbage / @sophiebits from convo in #9103 in case you didn’t see this PR which is more or less the model Dan was referring to at #9103 (comment)

sophiebits · 2017-09-21T04:28:40Z

scripts/rollup/build.js

@@ -88,10 +89,15 @@ function getBanner(bundleType, hasteName, filename) {
      let banner = Header.getHeader(filename, reactVersion);
      // Wrap the contents of the if-DEV check with an IIFE.
      // Block-level function definitions can cause problems for strict mode.
-      banner += `'use strict';\n\n\nif (process.env.NODE_ENV !== "production") {\n(function() {\n`;
+      banner += isReconciler
+        ? `'use strict';\n\n\nif (process.env.NODE_ENV !== "production") {\nmodule.exports = function(config) {\n`


Not sure if I'm being dense but I don't understand why the reconciler needs to be a special case here. Isn't ReactFiberReconciler's export already the function we want?

It is, but this covers ensuring that all other modules with global-module state is created anew for each 3rd party reconciler instance until all internal modules with that state are wrapped in factory methods.

iamdustan · 2017-09-21T12:52:01Z

Only thing left that I know that would be nice is generating the index.js.flow file in the output package, but everything else should be covered.

gaearon · 2017-09-21T17:49:02Z

Can you fix the CI?

iamdustan · 2017-09-21T18:15:56Z

Error: spawnSync ~/react/node_modules/.bin/prettier E2BIG
    at exports._errnoException (util.js:1022:11)
    ...

getting this error when prettier is ran. 🤔

koba04 · 2017-09-22T03:55:53Z

packages/react-reconciler/README.md

+  ) {
+    let root = container._reactRootContainer;
+    if (!root) {
+      const newRoot = Renderer.createContainer(container);


Reconciler.createContainer(container);?

koba04 · 2017-09-22T03:57:53Z

packages/react-reconciler/README.md

+      // Initial mount should not be batched.
+      Renderer.unbatchedUpdates(() => {
+        Renderer.updateContainer(element, newRoot, null, callback);
+      });


s/Renderer/Reconciler/g?

Reconciler.unbatchedUpdates(() => { Reconciler.updateContainer(element, newRoot, null, callback); });

koba04 · 2017-09-22T03:58:17Z

packages/react-reconciler/README.md

+        Renderer.updateContainer(element, newRoot, null, callback);
+      });
+    } else {
+      Renderer.updateContainer(element, root, null, callback);


Reconciler.updateContainer(element, root, null, callback); ?

great eye, @koba04. thanks!

gaearon · 2017-09-22T15:13:56Z

I don't think we call the result of calling the reconciler "a reconciler" :-) Sorry for the confusion.

The result is a Renderer. Maybe the exported thing could be called RendererPublicAPI?

bvaughn · 2017-09-22T15:21:48Z

Agreed! "reconciler" may not be the most user-friendly name for the API.

Just an idea, but what about something like create-react-renderer (following the create-react-app name)? Too different from all of the other react-* names?

import createReactRenderer from 'create-react-renderer';

const Renderer = createReactRenderer(config);

iamdustan · 2017-09-22T15:33:50Z

I would imagine a create-react-renderer to be similar to the original proposal that includes all the rollup/dev tooling to package and publish a renderer.

gaearon · 2017-09-23T22:56:56Z

scripts/rollup/modules.js

  // external modules tell Rollup that we should not attempt
  // to bundle these modules and instead treat them as
  // external depedencies to the bundle. so for CJS bundles
  // this means having a require("name-of-external-module") at
  // the top of the bundle. for UMD bundles this means having
  // both a require and a global check for them
  let externalModules = externals.slice();
+  const isRenderer = moduleType === RENDERER || moduleType === RECONCILER;


This looks counter-intuitive. I would probably replace

if (isRenderer) { externalModules.push('react'); }

with

if (moduleType !== ISOMORPHIC) { externalModules.push('react'); }

below.

gaearon · 2017-09-25T14:34:19Z

scripts/rollup/modules.js

@@ -97,7 +101,7 @@ function getNodeModules(bundleType, isRenderer) {
      return {
        // Bundle object-assign once in the isomorphic React, and then use
        // that from the renderer UMD. Avoids bundling it in both UMDs.
-        'object-assign': isRenderer
+        'object-assign': moduleType === RENDERER


I think we should instead check for ISOMORPHIC here, and reverse the ternary. Isomorphic gets the real thing, everyone else gets the shim. Even though technically we don’t have reconciler UMDs anyway.

gaearon · 2017-09-25T14:36:35Z

I'd like to figure out a way to have a testing procedure that doesn't ask folks to edit node_modules. It should be possible to write a smoke test that creates two renderers (e.g. A and B), and then renders something with A while we're inside a component being rendered by B. I think this should be enough to mess up the (shared) context stack.

gaearon · 2017-09-25T14:37:54Z

Or, perhaps, we shouldn't focus on the context at all. After all this particular case can be fixed. If you manually verified wrapping it in a closure works (why wouldn't it), this should be enough for now.

Instead we should have a fixture that lets us check that the reconciler package is not completely borked. For example by declaring a very simple renderer and writing a Node script that verifies it renders something.

iamdustan · 2017-09-25T14:41:43Z

Do you want that done before this is merged?

Two ideas:

do something like what you’ve done for dev mode testing for react devtools. E.g. add an empty assignment on to the exports so we can check it from the outside.
have the test-renderer use this package to dogfood it and verify it works. (or just copy-paste the non-internals part of the test-renderer out into the test fixture)

gaearon · 2017-09-25T15:15:05Z

I want to have some way to test it before this is merged since we're going to start doing releases very soon. I would suggest copy-pasting noop renderer and having a simple test that verifies it works.

iamdustan · 2017-09-25T21:31:25Z

Something like 2b196c4? It’s still not fully automatic so I could look into running the ReactIncremental-test.js there too since that is the only consumer I could find of ReactNoop in the codebase.

Also, ReactInstanceMap is private (as far as I know) so I simply commented out the findInstance method of the public interface with a comment s that the drift from the actual noop renderer has some sort of paper trail.

gaearon · 2017-09-26T10:55:17Z

I don't think we need to port the unit test. A simple smoke test verifying it doesn't instacrash rendering a simple component is enough. You can also delete all irrelevant code there.

iamdustan · 2017-09-26T12:52:30Z

To make sure I’m understanding you, is something like this in the fixtures renderer what you’re thinking?

const Renderer = require('./noop');

expect(() => Renderer.render(<element />)).not.toThrow();

Do I need to tie that into any other command that is run during releases?

iamdustan · 2017-09-27T19:08:25Z

@gaearon pinging in case you missed --^. Happy to make the change as soon as I know I’m doing what you expect 😄

gaearon · 2017-09-27T19:30:06Z

Noop renderer renders to a tree in memory. It would just be nice to verify basic sanity of that tree. e.g. that it created "hello world" host instance.

dakom · 2017-11-13T10:30:44Z

woohoo, just noticed this is live: https://www.npmjs.com/package/react-reconciler :)

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

iamdustan commented Sep 20, 2017

View reviewed changes

bvaughn reviewed Sep 20, 2017

View reviewed changes

gaearon reviewed Sep 20, 2017

View reviewed changes

sophiebits reviewed Sep 21, 2017

View reviewed changes

gaearon mentioned this pull request Sep 21, 2017

RFC: ReactFiberReconciler release artifact #9103

Closed

koba04 reviewed Sep 22, 2017

View reviewed changes

gaearon reviewed Sep 23, 2017

View reviewed changes

gaearon reviewed Sep 25, 2017

View reviewed changes

iamdustan force-pushed the react-reconciler-package branch from 2b196c4 to fa94122 Compare September 25, 2017 21:30

This was referenced Nov 13, 2017

Update react in / from 16.0.0 to 16.1.1 dropseed/jump#17

Merged

Update react-dom in / from 16.0.0 to 16.1.1 dropseed/jump#18

Merged

renovate bot mentioned this pull request Feb 22, 2018

Update react monorepo packages to v16.2.0 mozilla/ensemble#28

Closed

This was referenced Mar 1, 2018

Update react-dom in / from 16.0.0 to 16.2.0 pcardune/redux-firebase-mirror#27

Open

Update react-test-renderer in / from 16.0.0 to 16.2.0 pcardune/redux-firebase-mirror#28

Open

This was referenced Mar 21, 2018

Update react to 16.3.2-abandoned sbardian/DebtTrackerAPI#15

Closed

Update react-dom to ^16.0.0-abandoned sbardian/DebtTrackerAPI#18

Closed

This was referenced May 20, 2020

[Snyk] Security upgrade lighthouse from 2.0.0 to 6.0.0 cajonemsft/react#22

Open

[Snyk] Security upgrade lighthouse from 2.0.0 to 6.0.0 heshamelmasry77/react#11

Open

This was referenced Mar 23, 2022

[Snyk] Fix for 1 vulnerabilities cajonemsft/react#96

Open

[Snyk] Fix for 1 vulnerabilities heshamelmasry77/react#66

Open

React Reconciler Package #10758

React Reconciler Package #10758

Conversation

iamdustan commented Sep 20, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn Sep 20, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Sep 20, 2017

iamdustan commented Sep 21, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamdustan commented Sep 21, 2017

gaearon commented Sep 21, 2017

iamdustan commented Sep 21, 2017

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 Sep 22, 2017

bvaughn commented Sep 22, 2017 • edited

iamdustan commented Sep 22, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Sep 25, 2017

gaearon commented Sep 25, 2017

iamdustan commented Sep 25, 2017

gaearon commented Sep 25, 2017

iamdustan commented Sep 25, 2017

gaearon commented Sep 26, 2017

iamdustan commented Sep 26, 2017

iamdustan commented Sep 27, 2017

gaearon commented Sep 27, 2017

dakom commented Nov 13, 2017

iamdustan commented Sep 20, 2017 •

edited

bvaughn Sep 20, 2017 •

edited

bvaughn commented Sep 22, 2017 •

edited