fix: use its-fine to bridge context across the application boundary

Signed-off-by: Trezy <tre@trezy.com>

package.json

@@ -61,6 +61,7 @@
     ]
   },
   "dependencies": {
+    "its-fine": "^1.2.5",
     "react-reconciler": "0.31.0"
   },
   "devDependencies": {

src/components/Application.tsx

@@ -1,10 +1,13 @@
+import {
+    FiberProvider,
+    useContextBridge,
+} from 'its-fine'
 import {
     type Application as PixiApplication,
     extensions as PixiExtensions,
     TextStyle,
 } from 'pixi.js';
 import {
-    createElement,
     forwardRef,
     type RefObject,
     useCallback,
@@ -23,7 +26,7 @@ import { type ApplicationRef } from '../typedefs/ApplicationRef';
 
 const originalDefaultTextStyle = { ...TextStyle.defaultTextStyle };
 
-export const Application = forwardRef<ApplicationRef, ApplicationProps>(function Application(
+const ApplicationImplementation = forwardRef<ApplicationRef, ApplicationProps>(function Application(
     props,
     forwardedRef,
 )
@@ -38,6 +41,8 @@ export const Application = forwardRef<ApplicationRef, ApplicationProps>(function
         ...applicationProps
     } = props;
 
+    const Bridge = useContextBridge();
+
     const applicationRef: RefObject<PixiApplication | null> = useRef(null);
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const extensionsRef = useRef<Set<any>>(new Set());
@@ -135,7 +140,8 @@ export const Application = forwardRef<ApplicationRef, ApplicationProps>(function
                 root = createRoot(canvasElement, {}, handleInit);
             }
 
-            root.render(children, applicationProps);
+            // @ts-expect-error The value of `children` is fine, but `PixiReactChildNode` doesn't strictly adhere to the `ReactNode` structure.
+            root.render((<Bridge>{children}</Bridge>), applicationProps);
         }
     }, [
         applicationProps,
@@ -177,8 +183,20 @@ export const Application = forwardRef<ApplicationRef, ApplicationProps>(function
         }
     }, []);
 
-    return createElement('canvas', {
-        className,
-        ref: canvasRef,
-    });
+    return (
+        <canvas
+            ref={canvasRef}
+            className={className} />
+    );
+});
+
+export const Application = forwardRef<ApplicationRef, ApplicationProps>(function ApplicationWrapper(props, ref)
+{
+    return (
+        <FiberProvider>
+            <ApplicationImplementation
+                ref={ref}
+                {...props} />
+        </FiberProvider>
+    );
 });

src/core/createRoot.ts → src/core/createRoot.tsx

@@ -1,6 +1,5 @@
 import { Application } from 'pixi.js';
 import { type ApplicationOptions } from 'pixi.js';
-import { createElement } from 'react';
 import { type ReactNode } from 'react';
 import { ConcurrentRoot } from 'react-reconciler/constants.js';
 import { ContextProvider } from '../components/Context';
@@ -115,7 +114,11 @@ export function createRoot(
 
             // Update fiber and expose Pixi.js state to children
             reconciler.updateContainer(
-                createElement(ContextProvider, { value: applicationState }, children),
+                (
+                    <ContextProvider value={applicationState}>
+                        {children}
+                    </ContextProvider>
+                ),
                 fiber,
                 null,
                 () => undefined,

src/index.ts

@@ -17,4 +17,5 @@ export { useAssets } from './hooks/useAssets';
 export { useExtend } from './hooks/useExtend';
 export { useSuspenseAssets } from './hooks/useSuspenseAssets';
 export { useTick } from './hooks/useTick';
+export { type ApplicationRef } from './typedefs/ApplicationRef';
 export { type PixiReactElementProps } from './typedefs/PixiReactNode';