fix(react-renderer): implement React 18 style renderer (#302)

sabertazimi · Mar 27, 2022 · 4b3f8a6 · 4b3f8a6
1 parent d50c68d
commit 4b3f8a6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/react-renderer/src/index.tsx b/packages/react-renderer/src/index.tsx
@@ -4,11 +4,10 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-Renderer.render(
+Renderer.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/packages/react-renderer/src/renderer/index.ts b/packages/react-renderer/src/renderer/index.ts
@@ -1,16 +1,20 @@
 import type { ReactElement } from 'react';
 import Reconciler from './reconciler';
-import type { Container } from './types';
+import type { Container, OpaqueRoot } from './types';
 
 const Renderer = {
-  render: (
-    element: ReactElement,
+  createRoot: (
     container: Container | null,
     callback?: Function
-  ) => {
+  ): OpaqueRoot => {
     if (container) {
       const root = Reconciler.createContainer(container, 0, false, null);
-      Reconciler.updateContainer(element, root, null);
+
+      root.render = function (element: ReactElement) {
+        Reconciler.updateContainer(element, this, null);
+      };
+
+      return root;
     }
   },
 };

diff --git a/packages/react-renderer/src/renderer/types.ts b/packages/react-renderer/src/renderer/types.ts
@@ -1,5 +1,9 @@
 import type { HTMLProps } from 'react';
-import type { HostConfig as _HostConfig, OpaqueHandle } from 'react-reconciler';
+import type {
+  HostConfig as _HostConfig,
+  OpaqueHandle,
+  OpaqueRoot,
+} from 'react-reconciler';
 
 type Type = string;
 type Props = HTMLProps<HTMLElement>;
@@ -50,6 +54,7 @@ export type {
   _ChildSet,
   TimeoutHandle,
   NoTimeout,
-  OpaqueHandle,
   HostConfig,
+  OpaqueHandle,
+  OpaqueRoot,
 };