@solidtv/renderer 1.3.1 → 1.3.2

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -63,7 +63,19 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
+    const clippingValid = clippingRect.valid === true;
+
+    // If the clipping rect is valid but zero-area, the node is fully clipped — skip rendering
+    if (
+      clippingValid === true &&
+      clippingRect.w === 0 &&
+      clippingRect.h === 0
+    ) {
+      return;
+    }
+
+    const hasClipping =
+      clippingValid === true && clippingRect.w !== 0 && clippingRect.h !== 0;
     const shader = node.props.shader;
     const hasShader = shader !== null;
 
@@ -124,7 +136,7 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (textureType !== TextureType.color) {
       const tintColor = parseColor(color);
-      let image: ImageBitmap | HTMLCanvasElement | HTMLImageElement;
+      let image: ImageBitmap | HTMLCanvasElement | HTMLImageElement | null;
 
       if (textureType === TextureType.subTexture) {
         image = (
@@ -134,12 +146,29 @@ export class CanvasRenderer extends CoreRenderer {
         image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
       }
 
+      // The texture can disappear while an async load/fetch is racing (e.g. 404);
+      // skip drawing this frame instead of dereferencing an invalid image object.
+      if (image === null || image === undefined) {
+        return;
+      }
+
+      const imageWidth = image.width;
+      const imageHeight = image.height;
+      if (
+        typeof imageWidth !== 'number' ||
+        typeof imageHeight !== 'number' ||
+        imageWidth <= 0 ||
+        imageHeight <= 0
+      ) {
+        return;
+      }
+
       this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
 
       const txCoords = node.textureCoords;
       if (txCoords) {
-        const ix = image.width;
-        const iy = image.height;
+        const ix = imageWidth;
+        const iy = imageHeight;
 
         let sx = txCoords.x1 * ix;
         let sy = txCoords.y1 * iy;

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -26,7 +26,6 @@ export class CanvasShaderNode<
 > extends CoreShaderNode<Props> {
   private updater: ((node: CoreNode, props?: Props) => void) | undefined =
     undefined;
-  private valueKey: string = '';
   computed: Partial<Computed> = {};
   applySNR: boolean;
   render: CanvasShaderType<Props>['render'];

package/src/core/renderers/canvas/CanvasTexture.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CanvasTexture } from './CanvasTexture.js';
+
+describe('CanvasTexture.load', () => {
+  it('fails gracefully when textureData.data is null', async () => {
+    const textureSource = {
+      textureData: { data: null },
+      state: 'initial',
+      dimensions: null,
+      setState(nextState: string) {
+        this.state = nextState;
+      },
+      freeTextureData() {
+        // no-op
+      },
+    } as any;
+
+    const memManager = {
+      setTextureMemUse() {
+        // no-op
+      },
+    } as any;
+
+    const ctxTexture = new CanvasTexture(memManager, textureSource);
+
+    await expect(ctxTexture.load()).rejects.toThrow(
+      'CanvasTexture: Texture data is null',
+    );
+    expect(textureSource.state).toBe('failed');
+  });
+});

package/src/core/renderers/canvas/CanvasTexture.ts

@@ -2,6 +2,7 @@ import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
 import { formatRgba, type IParsedColor } from '../../lib/colorParser.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
+import type { Texture } from '../../textures/Texture.js';
 
 export class CanvasTexture extends CoreContextTexture {
   protected image:
@@ -17,10 +18,23 @@ export class CanvasTexture extends CoreContextTexture {
     | undefined;
 
   async load(): Promise<void> {
+    // Capture textureData synchronously before any await - a pending
+    // freeTextureDataTask microtask could null textureSource.textureData
+    // during the first async suspension, causing onLoadRequest to fail.
+    const textureData = this.textureSource.textureData;
+    assertTruthy(textureData?.data, 'Texture data is null before load');
+
     this.textureSource.setState('loading');
 
     try {
-      const size = await this.onLoadRequest();
+      const size = await this.onLoadRequest(textureData.data);
+
+      // Guard against the texture being freed while the load was in flight
+      if (this.textureSource.state === 'freed') {
+        this.image = undefined;
+        return;
+      }
+
       this.textureSource.setState('loaded', size);
       this.textureSource.freeTextureData();
       this.updateMemSize();
@@ -63,9 +77,11 @@ export class CanvasTexture extends CoreContextTexture {
 
   getImage(
     color: IParsedColor,
-  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement | null {
     const image = this.image;
-    assertTruthy(image, 'Attempt to get unloaded image texture');
+    if (image === undefined) {
+      return null;
+    }
 
     if (color.isWhite) {
       if (this.tintCache) {
@@ -114,9 +130,21 @@ export class CanvasTexture extends CoreContextTexture {
     return canvas;
   }
 
-  private async onLoadRequest(): Promise<Dimensions> {
-    assertTruthy(this.textureSource?.textureData?.data, 'Texture data is null');
-    const { data } = this.textureSource.textureData;
+  private async onLoadRequest(
+    data: NonNullable<Texture['textureData']>['data'],
+  ): Promise<Dimensions> {
+    if (data === null) {
+      throw new Error('CanvasTexture: Texture data is null');
+    }
+
+    // CompressedData objects (KTX, PVR, ASTC) carry GPU-format mipmap buffers
+    // that cannot be decoded by Canvas2D. Reject explicitly rather than falling
+    // through silently and leaving this.image unassigned.
+    if (typeof data === 'object' && 'mipmaps' in data) {
+      throw new Error(
+        'CanvasTexture: Compressed texture data is not supported in Canvas2D render mode',
+      );
+    }
 
     // TODO: canvas from text renderer should be able to provide the canvas directly
     // instead of having to re-draw it into a new canvas...
@@ -125,7 +153,7 @@ export class CanvasTexture extends CoreContextTexture {
       canvas.width = data.width;
       canvas.height = data.height;
       const ctx = canvas.getContext('2d');
-      if (ctx) ctx.putImageData(data, 0, 0);
+      if (ctx !== null) ctx.putImageData(data, 0, 0);
       this.image = canvas;
       return { w: data.width, h: data.height };
     } else if (

package/src/core/renderers/webgl/WebGlShaderNode.ts

@@ -53,7 +53,6 @@ export class WebGlShaderNode<
   readonly program: WebGlShaderProgram;
   private updater: ((node: CoreNode, props?: Props) => void) | undefined =
     undefined;
-  private valueKey: string = '';
   uniforms: UniformCollection = {
     single: {},
     vec2: {},

package/src/core/text-rendering/CanvasTextRenderer.ts

@@ -40,10 +40,22 @@ const layoutCache = new Map<
   }
 >();
 
+// Upper bound on layoutCache entries, enforced on idle via `cleanup`.
+// Overridden from stage options in `init`. Note: the Canvas path does not
+// currently populate `layoutCache`, so this is effectively inert today and
+// exists to keep the eviction policy uniform with the SDF backend should
+// Canvas layout caching be wired up later.
+let maxLayoutCacheSize = 250;
+
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
   const dpr = stage.options.devicePhysicalPixelRatio;
 
+  const configuredCacheSize = stage.options.textLayoutCacheSize;
+  if (configuredCacheSize !== undefined) {
+    maxLayoutCacheSize = configuredCacheSize;
+  }
+
   // Drawing canvas and context
   canvas = stage.platform.createCanvas() as HTMLCanvasElement | OffscreenCanvas;
   context = canvas.getContext('2d', { willReadFrequently: true }) as
@@ -224,6 +236,19 @@ const clearLayoutCache = (): void => {
   layoutCache.clear();
 };
 
+/**
+ * Trim the layout cache back down to `maxLayoutCacheSize`, evicting the
+ * least-recently-used entries first. Called when the stage goes idle. The
+ * Canvas path does not currently populate `layoutCache`, so this is a no-op in
+ * practice today; it mirrors the SDF backend's eviction policy.
+ */
+const cleanup = (): void => {
+  while (layoutCache.size > maxLayoutCacheSize) {
+    const oldest = layoutCache.keys().next().value as string;
+    layoutCache.delete(oldest);
+  }
+};
+
 /**
  * Add quads for rendering (Canvas doesn't use quads)
  */
@@ -252,6 +277,7 @@ const CanvasTextRenderer = {
   renderQuads,
   init,
   clearLayoutCache,
+  cleanup,
 };
 
 export default CanvasTextRenderer;

package/src/core/text-rendering/SdfTextRenderer.test.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { CoreTextNodeProps } from '../CoreTextNode.js';
+
+// Mock the font handler so renderText/generateTextLayout can run without a
+// real loaded font. getFontData is only invoked on a layout-cache MISS, so the
+// call count is our probe for cache hits vs misses.
+vi.mock('./SdfFontHandler.js', () => {
+  const fontData = {
+    data: {
+      common: { base: 0, scaleW: 512, scaleH: 512, lineHeight: 50 },
+      info: { size: 42 },
+      distanceField: { distanceRange: 4 },
+    },
+    glyphMap: new Map(),
+    kernings: {},
+    atlasTexture: {},
+    metrics: {},
+    maxCharHeight: 50,
+  };
+  const metrics = {
+    ascender: 40,
+    descender: -10,
+    lineGap: 0,
+    capHeight: 30,
+    xHeight: 20,
+  };
+  return {
+    type: 'sdf',
+    init: vi.fn(),
+    getFontData: vi.fn(() => fontData),
+    getFontMetrics: vi.fn(() => metrics),
+    measureText: vi.fn((text: string) => text.length * 10),
+    getAtlas: vi.fn(() => null),
+  };
+});
+
+import SdfTextRenderer from './SdfTextRenderer.js';
+import * as SdfFontHandler from './SdfFontHandler.js';
+
+const makeProps = (text: string): CoreTextNodeProps =>
+  ({
+    text,
+    fontFamily: 'Test',
+    fontStyle: 'normal',
+    fontSize: 42,
+    letterSpacing: 0,
+    lineHeight: 0,
+    maxHeight: 0,
+    maxWidth: 100000,
+    maxLines: 0,
+    textAlign: 'left',
+    wordBreak: 'normal',
+    overflowSuffix: '',
+  } as unknown as CoreTextNodeProps);
+
+const initRenderer = (cacheSize: number): void => {
+  const fakeStage = {
+    options: { textLayoutCacheSize: cacheSize },
+    shManager: {
+      registerShaderType: vi.fn(),
+      createShader: vi.fn(() => ({})),
+    },
+  };
+  SdfTextRenderer.init(fakeStage as never);
+};
+
+const render = (text: string): void => {
+  SdfTextRenderer.renderText(makeProps(text));
+};
+
+describe('SdfTextRenderer layout cache', () => {
+  beforeEach(() => {
+    // Empty the module-level cache between tests, then reset call counts.
+    initRenderer(0);
+    SdfTextRenderer.cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('reuses the cached layout for identical strings', () => {
+    initRenderer(10);
+
+    render('Badge');
+    render('Badge');
+
+    // Second render is a cache hit: no fresh layout generation.
+    expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(1);
+  });
+
+  it('caches long strings too (no length-based skip)', () => {
+    initRenderer(10);
+    const long = 'x'.repeat(500);
+
+    render(long);
+    render(long);
+
+    // Bounded purely by the LRU cap, not by length.
+    expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(1);
+  });
+
+  it('cleanup trims to the cap and evicts least-recently-used first', () => {
+    initRenderer(2);
+
+    render('A');
+    render('B');
+    render('C');
+    // Re-access 'A' so it becomes most-recently-used; 'B' is now the LRU.
+    render('A');
+
+    SdfTextRenderer.cleanup();
+
+    vi.clearAllMocks();
+    render('B'); // evicted -> miss
+    render('A'); // survived -> hit
+    render('C'); // survived -> hit
+
+    expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(1);
+  });
+
+  it('cleanup is a no-op while under the cap', () => {
+    initRenderer(10);
+
+    render('one');
+    render('two');
+
+    SdfTextRenderer.cleanup();
+
+    vi.clearAllMocks();
+    render('one'); // still cached -> hit
+    render('two'); // still cached -> hit
+
+    expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(0);
+  });
+});

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -24,10 +24,20 @@ const type = 'sdf' as const;
 
 let sdfShader: WebGlShaderNode | null = null;
 
+// Upper bound on layoutCache entries, enforced on idle via `cleanup`.
+// Overridden from stage options in `init`. The cache is allowed to grow past
+// this during active rendering and is trimmed back to it when the stage idles.
+let maxLayoutCacheSize = 250;
+
 // Initialize the SDF text renderer
 const init = (stage: Stage): void => {
   SdfFontHandler.init();
 
+  const configuredCacheSize = stage.options.textLayoutCacheSize;
+  if (configuredCacheSize !== undefined) {
+    maxLayoutCacheSize = configuredCacheSize;
+  }
+
   // Register SDF shader with the shader manager
   stage.shManager.registerShaderType('Sdf', Sdf);
   sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
@@ -58,6 +68,11 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   const cacheKey = getLayoutCacheKey(props);
   let layout = layoutCache.get(cacheKey);
   if (layout !== undefined) {
+    // Refresh LRU recency: re-insert moves the key to the most-recently-used
+    // end so idle `cleanup` evicts genuinely cold entries first. renderText
+    // runs on text/layout change, not per frame, so this re-insert is cheap.
+    layoutCache.delete(cacheKey);
+    layoutCache.set(cacheKey, layout);
     return {
       remainingLines: 0,
       hasRemainingText: false,
@@ -357,6 +372,20 @@ const generateTextLayout = (
   };
 };
 
+/**
+ * Trim the layout cache back down to `maxLayoutCacheSize`, evicting the
+ * least-recently-used entries first. Called when the stage goes idle so this
+ * never competes with active rendering. A fresh iterator is taken each step so
+ * we always delete the current front (oldest) key without iterator-invalidation
+ * concerns; this runs at most once per idle transition and only when over cap.
+ */
+const cleanup = (): void => {
+  while (layoutCache.size > maxLayoutCacheSize) {
+    const oldest = layoutCache.keys().next().value as string;
+    layoutCache.delete(oldest);
+  }
+};
+
 /**
  * SDF Text Renderer - implements TextRenderer interface
  */
@@ -367,6 +396,7 @@ const SdfTextRenderer = {
   addQuads,
   renderQuads,
   init,
+  cleanup,
 };
 
 export default SdfTextRenderer;

package/src/core/text-rendering/TextRenderer.ts

@@ -435,6 +435,13 @@ export interface TextRenderer {
     renderProps: TextRenderProps,
   ) => void | SdfRenderOp | null;
   init: (stage: Stage) => void;
+  /**
+   * Trim internal caches back down to their configured limits.
+   * Called when the stage goes idle so cache eviction never competes with
+   * active rendering. Backends with no bounded cache may implement this as a
+   * no-op.
+   */
+  cleanup: () => void;
 }
 
 /**

package/src/core/textures/ImageTexture.ts

@@ -269,6 +269,24 @@ export class ImageTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
+    // Compressed textures are not supported by the Canvas2D renderer.
+    // Fail fast here before incurring a network fetch or binary decode.
+    if (this.txManager.renderer?.mode === 'canvas') {
+      const { src, type } = this.props;
+      if (
+        type === 'compressed' ||
+        (typeof src === 'string' && isCompressedTextureContainer(src) === true)
+      ) {
+        const err = new Error(
+          `ImageTexture: Compressed textures are not supported in Canvas2D render mode (src: ${String(
+            src,
+          )})`,
+        );
+        this.setState('failed', err);
+        return { data: null };
+      }
+    }
+
     let resp: TextureData;
     try {
       resp = await this.determineImageTypeAndLoadImage();

package/src/core/textures/SubTexture.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from 'vitest';
+import { SubTexture } from './SubTexture.js';
+import { ImageTexture } from './ImageTexture.js';
+import type { CoreTextureManager } from '../CoreTextureManager.js';
+
+const flushMicrotasks = () => Promise.resolve();
+
+describe('SubTexture lifecycle', () => {
+  it('detaches its parent-texture listeners on destroy', async () => {
+    // 'initial' state means the constructor's microtask attaches listeners
+    // without synchronously firing any of the state handlers.
+    const parent = {
+      state: 'initial',
+      dimensions: null,
+      error: null,
+      on: vi.fn(),
+      off: vi.fn(),
+    };
+    const txManager = {
+      maxRetryCount: 0,
+      platform: {},
+      resolveParentTexture: () => parent,
+    } as unknown as CoreTextureManager;
+
+    const parentImage = new ImageTexture(txManager, {} as never);
+    const sub = new SubTexture(txManager, {
+      texture: parentImage,
+      x: 0,
+      y: 0,
+      w: 10,
+      h: 10,
+    });
+
+    // Listeners are attached in a microtask after construction.
+    await flushMicrotasks();
+    expect(parent.on).toHaveBeenCalledTimes(4);
+
+    sub.destroy();
+
+    const offEvents = (parent.off.mock.calls as Array<[string]>)
+      .map((c) => c[0])
+      .sort();
+    expect(offEvents).toEqual(['failed', 'freed', 'loaded', 'loading']);
+  });
+});

package/src/core/textures/SubTexture.ts

@@ -133,6 +133,19 @@ export class SubTexture extends Texture {
     this.parentTexture.setRenderableOwner(this.subtextureId, isRenderable);
   }
 
+  override destroy(): void {
+    // Detach from the parent texture's event emitter. The parent is typically a
+    // long-lived shared atlas (preventCleanup), so without this each destroyed
+    // SubTexture — and everything its handlers capture — would be retained by
+    // the parent's listener lists for the rest of the session.
+    const parentTx = this.parentTexture;
+    parentTx.off('loading', this.onParentTxLoading);
+    parentTx.off('loaded', this.onParentTxLoaded);
+    parentTx.off('failed', this.onParentTxFailed);
+    parentTx.off('freed', this.onParentTxFreed);
+    super.destroy();
+  }
+
   override async getTextureSource(): Promise<TextureData> {
     // Check if parent texture is loaded
     return new Promise((resolve, reject) => {

package/src/core/textures/Texture.ts

@@ -240,6 +240,11 @@ export abstract class Texture extends EventEmitter {
       return false;
     }
 
+    // Don't cleanup a texture that is in the process of loading
+    if (this.state === 'loading') {
+      return false;
+    }
+
     // Don't cleanup if not renderable
     if (this.renderable === true) {
       return false;
@@ -341,6 +346,9 @@ export abstract class Texture extends EventEmitter {
    */
   free(): void {
     this.ctxTexture?.free();
+    // Null out the freed ctxTexture so a subsequent reload re-creates it via
+    // getCtxTexture() instead of reusing a stale, already-freed reference.
+    this.ctxTexture = undefined;
   }
 
   /**
@@ -370,6 +378,10 @@ export abstract class Texture extends EventEmitter {
 
     // Always free texture data regardless of state
     this.freeTextureData();
+
+    // Drop any remaining subscribers so a texture destroyed while something
+    // still holds a listener does not retain it (and its captures).
+    this.removeAllListeners();
   }
 
   /**

package/src/main-api/Renderer.ts

@@ -393,6 +393,23 @@ export interface RendererRuntimeSettings {
  * Configuration settings for {@link RendererMain}
  */
 export type RendererMainSettings = RendererRuntimeSettings & {
+  /**
+   * Maximum number of entries kept in the SDF text layout cache
+   *
+   * @remarks
+   * The SDF text renderer caches the computed glyph layout for a given
+   * `text` + font + layout-prop combination so that identical strings (e.g.
+   * repeated badges/labels) are not re-laid-out. The cache is content-keyed
+   * and shared across nodes, and is trimmed down to this many (most recently
+   * used) entries whenever the stage goes idle.
+   *
+   * Set this higher for content-dense UIs with many simultaneous unique
+   * strings, or lower to cap memory more aggressively.
+   *
+   * @defaultValue `250`
+   */
+  textLayoutCacheSize: number;
+
   /**
    * Include context call (i.e. WebGL) information in FPS updates
    *
@@ -678,6 +695,7 @@ export class RendererMain extends EventEmitter {
       fpsUpdateInterval: settings.fpsUpdateInterval || 0,
       enableClear: settings.enableClear ?? true,
       targetFPS: settings.targetFPS || 0,
+      textLayoutCacheSize: settings.textLayoutCacheSize ?? 250,
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
@@ -755,6 +773,7 @@ export class RendererMain extends EventEmitter {
       textBaselineMode: settings.textBaselineMode!,
       inspector: settings.inspector !== null,
       targetFPS: settings.targetFPS!,
+      textLayoutCacheSize: settings.textLayoutCacheSize!,
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit!,
       createImageBitmapSupport: settings.createImageBitmapSupport!,
       premultiplyAlphaHonored: settings.premultiplyAlphaHonored,