pixi-solid 0.0.19 → 0.0.21

package/README.md

@@ -5,35 +5,53 @@ A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your sce
 [![NPM Version](https://img.shields.io/npm/v/pixi-solid.svg)](https://www.npmjs.com/package/pixi-solid)
 [![License](https://img.shields.io/npm/l/pixi-solid.svg)](https://github.com/your-username/pixi-solid/blob/main/LICENSE)
 
-## Why Pixi-Solid?
+- 💙 Lightweight and flexible SolidJS library for creating PixiJS applications.
+- 🎁 Provides a set of custom SolidJS components that create PixiJS objects instead of HTML elements.
+- 📦 Supports all PixiJS objects, such as Filter, Container, Sprite, Graphics, Text, etc.
+- 🧑‍💻 The convenience and speed of SolidJS stores and signals to manage state.
+- ✨ All events emitted by PixiJS objects are supported.
+- 😎 No limitations. Break out of SolidJS any time and interact directly with PixiJS.
+- 💫 Useful helper utilities included.
+- 🤩 Full Typescript support for type safety and auto completion.
 
-`pixi-solid` combines the power of two amazing libraries:
+---
 
-- **PixiJS:** A fast, lightweight, and powerful 2D rendering library.
-- **SolidJS:** A declarative, performant, and reactive JavaScript library for building user interfaces.
+### Install
 
-By using `pixi-solid`, you can write your PixiJS applications declaratively using JSX, manage state with Solid's powerful reactivity system, and structure your scene as a tree of reusable components. This leads to more maintainable and readable code for complex graphical applications.
+```bash
+npm i pixi-solid pixi.js solid-js
+```
+
+Peer dependencies of
 
-It is intended to provide nice abstractions for encapsulating useful functionality and state management to represent the core logic of your application.
+```json
+{
+  "pixi.js": "^8.14.3",
+  "solid-js": "^1.9.10"
+}
+```
 
-In some cases when creating high performance applications like games which may have lots of fast changing state and logic every frame it may be beneficial to escape from SolidJS and use Pixi imperatively.
-In these cases you may want to create an imperative component and update it every frame with the `onTick` method and then wrap it inside a `<Container />` component as an easy way of packaging it.
+---
 
-## Getting Started
+### Why combine SolidJS with PixiJS?
 
-### Installation
+- **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.
 
-To install `pixi-solid` along with its peer dependencies, run:
+- **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.
 
-```bash
-npm install pixi-solid pixi.js solid-js
-# or
-yarn add pixi-solid pixi.js solid-js
-# or
-pnpm add pixi-solid pixi.js solid-js
-```
+- **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.
+
+- **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.
+
+- **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 fatsest 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.
 
-You will also need to configure your build tool to handle Solid's JSX. For Vite, you can use `vite-plugin-solid`.
+---
 
 ### Basic Usage
 

package/dist/component-creation.js

@@ -0,0 +1,59 @@
+import { splitProps, createRenderEffect, on } from "solid-js";
+import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
+import { insert, setProp } from "./renderer.js";
+const SOLID_PROP_KEYS = ["ref", "as", "children"];
+const applyProps = (instance, props, defer) => {
+  for (const key in props) {
+    if (key === "as") continue;
+    if (key === "ref") {
+      createRenderEffect(() => {
+        props[key](instance);
+      });
+    } else if (key === "children") {
+      if (!("addChild" in instance)) {
+        throw new Error(`Cannot set children on non-container instance.`);
+      }
+      createRenderEffect(() => {
+        insert(instance, () => props.children);
+      });
+    } else if (defer) {
+      createRenderEffect(
+        on(
+          () => props[key],
+          () => {
+            setProp(instance, key, props[key]);
+          },
+          { defer }
+        )
+      );
+    } else {
+      createRenderEffect(() => {
+        setProp(instance, key, props[key]);
+      });
+    }
+  }
+};
+const createContainerComponent = (PixiClass) => {
+  return (props) => {
+    const [runtimeProps, initialisationProps] = splitProps(props, [
+      ...SOLID_PROP_KEYS,
+      ...PIXI_SOLID_EVENT_HANDLER_NAMES
+    ]);
+    const instance = props.as || new PixiClass(initialisationProps);
+    applyProps(instance, initialisationProps, true);
+    applyProps(instance, runtimeProps);
+    return instance;
+  };
+};
+const createLeafComponent = (PixiClass) => {
+  return (props) => {
+    return createContainerComponent(PixiClass)(props);
+  };
+};
+export {
+  SOLID_PROP_KEYS,
+  applyProps,
+  createContainerComponent,
+  createLeafComponent
+};
+//# sourceMappingURL=component-creation.js.map

package/dist/component-creation.js.map

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

package/dist/pixi-components.js

@@ -1,49 +1,5 @@
 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 { splitProps, createRenderEffect, on } from "solid-js";
-import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
-import { insert, setProp } from "./renderer.js";
-const SOLID_PROP_KEYS = ["ref", "as", "children"];
-const applyProps = (instance, props, defer) => {
-  for (const key in props) {
-    if (key === "as") continue;
-    if (key === "ref") {
-      createRenderEffect(() => {
-        props[key](instance);
-      });
-    } else if (key === "children") {
-      if (!("addChild" in instance)) {
-        throw new Error(`Cannot set children on non-container instance.`);
-      }
-      createRenderEffect(() => {
-        insert(instance, () => props.children);
-      });
-    } else if (defer) {
-      createRenderEffect(on(() => props[key], () => {
-        setProp(instance, key, props[key]);
-      }, {
-        defer
-      }));
-    } else {
-      createRenderEffect(() => {
-        setProp(instance, key, props[key]);
-      });
-    }
-  }
-};
-const createContainerComponent = (PixiClass) => {
-  return (props) => {
-    const [runtimeProps, initialisationProps] = splitProps(props, [...SOLID_PROP_KEYS, ...PIXI_SOLID_EVENT_HANDLER_NAMES]);
-    const instance = props.as || new PixiClass(initialisationProps);
-    applyProps(instance, initialisationProps, true);
-    applyProps(instance, runtimeProps);
-    return instance;
-  };
-};
-const createLeafComponent = (PixiClass) => {
-  return (props) => {
-    return createContainerComponent(PixiClass)(props);
-  };
-};
+import { createLeafComponent, createContainerComponent } from "./component-creation.js";
 const AnimatedSprite = createLeafComponent(AnimatedSprite$1);
 const BitmapText = createLeafComponent(BitmapText$1);
 const Container = createContainerComponent(Container$1);
@@ -72,10 +28,8 @@ export {
   PerspectiveMesh,
   RenderContainer,
   RenderLayer,
-  SOLID_PROP_KEYS,
   Sprite,
   Text,
-  TilingSprite,
-  applyProps
+  TilingSprite
 };
 //# sourceMappingURL=pixi-components.js.map

package/dist/pixi-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-components.js","sources":["../src/pixi-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\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./pixi-events\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap & {\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// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      createRenderEffect(() => {\n        // Solid converts the ref prop to a callback function\n        (props[key] as unknown as (arg: any) => void)(instance);\n      });\n    } else if (key === \"children\") {\n      if (!(\"addChild\" in instance)) {\n        throw new Error(`Cannot set children on non-container instance.`);\n      }\n      createRenderEffect(() => {\n        insert(instance, () => props.children);\n      });\n    } else if (defer) {\n      createRenderEffect(\n        on(\n          () => props[key as keyof typeof props],\n          () => {\n            setProp(instance, key, props[key as keyof typeof props]);\n          },\n          { defer }\n        )\n      );\n    } else {\n      createRenderEffect(() => {\n        setProp(instance, key, props[key as keyof typeof props]);\n      });\n    }\n  }\n};\n\nconst createContainerComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType\n) => {\n  return (props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps, true);\n    applyProps(instance, runtimeProps);\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nconst createLeafComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType\n) => {\n  return (props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\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>(PixiContainer);\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<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n  PixiNineSliceSprite\n);\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<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n  PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n  PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n  PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\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>(PixiTilingSprite);\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":["SOLID_PROP_KEYS","applyProps","instance","props","defer","key","createRenderEffect","Error","insert","children","on","setProp","createContainerComponent","PixiClass","runtimeProps","initialisationProps","splitProps","PIXI_SOLID_EVENT_HANDLER_NAMES","as","createLeafComponent","AnimatedSprite","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","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":";;;;AAwCO,MAAMA,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAMC,aAAa,CACxBC,UACAC,OACAC,UACG;AACH,aAAWC,OAAOF,OAAO;AACvB,QAAIE,QAAQ,KAAM;AAElB,QAAIA,QAAQ,OAAO;AACjBC,yBAAmB,MAAM;AAEtBH,cAAME,GAAG,EAAoCH,QAAQ;AAAA,MACxD,CAAC;AAAA,IACH,WAAWG,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAcH,WAAW;AAC7B,cAAM,IAAIK,MAAM,gDAAgD;AAAA,MAClE;AACAD,yBAAmB,MAAM;AACvBE,eAAON,UAAU,MAAMC,MAAMM,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH,WAAWL,OAAO;AAChBE,yBACEI,GACE,MAAMP,MAAME,GAAyB,GACrC,MAAM;AACJM,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,GACA;AAAA,QAAED;AAAAA,MAAAA,CACJ,CACF;AAAA,IACF,OAAO;AACLE,yBAAmB,MAAM;AACvBK,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAMO,2BAA2B,CAC/BC,cACG;AACH,SAAO,CAACV,UAAoG;AAC1G,UAAM,CAACW,cAAcC,mBAAmB,IAAIC,WAAWb,OAAO,CAC5D,GAAGH,iBACH,GAAGiB,8BAA8B,CAClC;AAED,UAAMf,WAAWC,MAAMe,MAAM,IAAIL,UAAUE,mBAA0B;AAErEd,eAAWC,UAAUa,qBAAqB,IAAI;AAC9Cd,eAAWC,UAAUY,YAAY;AAEjC,WAAOZ;AAAAA,EACT;AACF;AAEA,MAAMiB,sBAAsB,CAC1BN,cACG;AACH,SAAO,CAACV,UAA+F;AACrG,WAAOS,yBAAoDC,SAAS,EAAEV,KAAK;AAAA,EAC7E;AACF;AAKO,MAAMiB,iBAAiBD,oBAAoEE,gBAAkB;AAI7G,MAAMC,aAAaH,oBAAsDI,YAAc;AAIvF,MAAMC,YAAYZ,yBAA+Da,WAAa;AAK9F,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAC7BgB,iBACF;AAOO,MAAMC,oBAAoBjB,oBAC/BkB,mBACF;AAKO,MAAMC,kBAAkBnB,oBAC7BoB,iBACF;AAKO,MAAMC,kBAAkB5B,yBAC7B6B,iBACF;AAKO,MAAMC,cAAc9B,yBAAmE+B,aAAe;AAKtG,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAAgE8B,cAAgB;"}
+{"version":3,"file":"pixi-components.js","sources":["../src/pixi-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\";\nimport { createContainerComponent, createLeafComponent } from \"./component-creation\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\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>(PixiContainer);\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<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n  PixiNineSliceSprite\n);\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<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n  PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n  PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n  PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\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>(PixiTilingSprite);\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":";;AAuBO,MAAMA,iBAAiBC,oBAAoEC,gBAAkB;AAI7G,MAAMC,aAAaF,oBAAsDG,YAAc;AAIvF,MAAMC,YAAYC,yBAA+DC,WAAa;AAK9F,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAC7BgB,iBACF;AAOO,MAAMC,oBAAoBjB,oBAC/BkB,mBACF;AAKO,MAAMC,kBAAkBnB,oBAC7BoB,iBACF;AAKO,MAAMC,kBAAkBhB,yBAC7BiB,iBACF;AAKO,MAAMC,cAAclB,yBAAmEmB,aAAe;AAKtG,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAAgE8B,cAAgB;"}

package/dist/pixi-stage.js

@@ -1,6 +1,6 @@
 import { memo } from "solid-js/web";
+import { applyProps } from "./component-creation.js";
 import { getPixiApp } from "./pixi-application.js";
-import { applyProps } from "./pixi-components.js";
 const PixiStage = (props) => {
   const pixiApp = getPixiApp();
   applyProps(pixiApp.stage, props);

package/dist/pixi-stage.js.map

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

package/dist/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","sources":["../src/renderer.tsx"],"sourcesContent":["import type { Container as PixiContainer } from \"pixi.js\";\nimport { Text as PixiText } from \"pixi.js\";\nimport { createRenderer } from \"solid-js/universal\";\nimport type { PIXI_EVENT_NAMES, PixiEventHandlerMap } from \"./pixi-events\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./pixi-events\";\n\nexport const {\n  effect,\n  memo,\n  createComponent,\n  createElement,\n  createTextNode,\n  insertNode,\n  insert,\n  setProp,\n  mergeProps,\n  use,\n  render,\n  spread,\n} = createRenderer<PixiContainer>({\n  createElement(name: string) {\n    // This function is for lowercase string tags like `<container />`.\n    // To support tree-shaking, we require users to import components\n    // directly and use them with an uppercase name like `<Container />`,\n    // which does not call this function.\n    throw new Error(\n      `Cannot create element \"${name}\". Please import components directly from 'pixi-solid' and use them with a capital letter.`,\n    );\n  },\n  createTextNode(value) {\n    return new PixiText({ text: value });\n  },\n  replaceText(textNode: PixiText, value) {\n    textNode.text = value;\n  },\n  setProperty(node, name, value, prev) {\n    // Check for event listeners and handle them appropriately.\n    if (PIXI_EVENT_HANDLER_NAME_SET.has(name as keyof PixiEventHandlerMap)) {\n      // Remove the 'on' prefix to get the actual event name.\n      const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n      if (prev) {\n        node.removeEventListener(eventName, prev as any);\n      }\n      node.addEventListener(eventName, value as any);\n      return;\n    }\n\n    if (name in node) {\n      (node as any)[name] = value;\n      return;\n    }\n  },\n  insertNode(parent, node, anchor) {\n    // RenderLayer uses `attach` instead of `addChild`.\n    if (\"attach\" in parent && typeof parent.attach === \"function\") {\n      parent.attach(node);\n      // Note: `attach` does not support anchoring, so we ignore the anchor.\n      return;\n    }\n\n    if (\n      !(\"addChildAt\" in parent) ||\n      !(\"addChild\" in parent) ||\n      typeof parent.addChild !== \"function\"\n    ) {\n      throw new Error(\"Parent does not support children.\");\n    }\n\n    if (anchor) {\n      parent.addChildAt(node, parent.children.indexOf(anchor));\n    } else {\n      parent.addChild(node);\n    }\n  },\n  isTextNode(node) {\n    return node instanceof PixiText;\n  },\n  removeNode(_, node) {\n    node.removeFromParent();\n    node.destroy({ children: true });\n  },\n  getParentNode(node) {\n    return node?.parent ?? undefined;\n  },\n  getFirstChild(node) {\n    return node.children?.[0];\n  },\n  getNextSibling(node) {\n    if (!node.parent) return undefined;\n    const index = node.parent.children.indexOf(node);\n    // Return the next child if it exists, otherwise undefined.\n    return index > -1 ? node.parent.children[index + 1] : undefined;\n  },\n});\n"],"names":["effect","memo","createComponent","createElement","createTextNode","insertNode","insert","setProp","mergeProps","use","render","spread","createRenderer","name","Error","value","PixiText","text","replaceText","textNode","setProperty","node","prev","PIXI_EVENT_HANDLER_NAME_SET","has","eventName","slice","removeEventListener","addEventListener","parent","anchor","attach","addChild","addChildAt","children","indexOf","isTextNode","removeNode","_","removeFromParent","destroy","getParentNode","undefined","getFirstChild","getNextSibling","index"],"mappings":";;;AAMO,MAAM;AAAA,EACXA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,eAA8B;AAAA,EAChCT,cAAcU,MAAc;AAK1B,UAAM,IAAIC,MACR,0BAA0BD,IAAI,4FAChC;AAAA,EACF;AAAA,EACAT,eAAeW,OAAO;AACpB,WAAO,IAAIC,KAAS;AAAA,MAAEC,MAAMF;AAAAA,IAAAA,CAAO;AAAA,EACrC;AAAA,EACAG,YAAYC,UAAoBJ,OAAO;AACrCI,aAASF,OAAOF;AAAAA,EAClB;AAAA,EACAK,YAAYC,MAAMR,MAAME,OAAOO,MAAM;AAEnC,QAAIC,4BAA4BC,IAAIX,IAAiC,GAAG;AAEtE,YAAMY,YAAYZ,KAAKa,MAAM,CAAC;AAE9B,UAAIJ,MAAM;AACRD,aAAKM,oBAAoBF,WAAWH,IAAW;AAAA,MACjD;AACAD,WAAKO,iBAAiBH,WAAWV,KAAY;AAC7C;AAAA,IACF;AAEA,QAAIF,QAAQQ,MAAM;AACfA,WAAaR,IAAI,IAAIE;AACtB;AAAA,IACF;AAAA,EACF;AAAA,EACAV,WAAWwB,QAAQR,MAAMS,QAAQ;AAE/B,QAAI,YAAYD,UAAU,OAAOA,OAAOE,WAAW,YAAY;AAC7DF,aAAOE,OAAOV,IAAI;AAElB;AAAA,IACF;AAEA,QACE,EAAE,gBAAgBQ,WAClB,EAAE,cAAcA,WAChB,OAAOA,OAAOG,aAAa,YAC3B;AACA,YAAM,IAAIlB,MAAM,mCAAmC;AAAA,IACrD;AAEA,QAAIgB,QAAQ;AACVD,aAAOI,WAAWZ,MAAMQ,OAAOK,SAASC,QAAQL,MAAM,CAAC;AAAA,IACzD,OAAO;AACLD,aAAOG,SAASX,IAAI;AAAA,IACtB;AAAA,EACF;AAAA,EACAe,WAAWf,MAAM;AACf,WAAOA,gBAAgBL;AAAAA,EACzB;AAAA,EACAqB,WAAWC,GAAGjB,MAAM;AAClBA,SAAKkB,iBAAAA;AACLlB,SAAKmB,QAAQ;AAAA,MAAEN,UAAU;AAAA,IAAA,CAAM;AAAA,EACjC;AAAA,EACAO,cAAcpB,MAAM;AAClB,WAAOA,MAAMQ,UAAUa;AAAAA,EACzB;AAAA,EACAC,cAActB,MAAM;AAClB,WAAOA,KAAKa,WAAW,CAAC;AAAA,EAC1B;AAAA,EACAU,eAAevB,MAAM;AACnB,QAAI,CAACA,KAAKQ,OAAQ,QAAOa;AACzB,UAAMG,QAAQxB,KAAKQ,OAAOK,SAASC,QAAQd,IAAI;AAE/C,WAAOwB,QAAQ,KAAKxB,KAAKQ,OAAOK,SAASW,QAAQ,CAAC,IAAIH;AAAAA,EACxD;AACF,CAAC;"}
+{"version":3,"file":"renderer.js","sources":["../src/renderer.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Text as PixiText } from \"pixi.js\";\nimport { createRenderer } from \"solid-js/universal\";\nimport type { PIXI_EVENT_NAMES, PixiEventHandlerMap } from \"./pixi-events\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./pixi-events\";\n\nexport const {\n  effect,\n  memo,\n  createComponent,\n  createElement,\n  createTextNode,\n  insertNode,\n  insert,\n  setProp,\n  mergeProps,\n  use,\n  render,\n  spread,\n} = createRenderer<Pixi.Container>({\n  createElement(name: string) {\n    // This function is for lowercase string tags like `<container />`.\n    // To support tree-shaking, we require users to import components\n    // directly and use them with an uppercase name like `<Container />`,\n    // which does not call this function.\n    throw new Error(\n      `Cannot create element \"${name}\". Please import components directly from 'pixi-solid' and use them with a capital letter.`\n    );\n  },\n  createTextNode(value) {\n    return new PixiText({ text: value });\n  },\n  replaceText(textNode: PixiText, value) {\n    textNode.text = value;\n  },\n  setProperty(node, name, value, prev) {\n    // Check for event listeners and handle them appropriately.\n    if (PIXI_EVENT_HANDLER_NAME_SET.has(name as keyof PixiEventHandlerMap)) {\n      // Remove the 'on' prefix to get the actual event name.\n      const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n      if (prev) {\n        node.removeEventListener(eventName, prev as any);\n      }\n      node.addEventListener(eventName, value as any);\n      return;\n    }\n\n    if (name in node) {\n      (node as any)[name] = value;\n      return;\n    }\n  },\n  insertNode(parent, node, anchor) {\n    // RenderLayer uses `attach` instead of `addChild`.\n    if (\"attach\" in parent && typeof parent.attach === \"function\") {\n      parent.attach(node);\n      // Note: `attach` does not support anchoring, so we ignore the anchor.\n      return;\n    }\n\n    if (!(\"addChildAt\" in parent) || !(\"addChild\" in parent) || typeof parent.addChild !== \"function\") {\n      throw new Error(\"Parent does not support children.\");\n    }\n\n    if (anchor) {\n      parent.addChildAt(node, parent.children.indexOf(anchor));\n    } else {\n      parent.addChild(node);\n    }\n  },\n  isTextNode(node) {\n    return node instanceof PixiText;\n  },\n  removeNode(_, node) {\n    node.removeFromParent();\n    node.destroy({ children: true });\n  },\n  getParentNode(node) {\n    return node?.parent ?? undefined;\n  },\n  getFirstChild(node) {\n    return node.children?.[0];\n  },\n  getNextSibling(node) {\n    if (!node.parent) return undefined;\n    const index = node.parent.children.indexOf(node);\n    // Return the next child if it exists, otherwise undefined.\n    return index > -1 ? node.parent.children[index + 1] : undefined;\n  },\n});\n"],"names":["effect","memo","createComponent","createElement","createTextNode","insertNode","insert","setProp","mergeProps","use","render","spread","createRenderer","name","Error","value","PixiText","text","replaceText","textNode","setProperty","node","prev","PIXI_EVENT_HANDLER_NAME_SET","has","eventName","slice","removeEventListener","addEventListener","parent","anchor","attach","addChild","addChildAt","children","indexOf","isTextNode","removeNode","_","removeFromParent","destroy","getParentNode","undefined","getFirstChild","getNextSibling","index"],"mappings":";;;AAMO,MAAM;AAAA,EACXA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,eAA+B;AAAA,EACjCT,cAAcU,MAAc;AAK1B,UAAM,IAAIC,MACR,0BAA0BD,IAAI,4FAChC;AAAA,EACF;AAAA,EACAT,eAAeW,OAAO;AACpB,WAAO,IAAIC,KAAS;AAAA,MAAEC,MAAMF;AAAAA,IAAAA,CAAO;AAAA,EACrC;AAAA,EACAG,YAAYC,UAAoBJ,OAAO;AACrCI,aAASF,OAAOF;AAAAA,EAClB;AAAA,EACAK,YAAYC,MAAMR,MAAME,OAAOO,MAAM;AAEnC,QAAIC,4BAA4BC,IAAIX,IAAiC,GAAG;AAEtE,YAAMY,YAAYZ,KAAKa,MAAM,CAAC;AAE9B,UAAIJ,MAAM;AACRD,aAAKM,oBAAoBF,WAAWH,IAAW;AAAA,MACjD;AACAD,WAAKO,iBAAiBH,WAAWV,KAAY;AAC7C;AAAA,IACF;AAEA,QAAIF,QAAQQ,MAAM;AACfA,WAAaR,IAAI,IAAIE;AACtB;AAAA,IACF;AAAA,EACF;AAAA,EACAV,WAAWwB,QAAQR,MAAMS,QAAQ;AAE/B,QAAI,YAAYD,UAAU,OAAOA,OAAOE,WAAW,YAAY;AAC7DF,aAAOE,OAAOV,IAAI;AAElB;AAAA,IACF;AAEA,QAAI,EAAE,gBAAgBQ,WAAW,EAAE,cAAcA,WAAW,OAAOA,OAAOG,aAAa,YAAY;AACjG,YAAM,IAAIlB,MAAM,mCAAmC;AAAA,IACrD;AAEA,QAAIgB,QAAQ;AACVD,aAAOI,WAAWZ,MAAMQ,OAAOK,SAASC,QAAQL,MAAM,CAAC;AAAA,IACzD,OAAO;AACLD,aAAOG,SAASX,IAAI;AAAA,IACtB;AAAA,EACF;AAAA,EACAe,WAAWf,MAAM;AACf,WAAOA,gBAAgBL;AAAAA,EACzB;AAAA,EACAqB,WAAWC,GAAGjB,MAAM;AAClBA,SAAKkB,iBAAAA;AACLlB,SAAKmB,QAAQ;AAAA,MAAEN,UAAU;AAAA,IAAA,CAAM;AAAA,EACjC;AAAA,EACAO,cAAcpB,MAAM;AAClB,WAAOA,MAAMQ,UAAUa;AAAAA,EACzB;AAAA,EACAC,cAActB,MAAM;AAClB,WAAOA,KAAKa,WAAW,CAAC;AAAA,EAC1B;AAAA,EACAU,eAAevB,MAAM;AACnB,QAAI,CAACA,KAAKQ,OAAQ,QAAOa;AACzB,UAAMG,QAAQxB,KAAKQ,OAAOK,SAASC,QAAQd,IAAI;AAE/C,WAAOwB,QAAQ,KAAKxB,KAAKQ,OAAOK,SAASW,QAAQ,CAAC,IAAIH;AAAAA,EACxD;AACF,CAAC;"}

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

@@ -0,0 +1,36 @@
+import type * as Pixi from "pixi.js";
+import type { JSX, Ref } from "solid-js";
+import type { PixiEventHandlerMap } from "./pixi-events";
+/**
+ * Prop definition for components that CAN have children
+ */
+export type ContainerProps<Component> = PixiEventHandlerMap & {
+    ref?: Ref<Component>;
+    as?: Component;
+    children?: JSX.Element;
+};
+/**
+ * Prop definition for components that CANNOT have children
+ */
+export type LeafProps<Component> = Omit<ContainerProps<Component>, "children">;
+/**
+ * Prop definition for filter components
+ */
+export type FilterProps<Component> = {
+    ref?: Ref<Component>;
+    as?: Component;
+};
+export declare const SOLID_PROP_KEYS: readonly ["ref", "as", "children"];
+/**
+ * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.
+ *
+ * @param instance The Pixi instance we want to apply props to.
+ * @param props The props object.
+ * @param defer Defers the createRenderEffect so the props aren't set on the first run.
+ * This is useful because setting initialisation props can have unintended side effects.
+ * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.
+ */
+export declare const applyProps: <InstanceType extends Pixi.Container, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType, defer?: boolean) => void;
+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 createFilterComponent: <InstanceType extends Pixi.Filter, OptionsType extends object>(PixiClass: new (props: OptionsType) => InstanceType) => (props: OptionsType & FilterProps<InstanceType>) => InstanceType & JSX.Element;

package/dist/types/index.d.ts

@@ -1,8 +1,8 @@
+export type { ContainerProps, LeafProps } from "./component-creation";
 export { onResize } from "./on-resize";
 export type { PixiApplicationProps } from "./pixi-application";
 export { delay, getPixiApp, getTicker, onTick, PixiApplication, TickerProvider, } from "./pixi-application";
 export { PixiCanvas } from "./pixi-canvas";
-export type { ContainerProps, LeafProps } from "./pixi-components";
 export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
 export type { PixiEventHandlerMap } from "./pixi-events";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events";

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

@@ -1,102 +1,76 @@
 import type * as Pixi from "pixi.js";
-import { Container as PixiContainer } from "pixi.js";
-import type { JSX, Ref } from "solid-js";
-import type { PixiEventHandlerMap } from "./pixi-events";
-/**
- * Prop definition for components that CAN have children
- */
-export type ContainerProps<Component> = PixiEventHandlerMap & {
-    ref?: Ref<Component>;
-    as?: Component;
-    children?: JSX.Element;
-};
-/**
- * Prop definition for components that CANNOT have children
- */
-export type LeafProps<Component> = Omit<ContainerProps<Component>, "children">;
-export declare const SOLID_PROP_KEYS: readonly ["ref", "as", "children"];
-/**
- * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.
- *
- * @param instance The Pixi instance we want to apply props to.
- * @param props The props object.
- * @param defer Defers the createRenderEffect so the props aren't set on the first run.
- * This is useful because setting initialisation props can have unintended side effects.
- * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.
- */
-export declare const applyProps: <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType, defer?: boolean) => void;
 /**
  * A SolidJS component that renders a `PIXI.AnimatedSprite`.
  */
-export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & LeafProps<Pixi.AnimatedSprite>) => Pixi.AnimatedSprite & JSX.Element;
+export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & import("./component-creation").LeafProps<Pixi.AnimatedSprite>) => 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"> & LeafProps<Pixi.BitmapText>) => Pixi.BitmapText & JSX.Element;
+export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, Pixi.TextStyleOptions>, "children"> & import("./component-creation").LeafProps<Pixi.BitmapText>) => 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"> & PixiEventHandlerMap & {
-    ref?: Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
+export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.ContainerChild>, "children"> & import("./pixi-events").PixiEventHandlerMap & {
+    ref?: import("solid-js").Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
     as?: Pixi.Container<Pixi.ContainerChild> | undefined;
-    children?: JSX.Element;
-}) => Pixi.Container<Pixi.ContainerChild> & JSX.Element;
+    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"> & LeafProps<Pixi.Graphics>) => Pixi.Graphics & JSX.Element;
+export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & import("./component-creation").LeafProps<Pixi.Graphics>) => Pixi.Graphics & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.HTMLText`.
  */
-export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & LeafProps<Pixi.HTMLText>) => Pixi.HTMLText & JSX.Element;
+export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & import("./component-creation").LeafProps<Pixi.HTMLText>) => Pixi.HTMLText & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshPlane`.
  */
-export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & LeafProps<Pixi.MeshPlane>) => Pixi.MeshPlane & JSX.Element;
+export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & import("./component-creation").LeafProps<Pixi.MeshPlane>) => Pixi.MeshPlane & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshRope`.
  */
-export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & LeafProps<Pixi.MeshRope>) => Pixi.MeshRope & JSX.Element;
+export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & import("./component-creation").LeafProps<Pixi.MeshRope>) => Pixi.MeshRope & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.NineSliceSprite`.
  */
-export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & LeafProps<Pixi.NineSliceSprite>) => Pixi.NineSliceSprite & JSX.Element;
+export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & import("./component-creation").LeafProps<Pixi.NineSliceSprite>) => Pixi.NineSliceSprite & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.ParticleContainer`.
  *
  * 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, "children"> & LeafProps<Pixi.ParticleContainer>) => Pixi.ParticleContainer & JSX.Element;
+export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions, "children"> & import("./component-creation").LeafProps<Pixi.ParticleContainer>) => Pixi.ParticleContainer & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.PerspectiveMesh`.
  */
-export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & LeafProps<Pixi.PerspectiveMesh>) => Pixi.PerspectiveMesh & JSX.Element;
+export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & import("./component-creation").LeafProps<Pixi.PerspectiveMesh>) => Pixi.PerspectiveMesh & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.RenderContainer`.
  */
-export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & PixiEventHandlerMap & {
-    ref?: Ref<Pixi.RenderContainer> | undefined;
+export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & import("./pixi-events").PixiEventHandlerMap & {
+    ref?: import("solid-js").Ref<Pixi.RenderContainer> | undefined;
     as?: Pixi.RenderContainer | undefined;
-    children?: JSX.Element;
-}) => Pixi.RenderContainer & JSX.Element;
+    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"> & PixiEventHandlerMap & {
-    ref?: Ref<Pixi.RenderLayer> | undefined;
+export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & import("./pixi-events").PixiEventHandlerMap & {
+    ref?: import("solid-js").Ref<Pixi.RenderLayer> | undefined;
     as?: Pixi.RenderLayer | undefined;
-    children?: JSX.Element;
-}) => Pixi.RenderLayer & JSX.Element;
+    children?: import("solid-js").JSX.Element;
+}) => Pixi.RenderLayer & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Sprite`.
  */
-export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & LeafProps<Pixi.Sprite>) => Pixi.Sprite & JSX.Element;
+export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & import("./component-creation").LeafProps<Pixi.Sprite>) => Pixi.Sprite & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Text`.
  */
-export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & LeafProps<Pixi.Text>) => Pixi.Text & JSX.Element;
+export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & import("./component-creation").LeafProps<Pixi.Text>) => Pixi.Text & import("solid-js").JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.TilingSprite`.
  */
-export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & LeafProps<Pixi.TilingSprite>) => Pixi.TilingSprite & JSX.Element;
+export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & import("./component-creation").LeafProps<Pixi.TilingSprite>) => Pixi.TilingSprite & import("solid-js").JSX.Element;

package/dist/types/renderer.d.ts

@@ -1,2 +1,2 @@
-import type { Container as PixiContainer } from "pixi.js";
-export declare const effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => PixiContainer<import("pixi.js").ContainerChild>, props: T) => PixiContainer<import("pixi.js").ContainerChild>, createElement: (tag: string) => PixiContainer<import("pixi.js").ContainerChild>, createTextNode: (value: string) => PixiContainer<import("pixi.js").ContainerChild>, insertNode: (parent: PixiContainer<import("pixi.js").ContainerChild>, node: PixiContainer<import("pixi.js").ContainerChild>, anchor?: PixiContainer<import("pixi.js").ContainerChild> | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => PixiContainer<import("pixi.js").ContainerChild>, setProp: <T>(node: PixiContainer<import("pixi.js").ContainerChild>, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: PixiContainer<import("pixi.js").ContainerChild>, arg: A) => T, element: PixiContainer<import("pixi.js").ContainerChild>, arg: A) => T, render: (code: () => PixiContainer<import("pixi.js").ContainerChild>, node: PixiContainer<import("pixi.js").ContainerChild>) => () => void, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void;
+import type * as Pixi from "pixi.js";
+export declare const effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => Pixi.Container<Pixi.ContainerChild>, props: T) => Pixi.Container<Pixi.ContainerChild>, createElement: (tag: string) => Pixi.Container<Pixi.ContainerChild>, createTextNode: (value: string) => Pixi.Container<Pixi.ContainerChild>, insertNode: (parent: Pixi.Container<Pixi.ContainerChild>, node: Pixi.Container<Pixi.ContainerChild>, anchor?: Pixi.Container<Pixi.ContainerChild> | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => Pixi.Container<Pixi.ContainerChild>, setProp: <T>(node: Pixi.Container<Pixi.ContainerChild>, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: Pixi.Container<Pixi.ContainerChild>, arg: A) => T, element: Pixi.Container<Pixi.ContainerChild>, arg: A) => T, render: (code: () => Pixi.Container<Pixi.ContainerChild>, node: Pixi.Container<Pixi.ContainerChild>) => () => void, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "pixi-solid",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "A library to write PixiJS applications with SolidJS",
   "author": "Luke Thompson",
   "license": "MIT",
+  "homepage": "https://lukecarlthompson.github.io/pixi-solid/",
   "repository": {
     "type": "git",
     "url": "https://github.com/LukeCarlThompson/pixi-solid"
@@ -36,6 +37,7 @@
     "build": "vite build && tsc --project tsconfig.build.json --emitDeclarationOnly",
     "build:docs": "typedoc --options typedoc.config.js",
     "preview": "vite preview",
-    "preinstall": "npx only-allow pnpm"
+    "preinstall": "npx only-allow pnpm",
+    "test": "echo \"A dummy test\""
   }
 }