@solidtv/renderer 1.0.8 → 1.1.1

package/src/core/CoreTextureManager.ts

@@ -281,12 +281,21 @@ export class CoreTextureManager extends EventEmitter {
       );
     } else {
       console.warn(
-        '[Lightning] Imageworker is 0 or not supported on this browser. Image loading will be slower.',
+        '[Lightning] Image worker count is 0 or workers are not supported on this browser. Image loading will be slower.',
       );
     }
 
     this.initialized = true;
     this.emit('initialized');
+
+    // Anything that arrived before initialization completed is now safe to
+    // process. Without this, queued textures would sit until the next frame
+    // tick happens to call processSome().
+    if (this.uploadTextureQueue.size > 0) {
+      this.processSome(Infinity).catch((err) => {
+        console.error('Failed to drain pre-init texture queue:', err);
+      });
+    }
   }
 
   /**
@@ -295,6 +304,9 @@ export class CoreTextureManager extends EventEmitter {
    * @param texture - The texture to upload
    */
   enqueueUploadTexture(texture: Texture): void {
+    if (texture.state === 'failed' || texture.state === 'freed') {
+      return;
+    }
     this.uploadTextureQueue.add(texture);
   }
 
@@ -308,7 +320,6 @@ export class CoreTextureManager extends EventEmitter {
     textureType: Type,
     props: ExtractProps<TextureMap[Type]>,
   ): InstanceType<TextureMap[Type]> {
-    let texture: Texture | undefined;
     const TextureClass = this.txConstructors[textureType];
     if (!TextureClass) {
       throw new TextureError(
@@ -316,20 +327,26 @@ export class CoreTextureManager extends EventEmitter {
         `Texture type "${textureType}" is not registered`,
       );
     }
-    const resolvedProps = TextureClass.resolveDefaults(props as any);
-    const cacheKey = TextureClass.makeCacheKey(resolvedProps as any);
-    if (cacheKey && this.keyCache.has(cacheKey)) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      texture = this.keyCache.get(cacheKey)!;
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-      texture = new TextureClass(this, resolvedProps as any);
 
-      if (cacheKey) {
-        this.initTextureToCache(texture, cacheKey);
+    // Cache key is computed from raw props (each Texture's makeCacheKey
+    // inlines its own defaults) so we can skip the resolveDefaults
+    // allocation on a cache hit.
+    const cacheKey = TextureClass.makeCacheKey(props as any);
+    if (cacheKey) {
+      const cached = this.keyCache.get(cacheKey);
+      if (cached) {
+        return cached as InstanceType<TextureMap[Type]>;
       }
     }
 
+    const resolvedProps = TextureClass.resolveDefaults(props as any);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+    const texture = new TextureClass(this, resolvedProps as any);
+
+    if (cacheKey) {
+      this.initTextureToCache(texture, cacheKey);
+    }
+
     return texture as InstanceType<TextureMap[Type]>;
   }
 
@@ -381,7 +398,10 @@ export class CoreTextureManager extends EventEmitter {
         console.error(`Failed to upload texture:`, err);
         texture.setState(
           'failed',
-          new TextureError(TextureErrorCode.TEXTURE_DATA_NULL),
+          new TextureError(
+            TextureErrorCode.TEXTURE_UPLOAD_FAILED,
+            err instanceof Error ? err.message : undefined,
+          ),
         );
       });
       return;
@@ -432,7 +452,7 @@ export class CoreTextureManager extends EventEmitter {
     }
 
     const coreContext = texture.loadCtxTexture();
-    if (coreContext !== null && coreContext.state === 'loaded') {
+    if (coreContext.state === 'loaded') {
       texture.setState('loaded');
       return;
     }
@@ -460,24 +480,83 @@ export class CoreTextureManager extends EventEmitter {
     const platform = this.platform;
     const startTime = platform.getTimeStamp();
 
-    // Process uploads - await each upload to prevent GPU overload
+    // Decode / fetch ("getTextureData") is IO-bound and parallelisable across
+    // image workers, while GPU upload is effectively serial. Keep a small
+    // sliding window of in-flight data fetches so the next decode runs while
+    // we're uploading the current one.
+    const prefetchLimit = Math.max(1, this.numImageWorkers);
+    const pending: Array<{ texture: Texture; data: Promise<unknown> }> = [];
+
+    // Helper avoids TS narrowing `texture.state` permanently after the first
+    // discriminated check — the property is mutable and can transition across
+    // awaits, so we need to re-read it freshly each time.
+    const isDead = (texture: Texture): boolean =>
+      texture.state === 'failed' || texture.state === 'freed';
+
+    const fillPrefetch = () => {
+      while (
+        pending.length < prefetchLimit &&
+        this.uploadTextureQueue.size > 0
+      ) {
+        const [texture] = this.uploadTextureQueue;
+        if (!texture) break;
+        this.uploadTextureQueue.delete(texture);
+
+        if (isDead(texture)) {
+          continue;
+        }
+
+        // Swallow the rejection here so an early failure doesn't surface as
+        // an unhandled promise rejection while it sits in the prefetch
+        // window; we re-check state after awaiting.
+        const data =
+          texture.textureData === null
+            ? texture.getTextureData().catch((err) => {
+                console.error('Failed to fetch texture data:', err);
+                return null;
+              })
+            : Promise.resolve(texture.textureData);
+
+        pending.push({ texture, data });
+      }
+    };
+
+    fillPrefetch();
+
     while (
-      this.uploadTextureQueue.size > 0 &&
+      pending.length > 0 &&
       platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
-      const [texture] = this.uploadTextureQueue;
-      if (!texture) break;
-      this.uploadTextureQueue.delete(texture);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const next = pending.shift()!;
+      // Top up the prefetch window before awaiting — the next decode starts
+      // now and overlaps with this upload.
+      fillPrefetch();
+
+      if (isDead(next.texture)) {
+        continue;
+      }
+
       try {
-        if (texture.textureData === null) {
-          await texture.getTextureData();
+        await next.data;
+        if (isDead(next.texture)) {
+          continue;
         }
-        await this.uploadTexture(texture);
+        await this.uploadTexture(next.texture);
       } catch (error) {
         console.error('Failed to upload texture:', error);
         // Continue with next texture instead of stopping entire queue
       }
     }
+
+    // Time ran out before we got to these. Put them back so we don't lose
+    // them — their getTextureData() is already in flight and will populate
+    // `textureData` for the next tick.
+    for (const { texture } of pending) {
+      if (!isDead(texture)) {
+        this.uploadTextureQueue.add(texture);
+      }
+    }
   }
 
   public hasUpdates(): boolean {

package/src/core/Stage.ts

@@ -750,15 +750,67 @@ export class Stage {
     return null;
   }
 
-  createNode(props: Partial<CoreNodeProps>) {
-    const resolvedProps = this.resolveNodeDefaults(props);
+  createNode(props: Partial<CoreNodeProps>, resolved = false) {
+    // When `resolved` is true, the caller (typically a framework integration
+    // like solid-tv) built `props` via `createNodeProps` and filled it in
+    // over time.  CoreNode adopts that bag directly — no second resolution
+    // pass and no second allocation.
+    const resolvedProps = resolved
+      ? (props as CoreNodeProps)
+      : this.resolveNodeDefaults(props);
     return new CoreNode(this, resolvedProps);
   }
 
-  createTextNode(props: Partial<CoreTextNodeProps>) {
+  createTextNode(props: Partial<CoreTextNodeProps>, resolved = false) {
+    const resolvedProps = resolved
+      ? (props as CoreTextNodeProps)
+      : this.resolveTextNodeDefaults(props);
+
+    const resolvedTextRenderer = this.resolveTextRenderer(
+      resolvedProps,
+      resolvedProps.textRendererOverride as keyof TextRenderers | null,
+    );
+
+    if (!resolvedTextRenderer) {
+      throw new Error(
+        `No compatible text renderer found for ${resolvedProps.fontFamily}`,
+      );
+    }
+
+    return new CoreTextNode(this, resolvedProps, resolvedTextRenderer);
+  }
+
+  /**
+   * Allocate a fully-resolved CoreNodeProps bag — the same shape and
+   * defaults the renderer would otherwise build inside `createNode`.
+   *
+   * Frameworks (e.g. solid-tv) call this once per node at construction
+   * time, fill it in as user props flow in, then pass it back via
+   * `createNode(props, true)`.  The renderer adopts the bag directly:
+   * one allocation instead of two, and a stable hidden class for the
+   * node's lifetime.
+   */
+  createNodeProps(initial?: Partial<CoreNodeProps>): CoreNodeProps {
+    return this.resolveNodeDefaults(initial ?? {});
+  }
+
+  /**
+   * Allocate a fully-resolved CoreTextNodeProps bag.  See
+   * {@link createNodeProps}.
+   */
+  createTextNodeProps(initial?: Partial<CoreTextNodeProps>): CoreTextNodeProps {
+    return this.resolveTextNodeDefaults(initial ?? {});
+  }
+
+  /**
+   * Apply text-specific defaults on top of a base CoreNodeProps build.
+   * Shared by `createTextNode` and `createTextNodeProps`.
+   */
+  protected resolveTextNodeDefaults(
+    props: Partial<CoreTextNodeProps>,
+  ): CoreTextNodeProps {
     const fontSize = props.fontSize || 16;
     const resolvedProps = this.resolveNodeDefaults(props) as CoreTextNodeProps;
-
     resolvedProps.text = props.text ?? '';
     resolvedProps.textRendererOverride = props.textRendererOverride ?? null;
     resolvedProps.fontSize = fontSize;
@@ -776,19 +828,7 @@ export class Stage {
     resolvedProps.maxWidth = props.maxWidth || 0;
     resolvedProps.maxHeight = props.maxHeight || 0;
     resolvedProps.forceLoad = props.forceLoad || false;
-
-    const resolvedTextRenderer = this.resolveTextRenderer(
-      resolvedProps,
-      resolvedProps.textRendererOverride as keyof TextRenderers | null,
-    );
-
-    if (!resolvedTextRenderer) {
-      throw new Error(
-        `No compatible text renderer found for ${resolvedProps.fontFamily}`,
-      );
-    }
-
-    return new CoreTextNode(this, resolvedProps, resolvedTextRenderer);
+    return resolvedProps;
   }
 
   setBoundsMargin(value: number | [number, number, number, number]) {

package/src/core/TextureError.ts

@@ -2,6 +2,7 @@ export enum TextureErrorCode {
   MEMORY_THRESHOLD_EXCEEDED = 'MEMORY_THRESHOLD_EXCEEDED',
   TEXTURE_DATA_NULL = 'TEXTURE_DATA_NULL',
   TEXTURE_TYPE_NOT_REGISTERED = 'TEXTURE_TYPE_NOT_REGISTERED',
+  TEXTURE_UPLOAD_FAILED = 'TEXTURE_UPLOAD_FAILED',
 }
 
 const defaultMessages: Record<TextureErrorCode, string> = {
@@ -9,6 +10,7 @@ const defaultMessages: Record<TextureErrorCode, string> = {
   [TextureErrorCode.TEXTURE_DATA_NULL]: 'Texture data is null',
   [TextureErrorCode.TEXTURE_TYPE_NOT_REGISTERED]:
     'Texture type is not registered',
+  [TextureErrorCode.TEXTURE_UPLOAD_FAILED]: 'Texture upload failed',
 };
 
 export class TextureError extends Error {

package/src/core/lib/ImageWorker.ts

@@ -67,7 +67,7 @@ function createImageWorker() {
 
         var blob = xhr.response;
         var withAlphaChannel =
-          premultiplyAlpha !== undefined
+          premultiplyAlpha !== undefined && premultiplyAlpha !== null
             ? premultiplyAlpha
             : hasAlphaChannel(blob.type);
 
@@ -83,7 +83,7 @@ function createImageWorker() {
             imageOrientation: 'none',
           })
             .then(function (data) {
-              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+              resolve({ data: data, premultiplyAlpha: withAlphaChannel });
             })
             .catch(function (error) {
               reject(error);
@@ -91,13 +91,13 @@ function createImageWorker() {
           return;
         } else if (
           supportsOptionsCreateImageBitmap === false &&
-          supportsOptionsCreateImageBitmap === false
+          supportsFullCreateImageBitmap === false
         ) {
           // Fallback for browsers that do not support createImageBitmap with options
           // this is supported for Chrome v50 to v52/54 that doesn't support options
           createImageBitmap(blob)
             .then(function (data) {
-              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+              resolve({ data: data, premultiplyAlpha: withAlphaChannel });
             })
             .catch(function (error) {
               reject(error);
@@ -109,7 +109,7 @@ function createImageWorker() {
             imageOrientation: 'none',
           })
             .then(function (data) {
-              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+              resolve({ data: data, premultiplyAlpha: withAlphaChannel });
             })
             .catch(function (error) {
               reject(error);
@@ -156,7 +156,6 @@ function createImageWorker() {
 /* eslint-enable */
 
 export class ImageWorkerManager {
-  imageWorkersEnabled = true;
   messageManager: Record<number, MessageCallback> = {};
   workers: Worker[] = [];
   workerLoad: number[] = [];
@@ -172,6 +171,8 @@ export class ImageWorkerManager {
     );
     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);
     });
   }
 
@@ -194,6 +195,25 @@ export class ImageWorkerManager {
     }
   }
 
+  private handleWorkerError(event: Event | ErrorEvent, workerIndex: number) {
+    const message =
+      event instanceof ErrorEvent && event.message
+        ? event.message
+        : 'Image worker encountered an unrecoverable error';
+
+    // Reject all pending requests; we cannot map a worker-level crash to a
+    // specific message id, so fail everything outstanding to avoid hangs.
+    for (const id in this.messageManager) {
+      const msg = this.messageManager[id];
+      if (msg) {
+        const [, reject] = msg;
+        delete this.messageManager[id];
+        reject(new Error(message));
+      }
+    }
+    this.workerLoad[workerIndex] = 0;
+  }
+
   private createWorkers(
     numWorkers = 1,
     createImageBitmapSupport: CreateImageBitmapSupport,
@@ -224,19 +244,22 @@ export class ImageWorkerManager {
     const blob: Blob = new Blob([workerCode], {
       type: 'application/javascript',
     });
-    const blobURL: string = (self.URL ? URL : webkitURL).createObjectURL(blob);
+    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);
     }
+    // Workers retain the script; the URL itself is no longer needed.
+    urlFactory.revokeObjectURL(blobURL);
     return workers;
   }
 
   private getNextWorkerIndex(): number {
     if (this.workers.length === 0) return -1;
 
-    let minLoad = 99;
+    let minLoad = Infinity;
     let workerIndex = 0;
 
     for (let i = 0; i < this.workers.length; i++) {
@@ -264,26 +287,26 @@ export class ImageWorkerManager {
   ): Promise<TextureData> {
     return new Promise((resolve, reject) => {
       try {
-        if (this.workers) {
-          const id = this.nextId++;
-          this.messageManager[id] = [resolve, reject];
-          const nextWorkerIndex = this.getNextWorkerIndex();
-
-          if (nextWorkerIndex !== -1) {
-            const worker = this.workers[nextWorkerIndex];
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.workerLoad[nextWorkerIndex]!++;
-            worker!.postMessage({
-              id,
-              src: src,
-              premultiplyAlpha,
-              sx,
-              sy,
-              sw,
-              sh,
-            });
-          }
+        const nextWorkerIndex = this.getNextWorkerIndex();
+        if (nextWorkerIndex === -1) {
+          reject(new Error('No image workers available'));
+          return;
         }
+
+        const id = this.nextId++;
+        this.messageManager[id] = [resolve, reject];
+        const worker = this.workers[nextWorkerIndex];
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.workerLoad[nextWorkerIndex]!++;
+        worker!.postMessage({
+          id,
+          src: src,
+          premultiplyAlpha,
+          sx,
+          sy,
+          sw,
+          sh,
+        });
       } catch (error) {
         reject(error);
       }

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

@@ -216,13 +216,14 @@ const generateTextLayout = (
 ): TextLayout => {
   const fontSize = props.fontSize;
   const fontFamily = props.fontFamily;
-  const lineHeight = props.lineHeight;
   const metrics = SdfFontHandler.getFontMetrics(fontFamily, fontSize);
-  const verticalAlign = props.verticalAlign;
 
   const fontData = fontCache.data;
   const commonFontData = fontData.common;
   const designFontSize = fontData.info.size;
+  const designLineHeight = commonFontData.lineHeight;
+  const lineHeight =
+    props.lineHeight || (designLineHeight * fontSize) / designFontSize;
 
   const atlasWidth = commonFontData.scaleW;
   const atlasHeight = commonFontData.scaleH;

package/src/core/textures/ColorTexture.ts

@@ -70,7 +70,9 @@ export class ColorTexture extends Texture {
   }
 
   static override makeCacheKey(props: ColorTextureProps): string {
-    return `ColorTexture,${props.color}`;
+    // Mirror the default from resolveDefaults so the key is stable whether
+    // or not the caller has run defaults first.
+    return `ColorTexture,${props.color || 0xffffffff}`;
   }
 
   static override resolveDefaults(

package/src/core/textures/ImageTexture.ts

@@ -147,11 +147,22 @@ export class ImageTexture extends Texture {
       data: HTMLImageElement | null;
       premultiplyAlpha: boolean;
     }>((resolve, reject) => {
+      let objectUrl: string | null = null;
+
+      const cleanup = () => {
+        if (objectUrl !== null) {
+          URL.revokeObjectURL(objectUrl);
+          objectUrl = null;
+        }
+      };
+
       img.onload = () => {
+        cleanup();
         resolve({ data: img, premultiplyAlpha: hasAlpha });
       };
 
       img.onerror = (err) => {
+        cleanup();
         const errorMessage =
           err instanceof Error
             ? err.message
@@ -162,7 +173,8 @@ export class ImageTexture extends Texture {
       };
 
       if (src instanceof Blob) {
-        img.src = URL.createObjectURL(src);
+        objectUrl = URL.createObjectURL(src);
+        img.src = objectUrl;
       } else {
         img.src = src;
       }
@@ -218,10 +230,11 @@ export class ImageTexture extends Texture {
 
   async loadImage(src: string) {
     const { premultiplyAlpha, sx, sy, sw, sh } = this.props;
+    const isBase64 = isBase64Image(src);
 
     if (this.txManager.hasCreateImageBitmap === true) {
       if (
-        isBase64Image(src) === false &&
+        isBase64 === false &&
         this.txManager.hasWorker === true &&
         this.txManager.imageWorkerManager !== null
       ) {
@@ -235,15 +248,9 @@ export class ImageTexture extends Texture {
         );
       }
 
-      let blob;
-
-      if (isBase64Image(src) === true) {
-        blob = dataURIToBlob(src);
-      } else {
-        blob = await fetchJson(src, 'blob').then(
-          (response) => response as Blob,
-        );
-      }
+      const blob = isBase64
+        ? dataURIToBlob(src)
+        : ((await fetchJson(src, 'blob')) as Blob);
 
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
@@ -357,16 +364,18 @@ export class ImageTexture extends Texture {
       return false;
     }
 
-    let cacheKey = `ImageTexture,${key},${props.premultiplyAlpha ?? 'true'},${
-      props.maxRetryCount
-    }`;
+    // Inline default values so the key is stable whether or not the caller
+    // has run them through resolveDefaults first. Must mirror the defaults
+    // in resolveDefaults below.
+    const premultiplyAlpha = props.premultiplyAlpha ?? true;
+    const maxRetryCount = props.maxRetryCount ?? 5;
+
+    let cacheKey = `ImageTexture,${key},${premultiplyAlpha},${maxRetryCount}`;
 
-    if (props.sh !== null && props.sw !== null) {
-      cacheKey += ',';
-      cacheKey += props.sx ?? '';
-      cacheKey += props.sy ?? '';
-      cacheKey += props.sw || '';
-      cacheKey += props.sh || '';
+    if (props.sh != null && props.sw != null) {
+      cacheKey += `,${props.sx ?? ''},${props.sy ?? ''},${props.sw || ''},${
+        props.sh || ''
+      }`;
     }
 
     return cacheKey;

package/src/main-api/Renderer.ts

@@ -680,8 +680,12 @@ export class RendererMain extends EventEmitter {
    */
   createNode<ShNode extends CoreShaderNode<any>>(
     props: Partial<INodeProps<ShNode>>,
+    resolved = false,
   ): INode<ShNode> {
-    const node = this.stage.createNode(props as Partial<CoreNodeProps>);
+    const node = this.stage.createNode(
+      props as Partial<CoreNodeProps>,
+      resolved,
+    );
 
     if (ENABLE_INSPECTOR && this.inspector) {
       return this.inspector.createNode(node) as unknown as INode<ShNode>;
@@ -690,6 +694,20 @@ export class RendererMain extends EventEmitter {
     return node as unknown as INode<ShNode>;
   }
 
+  /**
+   * Allocate a fully-resolved CoreNodeProps bag — the same shape and
+   * defaults the renderer would otherwise build inside `createNode`.
+   *
+   * Frameworks (e.g. solid-tv) call this once per node at construction
+   * time, fill it in as user props flow in, then pass it back via
+   * `createNode(props, true)`.  The renderer adopts the bag directly:
+   * one allocation instead of two, and a stable hidden class for the
+   * node's lifetime.
+   */
+  createNodeProps(initial?: Partial<CoreNodeProps>): CoreNodeProps {
+    return this.stage.createNodeProps(initial);
+  }
+
   /**
    * Create a new scene graph text node
    *
@@ -704,8 +722,11 @@ export class RendererMain extends EventEmitter {
    * @param props
    * @returns
    */
-  createTextNode(props: Partial<ITextNodeProps>): ITextNode {
-    const textNode = this.stage.createTextNode(props as CoreTextNodeProps);
+  createTextNode(props: Partial<ITextNodeProps>, resolved = false): ITextNode {
+    const textNode = this.stage.createTextNode(
+      props as CoreTextNodeProps,
+      resolved,
+    );
 
     if (ENABLE_INSPECTOR && this.inspector) {
       return this.inspector.createTextNode(textNode) as unknown as ITextNode;
@@ -714,6 +735,14 @@ export class RendererMain extends EventEmitter {
     return textNode as unknown as ITextNode;
   }
 
+  /**
+   * Allocate a fully-resolved CoreTextNodeProps bag.  See
+   * {@link createNodeProps}.
+   */
+  createTextNodeProps(initial?: Partial<CoreTextNodeProps>): CoreTextNodeProps {
+    return this.stage.createTextNodeProps(initial);
+  }
+
   /**
    * Destroy a node
    *