@ringozz/react-godot 1.0.0-0 → 1.0.0-10

package/README.md

@@ -1,94 +1,308 @@
-# @ringozz/react-godot
-
-React bindings for the Godot Engine, built on [`@ringozz/godot`](../godot/README.md). A custom `react-reconciler` host config lets you build Godot scenes declaratively with JSX.
-
-## Installation
-
-```sh
-bun add @ringozz/react-godot @ringozz/godot react
-```
-
-`@ringozz/godot` and `react` (`^19.2`) are peer dependencies. Configure the JSX runtime in `tsconfig.json`:
-
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "@ringozz/react-godot"
-  }
-}
-```
-
-## API
-
-```ts
-import { createRoot, createPortal, useSignal, useMutableCallback, type ComponentProps } from '@ringozz/react-godot';
-```
-
-- **`createRoot(parent: Node)`** — mounts a React tree into a Godot `Node` (e.g. `SceneTree.root`). Returns `{ render, unmount }`; `render` resolves when the commit completes. StrictMode is enabled only when `NODE_ENV === 'development'`.
-- **`createPortal(children, container)`** — renders into another Godot `Node` (a `CanvasLayer` for overlays, a `SubViewport`, a dedicated parent node). The container must be a `Node` — portals cannot target `Resource`s. Unmounting frees the portal's children.
-- **`useSignal<T extends (...args: any[]) => any>(signal, handler)`** — connects a Godot `Signal` for the component's lifetime, disconnecting on unmount. Uses a mutable callback ref, so the handler always sees fresh state.
-- **`useMutableCallback<T>(fn)`** — returns a `RefObject<T>` whose `.current` always holds the latest `fn`.
-- **`ComponentProps<typeof ClassName>`** — full prop validation for an element (Godot properties + `children`/`ref` + `object`/`attach`).
-
-## Example
-
-```tsx
-import { Engine } from '@ringozz/godot/Engine';
-import { SceneTree } from '@ringozz/godot/SceneTree';
-import { Label } from '@ringozz/godot/Label';
-import { createRoot, useSignal } from '@ringozz/react-godot';
-import { useRef } from 'react';
-
-const tree = Engine.getMainLoop() as SceneTree;
-const { render } = createRoot(tree.root);
-
-function Hud() {
-  const label = useRef<Label>(null);
-  useSignal(tree.processFrame, () => {
-    if (label.current) label.current.text = String(Math.floor(performance.now() / 1000));
-  });
-  return <Label ref={label} position={[16, 16]} text="ticking" />;
-}
-
-render(<Hud />);
-```
-
-### Render a component
-
-```tsx
-function App() {
-  return (
-    <WorldEnvironment>
-      <Environment attach="environment" backgroundColor={[0.05, 0.1, 0.25]} />
-    </WorldEnvironment>
-  );
-}
-```
-
-## How elements map to Godot
-
-- Each element instantiates its class via `ClassDB.instantiate(type)` (or uses an existing instance passed through the `object` prop, which bypasses instantiation and `.reference()`s `RefCounted` objects).
-- **`attach="prop"`** sets the element as a named property of its parent instead of adding it as a child — use it for resources. A physics body's shape goes on the **shape resource element**, never on the `CollisionShape3D` node:
-
-  ```tsx
-  <StaticBody3D>
-    <CollisionShape3D>
-      <BoxShape3D attach="shape" size={[1, 1, 1]} />
-    </CollisionShape3D>
-    <MeshInstance3D>
-      <BoxMesh attach="mesh" />
-      <StandardMaterial3D attach="materialOverride" />
-    </MeshInstance3D>
-  </StaticBody3D>
-  ```
-
-  The `attach` value may not change across updates.
-- **`object` prop**: pass an existing Godot instance (nodes or resources) to render rather than create one.
-- **Text**: standalone text nodes are unsupported. A single string child is mapped to the node's `text` property — fine for `Label`/`Label3D` — but arrays/mixed string children throw; use a `text` prop instead.
-
-## Notes
-
-- `Node` children are added/moved with `addChild`/`moveChild`/`removeChild`; unmounting a subtree calls `free()` on each deleted instance.
-- Portals and other non-React children of a root container are never touched by the reconciler.
-- See the demo in the repo (`dev/DemoApp.tsx`) for physics, camera controls, and a portal HUD, and `AGENTS.md` for reconciler internals.
+# `@ringozz/react-godot`
+
+Declarative, component-driven **Godot 4** scene graph management in React. Built for high-performance applications using `@ringozz/godot`.
+
+## Overview
+
+`@ringozz/react-godot` brings a **React Three Fiber (R3F)**-like developer experience to Godot. It provides a custom React reconciler that renders React components directly into Godot's live engine scene tree (`SceneTree`).
+
+If you are familiar with React Three Fiber, the core paradigms will feel instantly recognizable:
+- **Declarative Nodes**: Godot 3D/2D nodes (e.g., `<RigidBody3D>`, `<Camera3D>`, `<DirectionalLight3D>`) map directly to JSX components.
+- **Resource Attachment**: Use the `attach` prop to assign nested Godot resources (materials, shapes, meshes, environments) directly to parent properties.
+- **Reactive Engine Loop**: Use hooks like `useSignal` to hook into Godot signals (`processFrame`, `windowInput`) without triggering React state re-renders.
+
+## Installation & Setup
+
+### 1. Dependencies
+
+```bash
+npm install @ringozz/react-godot react
+```
+
+### 2. TypeScript Configuration (`tsconfig.json`)
+
+To enable custom JSX element resolution for Godot nodes, configure `jsxImportSource` and module settings in `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2025",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@ringozz/react-godot",
+    "rewriteRelativeImportExtensions": true,
+    "verbatimModuleSyntax": true
+  }
+}
+```
+
+## Application Entry & Portal Rendering
+
+### 1. Mounting with `createRoot(parent: Node)`
+`createRoot` is the primary entry point for mounting a React component tree into a Godot target `Node` (typically `SceneTree.root`).
+
+```tsx
+import { Engine } from '@ringozz/godot/Engine';
+import { SceneTree } from '@ringozz/godot/SceneTree';
+import { createRoot } from '@ringozz/react-godot';
+import { App } from './App';
+
+const tree = Engine.getMainLoop() as SceneTree;
+const { render } = createRoot(tree.root);
+
+render(<App />);
+```
+
+- Returns `{ render, unmount }`.
+- Enables React `StrictMode` automatically in development (`NODE_ENV === 'development'`).
+
+### 2. Render Portals with `createPortal(children, container)`
+`createPortal` allows rendering a React sub-tree into a different Godot `Node` in the hierarchy—such as a `CanvasLayer` for 2D UI overlays, a `SubViewport`, or an isolated container node.
+
+```tsx
+import { createPortal } from '@ringozz/react-godot';
+import { Label } from '@ringozz/godot/Label';
+
+function Overlay({ overlayNode }: { overlayNode: Node }) {
+  return createPortal(
+    <Label text="HUD Overlay" position={[20, 20]} />,
+    overlayNode
+  );
+}
+```
+
+- **Container Constraint**: The target `container` must be a Godot `Node` (it cannot target `Resource` instances).
+- **Cleanup**: Unmounting the portal safely disposes of and frees its child Godot nodes.
+
+## Core Concepts & Patterns
+
+### 1. Existing Objects with `object` Prop
+
+If you already have a pre-existing Godot `Node`, `Resource`, or `PackedScene` instance (e.g. instantiated from C++ or loaded from disk), pass it via the `object` prop to adopt it into the React component tree instead of letting the reconciler instantiate a new object:
+
+```tsx
+<Node object={myExistingGodotNode}>
+  {/* Children attached to existing node */}
+</Node>
+```
+
+- **`object` is immutable on a mounted instance.** It selects the host instance once, at creation. A re-render that changes `object` on an existing element throws (`Cannot change the \`object\` of a mounted instance`) because React cannot swap a fiber's Godot node — remount with a new `key` instead.
+- **A `PackedScene` `object` is instantiated once per host mount** — each element gets a fresh node tree; the result is a plain `Node` (not `.reference()`'d) freed on unmount. The same `PackedScene` can feed multiple elements; give same-type siblings stable `key`s.
+- **Dynamic same-type sibling lists need stable `key`s.** Godot host nodes are identity, not content: React reconciles keyless siblings by position, so deleting the *first* of two same-type siblings reuses its Godot node for the survivor. A plain state re-render does this too, and Bun's web dev server makes it especially likely — its React Fast Refresh re-renders the edited component **in place** (no app re-run), reusing the same fibers and Godot nodes, so a deleted sibling's node can survive on its neighbor and the neighbor's node is freed. Add `key="..."` to each dynamically toggled same-type sibling to keep nodes pinned to the right elements.
+
+### 2. Resource Nesting with `attach`
+
+In Godot, nodes often hold references to `Resource` objects (such as shapes, meshes, materials, or environments). Use the `attach` prop to automatically assign a child resource to a specific property on its parent:
+
+```tsx
+/* Attaching a shape to CollisionShape3D */
+<CollisionShape3D>
+  <BoxShape3D attach="shape" size={[1, 1, 1]} />
+</CollisionShape3D>
+
+/* Attaching a material override to MeshInstance3D */
+<MeshInstance3D>
+  <BoxMesh attach="mesh" />
+  <StandardMaterial3D attach="materialOverride" albedoColor={[1, 0, 0]} />
+</MeshInstance3D>
+
+/* Attaching physics material to RigidBody3D */
+<RigidBody3D>
+  <PhysicsMaterial attach="physicsMaterialOverride" bounce={0.8} />
+</RigidBody3D>
+
+/* Attaching environment to WorldEnvironment */
+<WorldEnvironment>
+  <Environment attach="environment" backgroundColor={[0.1, 0.1, 0.2]} />
+</WorldEnvironment>
+```
+
+Note for physics bodies: `attach="shape"` goes on the shape **resource** element (e.g. `<BoxShape3D attach="shape" />`), never on the `CollisionShape3D` node itself — `Node.add_child` requires a `Node`, and shapes are `Resource`s, so an `attach` on `CollisionShape3D` adds the shape as a child node and fails. Likewise, mesh children of a physics body must be wrapped in a `MeshInstance3D` (a `RigidBody3D`/`StaticBody3D` has no `mesh`/`materialOverride` props to attach to).
+
+### 3. Properties & Helper Types
+
+Props map directly to Godot node setters and properties. Helper arrays are automatically cast to Godot types:
+
+- **Vectors**: `position={[0, 1, 0]}`, `scale={[2, 2, 2]}`
+- **Colors**: `albedoColor={[1, 0.2, 0.2]}` or `Color` objects
+- **Sub-properties / Dash props**: Set individual vector/color components directly using dash syntax:
+  ```tsx
+  <BoxMesh attach="mesh" size-x={0.5} size-y={1.0} size-z={0.5} />
+  ```
+
+**Text content**: text nodes are unsupported, but string/number children — and arrays of all-string/all-number children — are flattened into the node's `text` prop, so `<Label>Hello</Label>` works. Mixed children (containing elements) throw; use an explicit `text` prop instead, and never pass string children to a node without a `text` prop.
+
+### 4. Engine Signals & Event Subscription (`useSignal`)
+
+Subscribe to Godot engine signals cleanly with `useSignal`.
+
+```tsx
+import { Engine } from '@ringozz/godot';
+import { SceneTree } from '@ringozz/godot/SceneTree';
+import { useSignal } from '@ringozz/react-godot';
+
+const tree = Engine.getMainLoop() as SceneTree;
+const root = tree.root;
+
+// Subscribe to frame updates (process loop)
+useSignal(tree.processFrame, () => {
+  // Update animations, camera matrix, physics targets, etc.
+});
+
+// Subscribe to window input events
+useSignal(root.windowInput, (event) => {
+  if (event instanceof InputEventMouseMotion) {
+    // Handle mouse motion
+  }
+});
+```
+
+Signal **JSX props** (`pressed`, `toggled`, `valueChanged`, `textSubmitted`, ...) are typed as the signal's callback — pass a plain function, no cast needed:
+
+```tsx
+<Button text="Play" pressed={() => start()} />
+<CheckButton text="Debug" toggled={(on) => setDebug(on)} />
+<HSlider value={round} valueChanged={(v) => setRound(v)} />
+```
+
+`ComponentProps` only exposes writable members: read-only props (e.g. `Node.multiplayer`) and methods are not settable props.
+
+## Full Example
+
+Below is a complete interactive 3D physics scene with custom camera controls and physics bodies:
+
+```tsx
+import { Color, Key, MouseButton, Vector3, Engine } from '@ringozz/godot';
+import { BoxMesh } from '@ringozz/godot/BoxMesh';
+import { BoxShape3D } from '@ringozz/godot/BoxShape3D';
+import { Camera3D } from '@ringozz/godot/Camera3D';
+import { CollisionShape3D } from '@ringozz/godot/CollisionShape3D';
+import { DirectionalLight3D } from '@ringozz/godot/DirectionalLight3D';
+import { BGMode, Environment, ToneMapper } from '@ringozz/godot/Environment';
+import { InputEventMouseButton } from '@ringozz/godot/InputEventMouseButton';
+import { InputEventMouseMotion } from '@ringozz/godot/InputEventMouseMotion';
+import { MeshInstance3D } from '@ringozz/godot/MeshInstance3D';
+import { PhysicsMaterial } from '@ringozz/godot/PhysicsMaterial';
+import { RigidBody3D } from '@ringozz/godot/RigidBody3D';
+import { SceneTree } from '@ringozz/godot/SceneTree';
+import { SphereMesh } from '@ringozz/godot/SphereMesh';
+import { SphereShape3D } from '@ringozz/godot/SphereShape3D';
+import { StandardMaterial3D } from '@ringozz/godot/StandardMaterial3D';
+import { StaticBody3D } from '@ringozz/godot/StaticBody3D';
+import { WorldEnvironment } from '@ringozz/godot/WorldEnvironment';
+import { useSignal, type ComponentProps } from '@ringozz/react-godot';
+import { useRef, type ReactElement } from 'react';
+
+const tree = Engine.getMainLoop() as SceneTree;
+const root = tree.root;
+
+function PhysBody({ color, shape, children, ...rest }: {
+  color: Color | number[];
+  shape: ReactElement;
+} & ComponentProps<typeof RigidBody3D>) {
+  return (
+    <RigidBody3D {...rest}>
+      <MeshInstance3D>
+        {children}
+        <StandardMaterial3D attach="materialOverride" albedoColor={color} />
+      </MeshInstance3D>
+      <CollisionShape3D>{shape}</CollisionShape3D>
+    </RigidBody3D>
+  );
+}
+
+export function App() {
+  const cameraRef = useRef<Camera3D>(null);
+  const isDragging = useRef(false);
+  const yaw = useRef(0.7);
+  const pitch = useRef(0.3);
+  const zoom = useRef(7);
+
+  useSignal(root.windowInput, (event) => {
+    if (event instanceof InputEventMouseMotion && isDragging.current) {
+      yaw.current -= event.relative.x * 0.005;
+      pitch.current = Math.max(-1.4, Math.min(1.4, pitch.current + event.relative.y * 0.005));
+    } else if (event instanceof InputEventMouseButton) {
+      if (event.buttonIndex === MouseButton.MOUSE_BUTTON_LEFT) {
+        isDragging.current = event.pressed;
+      }
+    }
+    event.free();
+  });
+
+  useSignal(tree.processFrame, () => {
+    const camera = cameraRef.current;
+    if (!camera) return;
+
+    const cx = zoom.current * Math.cos(pitch.current) * Math.sin(yaw.current);
+    const cy = zoom.current * Math.sin(pitch.current) + 1;
+    const cz = zoom.current * Math.cos(pitch.current) * Math.cos(yaw.current);
+    camera.position = new Vector3(cx, cy, cz);
+    camera.lookAt(new Vector3(0, 1, 0), new Vector3(0, 1, 0));
+  });
+
+  return (
+    <>
+      <WorldEnvironment>
+        <Environment attach="environment" tonemapMode={ToneMapper.TONE_MAPPER_AGX} backgroundMode={BGMode.BG_COLOR} backgroundColor={[0.05, 0.1, 0.25]} />
+      </WorldEnvironment>
+      <DirectionalLight3D name="Sun" rotation={[-0.8, 0.5, 0]} />
+      <Camera3D name="Camera" ref={cameraRef} />
+
+      {/* Physics Sphere */}
+      <PhysBody name="BouncySphere" position={[0, 4, 0]} color={[0.2, 1, 0.2]}
+        shape={<SphereShape3D attach="shape" radius={0.5} />}>
+        <SphereMesh attach="mesh" radius={0.5} height={1} />
+        <PhysicsMaterial attach="physicsMaterialOverride" bounce={0.8} />
+      </PhysBody>
+
+      {/* Ground Plane */}
+      <StaticBody3D name="Ground">
+        <CollisionShape3D>
+          <BoxShape3D attach="shape" size={[10, 0.1, 10]} />
+        </CollisionShape3D>
+        <MeshInstance3D>
+          <BoxMesh attach="mesh" size-x={10} size-y={0.1} size-z={10} />
+          <StandardMaterial3D attach="materialOverride" albedoColor={[0.2, 0.2, 0.25]} />
+        </MeshInstance3D>
+      </StaticBody3D>
+    </>
+  );
+}
+```
+
+## API Summary
+
+| Export | Type | Description |
+| :--- | :--- | :--- |
+| `createRoot(parent)` | Function | Mounts a React component tree into a target Godot `Node` (e.g. `tree.root`). Returns `{ render, unmount }`. |
+| `createPortal(children, container)` | Function | Renders children into a target Godot `Node` (e.g. `CanvasLayer` or `SubViewport`). |
+| `useSignal(signal, callback)` | Hook | Connects a callback to a Godot object signal (e.g. `tree.processFrame`, `node.treeEntered`). Disconnects on unmount. |
+| `useMutableCallback(fn)` | Hook | Returns a `RefObject` whose `.current` always points to the latest callback implementation. |
+| `useTween(create, deps)` | Hook | Reactive tween-as-prop-value. Returns `[spring, tweenRef]` — spread `spring` onto a node; `tweenRef.current` is the live native `Tween`. |
+| `ComponentProps<T>` | Type | Utility type to infer valid React JSX props for any Godot node class `T`. |
+
+## Animating props with `useTween`
+
+`useTween` animates a node's properties declaratively. You describe the target values once per `to` key; spreading the returned `spring` onto a node binds the tween to it. Re-rendering with the same `deps` keeps the same tween (nothing restarts); changing `deps` creates a new `Tween` and animates from the current values.
+
+```tsx
+const [spring, tweenRef] = useTween(() => ({
+  from: { position: [0, 0, 0] },
+  to:   { position: [0, 2, 0], globalRotation: [0, 90, 0] },
+  config: { duration: 0.6, transition: TransitionType.TRANS_QUAD, ease: EaseType.EASE_IN_OUT },
+  delay: 0, loops: 1, immediate: false,
+  onFinished: () => {},
+}), [x, z]);
+
+return <Node3D {...spring} />;
+```
+
+- **`spring`** holds one function per `to` key (spread them all onto the node; each contributes its own prop's tweener to the shared `Tween`). Array values are converted to the property's value type.
+- **`tweenRef.current`** is the **live native Godot `Tween`**, created when the node mounts (null before that): `tweenRef.current?.kill()`, `?.pause()`, `?.play()`, `?.setSpeedScale(n)`, `?.isRunning()`, `?.finished`…
+- **`config`** maps to the Godot Tween API: `duration` (seconds), `transition`/`ease` (`TransitionType`/`EaseType` — the tween's defaults), `easing` (a `[0,1]→[0,1]` function → `setCustomInterpolator`), `speedScale`.
+- **`onStart`** fires when the tween is created/bound (on mount or when `deps` change), before it starts stepping.
+- **`onFinished`** fires on natural completion only (Godot's `finished` signal); `kill()`/unmount don't fire it, so no stale callbacks.
+- **Unwrapping**: replacing a springed prop with a plain value (e.g. dropping `{...spring}` for `position={[9, 0, 0]}`) does not stop the running tween — it keeps animating to its target and the tween's value wins over the plain value. Stop it with `tweenRef.current?.kill()`.
+
+

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@ringozz/react-godot",
   "author": "Vladimir Davidovich",
-  "version": "1.0.0-0",
+  "version": "1.0.0-10",
   "description": "A React renderer for Godot Engine via @ringozz/godot",
+  "keywords": [
+    "react",
+    "godot"
+  ],
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -16,14 +20,12 @@
     "*.md"
   ],
   "dependencies": {
+    "@ringozz/godot": "^4.7.1-13",
+    "@types/react-reconciler": "^0.33.0",
     "react-reconciler": "^0.33.0"
   },
   "peerDependencies": {
-    "@ringozz/godot": "^4.7.1-0",
-    "react": "^19.2.0"
-  },
-  "devDependencies": {
     "@types/react": "^19.2.0",
-    "@types/react-reconciler": "^0.33.0"
+    "react": "^19.2.0"
   }
 }

package/src/index.ts

@@ -1,58 +1,58 @@
-/**********************************************************************
- Copyright (c) Vladimir Davidovich. All rights reserved.
-***********************************************************************/
-
-import Reconciler from 'react-reconciler';
-import Constants from 'react-reconciler/constants.js';
-import type { Node } from '@ringozz/godot/Node';
-import * as FiberConfig from './react-fiber.ts';
-export * from './react-hooks.ts';
-export type * from './react-types.ts';
-
-const reconciler = Reconciler(FiberConfig);
-reconciler.injectIntoDevTools(undefined as never);
-
-export function createRoot(parent: Node) {
-  const isStrictMode = process.env.NODE_ENV === 'development';
-  const concurrentUpdatesByDefaultOverride = false;
-  const identifierPrefix = '';
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  const onUncaughtError = (reconciler as any).defaultOnUncaughtError;
-  const onCaughtError = (reconciler as any).defaultOnCaughtError;
-  const onRecoverableError = (reconciler as any).defaultOnRecoverableError;
-  const onDefaultTransitionIndicator = () => { };
-  const root = reconciler.createContainer(
-    parent,
-    Constants.ConcurrentRoot,
-    null,
-    isStrictMode,
-    concurrentUpdatesByDefaultOverride,
-    identifierPrefix,
-    onUncaughtError,
-    onCaughtError,
-    onRecoverableError,
-    onDefaultTransitionIndicator
-  );
-  return {
-    render: (component: React.ReactNode) => new Promise<void>((resolve, reject) => {
-      try {
-        reconciler.updateContainer(component, root, null, resolve);
-      } catch (e) {
-        reject(e);
-      }
-    }),
-    unmount: () => {
-      try {
-        reconciler.updateContainerSync(null, root, null);
-        reconciler.flushSyncWork();
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-  };
-}
-
-export function createPortal(children: React.ReactNode, container: Node, key?: string | null): React.ReactPortal {
-  return reconciler.createPortal(children, container, null, key) as unknown as React.ReactPortal;
-}
+/**********************************************************************
+ Copyright (c) Vladimir Davidovich. All rights reserved.
+***********************************************************************/
+
+import Reconciler from 'react-reconciler';
+import Constants from 'react-reconciler/constants.js';
+import type { Node } from '@ringozz/godot/Node';
+import * as FiberConfig from './react-fiber.ts';
+export * from './react-hooks.ts';
+export type * from './react-types.ts';
+
+const reconciler = Reconciler(FiberConfig);
+reconciler.injectIntoDevTools(undefined as never);
+
+export function createRoot(parent: Node) {
+  const isStrictMode = process.env.NODE_ENV === 'development';
+  const concurrentUpdatesByDefaultOverride = false;
+  const identifierPrefix = '';
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const onUncaughtError = (reconciler as any).defaultOnUncaughtError;
+  const onCaughtError = (reconciler as any).defaultOnCaughtError;
+  const onRecoverableError = (reconciler as any).defaultOnRecoverableError;
+  const onDefaultTransitionIndicator = () => { };
+  const root = reconciler.createContainer(
+    parent,
+    Constants.ConcurrentRoot,
+    null,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
+    onRecoverableError,
+    onDefaultTransitionIndicator
+  );
+  return {
+    render: (component: React.ReactNode) => new Promise<void>((resolve, reject) => {
+      try {
+        reconciler.updateContainer(component, root, null, resolve);
+      } catch (e) {
+        reject(e);
+      }
+    }),
+    unmount: () => {
+      try {
+        reconciler.updateContainerSync(null, root, null);
+        reconciler.flushSyncWork();
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  };
+}
+
+export function createPortal(children: React.ReactNode, container: Node, key?: string | null): React.ReactPortal {
+  return reconciler.createPortal(children, container, null, key) as unknown as React.ReactPortal;
+}