@solidtv/renderer 1.0.4 → 1.0.6

package/src/core/CoreNode.ts

@@ -13,7 +13,8 @@ import type { BufferCollection } from './renderers/webgl/internal/BufferCollecti
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { Stage } from './Stage.js';
 import {
-  type Texture,
+  Texture,
+  TextureType,
   type TextureCoords,
   type TextureFailedEventHandler,
   type TextureFreedEventHandler,
@@ -695,6 +696,38 @@ export interface CoreNodeProps {
    * @default false
    */
   preventDestroy?: boolean;
+
+  /**
+   * The name of the framework component that created this node.
+   *
+   * @remarks
+   * When set, the Inspector will create a custom HTML element with this name
+   * so that the Chrome DevTools Elements panel displays the component name
+   * instead of a generic `<div>`. The value should match the JSX component
+   * name as written in source (e.g. `"MyButton"`).
+   *
+   * This is typically injected by a Babel plugin (e.g. `jsx-locator`) and is
+   * only meaningful when the Inspector is enabled.
+   *
+   * @default `undefined`
+   */
+  componentName?: string;
+
+  /**
+   * The source file path of the framework component that created this node.
+   *
+   * @remarks
+   * When set alongside {@link componentName}, the Inspector will attach a
+   * `data-location` attribute to the DOM element, enabling click-to-source
+   * navigation from Chrome DevTools.
+   *
+   * The value should be an absolute or project-relative path to the component
+   * source file, optionally followed by `:line:column`
+   * (e.g. `"/src/components/MyButton.tsx:12:3"`).
+   *
+   * @default `undefined`
+   */
+  componentLocation?: string;
 }
 
 /**
@@ -806,51 +839,19 @@ export class CoreNode extends EventEmitter {
     let initialUpdateType =
       UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
 
-    // Fast-path assign only known keys
-    const p = (this.props = {
-      x: props.x,
-      y: props.y,
-      w: props.w,
-      h: props.h,
-      alpha: props.alpha,
-      autosize: props.autosize,
-      clipping: props.clipping,
-      color: props.color,
-      colorTop: props.colorTop,
-      colorBottom: props.colorBottom,
-      colorLeft: props.colorLeft,
-      colorRight: props.colorRight,
-      colorTl: props.colorTl,
-      colorTr: props.colorTr,
-      colorBl: props.colorBl,
-      colorBr: props.colorBr,
-      scaleX: props.scaleX,
-      scaleY: props.scaleY,
-      rotation: props.rotation,
-      pivotX: props.pivotX,
-      pivotY: props.pivotY,
-      mountX: props.mountX,
-      mountY: props.mountY,
-      mount: props.mount,
-      pivot: props.pivot,
-      zIndex: props.zIndex,
-      textureOptions: props.textureOptions,
-      data: props.data,
-      imageType: props.imageType,
-      srcX: props.srcX,
-      srcY: props.srcY,
-      srcWidth: props.srcWidth,
-      srcHeight: props.srcHeight,
-      parent: props.parent,
-      texture: null,
-      shader: null,
-      src: null,
-      rtt: false,
-      boundsMargin: null,
-      scale: null,
-      interactive: props.interactive,
-      preventDestroy: props.preventDestroy,
-    });
+    // Use the incoming props object directly — resolveNodeDefaults already
+    // creates a fresh object with a consistent shape.  Save fields that are
+    // re-applied through setters, then null them on props so the setters
+    // detect the change.
+    const { texture, shader, src, rtt, boundsMargin, interactive, parent } =
+      props;
+    const p = (this.props = props);
+    p.texture = null;
+    p.shader = null;
+    p.src = null;
+    p.rtt = false;
+    p.boundsMargin = null;
+    p.scale = null;
 
     //check if any color props are set for premultiplied color updates
     if (
@@ -873,17 +874,17 @@ export class CoreNode extends EventEmitter {
       this.zIndex = p.zIndex;
     }
 
-    if (props.parent !== null) {
-      props.parent.addChild(this);
+    if (parent !== null) {
+      parent.addChild(this);
     }
 
-    // Assign props to instances
-    this.texture = props.texture;
-    this.shader = props.shader;
-    this.src = props.src;
-    this.rtt = props.rtt;
-    this.boundsMargin = props.boundsMargin;
-    this.interactive = props.interactive;
+    // Assign saved values through setters
+    this.texture = texture;
+    this.shader = shader;
+    this.src = src;
+    this.rtt = rtt;
+    this.boundsMargin = boundsMargin;
+    this.interactive = interactive;
 
     // Initialize autosize if enabled
     if (p.autosize === true) {
@@ -2740,6 +2741,11 @@ export class CoreNode extends EventEmitter {
       this.loadTexture();
     }
 
+    if (this.texture?.type === TextureType.subTexture && this.textureLoaded) {
+      // When setting the texture value of a subtexture but the atlas is already loaded,
+      // requestRenderListUpdate is not triggered, but we still need to update the quad
+      this.isQuadDirty = true;
+    }
     this.setUpdateType(UpdateType.IsRenderable);
     this.updateIsSimple();
   }
@@ -2768,6 +2774,14 @@ export class CoreNode extends EventEmitter {
     return this.props.interactive;
   }
 
+  get componentName(): string | undefined {
+    return this.props.componentName;
+  }
+
+  get componentLocation(): string | undefined {
+    return this.props.componentLocation;
+  }
+
   setRTTUpdates(type: number) {
     this.hasRTTupdates = true;
     this.parent?.setRTTUpdates(type);
@@ -2795,6 +2809,15 @@ export class CoreNode extends EventEmitter {
         values.start = (this as any)[name] ?? 0;
         values.target = value;
         controller.progress = 0;
+
+        if (settings.adaptiveDuration === true) {
+          const now = performance.now();
+          const elapsed = now - controller.lastRunTime;
+          controller.lastRunTime = now;
+          const duration = settings.duration ?? controller.duration;
+          controller.duration = elapsed < duration ? elapsed : duration;
+        }
+
         return controller.start();
       }
     }
@@ -2810,6 +2833,14 @@ export class CoreNode extends EventEmitter {
     return controller.start();
   }
 
+  animateToTarget(prop: string): number | undefined {
+    const animation = this._animations[prop];
+    if (!animation) {
+      return undefined;
+    }
+    return animation.controller.props?.[prop]?.target;
+  }
+
   flush() {
     // no-op
   }

package/src/core/CoreTextNode.ts

@@ -6,7 +6,7 @@ import type {
   TextRenderInfo,
   SdfVertexCache,
 } from './text-rendering/TextRenderer.js';
-import { USE_RTT } from '../utils.js';
+import { USE_RTT, premultiplyColorABGR } from '../utils.js';
 import {
   CoreNode,
   CoreNodeRenderState,
@@ -239,27 +239,23 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     // Handle Canvas renderer (uses ImageData)
     if (textRendererType === 'canvas') {
       if (result.imageData === undefined) {
-        this.emit('failed', {
-          type: 'text',
-          error: new Error(
-            'Canvas text rendering failed, no image data returned',
-          ),
-        } satisfies NodeTextFailedPayload);
-        return;
-      }
-
-      this.texture = this.stage.txManager.createTexture('ImageTexture', {
-        premultiplyAlpha: true,
-        src: result.imageData as ImageData,
-      });
-      // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
-      // being detected as a renderable default color node in the next frame
-      // it will be corrected once the texture is loaded
-      this.setRenderable(false);
-
-      if (this.renderState > CoreNodeRenderState.OutOfBounds) {
-        // We do want the texture to load immediately
-        this.texture.setRenderableOwner(this._id, true);
+        // Empty text returns no imageData — mark not renderable and continue
+        // to update dimensions (w=0, h=0) rather than emitting a failure.
+        this.setRenderable(false);
+      } else {
+        this.texture = this.stage.txManager.createTexture('ImageTexture', {
+          premultiplyAlpha: true,
+          src: result.imageData as ImageData,
+        });
+        // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
+        // being detected as a renderable default color node in the next frame
+        // it will be corrected once the texture is loaded
+        this.setRenderable(false);
+
+        if (this.renderState > CoreNodeRenderState.OutOfBounds) {
+          // We do want the texture to load immediately
+          this.texture.setRenderableOwner(this._id, true);
+        }
       }
     }
 
@@ -300,8 +296,15 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         return;
     }
 
-    // Canvas renderer: use standard texture rendering via CoreNode
+    // Canvas renderer: color is baked into the texture to preserve
+    // native emoji colors. Use white tint with worldAlpha only.
     if (this._type === 'canvas') {
+      const white = premultiplyColorABGR(0xffffffff, this.worldAlpha);
+      this.premultipliedColorTl =
+        this.premultipliedColorTr =
+        this.premultipliedColorBl =
+        this.premultipliedColorBr =
+          white;
       super.renderQuads(renderer);
       return;
     }
@@ -558,6 +561,18 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
+  override get color(): number {
+    return this.props.color;
+  }
+
+  override set color(value: number) {
+    super.color = value;
+    if (this._type === 'canvas') {
+      this._layoutGenerated = false;
+      this.setUpdateType(UpdateType.Local);
+    }
+  }
+
   get forceLoad() {
     return this.textProps.forceLoad;
   }

package/src/core/CoreTextureManager.ts

@@ -340,8 +340,6 @@ export class CoreTextureManager extends EventEmitter {
    * @param immediate - Whether to prioritize the texture for immediate loading
    */
   async loadTexture(texture: Texture, priority?: boolean): Promise<void> {
-    this.stage.txMemManager.removeFromOrphanedTextures(texture);
-
     if (texture.type === TextureType.subTexture) {
       // ignore subtextures - they get loaded through their parent
       return;

package/src/core/Stage.ts

@@ -979,6 +979,9 @@ export class Stage {
       data,
       imageType: props.imageType,
       interactive: props.interactive ?? false,
+      preventDestroy: props.preventDestroy,
+      componentName: props.componentName,
+      componentLocation: props.componentLocation,
     };
   }
 

package/src/core/TextureMemoryManager.ts

@@ -98,7 +98,6 @@ export interface MemoryInfo {
 export class TextureMemoryManager {
   private memUsed = 0;
   private loadedTextures: Set<Texture> = new Set();
-  private orphanedTextures: Set<Texture> = new Set();
   private criticalThreshold: number = 124e6;
   private targetThreshold: number = 0.5;
   private cleanupInterval: number = 5000;
@@ -127,32 +126,6 @@ export class TextureMemoryManager {
     this.updateSettings(settings);
   }
 
-  /**
-   * Add a texture to the orphaned textures list
-   *
-   * @param texture - The texture to add to the orphaned textures list
-   */
-  addToOrphanedTextures(texture: Texture) {
-    // if the texture is already in the orphaned textures list add it at the end
-    if (this.orphanedTextures.has(texture)) {
-      this.orphanedTextures.delete(texture);
-    }
-
-    // If the texture can be cleaned up, add it to the orphaned textures list
-    if (texture.preventCleanup === false) {
-      this.orphanedTextures.add(texture);
-    }
-  }
-
-  /**
-   * Remove a texture from the orphaned textures list
-   *
-   * @param texture - The texture to remove from the orphaned textures list
-   */
-  removeFromOrphanedTextures(texture: Texture) {
-    this.orphanedTextures.delete(texture);
-  }
-
   /**
    * Set the memory usage of a texture
    *

package/src/core/animations/AnimationManager.ts

@@ -16,6 +16,7 @@ export interface AnimationConfig extends IAnimationController {
   manager: AnimationManager;
   node: CoreNode;
   duration: number;
+  lastRunTime: number;
   delayFor: number;
   delay: number;
   progress: number;

package/src/core/animations/CoreAnimation.ts

@@ -8,6 +8,7 @@ import type {
 
 export interface AnimationSettings {
   duration: number;
+  adaptiveDuration: boolean;
   delay: number;
   easing: string | TimingFunction;
   loop: boolean;
@@ -23,7 +24,6 @@ export function createAnimation(
 ): AnimationConfig {
   const easing = settings.easing || 'linear';
   const delay = settings.delay ?? 0;
-
   let propValues: Record<string, PropValues> | null = null;
   let shaderPropValues: Record<string, PropValues> | null = null;
 
@@ -73,6 +73,7 @@ export function createAnimation(
     shaderProps: shaderPropValues,
     stoppedResolve: null,
     stoppedPromise: null,
+    lastRunTime: settings.adaptiveDuration ? performance.now() : 0,
 
     start() {
       if (this.state !== 'running' && this.state !== 'scheduled') {

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

@@ -600,18 +600,16 @@ export class WebGlRenderer extends CoreRenderer {
 
     // Pre-compute the merged color (with alpha) packed as ABGR for
     // UNSIGNED_BYTE normalized attribute.
+    // NOTE: Do NOT premultiply RGB by alpha here — the SDF fragment shader
+    // already multiplies v_color.rgb by the computed opacity (which includes
+    // v_color.a).
     const mergedColor = mergeColorAlpha(color, worldAlpha);
     const r = mergedColor >>> 24;
     const g = (mergedColor >>> 16) & 0xff;
     const b = (mergedColor >>> 8) & 0xff;
     const a = mergedColor & 0xff;
-    // Premultiply alpha into RGB for correct blending
-    const na = a / 255;
-    const pr = (r * na) | 0;
-    const pg = (g * na) | 0;
-    const pb = (b * na) | 0;
     // Pack as ABGR uint32 (little-endian read as vec4(r,g,b,a) normalized)
-    const packedColor = ((a << 24) | (pb << 16) | (pg << 8) | pr) >>> 0;
+    const packedColor = ((a << 24) | (b << 16) | (g << 8) | r) >>> 0;
 
     // Transform matrix components (column-major 3x3)
     // Pre-multiply fontScale here to save 4 multiplications per glyph in the hot loop

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

@@ -77,6 +77,14 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   assertTruthy(canvas, 'Canvas is not initialized');
   assertTruthy(context, 'Canvas context is not available');
   assertTruthy(measureContext, 'Canvas measureContext is not available');
+
+  if (props.text.length === 0) {
+    return {
+      width: 0,
+      height: 0,
+    };
+  }
+
   // Extract already normalized properties
   const {
     text,
@@ -130,7 +138,12 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
 
   canvas.width = canvasW;
   canvas.height = canvasH;
-  context.fillStyle = 'white';
+  const color = props.color ?? 0xffffffff;
+  const r = (color >>> 24) & 0xff;
+  const g = (color >>> 16) & 0xff;
+  const b = (color >>> 8) & 0xff;
+  const a = color & 0xff;
+  context.fillStyle = `rgba(${r},${g},${b},${a / 255})`;
   context.font = font;
   context.textBaseline = 'hanging';
 

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

@@ -417,12 +417,13 @@ export const isFontLoaded = (fontFamily: string): boolean => {
  */
 export const getFontMetrics = (
   fontFamily: string,
-
   fontSize: number,
 ): NormalizedFontMetrics => {
-  const out = normalizedMetrics.get(fontFamily);
-  if (out !== undefined) {
-    return out;
+  const label = fontFamily + '_' + fontSize;
+  const metricsCache = normalizedMetrics.get(label);
+
+  if (metricsCache !== undefined) {
+    return metricsCache;
   }
   let metrics = fontCache.get(fontFamily)!.metrics;
   return processFontMetrics(fontFamily, fontSize, metrics);
@@ -433,7 +434,7 @@ export const processFontMetrics = (
   fontSize: number,
   metrics: FontMetrics,
 ): NormalizedFontMetrics => {
-  const label = fontFamily + fontSize;
+  const label = fontFamily + '_' + fontSize;
   const normalized = normalizeFontMetrics(metrics, fontSize);
   normalizedMetrics.set(label, normalized);
   return normalized;

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

@@ -32,6 +32,10 @@ const init = (stage: Stage): void => {
 };
 
 const font: FontHandler = SdfFontHandler;
+const layoutCache = new Map<string, TextLayout>();
+
+const getLayoutCacheKey = (props: CoreTextNodeProps): string =>
+  `${props.fontFamily}-${props.fontSize}-${props.letterSpacing}-${props.lineHeight}-${props.maxHeight}-${props.maxWidth}-${props.textAlign}-${props.text}`;
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -49,6 +53,18 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     };
   }
 
+  const cacheKey = getLayoutCacheKey(props);
+  let layout = layoutCache.get(cacheKey);
+  if (layout !== undefined) {
+    return {
+      remainingLines: 0,
+      hasRemainingText: false,
+      width: layout.width,
+      height: layout.height,
+      layout,
+    };
+  }
+
   // Get font cache for this font family
   const fontData = SdfFontHandler.getFontData(props.fontFamily);
   if (fontData === undefined) {
@@ -60,7 +76,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
 
   // Calculate text layout and generate glyph data for caching
-  const layout = generateTextLayout(props, fontData);
+  layout = generateTextLayout(props, fontData);
+  layoutCache.set(cacheKey, layout);
 
   // For SDF renderer, ImageData is null since we render via WebGL
   return {
@@ -68,7 +85,7 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     hasRemainingText: false,
     width: layout.width,
     height: layout.height,
-    layout, // Cache layout for addQuads
+    layout,
   };
 };
 
@@ -302,14 +319,10 @@ const generateTextLayout = (
 
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
-        codepoint,
-        glyphId: glyph.id,
         x: currentX + glyph.xoffset,
         y: currentY + glyph.yoffset,
         width: glyph.width,
         height: glyph.height,
-        xOffset: glyph.xoffset,
-        yOffset: glyph.yoffset,
         atlasX: glyph.x * invAtlasWidth,
         atlasY: glyph.y * invAtlasHeight,
         atlasWidth: glyph.width * invAtlasWidth,

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

@@ -236,41 +236,10 @@ export interface TrProps extends TrFontProps {
  * Glyph layout information for WebGL rendering
  */
 export interface GlyphLayout {
-  /**
-   * Unicode codepoint
-   */
-  codepoint: number;
-  /**
-   * Glyph ID in the font atlas
-   */
-  glyphId: number;
-  /**
-   * X position relative to text origin
-   */
   x: number;
-  /**
-   * Y position relative to text origin
-   */
   y: number;
-  /**
-   * Width of glyph in font units
-   */
   width: number;
-  /**
-   * Height of glyph in font units
-   */
   height: number;
-  /**
-   * X offset for glyph positioning
-   */
-  xOffset: number;
-  /**
-   * Y offset for glyph positioning
-   */
-  yOffset: number;
-  /**
-   * Atlas texture coordinates (normalized 0-1)
-   */
   atlasX: number;
   atlasY: number;
   atlasWidth: number;