pixi-solid 0.1.15 → 0.1.17

package/dist/components/component-factories.js

@@ -1,6 +1,7 @@
-import { splitProps, onCleanup } from "solid-js";
+import { splitProps, createRenderEffect, on, onCleanup } from "solid-js";
 import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./bind-props/event-names.js";
 import { COMMON_POINT_PROP_AXIS_NAMES, ANCHOR_POINT_PROP_AXIS_NAMES, TILING_POINT_PROP_AXIS_NAMES } from "./bind-props/point-property-names.js";
+import { getTicker } from "../pixi-application/get-ticker.js";
 import { bindInitialisationProps, bindRuntimeProps } from "./bind-props/bind-props.js";
 const SOLID_PROP_KEYS = ["ref", "as", "children"];
 const CONTAINER_RUNTIME_KEYS = [
@@ -51,11 +52,39 @@ const createSpriteComponent = (PixiClass) => {
     bindInitialisationProps(instance, initialisationProps);
     bindRuntimeProps(instance, runtimeProps);
     onCleanup(() => {
-      if ("attach" in instance) {
-        instance.destroy({ children: false });
-      } else {
-        instance.destroy({ children: true });
-      }
+      instance.destroy({ children: true });
+    });
+    return instance;
+  };
+};
+const createAnimatedSpriteComponent = (PixiClass) => {
+  return (props) => {
+    const [runtimeProps, update, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS, [
+      "autoUpdate"
+    ]);
+    const instance = props.as || new PixiClass(initialisationProps);
+    instance.autoUpdate = false;
+    createRenderEffect(
+      on(
+        () => update.autoUpdate,
+        (autoUpdate) => {
+          const updateInstance = (ticker) => {
+            instance.update(ticker);
+          };
+          if (autoUpdate !== false) {
+            const ticker = getTicker();
+            ticker.add(updateInstance);
+            onCleanup(() => {
+              ticker.remove(updateInstance);
+            });
+          }
+        }
+      )
+    );
+    bindInitialisationProps(instance, initialisationProps);
+    bindRuntimeProps(instance, runtimeProps);
+    onCleanup(() => {
+      instance.destroy({ children: true });
     });
     return instance;
   };
@@ -67,17 +96,14 @@ const createTilingSpriteComponent = (PixiClass) => {
     bindInitialisationProps(instance, initialisationProps);
     bindRuntimeProps(instance, runtimeProps);
     onCleanup(() => {
-      if ("attach" in instance) {
-        instance.destroy({ children: false });
-      } else {
-        instance.destroy({ children: true });
-      }
+      instance.destroy({ children: true });
     });
     return instance;
   };
 };
 export {
   SOLID_PROP_KEYS,
+  createAnimatedSpriteComponent,
   createContainerComponent,
   createLeafComponent,
   createSpriteComponent,

package/dist/components/component-factories.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps, onCleanup } from \"solid-js\";\n\nimport { bindInitialisationProps, bindRuntimeProps } from \"./bind-props\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type {\n  CommonPointAxisPropName,\n  AnchorPointAxisPropName,\n  TilingPointAxisPropName,\n} from \"./bind-props/point-property-names\";\nimport {\n  COMMON_POINT_PROP_AXIS_NAMES,\n  ANCHOR_POINT_PROP_AXIS_NAMES,\n  TILING_POINT_PROP_AXIS_NAMES,\n} from \"./bind-props/point-property-names\";\n\n/**\n * Common point axis properties available on all Container-based components\n */\nexport type CommonPointAxisProps = Partial<Record<CommonPointAxisPropName, number>>;\n\n/**\n * Anchor point axis properties available on Sprite-like components\n */\nexport type AnchorPointAxisProps = Partial<Record<AnchorPointAxisPropName, number>>;\n\n/**\n * Tiling point axis properties available on TilingSprite\n */\nexport type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, number>>;\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 & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n    children?: JSX.Element;\n  };\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 Sprite-like components (includes anchor properties)\n */\nexport type SpriteProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n  };\n\n/**\n * Prop definition for TilingSprite (includes anchor and tiling properties)\n */\nexport type TilingSpriteProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  TilingPointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n  };\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// Combined keys for splitting props\nconst CONTAINER_RUNTIME_KEYS = [\n  ...SOLID_PROP_KEYS,\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n] as const;\n\n// Sprite components don't accept \"children\" since they can't have children\nconst SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n] as const;\n\nconst TILING_SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n  props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n  return (props): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, CONTAINER_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\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 createSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createTilingSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, TILING_SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\n\n    return instance as InstanceType & JSX.Element;\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":";;;;AAyFO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAGvD,MAAM,yBAAyB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,6BAA6B;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,sBAAsB;AAEpF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,UAAI,YAAY,UAAU;AAExB,iBAAS,QAAQ,EAAE,UAAU,MAAA,CAAO;AAAA,MACtC,OAAO;AACL,iBAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,MACrC;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;AAEO,MAAM,wBAAwB,CAInC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,mBAAmB;AAEjF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,UAAI,YAAY,UAAU;AAExB,iBAAS,QAAQ,EAAE,UAAU,MAAA,CAAO;AAAA,MACtC,OAAO;AACL,iBAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,MACrC;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AACF;AAEO,MAAM,8BAA8B,CAIzC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,0BAA0B;AAExF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,UAAI,YAAY,UAAU;AAExB,iBAAS,QAAQ,EAAE,UAAU,MAAA,CAAO;AAAA,MACtC,OAAO;AACL,iBAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,MACrC;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps, onCleanup } from \"solid-js\";\n\nimport { getTicker } from \"../pixi-application\";\n\nimport { bindInitialisationProps, bindRuntimeProps } from \"./bind-props\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type {\n  CommonPointAxisPropName,\n  AnchorPointAxisPropName,\n  TilingPointAxisPropName,\n} from \"./bind-props/point-property-names\";\nimport {\n  COMMON_POINT_PROP_AXIS_NAMES,\n  ANCHOR_POINT_PROP_AXIS_NAMES,\n  TILING_POINT_PROP_AXIS_NAMES,\n} from \"./bind-props/point-property-names\";\n\n/**\n * Common point axis properties available on all Container-based components\n */\nexport type CommonPointAxisProps = Partial<Record<CommonPointAxisPropName, number>>;\n\n/**\n * Anchor point axis properties available on Sprite-like components\n */\nexport type AnchorPointAxisProps = Partial<Record<AnchorPointAxisPropName, number>>;\n\n/**\n * Tiling point axis properties available on TilingSprite\n */\nexport type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, number>>;\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 & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps &\n  Record<string, unknown> & {\n    ref?: Ref<Component>;\n    as?: Component;\n    children?: JSX.Element;\n  };\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 Sprite-like components (includes anchor properties)\n */\nexport type SpriteProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n  };\n\nexport type AnimatedSpriteProps<Component> = SpriteProps<Component> &\n  Pick<Pixi.AnimatedSpriteOptions, \"autoUpdate\">;\n\ntype AnimatedSpriteLike = Pixi.Container & {\n  autoUpdate: boolean;\n  update: (ticker: Pixi.Ticker) => void;\n};\n\n/**\n * Prop definition for TilingSprite (includes anchor and tiling properties)\n */\nexport type TilingSpriteProps<Component> = PixiEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  TilingPointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n  };\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// Combined keys for splitting props\nconst CONTAINER_RUNTIME_KEYS = [\n  ...SOLID_PROP_KEYS,\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n] as const;\n\n// Sprite components don't accept \"children\" since they can't have children\nconst SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n] as const;\n\nconst TILING_SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n  props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n  return (props): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, CONTAINER_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\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 createSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createAnimatedSpriteComponent = <\n  InstanceType extends AnimatedSpriteLike,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    // Specifically separate `autoUpdate` as we handle it manually below.\n    const [runtimeProps, update, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS, [\n      \"autoUpdate\",\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    // Set this to false to override Pixi's default shared ticker behaviour.\n    instance.autoUpdate = false;\n\n    createRenderEffect(\n      on(\n        () => update.autoUpdate,\n        (autoUpdate) => {\n          const updateInstance = (ticker: Pixi.Ticker) => {\n            instance.update(ticker);\n          };\n\n          if (autoUpdate !== false) {\n            const ticker = getTicker();\n            ticker.add(updateInstance);\n            onCleanup(() => {\n              ticker.remove(updateInstance);\n            });\n          }\n        },\n      ),\n    );\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createTilingSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, TILING_SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\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    onCleanup(() => {\n      instance.destroy();\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"names":[],"mappings":";;;;;AAoGO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAGvD,MAAM,yBAAyB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,6BAA6B;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,sBAAsB;AAEpF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,UAAI,YAAY,UAAU;AAExB,iBAAS,QAAQ,EAAE,UAAU,MAAA,CAAO;AAAA,MACtC,OAAO;AACL,iBAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,MACrC;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;AAEO,MAAM,wBAAwB,CAInC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,mBAAmB;AAEjF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,eAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,IACrC,CAAC;AAED,WAAO;AAAA,EACT;AACF;AAEO,MAAM,gCAAgC,CAI3C,cACG;AACH,SAAO,CACL,UAC+B;AAE/B,UAAM,CAAC,cAAc,QAAQ,mBAAmB,IAAI,WAAW,OAAO,qBAAqB;AAAA,MACzF;AAAA,IAAA,CACD;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAGrE,aAAS,aAAa;AAEtB;AAAA,MACE;AAAA,QACE,MAAM,OAAO;AAAA,QACb,CAAC,eAAe;AACd,gBAAM,iBAAiB,CAAC,WAAwB;AAC9C,qBAAS,OAAO,MAAM;AAAA,UACxB;AAEA,cAAI,eAAe,OAAO;AACxB,kBAAM,SAAS,UAAA;AACf,mBAAO,IAAI,cAAc;AACzB,sBAAU,MAAM;AACd,qBAAO,OAAO,cAAc;AAAA,YAC9B,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAGF,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,eAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,IACrC,CAAC;AAED,WAAO;AAAA,EACT;AACF;AAEO,MAAM,8BAA8B,CAIzC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO,0BAA0B;AAExF,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,cAAU,MAAM;AACd,eAAS,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,IACrC,CAAC;AAED,WAAO;AAAA,EACT;AACF;"}

package/dist/components/components.js

@@ -1,6 +1,6 @@
-import { BitmapText as BitmapText$1, HTMLText as HTMLText$1, MeshPlane as MeshPlane$1, MeshRope as MeshRope$1, NineSliceSprite as NineSliceSprite$1, ParticleContainer as ParticleContainer$1, PerspectiveMesh as PerspectiveMesh$1, RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, Sprite as Sprite$1, Text as Text$1, AnimatedSprite as AnimatedSprite$1, Container as Container$1, Graphics as Graphics$1, TilingSprite as TilingSprite$1 } from "pixi.js";
-import { createSpriteComponent, createContainerComponent, createLeafComponent, createTilingSpriteComponent } from "./component-factories.js";
-const AnimatedSprite = createSpriteComponent(AnimatedSprite$1);
+import { HTMLText as HTMLText$1, MeshPlane as MeshPlane$1, MeshRope as MeshRope$1, NineSliceSprite as NineSliceSprite$1, ParticleContainer as ParticleContainer$1, PerspectiveMesh as PerspectiveMesh$1, RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, Sprite as Sprite$1, Text as Text$1, AnimatedSprite as AnimatedSprite$1, BitmapText as BitmapText$1, Container as Container$1, Graphics as Graphics$1, TilingSprite as TilingSprite$1 } from "pixi.js";
+import { createAnimatedSpriteComponent, createSpriteComponent, createContainerComponent, createLeafComponent, createTilingSpriteComponent } from "./component-factories.js";
+const AnimatedSprite = createAnimatedSpriteComponent(AnimatedSprite$1);
 const BitmapText = createSpriteComponent(BitmapText$1);
 const Container = createContainerComponent(Container$1);
 const Graphics = createLeafComponent(Graphics$1);

package/dist/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../src/components/components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n  AnimatedSprite as PixiAnimatedSprite,\n  BitmapText as PixiBitmapText,\n  Container as PixiContainer,\n  Graphics as PixiGraphics,\n  HTMLText as PixiHTMLText,\n  MeshPlane as PixiMeshPlane,\n  MeshRope as PixiMeshRope,\n  NineSliceSprite as PixiNineSliceSprite,\n  ParticleContainer as PixiParticleContainer,\n  PerspectiveMesh as PixiPerspectiveMesh,\n  RenderContainer as PixiRenderContainer,\n  RenderLayer as PixiRenderLayer,\n  Sprite as PixiSprite,\n  Text as PixiText,\n  TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\n\nimport {\n  createContainerComponent,\n  createLeafComponent,\n  createSpriteComponent,\n  createTilingSpriteComponent,\n} from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createSpriteComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n  PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createSpriteComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n  PixiContainer,\n);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createSpriteComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createSpriteComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createSpriteComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createSpriteComponent<\n  PixiNineSliceSprite,\n  Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<\n  PixiParticleContainer,\n  Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createSpriteComponent<\n  PixiPerspectiveMesh,\n  Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<\n  PixiRenderContainer,\n  Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n  PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createSpriteComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createSpriteComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createTilingSpriteComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n  PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["AnimatedSprite","createSpriteComponent","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","createLeafComponent","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","createTilingSpriteComponent","PixiTilingSprite"],"mappings":";;AA6BO,MAAMA,iBAAiBC,sBAC5BC,gBACF;AAIO,MAAMC,aAAaF,sBAAwDG,YAAc;AAIzF,MAAMC,YAAYC,yBACvBC,WACF;AAKO,MAAMC,WAAWC,oBAAwDC,UAAY;AAIrF,MAAMC,WAAWV,sBAA0DW,UAAY;AAKvF,MAAMC,YAAYZ,sBAA4Da,WAAa;AAK3F,MAAMC,WAAWd,sBAA0De,UAAY;AAKvF,MAAMC,kBAAkBhB,sBAG7BiB,iBAAmB;AAOd,MAAMC,oBAAoBV,oBAG/BW,mBAAqB;AAKhB,MAAMC,kBAAkBpB,sBAG7BqB,iBAAmB;AAKd,MAAMC,kBAAkBjB,yBAG7BkB,iBAAmB;AAKd,MAAMC,cAAcnB,yBACzBoB,aACF;AAKO,MAAMC,SAAS1B,sBAAsD2B,QAAU;AAI/E,MAAMC,OAAO5B,sBAAwD6B,MAAQ;AAK7E,MAAMC,eAAeC,4BAC1BC,cACF;"}
+{"version":3,"file":"components.js","sources":["../../src/components/components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n  AnimatedSprite as PixiAnimatedSprite,\n  BitmapText as PixiBitmapText,\n  Container as PixiContainer,\n  Graphics as PixiGraphics,\n  HTMLText as PixiHTMLText,\n  MeshPlane as PixiMeshPlane,\n  MeshRope as PixiMeshRope,\n  NineSliceSprite as PixiNineSliceSprite,\n  ParticleContainer as PixiParticleContainer,\n  PerspectiveMesh as PixiPerspectiveMesh,\n  RenderContainer as PixiRenderContainer,\n  RenderLayer as PixiRenderLayer,\n  Sprite as PixiSprite,\n  Text as PixiText,\n  TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\n\nimport {\n  createAnimatedSpriteComponent,\n  createContainerComponent,\n  createLeafComponent,\n  createSpriteComponent,\n  createTilingSpriteComponent,\n} from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createAnimatedSpriteComponent<\n  PixiAnimatedSprite,\n  Pixi.AnimatedSpriteOptions\n>(PixiAnimatedSprite);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createSpriteComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n  PixiContainer,\n);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createSpriteComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createSpriteComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createSpriteComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createSpriteComponent<\n  PixiNineSliceSprite,\n  Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<\n  PixiParticleContainer,\n  Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createSpriteComponent<\n  PixiPerspectiveMesh,\n  Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<\n  PixiRenderContainer,\n  Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n  PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createSpriteComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createSpriteComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createTilingSpriteComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n  PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n\n// TODO: Should we export the built in filters as component?\n/**\n * AlphaFilter\tApplies uniform transparency\n * BlurFilter\tGaussian blur\n * ColorMatrixFilter\tColor transformations via a 5x4 matrix\n * DisplacementFilter\tDistorts using a displacement map texture\n * NoiseFilter\tAdds random noise for a grainy look\n * */\n"],"names":["AnimatedSprite","createAnimatedSpriteComponent","PixiAnimatedSprite","BitmapText","createSpriteComponent","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","createLeafComponent","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","createTilingSpriteComponent","PixiTilingSprite"],"mappings":";;AA8BO,MAAMA,iBAAiBC,8BAG5BC,gBAAkB;AAIb,MAAMC,aAAaC,sBAAwDC,YAAc;AAIzF,MAAMC,YAAYC,yBACvBC,WACF;AAKO,MAAMC,WAAWC,oBAAwDC,UAAY;AAIrF,MAAMC,WAAWR,sBAA0DS,UAAY;AAKvF,MAAMC,YAAYV,sBAA4DW,WAAa;AAK3F,MAAMC,WAAWZ,sBAA0Da,UAAY;AAKvF,MAAMC,kBAAkBd,sBAG7Be,iBAAmB;AAOd,MAAMC,oBAAoBV,oBAG/BW,mBAAqB;AAKhB,MAAMC,kBAAkBlB,sBAG7BmB,iBAAmB;AAKd,MAAMC,kBAAkBjB,yBAG7BkB,iBAAmB;AAKd,MAAMC,cAAcnB,yBACzBoB,aACF;AAKO,MAAMC,SAASxB,sBAAsDyB,QAAU;AAI/E,MAAMC,OAAO1B,sBAAwD2B,MAAQ;AAK7E,MAAMC,eAAeC,4BAC1BC,cACF;"}

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/dist/types/components/component-factories.d.ts

@@ -25,7 +25,7 @@ export type PixiComponentProps<ComponentOptions extends Pixi.ContainerOptions =
 /**
  * Prop definition for basic Container components (position, scale, pivot, skew only)
  */
-export type ContainerProps<Component> = PixiEventHandlerMap & CommonPointAxisProps & {
+export type ContainerProps<Component> = PixiEventHandlerMap & CommonPointAxisProps & Record<string, unknown> & {
     ref?: Ref<Component>;
     as?: Component;
     children?: JSX.Element;
@@ -41,6 +41,11 @@ export type SpriteProps<Component> = PixiEventHandlerMap & CommonPointAxisProps
     ref?: Ref<Component>;
     as?: Component;
 };
+export type AnimatedSpriteProps<Component> = SpriteProps<Component> & Pick<Pixi.AnimatedSpriteOptions, "autoUpdate">;
+type AnimatedSpriteLike = Pixi.Container & {
+    autoUpdate: boolean;
+    update: (ticker: Pixi.Ticker) => void;
+};
 /**
  * Prop definition for TilingSprite (includes anchor and tiling properties)
  */
@@ -59,5 +64,7 @@ export declare const SOLID_PROP_KEYS: readonly ["ref", "as", "children"];
 export declare const createContainerComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => ((props: Omit<OptionsType, "children"> & ContainerProps<InstanceType>) => InstanceType & JSX.Element);
 export declare const createLeafComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: Omit<OptionsType, "children"> & LeafProps<InstanceType>) => InstanceType & JSX.Element;
 export declare const createSpriteComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: Omit<OptionsType, "children"> & SpriteProps<InstanceType>) => InstanceType & JSX.Element;
+export declare const createAnimatedSpriteComponent: <InstanceType extends AnimatedSpriteLike, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: Omit<OptionsType, "children"> & AnimatedSpriteProps<InstanceType>) => InstanceType & JSX.Element;
 export declare const createTilingSpriteComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: Omit<OptionsType, "children"> & TilingSpriteProps<InstanceType>) => InstanceType & JSX.Element;
 export declare const createFilterComponent: <InstanceType extends Pixi.Filter, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: OptionsType & FilterProps<InstanceType>) => InstanceType & JSX.Element;
+export {};

package/dist/types/components/component-factories.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/components.d.ts

@@ -5,7 +5,7 @@ import type * as Pixi from "pixi.js";
 export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Partial<Record<"anchorX" | "anchorY", number>> & {
     ref?: import("solid-js").Ref<Pixi.AnimatedSprite> | undefined;
     as?: Pixi.AnimatedSprite | undefined;
-}) => Pixi.AnimatedSprite & import("solid-js").JSX.Element;
+} & Pick<Pixi.AnimatedSpriteOptions, "autoUpdate">) => Pixi.AnimatedSprite & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.BitmapText`.
  */
@@ -16,7 +16,7 @@ export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, P
 /**
  * A SolidJS component that renders a `PIXI.Container`.
  */
-export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.ContainerChild>, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & {
+export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.ContainerChild>, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
     ref?: import("solid-js").Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
     as?: Pixi.Container<Pixi.ContainerChild> | undefined;
     children?: import("solid-js").JSX.Element;
@@ -70,7 +70,7 @@ export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions,
 /**
  * A SolidJS component that renders a `PIXI.RenderContainer`.
  */
-export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & {
+export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
     ref?: import("solid-js").Ref<Pixi.RenderContainer> | undefined;
     as?: Pixi.RenderContainer | undefined;
     children?: import("solid-js").JSX.Element;
@@ -78,7 +78,7 @@ export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions,
 /**
  * A SolidJS component that renders a `PIXI.RenderLayer`.
  */
-export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & {
+export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
     ref?: import("solid-js").Ref<Pixi.RenderLayer> | undefined;
     as?: Pixi.RenderLayer | undefined;
     children?: import("solid-js").JSX.Element;
@@ -104,3 +104,10 @@ export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "child
     ref?: import("solid-js").Ref<Pixi.TilingSprite> | undefined;
     as?: Pixi.TilingSprite | undefined;
 }) => Pixi.TilingSprite & import("solid-js").JSX.Element;
+/**
+ * AlphaFilter	Applies uniform transparency
+ * BlurFilter	Gaussian blur
+ * ColorMatrixFilter	Color transformations via a 5x4 matrix
+ * DisplacementFilter	Distorts using a displacement map texture
+ * NoiseFilter	Adds random noise for a grainy look
+ * */

package/dist/types/components/index.d.ts

@@ -1,5 +1,5 @@
 export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, Sprite, Text, RenderContainer, RenderLayer, TilingSprite, } from "./components";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES, bindRuntimeProps, bindInitialisationProps, } from "./bind-props";
 export type { PixiEventHandlerMap, PointAxisPropName, CommonPointAxisPropName, AnchorPointAxisPropName, TilingPointAxisPropName, } from "./bind-props";
-export type { ContainerProps, LeafProps, SpriteProps, TilingSpriteProps, PixiComponentProps, CommonPointAxisProps, AnchorPointAxisProps, TilingPointAxisProps, } from "./component-factories";
-export { createContainerComponent, createLeafComponent, createSpriteComponent, createTilingSpriteComponent, createFilterComponent, } from "./component-factories";
+export type { AnimatedSpriteProps, ContainerProps, LeafProps, SpriteProps, TilingSpriteProps, PixiComponentProps, CommonPointAxisProps, AnchorPointAxisProps, TilingPointAxisProps, } from "./component-factories";
+export { createAnimatedSpriteComponent, createContainerComponent, createLeafComponent, createSpriteComponent, createTilingSpriteComponent, createFilterComponent, } from "./component-factories";

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { ContainerProps, LeafProps, SpriteProps, TilingSpriteProps, PixiComponentProps, CommonPointAxisProps, AnchorPointAxisProps, TilingPointAxisProps, PixiEventHandlerMap, PointAxisPropName, CommonPointAxisPropName, AnchorPointAxisPropName, TilingPointAxisPropName, } from "./components";
+export type { AnimatedSpriteProps, ContainerProps, LeafProps, SpriteProps, TilingSpriteProps, PixiComponentProps, CommonPointAxisProps, AnchorPointAxisProps, TilingPointAxisProps, PixiEventHandlerMap, PointAxisPropName, CommonPointAxisPropName, AnchorPointAxisPropName, TilingPointAxisPropName, } from "./components";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./components";
 export { onResize } from "./on-resize";
 export { onTick } from "./on-tick";

package/package.json

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