pixi-solid 0.1.13 → 0.1.15

package/dist/components/bind-props/point-property-names.js

@@ -1,14 +1,13 @@
+const COMMON_POINT_PROP_NAMES = ["position", "scale", "pivot", "skew"];
+const ANCHOR_POINT_PROP_NAMES = ["anchor"];
+const TILING_POINT_PROP_NAMES = ["tilePosition", "tileScale"];
 const POINT_PROP_NAMES = [
-  "position",
-  "scale",
-  "pivot",
-  "skew",
-  "anchor",
-  "tilePosition",
-  "tileScale"
+  ...COMMON_POINT_PROP_NAMES,
+  ...ANCHOR_POINT_PROP_NAMES,
+  ...TILING_POINT_PROP_NAMES
 ];
 const POINT_PROP_NAMES_SET = new Set(POINT_PROP_NAMES);
-const POINT_PROP_AXIS_NAMES = [
+const COMMON_POINT_PROP_AXIS_NAMES = [
   "positionX",
   "positionY",
   "scaleX",
@@ -16,14 +15,20 @@ const POINT_PROP_AXIS_NAMES = [
   "pivotX",
   "pivotY",
   "skewX",
-  "skewY",
-  "anchorX",
-  "anchorY",
+  "skewY"
+];
+const ANCHOR_POINT_PROP_AXIS_NAMES = ["anchorX", "anchorY"];
+const TILING_POINT_PROP_AXIS_NAMES = [
   "tilePositionX",
   "tilePositionY",
   "tileScaleX",
   "tileScaleY"
 ];
+const POINT_PROP_AXIS_NAMES = [
+  ...COMMON_POINT_PROP_AXIS_NAMES,
+  ...ANCHOR_POINT_PROP_AXIS_NAMES,
+  ...TILING_POINT_PROP_AXIS_NAMES
+];
 const POINT_PROP_AXIS_NAMES_SET = new Set(POINT_PROP_AXIS_NAMES);
 /* @__PURE__ */ new Set([
   ...POINT_PROP_NAMES_SET,
@@ -36,10 +41,16 @@ const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {
   return map;
 }, /* @__PURE__ */ new Map());
 export {
+  ANCHOR_POINT_PROP_AXIS_NAMES,
+  ANCHOR_POINT_PROP_NAMES,
+  COMMON_POINT_PROP_AXIS_NAMES,
+  COMMON_POINT_PROP_NAMES,
   POINT_PROP_AXIS_MAP,
   POINT_PROP_AXIS_NAMES,
   POINT_PROP_AXIS_NAMES_SET,
   POINT_PROP_NAMES,
-  POINT_PROP_NAMES_SET
+  POINT_PROP_NAMES_SET,
+  TILING_POINT_PROP_AXIS_NAMES,
+  TILING_POINT_PROP_NAMES
 };
 //# sourceMappingURL=point-property-names.js.map

package/dist/components/bind-props/point-property-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"point-property-names.js","sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["export const POINT_PROP_NAMES = [\n  \"position\",\n  \"scale\",\n  \"pivot\",\n  \"skew\",\n  \"anchor\",\n  \"tilePosition\",\n  \"tileScale\",\n] as const;\n\nexport type PointPropName = (typeof POINT_PROP_NAMES)[number];\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\nexport const POINT_PROP_AXIS_NAMES = [\n  \"positionX\",\n  \"positionY\",\n  \"scaleX\",\n  \"scaleY\",\n  \"pivotX\",\n  \"pivotY\",\n  \"skewX\",\n  \"skewY\",\n  \"anchorX\",\n  \"anchorY\",\n  \"tilePositionX\",\n  \"tilePositionY\",\n  \"tileScaleX\",\n  \"tileScaleY\",\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n  ...POINT_PROP_NAMES_SET,\n  ...POINT_PROP_AXIS_NAMES_SET,\n]);\n\nexport const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {\n  const axisName = name[name.length - 1].toLowerCase() as \"x\" | \"y\";\n  const propertyName = name.slice(0, -1);\n  map.set(name, { propertyName, axisName });\n  return map;\n}, new Map<string, { propertyName: string; axisName: \"x\" | \"y\" }>());\n"],"names":[],"mappings":"AAAO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,uBAAoC,IAAI,IAAI,gBAAgB;AAElE,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,4BAAyC,IAAI,IAAI,qBAAqB;oBAE1B,IAAI;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AACL,CAAC;AAEM,MAAM,sBAAsB,sBAAsB,OAAO,CAAC,KAAK,SAAS;AAC7E,QAAM,WAAW,KAAK,KAAK,SAAS,CAAC,EAAE,YAAA;AACvC,QAAM,eAAe,KAAK,MAAM,GAAG,EAAE;AACrC,MAAI,IAAI,MAAM,EAAE,cAAc,UAAU;AACxC,SAAO;AACT,GAAG,oBAAI,KAA4D;"}
+{"version":3,"file":"point-property-names.js","sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["// Common point properties available on all Container-based components\nexport const COMMON_POINT_PROP_NAMES = [\"position\", \"scale\", \"pivot\", \"skew\"] as const;\n\nexport type CommonPointPropName = (typeof COMMON_POINT_PROP_NAMES)[number];\n\n// Anchor properties only available on Sprite-like components (Sprite, Text, etc.)\nexport const ANCHOR_POINT_PROP_NAMES = [\"anchor\"] as const;\n\nexport type AnchorPointPropName = (typeof ANCHOR_POINT_PROP_NAMES)[number];\n\n// Tiling properties only available on TilingSprite\nexport const TILING_POINT_PROP_NAMES = [\"tilePosition\", \"tileScale\"] as const;\n\nexport type TilingPointPropName = (typeof TILING_POINT_PROP_NAMES)[number];\n\n// All point properties (for runtime checking)\nexport const POINT_PROP_NAMES = [\n  ...COMMON_POINT_PROP_NAMES,\n  ...ANCHOR_POINT_PROP_NAMES,\n  ...TILING_POINT_PROP_NAMES,\n] as const;\n\nexport type PointPropName = (typeof POINT_PROP_NAMES)[number];\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\n// Common axis properties available on all Container-based components\nexport const COMMON_POINT_PROP_AXIS_NAMES = [\n  \"positionX\",\n  \"positionY\",\n  \"scaleX\",\n  \"scaleY\",\n  \"pivotX\",\n  \"pivotY\",\n  \"skewX\",\n  \"skewY\",\n] as const;\n\nexport type CommonPointAxisPropName = (typeof COMMON_POINT_PROP_AXIS_NAMES)[number];\n\n// Anchor axis properties only available on Sprite-like components\nexport const ANCHOR_POINT_PROP_AXIS_NAMES = [\"anchorX\", \"anchorY\"] as const;\n\nexport type AnchorPointAxisPropName = (typeof ANCHOR_POINT_PROP_AXIS_NAMES)[number];\n\n// Tiling axis properties only available on TilingSprite\nexport const TILING_POINT_PROP_AXIS_NAMES = [\n  \"tilePositionX\",\n  \"tilePositionY\",\n  \"tileScaleX\",\n  \"tileScaleY\",\n] as const;\n\nexport type TilingPointAxisPropName = (typeof TILING_POINT_PROP_AXIS_NAMES)[number];\n\n// All axis properties (for runtime checking)\nexport const POINT_PROP_AXIS_NAMES = [\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n  ...POINT_PROP_NAMES_SET,\n  ...POINT_PROP_AXIS_NAMES_SET,\n]);\n\nexport const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {\n  const axisName = name[name.length - 1].toLowerCase() as \"x\" | \"y\";\n  const propertyName = name.slice(0, -1);\n  map.set(name, { propertyName, axisName });\n  return map;\n}, new Map<string, { propertyName: string; axisName: \"x\" | \"y\" }>());\n"],"names":[],"mappings":"AACO,MAAM,0BAA0B,CAAC,YAAY,SAAS,SAAS,MAAM;AAKrE,MAAM,0BAA0B,CAAC,QAAQ;AAKzC,MAAM,0BAA0B,CAAC,gBAAgB,WAAW;AAK5D,MAAM,mBAAmB;AAAA,EAC9B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAIO,MAAM,uBAAoC,IAAI,IAAI,gBAAgB;AAGlE,MAAM,+BAA+B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKO,MAAM,+BAA+B,CAAC,WAAW,SAAS;AAK1D,MAAM,+BAA+B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKO,MAAM,wBAAwB;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAIO,MAAM,4BAAyC,IAAI,IAAI,qBAAqB;oBAE1B,IAAI;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AACL,CAAC;AAEM,MAAM,sBAAsB,sBAAsB,OAAO,CAAC,KAAK,SAAS;AAC7E,QAAM,WAAW,KAAK,KAAK,SAAS,CAAC,EAAE,YAAA;AACvC,QAAM,eAAe,KAAK,MAAM,GAAG,EAAE;AACrC,MAAI,IAAI,MAAM,EAAE,cAAc,UAAU;AACxC,SAAO;AACT,GAAG,oBAAI,KAA4D;"}

package/dist/components/component-factories.js

@@ -1,15 +1,31 @@
 import { splitProps, onCleanup } from "solid-js";
 import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./bind-props/event-names.js";
-import { POINT_PROP_AXIS_NAMES } from "./bind-props/point-property-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 { bindInitialisationProps, bindRuntimeProps } from "./bind-props/bind-props.js";
 const SOLID_PROP_KEYS = ["ref", "as", "children"];
+const CONTAINER_RUNTIME_KEYS = [
+  ...SOLID_PROP_KEYS,
+  ...PIXI_SOLID_EVENT_HANDLER_NAMES,
+  ...COMMON_POINT_PROP_AXIS_NAMES
+];
+const SPRITE_RUNTIME_KEYS = [
+  "ref",
+  "as",
+  ...PIXI_SOLID_EVENT_HANDLER_NAMES,
+  ...COMMON_POINT_PROP_AXIS_NAMES,
+  ...ANCHOR_POINT_PROP_AXIS_NAMES
+];
+const TILING_SPRITE_RUNTIME_KEYS = [
+  "ref",
+  "as",
+  ...PIXI_SOLID_EVENT_HANDLER_NAMES,
+  ...COMMON_POINT_PROP_AXIS_NAMES,
+  ...ANCHOR_POINT_PROP_AXIS_NAMES,
+  ...TILING_POINT_PROP_AXIS_NAMES
+];
 const createContainerComponent = (PixiClass) => {
   return (props) => {
-    const [runtimeProps, initialisationProps] = splitProps(props, [
-      ...SOLID_PROP_KEYS,
-      ...PIXI_SOLID_EVENT_HANDLER_NAMES,
-      ...POINT_PROP_AXIS_NAMES
-    ]);
+    const [runtimeProps, initialisationProps] = splitProps(props, CONTAINER_RUNTIME_KEYS);
     const instance = props.as || new PixiClass(initialisationProps);
     bindInitialisationProps(instance, initialisationProps);
     bindRuntimeProps(instance, runtimeProps);
@@ -28,9 +44,43 @@ const createLeafComponent = (PixiClass) => {
     return createContainerComponent(PixiClass)(props);
   };
 };
+const createSpriteComponent = (PixiClass) => {
+  return (props) => {
+    const [runtimeProps, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS);
+    const instance = props.as || new PixiClass(initialisationProps);
+    bindInitialisationProps(instance, initialisationProps);
+    bindRuntimeProps(instance, runtimeProps);
+    onCleanup(() => {
+      if ("attach" in instance) {
+        instance.destroy({ children: false });
+      } else {
+        instance.destroy({ children: true });
+      }
+    });
+    return instance;
+  };
+};
+const createTilingSpriteComponent = (PixiClass) => {
+  return (props) => {
+    const [runtimeProps, initialisationProps] = splitProps(props, TILING_SPRITE_RUNTIME_KEYS);
+    const instance = props.as || new PixiClass(initialisationProps);
+    bindInitialisationProps(instance, initialisationProps);
+    bindRuntimeProps(instance, runtimeProps);
+    onCleanup(() => {
+      if ("attach" in instance) {
+        instance.destroy({ children: false });
+      } else {
+        instance.destroy({ children: true });
+      }
+    });
+    return instance;
+  };
+};
 export {
   SOLID_PROP_KEYS,
   createContainerComponent,
-  createLeafComponent
+  createLeafComponent,
+  createSpriteComponent,
+  createTilingSpriteComponent
 };
 //# sourceMappingURL=component-factories.js.map

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 { PointAxisPropName } from \"./bind-props/point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./bind-props/point-property-names\";\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\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, [\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    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 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":";;;;AA+CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAEhD,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,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,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;"}
+{"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;"}

package/dist/components/components.js

@@ -1,20 +1,20 @@
-import { RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, AnimatedSprite as AnimatedSprite$1, BitmapText as BitmapText$1, Container as Container$1, Graphics as Graphics$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, Sprite as Sprite$1, Text as Text$1, TilingSprite as TilingSprite$1 } from "pixi.js";
-import { createLeafComponent, createContainerComponent } from "./component-factories.js";
-const AnimatedSprite = createLeafComponent(AnimatedSprite$1);
-const BitmapText = createLeafComponent(BitmapText$1);
+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);
+const BitmapText = createSpriteComponent(BitmapText$1);
 const Container = createContainerComponent(Container$1);
 const Graphics = createLeafComponent(Graphics$1);
-const HTMLText = createLeafComponent(HTMLText$1);
-const MeshPlane = createLeafComponent(MeshPlane$1);
-const MeshRope = createLeafComponent(MeshRope$1);
-const NineSliceSprite = createLeafComponent(NineSliceSprite$1);
+const HTMLText = createSpriteComponent(HTMLText$1);
+const MeshPlane = createSpriteComponent(MeshPlane$1);
+const MeshRope = createSpriteComponent(MeshRope$1);
+const NineSliceSprite = createSpriteComponent(NineSliceSprite$1);
 const ParticleContainer = createLeafComponent(ParticleContainer$1);
-const PerspectiveMesh = createLeafComponent(PerspectiveMesh$1);
+const PerspectiveMesh = createSpriteComponent(PerspectiveMesh$1);
 const RenderContainer = createContainerComponent(RenderContainer$1);
 const RenderLayer = createContainerComponent(RenderLayer$1);
-const Sprite = createLeafComponent(Sprite$1);
-const Text = createLeafComponent(Text$1);
-const TilingSprite = createLeafComponent(TilingSprite$1);
+const Sprite = createSpriteComponent(Sprite$1);
+const Text = createSpriteComponent(Text$1);
+const TilingSprite = createTilingSpriteComponent(TilingSprite$1);
 export {
   AnimatedSprite,
   BitmapText,

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 { createContainerComponent, createLeafComponent } from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n  PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<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 = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<\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 = createLeafComponent<\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 = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<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","createLeafComponent","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;AAwBO,MAAMA,iBAAiBC,oBAC5BC,gBACF;AAIO,MAAMC,aAAaF,oBAAsDG,YAAc;AAIvF,MAAMC,YAAYC,yBACvBC,WACF;AAKO,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAG7BgB,iBAAmB;AAOd,MAAMC,oBAAoBjB,oBAG/BkB,mBAAqB;AAKhB,MAAMC,kBAAkBnB,oBAG7BoB,iBAAmB;AAKd,MAAMC,kBAAkBhB,yBAG7BiB,iBAAmB;AAKd,MAAMC,cAAclB,yBACzBmB,aACF;AAKO,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAC1B8B,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  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;"}

package/dist/index.js

@@ -2,11 +2,11 @@ import { onResize } from "./on-resize.js";
 import { onTick } from "./on-tick.js";
 import { createAsyncDelay, delay } from "./delay.js";
 import { PixiCanvas } from "./pixi-canvas.js";
-import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./components/components.js";
 import { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./components/bind-props/event-names.js";
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
 import { getTicker } from "./pixi-application/get-ticker.js";
 import { PixiApplicationProvider, TickerProvider } from "./pixi-application/pixi-application-provider.js";
+import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./components/components.js";
 import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
 export {
   AnimatedSprite,

package/dist/on-tick.js

@@ -1,15 +1,16 @@
+import { UPDATE_PRIORITY } from "pixi.js";
 import { useContext, onCleanup } from "solid-js";
 import { TickerContext } from "./pixi-application/context.js";
-const onTick = (tickerCallback) => {
+const onTick = (tickerCallback, priority = UPDATE_PRIORITY.NORMAL) => {
   const ticker = useContext(TickerContext);
   if (!ticker) {
     throw new Error(
       "onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider"
     );
   }
-  ticker.add(tickerCallback);
+  ticker.add(tickerCallback, ticker, priority);
   onCleanup(() => {
-    ticker.remove(tickerCallback);
+    ticker.remove(tickerCallback, ticker);
   });
 };
 export {

package/dist/on-tick.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-tick.js","sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\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 `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\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: Pixi.TickerCallback<Pixi.Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n    );\n  }\n\n  ticker.add(tickerCallback);\n\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,SAAS,CAAC,mBAA2D;AAChF,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,IAAI,cAAc;AAEzB,YAAU,MAAM;AACd,WAAO,OAAO,cAAc;AAAA,EAC9B,CAAC;AACH;"}
+{"version":3,"file":"on-tick.js","sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { UPDATE_PRIORITY } from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\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 `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n * @param priority - An optional priority level for the ticker callback.\n *\n */\nexport const onTick = (\n  tickerCallback: Pixi.TickerCallback<Pixi.Ticker>,\n  priority: Pixi.UPDATE_PRIORITY = UPDATE_PRIORITY.NORMAL,\n): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n    );\n  }\n\n  ticker.add(tickerCallback, ticker, priority);\n\n  onCleanup(() => {\n    ticker.remove(tickerCallback, ticker);\n  });\n};\n"],"names":[],"mappings":";;;AAqBO,MAAM,SAAS,CACpB,gBACA,WAAiC,gBAAgB,WACxC;AACT,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,IAAI,gBAAgB,QAAQ,QAAQ;AAE3C,YAAU,MAAM;AACd,WAAO,OAAO,gBAAgB,MAAM;AAAA,EACtC,CAAC;AACH;"}

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, usually 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;AAUO,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 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;"}

package/dist/types/components/bind-props/index.d.ts

@@ -1,4 +1,4 @@
 export { bindRuntimeProps, bindInitialisationProps } from "./bind-props";
 export type { PixiEventHandlerMap } from "./event-names";
-export type { PointAxisPropName } from "./point-property-names";
+export type { PointAxisPropName, CommonPointAxisPropName, AnchorPointAxisPropName, TilingPointAxisPropName, } from "./point-property-names";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./event-names";

package/dist/types/components/bind-props/point-property-names.d.ts

@@ -1,6 +1,18 @@
+export declare const COMMON_POINT_PROP_NAMES: readonly ["position", "scale", "pivot", "skew"];
+export type CommonPointPropName = (typeof COMMON_POINT_PROP_NAMES)[number];
+export declare const ANCHOR_POINT_PROP_NAMES: readonly ["anchor"];
+export type AnchorPointPropName = (typeof ANCHOR_POINT_PROP_NAMES)[number];
+export declare const TILING_POINT_PROP_NAMES: readonly ["tilePosition", "tileScale"];
+export type TilingPointPropName = (typeof TILING_POINT_PROP_NAMES)[number];
 export declare const POINT_PROP_NAMES: readonly ["position", "scale", "pivot", "skew", "anchor", "tilePosition", "tileScale"];
 export type PointPropName = (typeof POINT_PROP_NAMES)[number];
 export declare const POINT_PROP_NAMES_SET: Set<string>;
+export declare const COMMON_POINT_PROP_AXIS_NAMES: readonly ["positionX", "positionY", "scaleX", "scaleY", "pivotX", "pivotY", "skewX", "skewY"];
+export type CommonPointAxisPropName = (typeof COMMON_POINT_PROP_AXIS_NAMES)[number];
+export declare const ANCHOR_POINT_PROP_AXIS_NAMES: readonly ["anchorX", "anchorY"];
+export type AnchorPointAxisPropName = (typeof ANCHOR_POINT_PROP_AXIS_NAMES)[number];
+export declare const TILING_POINT_PROP_AXIS_NAMES: readonly ["tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY"];
+export type TilingPointAxisPropName = (typeof TILING_POINT_PROP_AXIS_NAMES)[number];
 export declare const POINT_PROP_AXIS_NAMES: readonly ["positionX", "positionY", "scaleX", "scaleY", "pivotX", "pivotY", "skewX", "skewY", "anchorX", "anchorY", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY"];
 export type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];
 export declare const POINT_PROP_AXIS_NAMES_SET: Set<string>;

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

@@ -1,7 +1,19 @@
 import type * as Pixi from "pixi.js";
 import type { JSX, Ref } from "solid-js";
 import type { PixiEventHandlerMap } from "./bind-props/event-names";
-import type { PointAxisPropName } from "./bind-props/point-property-names";
+import type { CommonPointAxisPropName, AnchorPointAxisPropName, TilingPointAxisPropName } from "./bind-props/point-property-names";
+/**
+ * Common point axis properties available on all Container-based components
+ */
+export type CommonPointAxisProps = Partial<Record<CommonPointAxisPropName, number>>;
+/**
+ * Anchor point axis properties available on Sprite-like components
+ */
+export type AnchorPointAxisProps = Partial<Record<AnchorPointAxisPropName, number>>;
+/**
+ * Tiling point axis properties available on TilingSprite
+ */
+export type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, number>>;
 /**
  * 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.
  *
@@ -9,20 +21,33 @@ import type { PointAxisPropName } from "./bind-props/point-property-names";
  *
  * @example PixiComponentProps<Pixi.SpriteOptions>.
  */
-export type PixiComponentProps<ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, "children">;
+export type PixiComponentProps<ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions> = PixiEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, "children">;
 /**
- * Prop definition for components that CAN have children
+ * Prop definition for basic Container components (position, scale, pivot, skew only)
  */
-export type ContainerProps<Component> = PixiEventHandlerMap & PointAxisProps & {
+export type ContainerProps<Component> = PixiEventHandlerMap & CommonPointAxisProps & {
     ref?: Ref<Component>;
     as?: Component;
     children?: JSX.Element;
 };
-export type PointAxisProps = Partial<Record<PointAxisPropName, number>>;
 /**
- * Prop definition for components that CANNOT have children
+ * Prop definition for components that cannot have children
  */
 export type LeafProps<Component> = Omit<ContainerProps<Component>, "children">;
+/**
+ * Prop definition for Sprite-like components (includes anchor properties)
+ */
+export type SpriteProps<Component> = PixiEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & {
+    ref?: Ref<Component>;
+    as?: Component;
+};
+/**
+ * Prop definition for TilingSprite (includes anchor and tiling properties)
+ */
+export type TilingSpriteProps<Component> = PixiEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & TilingPointAxisProps & {
+    ref?: Ref<Component>;
+    as?: Component;
+};
 /**
  * Prop definition for filter components
  */
@@ -33,4 +58,6 @@ export type FilterProps<Component> = {
 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 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;

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

@@ -2,15 +2,21 @@ import type * as Pixi from "pixi.js";
 /**
  * A SolidJS component that renders a `PIXI.AnimatedSprite`.
  */
-export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & import("./component-factories").LeafProps<Pixi.AnimatedSprite>) => Pixi.AnimatedSprite & import("solid-js").JSX.Element;
+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;
 /**
  * A SolidJS component that renders a `PIXI.BitmapText`.
  */
-export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, Pixi.TextStyleOptions>, "children"> & import("./component-factories").LeafProps<Pixi.BitmapText>) => Pixi.BitmapText & import("solid-js").JSX.Element;
+export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, Pixi.TextStyleOptions>, "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.BitmapText> | undefined;
+    as?: Pixi.BitmapText | undefined;
+}) => Pixi.BitmapText & import("solid-js").JSX.Element;
 /**
  * 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" | "anchorX" | "anchorY" | "tilePositionX" | "tilePositionY" | "tileScaleX" | "tileScaleY", 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>> & {
     ref?: import("solid-js").Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
     as?: Pixi.Container<Pixi.ContainerChild> | undefined;
     children?: import("solid-js").JSX.Element;
@@ -23,19 +29,31 @@ export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> &
 /**
  * A SolidJS component that renders a `PIXI.HTMLText`.
  */
-export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & import("./component-factories").LeafProps<Pixi.HTMLText>) => Pixi.HTMLText & import("solid-js").JSX.Element;
+export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "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.HTMLText> | undefined;
+    as?: Pixi.HTMLText | undefined;
+}) => Pixi.HTMLText & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshPlane`.
  */
-export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & import("./component-factories").LeafProps<Pixi.MeshPlane>) => Pixi.MeshPlane & import("solid-js").JSX.Element;
+export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "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.MeshPlane> | undefined;
+    as?: Pixi.MeshPlane | undefined;
+}) => Pixi.MeshPlane & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshRope`.
  */
-export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & import("./component-factories").LeafProps<Pixi.MeshRope>) => Pixi.MeshRope & import("solid-js").JSX.Element;
+export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "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.MeshRope> | undefined;
+    as?: Pixi.MeshRope | undefined;
+}) => Pixi.MeshRope & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.NineSliceSprite`.
  */
-export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & import("./component-factories").LeafProps<Pixi.NineSliceSprite>) => Pixi.NineSliceSprite & import("solid-js").JSX.Element;
+export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "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.NineSliceSprite> | undefined;
+    as?: Pixi.NineSliceSprite | undefined;
+}) => Pixi.NineSliceSprite & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.ParticleContainer`.
  *
@@ -45,11 +63,14 @@ export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptio
 /**
  * A SolidJS component that renders a `PIXI.PerspectiveMesh`.
  */
-export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & import("./component-factories").LeafProps<Pixi.PerspectiveMesh>) => Pixi.PerspectiveMesh & import("solid-js").JSX.Element;
+export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "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.PerspectiveMesh> | undefined;
+    as?: Pixi.PerspectiveMesh | undefined;
+}) => Pixi.PerspectiveMesh & import("solid-js").JSX.Element;
 /**
  * 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" | "anchorX" | "anchorY" | "tilePositionX" | "tilePositionY" | "tileScaleX" | "tileScaleY", 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>> & {
     ref?: import("solid-js").Ref<Pixi.RenderContainer> | undefined;
     as?: Pixi.RenderContainer | undefined;
     children?: import("solid-js").JSX.Element;
@@ -57,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" | "anchorX" | "anchorY" | "tilePositionX" | "tilePositionY" | "tileScaleX" | "tileScaleY", 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>> & {
     ref?: import("solid-js").Ref<Pixi.RenderLayer> | undefined;
     as?: Pixi.RenderLayer | undefined;
     children?: import("solid-js").JSX.Element;
@@ -65,12 +86,21 @@ export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "childre
 /**
  * A SolidJS component that renders a `PIXI.Sprite`.
  */
-export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & import("./component-factories").LeafProps<Pixi.Sprite>) => Pixi.Sprite & import("solid-js").JSX.Element;
+export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "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.Sprite> | undefined;
+    as?: Pixi.Sprite | undefined;
+}) => Pixi.Sprite & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Text`.
  */
-export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & import("./component-factories").LeafProps<Pixi.Text>) => Pixi.Text & import("solid-js").JSX.Element;
+export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "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.Text> | undefined;
+    as?: Pixi.Text | undefined;
+}) => Pixi.Text & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.TilingSprite`.
  */
-export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & import("./component-factories").LeafProps<Pixi.TilingSprite>) => Pixi.TilingSprite & import("solid-js").JSX.Element;
+export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & import("./bind-props").PixiEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Partial<Record<"anchorX" | "anchorY", number>> & Partial<Record<"tilePositionX" | "tilePositionY" | "tileScaleX" | "tileScaleY", number>> & {
+    ref?: import("solid-js").Ref<Pixi.TilingSprite> | undefined;
+    as?: Pixi.TilingSprite | undefined;
+}) => Pixi.TilingSprite & import("solid-js").JSX.Element;

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

@@ -1,4 +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 } from "./bind-props";
-export type { ContainerProps, LeafProps, PixiComponentProps } from "./component-factories";
+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";

package/dist/types/index.d.ts

@@ -1,5 +1,4 @@
-export type { ContainerProps, LeafProps, PixiComponentProps } from "./components";
-export type { PixiEventHandlerMap } from "./components";
+export type { 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";
@@ -8,7 +7,6 @@ export { getPixiApp, getTicker, PixiApplicationProvider, TickerProvider } from "
 export { createAsyncDelay, delay } from "./delay";
 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 "./components/components";
-export type { PointAxisPropName } from "./components";
+export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./components";
 export { usePixiScreen } from "./use-pixi-screen";
 export type { PixiScreenDimensions } from "./use-pixi-screen";

package/dist/types/on-tick.d.ts

@@ -11,6 +11,7 @@ import type * as Pixi from "pixi.js";
  *
  * @param tickerCallback - The function to call on each ticker update. It receives
  * the `Pixi.Ticker` instance as its argument.
+ * @param priority - An optional priority level for the ticker callback.
  *
  */
-export declare const onTick: (tickerCallback: Pixi.TickerCallback<Pixi.Ticker>) => void;
+export declare const onTick: (tickerCallback: Pixi.TickerCallback<Pixi.Ticker>, priority?: Pixi.UPDATE_PRIORITY) => void;

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

@@ -24,7 +24,8 @@ export type TickerProviderProps = ParentProps<{
     ticker: Pixi.Ticker;
 }>;
 /**
- * This is only required if you want a ticker without the Pixi Application, usually for testing a store that relies on the ticker related utilities.
+ * This is only required if you want a ticker without the Pixi Application.
+ * For applications that want to use multiple tickers or for testing a store that relies on the ticker related utilities.
  * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.
  *
  * 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.

package/package.json

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