pixi-solid 0.0.35 → 0.0.36

package/dist/component-creation.js

@@ -7,16 +7,12 @@ const applyProps = (instance, props, defer) => {
   for (const key in props) {
     if (key === "as") continue;
     if (key === "ref") {
-      createRenderEffect(() => {
-        props[key](instance);
-      });
+      props[key](instance);
     } else if (key === "children") {
       if (!("addChild" in instance)) {
         throw new Error(`Cannot set children on non-container instance.`);
       }
-      createRenderEffect(() => {
-        insert(instance, () => props.children);
-      });
+      insert(instance, () => props.children);
     } else if (defer) {
       createRenderEffect(
         on(

package/dist/component-creation.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-creation.js","sources":["../src/component-creation.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./event-names\";\nimport type { PointAxisPropName } from \"./point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./point-property-names\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n  PointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n    children?: JSX.Element;\n  };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean,\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      createRenderEffect(() => {\n        // Solid converts the ref prop to a callback function\n        (props[key] as unknown as (arg: any) => void)(instance);\n      });\n    } else if (key === \"children\") {\n      if (!(\"addChild\" in instance)) {\n        throw new Error(`Cannot set children on non-container instance.`);\n      }\n      createRenderEffect(() => {\n        insert(instance, () => props.children);\n      });\n    } else if (defer) {\n      createRenderEffect(\n        on(\n          () => props[key as keyof typeof props],\n          () => {\n            setProp(instance, key, props[key as keyof typeof props]);\n          },\n          { defer },\n        ),\n      );\n    } else {\n      createRenderEffect(() => {\n        setProp(instance, key, props[key as keyof typeof props]);\n      });\n    }\n  }\n};\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n      ...POINT_PROP_AXIS_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps, true);\n    applyProps(instance, runtimeProps);\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createLeafComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    for (const key in initialisationProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      } else if (key === \"children\") {\n        throw new Error(`Cannot set children on non-container instance.`);\n      } else {\n        createRenderEffect(\n          on(\n            () => props[key as keyof typeof initialisationProps],\n            () => {\n              (instance as any)[key] = initialisationProps[key];\n            },\n            { defer: true },\n          ),\n        );\n      }\n    }\n\n    for (const key in runtimeProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      }\n    }\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"names":[],"mappings":";;;;AAmCO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAM,aAAa,CAIxB,UACA,OACA,UACG;AACH,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AACjB,yBAAmB,MAAM;AAEtB,cAAM,GAAG,EAAoC,QAAQ;AAAA,MACxD,CAAC;AAAA,IACH,WAAW,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAc,WAAW;AAC7B,cAAM,IAAI,MAAM,gDAAgD;AAAA,MAClE;AACA,yBAAmB,MAAM;AACvB,eAAO,UAAU,MAAM,MAAM,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH,WAAW,OAAO;AAChB;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,MAAM;AACJ,oBAAQ,UAAU,KAAK,MAAM,GAAyB,CAAC;AAAA,UACzD;AAAA,UACA,EAAE,MAAA;AAAA,QAAM;AAAA,MACV;AAAA,IAEJ,OAAO;AACL,yBAAmB,MAAM;AACvB,gBAAQ,UAAU,KAAK,MAAM,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B,CAItC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,eAAW,UAAU,qBAAqB,IAAI;AAC9C,eAAW,UAAU,YAAY;AAEjC,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;"}
+{"version":3,"file":"component-creation.js","sources":["../src/component-creation.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./event-names\";\nimport type { PointAxisPropName } from \"./point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./point-property-names\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n  ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n  PointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n    children?: JSX.Element;\n  };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean,\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      (props[key] as unknown as (arg: any) => void)(instance);\n    } else if (key === \"children\") {\n      if (!(\"addChild\" in instance)) {\n        throw new Error(`Cannot set children on non-container instance.`);\n      }\n      insert(instance, () => props.children);\n    } else if (defer) {\n      createRenderEffect(\n        on(\n          () => props[key as keyof typeof props],\n          () => {\n            setProp(instance, key, props[key as keyof typeof props]);\n          },\n          { defer },\n        ),\n      );\n    } else {\n      createRenderEffect(() => {\n        setProp(instance, key, props[key as keyof typeof props]);\n      });\n    }\n  }\n};\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n      ...POINT_PROP_AXIS_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps, true);\n    applyProps(instance, runtimeProps);\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createLeafComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    for (const key in initialisationProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      } else if (key === \"children\") {\n        throw new Error(`Cannot set children on non-container instance.`);\n      } else {\n        createRenderEffect(\n          on(\n            () => props[key as keyof typeof initialisationProps],\n            () => {\n              (instance as any)[key] = initialisationProps[key];\n            },\n            { defer: true },\n          ),\n        );\n      }\n    }\n\n    for (const key in runtimeProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      }\n    }\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAM,aAAa,CAIxB,UACA,OACA,UACG;AACH,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAChB,YAAM,GAAG,EAAoC,QAAQ;AAAA,IACxD,WAAW,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAc,WAAW;AAC7B,cAAM,IAAI,MAAM,gDAAgD;AAAA,MAClE;AACA,aAAO,UAAU,MAAM,MAAM,QAAQ;AAAA,IACvC,WAAW,OAAO;AAChB;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,MAAM;AACJ,oBAAQ,UAAU,KAAK,MAAM,GAAyB,CAAC;AAAA,UACzD;AAAA,UACA,EAAE,MAAA;AAAA,QAAM;AAAA,MACV;AAAA,IAEJ,OAAO;AACL,yBAAmB,MAAM;AACvB,gBAAQ,UAAU,KAAK,MAAM,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B,CAItC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,eAAW,UAAU,qBAAqB,IAAI;AAC9C,eAAW,UAAU,YAAY;AAEjC,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;"}

package/dist/index.js

@@ -3,7 +3,6 @@ import { onResize } from "./on-resize.js";
 import { PixiApplication, TickerProvider, createAsyncDelay, delay, getPixiApp, getTicker, onTick, usePixiScreen } from "./pixi-application.js";
 import { PixiCanvas } from "./pixi-canvas.js";
 import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./pixi-components.js";
-import { PixiStage } from "./pixi-stage.js";
 export {
   AnimatedSprite,
   BitmapText,
@@ -19,7 +18,6 @@ export {
   PerspectiveMesh,
   PixiApplication,
   PixiCanvas,
-  PixiStage,
   RenderContainer,
   RenderLayer,
   Sprite,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/pixi-application.js

@@ -1,7 +1,7 @@
 import { createComponent } from "solid-js/web";
 import { Application } from "pixi.js";
 import { useContext, createContext, onCleanup, splitProps, createResource, createEffect, on, Show, batch } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { createStore } from "solid-js/store";
 const PixiAppContext = createContext();
 const TickerContext = createContext();
 const PixiScreenContext = createContext();
@@ -14,7 +14,7 @@ const getPixiApp = () => {
 };
 const PixiApplication = (props) => {
   const [, initialisationProps] = splitProps(props, ["ref", "children"]);
-  const pixiScreenDimensions = createMutable({
+  const [pixiScreenDimensions, setPixiScreenDimensions] = createStore({
     width: 800,
     height: 600,
     left: 0,
@@ -35,34 +35,29 @@ const PixiApplication = (props) => {
   });
   const updatePixiScreenStore = (screen) => {
     batch(() => {
-      pixiScreenDimensions.width = screen.width;
-      pixiScreenDimensions.height = screen.height;
-      pixiScreenDimensions.left = screen.x;
-      pixiScreenDimensions.top = screen.y;
-      pixiScreenDimensions.right = screen.x + screen.width;
-      pixiScreenDimensions.bottom = screen.y + screen.height;
-      pixiScreenDimensions.x = screen.x;
-      pixiScreenDimensions.y = screen.y;
+      setPixiScreenDimensions(screen);
+      setPixiScreenDimensions("left", screen.x);
+      setPixiScreenDimensions("top", screen.y);
+      setPixiScreenDimensions("right", screen.x + screen.width);
+      setPixiScreenDimensions("bottom", screen.y + screen.height);
     });
   };
-  createEffect(on(appResource, () => {
-    const app = appResource();
-    if (app) {
-      if (props.ref) {
-        props.ref(app);
-      }
+  createEffect(on(appResource, (app) => {
+    if (!app) return;
+    if (props.ref) {
+      props.ref(app);
+    }
+    updatePixiScreenStore(app.renderer.screen);
+    const handleResize = () => {
       updatePixiScreenStore(app.renderer.screen);
-      const handleResize = () => {
-        updatePixiScreenStore(app.renderer.screen);
-      };
-      app.renderer.addListener("resize", handleResize);
-      onCleanup(() => {
-        app.renderer.removeListener("resize", handleResize);
-        app.destroy(true, {
-          children: true
-        });
+    };
+    app.renderer.addListener("resize", handleResize);
+    onCleanup(() => {
+      app.renderer.removeListener("resize", handleResize);
+      app.destroy(true, {
+        children: true
       });
-    }
+    });
   }));
   return createComponent(Show, {
     get when() {

package/dist/pixi-application.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Rectangle, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport {\n  batch,\n  createContext,\n  createEffect,\n  createResource,\n  on,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\nconst PixiScreenContext = createContext<Readonly<PixiScreenDimensions>>();\n\n/**\n * A custom SolidJS hook to access the root PIXI.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Application instance provided by the `PixiApplication` component.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n */\nexport const getPixiApp = () => {\n  const app = useContext(PixiAppContext);\n  if (!app) {\n    throw new Error(\"getPixiApp must be used within a PixiApplication\");\n  }\n  return app;\n};\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * to allow passing configuration directly to the Pixi.js Application constructor,\n * but omits properties that are handled by the component itself.\n */\nexport type PixiApplicationProps = Partial<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\n  ref?: Ref<Application>;\n  children?: JSX.Element;\n};\n\n/**\n * A SolidJS component that creates and manages a PIXI.Application instance.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, and `getTicker`.\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 PixiApplication = (props: PixiApplicationProps) => {\n  const [, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n  const pixiScreenDimensions = createMutable<PixiScreenDimensions>({\n    width: 800,\n    height: 600,\n    left: 0,\n    right: 800,\n    top: 0,\n    bottom: 600,\n    x: 0,\n    y: 0,\n  });\n\n  const [appResource] = createResource(async () => {\n    const app = new Application();\n    await app.init({\n      resolution: window.devicePixelRatio,\n      autoDensity: true,\n      ...initialisationProps,\n    });\n\n    return app;\n  });\n\n  const updatePixiScreenStore = (screen: Rectangle) => {\n    batch(() => {\n      pixiScreenDimensions.width = screen.width;\n      pixiScreenDimensions.height = screen.height;\n      pixiScreenDimensions.left = screen.x;\n      pixiScreenDimensions.top = screen.y;\n      pixiScreenDimensions.right = screen.x + screen.width;\n      pixiScreenDimensions.bottom = screen.y + screen.height;\n      pixiScreenDimensions.x = screen.x;\n      pixiScreenDimensions.y = screen.y;\n    });\n  };\n\n  createEffect(\n    on(appResource, () => {\n      const app = appResource();\n      if (app) {\n        if (props.ref) {\n          // Solid converts the ref prop to a callback function\n          (props.ref as unknown as (arg: any) => void)(app);\n        }\n\n        updatePixiScreenStore(app.renderer.screen);\n\n        const handleResize = () => {\n          updatePixiScreenStore(app.renderer.screen);\n        };\n\n        app.renderer.addListener(\"resize\", handleResize);\n\n        onCleanup(() => {\n          app.renderer.removeListener(\"resize\", handleResize);\n          app.destroy(true, { children: true });\n        });\n      }\n    }),\n  );\n\n  return (\n    <Show when={appResource()}>\n      {(app) => (\n        <PixiAppContext.Provider value={app()}>\n          <TickerContext.Provider value={app().ticker}>\n            <PixiScreenContext.Provider value={pixiScreenDimensions}>{props.children}</PixiScreenContext.Provider>\n          </TickerContext.Provider>\n        </PixiAppContext.Provider>\n      )}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Application.\n * It provides context for the `onTick` and `getTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.\n *\n * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `PIXI.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: TickerCallback<Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"onTick must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  ticker.add(tickerCallback);\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n\nconst asyncDelay = async (ticker: Ticker, delayMs: number) => {\n  // TODO: Make this abortable.\n  let timeDelayed = 0;\n\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplication` or `TickerProvider` context.\n *\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\",\n    );\n  }\n  const delayWithTicker = (delayMs: number) => asyncDelay(ticker, delayMs);\n\n  return delayWithTicker;\n};\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\",\n    );\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\n/**\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * @returns An object containing the width and height of the Pixi screen.\n * @throws Will throw an error if not used within a `<PixiApplication>` component.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiScreen = useContext(PixiScreenContext);\n  if (!pixiScreen) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplication\");\n  }\n  return pixiScreen;\n};\n"],"names":["PixiAppContext","createContext","TickerContext","PixiScreenContext","getPixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","pixiScreenDimensions","createMutable","width","height","left","right","top","bottom","x","y","appResource","createResource","Application","init","resolution","window","devicePixelRatio","autoDensity","updatePixiScreenStore","screen","batch","createEffect","on","ref","renderer","handleResize","addListener","onCleanup","removeListener","destroy","children","_$createComponent","Show","when","Provider","value","ticker","TickerProvider","getTicker","onTick","tickerCallback","add","remove","asyncDelay","delayMs","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS","createAsyncDelay","delayWithTicker","delay","callback","usePixiScreen","pixiScreen"],"mappings":"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"}
+{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Rectangle, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport {\n  batch,\n  createContext,\n  createEffect,\n  createResource,\n  on,\n  onCleanup,\n  Show,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\nconst PixiScreenContext = createContext<Readonly<PixiScreenDimensions>>();\n\n/**\n * A custom SolidJS hook to access the root PIXI.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Application instance provided by the `PixiApplication` component.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n */\nexport const getPixiApp = () => {\n  const app = useContext(PixiAppContext);\n  if (!app) {\n    throw new Error(\"getPixiApp must be used within a PixiApplication\");\n  }\n  return app;\n};\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * to allow passing configuration directly to the Pixi.js Application constructor,\n * but omits properties that are handled by the component itself.\n */\nexport type PixiApplicationProps = Partial<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\n  ref?: Ref<Application>;\n  children?: JSX.Element;\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 PixiApplication = (props: PixiApplicationProps) => {\n  const [, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n  const [pixiScreenDimensions, setPixiScreenDimensions] = createStore<PixiScreenDimensions>({\n    width: 800,\n    height: 600,\n    left: 0,\n    right: 800,\n    top: 0,\n    bottom: 600,\n    x: 0,\n    y: 0,\n  });\n\n  const [appResource] = createResource(async () => {\n    const app = new Application();\n    await app.init({\n      resolution: window.devicePixelRatio,\n      autoDensity: true,\n      ...initialisationProps,\n    });\n\n    return app;\n  });\n\n  const updatePixiScreenStore = (screen: Rectangle) => {\n    batch(() => {\n      setPixiScreenDimensions(screen);\n      setPixiScreenDimensions(\"left\", screen.x);\n      setPixiScreenDimensions(\"top\", screen.y);\n      setPixiScreenDimensions(\"right\", screen.x + screen.width);\n      setPixiScreenDimensions(\"bottom\", screen.y + screen.height);\n    });\n  };\n\n  createEffect(\n    on(appResource, (app) => {\n      if (!app) return;\n      if (props.ref) {\n        // Solid converts the ref prop to a callback function\n        (props.ref as unknown as (arg: any) => void)(app);\n      }\n\n      updatePixiScreenStore(app.renderer.screen);\n\n      const handleResize = () => {\n        updatePixiScreenStore(app.renderer.screen);\n      };\n\n      app.renderer.addListener(\"resize\", handleResize);\n\n      onCleanup(() => {\n        app.renderer.removeListener(\"resize\", handleResize);\n        app.destroy(true, { children: true });\n      });\n    }),\n  );\n\n  return (\n    <Show when={appResource()}>\n      {(app) => (\n        <PixiAppContext.Provider value={app()}>\n          <TickerContext.Provider value={app().ticker}>\n            <PixiScreenContext.Provider value={pixiScreenDimensions}>{props.children}</PixiScreenContext.Provider>\n          </TickerContext.Provider>\n        </PixiAppContext.Provider>\n      )}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Application.\n * It provides context for the `onTick` and `getTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.\n *\n * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `PIXI.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: TickerCallback<Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"onTick must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  ticker.add(tickerCallback);\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n\nconst asyncDelay = async (ticker: Ticker, delayMs: number) => {\n  // TODO: Make this abortable.\n  let timeDelayed = 0;\n\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplication` or `TickerProvider` context.\n *\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\",\n    );\n  }\n  const delayWithTicker = (delayMs: number) => asyncDelay(ticker, delayMs);\n\n  return delayWithTicker;\n};\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\",\n    );\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\n/**\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * @returns An object containing the width and height of the Pixi screen.\n * @throws Will throw an error if not used within a `<PixiApplication>` component.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiScreen = useContext(PixiScreenContext);\n  if (!pixiScreen) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplication\");\n  }\n  return pixiScreen;\n};\n"],"names":["PixiAppContext","createContext","TickerContext","PixiScreenContext","getPixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","pixiScreenDimensions","setPixiScreenDimensions","createStore","width","height","left","right","top","bottom","x","y","appResource","createResource","Application","init","resolution","window","devicePixelRatio","autoDensity","updatePixiScreenStore","screen","batch","createEffect","on","ref","renderer","handleResize","addListener","onCleanup","removeListener","destroy","children","_$createComponent","Show","when","Provider","value","ticker","TickerProvider","getTicker","onTick","tickerCallback","add","remove","asyncDelay","delayMs","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS","createAsyncDelay","delayWithTicker","delay","callback","usePixiScreen","pixiScreen"],"mappings":";;;;AA2BA,MAAMA,iBAAiBC,cAAAA;AACvB,MAAMC,gBAAgBD,cAAAA;AACtB,MAAME,oBAAoBF,cAAAA;AASnB,MAAMG,aAAaA,MAAM;AAC9B,QAAMC,MAAMC,WAAWN,cAAc;AACrC,MAAI,CAACK,KAAK;AACR,UAAM,IAAIE,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAOF;AACT;AAsBO,MAAMG,kBAAkBA,CAACC,UAAgC;AAC9D,QAAM,CAAA,EAAGC,mBAAmB,IAAIC,WAAWF,OAAO,CAAC,OAAO,UAAU,CAAC;AACrE,QAAM,CAACG,sBAAsBC,uBAAuB,IAAIC,YAAkC;AAAA,IACxFC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,OAAO;AAAA,IACPC,KAAK;AAAA,IACLC,QAAQ;AAAA,IACRC,GAAG;AAAA,IACHC,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,CAACC,WAAW,IAAIC,eAAe,YAAY;AAC/C,UAAMnB,MAAM,IAAIoB,YAAAA;AAChB,UAAMpB,IAAIqB,KAAK;AAAA,MACbC,YAAYC,OAAOC;AAAAA,MACnBC,aAAa;AAAA,MACb,GAAGpB;AAAAA,IAAAA,CACJ;AAED,WAAOL;AAAAA,EACT,CAAC;AAED,QAAM0B,wBAAwBA,CAACC,WAAsB;AACnDC,UAAM,MAAM;AACVpB,8BAAwBmB,MAAM;AAC9BnB,8BAAwB,QAAQmB,OAAOX,CAAC;AACxCR,8BAAwB,OAAOmB,OAAOV,CAAC;AACvCT,8BAAwB,SAASmB,OAAOX,IAAIW,OAAOjB,KAAK;AACxDF,8BAAwB,UAAUmB,OAAOV,IAAIU,OAAOhB,MAAM;AAAA,IAC5D,CAAC;AAAA,EACH;AAEAkB,eACEC,GAAGZ,aAAclB,CAAAA,QAAQ;AACvB,QAAI,CAACA,IAAK;AACV,QAAII,MAAM2B,KAAK;AAEZ3B,YAAM2B,IAAsC/B,GAAG;AAAA,IAClD;AAEA0B,0BAAsB1B,IAAIgC,SAASL,MAAM;AAEzC,UAAMM,eAAeA,MAAM;AACzBP,4BAAsB1B,IAAIgC,SAASL,MAAM;AAAA,IAC3C;AAEA3B,QAAIgC,SAASE,YAAY,UAAUD,YAAY;AAE/CE,cAAU,MAAM;AACdnC,UAAIgC,SAASI,eAAe,UAAUH,YAAY;AAClDjC,UAAIqC,QAAQ,MAAM;AAAA,QAAEC,UAAU;AAAA,MAAA,CAAM;AAAA,IACtC,CAAC;AAAA,EACH,CAAC,CACH;AAEA,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEvB,YAAAA;AAAAA,IAAa;AAAA,IAAAoB,UACrBtC,CAAAA,QAAGuC,gBACF5C,eAAe+C,UAAQ;AAAA,MAAA,IAACC,QAAK;AAAA,eAAE3C,IAAAA;AAAAA,MAAK;AAAA,MAAA,IAAAsC,WAAA;AAAA,eAAAC,gBAClC1C,cAAc6C,UAAQ;AAAA,UAAA,IAACC,QAAK;AAAA,mBAAE3C,MAAM4C;AAAAA,UAAM;AAAA,UAAA,IAAAN,WAAA;AAAA,mBAAAC,gBACxCzC,kBAAkB4C,UAAQ;AAAA,cAACC,OAAOpC;AAAAA,cAAoB,IAAA+B,WAAA;AAAA,uBAAGlC,MAAMkC;AAAAA,cAAQ;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAG7E;AAGP;AAUO,MAAMO,iBAAiBA,CAACzC,UAA+B;AAC5D,SAAAmC,gBAAQ1C,cAAc6C,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAEvC,MAAMwC;AAAAA,IAAM;AAAA,IAAA,IAAAN,WAAA;AAAA,aAAGlC,MAAMkC;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;AAYO,MAAMQ,YAAYA,MAAc;AACrC,QAAMF,SAAS3C,WAAWJ,aAAa;AACvC,MAAI,CAAC+C,QAAQ;AACX,UAAM,IAAI1C,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO0C;AACT;AAgBO,MAAMG,SAASA,CAACC,mBAAiD;AACtE,QAAMJ,SAAS3C,WAAWJ,aAAa;AAEvC,MAAI,CAAC+C,QAAQ;AACX,UAAM,IAAI1C,MAAM,kEAAkE;AAAA,EACpF;AAEA0C,SAAOK,IAAID,cAAc;AACzBb,YAAU,MAAM;AACdS,WAAOM,OAAOF,cAAc;AAAA,EAC9B,CAAC;AACH;AAEA,MAAMG,aAAa,OAAOP,QAAgBQ,YAAoB;AAE5D,MAAIC,cAAc;AAElB,MAAIC;AAEJ,QAAMC,UAAU,IAAIC,QAAeC,CAAAA,YAAY;AAC7CH,qBAAiBG;AAAAA,EACnB,CAAC;AAED,QAAMC,mBAAmBA,MAAM;AAC7BL,mBAAeT,OAAOe;AACtB,QAAIN,cAAcD,QAAS;AAC3BE,mBAAAA;AAAAA,EACF;AAEAV,SAAOK,IAAIS,gBAAgB;AAE3B,QAAMH;AAENX,SAAOM,OAAOQ,gBAAgB;AAChC;AAeO,MAAME,mBAAmBA,MAA4C;AAC1E,QAAMhB,SAAS3C,WAAWJ,aAAa;AAEvC,MAAI,CAAC+C,QAAQ;AACX,UAAM,IAAI1C,MACR,+OACF;AAAA,EACF;AACA,QAAM2D,kBAAkBA,CAACT,YAAoBD,WAAWP,QAAQQ,OAAO;AAEvE,SAAOS;AACT;AAgBO,MAAMC,QAAQA,CAACV,SAAiBW,aAAgC;AACrE,QAAMnB,SAAS3C,WAAWJ,aAAa;AACvC,MAAI,CAAC+C,QAAQ;AACX,UAAM,IAAI1C,MACR,+OACF;AAAA,EACF;AAEA,MAAImD,cAAc;AAElB,QAAMK,mBAAmBA,MAAM;AAC7BL,mBAAeT,OAAOe;AACtB,QAAIN,cAAcD,QAAS;AAC3BW,eAAAA;AACAnB,WAAOM,OAAOQ,gBAAgB;AAAA,EAChC;AAEAd,SAAOK,IAAIS,gBAAgB;AAC7B;AASO,MAAMM,gBAAgBA,MAAsC;AACjE,QAAMC,aAAahE,WAAWH,iBAAiB;AAC/C,MAAI,CAACmE,YAAY;AACf,UAAM,IAAI/D,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO+D;AACT;"}

package/dist/pixi-canvas.js

@@ -1,5 +1,6 @@
 import { template, insert, effect, style, className, use } from "solid-js/web";
-import { createRenderEffect, onMount, onCleanup } from "solid-js";
+import { onMount, onCleanup } from "solid-js";
+import { applyProps } from "./component-creation.js";
 import { getPixiApp } from "./pixi-application.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative>`);
 const PixiCanvas = (props) => {
@@ -11,11 +12,7 @@ const PixiCanvas = (props) => {
   pixiApp.canvas.style.left = "0";
   pixiApp.canvas.style.width = "100%";
   pixiApp.canvas.style.height = "100%";
-  createRenderEffect(() => {
-    if (props.children === void 0) {
-      throw new Error("PixiCanvas requires the `PixiStage` component to render.");
-    }
-  });
+  applyProps(pixiApp.stage, props);
   let previousResizeTo;
   let resizeObserver;
   onMount(() => {

package/dist/pixi-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { createRenderEffect, onCleanup, onMount } from \"solid-js\";\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Requires a surrounding `PixiApplication` component.\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.\n */\n\nexport const PixiCanvas = (props: {\n  children: JSX.Element;\n  style?: JSX.CSSProperties | undefined;\n  className?: string;\n}): JSX.Element => {\n  let canvasWrapElement: HTMLDivElement | undefined;\n\n  const pixiApp = getPixiApp();\n  pixiApp.canvas.style.display = \"block\";\n  pixiApp.canvas.style.position = \"absolute\";\n  pixiApp.canvas.style.top = \"0\";\n  pixiApp.canvas.style.left = \"0\";\n  pixiApp.canvas.style.width = \"100%\";\n  pixiApp.canvas.style.height = \"100%\";\n\n  createRenderEffect(() => {\n    if (props.children === undefined) {\n      throw new Error(\"PixiCanvas requires the `PixiStage` component to render.\");\n    }\n  });\n\n  let previousResizeTo: typeof pixiApp.resizeTo;\n  let resizeObserver: ResizeObserver | undefined;\n\n  onMount(() => {\n    if (!canvasWrapElement) return;\n    previousResizeTo = pixiApp.resizeTo;\n    pixiApp.resizeTo = canvasWrapElement;\n    pixiApp.queueResize();\n    resizeObserver = new ResizeObserver(() => {\n      pixiApp.queueResize();\n    });\n    resizeObserver.observe(canvasWrapElement);\n  });\n\n  onCleanup(() => {\n    if (!canvasWrapElement) return;\n    pixiApp.resizeTo = previousResizeTo;\n    resizeObserver?.disconnect();\n    resizeObserver = undefined;\n  });\n\n  return (\n    <div\n      ref={canvasWrapElement}\n      style={{\n        position: \"relative\",\n        /* Disables the callout/menu on long-press */\n        [\"-webkit-touch-callout\"]: \"none\",\n        /* Disables text selection */\n        [\"-webkit-user-select\"]: \"none\",\n        [\"user-select\"]: \"none\",\n        ...(typeof props.style === \"object\" ? props.style : {}),\n      }}\n      class={props.className}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","canvas","style","display","position","top","left","width","height","createRenderEffect","children","undefined","Error","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;AAiBO,MAAMA,aAAaA,CAACC,UAIR;AACjB,MAAIC;AAEJ,QAAMC,UAAUC,WAAAA;AAChBD,UAAQE,OAAOC,MAAMC,UAAU;AAC/BJ,UAAQE,OAAOC,MAAME,WAAW;AAChCL,UAAQE,OAAOC,MAAMG,MAAM;AAC3BN,UAAQE,OAAOC,MAAMI,OAAO;AAC5BP,UAAQE,OAAOC,MAAMK,QAAQ;AAC7BR,UAAQE,OAAOC,MAAMM,SAAS;AAE9BC,qBAAmB,MAAM;AACvB,QAAIZ,MAAMa,aAAaC,QAAW;AAChC,YAAM,IAAIC,MAAM,0DAA0D;AAAA,IAC5E;AAAA,EACF,CAAC;AAED,MAAIC;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACjB,kBAAmB;AACxBe,uBAAmBd,QAAQiB;AAC3BjB,YAAQiB,WAAWlB;AACnBC,YAAQkB,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCnB,cAAQkB,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQrB,iBAAiB;AAAA,EAC1C,CAAC;AAEDsB,YAAU,MAAM;AACd,QAAI,CAACtB,kBAAmB;AACxBC,YAAQiB,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBH;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAW,OAAAC,OAAAA;AAAA,QAAAC,QAES1B;AAAiB,WAAA0B,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBxB,oBAAiBwB;AAAAI,WAAAJ,MAAA,MAYrBvB,QAAQE,MAAM;AAAA0B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAXR;AAAA;AAAA,QAGL,CAAC,uBAAuB,GAAG;AAAA;AAAA,QAE3B,CAAC,qBAAqB,GAAG;AAAA,QACzB,CAAC,aAAa,GAAG;AAAA,QACjB,GAAI,OAAOhC,MAAMK,UAAU,WAAWL,MAAMK,QAAQ,CAAA;AAAA,MAAC,GACtD4B,OACMjC,MAAMkC;AAASH,UAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,CAAA;AAAAF,eAAAF,IAAAM,KAAAC,UAAAb,MAAAM,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAArB;AAAAA,MAAAuB,GAAAvB;AAAAA,IAAAA,CAAA;AAAA,WAAAW;AAAAA,EAAA,GAAA;AAK5B;"}
+{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { onCleanup, onMount } from \"solid-js\";\nimport { applyProps } from \"./component-creation\";\nimport { getPixiApp } from \"./pixi-application\";\n\nexport type PixiCanvasProps = {\n  children: JSX.Element;\n  style?: JSX.CSSProperties | undefined;\n  className?: string;\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Requires a surrounding `PixiApplication` component.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n  let canvasWrapElement: HTMLDivElement | undefined;\n\n  const pixiApp = getPixiApp();\n  pixiApp.canvas.style.display = \"block\";\n  pixiApp.canvas.style.position = \"absolute\";\n  pixiApp.canvas.style.top = \"0\";\n  pixiApp.canvas.style.left = \"0\";\n  pixiApp.canvas.style.width = \"100%\";\n  pixiApp.canvas.style.height = \"100%\";\n\n  applyProps(pixiApp.stage, props);\n\n  let previousResizeTo: typeof pixiApp.resizeTo;\n  let resizeObserver: ResizeObserver | undefined;\n\n  onMount(() => {\n    if (!canvasWrapElement) return;\n    previousResizeTo = pixiApp.resizeTo;\n    pixiApp.resizeTo = canvasWrapElement;\n    pixiApp.queueResize();\n    resizeObserver = new ResizeObserver(() => {\n      pixiApp.queueResize();\n    });\n    resizeObserver.observe(canvasWrapElement);\n  });\n\n  onCleanup(() => {\n    if (!canvasWrapElement) return;\n    pixiApp.resizeTo = previousResizeTo;\n    resizeObserver?.disconnect();\n    resizeObserver = undefined;\n  });\n\n  return (\n    <div\n      ref={canvasWrapElement}\n      style={{\n        position: \"relative\",\n        /* Disables the callout/menu on long-press */\n        [\"-webkit-touch-callout\"]: \"none\",\n        /* Disables text selection */\n        [\"-webkit-user-select\"]: \"none\",\n        [\"user-select\"]: \"none\",\n        ...(typeof props.style === \"object\" ? props.style : {}),\n      }}\n      class={props.className}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","canvas","style","display","position","top","left","width","height","applyProps","stage","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","undefined","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;;AAwBO,MAAMA,aAAaA,CAACC,UAAwC;AACjE,MAAIC;AAEJ,QAAMC,UAAUC,WAAAA;AAChBD,UAAQE,OAAOC,MAAMC,UAAU;AAC/BJ,UAAQE,OAAOC,MAAME,WAAW;AAChCL,UAAQE,OAAOC,MAAMG,MAAM;AAC3BN,UAAQE,OAAOC,MAAMI,OAAO;AAC5BP,UAAQE,OAAOC,MAAMK,QAAQ;AAC7BR,UAAQE,OAAOC,MAAMM,SAAS;AAE9BC,aAAWV,QAAQW,OAAOb,KAAK;AAE/B,MAAIc;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACf,kBAAmB;AACxBa,uBAAmBZ,QAAQe;AAC3Bf,YAAQe,WAAWhB;AACnBC,YAAQgB,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCjB,cAAQgB,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQnB,iBAAiB;AAAA,EAC1C,CAAC;AAEDoB,YAAU,MAAM;AACd,QAAI,CAACpB,kBAAmB;AACxBC,YAAQe,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBQ;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAESzB;AAAiB,WAAAyB,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBvB,oBAAiBuB;AAAAI,WAAAJ,MAAA,MAYrBtB,QAAQE,MAAM;AAAAyB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAXR;AAAA;AAAA,QAGL,CAAC,uBAAuB,GAAG;AAAA;AAAA,QAE3B,CAAC,qBAAqB,GAAG;AAAA,QACzB,CAAC,aAAa,GAAG;AAAA,QACjB,GAAI,OAAO/B,MAAMK,UAAU,WAAWL,MAAMK,QAAQ,CAAA;AAAA,MAAC,GACtD2B,OACMhC,MAAMiC;AAASH,UAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,CAAA;AAAAF,eAAAF,IAAAM,KAAAC,UAAAb,MAAAM,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAX;AAAAA,MAAAa,GAAAb;AAAAA,IAAAA,CAAA;AAAA,WAAAC;AAAAA,EAAA,GAAA;AAK5B;"}

package/dist/types/component-creation.d.ts

@@ -2,6 +2,14 @@ import type * as Pixi from "pixi.js";
 import type { JSX, Ref } from "solid-js";
 import type { PixiEventHandlerMap } from "./event-names";
 import type { PointAxisPropName } from "./point-property-names";
+/**
+ * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.
+ *
+ * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.
+ *
+ * @example PixiComponentProps<Pixi.SpriteOptions>.
+ */
+export type PixiComponentProps<ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, "children">;
 /**
  * Prop definition for components that CAN have children
  */

package/dist/types/index.d.ts

@@ -1,11 +1,10 @@
-export type { ContainerProps, LeafProps } from "./component-creation";
+export type { ContainerProps, LeafProps, PixiComponentProps } from "./component-creation";
 export type { PixiEventHandlerMap } from "./event-names";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./event-names";
 export { onResize } from "./on-resize";
 export type { PixiApplicationProps, PixiScreenDimensions } from "./pixi-application";
 export { createAsyncDelay, delay, getPixiApp, getTicker, onTick, PixiApplication, TickerProvider, usePixiScreen, } from "./pixi-application";
+export type { PixiCanvasProps } from "./pixi-canvas";
 export { PixiCanvas } from "./pixi-canvas";
 export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
-export type { PixiStageProps } from "./pixi-stage";
-export { PixiStage } from "./pixi-stage";
 export type { PointAxisPropName } from "./point-property-names";

package/dist/types/pixi-application.d.ts

@@ -29,9 +29,9 @@ export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" |
     children?: JSX.Element;
 };
 /**
- * A SolidJS component that creates and manages a PIXI.Application instance.
+ * A SolidJS component that creates a PIXI.Application instance and works as a context provider.
  * It provides the application instance through context to be used by child components
- * and custom hooks like `getPixiApp`, `onTick`, and `getTicker`.
+ * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.
  *
  * This component should only be used once in your application.
  *

package/dist/types/pixi-canvas.d.ts

@@ -1,4 +1,9 @@
 import type { JSX } from "solid-js";
+export type PixiCanvasProps = {
+    children: JSX.Element;
+    style?: JSX.CSSProperties | undefined;
+    className?: string;
+};
 /**
  * PixiCanvas
  *
@@ -6,13 +11,9 @@ import type { JSX } from "solid-js";
  * and automatically resizes it.
  *
  * - Requires a surrounding `PixiApplication` component.
- * - Requires a `PixiStage` component as a child.
+ * - Accepts pixi-solid components as children, which will be rendered inside the canvas.
  *
  * Props:
- * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.
+ * @param props.children - JSX content to render inside the canvas wrapper.
  */
-export declare const PixiCanvas: (props: {
-    children: JSX.Element;
-    style?: JSX.CSSProperties | undefined;
-    className?: string;
-}) => JSX.Element;
+export declare const PixiCanvas: (props: PixiCanvasProps) => JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixi-solid",
   "private": false,
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "A library to write PixiJS applications with SolidJS",
   "author": "Luke Thompson",
   "license": "MIT",

package/dist/pixi-stage.js

@@ -1,12 +0,0 @@
-import { memo } from "solid-js/web";
-import { applyProps } from "./component-creation.js";
-import { getPixiApp } from "./pixi-application.js";
-const PixiStage = (props) => {
-  const pixiApp = getPixiApp();
-  applyProps(pixiApp.stage, props);
-  return memo(() => pixiApp.stage);
-};
-export {
-  PixiStage
-};
-//# sourceMappingURL=pixi-stage.js.map

package/dist/pixi-stage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pixi-stage.js","sources":["../src/pixi-stage.tsx"],"sourcesContent":["import type { Container, ContainerOptions } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { applyProps } from \"./component-creation\";\nimport type { PixiEventHandlerMap } from \"./event-names\";\nimport { getPixiApp } from \"./pixi-application\";\n\nexport type PixiStageProps = PixiEventHandlerMap &\n  Omit<ContainerOptions, \"children\"> & {\n    ref?: Ref<Container>;\n    children?: JSX.Element;\n  };\n\n/**\n * PixiStage\n *\n * The root container for rendering Pixi display objects. This component\n * uses the application stage (`pixiApp.stage`) as the mount point and\n * applies props and event handlers to it.\n *\n * Props:\n * - `ref` (optional): receives the stage container reference.\n * - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.\n * - Any other container options supported by Pixi may be passed.\n *\n * Children passed to `PixiStage` are inserted into the application stage.\n */\nexport const PixiStage = (props: PixiStageProps): JSX.Element => {\n  const pixiApp = getPixiApp();\n\n  applyProps(pixiApp.stage, props);\n\n  return <>{pixiApp.stage}</>;\n};\n"],"names":["PixiStage","props","pixiApp","getPixiApp","applyProps","stage","_$memo"],"mappings":";;;AA0BO,MAAMA,YAAYA,CAACC,UAAuC;AAC/D,QAAMC,UAAUC,WAAAA;AAEhBC,aAAWF,QAAQG,OAAOJ,KAAK;AAE/B,SAAAK,KAAA,MAAUJ,QAAQG,KAAK;AACzB;"}

package/dist/types/pixi-stage.d.ts

@@ -1,22 +0,0 @@
-import type { Container, ContainerOptions } from "pixi.js";
-import type { JSX, Ref } from "solid-js";
-import type { PixiEventHandlerMap } from "./event-names";
-export type PixiStageProps = PixiEventHandlerMap & Omit<ContainerOptions, "children"> & {
-    ref?: Ref<Container>;
-    children?: JSX.Element;
-};
-/**
- * PixiStage
- *
- * The root container for rendering Pixi display objects. This component
- * uses the application stage (`pixiApp.stage`) as the mount point and
- * applies props and event handlers to it.
- *
- * Props:
- * - `ref` (optional): receives the stage container reference.
- * - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.
- * - Any other container options supported by Pixi may be passed.
- *
- * Children passed to `PixiStage` are inserted into the application stage.
- */
-export declare const PixiStage: (props: PixiStageProps) => JSX.Element;