Make ART Concurrent if Legacy Mode is disabled

packages/react-art/src/ReactART.js

@@ -7,15 +7,17 @@
 
 import * as React from 'react';
 import ReactVersion from 'shared/ReactVersion';
-import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {
   createContainer,
   updateContainer,
   injectIntoDevTools,
+  flushSync,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
 import FastNoSideEffects from 'art/modes/fast-noSideEffects';
+import {disableLegacyMode} from 'shared/ReactFeatureFlags';
 
 import {TYPES, childrenAsString} from './ReactARTInternals';
 
@@ -68,13 +70,17 @@ class Surface extends React.Component {
 
     this._mountNode = createContainer(
       this._surface,
-      LegacyRoot,
+      disableLegacyMode ? ConcurrentRoot : LegacyRoot,
       null,
       false,
       false,
       '',
     );
-    updateContainer(this.props.children, this._mountNode, this);
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    flushSync(() => {
+      updateContainer(this.props.children, this._mountNode, this);
+    });
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -84,15 +90,23 @@ class Surface extends React.Component {
       this._surface.resize(+props.width, +props.height);
     }
 
-    updateContainer(this.props.children, this._mountNode, this);
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    flushSync(() => {
+      updateContainer(this.props.children, this._mountNode, this);
+    });
 
     if (this._surface.render) {
       this._surface.render();
     }
   }
 
   componentWillUnmount() {
-    updateContainer(null, this._mountNode, this);
+    // We synchronously flush updates coming from above so that they commit together
+    // and so that refs resolve before the parent life cycles.
+    flushSync(() => {
+      updateContainer(null, this._mountNode, this);
+    });
   }
 
   render() {

packages/react-art/src/__tests__/ReactART-test.js

@@ -11,7 +11,8 @@
 
 'use strict';
 
-import * as React from 'react';
+const React = require('react');
+const Scheduler = require('scheduler');
 
 import * as ReactART from 'react-art';
 import ARTSVGMode from 'art/modes/svg';
@@ -22,22 +23,28 @@ import Circle from 'react-art/Circle';
 import Rectangle from 'react-art/Rectangle';
 import Wedge from 'react-art/Wedge';
 
+const {act, waitFor} = require('internal-test-utils');
+
 // Isolate DOM renderer.
 jest.resetModules();
+// share isomorphic
+jest.mock('scheduler', () => Scheduler);
+jest.mock('react', () => React);
+const ReactDOM = require('react-dom');
 const ReactDOMClient = require('react-dom/client');
-let act = require('internal-test-utils').act;
 
 // Isolate the noop renderer
 jest.resetModules();
+// share isomorphic
+jest.mock('scheduler', () => Scheduler);
+jest.mock('react', () => React);
 const ReactNoop = require('react-noop-renderer');
-const Scheduler = require('scheduler');
 
 let Group;
 let Shape;
 let Surface;
 let TestComponent;
 
-let waitFor;
 let groupRef;
 
 const Missing = {};
@@ -68,6 +75,11 @@ describe('ReactART', () => {
   let container;
 
   beforeEach(() => {
+    jest.resetModules();
+    // share isomorphic
+    jest.mock('scheduler', () => Scheduler);
+    jest.mock('react', () => React);
+
     container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -77,8 +89,6 @@ describe('ReactART', () => {
     Shape = ReactART.Shape;
     Surface = ReactART.Surface;
 
-    ({waitFor} = require('internal-test-utils'));
-
     groupRef = React.createRef();
     TestComponent = class extends React.Component {
       group = groupRef;
@@ -409,8 +419,6 @@ describe('ReactART', () => {
       );
     }
 
-    // Using test renderer instead of the DOM renderer here because async
-    // testing APIs for the DOM renderer don't exist.
     ReactNoop.render(
       <CurrentRendererContext.Provider value="Test">
         <Yield value="A" />
@@ -423,7 +431,9 @@ describe('ReactART', () => {
     await waitFor(['A']);
 
     const root = ReactDOMClient.createRoot(container);
-    await act(() => {
+    // We use flush sync here because we expect this to render in between
+    // while the concurrent render is yieldy where as act would flush both.
+    ReactDOM.flushSync(() => {
       root.render(
         <Surface>
           <LogCurrentRenderer />
@@ -434,8 +444,6 @@ describe('ReactART', () => {
       );
     });
 
-    expect(ops).toEqual([null, 'ART']);
-
     ops = [];
     await waitFor(['B', 'C']);
 
@@ -447,9 +455,11 @@ describe('ReactARTComponents', () => {
   let ReactTestRenderer;
   beforeEach(() => {
     jest.resetModules();
+    // share isomorphic
+    jest.mock('scheduler', () => Scheduler);
+    jest.mock('react', () => React);
     // Isolate test renderer.
     ReactTestRenderer = require('react-test-renderer');
-    act = require('internal-test-utils').act;
   });
 
   it('should generate a <Shape> with props for drawing the Circle', async () => {