pixi-solid 0.0.16 → 0.0.19

package/README.md

@@ -17,7 +17,7 @@ By using `pixi-solid`, you can write your PixiJS applications declaratively usin
 It is intended to provide nice abstractions for encapsulating useful functionality and state management to represent the core logic of your application.
 
 In some cases when creating high performance applications like games which may have lots of fast changing state and logic every frame it may be beneficial to escape from SolidJS and use Pixi imperatively.
-In these cases you may want to create an imperative component and update it every frame with the `useTick` method and then wrap it inside a `<Container />` component as an easy way of packaging it.
+In these cases you may want to create an imperative component and update it every frame with the `onTick` method and then wrap it inside a `<Container />` component as an easy way of packaging it.
 
 ## Getting Started
 
@@ -41,7 +41,7 @@ Here's a simple example to get you started. This will render a "Hello World" tex
 
 ```jsx
 import { render } from "solid-js/web";
-import { PixiApplication, PixiStage, usePixiApp } from "pixi-solid";
+import { PixiApplication, PixiStage, getPixiApp } from "pixi-solid";
 import { Text, FederatedPointerEvent } from "pixi.js";
 import { createSignal, onMount } from "solid-js";
 
@@ -93,15 +93,15 @@ This component creates a `div` and mounts the PixiJS canvas into it. It automati
 
 This component gives us a reference to the Pixi stage which is the top level container of your scene. It is useful for listening to global events.
 
-### `usePixiApp()`
+### `getPixiApp()`
 
 A hook to get access to the PixiJS `Application` instance.
 
-### `useTicker()`
+### `getTicker()`
 
 A hook to get access to the Pixi ticker instance.
 
-### `useTick()`
+### `onTick()`
 
 A hook to auto subscribe and unsubscribe to the ticker in sync with the components lifecycle.
 Any function passed in here will be called every frame whilst the component is mounted.

package/dist/index.js

@@ -1,9 +1,9 @@
-import { PixiApplication, TickerProvider, useDelay, usePixiApp, useTick, useTicker } from "./pixi-application.js";
+import { onResize } from "./on-resize.js";
+import { PixiApplication, TickerProvider, delay, getPixiApp, getTicker, onTick } from "./pixi-application.js";
 import { PixiCanvas } from "./pixi-canvas.js";
-import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./pixi-components.js";
+import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./pixi-components.js";
 import { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
 import { PixiStage } from "./pixi-stage.js";
-import { useResize } from "./use-resize.js";
 export {
   AnimatedSprite,
   BitmapText,
@@ -12,7 +12,6 @@ export {
   HTMLText,
   MeshPlane,
   MeshRope,
-  MeshSimple,
   NineSliceSprite,
   PIXI_EVENT_NAMES,
   PIXI_SOLID_EVENT_HANDLER_NAMES,
@@ -27,10 +26,10 @@ export {
   Text,
   TickerProvider,
   TilingSprite,
-  useDelay,
-  usePixiApp,
-  useResize,
-  useTick,
-  useTicker
+  delay,
+  getPixiApp,
+  getTicker,
+  onResize,
+  onTick
 };
 //# sourceMappingURL=index.js.map

package/dist/{use-resize.js → on-resize.js}

@@ -1,7 +1,7 @@
 import { onCleanup } from "solid-js";
-import { usePixiApp } from "./pixi-application.js";
-const useResize = (resizeCallback) => {
-  const app = usePixiApp();
+import { getPixiApp } from "./pixi-application.js";
+const onResize = (resizeCallback) => {
+  const app = getPixiApp();
   const handleResize = () => {
     resizeCallback(app.renderer.screen);
   };
@@ -12,6 +12,6 @@ const useResize = (resizeCallback) => {
   });
 };
 export {
-  useResize
+  onResize
 };
-//# sourceMappingURL=use-resize.js.map
+//# sourceMappingURL=on-resize.js.map

package/dist/on-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n *\n * @param resizeCallback A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * Because we listen for the renderer's \"resize\" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  const app = getPixiApp();\n\n  const handleResize = () => {\n    resizeCallback(app.renderer.screen);\n  };\n\n  handleResize();\n\n  app.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    app.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"names":[],"mappings":";;AAWO,MAAM,WAAW,CAAC,mBAA2D;AAClF,QAAM,MAAM,WAAA;AAEZ,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI,SAAS,MAAM;AAAA,EACpC;AAEA,eAAA;AAEA,MAAI,SAAS,YAAY,UAAU,YAAY;AAE/C,YAAU,MAAM;AACd,QAAI,SAAS,eAAe,UAAU,YAAY;AAAA,EACpD,CAAC;AACH;"}

package/dist/pixi-application.js

@@ -1,12 +1,12 @@
 import { createComponent } from "solid-js/web";
-import { Application } from "pixi.js";
+import { Ticker, Application } from "pixi.js";
 import { createContext, useContext, splitProps, createResource, createEffect, onCleanup, Show } from "solid-js";
 const PixiAppContext = createContext();
-const TickerContext = createContext();
-const usePixiApp = () => {
+const TickerContext = createContext(Ticker.shared);
+const getPixiApp = () => {
   const app = useContext(PixiAppContext);
   if (!app) {
-    throw new Error("usePixiApp must be used within a PixiApplication");
+    throw new Error("getPixiApp must be used within a PixiApplication");
   }
   return app;
 };
@@ -68,27 +68,27 @@ const TickerProvider = (props) => {
     }
   });
 };
-const useTicker = () => {
+const getTicker = () => {
   const ticker = useContext(TickerContext);
   if (!ticker) {
-    throw new Error("useTicker must be used within a PixiApplication or a TickerProvider");
+    throw new Error("getTicker must be used within a PixiApplication or a TickerProvider");
   }
   return ticker;
 };
-const useTick = (tickerCallback) => {
+const onTick = (tickerCallback) => {
   const ticker = useContext(TickerContext);
   if (!ticker) {
-    throw new Error("useTick must be used within a PixiApplication or a TickerProvider");
+    throw new Error("onTick must be used within a PixiApplication or a TickerProvider");
   }
   ticker.add(tickerCallback);
   onCleanup(() => {
     ticker.remove(tickerCallback);
   });
 };
-const useDelay = async (delayMs, callback) => {
+const delay = async (delayMs, callback) => {
   const ticker = useContext(TickerContext);
   if (!ticker) {
-    throw new Error("useDelay must be used within a PixiApplication or a TickerProvider");
+    throw new Error("delay must be used within a PixiApplication or a TickerProvider");
   }
   let timeDelayed = 0;
   let resolvePromise;
@@ -108,9 +108,9 @@ const useDelay = async (delayMs, callback) => {
 export {
   PixiApplication,
   TickerProvider,
-  useDelay,
-  usePixiApp,
-  useTick,
-  useTicker
+  delay,
+  getPixiApp,
+  getTicker,
+  onTick
 };
 //# sourceMappingURL=pixi-application.js.map

package/dist/pixi-application.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport { createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\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 */\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<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\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 */\nexport const PixiApplication = (props: PixiApplicationProps) => {\n  const [, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n\n  // TODO: Split props into initialisation props and runtime props\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      onCleanup(() => {\n        app.destroy(true, { children: true });\n      });\n    }\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => (\n        <PixiAppContext.Provider value={app()}>\n          <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n        </PixiAppContext.Provider>\n      )}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Application.\n * It provides context for the `useTick` and `useTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.\n *\n * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n\n/**\n * useTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const useTicker = (): Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"useTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n\n/**\n * useTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `PIXI.Ticker` instance as its argument.\n *\n */\nexport const useTick = (tickerCallback: TickerCallback<Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"useTick must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  ticker.add(tickerCallback);\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n\n/**\n * Delay until a given number of milliseconds has passed on the application ticker.\n *\n * It is guaranteed to be in sync with the ticker and uses accumulated deltaMs not an external time measurement.\n *\n * Simply await for it to resolve if in an async context or pass in a callback function.\n * It's not recommended to use both techniques at once.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - Optional callback function that will fire when the delayMs time has passed.\n *\n * @returns A Promise that resolves once the ticker's time has advanced by `delayMs`.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not resolve or fire the callback if the ticker is paused or stopped.\n *\n */\nexport const useDelay = async (delayMs: number, callback?: () => void): Promise<void> => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"useDelay must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  let timeDelayed = 0;\n\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n"],"names":["PixiAppContext","createContext","TickerContext","usePixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","appResource","createResource","Application","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","createEffect","ref","ticker","autoStart","start","onCleanup","destroy","children","_$createComponent","Show","when","Provider","value","TickerProvider","useTicker","useTick","tickerCallback","add","remove","useDelay","delayMs","callback","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS"],"mappings":"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"}
+{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, TickerCallback } from \"pixi.js\";\nimport { Application, Ticker } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport { createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>(Ticker.shared);\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 */\nexport const getPixiApp = () => {\n  const app = useContext(PixiAppContext);\n  if (!app) {\n    throw new Error(\"getPixiApp 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<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\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 `getPixiApp`, `onTick`, and `getTicker`.\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 */\nexport const PixiApplication = (props: PixiApplicationProps) => {\n  const [, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n\n  // TODO: Split props into initialisation props and runtime props\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      onCleanup(() => {\n        app.destroy(true, { children: true });\n      });\n    }\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => (\n        <PixiAppContext.Provider value={app()}>\n          <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n        </PixiAppContext.Provider>\n      )}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Application.\n * It provides context for the `onTick` and `getTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.\n *\n * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `PIXI.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: TickerCallback<Ticker>): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"onTick must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  ticker.add(tickerCallback);\n  onCleanup(() => {\n    ticker.remove(tickerCallback);\n  });\n};\n\n/**\n * Delay until a given number of milliseconds has passed on the shared ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * Simply await for it to resolve if in an async context or pass in a callback function.\n * It's not recommended to use both techniques at once.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - Optional callback function that will fire when the delayMs time has passed.\n *\n * @returns A Promise that resolves once the ticker's time has advanced by `delayMs`.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not resolve or fire the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = async (delayMs: number, callback?: () => void): Promise<void> => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\"delay must be used within a PixiApplication or a TickerProvider\");\n  }\n\n  let timeDelayed = 0;\n\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n"],"names":["PixiAppContext","createContext","TickerContext","Ticker","shared","getPixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","appResource","createResource","Application","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","createEffect","ref","ticker","autoStart","start","onCleanup","destroy","children","_$createComponent","Show","when","Provider","value","TickerProvider","getTicker","onTick","tickerCallback","add","remove","delay","delayMs","callback","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS"],"mappings":"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"}

package/dist/pixi-canvas.js

@@ -1,10 +1,10 @@
 import { template, insert, effect, style, className, use } from "solid-js/web";
 import { createRenderEffect, onMount, onCleanup } from "solid-js";
-import { usePixiApp } from "./pixi-application.js";
+import { getPixiApp } from "./pixi-application.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative>`);
 const PixiCanvas = (props) => {
   let canvasWrapElement;
-  const pixiApp = usePixiApp();
+  const pixiApp = getPixiApp();
   pixiApp.canvas.style.display = "block";
   pixiApp.canvas.style.position = "absolute";
   pixiApp.canvas.style.top = "0";

package/dist/pixi-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-canvas.js","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` component.\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.\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        position: \"relative\",\n        ...(typeof props.style === \"object\" ? props.style : {}),\n      }}\n      class={props.className}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","usePixiApp","canvas","style","display","position","top","left","width","height","createRenderEffect","children","undefined","Error","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;AAiBO,MAAMA,aAAaA,CAACC,UAIR;AACjB,MAAIC;AAEJ,QAAMC,UAAUC,WAAAA;AAChBD,UAAQE,OAAOC,MAAMC,UAAU;AAC/BJ,UAAQE,OAAOC,MAAME,WAAW;AAChCL,UAAQE,OAAOC,MAAMG,MAAM;AAC3BN,UAAQE,OAAOC,MAAMI,OAAO;AAC5BP,UAAQE,OAAOC,MAAMK,QAAQ;AAC7BR,UAAQE,OAAOC,MAAMM,SAAS;AAE9BC,qBAAmB,MAAM;AACvB,QAAIZ,MAAMa,aAAaC,QAAW;AAChC,YAAM,IAAIC,MAAM,0DAA0D;AAAA,IAC5E;AAAA,EACF,CAAC;AAED,MAAIC;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACjB,kBAAmB;AACxBe,uBAAmBd,QAAQiB;AAC3BjB,YAAQiB,WAAWlB;AACnBC,YAAQkB,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCnB,cAAQkB,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQrB,iBAAiB;AAAA,EAC1C,CAAC;AAEDsB,YAAU,MAAM;AACd,QAAI,CAACtB,kBAAmB;AACxBC,YAAQiB,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBH;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAW,OAAAC,OAAAA;AAAA,QAAAC,QAES1B;AAAiB,WAAA0B,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBxB,oBAAiBwB;AAAAI,WAAAJ,MAAA,MAOrBvB,QAAQE,MAAM;AAAA0B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANR;AAAA,QAEL,GAAI,OAAOhC,MAAMK,UAAU,WAAWL,MAAMK,QAAQ,CAAA;AAAA,MAAC,GACtD4B,OACMjC,MAAMkC;AAASH,UAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,CAAA;AAAAF,eAAAF,IAAAM,KAAAC,UAAAb,MAAAM,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAArB;AAAAA,MAAAuB,GAAAvB;AAAAA,IAAAA,CAAA;AAAA,WAAAW;AAAAA,EAAA,GAAA;AAK5B;"}
+{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { createRenderEffect, onCleanup, onMount } from \"solid-js\";\nimport { getPixiApp } 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` component.\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.\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 = getPixiApp();\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        position: \"relative\",\n        ...(typeof props.style === \"object\" ? props.style : {}),\n      }}\n      class={props.className}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","canvas","style","display","position","top","left","width","height","createRenderEffect","children","undefined","Error","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;AAiBO,MAAMA,aAAaA,CAACC,UAIR;AACjB,MAAIC;AAEJ,QAAMC,UAAUC,WAAAA;AAChBD,UAAQE,OAAOC,MAAMC,UAAU;AAC/BJ,UAAQE,OAAOC,MAAME,WAAW;AAChCL,UAAQE,OAAOC,MAAMG,MAAM;AAC3BN,UAAQE,OAAOC,MAAMI,OAAO;AAC5BP,UAAQE,OAAOC,MAAMK,QAAQ;AAC7BR,UAAQE,OAAOC,MAAMM,SAAS;AAE9BC,qBAAmB,MAAM;AACvB,QAAIZ,MAAMa,aAAaC,QAAW;AAChC,YAAM,IAAIC,MAAM,0DAA0D;AAAA,IAC5E;AAAA,EACF,CAAC;AAED,MAAIC;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACjB,kBAAmB;AACxBe,uBAAmBd,QAAQiB;AAC3BjB,YAAQiB,WAAWlB;AACnBC,YAAQkB,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCnB,cAAQkB,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQrB,iBAAiB;AAAA,EAC1C,CAAC;AAEDsB,YAAU,MAAM;AACd,QAAI,CAACtB,kBAAmB;AACxBC,YAAQiB,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBH;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAW,OAAAC,OAAAA;AAAA,QAAAC,QAES1B;AAAiB,WAAA0B,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBxB,oBAAiBwB;AAAAI,WAAAJ,MAAA,MAOrBvB,QAAQE,MAAM;AAAA0B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANR;AAAA,QAEL,GAAI,OAAOhC,MAAMK,UAAU,WAAWL,MAAMK,QAAQ,CAAA;AAAA,MAAC,GACtD4B,OACMjC,MAAMkC;AAASH,UAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,CAAA;AAAAF,eAAAF,IAAAM,KAAAC,UAAAb,MAAAM,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAArB;AAAAA,MAAAuB,GAAAvB;AAAAA,IAAAA,CAAA;AAAA,WAAAW;AAAAA,EAAA,GAAA;AAK5B;"}

package/dist/pixi-components.js

@@ -1,4 +1,4 @@
-import { RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, AnimatedSprite as AnimatedSprite$1, BitmapText as BitmapText$1, Container as Container$1, Graphics as Graphics$1, HTMLText as HTMLText$1, MeshPlane as MeshPlane$1, MeshRope as MeshRope$1, MeshSimple as MeshSimple$1, NineSliceSprite as NineSliceSprite$1, ParticleContainer as ParticleContainer$1, PerspectiveMesh as PerspectiveMesh$1, Sprite as Sprite$1, Text as Text$1, TilingSprite as TilingSprite$1 } from "pixi.js";
+import { RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, AnimatedSprite as AnimatedSprite$1, BitmapText as BitmapText$1, Container as Container$1, Graphics as Graphics$1, HTMLText as HTMLText$1, MeshPlane as MeshPlane$1, MeshRope as MeshRope$1, NineSliceSprite as NineSliceSprite$1, ParticleContainer as ParticleContainer$1, PerspectiveMesh as PerspectiveMesh$1, Sprite as Sprite$1, Text as Text$1, TilingSprite as TilingSprite$1 } from "pixi.js";
 import { splitProps, createRenderEffect, on } from "solid-js";
 import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
 import { insert, setProp } from "./renderer.js";
@@ -51,7 +51,6 @@ const Graphics = createLeafComponent(Graphics$1);
 const HTMLText = createLeafComponent(HTMLText$1);
 const MeshPlane = createLeafComponent(MeshPlane$1);
 const MeshRope = createLeafComponent(MeshRope$1);
-const MeshSimple = createLeafComponent(MeshSimple$1);
 const NineSliceSprite = createLeafComponent(NineSliceSprite$1);
 const ParticleContainer = createLeafComponent(ParticleContainer$1);
 const PerspectiveMesh = createLeafComponent(PerspectiveMesh$1);
@@ -68,7 +67,6 @@ export {
   HTMLText,
   MeshPlane,
   MeshRope,
-  MeshSimple,
   NineSliceSprite,
   ParticleContainer,
   PerspectiveMesh,

package/dist/pixi-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-components.js","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, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_SOLID_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 * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      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 if (defer) {\n      createRenderEffect(\n        on(\n          () => props[key as keyof typeof props],\n          () => {\n            setProp(instance, key, props[key as keyof typeof props]);\n          },\n          { defer }\n        )\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>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps, true);\n    applyProps(instance, runtimeProps);\n\n    return instance as InstanceType & 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>): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, ConstructorParameters<typeof PixiBitmapText>>(\n  PixiBitmapText\n);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(PixiContainer);\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 */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshSimple`.\n */\nexport const MeshSimple = createLeafComponent<PixiMeshSimple, Pixi.SimpleMeshOptions>(PixiMeshSimple);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n  PixiNineSliceSprite\n);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n  PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n  PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n  PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(PixiTilingSprite);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["SOLID_PROP_KEYS","applyProps","instance","props","defer","key","createRenderEffect","Error","insert","children","on","setProp","createContainerComponent","PixiClass","runtimeProps","initialisationProps","splitProps","PIXI_SOLID_EVENT_HANDLER_NAMES","as","createLeafComponent","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"],"mappings":";;;;AAyCO,MAAMA,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAMC,aAAa,CACxBC,UACAC,OACAC,UACG;AACH,aAAWC,OAAOF,OAAO;AACvB,QAAIE,QAAQ,KAAM;AAElB,QAAIA,QAAQ,OAAO;AACjBC,yBAAmB,MAAM;AAEtBH,cAAME,GAAG,EAAoCH,QAAQ;AAAA,MACxD,CAAC;AAAA,IACH,WAAWG,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAcH,WAAW;AAC7B,cAAM,IAAIK,MAAM,gDAAgD;AAAA,MAClE;AACAD,yBAAmB,MAAM;AACvBE,eAAON,UAAU,MAAMC,MAAMM,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH,WAAWL,OAAO;AAChBE,yBACEI,GACE,MAAMP,MAAME,GAAyB,GACrC,MAAM;AACJM,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,GACA;AAAA,QAAED;AAAAA,MAAAA,CACJ,CACF;AAAA,IACF,OAAO;AACLE,yBAAmB,MAAM;AACvBK,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAMO,2BAA2B,CAC/BC,cACG;AACH,SAAO,CAACV,UAAoG;AAC1G,UAAM,CAACW,cAAcC,mBAAmB,IAAIC,WAAWb,OAAO,CAC5D,GAAGH,iBACH,GAAGiB,8BAA8B,CAClC;AAED,UAAMf,WAAWC,MAAMe,MAAM,IAAIL,UAAUE,mBAA0B;AAErEd,eAAWC,UAAUa,qBAAqB,IAAI;AAC9Cd,eAAWC,UAAUY,YAAY;AAEjC,WAAOZ;AAAAA,EACT;AACF;AAEA,MAAMiB,sBAAsB,CAC1BN,cACG;AACH,SAAO,CAACV,UAA+F;AACrG,WAAOS,yBAAoDC,SAAS,EAAEV,KAAK;AAAA,EAC7E;AACF;AAKO,MAAMiB,iBAAiBD,oBAAoEE,gBAAkB;AAI7G,MAAMC,aAAaH,oBACxBI,YACF;AAIO,MAAMC,YAAYZ,yBAA+Da,WAAa;AAK9F,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,aAAaf,oBAA4DgB,YAAc;AAK7F,MAAMC,kBAAkBjB,oBAC7BkB,iBACF;AAOO,MAAMC,oBAAoBnB,oBAC/BoB,mBACF;AAKO,MAAMC,kBAAkBrB,oBAC7BsB,iBACF;AAKO,MAAMC,kBAAkB9B,yBAC7B+B,iBACF;AAKO,MAAMC,cAAchC,yBAAmEiC,aAAe;AAKtG,MAAMC,SAAS3B,oBAAoD4B,QAAU;AAI7E,MAAMC,OAAO7B,oBAAsD8B,MAAQ;AAK3E,MAAMC,eAAe/B,oBAAgEgC,cAAgB;"}
+{"version":3,"file":"pixi-components.js","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  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, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_SOLID_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 * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(\n  instance: InstanceType,\n  props: OptionsType,\n  defer?: boolean\n) => {\n  for (const key in props) {\n    if (key === \"as\") continue;\n\n    if (key === \"ref\") {\n      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 if (defer) {\n      createRenderEffect(\n        on(\n          () => props[key as keyof typeof props],\n          () => {\n            setProp(instance, key, props[key as keyof typeof props]);\n          },\n          { defer }\n        )\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>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\n      ...SOLID_PROP_KEYS,\n      ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    applyProps(instance, initialisationProps, true);\n    applyProps(instance, runtimeProps);\n\n    return instance as InstanceType & 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>): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(PixiContainer);\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 */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n  PixiNineSliceSprite\n);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n  PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n  PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n  PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(PixiTilingSprite);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n//   PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n//   PixiPerspectivePlaneGeometry,\n//   Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["SOLID_PROP_KEYS","applyProps","instance","props","defer","key","createRenderEffect","Error","insert","children","on","setProp","createContainerComponent","PixiClass","runtimeProps","initialisationProps","splitProps","PIXI_SOLID_EVENT_HANDLER_NAMES","as","createLeafComponent","AnimatedSprite","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;;;AAwCO,MAAMA,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAMC,aAAa,CACxBC,UACAC,OACAC,UACG;AACH,aAAWC,OAAOF,OAAO;AACvB,QAAIE,QAAQ,KAAM;AAElB,QAAIA,QAAQ,OAAO;AACjBC,yBAAmB,MAAM;AAEtBH,cAAME,GAAG,EAAoCH,QAAQ;AAAA,MACxD,CAAC;AAAA,IACH,WAAWG,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAcH,WAAW;AAC7B,cAAM,IAAIK,MAAM,gDAAgD;AAAA,MAClE;AACAD,yBAAmB,MAAM;AACvBE,eAAON,UAAU,MAAMC,MAAMM,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH,WAAWL,OAAO;AAChBE,yBACEI,GACE,MAAMP,MAAME,GAAyB,GACrC,MAAM;AACJM,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,GACA;AAAA,QAAED;AAAAA,MAAAA,CACJ,CACF;AAAA,IACF,OAAO;AACLE,yBAAmB,MAAM;AACvBK,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAMO,2BAA2B,CAC/BC,cACG;AACH,SAAO,CAACV,UAAoG;AAC1G,UAAM,CAACW,cAAcC,mBAAmB,IAAIC,WAAWb,OAAO,CAC5D,GAAGH,iBACH,GAAGiB,8BAA8B,CAClC;AAED,UAAMf,WAAWC,MAAMe,MAAM,IAAIL,UAAUE,mBAA0B;AAErEd,eAAWC,UAAUa,qBAAqB,IAAI;AAC9Cd,eAAWC,UAAUY,YAAY;AAEjC,WAAOZ;AAAAA,EACT;AACF;AAEA,MAAMiB,sBAAsB,CAC1BN,cACG;AACH,SAAO,CAACV,UAA+F;AACrG,WAAOS,yBAAoDC,SAAS,EAAEV,KAAK;AAAA,EAC7E;AACF;AAKO,MAAMiB,iBAAiBD,oBAAoEE,gBAAkB;AAI7G,MAAMC,aAAaH,oBAAsDI,YAAc;AAIvF,MAAMC,YAAYZ,yBAA+Da,WAAa;AAK9F,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAC7BgB,iBACF;AAOO,MAAMC,oBAAoBjB,oBAC/BkB,mBACF;AAKO,MAAMC,kBAAkBnB,oBAC7BoB,iBACF;AAKO,MAAMC,kBAAkB5B,yBAC7B6B,iBACF;AAKO,MAAMC,cAAc9B,yBAAmE+B,aAAe;AAKtG,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAAgE8B,cAAgB;"}

package/dist/pixi-stage.js

@@ -1,8 +1,8 @@
 import { memo } from "solid-js/web";
-import { usePixiApp } from "./pixi-application.js";
+import { getPixiApp } from "./pixi-application.js";
 import { applyProps } from "./pixi-components.js";
 const PixiStage = (props) => {
-  const pixiApp = usePixiApp();
+  const pixiApp = getPixiApp();
   applyProps(pixiApp.stage, props);
   return memo(() => pixiApp.stage);
 };

package/dist/pixi-stage.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-stage.js","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 */\nexport const PixiStage = (props: PixiStageProps): JSX.Element => {\n  const pixiApp = usePixiApp();\n\n  applyProps(pixiApp.stage, props);\n\n  return <>{pixiApp.stage}</>;\n};\n"],"names":["PixiStage","props","pixiApp","usePixiApp","applyProps","stage","_$memo"],"mappings":";;;AA0BO,MAAMA,YAAYA,CAACC,UAAuC;AAC/D,QAAMC,UAAUC,WAAAA;AAEhBC,aAAWF,QAAQG,OAAOJ,KAAK;AAE/B,SAAAK,KAAA,MAAUJ,QAAQG,KAAK;AACzB;"}
+{"version":3,"file":"pixi-stage.js","sources":["../src/pixi-stage.tsx"],"sourcesContent":["import type { Container, ContainerOptions } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { getPixiApp } 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 */\nexport const PixiStage = (props: PixiStageProps): JSX.Element => {\n  const pixiApp = getPixiApp();\n\n  applyProps(pixiApp.stage, props);\n\n  return <>{pixiApp.stage}</>;\n};\n"],"names":["PixiStage","props","pixiApp","getPixiApp","applyProps","stage","_$memo"],"mappings":";;;AA0BO,MAAMA,YAAYA,CAACC,UAAuC;AAC/D,QAAMC,UAAUC,WAAAA;AAEhBC,aAAWF,QAAQG,OAAOJ,KAAK;AAE/B,SAAAK,KAAA,MAAUJ,QAAQG,KAAK;AACzB;"}

package/dist/types/index.d.ts

@@ -1,10 +1,10 @@
+export { onResize } from "./on-resize";
 export type { PixiApplicationProps } from "./pixi-application";
-export { PixiApplication, TickerProvider, useDelay, usePixiApp, useTick, useTicker, } from "./pixi-application";
+export { delay, getPixiApp, getTicker, onTick, PixiApplication, TickerProvider, } 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 { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
 export type { PixiEventHandlerMap } from "./pixi-events";
 export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events";
 export type { PixiStageProps } from "./pixi-stage";
 export { PixiStage } from "./pixi-stage";
-export { useResize } from "./use-resize";

package/dist/types/{use-resize.d.ts → on-resize.d.ts}

@@ -6,4 +6,4 @@ import type * as Pixi from "pixi.js";
  *
  * Because we listen for the renderer's "resize" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.
  */
-export declare const useResize: (resizeCallback: (screen: Pixi.Rectangle) => void) => void;
+export declare const onResize: (resizeCallback: (screen: Pixi.Rectangle) => void) => void;

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

@@ -1,5 +1,5 @@
-import type { ApplicationOptions, Ticker, TickerCallback } from "pixi.js";
-import { Application } from "pixi.js";
+import type { ApplicationOptions, TickerCallback } from "pixi.js";
+import { Application, Ticker } from "pixi.js";
 import type { JSX, ParentProps, Ref } from "solid-js";
 /**
  * A custom SolidJS hook to access the root PIXI.Application instance.
@@ -8,7 +8,7 @@ import type { JSX, ParentProps, Ref } from "solid-js";
  * @returns The PIXI.Application instance provided by the `PixiApplication` component.
  * @throws Will throw an error if used outside of a `PixiApplication` context provider.
  */
-export declare const usePixiApp: () => Application<import("pixi.js").Renderer>;
+export declare const getPixiApp: () => 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,
@@ -21,7 +21,7 @@ export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" |
 /**
  * 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`.
+ * and custom hooks like `getPixiApp`, `onTick`, and `getTicker`.
  *
  * This component should only be used once in your application.
  *
@@ -34,13 +34,13 @@ export type TickerProviderProps = ParentProps<{
 }>;
 /**
  * This is only required if you want a ticker without the Application.
- * It provides context for the `useTick` and `useTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.
+ * It provides context for the `onTick` and `getTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.
  *
  * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.
  */
 export declare const TickerProvider: (props: TickerProviderProps) => JSX.Element;
 /**
- * useTicker
+ * getTicker
  *
  * 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`.
@@ -49,9 +49,9 @@ export declare const TickerProvider: (props: TickerProviderProps) => JSX.Element
  * @returns The PIXI.Ticker instance from the application context.
  * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.
  */
-export declare const useTicker: () => Ticker;
+export declare const getTicker: () => Ticker;
 /**
- * useTick
+ * onTick
  *
  * 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
@@ -64,11 +64,11 @@ export declare const useTicker: () => Ticker;
  * the `PIXI.Ticker` instance as its argument.
  *
  */
-export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
+export declare const onTick: (tickerCallback: TickerCallback<Ticker>) => void;
 /**
- * Delay until a given number of milliseconds has passed on the application ticker.
+ * Delay until a given number of milliseconds has passed on the shared ticker.
  *
- * It is guaranteed to be in sync with the ticker and uses accumulated deltaMs not an external time measurement.
+ * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.
  *
  * Simply await for it to resolve if in an async context or pass in a callback function.
  * It's not recommended to use both techniques at once.
@@ -84,4 +84,4 @@ export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
  * @note It will not resolve or fire the callback if the ticker is paused or stopped.
  *
  */
-export declare const useDelay: (delayMs: number, callback?: () => void) => Promise<void>;
+export declare const delay: (delayMs: number, callback?: () => void) => Promise<void>;

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

@@ -32,7 +32,7 @@ export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "c
 /**
  * A SolidJS component that renders a `PIXI.BitmapText`.
  */
-export declare const BitmapText: (props: Omit<[text?: Pixi.TextString | undefined, options?: Partial<Pixi.TextStyle> | undefined], "children"> & LeafProps<Pixi.BitmapText>) => Pixi.BitmapText & JSX.Element;
+export declare const BitmapText: (props: Omit<Pixi.TextOptions<Pixi.TextStyle, Pixi.TextStyleOptions>, "children"> & LeafProps<Pixi.BitmapText>) => Pixi.BitmapText & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Container`.
  */
@@ -58,10 +58,6 @@ export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children">
  * A SolidJS component that renders a `PIXI.MeshRope`.
  */
 export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & LeafProps<Pixi.MeshRope>) => Pixi.MeshRope & JSX.Element;
-/**
- * A SolidJS component that renders a `PIXI.MeshSimple`.
- */
-export declare const MeshSimple: (props: Omit<Pixi.SimpleMeshOptions, "children"> & LeafProps<Pixi.MeshSimple>) => Pixi.MeshSimple & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.NineSliceSprite`.
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixi-solid",
   "private": false,
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "A library to write PixiJS applications with SolidJS",
   "author": "Luke Thompson",
   "license": "MIT",

package/dist/use-resize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-resize.js","sources":["../src/use-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\n\n/**\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n *\n * @param resizeCallback A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * Because we listen for the renderer's \"resize\" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.\n */\nexport const useResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  const app = usePixiApp();\n\n  const handleResize = () => {\n    resizeCallback(app.renderer.screen);\n  };\n\n  handleResize();\n\n  app.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    app.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"names":[],"mappings":";;AAWO,MAAM,YAAY,CAAC,mBAA2D;AACnF,QAAM,MAAM,WAAA;AAEZ,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI,SAAS,MAAM;AAAA,EACpC;AAEA,eAAA;AAEA,MAAI,SAAS,YAAY,UAAU,YAAY;AAE/C,YAAU,MAAM;AACd,QAAI,SAAS,eAAe,UAAU,YAAY;AAAA,EACpD,CAAC;AACH;"}