pixi-solid 0.1.2 → 0.1.4
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.
- package/dist/components/bind-props/bind-children.js +47 -19
- package/dist/components/bind-props/bind-children.js.map +1 -1
- package/dist/components/bind-props/bind-props.js +3 -1
- package/dist/components/bind-props/bind-props.js.map +1 -1
- package/dist/types/components/bind-props/bind-children.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
import { children, createRenderEffect } from "solid-js";
|
|
2
|
+
class InvalidChildTypeError extends Error {
|
|
3
|
+
constructor(cause) {
|
|
4
|
+
super(
|
|
5
|
+
"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?",
|
|
6
|
+
{ cause }
|
|
7
|
+
);
|
|
8
|
+
this.name = "InvalidChildTypeError";
|
|
9
|
+
}
|
|
10
|
+
}
|
|
2
11
|
const bindChildrenToContainer = (parent, children$1) => {
|
|
3
12
|
const resolvedChildren = children(() => children$1);
|
|
4
13
|
const canAddChild = "addChildAt" in parent;
|
|
@@ -6,17 +15,26 @@ const bindChildrenToContainer = (parent, children$1) => {
|
|
|
6
15
|
throw new Error("Parent does not support children.");
|
|
7
16
|
}
|
|
8
17
|
createRenderEffect((prevChildren) => {
|
|
9
|
-
const nextChildren = resolvedChildren.toArray();
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
18
|
+
const nextChildren = resolvedChildren.toArray().filter(Boolean);
|
|
19
|
+
try {
|
|
20
|
+
if (prevChildren) {
|
|
21
|
+
for (let i = 0; i < prevChildren.length; i += 1) {
|
|
22
|
+
const child = prevChildren[i];
|
|
23
|
+
if (nextChildren.includes(child)) continue;
|
|
24
|
+
parent.removeChild(child);
|
|
25
|
+
child.destroy({ children: true });
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
for (let i = 0; i < nextChildren.length; i += 1) {
|
|
29
|
+
parent.addChildAt(nextChildren[i], i);
|
|
30
|
+
}
|
|
31
|
+
} catch (error) {
|
|
32
|
+
if (error instanceof Error) {
|
|
33
|
+
console.error("Invalid children", nextChildren);
|
|
34
|
+
throw new InvalidChildTypeError(error);
|
|
35
|
+
} else {
|
|
36
|
+
throw error;
|
|
16
37
|
}
|
|
17
|
-
}
|
|
18
|
-
for (let i = 0; i < nextChildren.length; i += 1) {
|
|
19
|
-
parent.addChildAt(nextChildren[i], i);
|
|
20
38
|
}
|
|
21
39
|
return nextChildren;
|
|
22
40
|
});
|
|
@@ -24,21 +42,31 @@ const bindChildrenToContainer = (parent, children$1) => {
|
|
|
24
42
|
const bindChildrenToRenderLayer = (parent, children$1) => {
|
|
25
43
|
const resolvedChildren = children(() => children$1);
|
|
26
44
|
createRenderEffect((prevChildren) => {
|
|
27
|
-
const nextChildren = resolvedChildren.toArray();
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
45
|
+
const nextChildren = resolvedChildren.toArray().filter(Boolean);
|
|
46
|
+
try {
|
|
47
|
+
if (prevChildren) {
|
|
48
|
+
for (let i = 0; i < prevChildren.length; i += 1) {
|
|
49
|
+
const child = prevChildren[i];
|
|
50
|
+
if (nextChildren.includes(child)) continue;
|
|
51
|
+
parent.detach(child);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
for (let i = 0; i < nextChildren.length; i += 1) {
|
|
55
|
+
parent.attach(nextChildren[i]);
|
|
56
|
+
}
|
|
57
|
+
} catch (error) {
|
|
58
|
+
if (error instanceof Error) {
|
|
59
|
+
console.error("Invalid children", nextChildren);
|
|
60
|
+
throw new InvalidChildTypeError(error);
|
|
61
|
+
} else {
|
|
62
|
+
throw error;
|
|
33
63
|
}
|
|
34
|
-
}
|
|
35
|
-
for (let i = 0; i < nextChildren.length; i += 1) {
|
|
36
|
-
parent.attach(nextChildren[i]);
|
|
37
64
|
}
|
|
38
65
|
return nextChildren;
|
|
39
66
|
});
|
|
40
67
|
};
|
|
41
68
|
export {
|
|
69
|
+
InvalidChildTypeError,
|
|
42
70
|
bindChildrenToContainer,
|
|
43
71
|
bindChildrenToRenderLayer
|
|
44
72
|
};
|
|
@@ -1 +1 @@
|
|
|
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) {\n
|
|
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 class InvalidChildTypeError extends Error {\n constructor(cause: Error) {\n super(\n \"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?\",\n { cause },\n );\n this.name = \"InvalidChildTypeError\";\n }\n}\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().filter(Boolean) as unknown as Pixi.Container[];\n\n try {\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.addChildAt(nextChildren[i], i);\n }\n } catch (error) {\n if (error instanceof Error) {\n console.error(\"Invalid children\", nextChildren);\n throw new InvalidChildTypeError(error);\n } else {\n throw error;\n }\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().filter(Boolean) as unknown as Pixi.Container[];\n\n try {\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 } catch (error) {\n if (error instanceof Error) {\n console.error(\"Invalid children\", nextChildren);\n throw new InvalidChildTypeError(error);\n } else {\n throw error;\n }\n }\n\n return nextChildren;\n });\n};\n"],"names":["children","resolveChildren"],"mappings":";AAIO,MAAM,8BAA8B,MAAM;AAAA,EAC/C,YAAY,OAAc;AACxB;AAAA,MACE;AAAA,MACA,EAAE,MAAA;AAAA,IAAM;AAEV,SAAK,OAAO;AAAA,EACd;AACF;AAEO,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,EAAU,OAAO,OAAO;AAE9D,QAAI;AACF,UAAI,cAAc;AAChB,iBAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,gBAAM,QAAQ,aAAa,CAAC;AAC5B,cAAI,aAAa,SAAS,KAAK,EAAG;AAClC,iBAAO,YAAY,KAAK;AACxB,gBAAM,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,QAClC;AAAA,MACF;AAEA,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,eAAO,WAAW,aAAa,CAAC,GAAG,CAAC;AAAA,MACtC;AAAA,IACF,SAAS,OAAO;AACd,UAAI,iBAAiB,OAAO;AAC1B,gBAAQ,MAAM,oBAAoB,YAAY;AAC9C,cAAM,IAAI,sBAAsB,KAAK;AAAA,MACvC,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF;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,EAAU,OAAO,OAAO;AAE9D,QAAI;AACF,UAAI,cAAc;AAChB,iBAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,gBAAM,QAAQ,aAAa,CAAC;AAC5B,cAAI,aAAa,SAAS,KAAK,EAAG;AAElC,iBAAO,OAAO,KAAK;AAAA,QACrB;AAAA,MACF;AAEA,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,eAAO,OAAO,aAAa,CAAC,CAAC;AAAA,MAC/B;AAAA,IACF,SAAS,OAAO;AACd,UAAI,iBAAiB,OAAO;AAC1B,gBAAQ,MAAM,oBAAoB,YAAY;AAC9C,cAAM,IAAI,sBAAsB,KAAK;AAAA,MACvC,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AACH;"}
|
|
@@ -5,7 +5,9 @@ const bindProps = (instance, props, defer) => {
|
|
|
5
5
|
for (const key in props) {
|
|
6
6
|
if (key === "as") continue;
|
|
7
7
|
if (key === "ref") {
|
|
8
|
-
|
|
8
|
+
queueMicrotask(() => {
|
|
9
|
+
props[key](instance);
|
|
10
|
+
});
|
|
9
11
|
} else if (key === "children") {
|
|
10
12
|
if ("attach" in instance && "detach" in instance) {
|
|
11
13
|
bindChildrenToRenderLayer(instance, props.children);
|
|
@@ -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 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;
|
|
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 /**\n * Use queueMicrotask for ref callback to ensure it runs after all current render effects are complete. The parent will have added this instance as a child so that `ref.parent` is available in the ref callback.\n */\n queueMicrotask(() => {\n (props[key] as unknown as (arg: any) => void)(instance);\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":";;;AAeO,MAAM,YAAY,CAIvB,UACA,OACA,UACG;AACH,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAIjB,qBAAe,MAAM;AAClB,cAAM,GAAG,EAAoC,QAAQ;AAAA,MACxD,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,4 +1,7 @@
|
|
|
1
1
|
import type * as Pixi from "pixi.js";
|
|
2
2
|
import type { JSX } from "solid-js";
|
|
3
|
+
export declare class InvalidChildTypeError extends Error {
|
|
4
|
+
constructor(cause: Error);
|
|
5
|
+
}
|
|
3
6
|
export declare const bindChildrenToContainer: (parent: Pixi.Container, children?: JSX.Element) => void;
|
|
4
7
|
export declare const bindChildrenToRenderLayer: (parent: Pixi.RenderLayer, children?: JSX.Element) => void;
|