pixi-solid 0.0.4 → 0.0.5
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/pixi-application.js
CHANGED
|
@@ -36,14 +36,13 @@ const usePixiApp = () => {
|
|
|
36
36
|
* This component should only be used once in your application.
|
|
37
37
|
*
|
|
38
38
|
* @param props The properties to configure the Pixi.js Application.
|
|
39
|
-
*
|
|
39
|
+
*
|
|
40
40
|
* **Example**
|
|
41
41
|
* {@includeCode ./examples/PixiApplication.example.tsx}
|
|
42
42
|
*/
|
|
43
43
|
const PixiApplication = (props) => {
|
|
44
44
|
const [_solidProps, initialisationProps] = splitProps(props, ["ref", "children"]);
|
|
45
45
|
const [appResource] = createResource(async () => {
|
|
46
|
-
if (globalThis.__PIXI_DEVTOOLS__) throw new Error("Only one PixiApplication can be active at a time. Multiple instances detected.");
|
|
47
46
|
const app = new Application();
|
|
48
47
|
await app.init({
|
|
49
48
|
autoDensity: true,
|
|
@@ -56,13 +55,12 @@ const PixiApplication = (props) => {
|
|
|
56
55
|
createEffect(() => {
|
|
57
56
|
const app = appResource();
|
|
58
57
|
if (app) {
|
|
59
|
-
if (props.ref) props.ref(app
|
|
58
|
+
if (props.ref) props.ref(app);
|
|
60
59
|
app.ticker.autoStart = false;
|
|
61
60
|
app.ticker.start();
|
|
62
61
|
globalThis.__PIXI_DEVTOOLS__ = { app };
|
|
63
62
|
onCleanup(() => {
|
|
64
63
|
app.destroy(true, { children: true });
|
|
65
|
-
globalThis.__PIXI_DEVTOOLS__ = void 0;
|
|
66
64
|
});
|
|
67
65
|
}
|
|
68
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-application.js","names":["ApplicationOptions","
|
|
1
|
+
{"version":3,"file":"pixi-application.js","names":["ApplicationOptions","Application","JSX","Ref","createContext","createEffect","createResource","onCleanup","Show","splitProps","useContext","PixiAppContext","usePixiApp","app","Error","PixiApplicationProps","Partial","Omit","ref","children","Element","PixiApplication","props","_solidProps","initialisationProps","appResource","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","arg","ticker","autoStart","start","globalThis","__PIXI_DEVTOOLS__","destroy","_$createComponent","when","Provider","value"],"sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport {\n createContext,\n createEffect,\n createResource,\n onCleanup,\n Show,\n splitProps,\n useContext,\n} from \"solid-js\";\n\nconst PixiAppContext = createContext<Application>();\n\n/**\n * A custom SolidJS hook to access the root PIXI.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Application instance provided by the `PixiApplication` component.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const app = usePixiApp();\n *\n * createEffect(() => {\n * console.log('App resolution:', app.renderer.resolution);\n * });\n *\n * return <Sprite texture={Texture.WHITE} />;\n * };\n * ```\n */\nexport const usePixiApp = () => {\n const app = useContext(PixiAppContext);\n if (!app) {\n throw new Error(\"usePixiApp must be used within a PixiApplication\");\n }\n return app;\n};\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * to allow passing configuration directly to the Pixi.js Application constructor,\n * but omits properties that are handled by the component itself.\n */\nexport type PixiApplicationProps = Partial<\n Omit<ApplicationOptions, \"children\" | \"resizeTo\" | \"view\">\n> & {\n ref?: Ref<Application>;\n children?: JSX.Element;\n};\n\n/**\n * A SolidJS component that creates and manages a PIXI.Application instance.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `usePixiApp`, `useTick`, and `useTicker`.\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 * **Example**\n * {@includeCode ./examples/PixiApplication.example.tsx}\n */\nexport const PixiApplication = (props: PixiApplicationProps) => {\n const [_solidProps, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n\n // TODO: Reinitialise the pixi app if any of the initialisationProps change that we can't set at runtime\n\n const [appResource] = createResource(async () => {\n const app = new Application();\n await app.init({\n autoDensity: true,\n resolution: Math.min(window.devicePixelRatio, 2),\n sharedTicker: true,\n ...initialisationProps,\n });\n\n return app;\n });\n\n createEffect(() => {\n const app = appResource();\n if (app) {\n if (props.ref) {\n // Solid converts the ref prop to a callback function\n (props.ref as unknown as (arg: any) => void)(app);\n }\n\n // TODO: Go through the other props that can be set at runtime and apply them here\n // e.g. backgroundColor => app.renderer.backgroundColor, etc.\n\n app.ticker.autoStart = false;\n app.ticker.start();\n\n // @ts-expect-error\n globalThis.__PIXI_DEVTOOLS__ = {\n app,\n };\n\n onCleanup(() => {\n app.destroy(true, { children: true });\n });\n }\n });\n\n return (\n <Show when={appResource()}>\n {(app) => <PixiAppContext.Provider value={app()}>{props.children}</PixiAppContext.Provider>}\n </Show>\n );\n};\n"],"mappings":";;;;;AAaA,IAAMW,iBAAiBP,eAA4B;;;;;;;;;;;;;;;;;;;;AAqBnD,MAAaQ,mBAAmB;CAC9B,MAAMC,MAAMH,WAAWC,eAAe;AACtC,KAAI,CAACE,IACH,OAAM,IAAIC,MAAM,mDAAmD;AAErE,QAAOD;;;;;;;;;;;;;;AA2BT,MAAaQ,mBAAmBC,UAAgC;CAC9D,MAAM,CAACC,aAAaC,uBAAuBf,WAAWa,OAAO,CAAC,OAAO,WAAW,CAAC;CAIjF,MAAM,CAACG,eAAenB,eAAe,YAAY;EAC/C,MAAMO,MAAM,IAAIZ,aAAa;AAC7B,QAAMY,IAAIa,KAAK;GACbC,aAAa;GACbC,YAAYC,KAAKC,IAAIC,OAAOC,kBAAkB,EAAE;GAChDC,cAAc;GACd,GAAGT;GACJ,CAAC;AAEF,SAAOX;GACP;AAEFR,oBAAmB;EACjB,MAAMQ,MAAMY,aAAa;AACzB,MAAIZ,KAAK;AACP,OAAIS,MAAMJ,IAEPI,OAAMJ,IAAsCL,IAAI;AAMnDA,OAAIsB,OAAOC,YAAY;AACvBvB,OAAIsB,OAAOE,OAAO;AAGlBC,cAAWC,oBAAoB,EAC7B1B,KACD;AAEDN,mBAAgB;AACdM,QAAI2B,QAAQ,MAAM,EAAErB,UAAU,MAAM,CAAC;KACrC;;GAEJ;AAEF,QAAAsB,gBACGjC,MAAI;EAAA,IAACkC,OAAI;AAAA,UAAEjB,aAAa;;EAAAN,WACrBN,QAAG4B,gBAAM9B,eAAegC,UAAQ;GAAA,IAACC,QAAK;AAAA,WAAE/B,KAAK;;GAAA,IAAAM,WAAA;AAAA,WAAGG,MAAMH;;GAAQ,CAAA;EAA2B,CAAA"}
|
package/dist/pixi-canvas.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { usePixiApp } from "./pixi-application.js";
|
|
2
|
-
import {
|
|
2
|
+
import { className, effect, insert, style, template, use } from "solid-js/web";
|
|
3
3
|
import { createRenderEffect, onCleanup, onMount } from "solid-js";
|
|
4
4
|
|
|
5
5
|
//#region src/pixi-canvas.tsx
|
|
@@ -25,11 +25,6 @@ const PixiCanvas = (props) => {
|
|
|
25
25
|
let canvasWrapElement;
|
|
26
26
|
const pixiApp = usePixiApp();
|
|
27
27
|
pixiApp.canvas.style.display = "block";
|
|
28
|
-
pixiApp.canvas.style.position = "absolute";
|
|
29
|
-
pixiApp.canvas.style.top = "0";
|
|
30
|
-
pixiApp.canvas.style.left = "0";
|
|
31
|
-
pixiApp.canvas.style.width = "100%";
|
|
32
|
-
pixiApp.canvas.style.height = "100%";
|
|
33
28
|
createRenderEffect(() => {
|
|
34
29
|
if (props.children === void 0) throw new Error("PixiCanvas requires the `PixiStage` component to render.");
|
|
35
30
|
});
|
|
@@ -57,14 +52,9 @@ const PixiCanvas = (props) => {
|
|
|
57
52
|
typeof _ref$ === "function" ? use(_ref$, _el$) : canvasWrapElement = _el$;
|
|
58
53
|
insert(_el$, () => pixiApp.canvas);
|
|
59
54
|
effect((_p$) => {
|
|
60
|
-
var _v$ = {
|
|
61
|
-
position: "relative",
|
|
62
|
-
flex: 1,
|
|
63
|
-
display: "block",
|
|
64
|
-
...typeof props.style === "object" ? props.style : {}
|
|
65
|
-
}, _v$2 = { [props.className || ""]: props.className !== void 0 };
|
|
55
|
+
var _v$ = { ...typeof props.style === "object" ? props.style : {} }, _v$2 = props.className;
|
|
66
56
|
_p$.e = style(_el$, _v$, _p$.e);
|
|
67
|
-
_p$.t
|
|
57
|
+
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
|
|
68
58
|
return _p$;
|
|
69
59
|
}, {
|
|
70
60
|
e: void 0,
|
package/dist/pixi-canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-canvas.js","names":["JSX","createRenderEffect","onCleanup","onMount","usePixiApp","PixiCanvas","props","children","Element","style","CSSProperties","className","canvasWrapElement","HTMLDivElement","pixiApp","canvas","display","
|
|
1
|
+
{"version":3,"file":"pixi-canvas.js","names":["JSX","createRenderEffect","onCleanup","onMount","usePixiApp","PixiCanvas","props","children","Element","style","CSSProperties","className","canvasWrapElement","HTMLDivElement","pixiApp","canvas","display","undefined","Error","previousResizeTo","resizeTo","resizeObserver","ResizeObserver","queueResize","observe","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","e","_$style","t","_$className"],"sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { createRenderEffect, onCleanup, onMount } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\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 * - Requires a surrounding `PixiApplication` (accessed via `usePixiApp`).\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use\n * `PixiStage` as the only child.\n *\n * **Example**\n * {@includeCode ./examples/PixiCanvas.example.tsx}\n *\n */\n\nexport const PixiCanvas = (props: {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n className?: string;\n}): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n\n const pixiApp = usePixiApp();\n pixiApp.canvas.style.display = \"block\";\n\n createRenderEffect(() => {\n if (props.children === undefined) {\n throw new Error(\"PixiCanvas requires the `PixiStage` component to render.\");\n }\n });\n\n let previousResizeTo: typeof pixiApp.resizeTo;\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 ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.className}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAaK,cAAcC,UAIR;CACjB,IAAIM;CAEJ,MAAME,UAAUV,YAAY;AAC5BU,SAAQC,OAAON,MAAMO,UAAU;AAE/Bf,0BAAyB;AACvB,MAAIK,MAAMC,aAAaU,OACrB,OAAM,IAAIC,MAAM,2DAA2D;GAE7E;CAEF,IAAIC;CACJ,IAAIE;AAEJlB,eAAc;AACZ,MAAI,CAACS,kBAAmB;AACxBO,qBAAmBL,QAAQM;AAC3BN,UAAQM,WAAWR;AACnBE,UAAQS,aAAa;AACrBF,mBAAiB,IAAIC,qBAAqB;AACxCR,WAAQS,aAAa;IACrB;AACFF,iBAAeG,QAAQZ,kBAAkB;GACzC;AAEFV,iBAAgB;AACd,MAAI,CAACU,kBAAmB;AACxBE,UAAQM,WAAWD;AACnBE,kBAAgBI,YAAY;AAC5BJ,mBAAiBJ;GACjB;AAEF,eAAA;EAAA,IAAAS,OAAAC,QAAA;EAAA,IAAAC,QAEShB;AAAiB,SAAAgB,UAAA,aAAAC,IAAAD,OAAAF,KAAA,GAAjBd,oBAAiBc;AAAAI,SAAAJ,YAMrBZ,QAAQC,OAAM;AAAAgB,UAAAC,QAAA;GAAA,IAAAC,MALR,EACL,GAAI,OAAO3B,MAAMG,UAAU,WAAWH,MAAMG,QAAQ,EAAE,EACvD,EAAAyB,OACM5B,MAAMK;AAASqB,OAAAG,IAAAC,MAAAV,MAAAO,KAAAD,IAAAG,EAAA;AAAAD,YAAAF,IAAAK,KAAAC,UAAAZ,MAAAM,IAAAK,IAAAH,KAAA;AAAA,UAAAF;KAAA;GAAAG,GAAAlB;GAAAoB,GAAApB;GAAA,CAAA;AAAA,SAAAS;KAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ApplicationOptions
|
|
1
|
+
import type { ApplicationOptions } from "pixi.js";
|
|
2
2
|
import { Application } from "pixi.js";
|
|
3
3
|
import type { JSX, Ref } from "solid-js";
|
|
4
4
|
/**
|
|
@@ -27,7 +27,7 @@ export declare const usePixiApp: () => Application<import("pixi.js").Renderer>;
|
|
|
27
27
|
* but omits properties that are handled by the component itself.
|
|
28
28
|
*/
|
|
29
29
|
export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" | "resizeTo" | "view">> & {
|
|
30
|
-
ref?: Ref<
|
|
30
|
+
ref?: Ref<Application>;
|
|
31
31
|
children?: JSX.Element;
|
|
32
32
|
};
|
|
33
33
|
/**
|