pixi-solid 0.0.14 → 0.0.16

package/dist/index.js

@@ -1,4 +1,4 @@
-import { PixiApplication, TickerProvider, usePixiApp, useTick, useTicker } from "./pixi-application.js";
+import { PixiApplication, TickerProvider, useDelay, usePixiApp, useTick, useTicker } 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 { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
@@ -27,6 +27,7 @@ export {
   Text,
   TickerProvider,
   TilingSprite,
+  useDelay,
   usePixiApp,
   useResize,
   useTick,

package/dist/pixi-application.js

@@ -11,7 +11,7 @@ const usePixiApp = () => {
   return app;
 };
 const PixiApplication = (props) => {
-  const [_solidProps, initialisationProps] = splitProps(props, ["ref", "children"]);
+  const [, initialisationProps] = splitProps(props, ["ref", "children"]);
   const [appResource] = createResource(async () => {
     const app = new Application();
     await app.init({
@@ -85,9 +85,30 @@ const useTick = (tickerCallback) => {
     ticker.remove(tickerCallback);
   });
 };
+const useDelay = async (delayMs, callback) => {
+  const ticker = useContext(TickerContext);
+  if (!ticker) {
+    throw new Error("useDelay must be used within a PixiApplication or a TickerProvider");
+  }
+  let timeDelayed = 0;
+  let resolvePromise;
+  const promise = new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+  const internalCallback = () => {
+    timeDelayed += ticker.deltaMS;
+    if (timeDelayed < delayMs) return;
+    callback?.();
+    resolvePromise();
+  };
+  ticker.add(internalCallback);
+  await promise;
+  ticker.remove(internalCallback);
+};
 export {
   PixiApplication,
   TickerProvider,
+  useDelay,
   usePixiApp,
   useTick,
   useTicker

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 [_solidProps, 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"],"names":["PixiAppContext","createContext","TickerContext","usePixiApp","app","useContext","Error","PixiApplication","props","_solidProps","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"],"mappings":";;;AAKA,MAAMA,iBAAiBC,cAAAA;AACvB,MAAMC,gBAAgBD,cAAAA;AASf,MAAME,aAAaA,MAAM;AAC9B,QAAMC,MAAMC,WAAWL,cAAc;AACrC,MAAI,CAACI,KAAK;AACR,UAAM,IAAIE,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAOF;AACT;AAsBO,MAAMG,kBAAkBA,CAACC,UAAgC;AAC9D,QAAM,CAACC,aAAaC,mBAAmB,IAAIC,WAAWH,OAAO,CAAC,OAAO,UAAU,CAAC;AAIhF,QAAM,CAACI,WAAW,IAAIC,eAAe,YAAY;AAC/C,UAAMT,MAAM,IAAIU,YAAAA;AAChB,UAAMV,IAAIW,KAAK;AAAA,MACbC,aAAa;AAAA,MACbC,YAAYC,KAAKC,IAAIC,OAAOC,kBAAkB,CAAC;AAAA,MAC/CC,cAAc;AAAA,MACd,GAAGZ;AAAAA,IAAAA,CACJ;AAED,WAAON;AAAAA,EACT,CAAC;AAEDmB,eAAa,MAAM;AACjB,UAAMnB,MAAMQ,YAAAA;AACZ,QAAIR,KAAK;AACP,UAAII,MAAMgB,KAAK;AAEZhB,cAAMgB,IAAsCpB,GAAG;AAAA,MAClD;AAKAA,UAAIqB,OAAOC,YAAY;AACvBtB,UAAIqB,OAAOE,MAAAA;AAEXC,gBAAU,MAAM;AACdxB,YAAIyB,QAAQ,MAAM;AAAA,UAAEC,UAAU;AAAA,QAAA,CAAM;AAAA,MACtC,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAErB,YAAAA;AAAAA,IAAa;AAAA,IAAAkB,UACrB1B,CAAAA,QAAG2B,gBACF/B,eAAekC,UAAQ;AAAA,MAAA,IAACC,QAAK;AAAA,eAAE/B,IAAAA;AAAAA,MAAK;AAAA,MAAA,IAAA0B,WAAA;AAAA,eAAAC,gBAClC7B,cAAcgC,UAAQ;AAAA,UAAA,IAACC,QAAK;AAAA,mBAAE/B,MAAMqB;AAAAA,UAAM;AAAA,UAAA,IAAAK,WAAA;AAAA,mBAAGtB,MAAMsB;AAAAA,UAAQ;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAE/D;AAGP;AAUO,MAAMM,iBAAiBA,CAAC5B,UAA+B;AAC5D,SAAAuB,gBAAQ7B,cAAcgC,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAE3B,MAAMiB;AAAAA,IAAM;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAGtB,MAAMsB;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;AAYO,MAAMO,YAAYA,MAAc;AACrC,QAAMZ,SAASpB,WAAWH,aAAa;AACvC,MAAI,CAACuB,QAAQ;AACX,UAAM,IAAInB,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAOmB;AACT;AAgBO,MAAMa,UAAUA,CAACC,mBAAiD;AACvE,QAAMd,SAASpB,WAAWH,aAAa;AAEvC,MAAI,CAACuB,QAAQ;AACX,UAAM,IAAInB,MAAM,mEAAmE;AAAA,EACrF;AAEAmB,SAAOe,IAAID,cAAc;AACzBX,YAAU,MAAM;AACdH,WAAOgB,OAAOF,cAAc;AAAA,EAC9B,CAAC;AACH;"}
+{"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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"}

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>): 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 unknown as JSX.Element;\n  };\n};\n\nconst createLeafComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType\n) => {\n  return (props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>): JSX.Element => {\n    return createContainerComponent<PixiContainer, OptionsType>(PixiClass)(props as any);\n  };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\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,UAAqF;AAC3F,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,UAAgF;AACtF,WAAOS,yBAAqDC,SAAS,EAAEV,KAAY;AAAA,EACrF;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  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;"}

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export type { PixiApplicationProps } from "./pixi-application";
-export { PixiApplication, TickerProvider, usePixiApp, useTick, useTicker, } from "./pixi-application";
+export { PixiApplication, TickerProvider, useDelay, usePixiApp, useTick, useTicker, } 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";

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

@@ -65,3 +65,23 @@ export declare const useTicker: () => Ticker;
  *
  */
 export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
+/**
+ * Delay until a given number of milliseconds has passed on the application ticker.
+ *
+ * It is guaranteed to be in sync with the 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.
+ *
+ * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).
+ *
+ * @param callback - Optional callback function that will fire when the delayMs time has passed.
+ *
+ * @returns A Promise that resolves once the ticker's time has advanced by `delayMs`.
+ *
+ * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.
+ *
+ * @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>;

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

@@ -28,11 +28,11 @@ export declare const applyProps: <InstanceType extends PixiContainer, OptionsTyp
 /**
  * A SolidJS component that renders a `PIXI.AnimatedSprite`.
  */
-export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & LeafProps<Pixi.AnimatedSprite>) => JSX.Element;
+export declare const AnimatedSprite: (props: Omit<Pixi.AnimatedSpriteOptions, "children"> & LeafProps<Pixi.AnimatedSprite>) => Pixi.AnimatedSprite & JSX.Element;
 /**
  * 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>) => JSX.Element;
+export declare const BitmapText: (props: Omit<[text?: Pixi.TextString | undefined, options?: Partial<Pixi.TextStyle> | undefined], "children"> & LeafProps<Pixi.BitmapText>) => Pixi.BitmapText & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Container`.
  */
@@ -40,42 +40,42 @@ export declare const Container: (props: Omit<Pixi.ContainerOptions<Pixi.Containe
     ref?: Ref<Pixi.Container<Pixi.ContainerChild>> | undefined;
     as?: Pixi.Container<Pixi.ContainerChild> | undefined;
     children?: JSX.Element;
-}) => JSX.Element;
+}) => Pixi.Container<Pixi.ContainerChild> & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Graphics`.
  * Use a ref to access the underlying graphics instance and draw with it.
  */
-export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & LeafProps<Pixi.Graphics>) => JSX.Element;
+export declare const Graphics: (props: Omit<Pixi.GraphicsOptions, "children"> & LeafProps<Pixi.Graphics>) => Pixi.Graphics & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.HTMLText`.
  */
-export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & LeafProps<Pixi.HTMLText>) => JSX.Element;
+export declare const HTMLText: (props: Omit<Pixi.HTMLTextOptions, "children"> & LeafProps<Pixi.HTMLText>) => Pixi.HTMLText & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshPlane`.
  */
-export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & LeafProps<Pixi.MeshPlane>) => JSX.Element;
+export declare const MeshPlane: (props: Omit<Pixi.MeshPlaneOptions, "children"> & LeafProps<Pixi.MeshPlane>) => Pixi.MeshPlane & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.MeshRope`.
  */
-export declare const MeshRope: (props: Omit<Pixi.MeshRopeOptions, "children"> & LeafProps<Pixi.MeshRope>) => JSX.Element;
+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>) => JSX.Element;
+export declare const MeshSimple: (props: Omit<Pixi.SimpleMeshOptions, "children"> & LeafProps<Pixi.MeshSimple>) => Pixi.MeshSimple & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.NineSliceSprite`.
  */
-export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & LeafProps<Pixi.NineSliceSprite>) => JSX.Element;
+export declare const NineSliceSprite: (props: Omit<Pixi.NineSliceSpriteOptions, "children"> & LeafProps<Pixi.NineSliceSprite>) => Pixi.NineSliceSprite & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.ParticleContainer`.
  *
  * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.
  */
-export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions, "children"> & LeafProps<Pixi.ParticleContainer>) => JSX.Element;
+export declare const ParticleContainer: (props: Omit<Pixi.ParticleContainerOptions, "children"> & LeafProps<Pixi.ParticleContainer>) => Pixi.ParticleContainer & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.PerspectiveMesh`.
  */
-export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & LeafProps<Pixi.PerspectiveMesh>) => JSX.Element;
+export declare const PerspectiveMesh: (props: Omit<Pixi.PerspectivePlaneOptions, "children"> & LeafProps<Pixi.PerspectiveMesh>) => Pixi.PerspectiveMesh & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.RenderContainer`.
  */
@@ -83,7 +83,7 @@ export declare const RenderContainer: (props: Omit<Pixi.RenderContainerOptions,
     ref?: Ref<Pixi.RenderContainer> | undefined;
     as?: Pixi.RenderContainer | undefined;
     children?: JSX.Element;
-}) => JSX.Element;
+}) => Pixi.RenderContainer & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.RenderLayer`.
  */
@@ -91,16 +91,16 @@ export declare const RenderLayer: (props: Omit<Pixi.RenderLayerOptions, "childre
     ref?: Ref<Pixi.RenderLayer> | undefined;
     as?: Pixi.RenderLayer | undefined;
     children?: JSX.Element;
-}) => JSX.Element;
+}) => Pixi.RenderLayer & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Sprite`.
  */
-export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & LeafProps<Pixi.Sprite>) => JSX.Element;
+export declare const Sprite: (props: Omit<Pixi.SpriteOptions, "children"> & LeafProps<Pixi.Sprite>) => Pixi.Sprite & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.Text`.
  */
-export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & LeafProps<Pixi.Text>) => JSX.Element;
+export declare const Text: (props: Omit<Pixi.CanvasTextOptions, "children"> & LeafProps<Pixi.Text>) => Pixi.Text & JSX.Element;
 /**
  * A SolidJS component that renders a `PIXI.TilingSprite`.
  */
-export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & LeafProps<Pixi.TilingSprite>) => JSX.Element;
+export declare const TilingSprite: (props: Omit<Pixi.TilingSpriteOptions, "children"> & LeafProps<Pixi.TilingSprite>) => Pixi.TilingSprite & JSX.Element;

package/package.json

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