diff --git a/packages/react-renderer/src/index.tsx b/packages/react-renderer/src/index.tsx index 00fbb56b..7c320825 100644 --- 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( - , - document.getElementById('root') + ); // 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 index c3ecc0c9..d5b0f85b 100644 --- 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 index 082fdb80..b7b16a62 100644 --- 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; @@ -50,6 +54,7 @@ export type { _ChildSet, TimeoutHandle, NoTimeout, - OpaqueHandle, HostConfig, + OpaqueHandle, + OpaqueRoot, };