React 18, take 2 (Shopify#191)

Author: lemonmade

.changeset/moody-gorillas-compare.md

@@ -0,0 +1,5 @@
+---
+'@remote-ui/react': major
+---
+
+Added support for React 18 by having the consumer own the versions of `react` and `react-reconciler`. If you are currently using React 17 only, and are rendering in the “remote” context, you will need to add a dependency on `react-reconciler^0.27.0`. If you are using React 18, you will need to manually install the version of `react-reconciler` that matches up to that version (currently, `^0.29.0`).

.changeset/yellow-maps-own.md

@@ -0,0 +1,5 @@
+---
+'@remote-ui/react': major
+---
+
+Removed re-export of `@remote-ui/rpc`. If you need `retain` or `release`, import them directly from `@remote-ui/rpc` instead.

packages/react/CHANGELOG.md

@@ -18,6 +18,10 @@
   - @remote-ui/core@2.2.0
   - @remote-ui/rpc@1.4.0
 
+### Deprecated
+
+- The `render` function is deprecated. Please move to using the new `createRoot` instead, which matches the API provided by React.
+
 ## [4.5.1] - 2022-05-16
 
 - Fixed a missing `useAttached()` export in the `@shopify/remote-ui/host` entrypoint.

packages/react/README.md

@@ -16,17 +16,45 @@ or, using `npm`:
 npm install @remote-ui/react --save
 ```
 
+### React peer dependencies
+
+This package also has peer dependencies on a few React-related packages, but the versions you need depend on the version of React you are using:
+
+**React 17.x.x**: you will need to have React installed. Additionally, if you are in the “remote” environment, you will need a dependency on `react-reconciler` between greater than or equal to `0.26.0`, and less than `0.28.0`:
+
+```
+yarn add react@^17.0.0 react-reconciler@^0.27.0
+
+# or, with `npm`:
+
+npm install react@^17.0.0 react-reconciler@^0.27.0 --save
+```
+
+**React 17.0.0 and later**: you will need to have React installed. Additionally, if you are in the “remote” environment, you will need a dependency on `react-reconciler` between greater than or equal to `0.28.0`:
+
+```
+yarn add react react-reconciler
+
+# or, with `npm`:
+
+npm install react react-reconciler --save
+```
+
+If you are only using the utilities for [React host applications](#host-environment), you do not need to declare a dependency on `react-reconciler`.
+
 ## Usage
 
 ### Remote environment
 
-#### `render()`
+#### `createRoot()`
 
-The main entrypoint for this package, `@remote-ui/react`, provides the custom React renderer that outputs instructions to a [`@remote-ui/core` `RemoteRoot`](../core#remoteroot) object. This lets you use the remote-ui system for communicating patch updates to host components over a bridge, but have React help manage your stateful application logic. To run a React app against a `RemoteRoot`, use the `render` function exported by this library, passing in the remote root and your root React component:
+The main entrypoint for this package, `@remote-ui/react`, provides the custom React renderer that outputs instructions to a [`@remote-ui/core` `RemoteRoot`](../core#remoteroot) object. This lets you use the remote-ui system for communicating patch updates to host components over a bridge, but have React help manage your stateful application logic.
+
+To run a React app against a `RemoteRoot`, use the `createRoot` function exported by this library. This API has a similar signature to [the equivalent `react-dom` API](https://reactjs.org/docs/react-dom-client.html#createroot), where you first pass the the remote root you are targeting, and then render your React component into it:
 
 ```tsx
 // For convenience, this library re-exports several values from @remote-ui/core, like createRemoteRoot
-import {render, createRemoteRoot} from '@remote-ui/react';
+import {createRoot, createRemoteRoot} from '@remote-ui/react';
 
 // a remote component — see implementation below for getting strong
 // typing on the available props.
@@ -43,16 +71,16 @@ function App() {
   return <Button onClick={() => console.log('clicked!')}>Click me!</Button>;
 }
 
-render(<App />, remoteRoot);
+createRoot(remoteRoot).render(<App />);
 ```
 
 As you add, remove, and update host components in your React tree, this renderer will output those operations to the `RemoteRoot`. Since remote components are just a combination of a name and allowed properties, they map exactly to React components, which behave the same way.
 
-Updating the the root React element for a given remote root can be done by calling the `render()` function again. For example, the root React element can be updated in an effect to receive updated props when they change:
+Updating the the root React element for a given remote root can be done by calling the `render()` method again. For example, the root React element can be updated in an effect to receive updated props when they change:
 
 ```tsx
 import {useEffect, useMemo} from 'react';
-import {render, createRemoteRoot} from '@remote-ui/react';
+import {createRoot, createRemoteRoot} from '@remote-ui/react';
 
 // A remote component
 const Button = createRemoteReactComponent<'Button', {onPress(): void}>(
@@ -64,23 +92,24 @@ function App({count, onPress}: {count: number; onPress(): void}) {
 }
 
 function MyRemoteRenderer() {
-  const remoteRoot = useMemo(() => {
+  const root = useMemo(() => {
     // Assuming we get a function that will communicate with the host...
     const channel = () => {};
 
-    return createRemoteRoot(channel, {
+    const remoteRoot = createRemoteRoot(channel, {
       components: [Button],
     });
+
+    return createRoot(remoteRoot);
   }, []);
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     // We update the root component by calling `render` whenever `count` changes
-    render(
+    root.render(
       <App count={count} onPress={() => setCount((count) => count + 1)} />,
-      remoteRoot,
     );
-  }, [count, remoteRoot]);
+  }, [count, root]);
 }
 ```
 

packages/react/package.json

@@ -31,16 +31,28 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@types/react-dom": "^18.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-reconciler": "^0.29.0"
   },
   "dependencies": {
     "@remote-ui/async-subscription": "^2.1.13",
     "@remote-ui/core": "^2.2.0",
     "@remote-ui/rpc": "^1.4.0",
-    "@types/react": ">=17.0.0 <18.0.0",
-    "@types/react-reconciler": "^0.26.0",
-    "react-reconciler": ">=0.26.0 <0.27.0"
+    "@types/react": ">=17.0.0 <19.0.0",
+    "@types/react-reconciler": ">=0.26.0 <0.30.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0 <19.0.0",
+    "react-reconciler": ">=0.26.0 <0.30.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-reconciler": {
+      "optional": true
+    }
   }
 }

packages/react/src/index.ts

@@ -1,7 +1,7 @@
-export {retain, release} from '@remote-ui/rpc';
 export {createRemoteRoot} from '@remote-ui/core';
 export type {RemoteRoot, RemoteReceiver} from '@remote-ui/core';
-export {render} from './render';
+export {render, createRoot} from './render';
+export type {Root} from './render';
 export {createRemoteReactComponent} from './components';
 export {useRemoteSubscription} from './hooks';
 export type {

packages/react/src/reconciler.ts

@@ -1,4 +1,5 @@
-import reactReconciler, {Reconciler as ReactReconciler} from 'react-reconciler';
+import reactReconciler from 'react-reconciler';
+import type {Reconciler as ReactReconciler} from 'react-reconciler';
 import type {
   RemoteRoot,
   RemoteText,
@@ -43,15 +44,26 @@ export const createReconciler = (options?: {primary?: boolean}) =>
     TimeoutHandle,
     NoTimeout
   >({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - Compat for React <= 17.x
     now: Date.now,
 
     // Timeout
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
     noTimeout: false,
-    // @see https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMHostConfig.js#L408
-    queueMicrotask: (callback) =>
-      Promise.resolve(null).then(callback).catch(handleErrorInNextTick),
+
+    // Microtask scheduling
+    // @see https://github.com/facebook/react/blob/2c8a1452b82b9ec5ebfa3f370b31fda19610ae92/packages/react-dom/src/client/ReactDOMHostConfig.js#L391-L401
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - types in `@types/react-reconciler` are outdated
+    supportsMicrotasks: true,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - types in `@types/react-reconciler` are outdated
+    scheduleMicrotask,
+
+    // Compat for React <= 17.x
+    queueMicrotask: scheduleMicrotask,
 
     isPrimaryRenderer: options?.primary ?? true,
     supportsMutation: true,
@@ -171,6 +183,12 @@ export const createReconciler = (options?: {primary?: boolean}) =>
     preparePortalMount() {},
   });
 
+function scheduleMicrotask(callback: () => void) {
+  return typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : Promise.resolve(null).then(callback).catch(handleErrorInNextTick);
+}
+
 function handleErrorInNextTick(error: Error) {
   setTimeout(() => {
     throw error;

packages/react/src/render.tsx

@@ -1,4 +1,5 @@
-import type {ReactElement} from 'react';
+import {version} from 'react';
+import type {ReactNode} from 'react';
 import type {RemoteRoot} from '@remote-ui/core';
 import type {RootTag} from 'react-reconciler';
 
@@ -15,13 +16,34 @@ const cache = new WeakMap<
   }
 >();
 
-// @see https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-reconciler/src/ReactRootTags.js
-// I think we are a legacy root?
+// @see https://github.com/facebook/react/blob/fea6f8da6ab669469f2fa3f18bd3a831f00ab284/packages/react-reconciler/src/ReactRootTags.js#L12
+// We don't support concurrent rendering for now.
 const LEGACY_ROOT: RootTag = 0;
 const defaultReconciler = createReconciler();
 
+export interface Root {
+  render(children: ReactNode): void;
+  unmount(): void;
+}
+
+export function createRoot(root: RemoteRoot<any, any>): Root {
+  return {
+    render(children) {
+      render(children, root);
+    },
+    unmount() {
+      if (!cache.has(root)) return;
+      render(null, root);
+      cache.delete(root);
+    },
+  };
+}
+
+/**
+ * @deprecated Use `createRoot` for a React 18-style rendering API.
+ */
 export function render(
-  element: ReactElement,
+  element: ReactNode,
   root: RemoteRoot<any, any>,
   callback?: () => void,
   reconciler: Reconciler = defaultReconciler,
@@ -30,9 +52,26 @@ export function render(
   let cached = cache.get(root);
 
   if (!cached) {
+    const major = Number(version.split('.')?.[0] || 18);
+
     // Since we haven't created a container for this root yet, create a new one
     const value = {
-      container: reconciler.createContainer(root, LEGACY_ROOT, false, null),
+      container:
+        major >= 18
+          ? reconciler.createContainer(
+              root,
+              LEGACY_ROOT,
+              null,
+              false,
+              null,
+              // Might not be necessary
+              'r-ui',
+              () => null,
+              null,
+            )
+          : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore - this is to support React 17
+            reconciler.createContainer(root, LEGACY_ROOT, false, null),
       // We also cache the render context to avoid re-creating it on subsequent render calls
       renderContext: {root, reconciler},
     };
@@ -47,9 +86,11 @@ export function render(
   // callback is cast here because the typings do not mark that argument
   // as optional, even though it is.
   reconciler.updateContainer(
-    <RenderContext.Provider value={renderContext}>
-      {element}
-    </RenderContext.Provider>,
+    element && (
+      <RenderContext.Provider value={renderContext}>
+        {element}
+      </RenderContext.Provider>
+    ),
     container,
     null,
     callback as any,