pixi-solid 0.0.27 → 0.0.28

package/dist/packages/pixi-solid/src/index.js

@@ -1,5 +1,5 @@
 import { onResize } from "./on-resize.js";
-import { PixiApplication, TickerProvider, createAsyncDelay, delay, getPixiApp, getTicker, onTick } from "./pixi-application.js";
+import { PixiApplication, TickerProvider, createAsyncDelay, delay, getPixiApp, getTicker, onTick, usePixiScreen } from "./pixi-application.js";
 import { PixiCanvas } from "./pixi-canvas.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";
@@ -31,6 +31,7 @@ export {
   getPixiApp,
   getTicker,
   onResize,
-  onTick
+  onTick,
+  usePixiScreen
 };
 //# sourceMappingURL=index.js.map

package/dist/packages/pixi-solid/src/pixi-application.js

@@ -157,6 +157,13 @@ const delay = (delayMs, callback) => {
   };
   ticker.add(internalCallback);
 };
+const usePixiScreen = () => {
+  const pixiScreen = useContext(PixiScreenContext);
+  if (!pixiScreen) {
+    throw new Error("usePixiScreen must be used within a PixiApplication");
+  }
+  return pixiScreen;
+};
 export {
   PixiApplication,
   TickerProvider,
@@ -164,6 +171,7 @@ export {
   delay,
   getPixiApp,
   getTicker,
-  onTick
+  onTick,
+  usePixiScreen
 };
 //# sourceMappingURL=pixi-application.js.map

package/dist/packages/pixi-solid/src/pixi-application.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application.js","sources":["../../../../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Rectangle, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport { batch, createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\nconst PixiScreenContext = createContext<Readonly<PixiScreenDimensions>>();\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  const pixiScreenDimensions = createMutable<PixiScreenDimensions>({\n    width: 800,\n    height: 600,\n    left: 0,\n    right: 800,\n    top: 0,\n    bottom: 600,\n    x: 0,\n    y: 0,\n  });\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  const updatePixiScreenStore = (screen: Rectangle) => {\n    batch(() => {\n      pixiScreenDimensions.width = screen.width;\n      pixiScreenDimensions.height = screen.height;\n      pixiScreenDimensions.left = screen.x;\n      pixiScreenDimensions.top = screen.y;\n      pixiScreenDimensions.right = screen.x + screen.width;\n      pixiScreenDimensions.bottom = screen.y + screen.height;\n      pixiScreenDimensions.x = screen.x;\n      pixiScreenDimensions.y = screen.y;\n    });\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      updatePixiScreenStore(app.renderer.screen);\n\n      const handleResize = () => {\n        updatePixiScreenStore(app.renderer.screen);\n      };\n\n      app.renderer.addListener(\"resize\", handleResize);\n\n      onCleanup(() => {\n        app.renderer.removeListener(\"resize\", handleResize);\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}>\n            <PixiScreenContext.Provider value={pixiScreenDimensions}>{props.children}</PixiScreenContext.Provider>\n          </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\nconst asyncDelay = async (ticker: Ticker, delayMs: number) => {\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    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplication` or `TickerProvider` context.\n *\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\"\n    );\n  }\n  const delayWithTicker = (delayMs: number) => asyncDelay(ticker, delayMs);\n\n  return delayWithTicker;\n};\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the 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 * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\"\n    );\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\n/**\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * @returns An object containing the width and height of the Pixi screen.\n * @throws Will throw an error if not used within a `<PixiApplication>` component.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiScreen = useContext(PixiScreenContext);\n  if (!pixiScreen) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplication\");\n  }\n  return pixiScreen;\n};\n"],"names":["PixiAppContext","createContext","TickerContext","PixiScreenContext","getPixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","pixiScreenDimensions","createMutable","width","height","left","right","top","bottom","x","y","appResource","createResource","Application","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","updatePixiScreenStore","screen","batch","createEffect","ref","ticker","autoStart","start","renderer","handleResize","addListener","onCleanup","removeListener","destroy","children","_$createComponent","Show","when","Provider","value","TickerProvider","getTicker","onTick","tickerCallback","add","remove","asyncDelay","delayMs","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS","createAsyncDelay","delayWithTicker","delay","callback"],"mappings":"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"}
+{"version":3,"file":"pixi-application.js","sources":["../../../../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Rectangle, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport { batch, createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\nconst PixiScreenContext = createContext<Readonly<PixiScreenDimensions>>();\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  const pixiScreenDimensions = createMutable<PixiScreenDimensions>({\n    width: 800,\n    height: 600,\n    left: 0,\n    right: 800,\n    top: 0,\n    bottom: 600,\n    x: 0,\n    y: 0,\n  });\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  const updatePixiScreenStore = (screen: Rectangle) => {\n    batch(() => {\n      pixiScreenDimensions.width = screen.width;\n      pixiScreenDimensions.height = screen.height;\n      pixiScreenDimensions.left = screen.x;\n      pixiScreenDimensions.top = screen.y;\n      pixiScreenDimensions.right = screen.x + screen.width;\n      pixiScreenDimensions.bottom = screen.y + screen.height;\n      pixiScreenDimensions.x = screen.x;\n      pixiScreenDimensions.y = screen.y;\n    });\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      updatePixiScreenStore(app.renderer.screen);\n\n      const handleResize = () => {\n        updatePixiScreenStore(app.renderer.screen);\n      };\n\n      app.renderer.addListener(\"resize\", handleResize);\n\n      onCleanup(() => {\n        app.renderer.removeListener(\"resize\", handleResize);\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}>\n            <PixiScreenContext.Provider value={pixiScreenDimensions}>{props.children}</PixiScreenContext.Provider>\n          </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\nconst asyncDelay = async (ticker: Ticker, delayMs: number) => {\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    resolvePromise();\n  };\n\n  ticker.add(internalCallback);\n\n  await promise;\n\n  ticker.remove(internalCallback);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplication` or `TickerProvider` context.\n *\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\"\n    );\n  }\n  const delayWithTicker = (delayMs: number) => asyncDelay(ticker, delayMs);\n\n  return delayWithTicker;\n};\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the 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 * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplication` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\n      \"`createDelay` must be used within a PixiApplication or a TickerProvider. The returned `delay` function can be called in an async context but `createDelay` must be called in a synchronous scope within a PixiApplication or a TickerProvider\"\n    );\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\n/**\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * @returns An object containing the width and height of the Pixi screen.\n * @throws Will throw an error if not used within a `<PixiApplication>` component.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiScreen = useContext(PixiScreenContext);\n  if (!pixiScreen) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplication\");\n  }\n  return pixiScreen;\n};\n"],"names":["PixiAppContext","createContext","TickerContext","PixiScreenContext","getPixiApp","app","useContext","Error","PixiApplication","props","initialisationProps","splitProps","pixiScreenDimensions","createMutable","width","height","left","right","top","bottom","x","y","appResource","createResource","Application","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","updatePixiScreenStore","screen","batch","createEffect","ref","ticker","autoStart","start","renderer","handleResize","addListener","onCleanup","removeListener","destroy","children","_$createComponent","Show","when","Provider","value","TickerProvider","getTicker","onTick","tickerCallback","add","remove","asyncDelay","delayMs","timeDelayed","resolvePromise","promise","Promise","resolve","internalCallback","deltaMS","createAsyncDelay","delayWithTicker","delay","callback","usePixiScreen","pixiScreen"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 export type { ContainerProps, LeafProps } from "./component-creation";
 export { onResize } from "./on-resize";
-export type { PixiApplicationProps } from "./pixi-application";
-export { createAsyncDelay, delay, getPixiApp, getTicker, onTick, PixiApplication, TickerProvider, } from "./pixi-application";
+export type { PixiApplicationProps, PixiScreenDimensions } from "./pixi-application";
+export { createAsyncDelay, delay, getPixiApp, getTicker, onTick, PixiApplication, TickerProvider, usePixiScreen, } from "./pixi-application";
 export { PixiCanvas } from "./pixi-canvas";
 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";

package/package.json

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