pixi-solid 0.0.36 → 0.1.1

package/dist/components/bind-props/bind-children.js

@@ -0,0 +1,47 @@
+import { children, createRenderEffect } from "solid-js";
+const bindChildrenToContainer = (parent, children$1) => {
+  const resolvedChildren = children(() => children$1);
+  const canAddChild = "addChildAt" in parent;
+  if (!canAddChild) {
+    throw new Error("Parent does not support children.");
+  }
+  createRenderEffect((prevChildren) => {
+    const nextChildren = resolvedChildren.toArray();
+    if (prevChildren === nextChildren) return nextChildren;
+    if (prevChildren) {
+      for (let i = 0; i < prevChildren.length; i += 1) {
+        const child = prevChildren[i];
+        if (nextChildren.includes(child)) continue;
+        parent.removeChild(child);
+        child.destroy({ children: true });
+      }
+    }
+    for (let i = 0; i < nextChildren.length; i += 1) {
+      parent.addChildAt(nextChildren[i], i);
+    }
+    return nextChildren;
+  });
+};
+const bindChildrenToRenderLayer = (parent, children$1) => {
+  const resolvedChildren = children(() => children$1);
+  createRenderEffect((prevChildren) => {
+    const nextChildren = resolvedChildren.toArray();
+    if (prevChildren === nextChildren) return nextChildren;
+    if (prevChildren) {
+      for (let i = 0; i < prevChildren.length; i += 1) {
+        const child = prevChildren[i];
+        if (nextChildren.includes(child)) continue;
+        parent.detach(child);
+      }
+    }
+    for (let i = 0; i < nextChildren.length; i += 1) {
+      parent.attach(nextChildren[i]);
+    }
+    return nextChildren;
+  });
+};
+export {
+  bindChildrenToContainer,
+  bindChildrenToRenderLayer
+};
+//# sourceMappingURL=bind-children.js.map

package/dist/components/bind-props/bind-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind-children.js","sources":["../../../src/components/bind-props/bind-children.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { children as resolveChildren, createRenderEffect } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\n\nexport const bindChildrenToContainer = (parent: Pixi.Container, children?: JSX.Element) => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  const canAddChild = \"addChildAt\" in parent;\n\n  if (!canAddChild) {\n    throw new Error(\"Parent does not support children.\");\n  }\n\n  createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n    const nextChildren = resolvedChildren.toArray() as unknown as Pixi.Container[];\n\n    if (prevChildren === nextChildren) return nextChildren;\n\n    if (prevChildren) {\n      for (let i = 0; i < prevChildren.length; i += 1) {\n        const child = prevChildren[i];\n        if (nextChildren.includes(child)) continue;\n        parent.removeChild(child);\n        child.destroy({ children: true });\n      }\n    }\n\n    for (let i = 0; i < nextChildren.length; i += 1) {\n      (parent as Pixi.Container).addChildAt(nextChildren[i], i);\n    }\n\n    return nextChildren;\n  });\n};\n\nexport const bindChildrenToRenderLayer = (parent: Pixi.RenderLayer, children?: JSX.Element) => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n    const nextChildren = resolvedChildren.toArray() as unknown as Pixi.Container[];\n\n    if (prevChildren === nextChildren) return nextChildren;\n\n    if (prevChildren) {\n      for (let i = 0; i < prevChildren.length; i += 1) {\n        const child = prevChildren[i];\n        if (nextChildren.includes(child)) continue;\n\n        parent.detach(child);\n      }\n    }\n\n    for (let i = 0; i < nextChildren.length; i += 1) {\n      parent.attach(nextChildren[i]);\n    }\n\n    return nextChildren;\n  });\n};\n"],"names":["children","resolveChildren"],"mappings":";AAIO,MAAM,0BAA0B,CAAC,QAAwBA,eAA2B;AACzF,QAAM,mBAAmBC,SAAgB,MAAMD,UAAQ;AAEvD,QAAM,cAAc,gBAAgB;AAEpC,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAEA,qBAAmB,CAAC,iBAA+C;AACjE,UAAM,eAAe,iBAAiB,QAAA;AAEtC,QAAI,iBAAiB,aAAc,QAAO;AAE1C,QAAI,cAAc;AAChB,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,cAAM,QAAQ,aAAa,CAAC;AAC5B,YAAI,aAAa,SAAS,KAAK,EAAG;AAClC,eAAO,YAAY,KAAK;AACxB,cAAM,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,MAClC;AAAA,IACF;AAEA,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC9C,aAA0B,WAAW,aAAa,CAAC,GAAG,CAAC;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT,CAAC;AACH;AAEO,MAAM,4BAA4B,CAAC,QAA0BA,eAA2B;AAC7F,QAAM,mBAAmBC,SAAgB,MAAMD,UAAQ;AAEvD,qBAAmB,CAAC,iBAA+C;AACjE,UAAM,eAAe,iBAAiB,QAAA;AAEtC,QAAI,iBAAiB,aAAc,QAAO;AAE1C,QAAI,cAAc;AAChB,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,cAAM,QAAQ,aAAa,CAAC;AAC5B,YAAI,aAAa,SAAS,KAAK,EAAG;AAElC,eAAO,OAAO,KAAK;AAAA,MACrB;AAAA,IACF;AAEA,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,aAAO,OAAO,aAAa,CAAC,CAAC;AAAA,IAC/B;AAEA,WAAO;AAAA,EACT,CAAC;AACH;"}

package/dist/components/bind-props/bind-props.js

@@ -0,0 +1,37 @@
+import { bindChildrenToRenderLayer, bindChildrenToContainer } from "./bind-children.js";
+import { setProp } from "./set-prop.js";
+import { createRenderEffect, on } from "solid-js";
+const bindProps = (instance, props, defer) => {
+  for (const key in props) {
+    if (key === "as") continue;
+    if (key === "ref") {
+      props[key](instance);
+    } else if (key === "children") {
+      if ("attach" in instance && "detach" in instance) {
+        bindChildrenToRenderLayer(instance, props.children);
+      } else {
+        bindChildrenToContainer(instance, props.children);
+      }
+      continue;
+    }
+    if (defer) {
+      createRenderEffect(
+        on(
+          () => props[key],
+          (_input, _prevInput, prevValue) => {
+            return setProp(instance, key, props[key], prevValue);
+          },
+          { defer }
+        )
+      );
+      continue;
+    }
+    createRenderEffect(
+      (prevValue) => setProp(instance, key, props[key], prevValue)
+    );
+  }
+};
+export {
+  bindProps
+};
+//# sourceMappingURL=bind-props.js.map

package/dist/components/bind-props/bind-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bind-props.js","sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { ContainerProps } from \"../component-factories\";\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { setProp } from \"./set-prop\";\nimport { createRenderEffect, on } from \"solid-js\";\n\n/**\n * Applies the props to a Pixi instance with subscriptions 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 * Notably in AnimatedSprite, if we set the textures property after instantiation it will stop the instance from playing.\n */\nexport const bindProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean,\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      (props[key] as unknown as (arg: any) => void)(instance);\n    } else if (key === \"children\") {\n      if (\"attach\" in instance && \"detach\" in instance) {\n        bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n      } else {\n        bindChildrenToContainer(instance, props.children);\n      }\n      continue;\n    }\n\n    if (defer) {\n      createRenderEffect(\n        on<OptionsType[keyof OptionsType], OptionsType[keyof OptionsType] | undefined>(\n          () => props[key as keyof typeof props],\n          (_input, _prevInput, prevValue) => {\n            return setProp(instance, key, props[key as keyof typeof props], prevValue);\n          },\n          { defer },\n        ),\n      );\n      continue;\n    }\n\n    createRenderEffect((prevValue) =>\n      setProp(instance, key, props[key as keyof typeof props], prevValue),\n    );\n  }\n};\n"],"names":[],"mappings":";;;AAeO,MAAM,YAAY,CAIvB,UACA,OACA,UACG;AACH,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAChB,YAAM,GAAG,EAAoC,QAAQ;AAAA,IACxD,WAAW,QAAQ,YAAY;AAC7B,UAAI,YAAY,YAAY,YAAY,UAAU;AAChD,kCAA0B,UAAyC,MAAM,QAAQ;AAAA,MACnF,OAAO;AACL,gCAAwB,UAAU,MAAM,QAAQ;AAAA,MAClD;AACA;AAAA,IACF;AAEA,QAAI,OAAO;AACT;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,CAAC,QAAQ,YAAY,cAAc;AACjC,mBAAO,QAAQ,UAAU,KAAK,MAAM,GAAyB,GAAG,SAAS;AAAA,UAC3E;AAAA,UACA,EAAE,MAAA;AAAA,QAAM;AAAA,MACV;AAEF;AAAA,IACF;AAEA;AAAA,MAAmB,CAAC,cAClB,QAAQ,UAAU,KAAK,MAAM,GAAyB,GAAG,SAAS;AAAA,IAAA;AAAA,EAEtE;AACF;"}

package/dist/components/bind-props/event-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-names.js","sources":["../../../src/components/bind-props/event-names.ts"],"sourcesContent":["import type { FederatedEventEmitterTypes } from \"pixi.js\";\n\nexport const PIXI_EVENT_NAMES: (keyof FederatedEventEmitterTypes)[] = [\n  \"click\",\n  \"mousedown\",\n  \"mouseenter\",\n  \"mouseleave\",\n  \"mousemove\",\n  \"mouseout\",\n  \"mouseover\",\n  \"mouseup\",\n  \"mouseupoutside\",\n  \"pointercancel\",\n  \"pointerdown\",\n  \"pointerenter\",\n  \"pointerleave\",\n  \"pointermove\",\n  \"pointerout\",\n  \"pointerover\",\n  \"pointertap\",\n  \"pointerup\",\n  \"pointerupoutside\",\n  \"rightclick\",\n  \"rightdown\",\n  \"rightup\",\n  \"rightupoutside\",\n  \"tap\",\n  \"touchcancel\",\n  \"touchend\",\n  \"touchendoutside\",\n  \"touchmove\",\n  \"touchstart\",\n  \"wheel\",\n  \"globalmousemove\",\n  \"globalpointermove\",\n  \"globaltouchmove\",\n  \"clickcapture\",\n  \"mousedowncapture\",\n  \"mouseentercapture\",\n  \"mouseleavecapture\",\n  \"mousemovecapture\",\n  \"mouseoutcapture\",\n  \"mouseovercapture\",\n  \"mouseupcapture\",\n  \"mouseupoutsidecapture\",\n  \"pointercancelcapture\",\n  \"pointerdowncapture\",\n  \"pointerentercapture\",\n  \"pointerleavecapture\",\n  \"pointermovecapture\",\n  \"pointeroutcapture\",\n  \"pointerovercapture\",\n  \"pointertapcapture\",\n  \"pointerupcapture\",\n  \"pointerupoutsidecapture\",\n  \"rightclickcapture\",\n  \"rightdowncapture\",\n  \"rightupcapture\",\n  \"rightupoutsidecapture\",\n  \"tapcapture\",\n  \"touchcancelcapture\",\n  \"touchendcapture\",\n  \"touchendoutsidecapture\",\n  \"touchmovecapture\",\n  \"touchstartcapture\",\n  \"wheelcapture\",\n] as const;\n\nexport const PIXI_SOLID_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map(\n  (eventName) => `on${eventName}` as const,\n);\n\nexport type PixiEventHandlerMap = {\n  [K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?:\n    | null\n    | ((...args: FederatedEventEmitterTypes[K]) => void);\n};\n\nexport const PIXI_EVENT_HANDLER_NAME_SET: Set<string> = new Set(PIXI_SOLID_EVENT_HANDLER_NAMES);\n\n/**\n * This is a type-safe check that ensures `PIXI_EVENT_NAMES` includes every key from Pixi's `AllFederatedEventMap` type.\n * It will cause a build error if any event names are missing.\n */\ntype MissingKeys = Exclude<keyof FederatedEventEmitterTypes, (typeof PIXI_EVENT_NAMES)[number]>;\ntype AllEventsAreHandled = MissingKeys extends never\n  ? true\n  : `Error: Missing event keys: ${MissingKeys}`;\nconst allEventsAreHandled: AllEventsAreHandled = true;\nvoid allEventsAreHandled;\n"],"names":[],"mappings":"AAEO,MAAM,mBAAyD;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,iCAAiC,iBAAiB;AAAA,EAC7D,CAAC,cAAc,KAAK,SAAS;AAC/B;AAQO,MAAM,8BAA2C,IAAI,IAAI,8BAA8B;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"point-property-names.js","sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["const POINT_PROP_NAMES = [\n  \"position\",\n  \"scale\",\n  \"pivot\",\n  \"skew\",\n  \"anchor\",\n  \"tilePosition\",\n  \"tileScale\",\n] as const;\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\nexport const POINT_PROP_AXIS_NAMES = [\n  \"positionX\",\n  \"positionY\",\n  \"scaleX\",\n  \"scaleY\",\n  \"pivotX\",\n  \"pivotY\",\n  \"skewX\",\n  \"skewY\",\n  \"anchorX\",\n  \"anchorY\",\n  \"tilePositionX\",\n  \"tilePositionY\",\n  \"tileScaleX\",\n  \"tileScaleY\",\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n  ...POINT_PROP_NAMES_SET,\n  ...POINT_PROP_AXIS_NAMES_SET,\n]);\n"],"names":[],"mappings":"AAAA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAoC,IAAI,IAAI,gBAAgB;AAElE,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,4BAAyC,IAAI,IAAI,qBAAqB;AAE5E,MAAM,+CAA4C,IAAI;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AACL,CAAC;"}

package/dist/components/bind-props/set-event-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-event-property.js","sources":["../../../src/components/bind-props/set-event-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { PIXI_EVENT_NAMES } from \"./event-names\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./event-names\";\n\nexport const isEventProperty = (name: string): boolean => PIXI_EVENT_HANDLER_NAME_SET.has(name);\n\nexport const setEventProperty = (\n  node: Pixi.Container,\n  name: string,\n  eventHandler: any,\n  prevEventHandler?: any,\n): void => {\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 (prevEventHandler) {\n    node.removeEventListener(eventName, prevEventHandler);\n  }\n  node.addEventListener(eventName, eventHandler);\n};\n"],"names":[],"mappings":";AAIO,MAAM,kBAAkB,CAAC,SAA0B,4BAA4B,IAAI,IAAI;AAEvF,MAAM,mBAAmB,CAC9B,MACA,MACA,cACA,qBACS;AAET,QAAM,YAAY,KAAK,MAAM,CAAC;AAE9B,MAAI,kBAAkB;AACpB,SAAK,oBAAoB,WAAW,gBAAgB;AAAA,EACtD;AACA,OAAK,iBAAiB,WAAW,YAAY;AAC/C;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"set-point-property.js","sources":["../../../src/components/bind-props/set-point-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n  ALL_VALID_PROP_NAMES_SET,\n  POINT_PROP_AXIS_NAMES_SET,\n  POINT_PROP_NAMES_SET,\n} from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): boolean =>\n  ALL_VALID_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: string, value: T): void => {\n  if (typeof value === \"object\" && value !== null) {\n    (node as any)[name].set((value as any).x, (value as any).y);\n    return;\n  }\n\n  if (typeof value === \"number\") {\n    if (POINT_PROP_NAMES_SET.has(name)) {\n      (node as any)[name].set(value);\n    } else if (POINT_PROP_AXIS_NAMES_SET.has(name)) {\n      const axisName = name[name.length - 1].toLowerCase();\n      const propertyName = name.slice(0, -1);\n      (node as any)[propertyName][axisName] = value;\n    }\n  }\n};\n"],"names":[],"mappings":";AAOO,MAAM,kBAAkB,CAAC,aAC9B,yBAAyB,IAAI,QAAQ;AAEhC,MAAM,mBAAmB,CAAI,MAAsB,MAAc,UAAmB;AACzF,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC9C,SAAa,IAAI,EAAE,IAAK,MAAc,GAAI,MAAc,CAAC;AAC1D;AAAA,EACF;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,QAAI,qBAAqB,IAAI,IAAI,GAAG;AACjC,WAAa,IAAI,EAAE,IAAI,KAAK;AAAA,IAC/B,WAAW,0BAA0B,IAAI,IAAI,GAAG;AAC9C,YAAM,WAAW,KAAK,KAAK,SAAS,CAAC,EAAE,YAAA;AACvC,YAAM,eAAe,KAAK,MAAM,GAAG,EAAE;AACpC,WAAa,YAAY,EAAE,QAAQ,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;"}

package/dist/components/bind-props/set-prop.js

@@ -0,0 +1,20 @@
+import { isEventProperty, setEventProperty } from "./set-event-property.js";
+import { isPointProperty, setPointProperty } from "./set-point-property.js";
+const setProp = (instance, key, value, prevValue) => {
+  if (isPointProperty(key)) {
+    setPointProperty(instance, key, value);
+    return value;
+  }
+  if (key in instance) {
+    instance[key] = value;
+    return value;
+  }
+  if (isEventProperty(key)) {
+    setEventProperty(instance, key, value, prevValue);
+    return value;
+  }
+};
+export {
+  setProp
+};
+//# sourceMappingURL=set-prop.js.map

package/dist/components/bind-props/set-prop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-prop.js","sources":["../../../src/components/bind-props/set-prop.ts"],"sourcesContent":["import { isEventProperty, setEventProperty } from \"./set-event-property\";\nimport { isPointProperty, setPointProperty } from \"./set-point-property\";\nimport type * as Pixi from \"pixi.js\";\n\nexport const setProp = <T = unknown>(\n  instance: Pixi.Container,\n  key: string,\n  value: T,\n  prevValue?: T,\n): T | undefined => {\n  if (isPointProperty(key)) {\n    setPointProperty(instance, key, value as number);\n    return value;\n  }\n\n  if (key in instance) {\n    (instance as any)[key] = value;\n    return value;\n  }\n\n  if (isEventProperty(key)) {\n    setEventProperty(instance, key, value, prevValue);\n    return value;\n  }\n};\n"],"names":[],"mappings":";;AAIO,MAAM,UAAU,CACrB,UACA,KACA,OACA,cACkB;AAClB,MAAI,gBAAgB,GAAG,GAAG;AACxB,qBAAiB,UAAU,KAAK,KAAe;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU;AAClB,aAAiB,GAAG,IAAI;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB,GAAG,GAAG;AACxB,qBAAiB,UAAU,KAAK,OAAO,SAAS;AAChD,WAAO;AAAA,EACT;AACF;"}

package/dist/components/component-factories.js

@@ -0,0 +1,29 @@
+import { splitProps } from "solid-js";
+import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./bind-props/event-names.js";
+import { POINT_PROP_AXIS_NAMES } from "./bind-props/point-property-names.js";
+import { bindProps } from "./bind-props/bind-props.js";
+const SOLID_PROP_KEYS = ["ref", "as", "children"];
+const createContainerComponent = (PixiClass) => {
+  return (props) => {
+    const [runtimeProps, initialisationProps] = splitProps(props, [
+      ...SOLID_PROP_KEYS,
+      ...PIXI_SOLID_EVENT_HANDLER_NAMES,
+      ...POINT_PROP_AXIS_NAMES
+    ]);
+    const instance = props.as || new PixiClass(initialisationProps);
+    bindProps(instance, initialisationProps, true);
+    bindProps(instance, runtimeProps);
+    return instance;
+  };
+};
+const createLeafComponent = (PixiClass) => {
+  return (props) => {
+    return createContainerComponent(PixiClass)(props);
+  };
+};
+export {
+  SOLID_PROP_KEYS,
+  createContainerComponent,
+  createLeafComponent
+};
+//# sourceMappingURL=component-factories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type { PointAxisPropName } from \"./bind-props/point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./bind-props/point-property-names\";\nimport { bindProps } from \"./bind-props\";\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n  ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n  PointAxisProps & {\n    ref?: Ref<Component>;\n    as?: Component;\n    children?: JSX.Element;\n  };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n  props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n  return (props): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n      ...POINT_PROP_AXIS_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindProps(instance, initialisationProps, true);\n    bindProps(instance, runtimeProps);\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createLeafComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (\n    props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    for (const key in initialisationProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      } else if (key === \"children\") {\n        throw new Error(`Cannot set children on non-container instance.`);\n      } else {\n        createRenderEffect(\n          on(\n            () => props[key as keyof typeof initialisationProps],\n            () => {\n              (instance as any)[key] = initialisationProps[key];\n            },\n            { defer: true },\n          ),\n        );\n      }\n    }\n\n    for (const key in runtimeProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      }\n    }\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAEhD,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,cAAU,UAAU,qBAAqB,IAAI;AAC7C,cAAU,UAAU,YAAY;AAEhC,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 → components/components.js}

@@ -1,5 +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 { createLeafComponent, createContainerComponent } from "./component-creation.js";
+import { createLeafComponent, createContainerComponent } from "./component-factories.js";
 const AnimatedSprite = createLeafComponent(AnimatedSprite$1);
 const BitmapText = createLeafComponent(BitmapText$1);
 const Container = createContainerComponent(Container$1);
@@ -32,4 +32,4 @@ export {
   Text,
   TilingSprite
 };
-//# sourceMappingURL=pixi-components.js.map
+//# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../../src/components/components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n  AnimatedSprite as PixiAnimatedSprite,\n  BitmapText as PixiBitmapText,\n  Container as PixiContainer,\n  Graphics as PixiGraphics,\n  HTMLText as PixiHTMLText,\n  MeshPlane as PixiMeshPlane,\n  MeshRope as PixiMeshRope,\n  NineSliceSprite as PixiNineSliceSprite,\n  ParticleContainer as PixiParticleContainer,\n  PerspectiveMesh as PixiPerspectiveMesh,\n  RenderContainer as PixiRenderContainer,\n  RenderLayer as PixiRenderLayer,\n  Sprite as PixiSprite,\n  Text as PixiText,\n  TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\nimport { createContainerComponent, createLeafComponent } from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n  PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n  PixiContainer,\n);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<\n  PixiNineSliceSprite,\n  Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<\n  PixiParticleContainer,\n  Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<\n  PixiPerspectiveMesh,\n  Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<\n  PixiRenderContainer,\n  Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n  PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n  PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["AnimatedSprite","createLeafComponent","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;AAuBO,MAAMA,iBAAiBC,oBAC5BC,gBACF;AAIO,MAAMC,aAAaF,oBAAsDG,YAAc;AAIvF,MAAMC,YAAYC,yBACvBC,WACF;AAKO,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAG7BgB,iBAAmB;AAOd,MAAMC,oBAAoBjB,oBAG/BkB,mBAAqB;AAKhB,MAAMC,kBAAkBnB,oBAG7BoB,iBAAmB;AAKd,MAAMC,kBAAkBhB,yBAG7BiB,iBAAmB;AAKd,MAAMC,cAAclB,yBACzBmB,aACF;AAKO,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAC1B8B,cACF;"}

package/dist/delay.js

@@ -0,0 +1,55 @@
+import { useContext } from "solid-js";
+import { TickerContext } from "./pixi-application/context.js";
+const delay = (delayMs, callback) => {
+  const ticker = useContext(TickerContext);
+  if (!ticker) {
+    throw new Error("`delay` must be used within a PixiApplicationProvider or a TickerProvider.");
+  }
+  let timeDelayed = 0;
+  const internalCallback = () => {
+    timeDelayed += ticker.deltaMS;
+    if (timeDelayed < delayMs) return;
+    callback?.();
+    ticker.remove(internalCallback);
+  };
+  ticker.add(internalCallback);
+};
+const asyncDelay = async (ticker, delayMs, signal) => {
+  let timeDelayed = 0;
+  let resolvePromise;
+  const promise = new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+  const internalCallback = () => {
+    timeDelayed += ticker.deltaMS;
+    if (timeDelayed < delayMs) return;
+    resolvePromise();
+  };
+  const handleAbort = () => {
+    ticker.remove(internalCallback);
+    resolvePromise();
+  };
+  if (signal?.aborted) {
+    return;
+  }
+  signal?.addEventListener("abort", handleAbort);
+  ticker.add(internalCallback);
+  await promise;
+  ticker.remove(internalCallback);
+  signal?.removeEventListener("abort", handleAbort);
+};
+const createAsyncDelay = () => {
+  const ticker = useContext(TickerContext);
+  if (!ticker) {
+    throw new Error(
+      "`createAsyncDelay` must be used within a PixiApplicationProvider or a TickerProvider. The returned delay function can be called in an async context but `createAsyncDelay` must be called in a synchronous scope within a PixiApplicationProvider or a TickerProvider"
+    );
+  }
+  const delayWithTicker = (delayMs, signal) => asyncDelay(ticker, delayMs, signal);
+  return delayWithTicker;
+};
+export {
+  createAsyncDelay,
+  delay
+};
+//# sourceMappingURL=delay.js.map

package/dist/delay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delay.js","sources":["../src/delay.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { TickerContext } from \"./pixi-application/context\";\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"`delay` must be used within a PixiApplicationProvider or a TickerProvider.\");\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\nconst asyncDelay = async (ticker: Pixi.Ticker, delayMs: number, signal?: AbortSignal) => {\n  let timeDelayed = 0;\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    resolvePromise();\n  };\n\n  const handleAbort = () => {\n    ticker.remove(internalCallback);\n    resolvePromise();\n  };\n\n  if (signal?.aborted) {\n    // Already aborted before we even started\n    return;\n  }\n\n  signal?.addEventListener(\"abort\", handleAbort);\n\n  ticker.add(internalCallback);\n  await promise;\n  ticker.remove(internalCallback);\n  signal?.removeEventListener(\"abort\", handleAbort);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @param signal - Optional AbortSignal to resolve the delay early\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context. If the signal aborts, the promise resolves immediately.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number, signal?: AbortSignal) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createAsyncDelay` must be used within a PixiApplicationProvider or a TickerProvider. The returned delay function can be called in an async context but `createAsyncDelay` must be called in a synchronous scope within a PixiApplicationProvider or a TickerProvider\",\n    );\n  }\n  const delayWithTicker = (delayMs: number, signal?: AbortSignal) =>\n    asyncDelay(ticker, delayMs, signal);\n\n  return delayWithTicker;\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,QAAQ,CAAC,SAAiB,aAAgC;AACrE,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,MAAI,cAAc;AAElB,QAAM,mBAAmB,MAAM;AAC7B,mBAAe,OAAO;AACtB,QAAI,cAAc,QAAS;AAC3B,eAAA;AACA,WAAO,OAAO,gBAAgB;AAAA,EAChC;AAEA,SAAO,IAAI,gBAAgB;AAC7B;AAEA,MAAM,aAAa,OAAO,QAAqB,SAAiB,WAAyB;AACvF,MAAI,cAAc;AAClB,MAAI;AAEJ,QAAM,UAAU,IAAI,QAAc,CAAC,YAAY;AAC7C,qBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,mBAAmB,MAAM;AAC7B,mBAAe,OAAO;AACtB,QAAI,cAAc,QAAS;AAC3B,mBAAA;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,WAAO,OAAO,gBAAgB;AAC9B,mBAAA;AAAA,EACF;AAEA,MAAI,QAAQ,SAAS;AAEnB;AAAA,EACF;AAEA,UAAQ,iBAAiB,SAAS,WAAW;AAE7C,SAAO,IAAI,gBAAgB;AAC3B,QAAM;AACN,SAAO,OAAO,gBAAgB;AAC9B,UAAQ,oBAAoB,SAAS,WAAW;AAClD;AAgBO,MAAM,mBAAmB,MAAkE;AAChG,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,QAAM,kBAAkB,CAAC,SAAiB,WACxC,WAAW,QAAQ,SAAS,MAAM;AAEpC,SAAO;AACT;"}

package/dist/index.js

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

package/dist/index.js.map

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

package/dist/on-resize.js

@@ -1,14 +1,19 @@
 import { onCleanup } from "solid-js";
-import { getPixiApp } from "./pixi-application.js";
+import { getPixiApp } from "./pixi-application/get-pixi-app.js";
 const onResize = (resizeCallback) => {
-  const app = getPixiApp();
+  let pixiApp;
+  try {
+    pixiApp = getPixiApp();
+  } catch {
+    throw new Error("onResize must be used within a PixiApplicationProvider or a PixiCanvas");
+  }
   const handleResize = () => {
-    resizeCallback(app.renderer.screen);
+    resizeCallback(pixiApp.renderer.screen);
   };
   handleResize();
-  app.renderer.addListener("resize", handleResize);
+  pixiApp.renderer.addListener("resize", handleResize);
   onCleanup(() => {
-    app.renderer.removeListener("resize", handleResize);
+    pixiApp.renderer.removeListener("resize", handleResize);
   });
 };
 export {

package/dist/on-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n *\n * @param resizeCallback A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * Because we listen for the renderer's \"resize\" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  const app = getPixiApp();\n\n  const handleResize = () => {\n    resizeCallback(app.renderer.screen);\n  };\n\n  handleResize();\n\n  app.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    app.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"names":[],"mappings":";;AAWO,MAAM,WAAW,CAAC,mBAA2D;AAClF,QAAM,MAAM,WAAA;AAEZ,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI,SAAS,MAAM;AAAA,EACpC;AAEA,eAAA;AAEA,MAAI,SAAS,YAAY,UAAU,YAAY;AAE/C,YAAU,MAAM;AACd,QAAI,SAAS,eAAe,UAAU,YAAY;AAAA,EACpD,CAAC;AACH;"}
+{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  const handleResize = () => {\n    resizeCallback(pixiApp.renderer.screen);\n  };\n\n  handleResize();\n\n  pixiApp.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    pixiApp.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"names":[],"mappings":";;AAeO,MAAM,WAAW,CAAC,mBAA2D;AAClF,MAAI;AAEJ,MAAI;AACF,cAAU,WAAA;AAAA,EACZ,QAAQ;AACN,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,QAAQ,SAAS,MAAM;AAAA,EACxC;AAEA,eAAA;AAEA,UAAQ,SAAS,YAAY,UAAU,YAAY;AAEnD,YAAU,MAAM;AACd,YAAQ,SAAS,eAAe,UAAU,YAAY;AAAA,EACxD,CAAC;AACH;"}

package/dist/on-tick.js

@@ -0,0 +1,18 @@
+import { useContext, onCleanup } from "solid-js";
+import { TickerContext } from "./pixi-application/context.js";
+const onTick = (tickerCallback) => {
+  const ticker = useContext(TickerContext);
+  if (!ticker) {
+    throw new Error(
+      "onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider"
+    );
+  }
+  ticker.add(tickerCallback);
+  onCleanup(() => {
+    ticker.remove(tickerCallback);
+  });
+};
+export {
+  onTick
+};
+//# sourceMappingURL=on-tick.js.map

package/dist/on-tick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-tick.js","sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: Pixi.TickerCallback<Pixi.Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n    );\n  }\n\n  ticker.add(tickerCallback);\n\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,SAAS,CAAC,mBAA2D;AAChF,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,IAAI,cAAc;AAEzB,YAAU,MAAM;AACd,WAAO,OAAO,cAAc;AAAA,EAC9B,CAAC;AACH;"}

package/dist/pixi-application/context.js

@@ -0,0 +1,8 @@
+import { createContext } from "solid-js";
+const PixiAppContext = createContext();
+const TickerContext = createContext();
+export {
+  PixiAppContext,
+  TickerContext
+};
+//# sourceMappingURL=context.js.map

package/dist/pixi-application/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../src/pixi-application/context.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createContext } from \"solid-js\";\nimport type { PixiScreenDimensions } from \"../use-pixi-screen/pixi-screen-store\";\n\nexport const PixiAppContext = createContext<{\n  app: Pixi.Application;\n  pixiScreenStore: Readonly<PixiScreenDimensions>;\n}>();\n\nexport const TickerContext = createContext<Pixi.Ticker>();\n"],"names":[],"mappings":";AAIO,MAAM,iBAAiB,cAAA;AAKvB,MAAM,gBAAgB,cAAA;"}

package/dist/pixi-application/get-pixi-app.js

@@ -0,0 +1,13 @@
+import { useContext } from "solid-js";
+import { PixiAppContext } from "./context.js";
+const getPixiApp = () => {
+  const appContext = useContext(PixiAppContext);
+  if (!appContext) {
+    throw new Error("getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas");
+  }
+  return appContext.app;
+};
+export {
+  getPixiApp
+};
+//# sourceMappingURL=get-pixi-app.js.map

package/dist/pixi-application/get-pixi-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-pixi-app.js","sources":["../../src/pixi-application/get-pixi-app.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Application instance provided by the `PixiApplication` component.\n */\nexport const getPixiApp = (): Pixi.Application => {\n  const appContext = useContext(PixiAppContext);\n\n  if (!appContext) {\n    throw new Error(\"getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  return appContext.app;\n};\n"],"names":[],"mappings":";;AAUO,MAAM,aAAa,MAAwB;AAChD,QAAM,aAAa,WAAW,cAAc;AAE5C,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,0EAA0E;AAAA,EAC5F;AAEA,SAAO,WAAW;AACpB;"}

package/dist/pixi-application/get-ticker.js

@@ -0,0 +1,13 @@
+import { useContext } from "solid-js";
+import { TickerContext } from "./context.js";
+const getTicker = () => {
+  const ticker = useContext(TickerContext);
+  if (!ticker) {
+    throw new Error("getTicker must be used within a PixiApplication or a TickerProvider");
+  }
+  return ticker;
+};
+export {
+  getTicker
+};
+//# sourceMappingURL=get-ticker.js.map

package/dist/pixi-application/get-ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-ticker.js","sources":["../../src/pixi-application/get-ticker.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { TickerContext } from \"./context\";\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Pixi.Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n"],"names":[],"mappings":";;AAcO,MAAM,YAAY,MAAmB;AAC1C,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO;AACT;"}

package/dist/pixi-application/pixi-application-provider.js

@@ -0,0 +1,60 @@
+import { createComponent } from "solid-js/web";
+import { createResource, useContext, splitProps, onCleanup, Show } from "solid-js";
+import { createPixiScreenStore } from "../use-pixi-screen/pixi-screen-store.js";
+import { PixiAppContext, TickerContext } from "./context.js";
+import { createPixiApplication } from "./pixi-application.js";
+const PixiApplicationProvider = (props) => {
+  const [appResource] = createResource(async () => {
+    const existingContext = useContext(PixiAppContext);
+    if (existingContext?.app) {
+      return existingContext.app;
+    }
+    const [, initialisationProps] = splitProps(props, ["children", "existingApp"]);
+    return await createPixiApplication(initialisationProps);
+  });
+  onCleanup(() => {
+    appResource()?.destroy(true, {
+      children: true
+    });
+  });
+  return createComponent(Show, {
+    get when() {
+      return appResource();
+    },
+    children: (app) => {
+      const pixiScreenStore = createPixiScreenStore(app().renderer);
+      const contextValue = {
+        app: app(),
+        pixiScreenStore
+      };
+      return createComponent(PixiAppContext.Provider, {
+        value: contextValue,
+        get children() {
+          return createComponent(TickerContext.Provider, {
+            get value() {
+              return app().ticker;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
+  });
+};
+const TickerProvider = (props) => {
+  return createComponent(TickerContext.Provider, {
+    get value() {
+      return props.ticker;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+export {
+  PixiApplicationProvider,
+  TickerProvider
+};
+//# sourceMappingURL=pixi-application-provider.js.map

package/dist/pixi-application/pixi-application-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n  Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n  children?: JSX.Element;\n  existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps) => {\n  const [appResource] = createResource(async () => {\n    const existingContext = useContext(PixiAppContext);\n    if (existingContext?.app) {\n      return existingContext.app;\n    }\n    const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n    return await createPixiApplication(initialisationProps);\n  });\n\n  onCleanup(() => {\n    appResource()?.destroy(true, { children: true });\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => {\n        const pixiScreenStore = createPixiScreenStore(app().renderer);\n        const contextValue = {\n          app: app(),\n          pixiScreenStore,\n        };\n\n        return (\n          <PixiAppContext.Provider value={contextValue}>\n            <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n          </PixiAppContext.Provider>\n        );\n      }}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application, usually for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"names":["PixiApplicationProvider","props","appResource","createResource","existingContext","useContext","PixiAppContext","app","initialisationProps","splitProps","createPixiApplication","onCleanup","destroy","children","_$createComponent","Show","when","pixiScreenStore","createPixiScreenStore","renderer","contextValue","Provider","value","TickerContext","ticker","TickerProvider"],"mappings":";;;;;AA6BO,MAAMA,0BAA0BA,CAACC,UAAgC;AACtE,QAAM,CAACC,WAAW,IAAIC,eAAe,YAAY;AAC/C,UAAMC,kBAAkBC,WAAWC,cAAc;AACjD,QAAIF,iBAAiBG,KAAK;AACxB,aAAOH,gBAAgBG;AAAAA,IACzB;AACA,UAAM,CAAA,EAAGC,mBAAmB,IAAIC,WAAWR,OAAO,CAAC,YAAY,aAAa,CAAC;AAC7E,WAAO,MAAMS,sBAAsBF,mBAAmB;AAAA,EACxD,CAAC;AAEDG,YAAU,MAAM;AACdT,gBAAAA,GAAeU,QAAQ,MAAM;AAAA,MAAEC,UAAU;AAAA,IAAA,CAAM;AAAA,EACjD,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEd,YAAAA;AAAAA,IAAa;AAAA,IAAAW,UACrBN,CAAAA,QAAQ;AACR,YAAMU,kBAAkBC,sBAAsBX,IAAAA,EAAMY,QAAQ;AAC5D,YAAMC,eAAe;AAAA,QACnBb,KAAKA,IAAAA;AAAAA,QACLU;AAAAA,MAAAA;AAGF,aAAAH,gBACGR,eAAee,UAAQ;AAAA,QAACC,OAAOF;AAAAA,QAAY,IAAAP,WAAA;AAAA,iBAAAC,gBACzCS,cAAcF,UAAQ;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAEf,MAAMiB;AAAAA,YAAM;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAGZ,MAAMY;AAAAA,YAAQ;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAGlE;AAAA,EAAA,CAAC;AAGP;AAUO,MAAMY,iBAAiBA,CAACxB,UAA+B;AAC5D,SAAAa,gBAAQS,cAAcF,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAErB,MAAMuB;AAAAA,IAAM;AAAA,IAAA,IAAAX,WAAA;AAAA,aAAGZ,MAAMY;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;"}

package/dist/pixi-application/pixi-application.js

@@ -0,0 +1,20 @@
+import { Application } from "pixi.js";
+const createPixiApplication = async (props) => {
+  const app = new Application();
+  await app.init({
+    resolution: window.devicePixelRatio,
+    autoDensity: true,
+    ...props
+  });
+  app.canvas.style.display = "block";
+  app.canvas.style.position = "absolute";
+  app.canvas.style.top = "0";
+  app.canvas.style.left = "0";
+  app.canvas.style.width = "100%";
+  app.canvas.style.height = "100%";
+  return app;
+};
+export {
+  createPixiApplication
+};
+//# sourceMappingURL=pixi-application.js.map

package/dist/pixi-application/pixi-application.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-application.js","sources":["../../src/pixi-application/pixi-application.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Application } from \"pixi.js\";\n\nexport type PixiApplicationProps = Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nexport const createPixiApplication = async (\n  props?: PixiApplicationProps,\n): Promise<Pixi.Application> => {\n  const app = new Application();\n  await app.init({\n    resolution: window.devicePixelRatio,\n    autoDensity: true,\n    ...props,\n  });\n\n  app.canvas.style.display = \"block\";\n  app.canvas.style.position = \"absolute\";\n  app.canvas.style.top = \"0\";\n  app.canvas.style.left = \"0\";\n  app.canvas.style.width = \"100%\";\n  app.canvas.style.height = \"100%\";\n\n  return app;\n};\n"],"names":[],"mappings":";AAKO,MAAM,wBAAwB,OACnC,UAC8B;AAC9B,QAAM,MAAM,IAAI,YAAA;AAChB,QAAM,IAAI,KAAK;AAAA,IACb,YAAY,OAAO;AAAA,IACnB,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,OAAO,MAAM,UAAU;AAC3B,MAAI,OAAO,MAAM,WAAW;AAC5B,MAAI,OAAO,MAAM,MAAM;AACvB,MAAI,OAAO,MAAM,OAAO;AACxB,MAAI,OAAO,MAAM,QAAQ;AACzB,MAAI,OAAO,MAAM,SAAS;AAE1B,SAAO;AACT;"}

package/dist/pixi-canvas.js

@@ -1,18 +1,18 @@
-import { template, insert, effect, style, className, use } from "solid-js/web";
-import { onMount, onCleanup } from "solid-js";
-import { applyProps } from "./component-creation.js";
-import { getPixiApp } from "./pixi-application.js";
+import { createComponent, mergeProps, template, insert, effect, style, className, use } from "solid-js/web";
+import { splitProps, onMount, onCleanup } from "solid-js";
+import { PixiApplicationProvider } from "./pixi-application/pixi-application-provider.js";
+import { getPixiApp } from "./pixi-application/get-pixi-app.js";
+import { bindProps } from "./components/bind-props/bind-props.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative>`);
-const PixiCanvas = (props) => {
+const InnerPixiCanvas = (props) => {
   let canvasWrapElement;
-  const pixiApp = getPixiApp();
-  pixiApp.canvas.style.display = "block";
-  pixiApp.canvas.style.position = "absolute";
-  pixiApp.canvas.style.top = "0";
-  pixiApp.canvas.style.left = "0";
-  pixiApp.canvas.style.width = "100%";
-  pixiApp.canvas.style.height = "100%";
-  applyProps(pixiApp.stage, props);
+  let pixiApp;
+  try {
+    pixiApp = getPixiApp();
+  } catch {
+    throw new Error("InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas");
+  }
+  bindProps(pixiApp.stage, props);
   let previousResizeTo;
   let resizeObserver;
   onMount(() => {
@@ -44,7 +44,7 @@ const PixiCanvas = (props) => {
         ["-webkit-user-select"]: "none",
         ["user-select"]: "none",
         ...typeof props.style === "object" ? props.style : {}
-      }, _v$2 = props.className;
+      }, _v$2 = props.class;
       _p$.e = style(_el$, _v$, _p$.e);
       _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
       return _p$;
@@ -55,6 +55,24 @@ const PixiCanvas = (props) => {
     return _el$;
   })();
 };
+const PixiCanvas = (props) => {
+  const [, applicationOptions] = splitProps(props, ["children", "style", "class"]);
+  return createComponent(PixiApplicationProvider, mergeProps(applicationOptions, {
+    get children() {
+      return createComponent(InnerPixiCanvas, {
+        get style() {
+          return props.style;
+        },
+        get ["class"]() {
+          return props.class;
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  }));
+};
 export {
   PixiCanvas
 };