pixi-solid 0.1.16 → 0.1.17

package/dist/on-resize.js

@@ -1,5 +1,6 @@
-import { onCleanup } from "solid-js";
+import { createEffect, on } from "solid-js";
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
+import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
 const onResize = (resizeCallback) => {
   let pixiApp;
   try {
@@ -7,14 +8,16 @@ const onResize = (resizeCallback) => {
   } catch {
     throw new Error("onResize must be used within a PixiApplicationProvider or a PixiCanvas");
   }
-  const handleResize = () => {
-    resizeCallback(pixiApp.renderer.screen);
-  };
-  handleResize();
-  pixiApp.renderer.addListener("resize", handleResize);
-  onCleanup(() => {
-    pixiApp.renderer.removeListener("resize", handleResize);
-  });
+  const screen = usePixiScreen();
+  createEffect(
+    on(
+      () => [screen.width, screen.height, screen.x, screen.y],
+      () => {
+        resizeCallback(pixiApp.renderer.screen);
+      },
+      { defer: false }
+    )
+  );
 };
 export {
   onResize

package/dist/on-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  const handleResize = () => {\n    resizeCallback(pixiApp.renderer.screen);\n  };\n\n  handleResize();\n\n  pixiApp.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    pixiApp.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"names":[],"mappings":";;AAgBO,MAAM,WAAW,CAAC,mBAA2D;AAClF,MAAI;AAEJ,MAAI;AACF,cAAU,WAAA;AAAA,EACZ,QAAQ;AACN,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,QAAQ,SAAS,MAAM;AAAA,EACxC;AAEA,eAAA;AAEA,UAAQ,SAAS,YAAY,UAAU,YAAY;AAEnD,YAAU,MAAM;AACd,YAAQ,SAAS,eAAe,UAAU,YAAY;AAAA,EACxD,CAAC;AACH;"}
+{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createEffect, on } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\nimport { usePixiScreen } from \"./use-pixi-screen\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  const screen = usePixiScreen();\n\n  /**\n   * We derive from the reactive screen store so this hook always fires after `usePixiScreen()` has\n   * been updated.\n   * This avoids a race condition and guarantees consistent values when both are used together.\n   */\n  createEffect(\n    on(\n      () => [screen.width, screen.height, screen.x, screen.y],\n      () => {\n        resizeCallback(pixiApp.renderer.screen);\n      },\n      { defer: false },\n    ),\n  );\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,WAAW,CAAC,mBAA2D;AAClF,MAAI;AAEJ,MAAI;AACF,cAAU,WAAA;AAAA,EACZ,QAAQ;AACN,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,QAAM,SAAS,cAAA;AAOf;AAAA,IACE;AAAA,MACE,MAAM,CAAC,OAAO,OAAO,OAAO,QAAQ,OAAO,GAAG,OAAO,CAAC;AAAA,MACtD,MAAM;AACJ,uBAAe,QAAQ,SAAS,MAAM;AAAA,MACxC;AAAA,MACA,EAAE,OAAO,MAAA;AAAA,IAAM;AAAA,EACjB;AAEJ;"}

package/dist/pixi-application/pixi-application-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n  Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n  children?: JSX.Element;\n  existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps): JSX.Element => {\n  let externallyProvidedApp: Pixi.Application | undefined = props.existingApp;\n\n  const [appResource] = createResource(async () => {\n    if (externallyProvidedApp) {\n      return externallyProvidedApp;\n    }\n\n    const existingContext = useContext(PixiAppContext);\n    if (existingContext?.app) {\n      externallyProvidedApp = existingContext.app;\n      return existingContext.app;\n    }\n\n    const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n    return await createPixiApplication(initialisationProps);\n  });\n\n  onCleanup(() => {\n    // Only destory the app if it was created here.\n    if (externallyProvidedApp) return;\n    appResource()?.destroy(true, { children: true });\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => {\n        const pixiScreenStore = createPixiScreenStore(app().renderer);\n        const contextValue = {\n          app: app(),\n          pixiScreenStore,\n        };\n\n        return (\n          <PixiAppContext.Provider value={contextValue}>\n            <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n          </PixiAppContext.Provider>\n        );\n      }}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application.\n * For applications that want to use multiple tickers or for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps): JSX.Element => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"names":["PixiApplicationProvider","props","externallyProvidedApp","existingApp","appResource","createResource","existingContext","useContext","PixiAppContext","app","initialisationProps","splitProps","createPixiApplication","onCleanup","destroy","children","_$createComponent","Show","when","pixiScreenStore","createPixiScreenStore","renderer","contextValue","Provider","value","TickerContext","ticker","TickerProvider"],"mappings":";;;;;AA+BO,MAAMA,0BAA0BA,CAACC,UAA6C;AACnF,MAAIC,wBAAsDD,MAAME;AAEhE,QAAM,CAACC,WAAW,IAAIC,eAAe,YAAY;AAC/C,QAAIH,uBAAuB;AACzB,aAAOA;AAAAA,IACT;AAEA,UAAMI,kBAAkBC,WAAWC,cAAc;AACjD,QAAIF,iBAAiBG,KAAK;AACxBP,8BAAwBI,gBAAgBG;AACxC,aAAOH,gBAAgBG;AAAAA,IACzB;AAEA,UAAM,CAAA,EAAGC,mBAAmB,IAAIC,WAAWV,OAAO,CAAC,YAAY,aAAa,CAAC;AAC7E,WAAO,MAAMW,sBAAsBF,mBAAmB;AAAA,EACxD,CAAC;AAEDG,YAAU,MAAM;AAEd,QAAIX,sBAAuB;AAC3BE,gBAAAA,GAAeU,QAAQ,MAAM;AAAA,MAAEC,UAAU;AAAA,IAAA,CAAM;AAAA,EACjD,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEd,YAAAA;AAAAA,IAAa;AAAA,IAAAW,UACrBN,CAAAA,QAAQ;AACR,YAAMU,kBAAkBC,sBAAsBX,IAAAA,EAAMY,QAAQ;AAC5D,YAAMC,eAAe;AAAA,QACnBb,KAAKA,IAAAA;AAAAA,QACLU;AAAAA,MAAAA;AAGF,aAAAH,gBACGR,eAAee,UAAQ;AAAA,QAACC,OAAOF;AAAAA,QAAY,IAAAP,WAAA;AAAA,iBAAAC,gBACzCS,cAAcF,UAAQ;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAEf,MAAMiB;AAAAA,YAAM;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAGd,MAAMc;AAAAA,YAAQ;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAGlE;AAAA,EAAA,CAAC;AAGP;AAWO,MAAMY,iBAAiBA,CAAC1B,UAA4C;AACzE,SAAAe,gBAAQS,cAAcF,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAEvB,MAAMyB;AAAAA,IAAM;AAAA,IAAA,IAAAX,WAAA;AAAA,aAAGd,MAAMc;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;"}
+{"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n  Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n  children?: JSX.Element;\n  existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps): JSX.Element => {\n  let externallyProvidedApp: Pixi.Application | undefined = props.existingApp;\n\n  const [appResource] = createResource(async () => {\n    if (externallyProvidedApp) {\n      return externallyProvidedApp;\n    }\n\n    const existingContext = useContext(PixiAppContext);\n    if (existingContext?.app) {\n      externallyProvidedApp = existingContext.app;\n      return existingContext.app;\n    }\n\n    const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n    return await createPixiApplication(initialisationProps);\n  });\n\n  onCleanup(() => {\n    // Only destroy the app if it was created here.\n    if (externallyProvidedApp) return;\n    appResource()?.destroy(true, { children: true });\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => {\n        const pixiScreenStore = createPixiScreenStore(app().renderer);\n        const contextValue = {\n          app: app(),\n          pixiScreenStore,\n        };\n\n        return (\n          <PixiAppContext.Provider value={contextValue}>\n            <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n          </PixiAppContext.Provider>\n        );\n      }}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application.\n * For applications that want to use multiple tickers or for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps): JSX.Element => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"names":["PixiApplicationProvider","props","externallyProvidedApp","existingApp","appResource","createResource","existingContext","useContext","PixiAppContext","app","initialisationProps","splitProps","createPixiApplication","onCleanup","destroy","children","_$createComponent","Show","when","pixiScreenStore","createPixiScreenStore","renderer","contextValue","Provider","value","TickerContext","ticker","TickerProvider"],"mappings":";;;;;AA+BO,MAAMA,0BAA0BA,CAACC,UAA6C;AACnF,MAAIC,wBAAsDD,MAAME;AAEhE,QAAM,CAACC,WAAW,IAAIC,eAAe,YAAY;AAC/C,QAAIH,uBAAuB;AACzB,aAAOA;AAAAA,IACT;AAEA,UAAMI,kBAAkBC,WAAWC,cAAc;AACjD,QAAIF,iBAAiBG,KAAK;AACxBP,8BAAwBI,gBAAgBG;AACxC,aAAOH,gBAAgBG;AAAAA,IACzB;AAEA,UAAM,CAAA,EAAGC,mBAAmB,IAAIC,WAAWV,OAAO,CAAC,YAAY,aAAa,CAAC;AAC7E,WAAO,MAAMW,sBAAsBF,mBAAmB;AAAA,EACxD,CAAC;AAEDG,YAAU,MAAM;AAEd,QAAIX,sBAAuB;AAC3BE,gBAAAA,GAAeU,QAAQ,MAAM;AAAA,MAAEC,UAAU;AAAA,IAAA,CAAM;AAAA,EACjD,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEd,YAAAA;AAAAA,IAAa;AAAA,IAAAW,UACrBN,CAAAA,QAAQ;AACR,YAAMU,kBAAkBC,sBAAsBX,IAAAA,EAAMY,QAAQ;AAC5D,YAAMC,eAAe;AAAA,QACnBb,KAAKA,IAAAA;AAAAA,QACLU;AAAAA,MAAAA;AAGF,aAAAH,gBACGR,eAAee,UAAQ;AAAA,QAACC,OAAOF;AAAAA,QAAY,IAAAP,WAAA;AAAA,iBAAAC,gBACzCS,cAAcF,UAAQ;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAEf,MAAMiB;AAAAA,YAAM;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAGd,MAAMc;AAAAA,YAAQ;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAGlE;AAAA,EAAA,CAAC;AAGP;AAWO,MAAMY,iBAAiBA,CAAC1B,UAA4C;AACzE,SAAAe,gBAAQS,cAAcF,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAEvB,MAAMyB;AAAAA,IAAM;AAAA,IAAA,IAAAX,WAAA;AAAA,aAAGd,MAAMc;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixi-solid",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "description": "A library to write PixiJS applications with SolidJS",
   "homepage": "https://lukecarlthompson.github.io/pixi-solid/",