pixi-solid 0.1.19 → 0.1.21

package/README.md

@@ -14,11 +14,7 @@ A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your sce
 - 💫 Useful helper utilities included.
 - 🤩 Full Typescript support for type safety and auto completion.
 
-Take a look at the [docs site 🧑‍💻](https://lukecarlthompson.github.io/pixi-solid/) for more information.
-
----
-
-### Install
+## Install
 
 ```bash
 npm i pixi-solid pixi.js solid-js
@@ -28,33 +24,60 @@ Peer dependencies of
 
 ```json
 {
-  "pixi.js": "^8.14.3",
-  "solid-js": "^1.9.10"
+  "pixi.js": ">=8.14.3 <9",
+  "solid-js": ">=1.9.10 <2"
 }
 ```
 
----
+## Basic usage
+
+```tsx
+import { PixiCanvas, Sprite } from "pixi-solid";
+import { createSignal } from "solid-js";
+import { Texture } from "pixi.js";
+
+export const DemoApp = () => {
+  const [scale, setScale] = createSignal(10);
+
+  const handleSpriteTap = () => {
+    setScale((currentScale) => currentScale + 1);
+  };
+
+  return (
+    <PixiCanvas style={{ width: "100%", height: "100vh" }}>
+      <Sprite
+        texture={Texture.WHITE}
+        scale={scale()}
+        onpointertap={handleSpriteTap}
+        tint="#ff0000"
+      />
+    </PixiCanvas>
+  );
+};
+```
+
+## Documentation and examples
+
+Check out the [documentation site 🧑‍💻](https://lukecarlthompson.github.io/pixi-solid/) for more comprehensive information and live examples.
 
-### Why combine SolidJS with PixiJS?
+## Why combine SolidJS with PixiJS?
 
-- **Declarative PixiJS scene graph**: Using SolidJS's JSX templating means we get declarative control over the scene graph. No longer necessary to imperatively add and remove children.
+- **Declarative PixiJS scene graph**: Using SolidJS's JSX templating means we get declarative control over the scene graph. For improved separation of concerns, simpler views and more scalable projects.
 
-- **Lifecycle hooks in our PixiJS components**: SolidJS rendering PixiJS components means we can take advantage of the built in lifecycle methods in SolidJS `onMount` and `onCleanup` as well as few extra custom hooks so we can automatically subscribe and unsubscribe from the ticker.
+- **SolidJS hooks in our PixiJS components**: SolidJS rendering PixiJS components means we can take advantage of the built in lifecycle methods in SolidJS `onMount`, `onCleanup` as well as extra custom hooks for responsive behaviour and ticker subscriptions.
 
-- **Shared State and Reactivity**: Pixi Solid leverages SolidJS's reactivity system to automatically update PixiJS components when SolidJS signals or stores change. So your HTML and PixiJS graphics can stay in sync effortlessly.
+- **Shared State and Reactivity**: HTML and PixiJS graphics can stay in sync effortlessly because they can subscribe to the same state.
 
-- **Combine the best of both worlds**: Pixi Solid makes it easy to use HTML elements alongside a PixiJS canvas, allowing you to create rich user interfaces that combine the strengths of both technologies.
+- **Combine the best of both worlds**: Pixi Solid makes it easy to use HTML elements alongside or on top of a PixiJS canvas, allowing you to create rich user interfaces that combine the strengths of both technologies.
 
 - **Composability**: Pixi Solid components can be easily composed together to create complex scenes and animations out of reusable components.
 
 - **SolidJS is a thin wrapper**: While Pixi Solid provides a nice abstraction over PixiJS it provides access to all the properties and events of PixiJS objects.
 
-- **SolidJS is really fast**: SolidJs is on of the fastest front-end frameworks out there so the overhead is very minimal.
+- **SolidJS is really fast**: SolidJS is one of the fastest front-end frameworks out there so the overhead is very minimal.
 
 - **SolidJS is fully featured**: It has stores, signals, suspense, error boundaries, resource fetching and more. It's a great feature set for simple or complex applications and you won't have to reach for other libraries to manage templating or state.
 
----
-
 ## Contributing
 
 Contributions are welcome! This project is still in its early stages, so feel free to open an issue to report a bug, suggest a feature, or submit a pull request.

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

@@ -1 +1 @@
-{"version":3,"file":"component-factories.js","names":[],"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 { PixiSolidEventHandlerMap } 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> = PixiSolidEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiSolidEventHandlerMap &\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> = PixiSolidEventHandlerMap &\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> = PixiSolidEventHandlerMap &\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"],"mappings":";;;;;AAuGA,IAAM,yBAAyB;CAC7B,GAAG;EAJ2B;EAAO;EAAM;EAIxC;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAM,sBAAsB;CAC1B;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,6BAA6B;CACjC;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAa,4BAIX,cAGkC;AAClC,SAAQ,UAAsC;EAC5C,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,uBAAuB;EAErF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,OAAI,YAAY,SAEd,UAAS,QAAQ,EAAE,UAAU,OAAO,CAAC;OAErC,UAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IAEtC;AAEF,SAAO;;;AAIX,IAAa,uBAIX,cACG;AACH,SACE,UAC+B;AAC/B,SAAO,yBAAoD,UAAU,CAAC,MAAM;;;AAIhF,IAAa,yBAIX,cACG;AACH,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,oBAAoB;EAElF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,iCAIX,cACG;AACH,SACE,UAC+B;EAE/B,MAAM,CAAC,cAAc,QAAQ,uBAAuB,WAAW,OAAO,qBAAqB,CACzF,aACD,CAAC;EAEF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAGtE,WAAS,aAAa;AAEtB,qBACE,SACQ,OAAO,aACZ,eAAe;GACd,MAAM,kBAAkB,WAAwB;AAC9C,aAAS,OAAO,OAAO;;AAGzB,OAAI,eAAe,OAAO;IACxB,MAAM,SAAS,WAAW;AAC1B,WAAO,IAAI,eAAe;AAC1B,oBAAgB;AACd,YAAO,OAAO,eAAe;MAC7B;;IAGP,CACF;AAED,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,+BAIX,cACG;AACH,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,2BAA2B;EAEzF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO"}
+{"version":3,"file":"component-factories.js","names":[],"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 { PixiSolidEventHandlerMap } 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> = PixiSolidEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\ntype RefAsProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\ntype PixiComponent<Props, Instance> = (props: Props) => Instance & JSX.Element;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component> & {\n    children?: JSX.Element;\n  };\n\n/**\n * Prop definition for components that cannot have children\n */\nexport type LeafProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for Sprite-like components (includes anchor properties)\n */\nexport type SpriteProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  RefAsProps<Component>;\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> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  TilingPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = RefAsProps<Component>;\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): PixiComponent<Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>, InstanceType> => {\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): PixiComponent<Omit<OptionsType, \"children\"> & LeafProps<InstanceType>, InstanceType> => {\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): PixiComponent<Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>, InstanceType> => {\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): PixiComponent<\n  Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  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): PixiComponent<Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>, InstanceType> => {\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): PixiComponent<OptionsType & FilterProps<InstanceType>, InstanceType> => {\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"],"mappings":";;;;;AAuGA,IAAM,yBAAyB;CAC7B,GAAG;EAJ2B;EAAO;EAAM;EAIxC;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAM,sBAAsB;CAC1B;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,6BAA6B;CACjC;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAa,4BAIX,cAC8F;AAC9F,SAAQ,UAAsC;EAC5C,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,uBAAuB;EAErF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,OAAI,YAAY,SAEd,UAAS,QAAQ,EAAE,UAAU,OAAO,CAAC;OAErC,UAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IAEtC;AAEF,SAAO;;;AAIX,IAAa,uBAIX,cACyF;AACzF,SACE,UAC+B;AAC/B,SAAO,yBAAoD,UAAU,CAAC,MAAM;;;AAIhF,IAAa,yBAIX,cAC2F;AAC3F,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,oBAAoB;EAElF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,iCAIX,cAIG;AACH,SACE,UAC+B;EAE/B,MAAM,CAAC,cAAc,QAAQ,uBAAuB,WAAW,OAAO,qBAAqB,CACzF,aACD,CAAC;EAEF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAGtE,WAAS,aAAa;AAEtB,qBACE,SACQ,OAAO,aACZ,eAAe;GACd,MAAM,kBAAkB,WAAwB;AAC9C,aAAS,OAAO,OAAO;;AAGzB,OAAI,eAAe,OAAO;IACxB,MAAM,SAAS,WAAW;AAC1B,WAAO,IAAI,eAAe;AAC1B,oBAAgB;AACd,YAAO,OAAO,eAAe;MAC7B;;IAGP,CACF;AAED,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,+BAIX,cACiG;AACjG,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,2BAA2B;EAEzF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO"}

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

@@ -22,25 +22,25 @@ export type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, numbe
  * @example PixiComponentProps<Pixi.SpriteOptions>.
  */
 export type PixiComponentProps<ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions> = PixiSolidEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, "children">;
+type RefAsProps<Component> = {
+    ref?: Ref<Component>;
+    as?: Component;
+};
+type PixiComponent<Props, Instance> = (props: Props) => Instance & JSX.Element;
 /**
  * Prop definition for basic Container components (position, scale, pivot, skew only)
  */
-export type ContainerProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & Record<string, unknown> & {
-    ref?: Ref<Component>;
-    as?: Component;
+export type ContainerProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & RefAsProps<Component> & {
     children?: JSX.Element;
 };
 /**
  * Prop definition for components that cannot have children
  */
-export type LeafProps<Component> = Omit<ContainerProps<Component>, "children">;
+export type LeafProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & RefAsProps<Component>;
 /**
  * Prop definition for Sprite-like components (includes anchor properties)
  */
-export type SpriteProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & {
-    ref?: Ref<Component>;
-    as?: Component;
-};
+export type SpriteProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & RefAsProps<Component>;
 export type AnimatedSpriteProps<Component> = SpriteProps<Component> & Pick<Pixi.AnimatedSpriteOptions, "autoUpdate">;
 type AnimatedSpriteLike = Pixi.Container & {
     autoUpdate: boolean;
@@ -49,22 +49,16 @@ type AnimatedSpriteLike = Pixi.Container & {
 /**
  * Prop definition for TilingSprite (includes anchor and tiling properties)
  */
-export type TilingSpriteProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & TilingPointAxisProps & {
-    ref?: Ref<Component>;
-    as?: Component;
-};
+export type TilingSpriteProps<Component> = PixiSolidEventHandlerMap & CommonPointAxisProps & AnchorPointAxisProps & TilingPointAxisProps & RefAsProps<Component>;
 /**
  * Prop definition for filter components
  */
-export type FilterProps<Component> = {
-    ref?: Ref<Component>;
-    as?: Component;
-};
+export type FilterProps<Component> = RefAsProps<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 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 declare const createContainerComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<Omit<OptionsType, "children"> & ContainerProps<InstanceType>, InstanceType>;
+export declare const createLeafComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<Omit<OptionsType, "children"> & LeafProps<InstanceType>, InstanceType>;
+export declare const createSpriteComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<Omit<OptionsType, "children"> & SpriteProps<InstanceType>, InstanceType>;
+export declare const createAnimatedSpriteComponent: <InstanceType extends AnimatedSpriteLike, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<Omit<OptionsType, "children"> & AnimatedSpriteProps<InstanceType>, InstanceType>;
+export declare const createTilingSpriteComponent: <InstanceType extends Pixi.Container, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<Omit<OptionsType, "children"> & TilingSpriteProps<InstanceType>, InstanceType>;
+export declare const createFilterComponent: <InstanceType extends Pixi.Filter, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => PixiComponent<OptionsType & FilterProps<InstanceType>, InstanceType>;
 export {};

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

@@ -16,16 +16,20 @@ 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").PixiSolidEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
+export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.ContainerChild>, "children"> & import("./bind-props").PixiSolidEventHandlerMap & 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;
 }) => Pixi.Container<Pixi.ContainerChild> & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Graphics`.
  * Use a ref to access the underlying graphics instance and draw with it.
  */
-export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & import("./component-factories").LeafProps<Pixi.Graphics>) => Pixi.Graphics & import("solid-js").JSX.Element;
+export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & import("./bind-props").PixiSolidEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & {
+    ref?: import("solid-js").Ref<Pixi.Graphics> | undefined;
+    as?: Pixi.Graphics | undefined;
+}) => Pixi.Graphics & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.HTMLText`.
  */
@@ -59,7 +63,10 @@ export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions,
  *
  * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.
  */
-export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions<Pixi.IParticle>, "children"> & import("./component-factories").LeafProps<Pixi.ParticleContainer<Pixi.IParticle>>) => Pixi.ParticleContainer<Pixi.IParticle> & import("solid-js").JSX.Element;
+export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions<Pixi.IParticle>, "children"> & import("./bind-props").PixiSolidEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & {
+    ref?: import("solid-js").Ref<Pixi.ParticleContainer<Pixi.IParticle>> | undefined;
+    as?: Pixi.ParticleContainer<Pixi.IParticle> | undefined;
+}) => Pixi.ParticleContainer<Pixi.IParticle> & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.PerspectiveMesh`.
  */
@@ -70,17 +77,19 @@ 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").PixiSolidEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
+export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & import("./bind-props").PixiSolidEventHandlerMap & 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;
 }) => Pixi.RenderContainer & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.RenderLayer`.
  */
-export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & import("./bind-props").PixiSolidEventHandlerMap & Partial<Record<"positionX" | "positionY" | "scaleX" | "scaleY" | "pivotX" | "pivotY" | "skewX" | "skewY", number>> & Record<string, unknown> & {
+export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & import("./bind-props").PixiSolidEventHandlerMap & 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;
 }) => Pixi.RenderLayer & import("solid-js").JSX.Element;
 /**

package/package.json

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