pixi-solid 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,7 +1,8 @@
-export { PixiApplication, usePixiApp } from "./pixi-application";
-export { PixiCanvas } from "./pixi-canvas";
-export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
-export { PIXI_EVENT_NAMES } from "./pixi-events";
-export { PixiStage } from "./pixi-stage";
-export { useTick, useTicker } from "./use-ticker";
-//# sourceMappingURL=index.js.map
+import { PixiApplication, usePixiApp } from "./pixi-application.js";
+import { PixiCanvas } from "./pixi-canvas.js";
+import { PIXI_EVENT_NAMES } from "./pixi-events.js";
+import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./pixi-components.js";
+import { PixiStage } from "./pixi-stage.js";
+import { useTick, useTicker } from "./use-ticker.js";
+
+export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, PIXI_EVENT_NAMES, ParticleContainer, PerspectiveMesh, PixiApplication, PixiCanvas, PixiStage, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, usePixiApp, useTick, useTicker };

package/dist/pixi-application.js

@@ -0,0 +1,86 @@
+import { createComponent } from "solid-js/web";
+import { Application } from "pixi.js";
+import { Show, createContext, createEffect, createResource, onCleanup, splitProps, useContext } from "solid-js";
+
+//#region src/pixi-application.tsx
+var PixiAppContext = createContext();
+/**
+* A custom SolidJS hook to access the root PIXI.Application instance.
+* This hook must be called from a component that is a descendant of `PixiApplication`.
+*
+* @returns The PIXI.Application instance provided by the `PixiApplication` component.
+* @throws Will throw an error if used outside of a `PixiApplication` context provider.
+* @example
+* ```tsx
+* const MyComponent = () => {
+*   const app = usePixiApp();
+*
+*   createEffect(() => {
+*     console.log('App resolution:', app.renderer.resolution);
+*   });
+*
+*   return <Sprite texture={Texture.WHITE} />;
+* };
+* ```
+*/
+const usePixiApp = () => {
+	const app = useContext(PixiAppContext);
+	if (!app) throw new Error("usePixiApp must be used within a PixiApplication");
+	return app;
+};
+/**
+* A SolidJS component that creates and manages a PIXI.Application instance.
+* It provides the application instance through context to be used by child components
+* and custom hooks like `usePixiApp`, `useTick`, and `useTicker`.
+*
+* This component should only be used once in your application.
+*
+* @param props The properties to configure the Pixi.js Application.
+* 
+* **Example**
+* {@includeCode ./examples/PixiApplication.example.tsx}
+*/
+const PixiApplication = (props) => {
+	const [_solidProps, initialisationProps] = splitProps(props, ["ref", "children"]);
+	const [appResource] = createResource(async () => {
+		if (globalThis.__PIXI_DEVTOOLS__) throw new Error("Only one PixiApplication can be active at a time. Multiple instances detected.");
+		const app = new Application();
+		await app.init({
+			autoDensity: true,
+			resolution: Math.min(window.devicePixelRatio, 2),
+			sharedTicker: true,
+			...initialisationProps
+		});
+		return app;
+	});
+	createEffect(() => {
+		const app = appResource();
+		if (app) {
+			if (props.ref) props.ref(app.stage);
+			app.ticker.autoStart = false;
+			app.ticker.start();
+			globalThis.__PIXI_DEVTOOLS__ = { app };
+			onCleanup(() => {
+				app.destroy(true, { children: true });
+				globalThis.__PIXI_DEVTOOLS__ = void 0;
+			});
+		}
+	});
+	return createComponent(Show, {
+		get when() {
+			return appResource();
+		},
+		children: (app) => createComponent(PixiAppContext.Provider, {
+			get value() {
+				return app();
+			},
+			get children() {
+				return props.children;
+			}
+		})
+	});
+};
+
+//#endregion
+export { PixiApplication, usePixiApp };
+//# sourceMappingURL=pixi-application.js.map

package/dist/pixi-application.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-application.js","names":["ApplicationOptions","Container","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","globalThis","__PIXI_DEVTOOLS__","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","arg","stage","ticker","autoStart","start","destroy","undefined","_$createComponent","when","Provider","value"],"sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Container } 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<Container>;\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    // Enforce singleton pattern: Check if an app already exists\n    // @ts-expect-error\n    if (globalThis.__PIXI_DEVTOOLS__) {\n      throw new Error(\n        \"Only one PixiApplication can be active at a time. Multiple instances detected.\",\n      );\n    }\n\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.stage);\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        // @ts-expect-error\n        globalThis.__PIXI_DEVTOOLS__ = undefined;\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,IAAMY,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;AAG/C,MAAIoB,WAAWC,kBACb,OAAM,IAAIb,MACR,iFACD;EAGH,MAAMD,MAAM,IAAIZ,aAAa;AAC7B,QAAMY,IAAIe,KAAK;GACbC,aAAa;GACbC,YAAYC,KAAKC,IAAIC,OAAOC,kBAAkB,EAAE;GAChDC,cAAc;GACd,GAAGX;GACJ,CAAC;AAEF,SAAOX;GACP;AAEFR,oBAAmB;EACjB,MAAMQ,MAAMY,aAAa;AACzB,MAAIZ,KAAK;AACP,OAAIS,MAAMJ,IAEPI,OAAMJ,IAAsCL,IAAIwB,MAAM;AAMzDxB,OAAIyB,OAAOC,YAAY;AACvB1B,OAAIyB,OAAOE,OAAO;AAGlBd,cAAWC,oBAAoB,EAC7Bd,KACD;AAEDN,mBAAgB;AACdM,QAAI4B,QAAQ,MAAM,EAAEtB,UAAU,MAAM,CAAC;AAErCO,eAAWC,oBAAoBe;KAC/B;;GAEJ;AAEF,QAAAC,gBACGnC,MAAI;EAAA,IAACoC,OAAI;AAAA,UAAEnB,aAAa;;EAAAN,WACrBN,QAAG8B,gBAAMhC,eAAekC,UAAQ;GAAA,IAACC,QAAK;AAAA,WAAEjC,KAAK;;GAAA,IAAAM,WAAA;AAAA,WAAGG,MAAMH;;GAAQ,CAAA;EAA2B,CAAA"}

package/dist/pixi-canvas.js

@@ -0,0 +1,79 @@
+import { usePixiApp } from "./pixi-application.js";
+import { classList, effect, insert, style, template, use } from "solid-js/web";
+import { createRenderEffect, onCleanup, onMount } from "solid-js";
+
+//#region src/pixi-canvas.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/**
+* PixiCanvas
+*
+* A small wrapper that mounts the PIXI application's canvas element into the DOM
+* and automatically resizes it.
+*
+* - Requires a surrounding `PixiApplication` (accessed via `usePixiApp`).
+* - Requires a `PixiStage` component as a child.
+*
+* Props:
+* @param props.children - JSX content to render inside the canvas wrapper. Use
+*   `PixiStage` as the only child.
+*
+* **Example**
+* {@includeCode ./examples/PixiCanvas.example.tsx}
+*
+*/
+const PixiCanvas = (props) => {
+	let canvasWrapElement;
+	const pixiApp = usePixiApp();
+	pixiApp.canvas.style.display = "block";
+	pixiApp.canvas.style.position = "absolute";
+	pixiApp.canvas.style.top = "0";
+	pixiApp.canvas.style.left = "0";
+	pixiApp.canvas.style.width = "100%";
+	pixiApp.canvas.style.height = "100%";
+	createRenderEffect(() => {
+		if (props.children === void 0) throw new Error("PixiCanvas requires the `PixiStage` component to render.");
+	});
+	let previousResizeTo;
+	let resizeObserver;
+	onMount(() => {
+		if (!canvasWrapElement) return;
+		previousResizeTo = pixiApp.resizeTo;
+		pixiApp.resizeTo = canvasWrapElement;
+		pixiApp.queueResize();
+		resizeObserver = new ResizeObserver(() => {
+			pixiApp.queueResize();
+		});
+		resizeObserver.observe(canvasWrapElement);
+	});
+	onCleanup(() => {
+		if (!canvasWrapElement) return;
+		pixiApp.resizeTo = previousResizeTo;
+		resizeObserver?.disconnect();
+		resizeObserver = void 0;
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = canvasWrapElement;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : canvasWrapElement = _el$;
+		insert(_el$, () => pixiApp.canvas);
+		effect((_p$) => {
+			var _v$ = {
+				position: "relative",
+				flex: 1,
+				display: "block",
+				...typeof props.style === "object" ? props.style : {}
+			}, _v$2 = { [props.className || ""]: props.className !== void 0 };
+			_p$.e = style(_el$, _v$, _p$.e);
+			_p$.t = classList(_el$, _v$2, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+export { PixiCanvas };
+//# sourceMappingURL=pixi-canvas.js.map

package/dist/pixi-canvas.js.map

@@ -0,0 +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","position","top","left","width","height","undefined","Error","previousResizeTo","resizeTo","resizeObserver","ResizeObserver","queueResize","observe","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","flex","_v$2","e","_$style","t","_$classList"],"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  pixiApp.canvas.style.position = \"absolute\";\n  pixiApp.canvas.style.top = \"0\";\n  pixiApp.canvas.style.left = \"0\";\n  pixiApp.canvas.style.width = \"100%\";\n  pixiApp.canvas.style.height = \"100%\";\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        ...{\n          position: \"relative\",\n          flex: 1,\n          display: \"block\",\n        },\n        ...(typeof props.style === \"object\" ? props.style : {}),\n      }}\n      classList={{ [props.className || \"\"]: props.className !== undefined }}\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;AAC/BF,SAAQC,OAAON,MAAMQ,WAAW;AAChCH,SAAQC,OAAON,MAAMS,MAAM;AAC3BJ,SAAQC,OAAON,MAAMU,OAAO;AAC5BL,SAAQC,OAAON,MAAMW,QAAQ;AAC7BN,SAAQC,OAAON,MAAMY,SAAS;AAE9BpB,0BAAyB;AACvB,MAAIK,MAAMC,aAAae,OACrB,OAAM,IAAIC,MAAM,2DAA2D;GAE7E;CAEF,IAAIC;CACJ,IAAIE;AAEJvB,eAAc;AACZ,MAAI,CAACS,kBAAmB;AACxBY,qBAAmBV,QAAQW;AAC3BX,UAAQW,WAAWb;AACnBE,UAAQc,aAAa;AACrBF,mBAAiB,IAAIC,qBAAqB;AACxCb,WAAQc,aAAa;IACrB;AACFF,iBAAeG,QAAQjB,kBAAkB;GACzC;AAEFV,iBAAgB;AACd,MAAI,CAACU,kBAAmB;AACxBE,UAAQW,WAAWD;AACnBE,kBAAgBI,YAAY;AAC5BJ,mBAAiBJ;GACjB;AAEF,eAAA;EAAA,IAAAS,OAAAC,QAAA;EAAA,IAAAC,QAESrB;AAAiB,SAAAqB,UAAA,aAAAC,IAAAD,OAAAF,KAAA,GAAjBnB,oBAAiBmB;AAAAI,SAAAJ,YAWrBjB,QAAQC,OAAM;AAAAqB,UAAAC,QAAA;GAAA,IAAAC,MAVR;IAEHrB,UAAU;IACVsB,MAAM;IACNvB,SAAS;IAEX,GAAI,OAAOV,MAAMG,UAAU,WAAWH,MAAMG,QAAQ,EAAE;IACvD,EAAA+B,OACU,GAAGlC,MAAMK,aAAa,KAAKL,MAAMK,cAAcW,QAAW;AAAAe,OAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,EAAA;AAAAJ,OAAAM,IAAAC,UAAAb,MAAAS,MAAAH,IAAAM,EAAA;AAAA,UAAAN;KAAA;GAAAI,GAAAnB;GAAAqB,GAAArB;GAAA,CAAA;AAAA,SAAAS;KAAA"}

package/dist/pixi-components.js

@@ -0,0 +1,197 @@
+import { PIXI_EVENT_HANDLER_NAMES } from "./pixi-events.js";
+import { insert, setProp } from "./renderer.js";
+import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "pixi.js";
+import { createRenderEffect, splitProps } from "solid-js";
+
+//#region src/pixi-components.tsx
+const SOLID_PROP_KEYS = [
+	"ref",
+	"as",
+	"children"
+];
+/**
+* Apply's the props to a Pixi instance with subsriptions to maintain reactivity.
+* 
+* @param instance The Pixi instance we want to apply props to.
+* @param props The props object.
+*/
+const applyProps = (instance, props) => {
+	for (const key in props) {
+		if (key === "as") continue;
+		if (key === "ref") createRenderEffect(() => {
+			props[key](instance);
+		});
+		else if (key === "children") {
+			if (!("addChild" in instance)) throw new Error(`Cannot set children on non-container instance.`);
+			createRenderEffect(() => {
+				insert(instance, () => props.children);
+			});
+		} else createRenderEffect(() => {
+			setProp(instance, key, props[key]);
+		});
+	}
+};
+var createContainerComponent = (PixiClass) => {
+	return (props) => {
+		const [runtimeProps, initialisationProps] = splitProps(props, [...SOLID_PROP_KEYS, ...PIXI_EVENT_HANDLER_NAMES]);
+		const instance = props.as || new PixiClass(initialisationProps);
+		applyProps(instance, initialisationProps);
+		applyProps(instance, runtimeProps);
+		return instance;
+	};
+};
+var createLeafComponent = (PixiClass) => {
+	return (props) => {
+		return createContainerComponent(PixiClass)(props);
+	};
+};
+/**
+* A SolidJS component that renders a PIXI.AnimatedSprite.
+*
+* **Example**
+* {@includeCode ./examples/AnimatedSprite.example.tsx}
+* 
+* {@link PixiAnimatedSprite}
+*
+*/
+const AnimatedSprite$1 = createLeafComponent(AnimatedSprite);
+/**
+* A SolidJS component that renders a PIXI.BitmapText.
+*
+* **Example**
+* {@includeCode ./examples/BitmapText.example.tsx}
+* 
+* {@link PixiBitmapText}
+*
+*/
+const BitmapText$1 = createLeafComponent(BitmapText);
+/**
+* A SolidJS component that renders a PIXI.Container.
+*
+* **Example**
+* {@includeCode ./examples/Container.example.tsx}
+*
+*/
+const Container$1 = createContainerComponent(Container);
+/**
+* A SolidJS component that renders a PIXI.Graphics.
+* Use a ref to access the underlying graphics instance and draw with it.
+*
+* **Example**
+* {@includeCode ./examples/Graphics.example.tsx}
+*
+* {@link PixiGraphics}
+*/
+const Graphics$1 = createLeafComponent(Graphics);
+/**
+* A SolidJS component that renders a PIXI.HTMLText.
+*
+* **Example**
+* {@includeCode ./examples/HTMLText.example.tsx}
+*
+* {@link PixiHTMLText}
+*/
+const HTMLText$1 = createLeafComponent(HTMLText);
+/**
+* A SolidJS component that renders a PIXI.MeshPlane.
+*
+* **Example**
+* {@includeCode ./examples/MeshPlane.example.tsx}
+*
+* {@link PixiMeshPlane}
+*/
+const MeshPlane$1 = createLeafComponent(MeshPlane);
+/**
+* A SolidJS component that renders a PIXI.MeshRope.
+*
+* **Example**
+* {@includeCode ./examples/MeshRope.example.tsx}
+*
+* {@link PixiMeshRope}
+*/
+const MeshRope$1 = createLeafComponent(MeshRope);
+/**
+* A SolidJS component that renders a PIXI.MeshSimple.
+*
+* **Example**
+* {@includeCode ./examples/MeshSimple.example.tsx}
+*
+* {@link PixiMeshSimple}
+*/
+const MeshSimple$1 = createLeafComponent(MeshSimple);
+/**
+* A SolidJS component that renders a PIXI.NineSliceSprite.
+*
+* **Example**
+* {@includeCode ./examples/NineSliceSprite.example.tsx}
+*
+* {@link PixiNineSliceSprite}
+*/
+const NineSliceSprite$1 = createLeafComponent(NineSliceSprite);
+/**
+* A SolidJS component that renders a PIXI.ParticleContainer.
+*
+* **Example**
+* {@includeCode ./examples/ParticleContainer.example.tsx}
+*
+* {@link PixiParticleContainer}
+*/
+const ParticleContainer$1 = createLeafComponent(ParticleContainer);
+/**
+* A SolidJS component that renders a PIXI.PerspectiveMesh.
+*
+* **Example**
+* {@includeCode ./examples/PerspectiveMesh.example.tsx}
+*
+* {@link PixiPerspectiveMesh}
+*/
+const PerspectiveMesh$1 = createLeafComponent(PerspectiveMesh);
+/**
+* A SolidJS component that renders a PIXI.RenderContainer.
+*
+* **Example**
+* {@includeCode ./examples/RenderContainer.example.tsx}
+*
+* {@link PixiRenderContainer}
+*/
+const RenderContainer$1 = createContainerComponent(RenderContainer);
+/**
+* A SolidJS component that renders a PIXI.RenderLayer.
+*
+* **Example**
+* {@includeCode ./examples/RenderLayer.example.tsx}
+*
+* {@link PixiRenderLayer}
+*/
+const RenderLayer$1 = createContainerComponent(RenderLayer);
+/**
+* A SolidJS component that renders a PIXI.Sprite.
+*
+* **Example**
+* {@includeCode ./examples/Sprite.example.tsx}
+*
+* {@link PixiSprite}
+*/
+const Sprite$1 = createLeafComponent(Sprite);
+/**
+* A SolidJS component that renders a PIXI.Text.
+*
+* **Example**
+* {@includeCode ./examples/Text.example.tsx}
+*
+* {@link PixiText}
+*/
+const Text$1 = createLeafComponent(Text);
+/**
+* A SolidJS component that renders a PIXI.TilingSprite.
+*
+* **Example**
+* {@includeCode ./examples/TilingSprite.example.tsx}
+*
+* {@link PixiTilingSprite}
+*/
+const TilingSprite$1 = createLeafComponent(TilingSprite);
+
+//#endregion
+export { AnimatedSprite$1 as AnimatedSprite, BitmapText$1 as BitmapText, Container$1 as Container, Graphics$1 as Graphics, HTMLText$1 as HTMLText, MeshPlane$1 as MeshPlane, MeshRope$1 as MeshRope, MeshSimple$1 as MeshSimple, NineSliceSprite$1 as NineSliceSprite, ParticleContainer$1 as ParticleContainer, PerspectiveMesh$1 as PerspectiveMesh, RenderContainer$1 as RenderContainer, RenderLayer$1 as RenderLayer, Sprite$1 as Sprite, Text$1 as Text, TilingSprite$1 as TilingSprite, applyProps };
+//# sourceMappingURL=pixi-components.js.map

package/dist/pixi-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-components.js","names":["Pixi","AnimatedSprite","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","MeshSimple","PixiMeshSimple","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite","JSX","Ref","createRenderEffect","splitProps","PixiEventHandlerMap","PIXI_EVENT_HANDLER_NAMES","insert","setProp","ContainerProps","ref","Component","as","children","Element","LeafProps","Omit","SOLID_PROP_KEYS","const","applyProps","InstanceType","instance","props","OptionsType","key","arg","Error","createContainerComponent","PixiClass","runtimeProps","initialisationProps","createLeafComponent","AnimatedSpriteOptions","TextOptions","ContainerOptions","GraphicsOptions","HTMLTextOptions","MeshPlaneOptions","MeshRopeOptions","SimpleMeshOptions","NineSliceSpriteOptions","ParticleContainerOptions","PerspectivePlaneOptions","RenderContainerOptions","RenderLayerOptions","SpriteOptions","CanvasTextOptions","TilingSpriteOptions"],"sources":["../src/pixi-components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n  AnimatedSprite as PixiAnimatedSprite,\n  BitmapText as PixiBitmapText,\n  Container as PixiContainer,\n  Graphics as PixiGraphics,\n  HTMLText as PixiHTMLText,\n  MeshPlane as PixiMeshPlane,\n  MeshRope as PixiMeshRope,\n  MeshSimple as PixiMeshSimple,\n  NineSliceSprite as PixiNineSliceSprite,\n  ParticleContainer as PixiParticleContainer,\n  PerspectiveMesh as PixiPerspectiveMesh,\n  RenderContainer as PixiRenderContainer,\n  RenderLayer as PixiRenderLayer,\n  Sprite as PixiSprite,\n  Text as PixiText,\n  TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_EVENT_HANDLER_NAMES } from \"./pixi-events\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap & {\n  ref?: Ref<Component>;\n  as?: Component;\n  children?: JSX.Element;\n};\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n * \n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n */\nexport const applyProps = <\n  InstanceType extends PixiContainer,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      createRenderEffect(() => {\n        // Solid converts the ref prop to a callback function\n        (props[key] as unknown as (arg: any) => void)(instance);\n      });\n    } else if (key === \"children\") {\n      if (!(\"addChild\" in instance)) {\n        throw new Error(`Cannot set children on non-container instance.`);\n      }\n      createRenderEffect(() => {\n        insert(instance, () => props.children);\n      });\n    } else {\n      createRenderEffect(() => {\n        setProp(instance, key, props[key as keyof typeof props]);\n      });\n    }\n  }\n};\n\nconst createContainerComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>): JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_EVENT_HANDLER_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps);\n    applyProps(instance, runtimeProps);\n\n    return instance as unknown as JSX.Element;\n  };\n};\n\nconst createLeafComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n  return (props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>): JSX.Element => {\n    return createContainerComponent<PixiContainer, OptionsType>(PixiClass)(props as any);\n  };\n};\n\n/**\n * A SolidJS component that renders a PIXI.AnimatedSprite.\n *\n * **Example**\n * {@includeCode ./examples/AnimatedSprite.example.tsx}\n * \n * {@link PixiAnimatedSprite}\n *\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n  PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a PIXI.BitmapText.\n *\n * **Example**\n * {@includeCode ./examples/BitmapText.example.tsx}\n * \n * {@link PixiBitmapText}\n *\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a PIXI.Container.\n *\n * **Example**\n * {@includeCode ./examples/Container.example.tsx}\n *\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n  PixiContainer,\n);\n/**\n * A SolidJS component that renders a PIXI.Graphics.\n * Use a ref to access the underlying graphics instance and draw with it.\n *\n * **Example**\n * {@includeCode ./examples/Graphics.example.tsx}\n *\n * {@link PixiGraphics}\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a PIXI.HTMLText.\n *\n * **Example**\n * {@includeCode ./examples/HTMLText.example.tsx}\n *\n * {@link PixiHTMLText}\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a PIXI.MeshPlane.\n *\n * **Example**\n * {@includeCode ./examples/MeshPlane.example.tsx}\n *\n * {@link PixiMeshPlane}\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a PIXI.MeshRope.\n *\n * **Example**\n * {@includeCode ./examples/MeshRope.example.tsx}\n *\n * {@link PixiMeshRope}\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a PIXI.MeshSimple.\n *\n * **Example**\n * {@includeCode ./examples/MeshSimple.example.tsx}\n *\n * {@link PixiMeshSimple}\n */\nexport const MeshSimple = createLeafComponent<PixiMeshSimple, Pixi.SimpleMeshOptions>(\n  PixiMeshSimple,\n);\n\n/**\n * A SolidJS component that renders a PIXI.NineSliceSprite.\n *\n * **Example**\n * {@includeCode ./examples/NineSliceSprite.example.tsx}\n *\n * {@link PixiNineSliceSprite}\n */\nexport const NineSliceSprite = createLeafComponent<\n  PixiNineSliceSprite,\n  Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a PIXI.ParticleContainer.\n *\n * **Example**\n * {@includeCode ./examples/ParticleContainer.example.tsx}\n *\n * {@link PixiParticleContainer}\n */\nexport const ParticleContainer = createLeafComponent<\n  PixiParticleContainer,\n  Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a PIXI.PerspectiveMesh.\n *\n * **Example**\n * {@includeCode ./examples/PerspectiveMesh.example.tsx}\n *\n * {@link PixiPerspectiveMesh}\n */\nexport const PerspectiveMesh = createLeafComponent<\n  PixiPerspectiveMesh,\n  Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a PIXI.RenderContainer.\n *\n * **Example**\n * {@includeCode ./examples/RenderContainer.example.tsx}\n *\n * {@link PixiRenderContainer}\n */\nexport const RenderContainer = createContainerComponent<\n  PixiRenderContainer,\n  Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a PIXI.RenderLayer.\n *\n * **Example**\n * {@includeCode ./examples/RenderLayer.example.tsx}\n *\n * {@link PixiRenderLayer}\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n  PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a PIXI.Sprite.\n *\n * **Example**\n * {@includeCode ./examples/Sprite.example.tsx}\n *\n * {@link PixiSprite}\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a PIXI.Text.\n *\n * **Example**\n * {@includeCode ./examples/Text.example.tsx}\n *\n * {@link PixiText}\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a PIXI.TilingSprite.\n *\n * **Example**\n * {@includeCode ./examples/TilingSprite.example.tsx}\n *\n * {@link PixiTilingSprite}\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n  PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Don't need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"mappings":";;;;;;AAyCA,MAAaiD,kBAAkB;CAAC;CAAO;CAAM;CAAW;;;;;;;AAQxD,MAAaE,cAIXE,UACAC,UACG;AACH,MAAK,MAAME,OAAOF,OAAO;AACvB,MAAIE,QAAQ,KAAM;AAElB,MAAIA,QAAQ,MACVrB,0BAAyB;AAEtBmB,SAAME,KAAuCH,SAAS;IACvD;WACOG,QAAQ,YAAY;AAC7B,OAAI,EAAE,cAAcH,UAClB,OAAM,IAAIK,MAAM,iDAAiD;AAEnEvB,4BAAyB;AACvBI,WAAOc,gBAAgBC,MAAMT,SAAS;KACtC;QAEFV,0BAAyB;AACvBK,WAAQa,UAAUG,KAAKF,MAAME,KAA2B;IACxD;;;AAKR,IAAMG,4BACJC,cACG;AACH,SAAQN,UAAqF;EAC3F,MAAM,CAACO,cAAcC,uBAAuB1B,WAAWkB,OAAO,CAC5D,GAAGL,iBACH,GAAGX,yBACJ,CAAC;EAEF,MAAMe,WAAWC,MAAMV,MAAM,IAAIgB,UAAUE,oBAA2B;AAEtEX,aAAWE,UAAUS,oBAAoB;AACzCX,aAAWE,UAAUQ,aAAa;AAElC,SAAOR;;;AAIX,IAAMU,uBACJH,cACG;AACH,SAAQN,UAAgF;AACtF,SAAOK,yBAAqDC,UAAU,CAACN,MAAa;;;;;;;;;;;;AAaxF,MAAarD,mBAAiB8D,oBAC5B7D,eACD;;;;;;;;;;AAUD,MAAaC,eAAa4D,oBAAsD3D,WAAe;;;;;;;;AAQ/F,MAAaC,cAAYsD,yBACvBrD,UACD;;;;;;;;;;AAUD,MAAaC,aAAWwD,oBAAwDvD,SAAa;;;;;;;;;AAS7F,MAAaC,aAAWsD,oBAAwDrD,SAAa;;;;;;;;;AAU7F,MAAaC,cAAYoD,oBAA0DnD,UAAc;;;;;;;;;AAUjG,MAAaC,aAAWkD,oBAAwDjD,SAAa;;;;;;;;;AAU7F,MAAaC,eAAagD,oBACxB/C,WACD;;;;;;;;;AAUD,MAAaC,oBAAkB8C,oBAG7B7C,gBAAoB;;;;;;;;;AAUtB,MAAaC,sBAAoB4C,oBAG/B3C,kBAAsB;;;;;;;;;AAUxB,MAAaC,oBAAkB0C,oBAG7BzC,gBAAoB;;;;;;;;;AAUtB,MAAaC,oBAAkBoC,yBAG7BnC,gBAAoB;;;;;;;;;AAUtB,MAAaC,gBAAckC,yBACzBjC,YACD;;;;;;;;;AAUD,MAAaC,WAASoC,oBAAoDnC,OAAW;;;;;;;;;AASrF,MAAaC,SAAOkC,oBAAsDjC,KAAS;;;;;;;;;AAUnF,MAAaC,iBAAegC,oBAC1B/B,aACD"}

package/dist/pixi-events.js

@@ -1,40 +1,42 @@
-export const PIXI_EVENT_NAMES = [
-    "click",
-    "mousedown",
-    "mouseenter",
-    "mouseleave",
-    "mousemove",
-    "mouseout",
-    "mouseover",
-    "mouseup",
-    "mouseupoutside",
-    "pointercancel",
-    "pointerdown",
-    "pointerenter",
-    "pointerleave",
-    "pointermove",
-    "pointerout",
-    "pointerover",
-    "pointertap",
-    "pointerup",
-    "pointerupoutside",
-    "rightclick",
-    "rightdown",
-    "rightup",
-    "rightupoutside",
-    "tap",
-    "touchcancel",
-    "touchend",
-    "touchendoutside",
-    "touchmove",
-    "touchstart",
-    "wheel",
-    "globalmousemove",
-    "globalpointermove",
-    "globaltouchmove",
+//#region src/pixi-events.ts
+const PIXI_EVENT_NAMES = [
+	"click",
+	"mousedown",
+	"mouseenter",
+	"mouseleave",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"mouseupoutside",
+	"pointercancel",
+	"pointerdown",
+	"pointerenter",
+	"pointerleave",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointertap",
+	"pointerup",
+	"pointerupoutside",
+	"rightclick",
+	"rightdown",
+	"rightup",
+	"rightupoutside",
+	"tap",
+	"touchcancel",
+	"touchend",
+	"touchendoutside",
+	"touchmove",
+	"touchstart",
+	"wheel",
+	"globalmousemove",
+	"globalpointermove",
+	"globaltouchmove"
 ];
-export const PIXI_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map((eventName) => `on${eventName}`);
-export const PIXI_EVENT_HANDLER_NAME_SET = new Set(PIXI_EVENT_HANDLER_NAMES);
-const allEventsAreHandled = true;
-void allEventsAreHandled;
+const PIXI_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map((eventName) => `on${eventName}`);
+const PIXI_EVENT_HANDLER_NAME_SET = new Set(PIXI_EVENT_HANDLER_NAMES);
+
+//#endregion
+export { PIXI_EVENT_HANDLER_NAMES, PIXI_EVENT_HANDLER_NAME_SET, PIXI_EVENT_NAMES };
 //# sourceMappingURL=pixi-events.js.map

package/dist/pixi-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-events.js","sourceRoot":"","sources":["../src/pixi-events.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAmC;IAC9D,OAAO;IACP,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,UAAU;IACV,WAAW;IACX,SAAS;IACT,gBAAgB;IAChB,eAAe;IACf,aAAa;IACb,cAAc;IACd,cAAc;IACd,aAAa;IACb,YAAY;IACZ,aAAa;IACb,YAAY;IACZ,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,WAAW;IACX,SAAS;IACT,gBAAgB;IAChB,KAAK;IACL,aAAa;IACb,UAAU;IACV,iBAAiB;IACjB,WAAW;IACX,YAAY;IACZ,OAAO;IACP,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;CACT,CAAC;AAEX,MAAM,CAAC,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,KAAK,SAAS,EAAW,CAAC,CAAC;AAMvG,MAAM,CAAC,MAAM,2BAA2B,GAA6D,IAAI,GAAG,CAC1G,wBAAwB,CACzB,CAAC;AAQF,MAAM,mBAAmB,GAAwB,IAAI,CAAC;AACtD,KAAK,mBAAmB,CAAC"}
+{"version":3,"file":"pixi-events.js","names":["PIXI_EVENT_NAMES: (keyof AllFederatedEventMap)[]","PIXI_EVENT_HANDLER_NAME_SET: Readonly<Set<(typeof PIXI_EVENT_HANDLER_NAMES)[number]>>","allEventsAreHandled: AllEventsAreHandled"],"sources":["../src/pixi-events.ts"],"sourcesContent":["import type { AllFederatedEventMap } from \"pixi.js\";\n\nexport const PIXI_EVENT_NAMES: (keyof AllFederatedEventMap)[] = [\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] as const;\n\nexport const PIXI_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map((eventName) => `on${eventName}` as const);\n\nexport type PixiEventHandlerMap = {\n  [K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?: (event: AllFederatedEventMap[K]) => void;\n};\n\nexport const PIXI_EVENT_HANDLER_NAME_SET: Readonly<Set<(typeof PIXI_EVENT_HANDLER_NAMES)[number]>> = new Set(\n  PIXI_EVENT_HANDLER_NAMES\n);\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 AllFederatedEventMap, (typeof PIXI_EVENT_NAMES)[number]>;\ntype AllEventsAreHandled = MissingKeys extends never ? true : `Error: Missing event keys: ${MissingKeys}`;\nconst allEventsAreHandled: AllEventsAreHandled = true;\nvoid allEventsAreHandled;\n"],"mappings":";AAEA,MAAaA,mBAAmD;CAC9D;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,2BAA2B,iBAAiB,KAAK,cAAc,KAAK,YAAqB;AAMtG,MAAaC,8BAAwF,IAAI,IACvG,yBACD"}

package/dist/pixi-stage.js

@@ -0,0 +1,31 @@
+import { usePixiApp } from "./pixi-application.js";
+import { applyProps } from "./pixi-components.js";
+import { memo } from "solid-js/web";
+
+//#region src/pixi-stage.tsx
+/**
+* PixiStage
+*
+* The root container for rendering Pixi display objects. This component
+* uses the application stage (`pixiApp.stage`) as the mount point and
+* applies props and event handlers to it.
+*
+* Props:
+* - `ref` (optional): receives the stage container reference.
+* - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.
+* - Any other container options supported by Pixi may be passed.
+*
+* Children passed to `PixiStage` are inserted into the application stage.
+*
+* **Example**
+* {@includeCode ./examples/PixiStage.example.tsx}
+*/
+const PixiStage = (props) => {
+	const pixiApp = usePixiApp();
+	applyProps(pixiApp.stage, props);
+	return memo(() => pixiApp.stage);
+};
+
+//#endregion
+export { PixiStage };
+//# sourceMappingURL=pixi-stage.js.map

package/dist/pixi-stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-stage.js","names":["Container","ContainerOptions","JSX","Ref","usePixiApp","applyProps","PixiEventHandlerMap","PixiStageProps","Omit","ref","children","Element","PixiStage","props","pixiApp","stage","_$memo"],"sources":["../src/pixi-stage.tsx"],"sourcesContent":["import type { Container, ContainerOptions } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\nimport { applyProps } from \"./pixi-components\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nexport type PixiStageProps = PixiEventHandlerMap &\n  Omit<ContainerOptions, \"children\"> & {\n    ref?: Ref<Container>;\n    children?: JSX.Element;\n  };\n\n/**\n * PixiStage\n *\n * The root container for rendering Pixi display objects. This component\n * uses the application stage (`pixiApp.stage`) as the mount point and\n * applies props and event handlers to it.\n *\n * Props:\n * - `ref` (optional): receives the stage container reference.\n * - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.\n * - Any other container options supported by Pixi may be passed.\n *\n * Children passed to `PixiStage` are inserted into the application stage.\n *\n * **Example**\n * {@includeCode ./examples/PixiStage.example.tsx}\n */\nexport const PixiStage = (props: PixiStageProps): JSX.Element => {\n  const pixiApp = usePixiApp();\n\n  applyProps(pixiApp.stage, props);\n\n  return <>{pixiApp.stage}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAaY,aAAaC,UAAuC;CAC/D,MAAMC,UAAUV,YAAY;AAE5BC,YAAWS,QAAQC,OAAOF,MAAM;AAEhC,QAAAG,WAAUF,QAAQC,MAAK"}

package/dist/renderer.js

@@ -0,0 +1,59 @@
+import { PIXI_EVENT_HANDLER_NAME_SET } from "./pixi-events.js";
+import { createRenderer } from "./universal.js";
+import { Text } from "pixi.js";
+
+//#region src/renderer.tsx
+const { effect, memo, createComponent, createElement, createTextNode, insertNode, insert, setProp, mergeProps, use, render, spread } = createRenderer({
+	createElement(name) {
+		throw new Error(`Cannot create element "${name}". Please import components directly from 'pixi-solid' and use them with a capital letter.`);
+	},
+	createTextNode(value) {
+		return new Text({ text: value });
+	},
+	replaceText(textNode, value) {
+		textNode.text = value;
+	},
+	setProperty(node, name, value, prev) {
+		if (PIXI_EVENT_HANDLER_NAME_SET.has(name)) {
+			const eventName = name.slice(2);
+			if (prev) node.removeEventListener(eventName, prev);
+			node.addEventListener(eventName, value);
+			return;
+		}
+		if (name in node) {
+			node[name] = value;
+			return;
+		}
+	},
+	insertNode(parent, node, anchor) {
+		if ("attach" in parent && typeof parent.attach === "function") {
+			parent.attach(node);
+			return;
+		}
+		if (!("addChildAt" in parent) || !("addChild" in parent) || typeof parent.addChild !== "function") throw new Error("Parent does not support children.");
+		if (anchor) parent.addChildAt(node, parent.children.indexOf(anchor));
+		else parent.addChild(node);
+	},
+	isTextNode(node) {
+		return node instanceof Text;
+	},
+	removeNode(_, node) {
+		node.removeFromParent();
+		node.destroy({ children: true });
+	},
+	getParentNode(node) {
+		return node?.parent ?? void 0;
+	},
+	getFirstChild(node) {
+		return node.children?.[0];
+	},
+	getNextSibling(node) {
+		if (!node.parent) return void 0;
+		const index = node.parent.children.indexOf(node);
+		return index > -1 ? node.parent.children[index + 1] : void 0;
+	}
+});
+
+//#endregion
+export { insert, setProp };
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","names":["Container","PixiContainer","Text","PixiText","createRenderer","PIXI_EVENT_NAMES","PixiEventHandlerMap","PIXI_EVENT_HANDLER_NAME_SET","effect","memo","createComponent","createElement","createTextNode","insertNode","insert","setProp","mergeProps","use","render","spread","name","Error","value","text","replaceText","textNode","setProperty","node","prev","has","eventName","slice","removeEventListener","addEventListener","parent","anchor","attach","addChild","addChildAt","children","indexOf","isTextNode","removeNode","_","removeFromParent","destroy","getParentNode","undefined","getFirstChild","getNextSibling","index"],"sources":["../src/renderer.tsx"],"sourcesContent":["import type { Container as PixiContainer } from \"pixi.js\";\nimport { Text as PixiText } from \"pixi.js\";\nimport { createRenderer } from \"solid-js/universal\";\nimport type { PIXI_EVENT_NAMES, PixiEventHandlerMap } from \"./pixi-events\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./pixi-events\";\n\nexport const {\n  effect,\n  memo,\n  createComponent,\n  createElement,\n  createTextNode,\n  insertNode,\n  insert,\n  setProp,\n  mergeProps,\n  use,\n  render,\n  spread,\n} = createRenderer<PixiContainer>({\n  createElement(name: string) {\n    // This function is for lowercase string tags like `<container />`.\n    // To support tree-shaking, we require users to import components\n    // directly and use them with an uppercase name like `<Container />`,\n    // which does not call this function.\n    throw new Error(\n      `Cannot create element \"${name}\". Please import components directly from 'pixi-solid' and use them with a capital letter.`,\n    );\n  },\n  createTextNode(value) {\n    return new PixiText({ text: value });\n  },\n  replaceText(textNode: PixiText, value) {\n    textNode.text = value;\n  },\n  setProperty(node, name, value, prev) {\n    // Check for event listeners and handle them appropriately.\n    if (PIXI_EVENT_HANDLER_NAME_SET.has(name as keyof PixiEventHandlerMap)) {\n      // Remove the 'on' prefix to get the actual event name.\n      const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n      if (prev) {\n        node.removeEventListener(eventName, prev as any);\n      }\n      node.addEventListener(eventName, value as any);\n      return;\n    }\n\n    if (name in node) {\n      (node as any)[name] = value;\n      return;\n    }\n  },\n  insertNode(parent, node, anchor) {\n    // RenderLayer uses `attach` instead of `addChild`.\n    if (\"attach\" in parent && typeof parent.attach === \"function\") {\n      parent.attach(node);\n      // Note: `attach` does not support anchoring, so we ignore the anchor.\n      return;\n    }\n\n    if (\n      !(\"addChildAt\" in parent) ||\n      !(\"addChild\" in parent) ||\n      typeof parent.addChild !== \"function\"\n    ) {\n      throw new Error(\"Parent does not support children.\");\n    }\n\n    if (anchor) {\n      parent.addChildAt(node, parent.children.indexOf(anchor));\n    } else {\n      parent.addChild(node);\n    }\n  },\n  isTextNode(node) {\n    return node instanceof PixiText;\n  },\n  removeNode(_, node) {\n    node.removeFromParent();\n    node.destroy({ children: true });\n  },\n  getParentNode(node) {\n    return node?.parent ?? undefined;\n  },\n  getFirstChild(node) {\n    return node.children?.[0];\n  },\n  getNextSibling(node) {\n    if (!node.parent) return undefined;\n    const index = node.parent.children.indexOf(node);\n    // Return the next child if it exists, otherwise undefined.\n    return index > -1 ? node.parent.children[index + 1] : undefined;\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,EACXQ,QACAC,MACAC,iBACAC,eACAC,gBACAC,YACAC,QACAC,SACAC,YACAC,KACAC,QACAC,WACEf,eAA8B;CAChCO,cAAcS,MAAc;AAK1B,QAAM,IAAIC,MACR,0BAA0BD,KAAI,4FAC/B;;CAEHR,eAAeU,OAAO;AACpB,SAAO,IAAInB,KAAS,EAAEoB,MAAMD,OAAO,CAAC;;CAEtCE,YAAYC,UAAoBH,OAAO;AACrCG,WAASF,OAAOD;;CAElBI,YAAYC,MAAMP,MAAME,OAAOM,MAAM;AAEnC,MAAIrB,4BAA4BsB,IAAIT,KAAkC,EAAE;GAEtE,MAAMU,YAAYV,KAAKW,MAAM,EAAE;AAE/B,OAAIH,KACFD,MAAKK,oBAAoBF,WAAWF,KAAY;AAElDD,QAAKM,iBAAiBH,WAAWR,MAAa;AAC9C;;AAGF,MAAIF,QAAQO,MAAM;AACfA,QAAaP,QAAQE;AACtB;;;CAGJT,WAAWqB,QAAQP,MAAMQ,QAAQ;AAE/B,MAAI,YAAYD,UAAU,OAAOA,OAAOE,WAAW,YAAY;AAC7DF,UAAOE,OAAOT,KAAK;AAEnB;;AAGF,MACE,EAAE,gBAAgBO,WAClB,EAAE,cAAcA,WAChB,OAAOA,OAAOG,aAAa,WAE3B,OAAM,IAAIhB,MAAM,oCAAoC;AAGtD,MAAIc,OACFD,QAAOI,WAAWX,MAAMO,OAAOK,SAASC,QAAQL,OAAO,CAAC;MAExDD,QAAOG,SAASV,KAAK;;CAGzBc,WAAWd,MAAM;AACf,SAAOA,gBAAgBxB;;CAEzBuC,WAAWC,GAAGhB,MAAM;AAClBA,OAAKiB,kBAAkB;AACvBjB,OAAKkB,QAAQ,EAAEN,UAAU,MAAM,CAAC;;CAElCO,cAAcnB,MAAM;AAClB,SAAOA,MAAMO,UAAUa;;CAEzBC,cAAcrB,MAAM;AAClB,SAAOA,KAAKY,WAAW;;CAEzBU,eAAetB,MAAM;AACnB,MAAI,CAACA,KAAKO,OAAQ,QAAOa;EACzB,MAAMG,QAAQvB,KAAKO,OAAOK,SAASC,QAAQb,KAAK;AAEhD,SAAOuB,QAAQ,KAAKvB,KAAKO,OAAOK,SAASW,QAAQ,KAAKH;;CAEzD,CAAC"}