svelte-p5-components 0.5.0 → 0.6.0

package/README.md

@@ -41,6 +41,16 @@ Pin to a SHA (`@<commit-sha>`) instead of `@main` for reproducible installs.
 </div>
 ```
 
+Props:
+
+| Prop       | Type                                 | Default | Notes                                                                                                                                                               |
+| ---------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sketch`   | `SketchFn<Ext>`                      | —       | Required. Generic over custom instance members (see the core README).                                                                                               |
+| `hidpi`    | `boolean \| number`                  | `true`  | `true` → `devicePixelRatio`, `false` → `pixelDensity(1)`, number → that exact density (cap for large WEBGL canvases: `Math.min(devicePixelRatio, 2)`).              |
+| `instance` | `ExtendedP5<Ext> \| null` (bindable) | `null`  | The p5 instance once mounted.                                                                                                                                       |
+| `onReady`  | `(instance) => void`                 | —       | Fires once after creation, density, and initial sizing.                                                                                                             |
+| `onResize` | `(instance, width, height) => void`  | —       | Fires after each `ResizeObserver`-driven `resizeCanvas` (not the initial sizing). Rebuild size-dependent state here; call `instance.loop()` if you're noLoop-gated. |
+
 ## `<FPSMonitor>`
 
 Absolute-positioned FPS readout. Takes the p5 instance and samples `p.frameRate()` every 30 frames by default.

package/dist/Sketch.svelte

@@ -1,16 +1,6 @@
-<script lang="ts">
-	import { P5Canvas, type SketchFn } from 'svelte-p5';
-	import type p5 from 'p5';
-
-	interface Props {
-		sketch: SketchFn;
-		/** Apply `pixelDensity(devicePixelRatio)` on ready. Default: true */
-		hidpi?: boolean;
-		class?: string;
-		style?: string;
-		instance?: p5 | null;
-		onReady?: (instance: p5) => void;
-	}
+<script lang="ts" generics="Ext = unknown">
+	import { P5Canvas, type ExtendedP5 } from 'svelte-p5';
+	import type { SketchProps } from './sketch-types.js';
 
 	let {
 		sketch,
@@ -18,14 +8,22 @@
 		class: className = '',
 		style = 'display: block; width: 100%; height: 100%; overflow: hidden;',
 		instance = $bindable(null),
-		onReady
-	}: Props = $props();
+		onReady,
+		onResize
+	}: SketchProps<Ext> = $props();
 
 	let container: HTMLDivElement | null = $state(null);
 
-	function handleReady(p: p5) {
-		if (hidpi && typeof window !== 'undefined') {
-			p.pixelDensity(window.devicePixelRatio);
+	function handleReady(p: ExtendedP5<Ext>) {
+		if (typeof window !== 'undefined') {
+			if (typeof hidpi === 'number') {
+				p.pixelDensity(hidpi);
+			} else if (hidpi) {
+				p.pixelDensity(window.devicePixelRatio);
+			} else {
+				// p5 defaults to devicePixelRatio, so opting out must be explicit.
+				p.pixelDensity(1);
+			}
 		}
 		// Size immediately to the current container dimensions.
 		if (container) {
@@ -43,7 +41,11 @@
 			if (!entry || !instance) return;
 			const w = Math.max(1, Math.floor(entry.contentRect.width));
 			const h = Math.max(1, Math.floor(entry.contentRect.height));
+			// Skip no-op resizes; this also swallows the observer's initial
+			// fire, which would otherwise double-report the handleReady sizing.
+			if (w === instance.width && h === instance.height) return;
 			instance.resizeCanvas(w, h);
+			onResize?.(instance, w, h);
 		});
 		ro.observe(el);
 		return () => ro.disconnect();

package/dist/Sketch.svelte.d.ts

@@ -1,14 +1,25 @@
-import { type SketchFn } from 'svelte-p5';
-import type p5 from 'p5';
-interface Props {
-    sketch: SketchFn;
-    /** Apply `pixelDensity(devicePixelRatio)` on ready. Default: true */
-    hidpi?: boolean;
-    class?: string;
-    style?: string;
-    instance?: p5 | null;
-    onReady?: (instance: p5) => void;
+import type { SketchProps } from './sketch-types.js';
+declare function $$render<Ext = unknown>(): {
+    props: SketchProps<Ext>;
+    exports: {};
+    bindings: "instance";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Ext = unknown> {
+    props(): ReturnType<typeof $$render<Ext>>['props'];
+    events(): ReturnType<typeof $$render<Ext>>['events'];
+    slots(): ReturnType<typeof $$render<Ext>>['slots'];
+    bindings(): "instance";
+    exports(): {};
 }
-declare const Sketch: import("svelte").Component<Props, {}, "instance">;
-type Sketch = ReturnType<typeof Sketch>;
+interface $$IsomorphicComponent {
+    new <Ext = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Ext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Ext>['props']>, ReturnType<__sveltets_Render<Ext>['events']>, ReturnType<__sveltets_Render<Ext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Ext>['bindings']>;
+    } & ReturnType<__sveltets_Render<Ext>['exports']>;
+    <Ext = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<Ext>['props']> & {}): ReturnType<__sveltets_Render<Ext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Sketch: $$IsomorphicComponent;
+type Sketch<Ext = unknown> = InstanceType<typeof Sketch<Ext>>;
 export default Sketch;

package/dist/Sketch.test.svelte.d.ts

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

package/dist/Sketch.test.svelte.js

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Sketch from './Sketch.svelte';
+// P5Canvas does `await import('p5')`; give it a fake constructor that mirrors
+// the bits Sketch touches. p5 calls the sketch function synchronously inside
+// the constructor, and so does the fake.
+vi.mock('p5', () => {
+    class FakeP5 {
+        width = 0;
+        height = 0;
+        resizeCanvas = vi.fn((w, h) => {
+            this.width = w;
+            this.height = h;
+        });
+        pixelDensity = vi.fn();
+        remove = vi.fn();
+        // P5Canvas passes (sketchFn, containerNode); the node is irrelevant here.
+        constructor(sketch) {
+            sketch(this);
+        }
+    }
+    return { default: FakeP5 };
+});
+// Controllable ResizeObserver stub: tests fire the captured callback directly.
+let roCallback = null;
+const savedRO = globalThis.ResizeObserver;
+function fireResize(width, height) {
+    roCallback?.([{ contentRect: { width, height } }], {});
+}
+async function renderSketch(props = {}) {
+    let ready = null;
+    const onReady = (p) => {
+        ready = p;
+    };
+    const result = render(Sketch, { sketch: () => { }, onReady, ...props });
+    // P5Canvas awaits import('p5') before constructing; wait for onReady.
+    await vi.waitFor(() => {
+        if (!ready)
+            throw new Error('instance not ready');
+    });
+    return { ...result, instance: ready };
+}
+beforeEach(() => {
+    roCallback = null;
+    globalThis.ResizeObserver = class {
+        constructor(cb) {
+            roCallback = cb;
+        }
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+});
+afterEach(() => {
+    globalThis.ResizeObserver = savedRO;
+});
+describe('<Sketch> resize', () => {
+    it('calls resizeCanvas then onResize, in that order, when the container resizes', async () => {
+        const calls = [];
+        const onResize = vi.fn((_p, w, h) => {
+            calls.push(`onResize:${w}x${h}`);
+        });
+        const { instance } = await renderSketch({ onResize });
+        instance.resizeCanvas.mockImplementation((w, h) => {
+            instance.width = w;
+            instance.height = h;
+            calls.push(`resizeCanvas:${w}x${h}`);
+        });
+        fireResize(640, 480);
+        expect(calls).toEqual(['resizeCanvas:640x480', 'onResize:640x480']);
+        expect(onResize).toHaveBeenCalledWith(instance, 640, 480);
+    });
+    it('skips resizeCanvas and onResize when the size is unchanged', async () => {
+        const onResize = vi.fn();
+        const { instance } = await renderSketch({ onResize });
+        instance.width = 300;
+        instance.height = 200;
+        instance.resizeCanvas.mockClear();
+        fireResize(300, 200);
+        expect(instance.resizeCanvas).not.toHaveBeenCalled();
+        expect(onResize).not.toHaveBeenCalled();
+    });
+    it('does not fire onResize for the initial handleReady sizing', async () => {
+        const onResize = vi.fn();
+        await renderSketch({ onResize });
+        expect(onResize).not.toHaveBeenCalled();
+    });
+});
+describe('<Sketch> pixel density', () => {
+    it('hidpi=true applies devicePixelRatio', async () => {
+        const { instance } = await renderSketch({ hidpi: true });
+        expect(instance.pixelDensity).toHaveBeenCalledWith(window.devicePixelRatio);
+    });
+    it('hidpi=false pins density to 1', async () => {
+        const { instance } = await renderSketch({ hidpi: false });
+        expect(instance.pixelDensity).toHaveBeenCalledWith(1);
+    });
+    it('numeric hidpi applies that exact density', async () => {
+        const { instance } = await renderSketch({ hidpi: 1.5 });
+        expect(instance.pixelDensity).toHaveBeenCalledWith(1.5);
+    });
+});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Sketch } from './Sketch.svelte';
+export type { SketchProps } from './sketch-types.js';
 export { default as FPSMonitor } from './FPSMonitor.svelte';
 export { default as SketchDebug } from './SketchDebug.svelte';
 export { default as DraggableWindow } from './DraggableWindow.svelte';

package/dist/sketch-types.d.ts

@@ -0,0 +1,28 @@
+import type { ExtendedP5, SketchFn } from 'svelte-p5';
+/**
+ * Props accepted by the `<Sketch>` component.
+ */
+export interface SketchProps<Ext = unknown> {
+    sketch: SketchFn<Ext>;
+    /**
+     * Pixel density applied on ready. `true` → `devicePixelRatio`,
+     * `false` → 1 (p5's own default is already devicePixelRatio, so this
+     * is the only way to genuinely opt out), a number → that exact
+     * density. Cap it for large WEBGL canvases, e.g.
+     * `Math.min(devicePixelRatio, 2)`. Default: true.
+     */
+    hidpi?: boolean | number;
+    class?: string;
+    style?: string;
+    /** Bindable: the p5 instance, available after mount. `null` before mount or after unmount. */
+    instance?: ExtendedP5<Ext> | null;
+    /** Called once after creation, pixel density, and initial container sizing. */
+    onReady?: (instance: ExtendedP5<Ext>) => void;
+    /**
+     * Called after the canvas has been resized to track its container
+     * (ResizeObserver path). Not called for the initial sizing — use
+     * `onReady` for that. Rebuild size-dependent state here and request
+     * a redraw if your sketch is noLoop-gated.
+     */
+    onResize?: (instance: ExtendedP5<Ext>, width: number, height: number) => void;
+}

package/dist/sketch-types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-p5-components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Higher-level Svelte 5 components built on svelte-p5: responsive canvas, FPS monitor, sketch debug overlay, draggable windows",
   "keywords": [
     "svelte",
@@ -51,10 +51,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@neodrag/core": "3.0.0-next.8",
     "@neodrag/svelte": "3.0.0-next.8"
   },
   "peerDependencies": {
-    "svelte-p5": "workspace:^",
+    "svelte-p5": ">=0.4.0",
     "p5": ">=1.11.0 <3",
     "svelte": "^5.0.0"
   },