pixi-solid 0.0.1

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

@@ -0,0 +1,182 @@
+import type * as Pixi from "pixi.js";
+import { Container as PixiContainer } from "pixi.js";
+import type { JSX, Ref } from "solid-js";
+import type { PixiEventHandlerMap } from "./pixi-events";
+/**
+ * Prop definition for components that CAN have children
+ */
+export type ContainerProps<Component> = PixiEventHandlerMap & {
+    ref?: Ref<Component>;
+    as?: Component;
+    children?: JSX.Element;
+};
+/**
+ * Prop definition for components that CANNOT have children
+ */
+export type LeafProps<Component> = Omit<ContainerProps<Component>, "children">;
+export declare const SOLID_PROP_KEYS: readonly ["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 declare const applyProps: <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType) => void;
+/**
+ * A SolidJS component that renders a PIXI.AnimatedSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/AnimatedSprite.example.tsx}
+ *
+ * {@link PixiAnimatedSprite}
+ *
+ */
+export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & LeafProps<Pixi.AnimatedSprite>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.BitmapText.
+ *
+ * **Example**
+ * {@includeCode ./examples/BitmapText.example.tsx}
+ *
+ * {@link PixiBitmapText}
+ *
+ */
+export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, Pixi.TextStyleOptions>, "children"> & LeafProps<Pixi.BitmapText>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.Container.
+ *
+ * **Example**
+ * {@includeCode ./examples/Container.example.tsx}
+ *
+ */
+export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.ContainerChild>, "children"> & PixiEventHandlerMap & {
+    ref?: Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
+    as?: Pixi.Container<Pixi.ContainerChild> | undefined;
+    children?: JSX.Element;
+}) => JSX.Element;
+/**
+ * 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 declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & LeafProps<Pixi.Graphics>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.HTMLText.
+ *
+ * **Example**
+ * {@includeCode ./examples/HTMLText.example.tsx}
+ *
+ * {@link PixiHTMLText}
+ */
+export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & LeafProps<Pixi.HTMLText>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.MeshPlane.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshPlane.example.tsx}
+ *
+ * {@link PixiMeshPlane}
+ */
+export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & LeafProps<Pixi.MeshPlane>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.MeshRope.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshRope.example.tsx}
+ *
+ * {@link PixiMeshRope}
+ */
+export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & LeafProps<Pixi.MeshRope>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.MeshSimple.
+ *
+ * **Example**
+ * {@includeCode ./examples/MeshSimple.example.tsx}
+ *
+ * {@link PixiMeshSimple}
+ */
+export declare const MeshSimple: (props: Omit<Pixi.SimpleMeshOptions, "children"> & LeafProps<Pixi.MeshSimple>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.NineSliceSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/NineSliceSprite.example.tsx}
+ *
+ * {@link PixiNineSliceSprite}
+ */
+export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & LeafProps<Pixi.NineSliceSprite>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.ParticleContainer.
+ *
+ * **Example**
+ * {@includeCode ./examples/ParticleContainer.example.tsx}
+ *
+ * {@link PixiParticleContainer}
+ */
+export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions, "children"> & LeafProps<Pixi.ParticleContainer>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.PerspectiveMesh.
+ *
+ * **Example**
+ * {@includeCode ./examples/PerspectiveMesh.example.tsx}
+ *
+ * {@link PixiPerspectiveMesh}
+ */
+export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & LeafProps<Pixi.PerspectiveMesh>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.RenderContainer.
+ *
+ * **Example**
+ * {@includeCode ./examples/RenderContainer.example.tsx}
+ *
+ * {@link PixiRenderContainer}
+ */
+export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions, "children"> & PixiEventHandlerMap & {
+    ref?: Ref<Pixi.RenderContainer> | undefined;
+    as?: Pixi.RenderContainer | undefined;
+    children?: JSX.Element;
+}) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.RenderLayer.
+ *
+ * **Example**
+ * {@includeCode ./examples/RenderLayer.example.tsx}
+ *
+ * {@link PixiRenderLayer}
+ */
+export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "children"> & PixiEventHandlerMap & {
+    ref?: Ref<Pixi.RenderLayer> | undefined;
+    as?: Pixi.RenderLayer | undefined;
+    children?: JSX.Element;
+}) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.Sprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/Sprite.example.tsx}
+ *
+ * {@link PixiSprite}
+ */
+export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & LeafProps<Pixi.Sprite>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.Text.
+ *
+ * **Example**
+ * {@includeCode ./examples/Text.example.tsx}
+ *
+ * {@link PixiText}
+ */
+export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & LeafProps<Pixi.Text>) => JSX.Element;
+/**
+ * A SolidJS component that renders a PIXI.TilingSprite.
+ *
+ * **Example**
+ * {@includeCode ./examples/TilingSprite.example.tsx}
+ *
+ * {@link PixiTilingSprite}
+ */
+export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & LeafProps<Pixi.TilingSprite>) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import type { AllFederatedEventMap } from "pixi.js";
+export declare const PIXI_EVENT_NAMES: (keyof AllFederatedEventMap)[];
+export declare const PIXI_EVENT_HANDLER_NAMES: ("onclick" | "onmousedown" | "onmouseenter" | "onmouseleave" | "onmousemove" | "onmouseout" | "onmouseover" | "onmouseup" | "onmouseupoutside" | "onpointercancel" | "onpointerdown" | "onpointerenter" | "onpointerleave" | "onpointermove" | "onpointerout" | "onpointerover" | "onpointertap" | "onpointerup" | "onpointerupoutside" | "onrightclick" | "onrightdown" | "onrightup" | "onrightupoutside" | "ontap" | "ontouchcancel" | "ontouchend" | "ontouchendoutside" | "ontouchmove" | "ontouchstart" | "onwheel" | "onglobalmousemove" | "onglobalpointermove" | "onglobaltouchmove")[];
+export type PixiEventHandlerMap = {
+    [K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?: (event: AllFederatedEventMap[K]) => void;
+};
+export declare const PIXI_EVENT_HANDLER_NAME_SET: Readonly<Set<(typeof PIXI_EVENT_HANDLER_NAMES)[number]>>;

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

@@ -0,0 +1,25 @@
+import type { Container, ContainerOptions } from "pixi.js";
+import type { JSX, Ref } from "solid-js";
+import type { PixiEventHandlerMap } from "./pixi-events";
+export type PixiStageProps = PixiEventHandlerMap & Omit<ContainerOptions, "children"> & {
+    ref?: Ref<Container>;
+    children?: JSX.Element;
+};
+/**
+ * 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 declare const PixiStage: (props: PixiStageProps) => JSX.Element;

package/dist/types/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { Container as PixiContainer } from "pixi.js";
+export declare const effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => PixiContainer<import("pixi.js").ContainerChild>, props: T) => PixiContainer<import("pixi.js").ContainerChild>, createElement: (tag: string) => PixiContainer<import("pixi.js").ContainerChild>, createTextNode: (value: string) => PixiContainer<import("pixi.js").ContainerChild>, insertNode: (parent: PixiContainer<import("pixi.js").ContainerChild>, node: PixiContainer<import("pixi.js").ContainerChild>, anchor?: PixiContainer<import("pixi.js").ContainerChild> | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => PixiContainer<import("pixi.js").ContainerChild>, setProp: <T>(node: PixiContainer<import("pixi.js").ContainerChild>, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: PixiContainer<import("pixi.js").ContainerChild>, arg: A) => T, element: PixiContainer<import("pixi.js").ContainerChild>, arg: A) => T, render: (code: () => PixiContainer<import("pixi.js").ContainerChild>, node: PixiContainer<import("pixi.js").ContainerChild>) => () => void, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void;

package/dist/types/use-ticker.d.ts

@@ -0,0 +1,31 @@
+import type { Ticker, TickerCallback } from "pixi.js";
+/**
+ * useTicker
+ *
+ * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
+ * This hook must be called from a component that is a descendant of `PixiApplication`.
+ *
+ * @returns The PIXI.Ticker instance from the application context.
+ * @throws Will throw an error if used outside of a `PixiApplication` context provider.
+ *
+ * **Example**
+ * {@includeCode ./examples/useTicker.example.tsx}
+ */
+export declare const useTicker: () => Ticker;
+/**
+ * useTick
+ *
+ * A custom SolidJS hook that registers a callback function to be executed on every frame
+ * of the PIXI.Application's ticker. The callback is automatically removed when the
+ * component or hook's owning computation is cleaned up.
+ *
+ * This hook must be called from a component that is a descendant of `PixiApplication`.
+ *
+ * @param tickerCallback - The function to call on each ticker update. It receives
+ *   the `PIXI.Ticker` instance as its argument.
+ *
+ * **Example**
+ * @example {@link ./examples/useTick.example.tsx}
+ * {@includeCode ./examples/useTick.example.tsx}
+ */
+export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;

package/dist/use-ticker.jsx

@@ -0,0 +1,39 @@
+import { onCleanup } from "solid-js";
+import { usePixiApp } from "./pixi-application";
+/**
+ * useTicker
+ *
+ * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
+ * This hook must be called from a component that is a descendant of `PixiApplication`.
+ *
+ * @returns The PIXI.Ticker instance from the application context.
+ * @throws Will throw an error if used outside of a `PixiApplication` context provider.
+ *
+ * **Example**
+ * {@includeCode ./examples/useTicker.example.tsx}
+ */
+export const useTicker = () => usePixiApp().ticker;
+/**
+ * useTick
+ *
+ * A custom SolidJS hook that registers a callback function to be executed on every frame
+ * of the PIXI.Application's ticker. The callback is automatically removed when the
+ * component or hook's owning computation is cleaned up.
+ *
+ * This hook must be called from a component that is a descendant of `PixiApplication`.
+ *
+ * @param tickerCallback - The function to call on each ticker update. It receives
+ *   the `PIXI.Ticker` instance as its argument.
+ *
+ * **Example**
+ * @example {@link ./examples/useTick.example.tsx}
+ * {@includeCode ./examples/useTick.example.tsx}
+ */
+export const useTick = (tickerCallback) => {
+    const { ticker } = usePixiApp();
+    ticker.add(tickerCallback);
+    onCleanup(() => {
+        ticker.remove(tickerCallback);
+    });
+};
+//# sourceMappingURL=use-ticker.jsx.map

package/dist/use-ticker.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ticker.jsx","sourceRoot":"","sources":["../src/use-ticker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,cAAsC,EAAQ,EAAE;IACtE,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;IAEhC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "pixi-solid",
+  "version": "0.0.1",
+  "description": "A library to write PixiJS applications with SolidJS",
+  "author": "Luke Thompson",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LukeCarlThompson/pixi-solid"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "rm -rf dist",
+    "build": "tsc --project tsconfig.build.json && npm run build:docs",
+    "build:docs": "typedoc --options typedoc.config.js",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "pixi.js": "^8.14.3",
+    "solid-js": "^1.9.10"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.8",
+    "@types/node": "^24.10.1",
+    "jsdom": "27.2.0",
+    "sass-embedded": "1.93.3",
+    "typedoc": "0.28.15",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "4.0.14"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}