pixi-fusion 1.0.1 → 1.0.2

package/dist/src/camera/Camera.js

@@ -8,10 +8,10 @@ export const Camera = ({ children, clampZoom }) => {
     const [isReady, setIsReady] = useState(false);
     const [followContainer, setFollowContainer] = useState(null);
     const [ensureVisibleOptions, setEnsureVisibleOptions] = useState(null);
-    const { application, isInitialized, size } = useWorld();
+    const { application, size } = useWorld();
     const { addObject: addObjectToStage, removeObject: removeObjectFromStage } = useStage();
     const [things, setThings] = useState([]);
-    const viewport = useMemo(() => isInitialized
+    const viewport = useMemo(() => application
         ? new ViewportContainer({
             worldHeight: size.height,
             worldWidth: size.width,
@@ -19,7 +19,7 @@ export const Camera = ({ children, clampZoom }) => {
             screenWidth: application.canvas.width,
             events: application?.renderer?.events
         })
-        : null, [size, application, isInitialized]);
+        : null, [size, application]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
     }, [things]);
@@ -31,10 +31,10 @@ export const Camera = ({ children, clampZoom }) => {
         removeObject
     }), [addObject, removeObject]);
     useEffect(() => {
-        if (viewport && clampZoom) {
+        if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom, isInitialized]);
+    }, [clampZoom]);
     useEffect(() => {
         if (viewport) {
             if (size.width) {
@@ -44,13 +44,13 @@ export const Camera = ({ children, clampZoom }) => {
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, isInitialized]);
+    }, [size, viewport?.uid, application]);
     useEffect(() => {
-        if (!isInitialized || !viewport) {
+        if (!application || !viewport) {
             return;
         }
         viewport?.moveCenter(0, 0);
-    }, [viewport, size, isInitialized]);
+    }, [viewport, size, application]);
     useEffect(() => {
         if (!viewport) {
             return;
@@ -61,7 +61,7 @@ export const Camera = ({ children, clampZoom }) => {
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [application, isInitialized]);
+    }, [viewport?.uid]);
     useEffect(() => {
         if (!viewport || !isReady) {
             return;

package/dist/src/hooks/useTickerCallback.js

@@ -1,14 +1,14 @@
 import { useEffect } from "react";
 import { useWorld } from "../hooks";
 export const useTickerCallback = ({ isEnabled = true, callback }) => {
-    const { application, isInitialized } = useWorld();
+    const { application } = useWorld();
     useEffect(() => {
-        if (!isInitialized || !isEnabled) {
+        if (!application || !isEnabled) {
             return;
         }
         application.ticker.add(callback);
         return () => {
             application.ticker.remove(callback);
         };
-    }, [isEnabled, application, isInitialized, callback]);
+    }, [isEnabled, application, callback]);
 };

package/dist/src/stage/Stage.js

@@ -3,7 +3,7 @@ import { StageContext } from "./Stage.context";
 import { useWorld } from "../hooks";
 import { Layer } from "../layer";
 export const Stage = ({ children }) => {
-    const { application, isInitialized } = useWorld();
+    const { application } = useWorld();
     const [things, setThings] = useState([]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
@@ -16,14 +16,14 @@ export const Stage = ({ children }) => {
         removeObject
     }), [addObject, removeObject]);
     useEffect(() => {
-        if (!isInitialized) {
+        if (!application) {
             return;
         }
         application.stage.addChild(...things);
         return () => {
             application.stage.removeChild(...things);
         };
-    }, [things, isInitialized]);
+    }, [things, application]);
     return (React.createElement(StageContext.Provider, { value: conextValue },
         React.createElement(Layer, null, children)));
 };

package/dist/src/world/World.context.d.ts

@@ -4,7 +4,6 @@ export type WorldContextValue = {
         width: number;
         height: number;
     };
-    readonly application: Application;
-    readonly isInitialized: boolean;
+    application: Application | null;
 };
 export declare const WorldContext: import("react").Context<WorldContextValue>;

package/dist/src/world/World.js

@@ -1,12 +1,11 @@
-import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { createRef, useEffect, useMemo, useState } from "react";
 import { Application } from "pixi.js";
 import { WorldContext } from "./World.context";
 import { Stage } from "../stage";
 import { AssetsManager } from "../assets-manager";
 export const World = ({ children, eventMode, size }) => {
-    const [isInitialized, setIsInitialized] = useState(false);
     const canvasRef = createRef();
-    const application = useRef(new Application());
+    const [applicationRef, setApplicationRef] = useState(null);
     const worldSize = useMemo(() => {
         if (size) {
             return { ...size };
@@ -18,55 +17,51 @@ export const World = ({ children, eventMode, size }) => {
                 height
             };
         }
-        if (!isInitialized) {
+        if (!applicationRef) {
             return {
                 width: 0,
                 height: 0
             };
         }
         return {
-            width: application.current.screen.width,
-            height: application.current.screen.height
+            width: applicationRef.screen.width,
+            height: applicationRef.screen.height
         };
-    }, [size, canvasRef, isInitialized]);
+    }, [size, canvasRef.current, applicationRef]);
     useEffect(() => {
-        if (!isInitialized) {
-            application.current
-                .init()
-                .then(() => {
-                setIsInitialized(true);
-            })
-                .catch((e) => {
-                setIsInitialized(true);
-                console.error(e);
+        if (!applicationRef) {
+            const application = new Application();
+            application.init().then(() => {
+                setApplicationRef(application);
             });
         }
-    }, [canvasRef.current, isInitialized]);
+    }, []);
     useEffect(() => {
-        if (isInitialized && canvasRef.current) {
-            application.current.resizeTo = canvasRef.current;
-            application.current.resize();
+        if (applicationRef && canvasRef.current) {
+            applicationRef.resizeTo = canvasRef.current;
+            applicationRef.resize();
         }
-    }, [canvasRef.current, isInitialized]);
+    }, [canvasRef.current, applicationRef]);
     const conextValue = useMemo(() => ({
-        application: application.current,
-        size: worldSize,
-        isInitialized
-    }), [isInitialized, worldSize]);
+        application: applicationRef,
+        size: worldSize
+    }), [applicationRef, worldSize]);
     useEffect(() => {
-        if (!isInitialized) {
+        if (!applicationRef) {
             return;
         }
-        canvasRef.current?.appendChild(application.current.canvas);
+        canvasRef.current?.appendChild(applicationRef.canvas);
         return () => {
-            canvasRef.current?.removeChild(application.current.canvas);
+            if (applicationRef) {
+                canvasRef.current?.removeChild(applicationRef.canvas);
+            }
         };
-    }, [canvasRef.current, isInitialized]);
+    }, [canvasRef.current, applicationRef]);
     useEffect(() => {
-        if (application.current) {
-            application.current.stage.eventMode = eventMode;
+        if (applicationRef) {
+            applicationRef.stage.eventMode = eventMode;
         }
-    }, [eventMode, application.current, isInitialized]);
+    }, [eventMode, applicationRef]);
     return (React.createElement(WorldContext.Provider, { value: conextValue },
         React.createElement(AssetsManager, null,
             React.createElement(Stage, null, children),

package/package.json

@@ -47,6 +47,6 @@
         "build": "tsc",
         "build:dev": "tsc -w"
     },
-    "version": "1.0.1",
+    "version": "1.0.2",
     "webpack": "./src/index.ts"
 }

package/src/camera/Camera.tsx

@@ -15,12 +15,12 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
     const [isReady, setIsReady] = useState(false);
     const [followContainer, setFollowContainer] = useState<Container | null>(null);
     const [ensureVisibleOptions, setEnsureVisibleOptions] = useState<EnsureVisibleOptions | null>(null);
-    const { application, isInitialized, size } = useWorld();
+    const { application, size } = useWorld();
     const { addObject: addObjectToStage, removeObject: removeObjectFromStage } = useStage();
     const [things, setThings] = useState<Container[]>([]);
     const viewport = useMemo(
         () =>
-            isInitialized
+            application
                 ? new ViewportContainer({
                       worldHeight: size.height,
                       worldWidth: size.width,
@@ -29,7 +29,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
                       events: application?.renderer?.events
                   })
                 : null,
-        [size, application, isInitialized]
+        [size, application]
     );
 
     const addObject = useCallback(
@@ -55,10 +55,10 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
     );
 
     useEffect(() => {
-        if (viewport && clampZoom) {
+        if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom, isInitialized]);
+    }, [clampZoom]);
 
     useEffect(() => {
         if (viewport) {
@@ -69,14 +69,14 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, isInitialized]);
+    }, [size, viewport?.uid, application]);
 
     useEffect(() => {
-        if (!isInitialized || !viewport) {
+        if (!application || !viewport) {
             return;
         }
         viewport?.moveCenter(0, 0);
-    }, [viewport, size, isInitialized]);
+    }, [viewport, size, application]);
 
     useEffect(() => {
         if (!viewport) {
@@ -90,7 +90,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [application, isInitialized]);
+    }, [viewport?.uid]);
 
     useEffect(() => {
         if (!viewport || !isReady) {

package/src/hooks/useTickerCallback.ts

@@ -10,10 +10,10 @@ export const useTickerCallback = <T = unknown>({
     isEnabled?: boolean;
     callback: TickerCallback<T>;
 }) => {
-    const { application, isInitialized } = useWorld();
+    const { application } = useWorld();
 
     useEffect(() => {
-        if (!isInitialized || !isEnabled) {
+        if (!application || !isEnabled) {
             return;
         }
 
@@ -21,5 +21,5 @@ export const useTickerCallback = <T = unknown>({
         return () => {
             application.ticker.remove(callback);
         };
-    }, [isEnabled, application, isInitialized, callback]);
+    }, [isEnabled, application, callback]);
 };

package/src/stage/Stage.tsx

@@ -5,7 +5,7 @@ import { useWorld } from "../hooks";
 import { Layer } from "../layer";
 
 export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
-    const { application, isInitialized } = useWorld();
+    const { application } = useWorld();
     const [things, setThings] = useState<Container[]>([]);
 
     const addObject = useCallback(
@@ -31,7 +31,7 @@ export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
     );
 
     useEffect(() => {
-        if (!isInitialized) {
+        if (!application) {
             return;
         }
 
@@ -40,7 +40,7 @@ export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
         return () => {
             application.stage.removeChild(...things);
         };
-    }, [things, isInitialized]);
+    }, [things, application]);
 
     return (
         <StageContext.Provider value={conextValue}>

package/src/world/World.context.tsx

@@ -6,8 +6,7 @@ export type WorldContextValue = {
         width: number;
         height: number;
     };
-    readonly application: Application;
-    readonly isInitialized: boolean;
+    application: Application | null;
 };
 
 export const WorldContext = createContext<WorldContextValue>({} as unknown as WorldContextValue);

package/src/world/World.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, createRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createRef, useEffect, useMemo, useState } from "react";
 import { Application, EventMode } from "pixi.js";
 import { WorldContextValue, WorldContext } from "./World.context";
 import { Stage } from "../stage";
@@ -13,10 +13,9 @@ type WorldProps = {
 };
 
 export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, eventMode, size }) => {
-    const [isInitialized, setIsInitialized] = useState(false);
     const canvasRef = createRef<HTMLDivElement>();
 
-    const application = useRef(new Application());
+    const [applicationRef, setApplicationRef] = useState<Application | null>(null);
 
     const worldSize = useMemo(() => {
         if (size) {
@@ -31,65 +30,61 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
             };
         }
 
-        if (!isInitialized) {
+        if (!applicationRef) {
             return {
                 width: 0,
                 height: 0
             };
         }
+
         return {
-            width: application.current.screen.width,
-            height: application.current.screen.height
+            width: applicationRef.screen.width,
+            height: applicationRef.screen.height
         };
-    }, [size, canvasRef, isInitialized]);
+    }, [size, canvasRef.current, applicationRef]);
 
     useEffect(() => {
-        if (!isInitialized) {
-            application.current
-                .init()
-                .then(() => {
-                    setIsInitialized(true);
-                })
-                .catch((e) => {
-                    setIsInitialized(true);
-                    console.error(e);
-                });
+        if (!applicationRef) {
+            const application = new Application();
+            application.init().then(() => {
+                setApplicationRef(application);
+            });
         }
-    }, [canvasRef.current, isInitialized]);
+    }, []);
 
     useEffect(() => {
-        if (isInitialized && canvasRef.current) {
-            application.current.resizeTo = canvasRef.current;
-            application.current.resize();
+        if (applicationRef && canvasRef.current) {
+            applicationRef.resizeTo = canvasRef.current;
+            applicationRef.resize();
         }
-    }, [canvasRef.current, isInitialized]);
+    }, [canvasRef.current, applicationRef]);
 
     const conextValue = useMemo<WorldContextValue>(
         () => ({
-            application: application.current,
-            size: worldSize,
-            isInitialized
+            application: applicationRef,
+            size: worldSize
         }),
-        [isInitialized, worldSize]
+        [applicationRef, worldSize]
     );
 
     useEffect(() => {
-        if (!isInitialized) {
+        if (!applicationRef) {
             return;
         }
-
-        canvasRef.current?.appendChild(application.current.canvas);
+        canvasRef.current?.appendChild(applicationRef.canvas);
 
         return () => {
-            canvasRef.current?.removeChild(application.current.canvas);
+            if (applicationRef) {
+                canvasRef.current?.removeChild(applicationRef.canvas);
+            }
         };
-    }, [canvasRef.current, isInitialized]);
+    }, [canvasRef.current, applicationRef]);
 
     useEffect(() => {
-        if (application.current) {
-            application.current.stage.eventMode = eventMode;
+        if (applicationRef) {
+            applicationRef.stage.eventMode = eventMode;
         }
-    }, [eventMode, application.current, isInitialized]);
+    }, [eventMode, applicationRef]);
 
     return (
         <WorldContext.Provider value={conextValue}>