@solidtv/renderer 1.3.1 → 1.4.0

package/src/core/Stage.ts

@@ -37,7 +37,6 @@ import {
 import { CoreRenderer } from './renderers/CoreRenderer.js';
 import { CoreTextNode, type CoreTextNodeProps } from './CoreTextNode.js';
 import { santizeCustomDataMap } from '../main-api/utils.js';
-import { pointInBound } from './lib/utils.js';
 import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
 import { Matrix3d } from './lib/Matrix3d.js';
 import { createBound, createPreloadBounds, type Bound } from './lib/utils.js';
@@ -71,11 +70,6 @@ export type StageFrameTickHandler = (
   frameTickData: FrameTickPayload,
 ) => void;
 
-export interface Point {
-  x: number;
-  y: number;
-}
-
 const autoStart = true;
 
 export class Stage {
@@ -88,7 +82,6 @@ export class Stage {
   public readonly shManager: CoreShaderManager;
   public readonly renderer: CoreRenderer;
   public readonly root: CoreNode;
-  public readonly interactiveNodes: Set<CoreNode> = new Set();
   public boundsMargin: [number, number, number, number];
   public readonly defShaderNode: CoreShaderNode | null = null;
   public strictBound: Bound;
@@ -173,7 +166,6 @@ export class Stage {
       appHeight,
       boundsMargin,
       enableContextSpy,
-      forceWebGL2,
       numImageWorkers,
       textureMemory,
       renderEngine,
@@ -244,7 +236,6 @@ export class Stage {
       stage: this,
       canvas,
       contextSpy: this.contextSpy,
-      forceWebGL2,
     });
 
     this.shManager = new CoreShaderManager(this);
@@ -254,6 +245,17 @@ export class Stage {
 
     const renderMode = this.renderer.mode || 'webgl';
 
+    // Canvas2D textures are plain JS heap objects managed by the browser GC.
+    // Threshold-based upload blocking makes no sense for JS heap — disable it
+    // by setting criticalThreshold to 0 while keeping the eviction machinery.
+    if (renderMode === 'canvas') {
+      this.txMemManager.updateSettings({
+        ...textureMemory,
+        criticalThreshold: 0,
+        doNotExceedCriticalThreshold: false,
+      });
+    }
+
     this.createDefaultTexture();
     setPremultiplyMode(renderMode);
 
@@ -509,6 +511,19 @@ export class Stage {
     );
   }
 
+  /**
+   * Trim text renderer caches back to their configured limits.
+   *
+   * Called when the stage goes idle so layout-cache eviction never competes
+   * with active rendering.
+   */
+  cleanupTextRenderers() {
+    const textRenderers = this.textRenderers;
+    for (const key in textRenderers) {
+      textRenderers[key]!.cleanup();
+    }
+  }
+
   /**
    * Start a new frame draw
    */
@@ -897,45 +912,6 @@ export class Stage {
     this.root.childUpdateType |= UpdateType.RenderBounds;
   }
 
-  /** Find all nodes at a given point
-   * @param data
-   */
-  findNodesAtPoint(data: Point): CoreNode[] {
-    const x = data.x / this.options.deviceLogicalPixelRatio;
-    const y = data.y / this.options.deviceLogicalPixelRatio;
-    const nodes: CoreNode[] = [];
-    for (const node of this.interactiveNodes) {
-      if (node.isRenderable === false) {
-        continue;
-      }
-      if (pointInBound(x, y, node.renderBound!) === true) {
-        nodes.push(node);
-      }
-    }
-    return nodes;
-  }
-
-  /**
-   * Find the top node at a given point
-   * @param data
-   * @returns
-   */
-  getNodeFromPosition(data: Point): CoreNode | null {
-    const nodes: CoreNode[] = this.findNodesAtPoint(data);
-    if (nodes.length === 0) {
-      return null;
-    }
-
-    //get last node in array (as top node)
-    let topNode = nodes[nodes.length - 1] as CoreNode;
-    for (let i = 0; i < nodes.length; i++) {
-      if (nodes[i]!.zIndex > topNode.zIndex) {
-        topNode = nodes[i]!;
-      }
-    }
-    return topNode || null;
-  }
-
   /**
    * add node to timeNodes arrays
    * @param node
@@ -1062,7 +1038,6 @@ export class Stage {
       rtt: props.rtt ?? false,
       data,
       imageType: props.imageType,
-      interactive: props.interactive ?? false,
       preventDestroy: props.preventDestroy,
       componentName: props.componentName,
       componentLocation: props.componentLocation,

package/src/core/TextureMemoryManager.ts

@@ -148,7 +148,7 @@ export class TextureMemoryManager {
       this.loadedTextures.add(texture);
     }
 
-    if (this.memUsed > this.criticalThreshold) {
+    if (this.criticalThreshold > 0 && this.memUsed > this.criticalThreshold) {
       this.criticalCleanupRequested = true;
     }
   }
@@ -156,13 +156,14 @@ export class TextureMemoryManager {
   checkCleanup() {
     return (
       this.criticalCleanupRequested ||
-      (this.memUsed > this.targetThreshold &&
+      (this.criticalThreshold > 0 &&
+        this.memUsed > this.targetThreshold &&
         this.frameTime - this.lastCleanupTime >= this.cleanupInterval)
     );
   }
 
   checkCriticalCleanup() {
-    return this.memUsed > this.criticalThreshold;
+    return this.criticalThreshold > 0 && this.memUsed > this.criticalThreshold;
   }
 
   /**

package/src/core/lib/ImageWorker.test.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ImageWorkerManager } from './ImageWorker.js';
+import type { CreateImageBitmapSupport } from './validateImageBitmap.js';
+
+/**
+ * Minimal Web Worker stand-in. The real Worker spawns a thread that parses the
+ * blob script; here we only care about how many are constructed and when, so we
+ * record every instance and never auto-respond (so `getImage` calls stay
+ * "in flight" and accumulate load, simulating concurrency).
+ */
+class FakeWorker {
+  static instances: FakeWorker[] = [];
+  static reset() {
+    FakeWorker.instances = [];
+  }
+  onmessage: ((e: unknown) => void) | null = null;
+  onerror: ((e: unknown) => void) | null = null;
+  onmessageerror: ((e: unknown) => void) | null = null;
+  postMessage = vi.fn();
+  terminate = vi.fn();
+  constructor(public url: string) {
+    FakeWorker.instances.push(this);
+  }
+}
+
+const support: CreateImageBitmapSupport = {
+  basic: true,
+  options: true,
+  full: true,
+  premultiplyHonored: true,
+};
+
+let createObjectURL: ReturnType<typeof vi.fn>;
+let revokeObjectURL: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  FakeWorker.reset();
+  createObjectURL = vi.fn(() => 'blob:fake-url');
+  revokeObjectURL = vi.fn();
+  // The manager builds the worker source via Blob + object URL, then spawns
+  // Workers. None of these exist in the node test env, so stub them.
+  vi.stubGlobal(
+    'Blob',
+    class {
+      constructor(public parts: unknown[], public opts: unknown) {}
+    },
+  );
+  vi.stubGlobal('URL', { createObjectURL, revokeObjectURL });
+  vi.stubGlobal('self', { URL: { createObjectURL, revokeObjectURL } });
+  vi.stubGlobal('Worker', FakeWorker);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+const load = (mgr: ImageWorkerManager) =>
+  void mgr.getImage('img.png', null, null, null, null, null);
+
+describe('ImageWorkerManager pool spawning', () => {
+  it('does not spawn any workers at construction', () => {
+    new ImageWorkerManager(3, support);
+    // Spawning is lazy — nothing happens until the first image request.
+    expect(FakeWorker.instances.length).toBe(0);
+  });
+
+  it('spawns the whole pool at once on the first image request', () => {
+    const mgr = new ImageWorkerManager(3, support);
+    load(mgr);
+    expect(FakeWorker.instances.length).toBe(3);
+  });
+
+  it('does not respawn the pool on subsequent requests', () => {
+    const mgr = new ImageWorkerManager(3, support);
+    load(mgr); // spawns the pool
+    expect(FakeWorker.instances.length).toBe(3);
+    // Subsequent requests reuse the existing pool — no new workers.
+    load(mgr);
+    load(mgr);
+    load(mgr);
+    expect(FakeWorker.instances.length).toBe(3);
+  });
+
+  it('spawns exactly maxWorkers when that is 1', () => {
+    const mgr = new ImageWorkerManager(1, support);
+    load(mgr);
+    expect(FakeWorker.instances.length).toBe(1);
+    load(mgr);
+    load(mgr);
+    expect(FakeWorker.instances.length).toBe(1);
+  });
+
+  it('serializes the worker source once, reusing the blob per worker', () => {
+    const mgr = new ImageWorkerManager(3, support);
+    load(mgr);
+    // One object URL created+revoked per spawned worker (3), serialized once.
+    expect(createObjectURL).toHaveBeenCalledTimes(3);
+    expect(revokeObjectURL).toHaveBeenCalledTimes(3);
+  });
+
+  it('routes each request to a worker via postMessage', () => {
+    const mgr = new ImageWorkerManager(2, support);
+    load(mgr);
+    expect(FakeWorker.instances[0]!.postMessage).toHaveBeenCalledTimes(1);
+  });
+});

package/src/core/lib/ImageWorker.ts

@@ -177,20 +177,32 @@ export class ImageWorkerManager {
   workers: Worker[] = [];
   workerLoad: number[] = [];
   nextId = 0;
+  /** Upper bound on the pool size, from the `numImageWorkers` setting. */
+  private readonly maxWorkers: number;
+  /** Retained so the worker source is serialized once, when the pool spawns. */
+  private workerBlob: Blob | null = null;
+  private readonly createImageBitmapSupport: CreateImageBitmapSupport;
 
   constructor(
     numImageWorkers: number,
     createImageBitmapSupport: CreateImageBitmapSupport,
   ) {
-    this.workers = this.createWorkers(
-      numImageWorkers,
-      createImageBitmapSupport,
-    );
-    this.workers.forEach((worker, index) => {
-      worker.onmessage = (event) => this.handleMessage(event, index);
-      worker.onerror = (event) => this.handleWorkerError(event, index);
-      worker.onmessageerror = (event) => this.handleWorkerError(event, index);
-    });
+    this.maxWorkers = numImageWorkers;
+    this.createImageBitmapSupport = createImageBitmapSupport;
+  }
+
+  /**
+   * Build the shared worker source once and spawn the full pool in a single
+   * burst. Called lazily on the first image request. No-op once spawned.
+   */
+  private spawnWorkers(): void {
+    if (this.workers.length > 0) {
+      return;
+    }
+    this.workerBlob = this.createWorkerBlob(this.createImageBitmapSupport);
+    for (let i = 0; i < this.maxWorkers; i++) {
+      this.spawnWorker();
+    }
   }
 
   private handleMessage(event: MessageEvent, workerIndex: number) {
@@ -231,10 +243,9 @@ export class ImageWorkerManager {
     this.workerLoad[workerIndex] = 0;
   }
 
-  private createWorkers(
-    numWorkers = 1,
+  private createWorkerBlob(
     createImageBitmapSupport: CreateImageBitmapSupport,
-  ): Worker[] {
+  ): Blob {
     let workerCode = `(${createImageWorker.toString()})()`;
 
     // Replace placeholders with actual initialization values
@@ -265,19 +276,39 @@ export class ImageWorkerManager {
     }
 
     workerCode = workerCode.replace('"use strict";', '');
-    const blob: Blob = new Blob([workerCode], {
+    return new Blob([workerCode], {
       type: 'application/javascript',
     });
-    const urlFactory = self.URL ? URL : webkitURL;
-    const blobURL: string = urlFactory.createObjectURL(blob);
-    const workers: Worker[] = [];
-    for (let i = 0; i < numWorkers; i++) {
-      workers.push(new Worker(blobURL));
-      this.workerLoad.push(0);
+  }
+
+  /**
+   * Spawn a single worker from the shared blob and wire up its handlers.
+   * No-op once the pool has reached `maxWorkers`.
+   */
+  private spawnWorker(): void {
+    if (this.workerBlob === null || this.workers.length >= this.maxWorkers) {
+      return;
     }
-    // Workers retain the script; the URL itself is no longer needed.
+
+    const index = this.workers.length;
+    const urlFactory = self.URL ? URL : webkitURL;
+    const blobURL: string = urlFactory.createObjectURL(this.workerBlob);
+    const worker = new Worker(blobURL);
+    // The worker retains the script after construction; the URL is no longer
+    // needed once the Worker has been created from it.
     urlFactory.revokeObjectURL(blobURL);
-    return workers;
+
+    worker.onmessage = (event) => this.handleMessage(event, index);
+    worker.onerror = (event) => this.handleWorkerError(event, index);
+    worker.onmessageerror = (event) => this.handleWorkerError(event, index);
+
+    this.workers.push(worker);
+    this.workerLoad.push(0);
+
+    // Pool is full — the blob will never be needed again, so release it.
+    if (this.workers.length >= this.maxWorkers) {
+      this.workerBlob = null;
+    }
   }
 
   private getNextWorkerIndex(): number {
@@ -311,7 +342,14 @@ export class ImageWorkerManager {
   ): Promise<TextureData> {
     return new Promise((resolve, reject) => {
       try {
-        const nextWorkerIndex = this.getNextWorkerIndex();
+        let nextWorkerIndex = this.getNextWorkerIndex();
+        if (nextWorkerIndex === -1) {
+          // Pool not spawned yet — spin up all workers at once on the first
+          // image request, off the boot/first-render critical path.
+          this.spawnWorkers();
+          nextWorkerIndex = this.getNextWorkerIndex();
+        }
+
         if (nextWorkerIndex === -1) {
           reject(new Error('No image workers available'));
           return;

package/src/core/lib/WebGlContextWrapper.ts

@@ -6,13 +6,12 @@ import type {
   Vec3,
   Vec4,
 } from '../renderers/webgl/internal/ShaderUtils.js';
-import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
 
 /**
  * Optimized WebGL Context Wrapper
  *
  * @remarks
- * This class contains the subset of the WebGLRenderingContext & WebGL2RenderingContext
+ * This class contains the subset of the WebGLRenderingContext
  * API that is used by the renderer. Select high volume WebGL methods include
  * caching optimizations to avoid making WebGL calls if the state is already set
  * to the desired value.
@@ -94,56 +93,40 @@ export class WebGlContextWrapper {
   public readonly INVALID_OPERATION: number;
   //#endregion WebGL Enums
 
-  constructor(private gl: WebGLRenderingContext | WebGL2RenderingContext) {
-    // The following code extracts the current state of the WebGL context
-    // to our local JavaScript cached version of it. This is so we can
-    // avoid making WebGL calls if we don't need to.
-    // We could assume that the WebGL context is in a default state, but
-    // in the future we may want to support restoring a broken WebGL context
-    // and this will help with that.
-    this.activeTextureUnit =
-      (gl.getParameter(gl.ACTIVE_TEXTURE) as number) - gl.TEXTURE0;
+  constructor(private gl: WebGLRenderingContext) {
+    // A freshly created WebGL context is in a fully specified default state.
+    // Rather than reading that state back with getParameter/isEnabled — each a
+    // synchronous CPU<->GPU round-trip, and previously ~one per texture unit
+    // (16-32) just to enumerate the bindings — we seed the cache with those
+    // known defaults. The engine never restores a lost context in place (it
+    // reloads the app on `contextLost`), so there is no live state to recover.
+    this.activeTextureUnit = 0;
     const maxTextureUnits = gl.getParameter(
       gl.MAX_TEXTURE_IMAGE_UNITS,
     ) as number;
-    // save current texture units
-    this.texture2dUnits = new Array<undefined>(maxTextureUnits)
-      .fill(undefined)
-      .map((_, i) => {
-        this.activeTexture(i);
-        return gl.getParameter(gl.TEXTURE_BINDING_2D) as WebGLTexture;
-      });
-    // restore active texture unit
-    this.activeTexture(this.activeTextureUnit);
-    this.scissorEnabled = gl.isEnabled(gl.SCISSOR_TEST);
-
-    const scissorBox = gl.getParameter(gl.SCISSOR_BOX) as [
-      number,
-      number,
-      number,
-      number,
-    ];
-    this.scissorX = scissorBox[0];
-    this.scissorY = scissorBox[1];
-    this.scissorWidth = scissorBox[2];
-    this.scissorHeight = scissorBox[3];
-
-    this.blendEnabled = gl.isEnabled(gl.BLEND);
-    this.blendSrcRgb = gl.getParameter(gl.BLEND_SRC_RGB) as number;
-    this.blendDstRgb = gl.getParameter(gl.BLEND_DST_RGB) as number;
-    this.blendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA) as number;
-    this.blendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA) as number;
-
-    this.boundArrayBuffer = gl.getParameter(
-      gl.ARRAY_BUFFER_BINDING,
-    ) as WebGLBuffer;
-    this.boundElementArrayBuffer = gl.getParameter(
-      gl.ELEMENT_ARRAY_BUFFER_BINDING,
-    ) as WebGLBuffer;
-
-    this.curProgram = gl.getParameter(
-      gl.CURRENT_PROGRAM,
-    ) as WebGLProgram | null;
+    // All texture units start unbound (TEXTURE_BINDING_2D === null).
+    this.texture2dUnits = new Array<WebGLTexture | null>(maxTextureUnits).fill(
+      null,
+    );
+
+    // SCISSOR_TEST disabled; SCISSOR_BOX defaults to the full drawing buffer.
+    this.scissorEnabled = false;
+    this.scissorX = 0;
+    this.scissorY = 0;
+    this.scissorWidth = gl.drawingBufferWidth;
+    this.scissorHeight = gl.drawingBufferHeight;
+
+    // BLEND disabled; blend func defaults to (ONE, ZERO) for both RGB and alpha.
+    this.blendEnabled = false;
+    this.blendSrcRgb = gl.ONE;
+    this.blendDstRgb = gl.ZERO;
+    this.blendSrcAlpha = gl.ONE;
+    this.blendDstAlpha = gl.ZERO;
+
+    // No buffers or program bound on a fresh context.
+    this.boundArrayBuffer = null;
+    this.boundElementArrayBuffer = null;
+    this.curProgram = null;
 
     this.canvas = gl.canvas;
 
@@ -175,9 +158,6 @@ export class WebGlContextWrapper {
     this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
     this.ONE = gl.ONE;
     this.ONE_MINUS_SRC_ALPHA = gl.ONE_MINUS_SRC_ALPHA;
-    this.MAX_VERTEX_TEXTURE_IMAGE_UNITS = gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS;
-    this.TRIANGLES = gl.TRIANGLES;
-    this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
     this.VERTEX_SHADER = gl.VERTEX_SHADER;
     this.FRAGMENT_SHADER = gl.FRAGMENT_SHADER;
     this.STATIC_DRAW = gl.STATIC_DRAW;
@@ -188,15 +168,6 @@ export class WebGlContextWrapper {
     this.INVALID_ENUM = gl.INVALID_ENUM;
     this.INVALID_OPERATION = gl.INVALID_OPERATION;
   }
-  /**
-   * Returns true if the WebGL context is WebGL2
-   *
-   * @returns
-   */
-  isWebGl2() {
-    return isWebGl2(this.gl);
-  }
-
   /**
    * ```
    * gl.activeTexture(textureUnit + gl.TEXTURE0);
@@ -1109,33 +1080,6 @@ export class WebGlContextWrapper {
     return this.gl.getError();
   }
 
-  /**
-   * ```
-   * gl.createVertexArray();
-   * ```
-   *
-   * @returns
-   */
-  createVertexArray() {
-    if (this.gl instanceof WebGL2RenderingContext) {
-      return this.gl.createVertexArray();
-    }
-    return undefined;
-  }
-
-  /**
-   * ```
-   * gl.bindVertexArray(vertexArray);
-   * ```
-   *
-   * @param vertexArray
-   */
-  bindVertexArray(vertexArray: WebGLVertexArrayObject | null) {
-    if (this.gl instanceof WebGL2RenderingContext) {
-      this.gl.bindVertexArray(vertexArray);
-    }
-  }
-
   /**
    * ```
    * gl.getAttribLocation(program, name);
@@ -1341,19 +1285,6 @@ export class WebGlContextWrapper {
     }
   }
 
-  /**
-   * ```
-   * gl.deleteVertexArray(vertexArray);
-   * ```
-   *
-   * @param vertexArray - The vertex array object to delete
-   */
-  deleteVertexArray(vertexArray: WebGLVertexArrayObject) {
-    if (this.isWebGl2()) {
-      (this.gl as WebGL2RenderingContext).deleteVertexArray(vertexArray);
-    }
-  }
-
   /**
    * Check for WebGL errors and return error information
    * @param operation Description of the operation for error reporting

package/src/core/lib/utils.ts

@@ -251,10 +251,6 @@ export function boundLargeThanBound(bound1: Bound, bound2: Bound) {
   );
 }
 
-export function pointInBound(x: number, y: number, bound: Bound) {
-  return !(x < bound.x1 || x > bound.x2 || y < bound.y1 || y > bound.y2);
-}
-
 export function isBoundPositive(bound: Bound): boolean {
   return bound.x1 < bound.x2 && bound.y1 < bound.y2;
 }

package/src/core/platforms/web/WebPlatform.outOfMemory.test.ts

@@ -19,6 +19,7 @@ function makeIdleStage(outOfMemory: boolean) {
     drawFrame: vi.fn(),
     flushFrameEvents: vi.fn(),
     shManager: { cleanup: vi.fn() },
+    cleanupTextRenderers: vi.fn(),
     eventBus: { emit: vi.fn() },
     txMemManager: {
       checkCleanup: vi.fn(() => false),

package/src/core/platforms/web/WebPlatform.ts

@@ -86,6 +86,7 @@ export class WebPlatform extends Platform {
             stage.txMemManager.handleOutOfMemory();
           }
           stage.shManager.cleanup();
+          stage.cleanupTextRenderers();
           stage.eventBus.emit('idle');
           isIdle = true;
         }

package/src/core/renderers/CoreRenderer.ts

@@ -10,7 +10,6 @@ export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
   contextSpy: ContextSpy | null;
-  forceWebGL2: boolean;
 }
 
 export interface BufferInfo {

package/src/core/renderers/CoreShaderNode.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { CoreShaderNode } from './CoreShaderNode.js';
+import type { Stage } from '../Stage.js';
+import type { CoreShaderType } from './CoreShaderNode.js';
+
+const makeNode = (mutate: ReturnType<typeof vi.fn>) => {
+  const stage = {
+    shManager: { mutateShaderValueUsage: mutate },
+  } as unknown as Stage;
+  return new CoreShaderNode(
+    'test',
+    { time: undefined } as CoreShaderType,
+    stage,
+  );
+};
+
+describe('CoreShaderNode.detachNode', () => {
+  it('releases the held value-cache key so idle cleanup can evict it', () => {
+    const mutate = vi.fn();
+    const node = makeNode(mutate);
+    node.valueKey = 'color:1;node-width:10node-height:10';
+
+    node.detachNode();
+
+    expect(mutate).toHaveBeenCalledTimes(1);
+    expect(mutate).toHaveBeenCalledWith(
+      'color:1;node-width:10node-height:10',
+      -1,
+    );
+    // Key is cleared so a double-detach can't decrement twice.
+    expect(node.valueKey).toBe('');
+  });
+
+  it('is a no-op when no value key is held', () => {
+    const mutate = vi.fn();
+    const node = makeNode(mutate);
+
+    node.detachNode();
+
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it('does not double-decrement on repeated detach', () => {
+    const mutate = vi.fn();
+    const node = makeNode(mutate);
+    node.valueKey = 'k';
+
+    node.detachNode();
+    node.detachNode();
+
+    expect(mutate).toHaveBeenCalledTimes(1);
+  });
+});