pixi-solid 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/components/bind-props/bind-props.js +65 -17
  2. package/dist/components/bind-props/bind-props.js.map +1 -1
  3. package/dist/components/bind-props/event-names.js.map +1 -1
  4. package/dist/components/bind-props/is-event-property.js +6 -0
  5. package/dist/components/bind-props/is-event-property.js.map +1 -0
  6. package/dist/components/bind-props/point-property-names.js +9 -2
  7. package/dist/components/bind-props/point-property-names.js.map +1 -1
  8. package/dist/components/bind-props/set-point-property.js +13 -12
  9. package/dist/components/bind-props/set-point-property.js.map +1 -1
  10. package/dist/components/component-factories.js +3 -3
  11. package/dist/components/component-factories.js.map +1 -1
  12. package/dist/pixi-application/pixi-application-provider.js.map +1 -1
  13. package/dist/pixi-canvas.js +56 -30
  14. package/dist/pixi-canvas.js.map +1 -1
  15. package/dist/types/benchmarks/container-prop-updates/container-prop-updates.bench.d.ts +1 -0
  16. package/dist/types/benchmarks/point-property-lookup/point-property-lookup.bench.d.ts +1 -0
  17. package/dist/types/benchmarks/point-property-lookup/point-property-lookup.variant.d.ts +2 -0
  18. package/dist/types/benchmarks/set-event-property/set-event-property.bench.d.ts +1 -0
  19. package/dist/types/benchmarks/set-event-property/set-event-property.variant.d.ts +3 -0
  20. package/dist/types/benchmarks/set-prop-assignment/set-prop-assignment.bench.d.ts +1 -0
  21. package/dist/types/benchmarks/set-prop-assignment/set-prop-assignment.variant.d.ts +3 -0
  22. package/dist/types/components/bind-props/bind-props.d.ts +17 -6
  23. package/dist/types/components/bind-props/event-names.d.ts +1 -0
  24. package/dist/types/components/bind-props/index.d.ts +1 -1
  25. package/dist/types/components/bind-props/is-event-property.d.ts +2 -0
  26. package/dist/types/components/bind-props/point-property-names.d.ts +6 -0
  27. package/dist/types/components/bind-props/set-point-property.d.ts +5 -2
  28. package/dist/types/components/index.d.ts +1 -1
  29. package/dist/types/pixi-canvas.d.ts +7 -6
  30. package/package.json +5 -2
  31. package/dist/components/bind-props/set-event-property.js +0 -14
  32. package/dist/components/bind-props/set-event-property.js.map +0 -1
  33. package/dist/components/bind-props/set-prop.js +0 -20
  34. package/dist/components/bind-props/set-prop.js.map +0 -1
  35. package/dist/types/components/bind-props/set-event-property.d.ts +0 -3
  36. package/dist/types/components/bind-props/set-prop.d.ts +0 -2
@@ -1,16 +1,13 @@
1
- import { getOwner, runWithOwner, createRenderEffect, on } from "solid-js";
1
+ import { createRenderEffect, on } from "solid-js";
2
2
  import { bindChildrenToRenderLayer, bindChildrenToContainer } from "./bind-children.js";
3
- import { setProp } from "./set-prop.js";
4
- const bindProps = (instance, props, defer) => {
5
- const owner = getOwner();
3
+ import { isEventProperty } from "./is-event-property.js";
4
+ import { isPointProperty, setPointProperty, isPointAxisProperty, setPointAxisProperty } from "./set-point-property.js";
5
+ const bindRuntimeProps = (instance, props) => {
6
6
  for (const key in props) {
7
7
  if (key === "as") continue;
8
8
  if (key === "ref") {
9
- queueMicrotask(() => {
10
- runWithOwner(owner, () => {
11
- props[key](instance);
12
- });
13
- });
9
+ props[key](instance);
10
+ continue;
14
11
  } else if (key === "children") {
15
12
  if ("attach" in instance && "detach" in instance) {
16
13
  bindChildrenToRenderLayer(instance, props.children);
@@ -19,24 +16,75 @@ const bindProps = (instance, props, defer) => {
19
16
  }
20
17
  continue;
21
18
  }
22
- if (defer) {
19
+ if (isPointProperty(key)) {
20
+ createRenderEffect(() => setPointProperty(instance, key, props[key]));
21
+ continue;
22
+ }
23
+ if (isPointAxisProperty(key)) {
24
+ createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));
25
+ continue;
26
+ }
27
+ if (isEventProperty(key)) {
28
+ createRenderEffect((prevEventHandler) => {
29
+ const eventName = key.slice(2);
30
+ const eventHandler = props[key];
31
+ if (prevEventHandler) {
32
+ instance.removeEventListener(eventName, prevEventHandler);
33
+ }
34
+ if (eventHandler) {
35
+ instance.addEventListener(eventName, eventHandler);
36
+ }
37
+ return eventHandler;
38
+ });
39
+ continue;
40
+ }
41
+ if (key in instance) {
42
+ createRenderEffect(() => instance[key] = props[key]);
43
+ continue;
44
+ }
45
+ throw new InvalidPropNameError(`Invalid prop name: ${key}`);
46
+ }
47
+ };
48
+ const bindInitialisationProps = (instance, props) => {
49
+ for (const key in props) {
50
+ if (isPointProperty(key)) {
23
51
  createRenderEffect(
24
52
  on(
25
53
  () => props[key],
26
- (_input, _prevInput, prevValue) => {
27
- return setProp(instance, key, props[key], prevValue);
54
+ () => {
55
+ return setPointProperty(instance, key, props[key]);
28
56
  },
29
- { defer }
57
+ { defer: true }
30
58
  )
31
59
  );
32
60
  continue;
33
61
  }
34
- createRenderEffect(
35
- (prevValue) => setProp(instance, key, props[key], prevValue)
36
- );
62
+ if (key in instance) {
63
+ createRenderEffect(
64
+ on(
65
+ () => props[key],
66
+ () => {
67
+ instance[key] = props[key];
68
+ },
69
+ { defer: true }
70
+ )
71
+ );
72
+ continue;
73
+ }
74
+ throw new InvalidPropNameError(`Invalid prop name: ${key}`);
37
75
  }
38
76
  };
77
+ class InvalidPropNameError extends Error {
78
+ constructor(reason) {
79
+ super(
80
+ "Invalid pixi-solid prop name. Did you accidentally pass an invalid prop to a pixi-solid component?" + (reason ? ` Reason: ${reason}` : "")
81
+ );
82
+ this.name = "InvalidPropNameError";
83
+ }
84
+ }
39
85
  export {
40
- bindProps
86
+ InvalidPropNameError,
87
+ bindInitialisationProps,
88
+ bindRuntimeProps
41
89
  };
42
90
  //# sourceMappingURL=bind-props.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"bind-props.js","sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, on, getOwner, runWithOwner } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { setProp } from \"./set-prop\";\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): void => {\n const owner = getOwner();\n\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n /**\n * Use queueMicrotask for ref callback to ensure it runs after all current render effects are complete.\n * The parent will have added this instance as a child so that `ref.parent` is available in the ref callback.\n * We use runWithOwner to preserve the reactive context so hooks and providers are accessible.\n */\n queueMicrotask(() => {\n runWithOwner(owner, () => {\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n });\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":";;;AAiBO,MAAM,YAAY,CAIvB,UACA,OACA,UACS;AACT,QAAM,QAAQ,SAAA;AAEd,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAMjB,qBAAe,MAAM;AACnB,qBAAa,OAAO,MAAM;AACvB,gBAAM,GAAG,EAAoC,QAAQ;AAAA,QACxD,CAAC;AAAA,MACH,CAAC;AAAA,IACH,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;"}
1
+ {"version":3,"file":"bind-props.js","sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { isEventProperty } from \"./is-event-property\";\nimport {\n isPointProperty,\n setPointProperty,\n isPointAxisProperty,\n setPointAxisProperty,\n} from \"./set-point-property\";\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindRuntimeProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\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\n continue;\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\n continue;\n }\n\n if (isPointProperty(key)) {\n createRenderEffect(() => setPointProperty(instance, key, props[key]));\n\n continue;\n }\n\n if (isPointAxisProperty(key)) {\n createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));\n continue;\n }\n\n if (isEventProperty(key)) {\n createRenderEffect((prevEventHandler) => {\n // Remove the 'on' prefix to get the actual event name.\n const eventName = key.slice(2);\n const eventHandler = props[key];\n\n if (prevEventHandler) {\n instance.removeEventListener(eventName, prevEventHandler as any);\n }\n if (eventHandler) {\n instance.addEventListener(eventName, eventHandler as any);\n }\n\n return eventHandler;\n });\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(() => ((instance as any)[key] = props[key]));\n continue;\n }\n\n throw new InvalidPropNameError(`Invalid prop name: ${key}`);\n }\n};\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindInitialisationProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n): void => {\n for (const key in props) {\n if (isPointProperty(key)) {\n createRenderEffect(\n on(\n () => props[key as keyof typeof props],\n () => {\n return setPointProperty(instance, key, props[key]);\n },\n { defer: true },\n ),\n );\n\n continue;\n }\n\n if (key in instance) {\n createRenderEffect(\n on(\n () => props[key as keyof typeof props],\n () => {\n (instance as any)[key] = props[key];\n },\n { defer: true },\n ),\n );\n\n continue;\n }\n\n throw new InvalidPropNameError(`Invalid prop name: ${key}`);\n }\n};\n\nexport class InvalidPropNameError extends Error {\n constructor(reason?: string) {\n super(\n \"Invalid pixi-solid prop name. Did you accidentally pass an invalid prop to a pixi-solid component?\" +\n (reason ? ` Reason: ${reason}` : \"\"),\n );\n this.name = \"InvalidPropNameError\";\n }\n}\n"],"names":[],"mappings":";;;;AAsBO,MAAM,mBAAmB,CAI9B,UACA,UACS;AACT,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAChB,YAAM,GAAG,EAAoC,QAAQ;AAEtD;AAAA,IACF,WAAW,QAAQ,YAAY;AAC7B,UAAI,YAAY,YAAY,YAAY,UAAU;AAChD,kCAA0B,UAAyC,MAAM,QAAQ;AAAA,MACnF,OAAO;AACL,gCAAwB,UAAU,MAAM,QAAQ;AAAA,MAClD;AAEA;AAAA,IACF;AAEA,QAAI,gBAAgB,GAAG,GAAG;AACxB,yBAAmB,MAAM,iBAAiB,UAAU,KAAK,MAAM,GAAG,CAAC,CAAC;AAEpE;AAAA,IACF;AAEA,QAAI,oBAAoB,GAAG,GAAG;AAC5B,yBAAmB,MAAM,qBAAqB,UAAU,KAAK,MAAM,GAAG,CAAC,CAAC;AACxE;AAAA,IACF;AAEA,QAAI,gBAAgB,GAAG,GAAG;AACxB,yBAAmB,CAAC,qBAAqB;AAEvC,cAAM,YAAY,IAAI,MAAM,CAAC;AAC7B,cAAM,eAAe,MAAM,GAAG;AAE9B,YAAI,kBAAkB;AACpB,mBAAS,oBAAoB,WAAW,gBAAuB;AAAA,QACjE;AACA,YAAI,cAAc;AAChB,mBAAS,iBAAiB,WAAW,YAAmB;AAAA,QAC1D;AAEA,eAAO;AAAA,MACT,CAAC;AAED;AAAA,IACF;AAEA,QAAI,OAAO,UAAU;AACnB,yBAAmB,MAAQ,SAAiB,GAAG,IAAI,MAAM,GAAG,CAAE;AAC9D;AAAA,IACF;AAEA,UAAM,IAAI,qBAAqB,sBAAsB,GAAG,EAAE;AAAA,EAC5D;AACF;AAUO,MAAM,0BAA0B,CAIrC,UACA,UACS;AACT,aAAW,OAAO,OAAO;AACvB,QAAI,gBAAgB,GAAG,GAAG;AACxB;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,MAAM;AACJ,mBAAO,iBAAiB,UAAU,KAAK,MAAM,GAAG,CAAC;AAAA,UACnD;AAAA,UACA,EAAE,OAAO,KAAA;AAAA,QAAK;AAAA,MAChB;AAGF;AAAA,IACF;AAEA,QAAI,OAAO,UAAU;AACnB;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,MAAM;AACH,qBAAiB,GAAG,IAAI,MAAM,GAAG;AAAA,UACpC;AAAA,UACA,EAAE,OAAO,KAAA;AAAA,QAAK;AAAA,MAChB;AAGF;AAAA,IACF;AAEA,UAAM,IAAI,qBAAqB,sBAAsB,GAAG,EAAE;AAAA,EAC5D;AACF;AAEO,MAAM,6BAA6B,MAAM;AAAA,EAC9C,YAAY,QAAiB;AAC3B;AAAA,MACE,wGACG,SAAS,YAAY,MAAM,KAAK;AAAA,IAAA;AAErC,SAAK,OAAO;AAAA,EACd;AACF;"}
@@ -1 +1 @@
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;"}
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 PixiEventHandlerName = (typeof PIXI_SOLID_EVENT_HANDLER_NAMES)[number];\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;AAUO,MAAM,8BAA2C,IAAI,IAAI,8BAA8B;"}
@@ -0,0 +1,6 @@
1
+ import { PIXI_EVENT_HANDLER_NAME_SET } from "./event-names.js";
2
+ const isEventProperty = (name) => PIXI_EVENT_HANDLER_NAME_SET.has(name);
3
+ export {
4
+ isEventProperty
5
+ };
6
+ //# sourceMappingURL=is-event-property.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"is-event-property.js","sources":["../../../src/components/bind-props/is-event-property.ts"],"sourcesContent":["import type { PixiEventHandlerName } from \"./event-names\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./event-names\";\n\nexport const isEventProperty = (name: string): name is PixiEventHandlerName =>\n PIXI_EVENT_HANDLER_NAME_SET.has(name);\n"],"names":[],"mappings":";AAGO,MAAM,kBAAkB,CAAC,SAC9B,4BAA4B,IAAI,IAAI;"}
@@ -25,14 +25,21 @@ const POINT_PROP_AXIS_NAMES = [
25
25
  "tileScaleY"
26
26
  ];
27
27
  const POINT_PROP_AXIS_NAMES_SET = new Set(POINT_PROP_AXIS_NAMES);
28
- const ALL_VALID_PROP_NAMES_SET = /* @__PURE__ */ new Set([
28
+ /* @__PURE__ */ new Set([
29
29
  ...POINT_PROP_NAMES_SET,
30
30
  ...POINT_PROP_AXIS_NAMES_SET
31
31
  ]);
32
+ const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {
33
+ const axisName = name[name.length - 1].toLowerCase();
34
+ const propertyName = name.slice(0, -1);
35
+ map.set(name, { propertyName, axisName });
36
+ return map;
37
+ }, /* @__PURE__ */ new Map());
32
38
  export {
33
- ALL_VALID_PROP_NAMES_SET,
39
+ POINT_PROP_AXIS_MAP,
34
40
  POINT_PROP_AXIS_NAMES,
35
41
  POINT_PROP_AXIS_NAMES_SET,
42
+ POINT_PROP_NAMES,
36
43
  POINT_PROP_NAMES_SET
37
44
  };
38
45
  //# sourceMappingURL=point-property-names.js.map
@@ -1 +1 @@
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;"}
1
+ {"version":3,"file":"point-property-names.js","sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["export const POINT_PROP_NAMES = [\n \"position\",\n \"scale\",\n \"pivot\",\n \"skew\",\n \"anchor\",\n \"tilePosition\",\n \"tileScale\",\n] as const;\n\nexport type PointPropName = (typeof POINT_PROP_NAMES)[number];\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\nexport const POINT_PROP_AXIS_NAMES = [\n \"positionX\",\n \"positionY\",\n \"scaleX\",\n \"scaleY\",\n \"pivotX\",\n \"pivotY\",\n \"skewX\",\n \"skewY\",\n \"anchorX\",\n \"anchorY\",\n \"tilePositionX\",\n \"tilePositionY\",\n \"tileScaleX\",\n \"tileScaleY\",\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n ...POINT_PROP_NAMES_SET,\n ...POINT_PROP_AXIS_NAMES_SET,\n]);\n\nexport const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {\n const axisName = name[name.length - 1].toLowerCase() as \"x\" | \"y\";\n const propertyName = name.slice(0, -1);\n map.set(name, { propertyName, axisName });\n return map;\n}, new Map<string, { propertyName: string; axisName: \"x\" | \"y\" }>());\n"],"names":[],"mappings":"AAAO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,uBAAoC,IAAI,IAAI,gBAAgB;AAElE,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,MAAM,4BAAyC,IAAI,IAAI,qBAAqB;oBAE1B,IAAI;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AACL,CAAC;AAEM,MAAM,sBAAsB,sBAAsB,OAAO,CAAC,KAAK,SAAS;AAC7E,QAAM,WAAW,KAAK,KAAK,SAAS,CAAC,EAAE,YAAA;AACvC,QAAM,eAAe,KAAK,MAAM,GAAG,EAAE;AACrC,MAAI,IAAI,MAAM,EAAE,cAAc,UAAU;AACxC,SAAO;AACT,GAAG,oBAAI,KAA4D;"}
@@ -1,22 +1,23 @@
1
- import { ALL_VALID_PROP_NAMES_SET, POINT_PROP_NAMES_SET, POINT_PROP_AXIS_NAMES_SET } from "./point-property-names.js";
2
- const isPointProperty = (propName) => ALL_VALID_PROP_NAMES_SET.has(propName);
1
+ import { POINT_PROP_NAMES_SET, POINT_PROP_AXIS_NAMES_SET, POINT_PROP_AXIS_MAP } from "./point-property-names.js";
2
+ const isPointProperty = (propName) => POINT_PROP_NAMES_SET.has(propName);
3
3
  const setPointProperty = (node, name, value) => {
4
- if (typeof value === "object" && value !== null) {
5
- node[name].set(value.x, value.y);
4
+ if (typeof value === "number") {
5
+ node[name].set(value);
6
6
  return;
7
7
  }
8
- if (typeof value === "number") {
9
- if (POINT_PROP_NAMES_SET.has(name)) {
10
- node[name].set(value);
11
- } else if (POINT_PROP_AXIS_NAMES_SET.has(name)) {
12
- const axisName = name[name.length - 1].toLowerCase();
13
- const propertyName = name.slice(0, -1);
14
- node[propertyName][axisName] = value;
15
- }
8
+ node[name].set(value.x, value.y);
9
+ };
10
+ const isPointAxisProperty = (propName) => POINT_PROP_AXIS_NAMES_SET.has(propName);
11
+ const setPointAxisProperty = (node, name, value) => {
12
+ const axisInfo = POINT_PROP_AXIS_MAP.get(name);
13
+ if (axisInfo) {
14
+ node[axisInfo.propertyName][axisInfo.axisName] = value;
16
15
  }
17
16
  };
18
17
  export {
18
+ isPointAxisProperty,
19
19
  isPointProperty,
20
+ setPointAxisProperty,
20
21
  setPointProperty
21
22
  };
22
23
  //# sourceMappingURL=set-point-property.js.map
@@ -1 +1 @@
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\";\n\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":";AAQO,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;"}
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\";\n\nimport {\n POINT_PROP_NAMES_SET,\n POINT_PROP_AXIS_MAP,\n POINT_PROP_AXIS_NAMES_SET,\n} from \"./point-property-names\";\nimport type { PointAxisPropName, PointPropName } from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): propName is PointPropName =>\n POINT_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: PointPropName, value: T): void => {\n if (typeof value === \"number\") {\n (node as any)[name].set(value);\n return;\n }\n\n (node as any)[name].set((value as any).x, (value as any).y);\n};\n\nexport const isPointAxisProperty = (propName: string): propName is PointAxisPropName =>\n POINT_PROP_AXIS_NAMES_SET.has(propName);\n\nexport const setPointAxisProperty = <T>(\n node: Pixi.Container,\n name: PointAxisPropName,\n value: T,\n): void => {\n const axisInfo = POINT_PROP_AXIS_MAP.get(name);\n if (axisInfo) {\n (node as any)[axisInfo.propertyName][axisInfo.axisName] = value;\n }\n};\n"],"names":[],"mappings":";AASO,MAAM,kBAAkB,CAAC,aAC9B,qBAAqB,IAAI,QAAQ;AAE5B,MAAM,mBAAmB,CAAI,MAAsB,MAAqB,UAAmB;AAChG,MAAI,OAAO,UAAU,UAAU;AAC5B,SAAa,IAAI,EAAE,IAAI,KAAK;AAC7B;AAAA,EACF;AAEC,OAAa,IAAI,EAAE,IAAK,MAAc,GAAI,MAAc,CAAC;AAC5D;AAEO,MAAM,sBAAsB,CAAC,aAClC,0BAA0B,IAAI,QAAQ;AAEjC,MAAM,uBAAuB,CAClC,MACA,MACA,UACS;AACT,QAAM,WAAW,oBAAoB,IAAI,IAAI;AAC7C,MAAI,UAAU;AACX,SAAa,SAAS,YAAY,EAAE,SAAS,QAAQ,IAAI;AAAA,EAC5D;AACF;"}
@@ -1,7 +1,7 @@
1
1
  import { splitProps } from "solid-js";
2
2
  import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./bind-props/event-names.js";
3
3
  import { POINT_PROP_AXIS_NAMES } from "./bind-props/point-property-names.js";
4
- import { bindProps } from "./bind-props/bind-props.js";
4
+ import { bindInitialisationProps, bindRuntimeProps } from "./bind-props/bind-props.js";
5
5
  const SOLID_PROP_KEYS = ["ref", "as", "children"];
6
6
  const createContainerComponent = (PixiClass) => {
7
7
  return (props) => {
@@ -11,8 +11,8 @@ const createContainerComponent = (PixiClass) => {
11
11
  ...POINT_PROP_AXIS_NAMES
12
12
  ]);
13
13
  const instance = props.as || new PixiClass(initialisationProps);
14
- bindProps(instance, initialisationProps, true);
15
- bindProps(instance, runtimeProps);
14
+ bindInitialisationProps(instance, initialisationProps);
15
+ bindRuntimeProps(instance, runtimeProps);
16
16
  return instance;
17
17
  };
18
18
  };
@@ -1 +1 @@
1
- {"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\n\nimport { bindProps } from \"./bind-props\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type { PointAxisPropName } from \"./bind-props/point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./bind-props/point-property-names\";\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n PointAxisProps & {\n ref?: Ref<Component>;\n as?: Component;\n children?: JSX.Element;\n };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n ref?: Ref<Component>;\n as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\nexport const createContainerComponent = <\n InstanceType extends Pixi.Container,\n OptionsType extends object,\n>(\n PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n return (props): InstanceType & JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\n ...SOLID_PROP_KEYS,\n ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n ...POINT_PROP_AXIS_NAMES,\n ]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n 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":";;;;AA+CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAEhD,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,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;"}
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\";\n\nimport { bindInitialisationProps, bindRuntimeProps } from \"./bind-props\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type { PointAxisPropName } from \"./bind-props/point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./bind-props/point-property-names\";\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n PointAxisProps & {\n ref?: Ref<Component>;\n as?: Component;\n children?: JSX.Element;\n };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n ref?: Ref<Component>;\n as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\nexport const createContainerComponent = <\n InstanceType extends Pixi.Container,\n OptionsType extends object,\n>(\n PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n return (props): InstanceType & JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\n ...SOLID_PROP_KEYS,\n ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n ...POINT_PROP_AXIS_NAMES,\n ]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n bindInitialisationProps(instance, initialisationProps);\n bindRuntimeProps(instance, runtimeProps);\n\n return instance as InstanceType & JSX.Element;\n };\n};\n\nexport const createLeafComponent = <\n InstanceType extends Pixi.Container,\n OptionsType extends object,\n>(\n PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n return (\n props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n ): InstanceType & JSX.Element => {\n return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n for (const key in initialisationProps) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n } else if (key === \"children\") {\n throw new Error(`Cannot set children on non-container instance.`);\n } else {\n createRenderEffect(\n on(\n () => props[key as keyof typeof initialisationProps],\n () => {\n (instance as any)[key] = initialisationProps[key];\n },\n { defer: true },\n ),\n );\n }\n }\n\n for (const key in runtimeProps) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n }\n }\n\n return instance as InstanceType & JSX.Element;\n };\n};\n"],"names":[],"mappings":";;;;AA+CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAEhD,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,4BAAwB,UAAU,mBAAmB;AACrD,qBAAiB,UAAU,YAAY;AAEvC,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;"}
@@ -1 +1 @@
1
- {"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n children?: JSX.Element;\n existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps) => {\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":";;;;;AA+BO,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;"}
1
+ {"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n children?: JSX.Element;\n existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps): JSX.Element => {\n 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): JSX.Element => {\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":";;;;;AA+BO,MAAMA,0BAA0BA,CAACC,UAA6C;AACnF,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,UAA4C;AACzE,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;"}
@@ -1,9 +1,33 @@
1
- import { createComponent, mergeProps, template, insert, effect, style, className, use } from "solid-js/web";
2
- import { splitProps, onMount, onCleanup } from "solid-js";
1
+ import { createComponent, mergeProps, template, use, spread, insert } from "solid-js/web";
2
+ import { onMount, onCleanup } from "solid-js";
3
3
  import { PixiApplicationProvider } from "./pixi-application/pixi-application-provider.js";
4
4
  import { getPixiApp } from "./pixi-application/get-pixi-app.js";
5
- import { bindProps } from "./components/bind-props/bind-props.js";
6
- var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative>`);
5
+ import { bindRuntimeProps } from "./components/bind-props/bind-props.js";
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
7
+ const isDomPropKey = (key) => {
8
+ if (key === "class" || key === "classList" || key === "style") return true;
9
+ if (key === "id" || key === "title" || key === "role" || key === "tabIndex") return true;
10
+ if (key.startsWith("aria-") || key.startsWith("data-")) return true;
11
+ if (/^on[A-Z]/.test(key)) return true;
12
+ return false;
13
+ };
14
+ const splitPixiCanvasProps = (props) => {
15
+ const wrapperProps = {};
16
+ const applicationOptions = {};
17
+ for (const key in props) {
18
+ if (key === "children") continue;
19
+ const value = props[key];
20
+ if (key === "ref" || isDomPropKey(key)) {
21
+ wrapperProps[key] = value;
22
+ } else {
23
+ applicationOptions[key] = value;
24
+ }
25
+ }
26
+ return {
27
+ applicationOptions,
28
+ wrapperProps
29
+ };
30
+ };
7
31
  const InnerPixiCanvas = (props) => {
8
32
  let canvasWrapElement;
9
33
  let pixiApp;
@@ -12,7 +36,9 @@ const InnerPixiCanvas = (props) => {
12
36
  } catch {
13
37
  throw new Error("InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas");
14
38
  }
15
- bindProps(pixiApp.stage, props);
39
+ bindRuntimeProps(pixiApp.stage, {
40
+ children: props.children
41
+ });
16
42
  let previousResizeTo;
17
43
  let resizeObserver;
18
44
  onMount(() => {
@@ -33,39 +59,39 @@ const InnerPixiCanvas = (props) => {
33
59
  });
34
60
  return (() => {
35
61
  var _el$ = _tmpl$();
36
- var _ref$ = canvasWrapElement;
37
- typeof _ref$ === "function" ? use(_ref$, _el$) : canvasWrapElement = _el$;
62
+ use((el) => {
63
+ canvasWrapElement = el;
64
+ const userRef = props.wrapperProps?.ref;
65
+ if (typeof userRef === "function") {
66
+ userRef(el);
67
+ }
68
+ }, _el$);
69
+ spread(_el$, mergeProps(() => props.wrapperProps, {
70
+ get style() {
71
+ return {
72
+ position: "relative",
73
+ /* Disables the callout/menu on long-press */
74
+ ["-webkit-touch-callout"]: "none",
75
+ /* Disables text selection */
76
+ ["-webkit-user-select"]: "none",
77
+ ["user-select"]: "none",
78
+ ...typeof props.wrapperProps?.style === "object" ? props.wrapperProps.style : {}
79
+ };
80
+ }
81
+ }), false, true);
38
82
  insert(_el$, () => pixiApp.canvas);
39
- effect((_p$) => {
40
- var _v$ = {
41
- /* Disables the callout/menu on long-press */
42
- ["-webkit-touch-callout"]: "none",
43
- /* Disables text selection */
44
- ["-webkit-user-select"]: "none",
45
- ["user-select"]: "none",
46
- ...typeof props.style === "object" ? props.style : {}
47
- }, _v$2 = props.class;
48
- _p$.e = style(_el$, _v$, _p$.e);
49
- _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
50
- return _p$;
51
- }, {
52
- e: void 0,
53
- t: void 0
54
- });
55
83
  return _el$;
56
84
  })();
57
85
  };
58
86
  const PixiCanvas = (props) => {
59
- const [, applicationOptions] = splitProps(props, ["children", "style", "class"]);
87
+ const {
88
+ applicationOptions,
89
+ wrapperProps
90
+ } = splitPixiCanvasProps(props);
60
91
  return createComponent(PixiApplicationProvider, mergeProps(applicationOptions, {
61
92
  get children() {
62
93
  return createComponent(InnerPixiCanvas, {
63
- get style() {
64
- return props.style;
65
- },
66
- get ["class"]() {
67
- return props.class;
68
- },
94
+ wrapperProps,
69
95
  get children() {
70
96
  return props.children;
71
97
  }
@@ -1 +1 @@
1
- {"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount, splitProps } from \"solid-js\";\n\nimport { bindProps } from \"./components/bind-props\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\nexport type PixiCanvasProps = {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n class?: string;\n} & Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst InnerPixiCanvas = (\n props: Pick<PixiCanvasProps, \"children\" | \"style\" | \"class\">,\n): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\n \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n );\n }\n\n bindProps(pixiApp.stage, props);\n\n let previousResizeTo: HTMLElement | Window;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n ref={canvasWrapElement}\n style={{\n position: \"relative\",\n /* Disables the callout/menu on long-press */\n [\"-webkit-touch-callout\"]: \"none\",\n /* Disables text selection */\n [\"-webkit-user-select\"]: \"none\",\n [\"user-select\"]: \"none\",\n ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.class}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props.style - CSS styles to apply to the canvas wrapper.\n * @param props.class - CSS class to apply to the canvas wrapper.\n * @param props - Additional Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n const [, applicationOptions] = splitProps(props, [\"children\", \"style\", \"class\"]);\n return (\n <PixiApplicationProvider {...applicationOptions}>\n <InnerPixiCanvas style={props.style} class={props.class}>\n {props.children}\n </InnerPixiCanvas>\n </PixiApplicationProvider>\n );\n};\n"],"names":["InnerPixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","Error","bindProps","stage","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","undefined","_el$","_tmpl$","_ref$","_$use","_$insert","canvas","_$effect","_p$","_v$","style","_v$2","class","e","_$style","t","_$className","PixiCanvas","applicationOptions","splitProps","_$createComponent","PixiApplicationProvider","_$mergeProps","children"],"mappings":";;;;;;AAaA,MAAMA,kBAAkBA,CACtBC,UACgB;AAChB,MAAIC;AACJ,MAAIC;AAEJ,MAAI;AACFA,cAAUC,WAAAA;AAAAA,EACZ,QAAQ;AACN,UAAM,IAAIC,MACR,+EACF;AAAA,EACF;AAEAC,YAAUH,QAAQI,OAAON,KAAK;AAE9B,MAAIO;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACR,kBAAmB;AACxBM,uBAAmBL,QAAQQ;AAC3BR,YAAQQ,WAAWT;AACnBC,YAAQS,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCV,cAAQS,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQZ,iBAAiB;AAAA,EAC1C,CAAC;AAEDa,YAAU,MAAM;AACd,QAAI,CAACb,kBAAmB;AACxBC,YAAQQ,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBQ;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAESlB;AAAiB,WAAAkB,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBhB,oBAAiBgB;AAAAI,WAAAJ,MAAA,MAYrBf,QAAQoB,MAAM;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAXR;AAAA;AAAA,QAGL,CAAC,uBAAuB,GAAG;AAAA;AAAA,QAE3B,CAAC,qBAAqB,GAAG;AAAA,QACzB,CAAC,aAAa,GAAG;AAAA,QACjB,GAAI,OAAOzB,MAAM0B,UAAU,WAAW1B,MAAM0B,QAAQ,CAAA;AAAA,MAAC,GACtDC,OACM3B,MAAM4B;AAAKJ,UAAAK,IAAAC,MAAAb,MAAAQ,KAAAD,IAAAK,CAAA;AAAAF,eAAAH,IAAAO,KAAAC,UAAAf,MAAAO,IAAAO,IAAAJ,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAb;AAAAA,MAAAe,GAAAf;AAAAA,IAAAA,CAAA;AAAA,WAAAC;AAAAA,EAAA,GAAA;AAKxB;AAoBO,MAAMgB,aAAaA,CAACjC,UAAwC;AACjE,QAAM,CAAA,EAAGkC,kBAAkB,IAAIC,WAAWnC,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAC/E,SAAAoC,gBACGC,yBAAuBC,WAAKJ,oBAAkB;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAAH,gBAC5CrC,iBAAe;AAAA,QAAA,IAAC2B,QAAK;AAAA,iBAAE1B,MAAM0B;AAAAA,QAAK;AAAA,QAAA,KAAA,OAAA,IAAA;AAAA,iBAAS1B,MAAM4B;AAAAA,QAAK;AAAA,QAAA,IAAAW,WAAA;AAAA,iBACpDvC,MAAMuC;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIvB;"}
1
+ {"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount } from \"solid-js\";\n\nimport { bindRuntimeProps } from \"./components\";\nimport type { ContainerProps } from \"./components\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\n// Helper type to remove colon event handlers from JSX attributes\ntype OmitColonEvents<T> = {\n [K in keyof T as K extends `on:${string}` ? never : K]: T[K];\n};\n\nexport type PixiCanvasProps = {\n children: JSX.Element;\n ref?: (el: HTMLDivElement) => void;\n} & OmitColonEvents<Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"ref\">> &\n Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst isDomPropKey = (key: string): boolean => {\n if (key === \"class\" || key === \"classList\" || key === \"style\") return true;\n if (key === \"id\" || key === \"title\" || key === \"role\" || key === \"tabIndex\") return true;\n if (key.startsWith(\"aria-\") || key.startsWith(\"data-\")) return true;\n if (/^on[A-Z]/.test(key)) return true;\n\n return false;\n};\n\nconst splitPixiCanvasProps = (props: PixiCanvasProps) => {\n const wrapperProps: JSX.HTMLAttributes<HTMLDivElement> = {};\n const applicationOptions: Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">> = {};\n\n for (const key in props) {\n if (key === \"children\") continue;\n const value = props[key as keyof PixiCanvasProps];\n\n if (key === \"ref\" || isDomPropKey(key)) {\n (wrapperProps as Record<string, unknown>)[key] = value;\n } else {\n (applicationOptions as Record<string, unknown>)[key] = value;\n }\n }\n\n return { applicationOptions, wrapperProps };\n};\n\nconst InnerPixiCanvas = (props: {\n children: JSX.Element;\n wrapperProps?: JSX.HTMLAttributes<HTMLDivElement>;\n}): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\n \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n );\n }\n\n bindRuntimeProps(pixiApp.stage, {\n children: props.children,\n } as ContainerProps<Pixi.Container>);\n\n let previousResizeTo: HTMLElement | Window;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n {...props.wrapperProps}\n ref={(el) => {\n canvasWrapElement = el;\n const userRef = props.wrapperProps?.ref;\n if (typeof userRef === \"function\") {\n userRef(el);\n }\n }}\n style={{\n position: \"relative\",\n /* Disables the callout/menu on long-press */\n [\"-webkit-touch-callout\"]: \"none\",\n /* Disables text selection */\n [\"-webkit-user-select\"]: \"none\",\n [\"user-select\"]: \"none\",\n ...(typeof props.wrapperProps?.style === \"object\" ? props.wrapperProps.style : {}),\n }}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props - DOM props for the wrapper and Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n const { applicationOptions, wrapperProps } = splitPixiCanvasProps(props);\n return (\n <PixiApplicationProvider {...applicationOptions}>\n <InnerPixiCanvas wrapperProps={wrapperProps}>{props.children}</InnerPixiCanvas>\n </PixiApplicationProvider>\n );\n};\n"],"names":["isDomPropKey","key","startsWith","test","splitPixiCanvasProps","props","wrapperProps","applicationOptions","value","InnerPixiCanvas","canvasWrapElement","pixiApp","getPixiApp","Error","bindRuntimeProps","stage","children","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","undefined","_el$","_tmpl$","_$use","el","userRef","ref","_$spread","_$mergeProps","style","position","_$insert","canvas","PixiCanvas","_$createComponent","PixiApplicationProvider"],"mappings":";;;;;;AAmBA,MAAMA,eAAeA,CAACC,QAAyB;AAC7C,MAAIA,QAAQ,WAAWA,QAAQ,eAAeA,QAAQ,QAAS,QAAO;AACtE,MAAIA,QAAQ,QAAQA,QAAQ,WAAWA,QAAQ,UAAUA,QAAQ,WAAY,QAAO;AACpF,MAAIA,IAAIC,WAAW,OAAO,KAAKD,IAAIC,WAAW,OAAO,EAAG,QAAO;AAC/D,MAAI,WAAWC,KAAKF,GAAG,EAAG,QAAO;AAEjC,SAAO;AACT;AAEA,MAAMG,uBAAuBA,CAACC,UAA2B;AACvD,QAAMC,eAAmD,CAAA;AACzD,QAAMC,qBAAsF,CAAA;AAE5F,aAAWN,OAAOI,OAAO;AACvB,QAAIJ,QAAQ,WAAY;AACxB,UAAMO,QAAQH,MAAMJ,GAA4B;AAEhD,QAAIA,QAAQ,SAASD,aAAaC,GAAG,GAAG;AACrCK,mBAAyCL,GAAG,IAAIO;AAAAA,IACnD,OAAO;AACJD,yBAA+CN,GAAG,IAAIO;AAAAA,IACzD;AAAA,EACF;AAEA,SAAO;AAAA,IAAED;AAAAA,IAAoBD;AAAAA,EAAAA;AAC/B;AAEA,MAAMG,kBAAkBA,CAACJ,UAGN;AACjB,MAAIK;AACJ,MAAIC;AAEJ,MAAI;AACFA,cAAUC,WAAAA;AAAAA,EACZ,QAAQ;AACN,UAAM,IAAIC,MACR,+EACF;AAAA,EACF;AAEAC,mBAAiBH,QAAQI,OAAO;AAAA,IAC9BC,UAAUX,MAAMW;AAAAA,EAAAA,CACiB;AAEnC,MAAIC;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACT,kBAAmB;AACxBO,uBAAmBN,QAAQS;AAC3BT,YAAQS,WAAWV;AACnBC,YAAQU,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCX,cAAQU,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQb,iBAAiB;AAAA,EAC1C,CAAC;AAEDc,YAAU,MAAM;AACd,QAAI,CAACd,kBAAmB;AACxBC,YAAQS,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBQ;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAGUC,CAAAA,OAAO;AACXpB,0BAAoBoB;AACpB,YAAMC,UAAU1B,MAAMC,cAAc0B;AACpC,UAAI,OAAOD,YAAY,YAAY;AACjCA,gBAAQD,EAAE;AAAA,MACZ;AAAA,IACF,GAACH,IAAA;AAAAM,WAAAN,MAAAO,WAAA,MAPG7B,MAAMC,cAAY;AAAA,MAAA,IAQtB6B,QAAK;AAAA,eAAE;AAAA,UACLC,UAAU;AAAA;AAAA,UAEV,CAAC,uBAAuB,GAAG;AAAA;AAAA,UAE3B,CAAC,qBAAqB,GAAG;AAAA,UACzB,CAAC,aAAa,GAAG;AAAA,UACjB,GAAI,OAAO/B,MAAMC,cAAc6B,UAAU,WAAW9B,MAAMC,aAAa6B,QAAQ,CAAA;AAAA,QAAC;AAAA,MACjF;AAAA,IAAA,CAAA,GAAA,OAAA,IAAA;AAAAE,WAAAV,MAAA,MAEAhB,QAAQ2B,MAAM;AAAA,WAAAX;AAAAA,EAAA,GAAA;AAGrB;AAkBO,MAAMY,aAAaA,CAAClC,UAAwC;AACjE,QAAM;AAAA,IAAEE;AAAAA,IAAoBD;AAAAA,EAAAA,IAAiBF,qBAAqBC,KAAK;AACvE,SAAAmC,gBACGC,yBAAuBP,WAAK3B,oBAAkB;AAAA,IAAA,IAAAS,WAAA;AAAA,aAAAwB,gBAC5C/B,iBAAe;AAAA,QAACH;AAAAA,QAA0B,IAAAU,WAAA;AAAA,iBAAGX,MAAMW;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAGlE;"}
@@ -0,0 +1,2 @@
1
+ export declare const arrayLookup: (name: string) => boolean;
2
+ export declare const setLookup: (name: string) => boolean;
@@ -0,0 +1,3 @@
1
+ import type * as Pixi from "pixi.js";
2
+ export declare const setEventPropertyWithSlice: (node: Pixi.Container, name: string, eventHandler: any, prevEventHandler?: any) => void;
3
+ export declare const setEventPropertyWithMap: (node: Pixi.Container, name: string, eventHandler: any, prevEventHandler?: any) => void;
@@ -0,0 +1,3 @@
1
+ import type * as Pixi from "pixi.js";
2
+ export declare const assignWithKeyIn: <T>(instance: Pixi.Container, key: string, value: T) => void;
3
+ export declare const assignWithTryCatch: <T>(instance: Pixi.Container, key: string, value: T) => void;
@@ -1,12 +1,23 @@
1
1
  import type * as Pixi from "pixi.js";
2
2
  import type { ContainerProps } from "../component-factories";
3
3
  /**
4
- * Applies the props to a Pixi instance with subscriptions to maintain reactivity.
4
+ * Binds the props to a Pixi instance with subscriptions to maintain reactivity.
5
5
  *
6
- * @param instance The Pixi instance we want to apply props to.
6
+ * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.
7
+ *
8
+ * @param instance The Pixi instance we want to bind the props to.
9
+ * @param props The props object.
10
+ */
11
+ export declare const bindRuntimeProps: <InstanceType extends Pixi.Container, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType) => void;
12
+ /**
13
+ * Binds the props to a Pixi instance with subscriptions to maintain reactivity.
14
+ *
15
+ * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.
16
+ *
17
+ * @param instance The Pixi instance we want to bind the props to.
7
18
  * @param props The props object.
8
- * @param defer Defers the createRenderEffect so the props aren't set on the first run.
9
- * This is useful because setting initialisation props can have unintended side effects.
10
- * Notably in AnimatedSprite, if we set the textures property after instantiation it will stop the instance from playing.
11
19
  */
12
- export declare const bindProps: <InstanceType extends Pixi.Container, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType, defer?: boolean) => void;
20
+ export declare const bindInitialisationProps: <InstanceType extends Pixi.Container, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType) => void;
21
+ export declare class InvalidPropNameError extends Error {
22
+ constructor(reason?: string);
23
+ }
@@ -1,6 +1,7 @@
1
1
  import type { FederatedEventEmitterTypes } from "pixi.js";
2
2
  export declare const PIXI_EVENT_NAMES: (keyof FederatedEventEmitterTypes)[];
3
3
  export declare const PIXI_SOLID_EVENT_HANDLER_NAMES: ("onclick" | "onmousedown" | "onmouseenter" | "onmouseleave" | "onmousemove" | "onmouseout" | "onmouseover" | "onmouseup" | "onmouseupoutside" | "onpointercancel" | "onpointerdown" | "onpointerenter" | "onpointerleave" | "onpointermove" | "onpointerout" | "onpointerover" | "onpointertap" | "onpointerup" | "onpointerupoutside" | "onrightclick" | "onrightdown" | "onrightup" | "onrightupoutside" | "ontap" | "ontouchcancel" | "ontouchend" | "ontouchendoutside" | "ontouchmove" | "ontouchstart" | "onwheel" | "onglobalmousemove" | "onglobalpointermove" | "onglobaltouchmove" | "onclickcapture" | "onmousedowncapture" | "onmouseentercapture" | "onmouseleavecapture" | "onmousemovecapture" | "onmouseoutcapture" | "onmouseovercapture" | "onmouseupcapture" | "onmouseupoutsidecapture" | "onpointercancelcapture" | "onpointerdowncapture" | "onpointerentercapture" | "onpointerleavecapture" | "onpointermovecapture" | "onpointeroutcapture" | "onpointerovercapture" | "onpointertapcapture" | "onpointerupcapture" | "onpointerupoutsidecapture" | "onrightclickcapture" | "onrightdowncapture" | "onrightupcapture" | "onrightupoutsidecapture" | "ontapcapture" | "ontouchcancelcapture" | "ontouchendcapture" | "ontouchendoutsidecapture" | "ontouchmovecapture" | "ontouchstartcapture" | "onwheelcapture")[];
4
+ export type PixiEventHandlerName = (typeof PIXI_SOLID_EVENT_HANDLER_NAMES)[number];
4
5
  export type PixiEventHandlerMap = {
5
6
  [K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?: null | ((...args: FederatedEventEmitterTypes[K]) => void);
6
7
  };
@@ -1,4 +1,4 @@
1
- export { bindProps } from "./bind-props";
1
+ export { bindRuntimeProps, bindInitialisationProps } from "./bind-props";
2
2
  export type { PixiEventHandlerMap } from "./event-names";
3
3
  export type { PointAxisPropName } from "./point-property-names";
4
4
  export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./event-names";
@@ -0,0 +1,2 @@
1
+ import type { PixiEventHandlerName } from "./event-names";
2
+ export declare const isEventProperty: (name: string) => name is PixiEventHandlerName;
@@ -1,5 +1,11 @@
1
+ export declare const POINT_PROP_NAMES: readonly ["position", "scale", "pivot", "skew", "anchor", "tilePosition", "tileScale"];
2
+ export type PointPropName = (typeof POINT_PROP_NAMES)[number];
1
3
  export declare const POINT_PROP_NAMES_SET: Set<string>;
2
4
  export declare const POINT_PROP_AXIS_NAMES: readonly ["positionX", "positionY", "scaleX", "scaleY", "pivotX", "pivotY", "skewX", "skewY", "anchorX", "anchorY", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY"];
3
5
  export type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];
4
6
  export declare const POINT_PROP_AXIS_NAMES_SET: Set<string>;
5
7
  export declare const ALL_VALID_PROP_NAMES_SET: Set<string>;
8
+ export declare const POINT_PROP_AXIS_MAP: Map<string, {
9
+ propertyName: string;
10
+ axisName: "x" | "y";
11
+ }>;
@@ -1,3 +1,6 @@
1
1
  import type * as Pixi from "pixi.js";
2
- export declare const isPointProperty: (propName: string) => boolean;
3
- export declare const setPointProperty: <T>(node: Pixi.Container, name: string, value: T) => void;
2
+ import type { PointAxisPropName, PointPropName } from "./point-property-names";
3
+ export declare const isPointProperty: (propName: string) => propName is PointPropName;
4
+ export declare const setPointProperty: <T>(node: Pixi.Container, name: PointPropName, value: T) => void;
5
+ export declare const isPointAxisProperty: (propName: string) => propName is PointAxisPropName;
6
+ export declare const setPointAxisProperty: <T>(node: Pixi.Container, name: PointAxisPropName, value: T) => void;
@@ -1,4 +1,4 @@
1
1
  export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, Sprite, Text, RenderContainer, RenderLayer, TilingSprite, } from "./components";
2
- export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./bind-props";
2
+ export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES, bindRuntimeProps, bindInitialisationProps, } from "./bind-props";
3
3
  export type { PixiEventHandlerMap, PointAxisPropName } from "./bind-props";
4
4
  export type { ContainerProps, LeafProps, PixiComponentProps } from "./component-factories";
@@ -1,10 +1,12 @@
1
1
  import type * as Pixi from "pixi.js";
2
2
  import type { JSX } from "solid-js";
3
+ type OmitColonEvents<T> = {
4
+ [K in keyof T as K extends `on:${string}` ? never : K]: T[K];
5
+ };
3
6
  export type PixiCanvasProps = {
4
7
  children: JSX.Element;
5
- style?: JSX.CSSProperties | undefined;
6
- class?: string;
7
- } & Partial<Omit<Pixi.ApplicationOptions, "children" | "resizeTo">>;
8
+ ref?: (el: HTMLDivElement) => void;
9
+ } & OmitColonEvents<Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "ref">> & Partial<Omit<Pixi.ApplicationOptions, "children" | "resizeTo">>;
8
10
  /**
9
11
  * PixiCanvas
10
12
  *
@@ -18,8 +20,7 @@ export type PixiCanvasProps = {
18
20
  *
19
21
  * Props:
20
22
  * @param props.children - JSX content to render inside the canvas wrapper.
21
- * @param props.style - CSS styles to apply to the canvas wrapper.
22
- * @param props.class - CSS class to apply to the canvas wrapper.
23
- * @param props - Additional Pixi ApplicationOptions (except 'children' and 'resizeTo').
23
+ * @param props - DOM props for the wrapper and Pixi ApplicationOptions (except 'children' and 'resizeTo').
24
24
  */
25
25
  export declare const PixiCanvas: (props: PixiCanvasProps) => JSX.Element;
26
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixi-solid",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "private": false,
5
5
  "description": "A library to write PixiJS applications with SolidJS",
6
6
  "homepage": "https://lukecarlthompson.github.io/pixi-solid/",
@@ -37,6 +37,9 @@
37
37
  "build": "vite build && tsc --project tsconfig.build.json --emitDeclarationOnly",
38
38
  "preview": "vite preview",
39
39
  "preinstall": "npx only-allow pnpm",
40
- "test": "vitest"
40
+ "test": "vitest",
41
+ "test:bench": "vitest bench",
42
+ "test:bench:save": "vitest bench --outputJson=src/benchmarks/results/baseline.json",
43
+ "test:bench:compare": "vitest bench --compare=src/benchmarks/results/baseline.json"
41
44
  }
42
45
  }
@@ -1,14 +0,0 @@
1
- import { PIXI_EVENT_HANDLER_NAME_SET } from "./event-names.js";
2
- const isEventProperty = (name) => PIXI_EVENT_HANDLER_NAME_SET.has(name);
3
- const setEventProperty = (node, name, eventHandler, prevEventHandler) => {
4
- const eventName = name.slice(2);
5
- if (prevEventHandler) {
6
- node.removeEventListener(eventName, prevEventHandler);
7
- }
8
- node.addEventListener(eventName, eventHandler);
9
- };
10
- export {
11
- isEventProperty,
12
- setEventProperty
13
- };
14
- //# sourceMappingURL=set-event-property.js.map
@@ -1 +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\";\n\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":";AAKO,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;"}
@@ -1,20 +0,0 @@
1
- import { isEventProperty, setEventProperty } from "./set-event-property.js";
2
- import { isPointProperty, setPointProperty } from "./set-point-property.js";
3
- const setProp = (instance, key, value, prevValue) => {
4
- if (isPointProperty(key)) {
5
- setPointProperty(instance, key, value);
6
- return value;
7
- }
8
- if (key in instance) {
9
- instance[key] = value;
10
- return value;
11
- }
12
- if (isEventProperty(key)) {
13
- setEventProperty(instance, key, value, prevValue);
14
- return value;
15
- }
16
- };
17
- export {
18
- setProp
19
- };
20
- //# sourceMappingURL=set-prop.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"set-prop.js","sources":["../../../src/components/bind-props/set-prop.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport { isEventProperty, setEventProperty } from \"./set-event-property\";\nimport { isPointProperty, setPointProperty } from \"./set-point-property\";\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":";;AAKO,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;"}
@@ -1,3 +0,0 @@
1
- import type * as Pixi from "pixi.js";
2
- export declare const isEventProperty: (name: string) => boolean;
3
- export declare const setEventProperty: (node: Pixi.Container, name: string, eventHandler: any, prevEventHandler?: any) => void;
@@ -1,2 +0,0 @@
1
- import type * as Pixi from "pixi.js";
2
- export declare const setProp: <T = unknown>(instance: Pixi.Container, key: string, value: T, prevValue?: T) => T | undefined;