React Native bundle (#114)

Summary:
Fixes facebookexperimental/Recoil#99

**Additions:**
- Add the ability to set/get a batch function, which defaults to `ReactBatchedUpdates`.
- Add `ReactBatchedUpdates` files for Web and Native that are imported to set the batch function to the renderer-specific function.
- Add a `native` target to Rollup, which resolves `ReactBatchedUpdates`.

**Result:**
This gives us out of the box support for React DOM and React Native, with the library user not needing to make any changes.

**Notes:**
I haven't changed the use of `unstable_batchedUpdates` in the tests. (In fact I haven't been able to get the suite to pass on `master`, which I'll have another go at later, and file an issue if I'm still stuck.) But it'd be great if the maintainers or anyone with more contexts on the tests could weigh in here. It seems like we should use `unstable_batchedUpdates` from `react-test-renderer` here.

In future, we could add a separate entry point (e.g. `'recoil/alternate-renderers'`) that doesn't set a batch function and doesn't depend on `react-dom` or `react-native`. We should be able to do this really easily because the infrastructure for setting the batching function to anything is available (and already exported in this PR).

**Prior art for this PR:**
- React Redux: [Alternate renderers entry point](https://github.com/reduxjs/react-redux/blob/master/src/alternate-renderers.js) and [get/set batch functions](https://github.com/reduxjs/react-redux/blob/master/src/utils/batch.js)
- dustinsoftware's [PR](facebookexperimental/Recoil#108) with a similar implementation {emoji:1f64c}

Pull Request resolved: facebookexperimental/Recoil#114

Reviewed By: drarmstr, davidmccabe

Differential Revision: D23733076

Pulled By: mondaychen

fbshipit-source-id: 948d45dd43b6e9ebac86ed6dd8433f3a1207c799

Author: jackwolfskin0302

.babelrc

@@ -8,6 +8,7 @@
         "alias": {
           "React": "react",
           "ReactDOM": "react-dom",
+          "ReactNative": "react-native",
           "ReactTestUtils": "react-dom/test-utils"
         }
       }

.gitignore

@@ -86,6 +86,7 @@ typings/
 .nuxt
 cjs
 es
+native
 umd
 /index.d.ts
 

package.json

@@ -4,11 +4,13 @@
   "description": "Recoil - A state management library for React",
   "main": "cjs/recoil.js",
   "module": "es/recoil.js",
+  "react-native": "native/recoil.js",
   "unpkg": "umd/recoil.js",
   "files": [
     "umd",
     "es",
     "cjs",
+    "native",
     "index.d.ts"
   ],
   "repository": "https://github.com/facebookexperimental/recoil.git",
@@ -24,8 +26,15 @@
     "lint": "eslint ."
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^16.13.1"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",

rollup.config.js

@@ -7,6 +7,9 @@ import {terser} from 'rollup-plugin-terser';
 const inputFile = 'src/Recoil_index.js';
 const externalLibs = ['react', 'react-dom'];
 
+const defaultNodeResolveConfig = {};
+const nodeResolvePlugin = nodeResolve(defaultNodeResolveConfig);
+
 const commonPlugins = [
   babel({
     presets: ['@babel/preset-react', '@babel/preset-flow'],
@@ -27,10 +30,13 @@ const commonPlugins = [
       if (source === 'ReactDOM') {
         return {id: 'react-dom', external: true};
       }
+      if (source === 'ReactNative') {
+        return {id: 'react-native', external: true};
+      }
       return null;
     },
   },
-  nodeResolve(),
+  nodeResolvePlugin,
   commonjs(),
 ];
 
@@ -74,6 +80,28 @@ const configs = [
     plugins: commonPlugins,
   },
 
+  // React Native
+  {
+    input: inputFile,
+    output: {
+      file: `native/recoil.js`,
+      format: 'es',
+      exports: 'named',
+    },
+    external: [...externalLibs, 'react-native'],
+    plugins: commonPlugins.map(plugin => {
+      // Replace the default nodeResolve plugin
+      if (plugin === nodeResolvePlugin) {
+        return nodeResolve({
+          ...defaultNodeResolveConfig,
+          extensions: ['.native.js', '.js'],
+        });
+      }
+
+      return plugin;
+    }),
+  },
+
   // ES for Browsers
   {
     input: inputFile,

src/Recoil_index.js

@@ -69,6 +69,7 @@ const {
   waitForAny,
   waitForNone,
 } = require('./recoil_values/Recoil_WaitFor');
+const {batchUpdates, setBatcher} = require('./util/Recoil_batcher');
 
 module.exports = {
   // Types
@@ -115,4 +116,8 @@ module.exports = {
 
   // Other functions
   isRecoilValue,
+
+  // Batching
+  batchUpdates,
+  setBatcher,
 };

src/core/Recoil_Node.js

@@ -97,10 +97,11 @@ function registerNode<T>(node: Node<T>): RecoilValue<T> {
       // @fb-only: if (typeof isAcceptingUpdate !== 'function' || !isAcceptingUpdate()) {
         // @fb-only: expectationViolation(message, 'recoil');
       // @fb-only: }
-    // prettier-ignore
+      // prettier-ignore
     // @fb-only: } else {
-      recoverableViolation(message, 'recoil');
+      // @fb-only: recoverableViolation(message, 'recoil');
     // @fb-only: }
+    console.warn(message); // @oss-only
   }
   nodes.set(node.key, node);
 

src/hooks/Recoil_Hooks.js

@@ -19,7 +19,6 @@ import type {NodeKey, Store, TreeState} from '../core/Recoil_State';
 
 const React = require('React');
 const {useCallback, useEffect, useMemo, useRef, useState} = require('React');
-const ReactDOM = require('ReactDOM');
 
 const {DEFAULT_VALUE, getNode, nodes} = require('../core/Recoil_Node');
 const {
@@ -36,6 +35,7 @@ const {
   subscribeToRecoilValue,
 } = require('../core/Recoil_RecoilValueInterface');
 const {Snapshot, cloneSnapshot} = require('../core/Recoil_Snapshot');
+const {batchUpdates} = require('../util/Recoil_batcher');
 const {setByAddingToSet} = require('../util/Recoil_CopyOnWrite');
 const differenceSets = require('../util/Recoil_differenceSets');
 const expectationViolation = require('../util/Recoil_expectationViolation');
@@ -599,7 +599,7 @@ function useGotoRecoilSnapshot(): Snapshot => void {
       const storeState = storeRef.current.getState();
       const prev = storeState.nextTree ?? storeState.currentTree;
       const next = snapshot.getStore_INTERNAL().getState().currentTree;
-      ReactDOM.unstable_batchedUpdates(() => {
+      batchUpdates(() => {
         const keysToUpdate = new Set();
         for (const keys of [prev.atomValues.keys(), next.atomValues.keys()]) {
           for (const key of keys) {
@@ -639,7 +639,7 @@ function useSetUnvalidatedAtomValues(): (
 ) => void {
   const storeRef = useStoreRef();
   return (values: Map<NodeKey, mixed>, transactionMetadata: {...} = {}) => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       storeRef.current.addTransactionMetadata(transactionMetadata);
       values.forEach((value, key) =>
         setUnvalidatedRecoilValue(
@@ -686,13 +686,13 @@ function useRecoilCallback<Args: $ReadOnlyArray<mixed>, Return>(
       }
 
       let ret = SENTINEL;
-      ReactDOM.unstable_batchedUpdates(() => {
+      batchUpdates(() => {
         // flowlint-next-line unclear-type:off
         ret = (fn: any)({set, reset, snapshot, gotoSnapshot})(...args);
       });
       invariant(
         !(ret instanceof Sentinel),
-        'unstable_batchedUpdates should return immediately',
+        'batchUpdates should return immediately',
       );
       return (ret: Return);
     },

src/hooks/__tests__/Recoil_PublicHooks-test.js

@@ -35,16 +35,17 @@ const {
   renderElements,
   renderElementsWithSuspenseCount,
 } = require('../../testing/Recoil_TestingUtils');
+const {batchUpdates} = require('../../util/Recoil_batcher');
 const gkx = require('../../util/Recoil_gkx');
 const {
+  recoilComponentGetRecoilValueCount_FOR_TESTING,
   useRecoilState,
   useRecoilStateLoadable,
   useRecoilValue,
   useRecoilValueLoadable,
   useSetRecoilState,
   useSetUnvalidatedAtomValues,
   useTransactionObservation_DEPRECATED,
-  recoilComponentGetRecoilValueCount_FOR_TESTING,
 } = require('../Recoil_Hooks');
 
 gkx.setFail('recoil_async_selector_refactor');
@@ -480,7 +481,7 @@ test('Selector functions are evaluated just once even if multiple upstreams chan
   );
   expect(selectorFn).toHaveBeenCalledTimes(1);
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       updateValueA(1);
       updateValueB(1);
     });
@@ -504,7 +505,7 @@ test('Component that depends on multiple atoms via selector is rendered just onc
   );
   expect(commit).toHaveBeenCalledTimes(1);
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       updateValueA(1);
       updateValueB(1);
     });
@@ -527,7 +528,7 @@ test('Component that depends on multiple atoms directly is rendered just once',
   );
   expect(ReadComp).toHaveBeenCalledTimes(1);
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       updateValueA(1);
       updateValueB(1);
     });
@@ -547,7 +548,7 @@ test('Component is rendered just once when atom is changed twice', () => {
   );
   expect(commit).toHaveBeenCalledTimes(1);
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       updateValueA(1);
       updateValueA(2);
     });
@@ -628,7 +629,7 @@ test('Can subscribe to and also change an atom in the same batch', () => {
   expect(container.textContent).toEqual('');
 
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       setVisible(true);
       updateValue(1337);
     });
@@ -944,7 +945,7 @@ test('Selector depedencies are updated transactionally', () => {
   );
 
   act(() => {
-    ReactDOM.unstable_batchedUpdates(() => {
+    batchUpdates(() => {
       updateValueA(1);
       updateValueB(1);
     });

src/recoil_values/Recoil_atomFamily.js

@@ -93,13 +93,13 @@ function atomFamily<T, P: Parameter>(
   // @fb-only: if (
   // @fb-only: options.scopeRules_APPEND_ONLY_READ_THE_DOCS
   // @fb-only: ) {
-    // @fb-only: legacyAtom = parameterizedScopedAtomLegacy<T | DefaultValue, P>({
-      // @fb-only: ...legacyAtomOptions,
-      // @fb-only: scopeRules_APPEND_ONLY_READ_THE_DOCS:
-        // @fb-only: options.scopeRules_APPEND_ONLY_READ_THE_DOCS,
-    // @fb-only: });
+  // @fb-only: legacyAtom = parameterizedScopedAtomLegacy<T | DefaultValue, P>({
+  // @fb-only: ...legacyAtomOptions,
+  // @fb-only: scopeRules_APPEND_ONLY_READ_THE_DOCS:
+  // @fb-only: options.scopeRules_APPEND_ONLY_READ_THE_DOCS,
+  // @fb-only: });
   // @fb-only: } else {
-    legacyAtom = atom<T | DefaultValue>(legacyAtomOptions);
+  legacyAtom = atom<T | DefaultValue>(legacyAtomOptions);
   // @fb-only: }
 
   // Selector to calculate the default value based on any persisted legacy atoms

src/util/Recoil_ReactBatchedUpdates.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+recoil
+ * @flow strict
+ * @format
+ *
+ * This is to export esstiential functions from react-dom
+ * for our web build
+ */
+
+const {unstable_batchedUpdates} = require('ReactDOM');
+module.exports = {unstable_batchedUpdates};

src/util/Recoil_ReactBatchedUpdates.native.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+recoil
+ * @flow strict
+ * @format
+ *
+ * This is to export esstiential functions from react-native
+ * for our react-native build (currently only available on github)
+ */
+
+// $FlowExpectedError[cannot-resolve-module]
+const {unstable_batchedUpdates} = require('ReactNative'); // @oss-only
+module.exports = {unstable_batchedUpdates}; // @oss-only

src/util/Recoil_batcher.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+recoil
+ * @flow strict
+ * @format
+ *
+ * This is a stub for some integration into FB internal stuff
+ */
+
+const {unstable_batchedUpdates} = require('./Recoil_ReactBatchedUpdates');
+
+let batcher = unstable_batchedUpdates;
+
+// flowlint-next-line unclear-type:off
+type Callback = () => any;
+type Batcher = (callback: Callback) => void;
+
+/**
+ * Sets the provided batcher function as the batcher function used by Recoil.
+ *
+ * Set the batcher to a custom batcher for your renderer,
+ * if you use a renderer other than React DOM or React Native.
+ */
+const setBatcher: Batcher => void = (newBatcher: Batcher) => {
+  batcher = newBatcher;
+};
+
+/**
+ * Returns the current batcher function.
+ */
+const getBatcher: () => Batcher = () => batcher;
+
+/**
+ * Calls the current batcher function and passes the
+ * provided callback function.
+ */
+const batchUpdates: Callback => void = (callback: Callback) =>
+  batcher(callback);
+
+module.exports = {
+  getBatcher,
+  setBatcher,
+  batchUpdates,
+};