@vertz/ui-canvas 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import { Application, Container } from "pixi";
+import { Signal, DisposeFn } from "@vertz/ui";
+interface CanvasOptions {
+	width: number;
+	height: number;
+	backgroundColor?: number;
+}
+interface CanvasState {
+	app: Application;
+	root: Container;
+}
+/**
+* Binds a Vertz signal to a PixiJS display object property reactively.
+* When the signal updates, the display object property updates automatically.
+*/
+declare function bindSignal<T>(sig: Signal<T>, displayObject: {
+	[key: string]: unknown;
+}, property: string, transform?: (value: T) => unknown): DisposeFn;
+/**
+* Creates a reactive sprite-like display object that binds to position signals.
+* Returns the display object with bound properties and a cleanup function.
+*/
+declare function createReactiveSprite(options: {
+	x?: Signal<number>;
+	y?: Signal<number>;
+	rotation?: Signal<number>;
+	scaleX?: Signal<number>;
+	scaleY?: Signal<number>;
+	alpha?: Signal<number>;
+}, displayObject: {
+	x: number;
+	y: number;
+	rotation: number;
+	scale: {
+		x: number;
+		y: number;
+	};
+	alpha: number;
+}): {
+	displayObject: typeof displayObject;
+	dispose: DisposeFn;
+};
+/**
+* Renders a PixiJS canvas to the specified container element.
+* Returns the canvas element and a dispose function for cleanup.
+*/
+declare function render(container: HTMLElement, options: CanvasOptions): {
+	canvas: HTMLCanvasElement;
+	dispose: DisposeFn;
+};
+/**
+* Destroy a PixiJS application and remove its canvas from the DOM.
+*/
+declare function destroy(app: Application, container: HTMLElement): void;
+/**
+* Canvas renderer for Vertz with PixiJS integration.
+* Provides reactive primitives for canvas rendering.
+*/
+declare const Canvas: {
+	render: typeof render;
+	bindSignal: typeof bindSignal;
+	createReactiveSprite: typeof createReactiveSprite;
+	destroy: typeof destroy;
+};
+export { render, destroy, createReactiveSprite, bindSignal, CanvasState, CanvasOptions, Canvas };

package/dist/index.js

@@ -0,0 +1,75 @@
+// src/canvas.ts
+import { Application } from "pixi.js";
+import { effect } from "@vertz/ui";
+function bindSignal(sig, displayObject, property, transform) {
+  const update = () => {
+    const value = transform ? transform(sig.value) : sig.value;
+    displayObject[property] = value;
+  };
+  update();
+  const disposeEffect = effect(() => {
+    sig.value;
+    update();
+  });
+  return disposeEffect;
+}
+function createReactiveSprite(options, displayObject) {
+  const cleanups = [];
+  if (options.x) {
+    cleanups.push(bindSignal(options.x, displayObject, "x"));
+  }
+  if (options.y) {
+    cleanups.push(bindSignal(options.y, displayObject, "y"));
+  }
+  if (options.rotation) {
+    cleanups.push(bindSignal(options.rotation, displayObject, "rotation"));
+  }
+  if (options.scaleX) {
+    cleanups.push(bindSignal(options.scaleX, displayObject.scale, "x"));
+  }
+  if (options.scaleY) {
+    cleanups.push(bindSignal(options.scaleY, displayObject.scale, "y"));
+  }
+  if (options.alpha) {
+    cleanups.push(bindSignal(options.alpha, displayObject, "alpha"));
+  }
+  return {
+    displayObject,
+    dispose: () => cleanups.forEach((fn) => fn())
+  };
+}
+function render(container, options) {
+  const app = new Application({
+    width: options.width,
+    height: options.height,
+    backgroundColor: options.backgroundColor ?? 0
+  });
+  container.appendChild(app.view);
+  const dispose = () => {
+    destroy(app, container);
+  };
+  return {
+    canvas: app.view,
+    dispose
+  };
+}
+function destroy(app, container) {
+  const view = app.view;
+  if (view && container.contains(view)) {
+    container.removeChild(view);
+  }
+  app.destroy(true, { children: true, texture: true });
+}
+var Canvas = {
+  render,
+  bindSignal,
+  createReactiveSprite,
+  destroy
+};
+export {
+  render,
+  destroy,
+  createReactiveSprite,
+  bindSignal,
+  Canvas
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vertz/ui-canvas",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Vertz Canvas renderer with PixiJS and signals",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertz-dev/vertz.git",
+    "directory": "packages/ui-canvas"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bunup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vertz/ui": "workspace:*",
+    "pixi.js": "^8.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.0.18",
+    "bunup": "latest",
+    "happy-dom": "^18.0.1",
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false
+}