feat: upgrade reconciler for React 19

Signed-off-by: Trezy <tre@trezy.com>
pixijs · Dec 30, 2024 · e121bb8 · e121bb8
1 parent b40f654
commit e121bb8
Show file tree

Hide file tree

Showing 37 changed files with 419 additions and 248 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,8 +71,8 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.2",
-    "@types/react-reconciler": "0.28.8",
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "^0.28.9",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/browser": "^2.0.4",
     "husky": "^8.0.0",
@@ -89,13 +89,7 @@
   },
   "peerDependencies": {
     "pixi.js": "^8.2.6",
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react-dom": {
-      "optional": true
-    }
+    "react": ">=19.0.0"
   },
   "overrides": {
     "rollup": "^4.18.0"

diff --git a/src/components/Application.ts → src/components/Application.tsx b/src/components/Application.ts → src/components/Application.tsx
@@ -6,10 +6,10 @@ import {
 import {
     createElement,
     forwardRef,
-    type ForwardRefRenderFunction,
-    type MutableRefObject,
+    type RefObject,
     useCallback,
     useEffect,
+    useImperativeHandle,
     useRef,
 } from 'react';
 import { createRoot } from '../core/createRoot';
@@ -19,17 +19,16 @@ import { queueForUnmount } from '../helpers/queueForUnmount';
 import { unqueueForUnmount } from '../helpers/unqueueForUnmount';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { type ApplicationProps } from '../typedefs/ApplicationProps';
+import { type ApplicationRef } from '../typedefs/ApplicationRef';
 
 const originalDefaultTextStyle = { ...TextStyle.defaultTextStyle };
 
-/** Creates a React root and renders a Pixi application. */
-export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, ApplicationProps> = (
+export const Application = forwardRef<ApplicationRef, ApplicationProps>(function Application(
     props,
     forwardedRef,
-) =>
+)
 {
     const {
-        attachToDevTools,
         children,
         className,
         defaultTextStyle,
@@ -39,9 +38,20 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
         ...applicationProps
     } = props;
 
-    const applicationRef: MutableRefObject<PixiApplication | null> = useRef(null);
-    const canvasRef: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
-    const extensionsRef: MutableRefObject<Set<any>> = useRef(new Set());
+    const applicationRef: RefObject<PixiApplication | null> = useRef(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const extensionsRef = useRef<Set<any>>(new Set());
+
+    useImperativeHandle(forwardedRef, () => ({
+        getApplication()
+        {
+            return applicationRef.current;
+        },
+        getCanvas()
+        {
+            return canvasRef.current;
+        },
+    }));
 
     const updateResizeTo = useCallback(() =>
     {
@@ -75,31 +85,9 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
     {
         processUnmountQueue();
 
-        if (forwardedRef && ('current' in forwardedRef))
-        {
-            forwardedRef.current = application;
-        }
-
         applicationRef.current = application;
         updateResizeTo();
         onInit?.(application);
-
-        if (attachToDevTools)
-        {
-            const globalScope = globalThis as any;
-
-            globalScope.__PIXI_APP__ = application;
-
-            import('pixi.js').then((pixi) =>
-            {
-                globalScope.__PIXI_DEVTOOLS__ = {
-                    app: application,
-                    pixi,
-                    renderer: application.renderer,
-                    stage: application.stage,
-                };
-            });
-        }
     }, [onInit]);
 
     useIsomorphicLayoutEffect(() =>
@@ -193,8 +181,4 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
         className,
         ref: canvasRef,
     });
-};
-
-ApplicationFunction.displayName = 'Application';
-
-export const Application = forwardRef(ApplicationFunction);
+});
diff --git a/src/constants/NO_CONTEXT.ts b/src/constants/NO_CONTEXT.ts
@@ -0,0 +1,3 @@
+import { type HostConfig } from '../typedefs/HostConfig';
+
+export const NO_CONTEXT: HostConfig['hostContext'] = {};
diff --git a/src/core/createRoot.ts b/src/core/createRoot.ts
@@ -49,15 +49,17 @@ export function createRoot(
         internalState.rootContainer = prepareInstance(applicationState.app.stage) as HostConfig['containerInstance'];
     }
 
-    const fiber = root?.fiber ?? reconciler.createContainer(
-        internalState.rootContainer,
-        ConcurrentRoot,
-        null,
-        false,
-        null,
-        '',
-        console.error,
-        null,
+    const fiber = root?.fiber ?? (reconciler as any).createContainer(
+        internalState.rootContainer, // container
+        ConcurrentRoot, // tag
+        null, // hydration callbacks
+        false, // isStrictMode
+        null, // concurrentUpdatesByDefaultOverride
+        '', // identifierPrefix
+        console.error, // onUncaughtError
+        console.error, // onCaughtError
+        console.error, // onRecoverableError
+        null, // transitionCallbacks
     );
 
     if (!root)
@@ -98,7 +100,7 @@ export function createRoot(
 
             Object.entries(applicationOptions).forEach(([key, value]) =>
             {
-                const typedKey = /** @type {keyof ApplicationOptions} */ (key);
+                const typedKey = key as keyof ApplicationOptions;
 
                 if (isReadOnlyProperty(
                     applicationOptions as unknown as Record<string, unknown>,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { type HostConfig } from '../typedefs/HostConfig';

		export const NO_CONTEXT: HostConfig['hostContext'] = {};