@fcannizzaro/streamdeck-react 0.1.11 → 0.1.13

package/dist/render/cache.js

@@ -1,4 +1,3 @@
-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;
@@ -9,36 +8,16 @@ 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.
+* For buffers larger than {@link STRIDE_THRESHOLD} bytes, uses strided
+* FNV-1a sampling (every 16th byte) — at 30fps this adds <1ms even
+* for 320KB TouchStrip buffers.
 *
-* 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).
+* Strings and small buffers always use full byte-by-byte FNV-1a.
 */
 function fnv1a(input) {
 	let hash = FNV_OFFSET_BASIS;
@@ -47,7 +26,6 @@ function fnv1a(input) {
 		hash = Math.imul(hash, FNV_PRIME);
 	}
 	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);
@@ -159,11 +137,11 @@ function computeCacheKey(treeHash, width, height, dpr, format) {
 	key = fnv1aString(format, key);
 	return key >>> 0;
 }
-function computeNativeTouchstripCacheKey(treeHash, width, height, dpr, format, columns) {
-	let key = computeCacheKey(treeHash, width, height, dpr, format);
+function computeTouchStripSegmentCacheKey(treeHash, width, height, dpr, columns) {
+	let key = computeCacheKey(treeHash, width, height, dpr, "png");
 	key = fnv1aU32(columns.length, key);
 	for (const col of columns) key = fnv1aU32(col, key);
 	return key >>> 0;
 }
 //#endregion
-export { computeCacheKey, computeNativeTouchstripCacheKey, computeTreeHash, fnv1a };
+export { computeCacheKey, computeTouchStripSegmentCacheKey, computeTreeHash, fnv1a };

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

@@ -15,7 +15,7 @@ export interface CacheStats {
  * total byte size exceeds `maxBytes`.
  *
  * Generic over value type: use `string` for data URI caching (keys/dials),
- * `Buffer` for raw RGBA caching (touchstrip).
+ * `Buffer` for raw RGBA caching (TouchStrip).
  */
 export declare class ImageCache<V = string> {
     private maxBytes;
@@ -40,14 +40,15 @@ export declare class ImageCache<V = string> {
 }
 /** 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 raw buffer cache. */
+export declare function getTouchStripCache(maxBytes?: number): ImageCache<Buffer>;
 /**
- * Get or create the shared touchstrip native-format segment cache.
+ * Get or create the shared TouchStrip segment URI 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]>>;
+export declare function getTouchStripSegmentCache(maxBytes?: number): ImageCache<Array<[number, string]>>;
+export declare function getImageCacheStats(): CacheStats;
+export declare function getTouchStripCacheStats(): CacheStats;
+export declare function getTouchStripSegmentCacheStats(): CacheStats;
 /** Reset all caches (for testing or config changes). */
 export declare function resetCaches(): void;

package/dist/render/image-cache.js

@@ -4,7 +4,7 @@
 * total byte size exceeds `maxBytes`.
 *
 * Generic over value type: use `string` for data URI caching (keys/dials),
-* `Buffer` for raw RGBA caching (touchstrip).
+* `Buffer` for raw RGBA caching (TouchStrip).
 */
 var ImageCache = class {
 	map = /* @__PURE__ */ new Map();
@@ -97,32 +97,48 @@ var ImageCache = class {
 	}
 };
 var DEFAULT_IMAGE_CACHE_MAX_BYTES = 16 * 1024 * 1024;
-var DEFAULT_TOUCHSTRIP_CACHE_MAX_BYTES = 8 * 1024 * 1024;
+var DEFAULT_TOUCH_STRIP_CACHE_MAX_BYTES = 8 * 1024 * 1024;
 /** Shared image cache for key/dial data URIs. */
 var imageCache = null;
-/** Shared raw buffer cache for touchstrip RGBA data. */
-var touchstripCache = null;
-/** Shared segment URI cache for touchstrip native-format (WebP/PNG) renders. */
-var touchstripNativeCache = null;
+/** Shared raw buffer cache for TouchStrip RGBA data. */
+var touchStripCache = null;
+/** Shared segment URI cache for TouchStrip shared-strip renders. */
+var touchStripSegmentCache = null;
 /** Get or create the shared image cache for data URIs. */
 function getImageCache(maxBytes) {
 	if (imageCache == null) imageCache = new ImageCache(maxBytes ?? DEFAULT_IMAGE_CACHE_MAX_BYTES);
 	return imageCache;
 }
-/** Get or create the shared touchstrip raw buffer cache. */
-function getTouchstripCache(maxBytes) {
-	if (touchstripCache == null) touchstripCache = new ImageCache(maxBytes ?? DEFAULT_TOUCHSTRIP_CACHE_MAX_BYTES);
-	return touchstripCache;
+/** Get or create the shared TouchStrip raw buffer cache. */
+function getTouchStripCache(maxBytes) {
+	if (touchStripCache == null) touchStripCache = new ImageCache(maxBytes ?? DEFAULT_TOUCH_STRIP_CACHE_MAX_BYTES);
+	return touchStripCache;
 }
 /**
-* Get or create the shared touchstrip native-format segment cache.
+* Get or create the shared TouchStrip segment URI 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.
 */
-function getTouchstripNativeCache(maxBytes) {
-	if (touchstripNativeCache == null) touchstripNativeCache = new ImageCache(maxBytes ?? DEFAULT_TOUCHSTRIP_CACHE_MAX_BYTES);
-	return touchstripNativeCache;
+function getTouchStripSegmentCache(maxBytes) {
+	if (touchStripSegmentCache == null) touchStripSegmentCache = new ImageCache(maxBytes ?? DEFAULT_TOUCH_STRIP_CACHE_MAX_BYTES);
+	return touchStripSegmentCache;
+}
+function createEmptyStats(maxBytes) {
+	return {
+		entries: 0,
+		bytes: 0,
+		maxBytes,
+		hits: 0,
+		misses: 0
+	};
+}
+function getImageCacheStats() {
+	return imageCache?.stats ?? createEmptyStats(DEFAULT_IMAGE_CACHE_MAX_BYTES);
+}
+function getTouchStripCacheStats() {
+	return touchStripCache?.stats ?? createEmptyStats(DEFAULT_TOUCH_STRIP_CACHE_MAX_BYTES);
+}
+function getTouchStripSegmentCacheStats() {
+	return touchStripSegmentCache?.stats ?? createEmptyStats(DEFAULT_TOUCH_STRIP_CACHE_MAX_BYTES);
 }
 //#endregion
-export { getImageCache, getTouchstripCache, getTouchstripNativeCache };
+export { getImageCache, getImageCacheStats, getTouchStripCache, getTouchStripCacheStats, getTouchStripSegmentCache, getTouchStripSegmentCacheStats };

package/dist/render/metrics.d.ts

@@ -16,7 +16,7 @@ export interface RenderMetrics {
     /** Image cache memory usage in bytes. */
     imageCacheBytes: number;
     /** TouchStrip cache memory usage in bytes. */
-    touchstripCacheBytes: number;
+    touchStripCacheBytes: number;
 }
 declare class MetricsCollector {
     private _flushCount;
@@ -26,13 +26,12 @@ declare class MetricsCollector {
     private _hashDedupCount;
     private _totalRenderMs;
     private _peakRenderMs;
-    private _cumFlushCount;
-    private _cumRenderCount;
-    private _cumCacheHitCount;
-    private _cumDirtySkipCount;
-    private _cumHashDedupCount;
-    private _cumTotalRenderMs;
-    private _cumPeakRenderMs;
+    private _lastFlush;
+    private _lastRender;
+    private _lastCacheHit;
+    private _lastDirtySkip;
+    private _lastHashDedup;
+    private _lastTotalRenderMs;
     private _reportTimer;
     private _enabled;
     /** Enable periodic reporting. Call once during plugin init in debug mode. */
@@ -49,9 +48,9 @@ declare class MetricsCollector {
     recordHashDedup(): void;
     /** Record a completed render with its duration in milliseconds. */
     recordRender(renderMs: number): void;
-    /** Get current snapshot of all metrics (cumulative, never reset). */
+    /** Get current snapshot of all metrics (cumulative). */
     snapshot(): RenderMetrics;
-    /** Log a summary to console (called periodically). */
+    /** Log a summary to console (called periodically). Computes deltas since last report. */
     private report;
 }
 export declare const metrics: MetricsCollector;

package/dist/render/metrics.js

@@ -1,4 +1,4 @@
-import { getImageCache, getTouchstripCache, getTouchstripNativeCache } from "./image-cache.js";
+import { getImageCacheStats, getTouchStripCacheStats, getTouchStripSegmentCacheStats } from "./image-cache.js";
 //#region src/render/metrics.ts
 var REPORT_INTERVAL_MS = 1e4;
 var MetricsCollector = class {
@@ -9,13 +9,12 @@ var MetricsCollector = class {
 	_hashDedupCount = 0;
 	_totalRenderMs = 0;
 	_peakRenderMs = 0;
-	_cumFlushCount = 0;
-	_cumRenderCount = 0;
-	_cumCacheHitCount = 0;
-	_cumDirtySkipCount = 0;
-	_cumHashDedupCount = 0;
-	_cumTotalRenderMs = 0;
-	_cumPeakRenderMs = 0;
+	_lastFlush = 0;
+	_lastRender = 0;
+	_lastCacheHit = 0;
+	_lastDirtySkip = 0;
+	_lastHashDedup = 0;
+	_lastTotalRenderMs = 0;
 	_reportTimer = null;
 	_enabled = false;
 	/** Enable periodic reporting. Call once during plugin init in debug mode. */
@@ -38,62 +37,60 @@ var MetricsCollector = class {
 	/** Record a flush attempt (before any skip checks). */
 	recordFlush() {
 		this._flushCount++;
-		this._cumFlushCount++;
 	}
 	/** Record a dirty-skip (container was clean). */
 	recordDirtySkip() {
 		this._dirtySkipCount++;
-		this._cumDirtySkipCount++;
 	}
 	/** Record an image cache hit. */
 	recordCacheHit() {
 		this._cacheHitCount++;
-		this._cumCacheHitCount++;
 	}
 	/** Record a post-render hash dedup (identical output). */
 	recordHashDedup() {
 		this._hashDedupCount++;
-		this._cumHashDedupCount++;
 	}
 	/** Record a completed render with its duration in milliseconds. */
 	recordRender(renderMs) {
 		this._renderCount++;
-		this._cumRenderCount++;
 		this._totalRenderMs += renderMs;
-		this._cumTotalRenderMs += renderMs;
 		if (renderMs > this._peakRenderMs) this._peakRenderMs = renderMs;
-		if (renderMs > this._cumPeakRenderMs) this._cumPeakRenderMs = renderMs;
 	}
-	/** Get current snapshot of all metrics (cumulative, never reset). */
+	/** Get current snapshot of all metrics (cumulative). */
 	snapshot() {
-		const imageStats = getImageCache().stats;
-		const touchstripStats = getTouchstripCache().stats;
-		const nativeStats = getTouchstripNativeCache().stats;
+		const imageStats = getImageCacheStats();
+		const touchStripStats = getTouchStripCacheStats();
+		const segmentStats = getTouchStripSegmentCacheStats();
 		return {
-			flushCount: this._cumFlushCount,
-			renderCount: this._cumRenderCount,
-			cacheHitCount: this._cumCacheHitCount,
-			dirtySkipCount: this._cumDirtySkipCount,
-			hashDedupCount: this._cumHashDedupCount,
-			avgRenderMs: this._cumRenderCount > 0 ? this._cumTotalRenderMs / this._cumRenderCount : 0,
-			peakRenderMs: this._cumPeakRenderMs,
+			flushCount: this._flushCount,
+			renderCount: this._renderCount,
+			cacheHitCount: this._cacheHitCount,
+			dirtySkipCount: this._dirtySkipCount,
+			hashDedupCount: this._hashDedupCount,
+			avgRenderMs: this._renderCount > 0 ? this._totalRenderMs / this._renderCount : 0,
+			peakRenderMs: this._peakRenderMs,
 			imageCacheBytes: imageStats.bytes,
-			touchstripCacheBytes: touchstripStats.bytes + nativeStats.bytes
+			touchStripCacheBytes: touchStripStats.bytes + segmentStats.bytes
 		};
 	}
-	/** Log a summary to console (called periodically). */
+	/** Log a summary to console (called periodically). Computes deltas since last report. */
 	report() {
-		if (this._flushCount === 0) return;
-		const m = this.snapshot();
-		const skipRate = m.flushCount > 0 ? ((m.dirtySkipCount + m.cacheHitCount + m.hashDedupCount) / m.flushCount * 100).toFixed(1) : "0";
-		console.log(`[@fcannizzaro/streamdeck-react] Metrics (${REPORT_INTERVAL_MS / 1e3}s): flushes=${m.flushCount} renders=${m.renderCount} cacheHits=${m.cacheHitCount} dirtySkips=${m.dirtySkipCount} hashDedups=${m.hashDedupCount} skipRate=${skipRate}% avgRender=${m.avgRenderMs.toFixed(1)}ms peak=${m.peakRenderMs.toFixed(1)}ms imgCache=${(m.imageCacheBytes / 1024).toFixed(0)}KB tbCache=${(m.touchstripCacheBytes / 1024).toFixed(0)}KB`);
-		this._flushCount = 0;
-		this._renderCount = 0;
-		this._cacheHitCount = 0;
-		this._dirtySkipCount = 0;
-		this._hashDedupCount = 0;
-		this._totalRenderMs = 0;
-		this._peakRenderMs = 0;
+		const dFlush = this._flushCount - this._lastFlush;
+		if (dFlush === 0) return;
+		const dRender = this._renderCount - this._lastRender;
+		const dCacheHit = this._cacheHitCount - this._lastCacheHit;
+		const dDirtySkip = this._dirtySkipCount - this._lastDirtySkip;
+		const dHashDedup = this._hashDedupCount - this._lastHashDedup;
+		const dTotalMs = this._totalRenderMs - this._lastTotalRenderMs;
+		const skipRate = dFlush > 0 ? ((dDirtySkip + dCacheHit + dHashDedup) / dFlush * 100).toFixed(1) : "0";
+		const avgMs = dRender > 0 ? (dTotalMs / dRender).toFixed(1) : "0.0";
+		console.log(`[@fcannizzaro/streamdeck-react] Metrics (${REPORT_INTERVAL_MS / 1e3}s): flushes=${dFlush} renders=${dRender} cacheHits=${dCacheHit} dirtySkips=${dDirtySkip} hashDedups=${dHashDedup} skipRate=${skipRate}% avgRender=${avgMs}ms peak=${this._peakRenderMs.toFixed(1)}ms imgCache=${(getImageCacheStats().bytes / 1024).toFixed(0)}KB tbCache=${((getTouchStripCacheStats().bytes + getTouchStripSegmentCacheStats().bytes) / 1024).toFixed(0)}KB`);
+		this._lastFlush = this._flushCount;
+		this._lastRender = this._renderCount;
+		this._lastCacheHit = this._cacheHitCount;
+		this._lastDirtySkip = this._dirtySkipCount;
+		this._lastHashDedup = this._hashDedupCount;
+		this._lastTotalRenderMs = this._totalRenderMs;
 	}
 };
 var metrics = new MetricsCollector();

package/dist/render/pipeline.d.ts

@@ -5,8 +5,8 @@ import { CacheStats } from './image-cache';
 import { RenderPool } from './render-pool';
 /** Per-render timing and diagnostic data exposed via `RenderConfig.onProfile`. */
 export interface RenderProfile {
-    vnodeToElementMs: number;
-    fromJsxMs: number;
+    /** Time to convert VNode tree to Takumi node tree (ms). */
+    vnodeConversionMs: number;
     takumiRenderMs: number;
     hashMs: number;
     base64Ms: number;
@@ -28,12 +28,10 @@ export interface RenderConfig {
     debug: boolean;
     /** Maximum image cache size in bytes. Set to 0 to disable. @default 16777216 (16 MB) */
     imageCacheMaxBytes: number;
-    /** Maximum touchstrip cache size in bytes. Set to 0 to disable. @default 8388608 (8 MB) */
-    touchstripCacheMaxBytes: number;
+    /** Maximum TouchStrip cache size in bytes. Set to 0 to disable. @default 8388608 (8 MB) */
+    touchStripCacheMaxBytes: number;
     /** Worker thread pool for offloading Takumi renders. null = main-thread rendering. */
     renderPool: RenderPool | null;
-    /** Image format for touchstrip segment encoding. @default "webp" */
-    touchstripImageFormat: OutputFormat;
     /** DevTools callback. Called after a non-null render with the container and data URI. */
     onRender?: (container: VContainer, dataUri: string) => void;
     /** Profiling callback. Called after every renderToDataUri / renderToRaw attempt. */
@@ -41,12 +39,6 @@ export interface RenderConfig {
 }
 /** Build the root Takumi container wrapping the VNode children. */
 export declare function buildTakumiRoot(container: VContainer): TakumiNode;
-/**
- * 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.
- */
-export declare function buildTakumiChildren(container: VContainer): TakumiNode[];
 export declare function measureTree(nodes: VNode[]): {
     depth: number;
     count: number;
@@ -61,5 +53,3 @@ export interface RawRenderResult {
 export declare function renderToRaw(container: VContainer, width: number, height: number, config: RenderConfig): Promise<RawRenderResult | null>;
 export declare function cropSlice(raw: Buffer, fullWidth: number, column: number, segmentWidth: number, segmentHeight: number): Buffer;
 export declare function sliceToDataUri(raw: Buffer, fullWidth: number, fullHeight: number, column: number, segmentWidth: number, segmentHeight: number): string;
-export declare function sliceToDataUriAsync(raw: Buffer, fullWidth: number, fullHeight: number, column: number, segmentWidth: number, segmentHeight: number): Promise<string>;
-export declare function renderSegmentToDataUri(container: VContainer, fullWidth: number, segmentHeight: number, column: number, segmentWidth: number, format: OutputFormat, config: RenderConfig, prebuiltTakumiChildren?: TakumiNode[]): Promise<string | null>;