@fcannizzaro/streamdeck-react 0.1.9 → 0.1.11

package/dist/render/pipeline.js

@@ -1,62 +1,364 @@
-import { vnodeToElement } from "../reconciler/vnode.js";
-import { fnv1a } from "./cache.js";
-import { encodePng } from "./png.js";
-import { createElement } from "react";
-import { fromJsx } from "@takumi-rs/helpers/jsx";
+import { clearDirtyFlags, isContainerDirty } from "../reconciler/vnode.js";
+import { computeCacheKey, computeTreeHash, fnv1a } from "./cache.js";
+import { getBufferPool } from "./buffer-pool.js";
+import { encodePngAsync } from "./png.js";
+import { getImageCache, getTouchstripCache } from "./image-cache.js";
+import { metrics } from "./metrics.js";
+import { serializeSvgTree } from "./svg.js";
 //#region src/render/pipeline.ts
+var ROOT_STYLE = {
+	display: "flex",
+	width: "100%",
+	height: "100%"
+};
+/** Warn threshold for consecutive identical renders in debug mode. */
+var DUP_RENDER_WARN_THRESHOLD = 3;
+/** Maximum recommended VNode tree depth. Warn in debug mode when exceeded. */
+var MAX_DEPTH_WARN = 25;
+/** Whether we've already warned about tree depth (avoid log spam). */
+var depthWarned = false;
+var SKIP_PROPS = new Set([
+	"children",
+	"className",
+	"src"
+]);
+function copyPropsToNode(target, props) {
+	const keys = Object.keys(props);
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i];
+		if (SKIP_PROPS.has(key)) continue;
+		const value = props[key];
+		if (key === "tw") continue;
+		target[key] = value;
+	}
+}
+function vnodeToTakumiNode(node, depth = 0) {
+	if (!depthWarned && depth > MAX_DEPTH_WARN) {
+		depthWarned = true;
+		console.warn(`[@fcannizzaro/streamdeck-react] VNode tree depth ${depth} exceeds recommended limit ${MAX_DEPTH_WARN}. Deep nesting increases render cost.`);
+	}
+	if (node.type === "#text") return {
+		type: "text",
+		text: node.text ?? ""
+	};
+	const props = node.props;
+	const rawTw = typeof props.tw === "string" ? props.tw : void 0;
+	const className = props.className;
+	let tw = rawTw;
+	if (typeof className === "string" && className.length > 0) tw = tw ? tw + " " + className : className;
+	if (node.type === "img" && typeof props.src === "string") {
+		const result = {
+			type: "image",
+			src: props.src
+		};
+		if (tw) result.tw = tw;
+		copyPropsToNode(result, props);
+		return result;
+	}
+	if (node.type === "svg") {
+		const result = {
+			type: "image",
+			src: serializeSvgTree(node),
+			tagName: "svg"
+		};
+		const width = typeof props.width === "number" ? props.width : void 0;
+		const height = typeof props.height === "number" ? props.height : void 0;
+		if (width != null) result.width = width;
+		if (height != null) result.height = height;
+		if (tw) result.tw = tw;
+		if (props.style) result.style = props.style;
+		return result;
+	}
+	const result = { type: "container" };
+	if (tw) result.tw = tw;
+	copyPropsToNode(result, props);
+	if (node.children.length > 0) result.children = node.children.map((child) => vnodeToTakumiNode(child, depth + 1));
+	return result;
+}
+/** Build the root Takumi container wrapping the VNode children. */
+function buildTakumiRoot(container) {
+	return {
+		type: "container",
+		style: ROOT_STYLE,
+		children: container.children.map(vnodeToTakumiNode)
+	};
+}
+/**
+* Convert a container's VNode children to Takumi nodes.
+* Used by the touchstrip native-format path to build the Takumi node tree
+* once and share it across all N segment renders in a single flush.
+*/
+function buildTakumiChildren(container) {
+	return container.children.map(vnodeToTakumiNode);
+}
+function measureTree(nodes) {
+	let maxDepth = 0;
+	let count = 0;
+	function walk(children, depth) {
+		for (const child of children) {
+			count++;
+			if (depth > maxDepth) maxDepth = depth;
+			walk(child.children, depth + 1);
+		}
+	}
+	walk(nodes, 1);
+	return {
+		depth: maxDepth,
+		count
+	};
+}
 function bufferToDataUri(buffer, format) {
 	return `data:image/${format};base64,${(Buffer.isBuffer(buffer) ? buffer : Buffer.from(buffer)).toString("base64")}`;
 }
+function emitProfile(config, times, opts) {
+	const stats = measureTree(opts.container.children);
+	const cache = config.imageCacheMaxBytes > 0 ? getImageCache(config.imageCacheMaxBytes) : null;
+	config.onProfile({
+		vnodeToElementMs: times.t1 - times.t0,
+		fromJsxMs: times.t2 - times.t1,
+		takumiRenderMs: times.t3 - times.t2,
+		hashMs: times.t4 - times.t3,
+		base64Ms: times.t5 - times.t4,
+		totalMs: times.t5 - times.t0,
+		skipped: opts.skipped,
+		cacheHit: opts.cacheHit,
+		treeDepth: stats.depth,
+		nodeCount: stats.count,
+		cacheStats: cache?.stats ?? null
+	});
+}
 async function renderToDataUri(container, width, height, config) {
 	if (container.children.length === 0) return null;
-	const { node, stylesheets } = await fromJsx(createElement("div", { style: {
-		display: "flex",
-		width: "100%",
-		height: "100%"
-	} }, ...container.children.map(vnodeToElement)));
-	const buffer = await config.renderer.render(node, {
-		width,
-		height,
-		format: config.imageFormat,
-		stylesheets,
-		devicePixelRatio: config.devicePixelRatio
-	});
+	metrics.recordFlush();
+	if (config.caching && !isContainerDirty(container)) {
+		metrics.recordDirtySkip();
+		return null;
+	}
+	const profiling = config.onProfile != null;
+	const t0 = profiling ? performance.now() : 0;
+	let t1 = t0;
+	let t2 = t0;
+	let t3 = t0;
+	let treeHash;
+	let cacheKey;
+	if (config.caching && config.imageCacheMaxBytes > 0) {
+		treeHash = computeTreeHash(container);
+		cacheKey = computeCacheKey(treeHash, width, height, config.devicePixelRatio, config.imageFormat);
+		const cached = getImageCache(config.imageCacheMaxBytes).get(cacheKey);
+		if (cached !== void 0) {
+			metrics.recordCacheHit();
+			if (profiling) {
+				const tNow = performance.now();
+				emitProfile(config, {
+					t0,
+					t1: tNow,
+					t2: tNow,
+					t3: tNow,
+					t4: tNow,
+					t5: tNow
+				}, {
+					skipped: false,
+					cacheHit: true,
+					container
+				});
+			}
+			container._dupCount = 0;
+			config.onRender?.(container, cached);
+			clearDirtyFlags(container);
+			return cached;
+		}
+	}
+	let buffer;
+	if (config.renderPool?.isAvailable) {
+		buffer = await config.renderPool.render(container.children, width, height, config.imageFormat, config.devicePixelRatio);
+		t3 = profiling ? performance.now() : 0;
+		t1 = t0;
+		t2 = t0;
+	} else {
+		const rootNode = buildTakumiRoot(container);
+		t1 = profiling ? performance.now() : 0;
+		t2 = t1;
+		buffer = await config.renderer.render(rootNode, {
+			width,
+			height,
+			format: config.imageFormat,
+			devicePixelRatio: config.devicePixelRatio
+		});
+		t3 = profiling ? performance.now() : 0;
+	}
 	if (config.caching) {
 		const hash = fnv1a(buffer);
-		if (hash === container.lastSvgHash) return null;
+		if (hash === container.lastSvgHash) {
+			metrics.recordHashDedup();
+			if (config.debug) {
+				container._dupCount++;
+				if (container._dupCount > DUP_RENDER_WARN_THRESHOLD) console.warn(`[@fcannizzaro/streamdeck-react] ${container._dupCount} consecutive identical renders — component likely re-rendering without visual change`);
+			}
+			if (profiling) {
+				const t4 = performance.now();
+				emitProfile(config, {
+					t0,
+					t1,
+					t2,
+					t3,
+					t4,
+					t5: t4
+				}, {
+					skipped: true,
+					cacheHit: false,
+					container
+				});
+			}
+			clearDirtyFlags(container);
+			return null;
+		}
 		container.lastSvgHash = hash;
+		container._dupCount = 0;
 	}
+	const t4 = profiling ? performance.now() : 0;
 	const dataUri = bufferToDataUri(buffer, config.imageFormat);
+	const t5 = profiling ? performance.now() : 0;
+	if (config.caching && config.imageCacheMaxBytes > 0) {
+		if (treeHash === void 0 || cacheKey === void 0) {
+			treeHash = computeTreeHash(container);
+			cacheKey = computeCacheKey(treeHash, width, height, config.devicePixelRatio, config.imageFormat);
+		}
+		getImageCache(config.imageCacheMaxBytes).set(cacheKey, dataUri, dataUri.length * 2 + 64);
+	}
+	metrics.recordRender(t3 - t0);
+	if (profiling) emitProfile(config, {
+		t0,
+		t1,
+		t2,
+		t3,
+		t4,
+		t5
+	}, {
+		skipped: false,
+		cacheHit: false,
+		container
+	});
 	config.onRender?.(container, dataUri);
+	clearDirtyFlags(container);
 	return dataUri;
 }
 async function renderToRaw(container, width, height, config) {
 	if (container.children.length === 0) return null;
-	const { node, stylesheets } = await fromJsx(createElement("div", { style: {
-		display: "flex",
-		width: "100%",
-		height: "100%"
-	} }, ...container.children.map(vnodeToElement)));
-	const buffer = await config.renderer.render(node, {
-		width,
-		height,
-		format: "raw",
-		stylesheets,
-		devicePixelRatio: config.devicePixelRatio
-	});
+	metrics.recordFlush();
+	if (config.caching && !isContainerDirty(container)) {
+		metrics.recordDirtySkip();
+		return null;
+	}
+	const profiling = config.onProfile != null;
+	const t0 = profiling ? performance.now() : 0;
+	let t1 = t0;
+	let t3 = t0;
+	let treeHash;
+	let cacheKey;
+	if (config.caching && config.touchstripCacheMaxBytes > 0) {
+		treeHash = computeTreeHash(container);
+		cacheKey = computeCacheKey(treeHash, width, height, config.devicePixelRatio, "raw");
+		const cached = getTouchstripCache(config.touchstripCacheMaxBytes).get(cacheKey);
+		if (cached !== void 0) {
+			metrics.recordCacheHit();
+			if (profiling) {
+				const tNow = performance.now();
+				emitProfile(config, {
+					t0,
+					t1: tNow,
+					t2: tNow,
+					t3: tNow,
+					t4: tNow,
+					t5: tNow
+				}, {
+					skipped: false,
+					cacheHit: true,
+					container
+				});
+			}
+			clearDirtyFlags(container);
+			return {
+				buffer: cached,
+				width,
+				height
+			};
+		}
+	}
+	let buffer;
+	if (config.renderPool?.isAvailable) {
+		buffer = await config.renderPool.render(container.children, width, height, "raw", config.devicePixelRatio);
+		t3 = profiling ? performance.now() : 0;
+		t1 = t0;
+	} else {
+		const rootNode = buildTakumiRoot(container);
+		t1 = profiling ? performance.now() : 0;
+		buffer = await config.renderer.render(rootNode, {
+			width,
+			height,
+			format: "raw",
+			devicePixelRatio: config.devicePixelRatio
+		});
+		t3 = profiling ? performance.now() : 0;
+	}
 	if (config.caching) {
 		const hash = fnv1a(buffer);
-		if (hash === container.lastSvgHash) return null;
+		if (hash === container.lastSvgHash) {
+			metrics.recordHashDedup();
+			if (profiling) {
+				const t4 = performance.now();
+				emitProfile(config, {
+					t0,
+					t1,
+					t2: t1,
+					t3,
+					t4,
+					t5: t4
+				}, {
+					skipped: true,
+					cacheHit: false,
+					container
+				});
+			}
+			clearDirtyFlags(container);
+			return null;
+		}
 		container.lastSvgHash = hash;
 	}
+	const buf = Buffer.isBuffer(buffer) ? buffer : Buffer.from(buffer);
+	if (config.caching && config.touchstripCacheMaxBytes > 0) {
+		if (treeHash === void 0 || cacheKey === void 0) {
+			treeHash = computeTreeHash(container);
+			cacheKey = computeCacheKey(treeHash, width, height, config.devicePixelRatio, "raw");
+		}
+		getTouchstripCache(config.touchstripCacheMaxBytes).set(cacheKey, buf, buf.byteLength + 64);
+	}
+	metrics.recordRender(t3 - t0);
+	if (profiling) {
+		const tEnd = performance.now();
+		emitProfile(config, {
+			t0,
+			t1,
+			t2: t1,
+			t3,
+			t4: tEnd,
+			t5: tEnd
+		}, {
+			skipped: false,
+			cacheHit: false,
+			container
+		});
+	}
+	clearDirtyFlags(container);
 	return {
-		buffer: Buffer.isBuffer(buffer) ? buffer : Buffer.from(buffer),
+		buffer: buf,
 		width,
 		height
 	};
 }
 function cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight) {
-	const slice = Buffer.alloc(segmentWidth * segmentHeight * 4);
+	const pool = getBufferPool();
+	const sliceSize = segmentWidth * segmentHeight * 4;
+	const slice = pool.acquire(sliceSize);
 	const srcRowBytes = fullWidth * 4;
 	const dstRowBytes = segmentWidth * 4;
 	const xOffset = column * segmentWidth * 4;
@@ -67,8 +369,40 @@ function cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight) {
 	}
 	return slice;
 }
-function sliceToDataUri(raw, fullWidth, fullHeight, column, segmentWidth, segmentHeight) {
-	return bufferToDataUri(encodePng(segmentWidth, segmentHeight, cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight)), "png");
+async function sliceToDataUriAsync(raw, fullWidth, fullHeight, column, segmentWidth, segmentHeight) {
+	const cropped = cropSlice(raw, fullWidth, column, segmentWidth, segmentHeight);
+	const png = await encodePngAsync(segmentWidth, segmentHeight, cropped);
+	getBufferPool().release(cropped);
+	return bufferToDataUri(png, "png");
+}
+async function renderSegmentToDataUri(container, fullWidth, segmentHeight, column, segmentWidth, format, config, prebuiltTakumiChildren) {
+	if (container.children.length === 0) return null;
+	const children = prebuiltTakumiChildren ?? container.children.map(vnodeToTakumiNode);
+	const innerNode = {
+		type: "container",
+		style: {
+			...ROOT_STYLE,
+			width: fullWidth,
+			height: segmentHeight,
+			marginLeft: -(column * segmentWidth)
+		},
+		children
+	};
+	const clipNode = {
+		type: "container",
+		style: {
+			width: segmentWidth,
+			height: segmentHeight,
+			overflow: "hidden"
+		},
+		children: [innerNode]
+	};
+	return bufferToDataUri(await config.renderer.render(clipNode, {
+		width: segmentWidth,
+		height: segmentHeight,
+		format,
+		devicePixelRatio: config.devicePixelRatio
+	}), format);
 }
 //#endregion
-export { bufferToDataUri, renderToDataUri, renderToRaw, sliceToDataUri };
+export { bufferToDataUri, buildTakumiChildren, buildTakumiRoot, measureTree, renderSegmentToDataUri, renderToDataUri, renderToRaw, sliceToDataUriAsync };

package/dist/render/png.d.ts

@@ -1,8 +1,17 @@
 /**
- * Encode raw RGBA pixels into a PNG buffer.
+ * Encode raw RGBA pixels into a PNG buffer (synchronous).
  *
  * @param width  Image width in pixels.
  * @param height Image height in pixels.
  * @param rgba   Raw RGBA pixel data (width × height × 4 bytes, row-major).
  */
 export declare function encodePng(width: number, height: number, rgba: Buffer | Uint8Array): Buffer;
+/**
+ * Encode raw RGBA pixels into a PNG buffer (async).
+ * Uses libuv thread pool for deflate compression, avoiding main-thread blocking.
+ *
+ * @param width  Image width in pixels.
+ * @param height Image height in pixels.
+ * @param rgba   Raw RGBA pixel data (width × height × 4 bytes, row-major).
+ */
+export declare function encodePngAsync(width: number, height: number, rgba: Buffer | Uint8Array): Promise<Buffer>;

package/dist/render/png.js

@@ -1,4 +1,6 @@
-import { deflateSync } from "node:zlib";
+import { getBufferPool } from "./buffer-pool.js";
+import { deflate } from "node:zlib";
+import { promisify } from "node:util";
 //#region src/render/png.ts
 var crcTable = new Uint32Array(256);
 for (let n = 0; n < 256; n++) {
@@ -35,14 +37,8 @@ var PNG_SIGNATURE = Buffer.from([
 	26,
 	10
 ]);
-/**
-* Encode raw RGBA pixels into a PNG buffer.
-*
-* @param width  Image width in pixels.
-* @param height Image height in pixels.
-* @param rgba   Raw RGBA pixel data (width × height × 4 bytes, row-major).
-*/
-function encodePng(width, height, rgba) {
+var deflateAsync = promisify(deflate);
+function buildIhdr(width, height) {
 	const ihdr = Buffer.alloc(13);
 	ihdr.writeUInt32BE(width, 0);
 	ihdr.writeUInt32BE(height, 4);
@@ -51,15 +47,22 @@ function encodePng(width, height, rgba) {
 	ihdr[10] = 0;
 	ihdr[11] = 0;
 	ihdr[12] = 0;
+	return ihdr;
+}
+function buildFilteredScanlines(width, height, rgba) {
 	const rowBytes = width * 4;
-	const filtered = Buffer.alloc(height * (1 + rowBytes));
+	const filteredSize = height * (1 + rowBytes);
+	const filtered = getBufferPool().acquire(filteredSize);
 	for (let y = 0; y < height; y++) {
 		const dstOff = y * (1 + rowBytes);
 		filtered[dstOff] = 0;
 		const srcOff = y * rowBytes;
-		for (let i = 0; i < rowBytes; i++) filtered[dstOff + 1 + i] = rgba[srcOff + i];
+		if (Buffer.isBuffer(rgba)) rgba.copy(filtered, dstOff + 1, srcOff, srcOff + rowBytes);
+		else filtered.set(rgba.subarray(srcOff, srcOff + rowBytes), dstOff + 1);
 	}
-	const compressed = deflateSync(filtered);
+	return filtered;
+}
+function assemblePng(ihdr, compressed) {
 	return Buffer.concat([
 		PNG_SIGNATURE,
 		pngChunk("IHDR", ihdr),
@@ -67,5 +70,20 @@ function encodePng(width, height, rgba) {
 		pngChunk("IEND", Buffer.alloc(0))
 	]);
 }
+/**
+* Encode raw RGBA pixels into a PNG buffer (async).
+* Uses libuv thread pool for deflate compression, avoiding main-thread blocking.
+*
+* @param width  Image width in pixels.
+* @param height Image height in pixels.
+* @param rgba   Raw RGBA pixel data (width × height × 4 bytes, row-major).
+*/
+async function encodePngAsync(width, height, rgba) {
+	const ihdr = buildIhdr(width, height);
+	const filtered = buildFilteredScanlines(width, height, rgba);
+	const compressed = await deflateAsync(filtered);
+	getBufferPool().release(filtered);
+	return assemblePng(ihdr, compressed);
+}
 //#endregion
-export { encodePng };
+export { encodePngAsync };

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

@@ -0,0 +1,26 @@
+import { FontConfig } from '../types';
+import { VNode } from '../reconciler/vnode';
+export declare class RenderPool {
+    private worker;
+    private ready;
+    private failed;
+    private nextId;
+    private pending;
+    private initPromise;
+    private fonts;
+    constructor(fonts: FontConfig[]);
+    /** Start the worker. Call once during plugin initialization. */
+    initialize(): Promise<boolean>;
+    private doInitialize;
+    /** Whether the worker is available for offloaded rendering. */
+    get isAvailable(): boolean;
+    /**
+     * Render VNode children in the worker thread.
+     * Returns the raw raster buffer.
+     */
+    render(vnodes: VNode[], width: number, height: number, format: string, dpr: number): Promise<Buffer>;
+    /** Gracefully shut down the worker. */
+    shutdown(): Promise<void>;
+    private handleResponse;
+    private handleWorkerDeath;
+}