pixi-solid 0.1.21 → 0.1.22

package/dist/index.js

@@ -1,10 +1,10 @@
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
 import { getTicker } from "./pixi-application/get-ticker.js";
 import { PixiApplicationProvider, TickerProvider } from "./pixi-application/pixi-application-provider.js";
-import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
 import { onResize } from "./on-resize.js";
 import { onTick } from "./on-tick.js";
 import { createAsyncDelay, delay } from "./delay.js";
 import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./components/components.js";
 import { PixiCanvas } from "./pixi-canvas.js";
+import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
 export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, PixiApplicationProvider, PixiCanvas, RenderContainer, RenderLayer, Sprite, Text, TickerProvider, TilingSprite, createAsyncDelay, delay, getPixiApp, getTicker, onResize, onTick, usePixiScreen };

package/dist/on-resize.js

@@ -1,6 +1,5 @@
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
-import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
-import { createEffect, on } from "solid-js";
+import { onCleanup } from "solid-js";
 //#region src/on-resize.ts
 /**
 *
@@ -20,20 +19,16 @@ var onResize = (resizeCallback) => {
 	} catch {
 		throw new Error("onResize must be used within a PixiApplicationProvider or a PixiCanvas");
 	}
-	const screen = usePixiScreen();
-	/**
-	* We derive from the reactive screen store so this hook always fires after `usePixiScreen()` has
-	* been updated.
-	* This avoids a race condition and guarantees consistent values when both are used together.
-	*/
-	createEffect(on(() => [
-		screen.width,
-		screen.height,
-		screen.x,
-		screen.y
-	], () => {
-		resizeCallback(pixiApp.renderer.screen);
-	}, { defer: false }));
+	resizeCallback(pixiApp.renderer.screen);
+	const handleResize = () => {
+		queueMicrotask(() => {
+			resizeCallback(pixiApp.renderer.screen);
+		});
+	};
+	pixiApp.renderer.addListener("resize", handleResize);
+	onCleanup(() => {
+		pixiApp.renderer.removeListener("resize", handleResize);
+	});
 };
 //#endregion
 export { onResize };

package/dist/on-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-resize.js","names":[],"sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createEffect, on } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\nimport { usePixiScreen } from \"./use-pixi-screen\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\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 * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  const screen = usePixiScreen();\n\n  /**\n   * We derive from the reactive screen store so this hook always fires after `usePixiScreen()` has\n   * been updated.\n   * This avoids a race condition and guarantees consistent values when both are used together.\n   */\n  createEffect(\n    on(\n      () => [screen.width, screen.height, screen.x, screen.y],\n      () => {\n        resizeCallback(pixiApp.renderer.screen);\n      },\n      { defer: false },\n    ),\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAa,YAAY,mBAA2D;CAClF,IAAI;AAEJ,KAAI;AACF,YAAU,YAAY;SAChB;AACN,QAAM,IAAI,MAAM,yEAAyE;;CAG3F,MAAM,SAAS,eAAe;;;;;;AAO9B,cACE,SACQ;EAAC,OAAO;EAAO,OAAO;EAAQ,OAAO;EAAG,OAAO;EAAE,QACjD;AACJ,iBAAe,QAAQ,SAAS,OAAO;IAEzC,EAAE,OAAO,OAAO,CACjB,CACF"}
+{"version":3,"file":"on-resize.js","names":[],"sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\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 * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  // Ensure initial callback happens during setup.\n  resizeCallback(pixiApp.renderer.screen);\n\n  const handleResize = () => {\n    // Keep onResize event-driven (fires for every renderer resize event), but schedule the\n    // callback after the current emit cycle so usePixiScreen listeners have already synchronized\n    // their reactive values. This avoids stale reads when both hooks are used together.\n    queueMicrotask(() => {\n      resizeCallback(pixiApp.renderer.screen);\n    });\n  };\n\n  pixiApp.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    pixiApp.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,YAAY,mBAA2D;CAClF,IAAI;AAEJ,KAAI;AACF,YAAU,YAAY;SAChB;AACN,QAAM,IAAI,MAAM,yEAAyE;;AAI3F,gBAAe,QAAQ,SAAS,OAAO;CAEvC,MAAM,qBAAqB;AAIzB,uBAAqB;AACnB,kBAAe,QAAQ,SAAS,OAAO;IACvC;;AAGJ,SAAQ,SAAS,YAAY,UAAU,aAAa;AAEpD,iBAAgB;AACd,UAAQ,SAAS,eAAe,UAAU,aAAa;GACvD"}

package/dist/types/testing/index.d.ts

@@ -1,9 +1,3 @@
-import type { JSX } from "solid-js";
-export declare const withTestRoot: <T>(setup: () => T) => {
-    value: T;
-    dispose: () => void;
-};
-/**
- * Calls pixi solid components in a pure Solid root without mounting to the Canvas.
- */
-export declare const mountHeadless: (component: () => JSX.Element) => (() => void);
+export { mountHeadless, withTestRoot } from "./test-root";
+export { createMockApp, createMockRenderer, TestPixiProvider } from "./pixi-renderer-mock";
+export type { MockRenderer } from "./pixi-renderer-mock";

package/dist/types/testing/pixi-renderer-mock.d.ts

@@ -0,0 +1,24 @@
+import type * as Pixi from "pixi.js";
+import type { JSX, ParentProps } from "solid-js";
+export type MockRenderer = {
+    screen: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    addListener: (event: string, listener: () => void) => void;
+    removeListener: (event: string, listener: () => void) => void;
+    emitResize: (nextScreen?: Partial<{
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    }>) => void;
+};
+export declare const createMockRenderer: () => MockRenderer;
+export declare const createMockApp: (renderer: MockRenderer) => Pixi.Application;
+export declare const TestPixiProvider: (props: ParentProps<{
+    app: Pixi.Application;
+    renderer: MockRenderer;
+}>) => JSX.Element;

package/dist/types/testing/test-root.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "solid-js";
+export declare const withTestRoot: <T>(setup: () => T) => {
+    value: T;
+    dispose: () => void;
+};
+/**
+ * Calls pixi solid components in a pure Solid root without mounting to the Canvas.
+ */
+export declare const mountHeadless: (component: () => JSX.Element) => (() => void);

package/dist/types/testing/test-root.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/use-pixi-screen/use-pixi-screen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixi-solid",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "description": "A library to write PixiJS applications with SolidJS",
   "homepage": "https://lukecarlthompson.github.io/pixi-solid/",