@fcannizzaro/streamdeck-react 0.1.10 → 0.1.11

package/dist/plugin.js

@@ -1,19 +1,28 @@
+import { metrics } from "./render/metrics.js";
 import { RootRegistry } from "./roots/registry.js";
+import { RenderPool } from "./render/render-pool.js";
 import { startDevtoolsServer } from "./devtools/index.js";
 import streamDeck, { SingletonAction } from "@elgato/streamdeck";
 import { Renderer } from "@takumi-rs/core";
 //#region src/plugin.ts
 function createPlugin(config) {
+	const renderer = new Renderer({ fonts: config.fonts.map((f) => ({
+		name: f.name,
+		data: f.data,
+		weight: f.weight,
+		style: f.style
+	})) });
+	const renderPool = config.useWorker !== false ? new RenderPool(config.fonts) : null;
 	const renderConfig = {
-		renderer: new Renderer({ fonts: config.fonts.map((f) => ({
-			name: f.name,
-			data: f.data,
-			weight: f.weight,
-			style: f.style
-		})) }),
+		renderer,
 		imageFormat: config.imageFormat ?? "png",
 		caching: config.caching ?? true,
-		devicePixelRatio: config.devicePixelRatio ?? 1
+		devicePixelRatio: config.devicePixelRatio ?? 1,
+		debug: config.debug ?? process.env.NODE_ENV !== "production",
+		imageCacheMaxBytes: config.imageCacheMaxBytes ?? 16 * 1024 * 1024,
+		touchstripCacheMaxBytes: config.touchstripCacheMaxBytes ?? 8 * 1024 * 1024,
+		renderPool,
+		touchstripImageFormat: config.touchstripImageFormat ?? "webp"
 	};
 	const registry = new RootRegistry(renderConfig, config.renderDebounceMs ?? 16, streamDeck, async (settings) => {
 		await streamDeck.settings.setGlobalSettings(settings);
@@ -30,12 +39,14 @@ function createPlugin(config) {
 		const singletonAction = createSingletonAction(definition, registry, config.onActionError);
 		streamDeck.actions.registerAction(singletonAction);
 	}
+	if (renderConfig.debug) metrics.enable();
 	if (config.devtools) startDevtoolsServer({
 		devtoolsName: streamDeck.info.plugin.uuid,
 		registry,
 		renderConfig
 	});
 	return { async connect() {
+		if (renderPool != null) renderPool.initialize().catch(() => {});
 		await streamDeck.connect();
 	} };
 }
@@ -45,8 +56,8 @@ function createSingletonAction(definition, registry, onError) {
 		onWillAppear(ev) {
 			try {
 				const isEncoder = ev.payload.controller === "Encoder";
-				if (isEncoder && definition.touchBar) {
-					registry.create(ev, definition.touchBar, definition);
+				if (isEncoder && definition.touchStrip) {
+					registry.create(ev, definition.touchStrip, definition);
 					return;
 				}
 				const component = isEncoder ? definition.dial ?? definition.key : definition.key;

package/dist/reconciler/host-config.js

@@ -1,4 +1,4 @@
-import { createTextVNode, createVNode } from "./vnode.js";
+import { clearParent, createTextVNode, createVNode, markContainerDirty, markDirty, setParent } from "./vnode.js";
 import { createContext } from "react";
 import { DefaultEventPriority } from "react-reconciler/constants.js";
 //#region src/reconciler/host-config.ts
@@ -46,6 +46,7 @@ var hostConfig = {
 		return false;
 	},
 	appendInitialChild(parent, child) {
+		child._parent = parent;
 		parent.children.push(child);
 	},
 	finalizeInitialChildren() {
@@ -81,42 +82,59 @@ var hostConfig = {
 		return null;
 	},
 	appendChild(parent, child) {
+		setParent(child, parent);
 		parent.children.push(child);
+		markDirty(parent);
 	},
 	appendChildToContainer(container, child) {
+		setParent(child, container);
 		container.children.push(child);
+		markContainerDirty(container);
 	},
 	insertBefore(parent, child, beforeChild) {
+		setParent(child, parent);
 		const index = parent.children.indexOf(beforeChild);
 		if (index >= 0) parent.children.splice(index, 0, child);
 		else parent.children.push(child);
+		markDirty(parent);
 	},
 	insertInContainerBefore(container, child, beforeChild) {
+		setParent(child, container);
 		const index = container.children.indexOf(beforeChild);
 		if (index >= 0) container.children.splice(index, 0, child);
 		else container.children.push(child);
+		markContainerDirty(container);
 	},
 	removeChild(parent, child) {
 		const index = parent.children.indexOf(child);
 		if (index >= 0) parent.children.splice(index, 1);
+		clearParent(child);
+		markDirty(parent);
 	},
 	removeChildFromContainer(container, child) {
 		const index = container.children.indexOf(child);
 		if (index >= 0) container.children.splice(index, 1);
+		clearParent(child);
+		markContainerDirty(container);
 	},
 	commitUpdate(instance, _type, _oldProps, newProps) {
 		const { children: _, ...cleanProps } = newProps;
 		instance.props = cleanProps;
+		instance._sortedPropKeys = void 0;
+		markDirty(instance);
 	},
 	commitTextUpdate(textInstance, _oldText, newText) {
 		textInstance.text = newText;
+		markDirty(textInstance);
 	},
 	hideInstance() {},
 	unhideInstance() {},
 	hideTextInstance() {},
 	unhideTextInstance() {},
 	clearContainer(container) {
+		for (const child of container.children) clearParent(child);
 		container.children = [];
+		markContainerDirty(container);
 	},
 	scheduleTimeout: setTimeout,
 	cancelTimeout: clearTimeout,

package/dist/reconciler/vnode.d.ts

@@ -4,6 +4,16 @@ export interface VNode {
     props: Record<string, unknown>;
     children: VNode[];
     text?: string;
+    /** @internal Back-pointer to parent VNode or VContainer for dirty propagation. */
+    _parent?: VNode | VContainer;
+    /** @internal True when this node or a descendant has been mutated since last flush. */
+    _dirty?: boolean;
+    /** @internal Cached Merkle hash for this subtree. */
+    _hash?: number;
+    /** @internal True when `_hash` is valid (invalidated on mutation). */
+    _hashValid?: boolean;
+    /** @internal Cached sorted prop keys for deterministic hashing. Invalidated when props change (commitUpdate). */
+    _sortedPropKeys?: string[];
 }
 export interface VContainer {
     children: VNode[];
@@ -11,7 +21,23 @@ export interface VContainer {
     lastSvgHash: number;
     renderCallback: () => void;
     renderTimer: ReturnType<typeof setTimeout> | null;
+    /** @internal Consecutive identical render count for duplicate detection. */
+    _dupCount: number;
+    /** @internal True when any child VNode has been mutated since last flush. */
+    _dirty: boolean;
 }
+/** Mark a node (and its ancestors up to the container) as dirty. */
+export declare function markDirty(node: VNode): void;
+/** Mark the container itself as dirty (for structural mutations at container level). */
+export declare function markContainerDirty(container: VContainer): void;
+/** Check if the container has any pending mutations. */
+export declare function isContainerDirty(container: VContainer): boolean;
+/** Clear all dirty flags in the tree after a successful render. */
+export declare function clearDirtyFlags(container: VContainer): void;
+/** Set back-pointer on a child node. */
+export declare function setParent(child: VNode, parent: VNode | VContainer): void;
+/** Clear back-pointer (e.g., when removing from tree). */
+export declare function clearParent(child: VNode): void;
 export declare function createVNode(type: string, props: Record<string, unknown>): VNode;
 export declare function createTextVNode(text: string): VNode;
 export declare function createVContainer(renderCallback: () => void): VContainer;

package/dist/reconciler/vnode.js

@@ -1,5 +1,41 @@
-import { createElement } from "react";
+import "react";
 //#region src/reconciler/vnode.ts
+/** Mark a node (and its ancestors up to the container) as dirty. */
+function markDirty(node) {
+	let current = node;
+	while (current != null) {
+		if ("_dirty" in current && current._dirty) break;
+		current._dirty = true;
+		if ("type" in current) current._hashValid = false;
+		current = current._parent;
+	}
+}
+/** Mark the container itself as dirty (for structural mutations at container level). */
+function markContainerDirty(container) {
+	container._dirty = true;
+}
+/** Check if the container has any pending mutations. */
+function isContainerDirty(container) {
+	return container._dirty;
+}
+/** Clear all dirty flags in the tree after a successful render. */
+function clearDirtyFlags(container) {
+	container._dirty = false;
+	for (const child of container.children) clearNodeDirty(child);
+}
+function clearNodeDirty(node) {
+	if (!node._dirty) return;
+	node._dirty = false;
+	for (const child of node.children) clearNodeDirty(child);
+}
+/** Set back-pointer on a child node. */
+function setParent(child, parent) {
+	child._parent = parent;
+}
+/** Clear back-pointer (e.g., when removing from tree). */
+function clearParent(child) {
+	child._parent = void 0;
+}
 function createVNode(type, props) {
 	return {
 		type,
@@ -21,15 +57,10 @@ function createVContainer(renderCallback) {
 		scheduledRender: false,
 		lastSvgHash: 0,
 		renderCallback,
-		renderTimer: null
+		renderTimer: null,
+		_dupCount: 0,
+		_dirty: true
 	};
 }
-function vnodeToElement(node) {
-	if (node.type === "#text") return node.text ?? "";
-	const { children: _children, className, ...restProps } = node.props;
-	if (typeof className === "string" && className.length > 0) restProps.tw = (typeof restProps.tw === "string" ? restProps.tw + " " : "") + className;
-	const childElements = node.children.map(vnodeToElement);
-	return createElement(node.type, restProps, ...childElements);
-}
 //#endregion
-export { createTextVNode, createVContainer, createVNode, vnodeToElement };
+export { clearDirtyFlags, clearParent, createTextVNode, createVContainer, createVNode, isContainerDirty, markContainerDirty, markDirty, setParent };

package/dist/render/buffer-pool.d.ts

@@ -0,0 +1,19 @@
+export declare class BufferPool {
+    private pools;
+    /** Acquire a zeroed buffer of the given size. Reuses a pooled buffer if available. */
+    acquire(size: number): Buffer;
+    /** Return a buffer to the pool for future reuse. */
+    release(buf: Buffer): void;
+    /** Clear all pooled buffers. */
+    clear(): void;
+    /** Current pool statistics. */
+    get stats(): {
+        buckets: number;
+        totalBuffers: number;
+        totalBytes: number;
+    };
+}
+/** Get the shared buffer pool. */
+export declare function getBufferPool(): BufferPool;
+/** Reset the shared pool (for testing). */
+export declare function resetBufferPool(): void;

package/dist/render/buffer-pool.js

@@ -0,0 +1,51 @@
+//#region src/render/buffer-pool.ts
+/** Maximum number of buffers to retain per size bucket (prevents unbounded growth). */
+var MAX_POOL_SIZE_PER_BUCKET = 8;
+var BufferPool = class {
+	pools = /* @__PURE__ */ new Map();
+	/** Acquire a zeroed buffer of the given size. Reuses a pooled buffer if available. */
+	acquire(size) {
+		const pool = this.pools.get(size);
+		if (pool != null && pool.length > 0) {
+			const buf = pool.pop();
+			buf.fill(0);
+			return buf;
+		}
+		return Buffer.alloc(size);
+	}
+	/** Return a buffer to the pool for future reuse. */
+	release(buf) {
+		let pool = this.pools.get(buf.length);
+		if (pool == null) {
+			pool = [];
+			this.pools.set(buf.length, pool);
+		}
+		if (pool.length < MAX_POOL_SIZE_PER_BUCKET) pool.push(buf);
+	}
+	/** Clear all pooled buffers. */
+	clear() {
+		this.pools.clear();
+	}
+	/** Current pool statistics. */
+	get stats() {
+		let totalBuffers = 0;
+		let totalBytes = 0;
+		for (const [size, pool] of this.pools) {
+			totalBuffers += pool.length;
+			totalBytes += size * pool.length;
+		}
+		return {
+			buckets: this.pools.size,
+			totalBuffers,
+			totalBytes
+		};
+	}
+};
+var sharedPool = null;
+/** Get the shared buffer pool. */
+function getBufferPool() {
+	if (sharedPool == null) sharedPool = new BufferPool();
+	return sharedPool;
+}
+//#endregion
+export { getBufferPool };

package/dist/render/cache.d.ts

@@ -1 +1,42 @@
+import { VNode, VContainer } from '../reconciler/vnode';
+/**
+ * Initialize the xxHash-wasm module.  Call is idempotent — subsequent
+ * calls return the same promise.  Resolves once `fnv1a()` will use the
+ * WASM fast path for large buffers.
+ */
+export declare function initBufferHasher(): Promise<void>;
+/** Reset the xxHash singleton — for testing only. */
+export declare function resetBufferHasher(): void;
+/**
+ * Hash a raw byte buffer (Uint8Array or Buffer) or string.
+ *
+ * For buffers larger than {@link STRIDE_THRESHOLD} bytes:
+ * - **Primary path**: xxHash-wasm `h32Raw()` — hashes the entire buffer
+ *   in native WASM code.  Faster than JS strided sampling even for
+ *   320 KB touchstrip frames, with superior hash distribution.
+ * - **Fallback path**: FNV-1a with strided sampling (every 16th byte)
+ *   when WASM hasn't compiled yet (startup) or is unavailable.
+ *
+ * Strings and small buffers always use JS FNV-1a (fast enough at those
+ * sizes, and avoids the overhead of calling into WASM for tiny inputs).
+ */
 export declare function fnv1a(input: string | Uint8Array | Buffer): number;
+/** Feed a string into a running FNV-1a hash. */
+export declare function fnv1aString(str: string, hash: number): number;
+/** Feed a uint32 value into a running FNV-1a hash (4 bytes, big-endian). */
+export declare function fnv1aU32(value: number, hash: number): number;
+/** Hash an arbitrary JS value into a running FNV-1a hash. */
+export declare function hashValue(value: unknown, hash: number, depth?: number): number;
+/**
+ * Compute (or return cached) Merkle hash for a single VNode.
+ * The hash incorporates: type, text, props (sorted, functions skipped),
+ * children count, and children hashes (recursive).
+ */
+export declare function computeHash(node: VNode): number;
+/**
+ * Compute the Merkle hash for an entire VContainer tree.
+ * Returns 0 for empty containers.
+ */
+export declare function computeTreeHash(container: VContainer): number;
+export declare function computeCacheKey(treeHash: number, width: number, height: number, dpr: number, format: string): number;
+export declare function computeNativeTouchstripCacheKey(treeHash: number, width: number, height: number, dpr: number, format: string, columns: number[]): number;

package/dist/render/cache.js

@@ -1,15 +1,169 @@
+import { e } from "../node_modules/.bun/xxhash-wasm@1.1.0/node_modules/xxhash-wasm/esm/xxhash-wasm.js";
 //#region src/render/cache.ts
+var FNV_OFFSET_BASIS = 2166136261;
+var FNV_PRIME = 16777619;
+var SENTINEL_NULL = 1314212940;
+var SENTINEL_UNDEF = 1431192646;
+var SENTINEL_NAN = 1314999841;
+var SENTINEL_TRUE = 1414681925;
+var SENTINEL_FALSE = 1178684499;
+var SENTINEL_ARRAY = 1095914073;
+var SENTINEL_OBJECT = 1329744468;
+/** @internal WASM-accelerated buffer hash function, null before init. */
+var bufferHashFn = null;
+var xxHashInitPromise = null;
+/**
+* Initialize the xxHash-wasm module.  Call is idempotent — subsequent
+* calls return the same promise.  Resolves once `fnv1a()` will use the
+* WASM fast path for large buffers.
+*/
+function initBufferHasher() {
+	if (xxHashInitPromise != null) return xxHashInitPromise;
+	xxHashInitPromise = e().then((api) => {
+		bufferHashFn = api.h32Raw;
+	}).catch(() => {});
+	return xxHashInitPromise;
+}
+initBufferHasher();
+var STRIDE_THRESHOLD = 4096;
+var STRIDE = 16;
+/**
+* Hash a raw byte buffer (Uint8Array or Buffer) or string.
+*
+* For buffers larger than {@link STRIDE_THRESHOLD} bytes:
+* - **Primary path**: xxHash-wasm `h32Raw()` — hashes the entire buffer
+*   in native WASM code.  Faster than JS strided sampling even for
+*   320 KB touchstrip frames, with superior hash distribution.
+* - **Fallback path**: FNV-1a with strided sampling (every 16th byte)
+*   when WASM hasn't compiled yet (startup) or is unavailable.
+*
+* Strings and small buffers always use JS FNV-1a (fast enough at those
+* sizes, and avoids the overhead of calling into WASM for tiny inputs).
+*/
 function fnv1a(input) {
-	let hash = 2166136261;
+	let hash = FNV_OFFSET_BASIS;
 	if (typeof input === "string") for (let i = 0; i < input.length; i++) {
 		hash ^= input.charCodeAt(i);
-		hash = Math.imul(hash, 16777619);
+		hash = Math.imul(hash, FNV_PRIME);
 	}
-	else for (let i = 0; i < input.length; i++) {
+	else if (input.length > STRIDE_THRESHOLD) {
+		if (bufferHashFn != null) return bufferHashFn(input);
+		hash = fnv1aU32(input.length, hash);
+		for (let i = 0; i < input.length; i += STRIDE) {
+			const end = Math.min(i + 4, input.length);
+			for (let j = i; j < end; j++) {
+				hash ^= input[j];
+				hash = Math.imul(hash, FNV_PRIME);
+			}
+		}
+	} else for (let i = 0; i < input.length; i++) {
 		hash ^= input[i];
-		hash = Math.imul(hash, 16777619);
+		hash = Math.imul(hash, FNV_PRIME);
+	}
+	return hash >>> 0;
+}
+/** Feed a string into a running FNV-1a hash. */
+function fnv1aString(str, hash) {
+	for (let i = 0; i < str.length; i++) {
+		hash ^= str.charCodeAt(i);
+		hash = Math.imul(hash, FNV_PRIME);
+	}
+	return hash;
+}
+/** Feed a uint32 value into a running FNV-1a hash (4 bytes, big-endian). */
+function fnv1aU32(value, hash) {
+	hash ^= value >>> 24 & 255;
+	hash = Math.imul(hash, FNV_PRIME);
+	hash ^= value >>> 16 & 255;
+	hash = Math.imul(hash, FNV_PRIME);
+	hash ^= value >>> 8 & 255;
+	hash = Math.imul(hash, FNV_PRIME);
+	hash ^= value & 255;
+	hash = Math.imul(hash, FNV_PRIME);
+	return hash;
+}
+var MAX_HASH_DEPTH = 10;
+/** Hash an arbitrary JS value into a running FNV-1a hash. */
+function hashValue(value, hash, depth = 0) {
+	if (depth > MAX_HASH_DEPTH) return hash;
+	if (value === null) return fnv1aU32(SENTINEL_NULL, hash);
+	if (value === void 0) return fnv1aU32(SENTINEL_UNDEF, hash);
+	switch (typeof value) {
+		case "string": return fnv1aString(value, hash);
+		case "number":
+			if (Number.isNaN(value)) return fnv1aU32(SENTINEL_NAN, hash);
+			return fnv1aString(String(value), hash);
+		case "boolean": return fnv1aU32(value ? SENTINEL_TRUE : SENTINEL_FALSE, hash);
+		case "function":
+		case "symbol": return hash;
+		case "object": {
+			if (Array.isArray(value)) {
+				hash = fnv1aU32(SENTINEL_ARRAY, hash);
+				hash = fnv1aU32(value.length, hash);
+				for (let i = 0; i < value.length; i++) hash = hashValue(value[i], hash, depth + 1);
+				return hash;
+			}
+			hash = fnv1aU32(SENTINEL_OBJECT, hash);
+			const keys = Object.keys(value).sort();
+			hash = fnv1aU32(keys.length, hash);
+			for (const key of keys) {
+				const v = value[key];
+				if (typeof v === "function" || typeof v === "symbol") continue;
+				hash = fnv1aString(key, hash);
+				hash = hashValue(v, hash, depth + 1);
+			}
+			return hash;
+		}
+		default: return fnv1aString(String(value), hash);
+	}
+}
+/**
+* Compute (or return cached) Merkle hash for a single VNode.
+* The hash incorporates: type, text, props (sorted, functions skipped),
+* children count, and children hashes (recursive).
+*/
+function computeHash(node) {
+	if (node._hashValid && node._hash !== void 0) return node._hash;
+	let hash = FNV_OFFSET_BASIS;
+	hash = fnv1aString(node.type, hash);
+	if (node.text !== void 0) hash = fnv1aString(node.text, hash);
+	const keys = node._sortedPropKeys ??= Object.keys(node.props).sort();
+	for (const key of keys) {
+		const value = node.props[key];
+		if (typeof value === "function" || typeof value === "symbol") continue;
+		hash = fnv1aString(key, hash);
+		hash = hashValue(value, hash);
 	}
+	hash = fnv1aU32(node.children.length, hash);
+	for (const child of node.children) hash = fnv1aU32(computeHash(child), hash);
+	node._hash = hash >>> 0;
+	node._hashValid = true;
+	return node._hash;
+}
+/**
+* Compute the Merkle hash for an entire VContainer tree.
+* Returns 0 for empty containers.
+*/
+function computeTreeHash(container) {
+	if (container.children.length === 0) return 0;
+	let hash = FNV_OFFSET_BASIS;
+	hash = fnv1aU32(container.children.length, hash);
+	for (const child of container.children) hash = fnv1aU32(computeHash(child), hash);
 	return hash >>> 0;
 }
+function computeCacheKey(treeHash, width, height, dpr, format) {
+	let key = treeHash;
+	key = fnv1aU32(width, key);
+	key = fnv1aU32(height, key);
+	key = fnv1aU32(Math.round(dpr * 100), key);
+	key = fnv1aString(format, key);
+	return key >>> 0;
+}
+function computeNativeTouchstripCacheKey(treeHash, width, height, dpr, format, columns) {
+	let key = computeCacheKey(treeHash, width, height, dpr, format);
+	key = fnv1aU32(columns.length, key);
+	for (const col of columns) key = fnv1aU32(col, key);
+	return key >>> 0;
+}
 //#endregion
-export { fnv1a };
+export { computeCacheKey, computeNativeTouchstripCacheKey, computeTreeHash, fnv1a };

package/dist/render/image-cache.d.ts

@@ -0,0 +1,53 @@
+export interface CacheStats {
+    /** Number of entries currently in the cache. */
+    entries: number;
+    /** Current memory usage in bytes. */
+    bytes: number;
+    /** Maximum memory budget in bytes. */
+    maxBytes: number;
+    /** Total cache hits since creation or last reset. */
+    hits: number;
+    /** Total cache misses since creation or last reset. */
+    misses: number;
+}
+/**
+ * Byte-bounded LRU cache. Evicts least-recently-used entries when the
+ * total byte size exceeds `maxBytes`.
+ *
+ * Generic over value type: use `string` for data URI caching (keys/dials),
+ * `Buffer` for raw RGBA caching (touchstrip).
+ */
+export declare class ImageCache<V = string> {
+    private maxBytes;
+    private map;
+    private head;
+    private tail;
+    private currentBytes;
+    private _hits;
+    private _misses;
+    constructor(maxBytes: number);
+    /** Retrieve a cached value. Returns `undefined` on miss. Promotes to MRU on hit. */
+    get(key: number): V | undefined;
+    /** Insert or update a cache entry. Evicts LRU entries if over budget. */
+    set(key: number, value: V, byteSize: number): void;
+    /** Clear all entries and reset stats. */
+    clear(): void;
+    /** Current cache statistics. */
+    get stats(): CacheStats;
+    private moveToHead;
+    private evictTail;
+    private evictUntilUnderBudget;
+}
+/** Get or create the shared image cache for data URIs. */
+export declare function getImageCache(maxBytes?: number): ImageCache<string>;
+/** Get or create the shared touchstrip raw buffer cache. */
+export declare function getTouchstripCache(maxBytes?: number): ImageCache<Buffer>;
+/**
+ * Get or create the shared touchstrip native-format segment cache.
+ * Stores sorted `[column, dataUri]` tuples per tree hash + column config.
+ * Uses the same default budget as the raw touchstrip cache since only one
+ * touchstrip rendering path is active at a time.
+ */
+export declare function getTouchstripNativeCache(maxBytes?: number): ImageCache<Array<[number, string]>>;
+/** Reset all caches (for testing or config changes). */
+export declare function resetCaches(): void;