pixi-solid 0.0.1

package/dist/pixi-canvas.jsx

@@ -0,0 +1,65 @@
+import { createRenderEffect, onCleanup, onMount } from "solid-js";
+import { usePixiApp } from "./pixi-application";
+/**
+ * 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}
+ *
+ */
+export 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 === undefined) {
+            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 = undefined;
+    });
+    return (<div ref={canvasWrapElement} style={{
+            ...{
+                position: "relative",
+                flex: 1,
+                display: "block",
+            },
+            ...(typeof props.style === "object" ? props.style : {}),
+        }} classList={{ [props.className || ""]: props.className !== undefined }}>
+      {pixiApp.canvas}
+    </div>);
+};
+//# sourceMappingURL=pixi-canvas.jsx.map

package/dist/pixi-canvas.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-canvas.jsx","sourceRoot":"","sources":["../src/pixi-canvas.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAI1B,EAAe,EAAE;IAChB,IAAI,iBAA6C,CAAC;IAElD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IACvC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC3C,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;IAC/B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;IAChC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAErC,kBAAkB,CAAC,GAAG,EAAE;QACtB,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;QAC9E,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,gBAAyC,CAAC;IAC9C,IAAI,cAA0C,CAAC;IAE/C,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,gBAAgB,GAAG,OAAO,CAAC,QAAQ,CAAC;QACpC,OAAO,CAAC,QAAQ,GAAG,iBAAiB,CAAC;QACrC,OAAO,CAAC,WAAW,EAAE,CAAC;QACtB,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,OAAO,CAAC,WAAW,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,QAAQ,GAAG,gBAAgB,CAAC;QACpC,cAAc,EAAE,UAAU,EAAE,CAAC;QAC7B,cAAc,GAAG,SAAS,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,CACvB,KAAK,CAAC,CAAC;YACL,GAAG;gBACD,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC;gBACP,OAAO,EAAE,OAAO;aACjB;YACD,GAAG,CAAC,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACxD,CAAC,CACF,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC,CAEtE;MAAA,CAAC,OAAO,CAAC,MAAM,CACjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/pixi-components.jsx

@@ -0,0 +1,214 @@
+import { AnimatedSprite as PixiAnimatedSprite, BitmapText as PixiBitmapText, Container as PixiContainer, Graphics as PixiGraphics, HTMLText as PixiHTMLText, MeshPlane as PixiMeshPlane, MeshRope as PixiMeshRope, MeshSimple as PixiMeshSimple, NineSliceSprite as PixiNineSliceSprite, ParticleContainer as PixiParticleContainer, PerspectiveMesh as PixiPerspectiveMesh, RenderContainer as PixiRenderContainer, RenderLayer as PixiRenderLayer, Sprite as PixiSprite, Text as PixiText, TilingSprite as PixiTilingSprite, } from "pixi.js";
+import { createRenderEffect, splitProps } from "solid-js";
+import { PIXI_EVENT_HANDLER_NAMES } from "./pixi-events";
+import { insert, setProp } from "./renderer";
+// Keys that are specific to Solid components and not Pixi props
+export 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.
+ */
+export const applyProps = (instance, props) => {
+    for (const key in props) {
+        if (key === "as")
+            continue;
+        if (key === "ref") {
+            createRenderEffect(() => {
+                // Solid converts the ref prop to a callback function
+                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]);
+            });
+        }
+    }
+};
+const 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;
+    };
+};
+const createLeafComponent = (PixiClass) => {
+    return (props) => {
+        return createContainerComponent(PixiClass)(props);
+    };
+};
+/**
+ * A SolidJS component that renders a PIXI.AnimatedSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/AnimatedSprite.example.tsx}
+ *
+ * {@link PixiAnimatedSprite}
+ *
+ */
+export const AnimatedSprite = createLeafComponent(PixiAnimatedSprite);
+/**
+ * A SolidJS component that renders a PIXI.BitmapText.
+ *
+ * **Example**
+ * {@includeCode ./examples/BitmapText.example.tsx}
+ *
+ * {@link PixiBitmapText}
+ *
+ */
+export const BitmapText = createLeafComponent(PixiBitmapText);
+/**
+ * A SolidJS component that renders a PIXI.Container.
+ *
+ * **Example**
+ * {@includeCode ./examples/Container.example.tsx}
+ *
+ */
+export const Container = createContainerComponent(PixiContainer);
+/**
+ * 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}
+ */
+export const Graphics = createLeafComponent(PixiGraphics);
+/**
+ * A SolidJS component that renders a PIXI.HTMLText.
+ *
+ * **Example**
+ * {@includeCode ./examples/HTMLText.example.tsx}
+ *
+ * {@link PixiHTMLText}
+ */
+export const HTMLText = createLeafComponent(PixiHTMLText);
+/**
+ * A SolidJS component that renders a PIXI.MeshPlane.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshPlane.example.tsx}
+ *
+ * {@link PixiMeshPlane}
+ */
+export const MeshPlane = createLeafComponent(PixiMeshPlane);
+/**
+ * A SolidJS component that renders a PIXI.MeshRope.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshRope.example.tsx}
+ *
+ * {@link PixiMeshRope}
+ */
+export const MeshRope = createLeafComponent(PixiMeshRope);
+/**
+ * A SolidJS component that renders a PIXI.MeshSimple.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshSimple.example.tsx}
+ *
+ * {@link PixiMeshSimple}
+ */
+export const MeshSimple = createLeafComponent(PixiMeshSimple);
+/**
+ * A SolidJS component that renders a PIXI.NineSliceSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/NineSliceSprite.example.tsx}
+ *
+ * {@link PixiNineSliceSprite}
+ */
+export const NineSliceSprite = createLeafComponent(PixiNineSliceSprite);
+/**
+ * A SolidJS component that renders a PIXI.ParticleContainer.
+ *
+ * **Example**
+ * {@includeCode ./examples/ParticleContainer.example.tsx}
+ *
+ * {@link PixiParticleContainer}
+ */
+export const ParticleContainer = createLeafComponent(PixiParticleContainer);
+/**
+ * A SolidJS component that renders a PIXI.PerspectiveMesh.
+ *
+ * **Example**
+ * {@includeCode ./examples/PerspectiveMesh.example.tsx}
+ *
+ * {@link PixiPerspectiveMesh}
+ */
+export const PerspectiveMesh = createLeafComponent(PixiPerspectiveMesh);
+/**
+ * A SolidJS component that renders a PIXI.RenderContainer.
+ *
+ * **Example**
+ * {@includeCode ./examples/RenderContainer.example.tsx}
+ *
+ * {@link PixiRenderContainer}
+ */
+export const RenderContainer = createContainerComponent(PixiRenderContainer);
+/**
+ * A SolidJS component that renders a PIXI.RenderLayer.
+ *
+ * **Example**
+ * {@includeCode ./examples/RenderLayer.example.tsx}
+ *
+ * {@link PixiRenderLayer}
+ */
+export const RenderLayer = createContainerComponent(PixiRenderLayer);
+/**
+ * A SolidJS component that renders a PIXI.Sprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/Sprite.example.tsx}
+ *
+ * {@link PixiSprite}
+ */
+export const Sprite = createLeafComponent(PixiSprite);
+/**
+ * A SolidJS component that renders a PIXI.Text.
+ *
+ * **Example**
+ * {@includeCode ./examples/Text.example.tsx}
+ *
+ * {@link PixiText}
+ */
+export const Text = createLeafComponent(PixiText);
+/**
+ * A SolidJS component that renders a PIXI.TilingSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/TilingSprite.example.tsx}
+ *
+ * {@link PixiTilingSprite}
+ */
+export const TilingSprite = createLeafComponent(PixiTilingSprite);
+// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);
+// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(
+//   PixiNineSliceGeometry
+// );
+// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);
+// export const PerspectivePlaneGeometry = createLeafComponent<
+//   PixiPerspectivePlaneGeometry,
+//   Pixi.PerspectivePlaneGeometryOptions
+// >(PixiPerspectivePlaneGeometry);
+// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);
+// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);
+// TODO: Don't need a component for the Culler. It needs to interact with the stage directly.
+// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);
+//# sourceMappingURL=pixi-components.jsx.map

package/dist/pixi-components.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-components.jsx","sourceRoot":"","sources":["../src/pixi-components.tsx"],"names":[],"mappings":"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"}

package/dist/pixi-events.js

@@ -0,0 +1,40 @@
+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",
+];
+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;
+//# sourceMappingURL=pixi-events.js.map

package/dist/pixi-events.js.map

@@ -0,0 +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"}

package/dist/pixi-stage.jsx

@@ -0,0 +1,30 @@
+import { createRenderEffect } from "solid-js";
+import { usePixiApp } from "./pixi-application";
+import { applyProps } from "./pixi-components";
+import { insert } from "./renderer";
+/**
+ * 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}
+ */
+export const PixiStage = (props) => {
+    const pixiApp = usePixiApp();
+    applyProps(pixiApp.stage, props);
+    createRenderEffect(() => {
+        insert(pixiApp.stage, () => props.children);
+    });
+    return <>{pixiApp.stage}</>;
+};
+//# sourceMappingURL=pixi-stage.jsx.map

package/dist/pixi-stage.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixi-stage.jsx","sourceRoot":"","sources":["../src/pixi-stage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAQpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEjC,kBAAkB,CAAC,GAAG,EAAE;QACtB,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,CAAC,CAAC"}

package/dist/renderer.jsx

@@ -0,0 +1,74 @@
+import { Text as PixiText } from "pixi.js";
+import { createRenderer } from "solid-js/universal";
+import { PIXI_EVENT_HANDLER_NAME_SET } from "./pixi-events";
+export const { effect, memo, createComponent, createElement, createTextNode, insertNode, insert, setProp, mergeProps, use, render, spread, } = createRenderer({
+    createElement(name) {
+        // This function is for lowercase string tags like `<container />`.
+        // To support tree-shaking, we require users to import components
+        // directly and use them with an uppercase name like `<Container />`,
+        // which does not call this function.
+        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 PixiText({ text: value });
+    },
+    replaceText(textNode, value) {
+        textNode.text = value;
+    },
+    setProperty(node, name, value, prev) {
+        // Check for event listeners and handle them appropriately.
+        if (PIXI_EVENT_HANDLER_NAME_SET.has(name)) {
+            // Remove the 'on' prefix to get the actual event 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) {
+        // RenderLayer uses `attach` instead of `addChild`.
+        if ("attach" in parent && typeof parent.attach === "function") {
+            parent.attach(node);
+            // Note: `attach` does not support anchoring, so we ignore the anchor.
+            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 PixiText;
+    },
+    removeNode(_, node) {
+        node.removeFromParent();
+        node.destroy({ children: true });
+    },
+    getParentNode(node) {
+        return node?.parent ?? undefined;
+    },
+    getFirstChild(node) {
+        return node.children?.[0];
+    },
+    getNextSibling(node) {
+        if (!node.parent)
+            return undefined;
+        const index = node.parent.children.indexOf(node);
+        // Return the next child if it exists, otherwise undefined.
+        return index > -1 ? node.parent.children[index + 1] : undefined;
+    },
+});
+//# sourceMappingURL=renderer.jsx.map

package/dist/renderer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.jsx","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"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"}

package/dist/types/examples/AnimatedSprite.example.d.ts

@@ -0,0 +1 @@
+export declare const MyAnimatedSpriteComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/BitmapText.example.d.ts

@@ -0,0 +1 @@
+export declare const MyBitmapTextComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/Container.example.d.ts

@@ -0,0 +1 @@
+export declare const MyContainerComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/Graphics.example.d.ts

@@ -0,0 +1 @@
+export declare const MyGraphicsComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/HTMLText.example.d.ts

@@ -0,0 +1 @@
+export declare const MyHTMLTextComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/MeshPlane.example.d.ts

@@ -0,0 +1 @@
+export declare const MyMeshPlaneComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/MeshRope.example.d.ts

@@ -0,0 +1 @@
+export declare const MyMeshRopeComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/MeshSimple.example.d.ts

@@ -0,0 +1 @@
+export declare const MyMeshSimpleComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/NineSliceSprite.example.d.ts

@@ -0,0 +1 @@
+export declare const MyNineSliceSpriteComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/ParticleContainer.example.d.ts

@@ -0,0 +1 @@
+export declare const MyParticleContainerComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/PerspectiveMesh.example.d.ts

@@ -0,0 +1 @@
+export declare const MyPerspectiveMeshComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/PixiApplication.example.d.ts

@@ -0,0 +1 @@
+export declare const PixiApplicationExample: () => import("solid-js").JSX.Element;

package/dist/types/examples/PixiCanvas.example.d.ts

@@ -0,0 +1 @@
+export declare const PixiCanvasExample: () => import("solid-js").JSX.Element;

package/dist/types/examples/PixiStage.example.d.ts

@@ -0,0 +1 @@
+export declare const PixiStageExample: () => import("solid-js").JSX.Element;

package/dist/types/examples/RenderContainer.example.d.ts

@@ -0,0 +1 @@
+export declare const MyRenderContainerComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/RenderLayer.example.d.ts

@@ -0,0 +1 @@
+export declare const MyRenderLayerComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/Sprite.example.d.ts

@@ -0,0 +1 @@
+export declare const MySpriteComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/Text.example.d.ts

@@ -0,0 +1 @@
+export declare const MyTextComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/TilingSprite.example.d.ts

@@ -0,0 +1 @@
+export declare const MyTilingSpriteComponent: () => import("solid-js").JSX.Element;

package/dist/types/examples/useTick.example.d.ts

@@ -0,0 +1 @@
+export declare const UseTickExample: () => import("solid-js").JSX.Element;

package/dist/types/examples/useTicker.example.d.ts

@@ -0,0 +1 @@
+export declare const MyComponent: () => import("solid-js").JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+export type { PixiApplicationProps } from "./pixi-application";
+export { PixiApplication, usePixiApp } from "./pixi-application";
+export { PixiCanvas } from "./pixi-canvas";
+export type { ContainerProps, LeafProps } from "./pixi-components";
+export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
+export type { PixiEventHandlerMap } from "./pixi-events";
+export { PIXI_EVENT_NAMES } from "./pixi-events";
+export type { PixiStageProps } from "./pixi-stage";
+export { PixiStage } from "./pixi-stage";
+export { useTick, useTicker } from "./use-ticker";

package/dist/types/pixi-application.d.ts

@@ -0,0 +1,45 @@
+import type { ApplicationOptions, Container } from "pixi.js";
+import { Application } from "pixi.js";
+import type { JSX, Ref } from "solid-js";
+/**
+ * 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} />;
+ * };
+ * ```
+ */
+export declare const usePixiApp: () => Application<import("pixi.js").Renderer>;
+/**
+ * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions
+ * to allow passing configuration directly to the Pixi.js Application constructor,
+ * but omits properties that are handled by the component itself.
+ */
+export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" | "resizeTo" | "view">> & {
+    ref?: Ref<Container>;
+    children?: JSX.Element;
+};
+/**
+ * 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}
+ */
+export declare const PixiApplication: (props: PixiApplicationProps) => JSX.Element;

package/dist/types/pixi-canvas.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from "solid-js";
+/**
+ * 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}
+ *
+ */
+export declare const PixiCanvas: (props: {
+    children: JSX.Element;
+    style?: JSX.CSSProperties | undefined;
+    className?: string;
+}) => JSX.Element;