diff --git a/package-lock.json b/package-lock.json index dc26aa6d..1e48e06d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0-development", "license": "MIT", "dependencies": { + "its-fine": "^1.2.5", "react-reconciler": "0.31.0" }, "devDependencies": { @@ -4116,7 +4117,6 @@ "version": "19.0.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", - "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -4138,7 +4138,6 @@ "version": "0.28.9", "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz", "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==", - "dev": true, "license": "MIT", "peerDependencies": { "@types/react": "*" @@ -7589,7 +7588,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true, "license": "MIT" }, "node_modules/data-urls": { @@ -11741,6 +11739,18 @@ "node": ">=8" } }, + "node_modules/its-fine": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz", + "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==", + "license": "MIT", + "dependencies": { + "@types/react-reconciler": "^0.28.0" + }, + "peerDependencies": { + "react": ">=18.0" + } + }, "node_modules/jackspeak": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", @@ -20584,35 +20594,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "node_modules/zustand": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.2.tgz", - "integrity": "sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==", - "license": "MIT", - "engines": { - "node": ">=12.20.0" - }, - "peerDependencies": { - "@types/react": ">=18.0.0", - "immer": ">=9.0.6", - "react": ">=18.0.0", - "use-sync-external-store": ">=1.2.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "immer": { - "optional": true - }, - "react": { - "optional": true - }, - "use-sync-external-store": { - "optional": true - } - } } } } diff --git a/package.json b/package.json index 525c1b42..48ada20e 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ ] }, "dependencies": { + "its-fine": "^1.2.5", "react-reconciler": "0.31.0" }, "devDependencies": { diff --git a/src/components/Application.tsx b/src/components/Application.tsx index 52f3e7f7..45133a19 100644 --- a/src/components/Application.tsx +++ b/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(function Application( +const ApplicationImplementation = forwardRef(function Application( props, forwardedRef, ) @@ -38,6 +41,8 @@ export const Application = forwardRef(function ...applicationProps } = props; + const Bridge = useContextBridge(); + const applicationRef: RefObject = useRef(null); const canvasRef = useRef(null); const extensionsRef = useRef>(new Set()); @@ -135,7 +140,8 @@ export const Application = forwardRef(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(({children}), applicationProps); } }, [ applicationProps, @@ -177,8 +183,20 @@ export const Application = forwardRef(function } }, []); - return createElement('canvas', { - className, - ref: canvasRef, - }); + return ( + + ); +}); + +export const Application = forwardRef(function ApplicationWrapper(props, ref) +{ + return ( + + + + ); }); diff --git a/src/core/createRoot.ts b/src/core/createRoot.tsx similarity index 96% rename from src/core/createRoot.ts rename to src/core/createRoot.tsx index 22165eee..49aa962b 100644 --- a/src/core/createRoot.ts +++ b/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), + ( + + {children} + + ), fiber, null, () => undefined, diff --git a/src/index.ts b/src/index.ts index 75a8f79f..e8879a07 100644 --- a/src/index.ts +++ b/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';