@solidtv/renderer 1.6.0 → 1.6.2

package/src/core/lib/ImageWorker.ts

@@ -43,7 +43,7 @@ function createImageWorker() {
     options: {
       supportsOptionsCreateImageBitmap: boolean;
       supportsFullCreateImageBitmap: boolean;
-      premultiplyAlphaHonored: boolean;
+      premultiplyAlphaHonored: boolean | null;
     },
   ): Promise<getImageReturn> {
     return new Promise(function (resolve, reject) {
@@ -108,10 +108,12 @@ function createImageWorker() {
         ) {
           // Fallback for browsers that do not support createImageBitmap with options
           // this is supported for Chrome v50 to v52/54 that doesn't support options.
-          // The browser default premultiplies, so WebGL must not premultiply again.
+          // The browser default premultiplies, so WebGL must not premultiply again —
+          // except on devices whose default returns straight alpha
+          // (premultiplyAlphaHonored: false); there WebGL premultiplies on upload.
           createImageBitmap(blob)
             .then(function (data) {
-              resolve({ data: data, premultiplyAlpha: false });
+              resolve({ data: data, premultiplyAlpha: useGlPremultiply });
             })
             .catch(function (error) {
               reject(error);
@@ -150,11 +152,18 @@ function createImageWorker() {
     var width = event.data.sw;
     var height = event.data.sh;
 
-    // these will be set to true if the browser supports the createImageBitmap options or full
-    var supportsOptionsCreateImageBitmap = false;
-    var supportsFullCreateImageBitmap = false;
-    // set to false when the device is known to ignore the premultiply option
-    var premultiplyAlphaHonored = true;
+    // Capability flags are sent as message DATA (not baked into the worker's
+    // source text) because they must survive minification: a production
+    // bundler renames these local variable names, which silently breaks any
+    // scheme that pattern-matches `createImageWorker.toString()` output for
+    // injection (see git history for the string-replace approach this
+    // replaced, and the bug it caused - capability detection was always a
+    // no-op in a minified build, regardless of device or config).
+    var supportsOptionsCreateImageBitmap =
+      event.data.supportsOptionsCreateImageBitmap;
+    var supportsFullCreateImageBitmap =
+      event.data.supportsFullCreateImageBitmap;
+    var premultiplyAlphaHonored = event.data.premultiplyAlphaHonored;
 
     getImage(src, premultiplyAlpha, x, y, width, height, {
       supportsOptionsCreateImageBitmap,
@@ -199,7 +208,7 @@ export class ImageWorkerManager {
     if (this.workers.length > 0) {
       return;
     }
-    this.workerBlob = this.createWorkerBlob(this.createImageBitmapSupport);
+    this.workerBlob = this.createWorkerBlob();
     for (let i = 0; i < this.maxWorkers; i++) {
       this.spawnWorker();
     }
@@ -243,38 +252,18 @@ export class ImageWorkerManager {
     this.workerLoad[workerIndex] = 0;
   }
 
-  private createWorkerBlob(
-    createImageBitmapSupport: CreateImageBitmapSupport,
-  ): Blob {
+  private createWorkerBlob(): Blob {
+    // Capability flags (options/full/premultiplyHonored) are NOT injected
+    // into this source text. An earlier version pattern-matched
+    // `createImageWorker.toString()` against literal variable-name strings
+    // (e.g. 'var supportsOptionsCreateImageBitmap = false;') and rewrote
+    // them - this silently breaks under any minifier that renames locals
+    // (guaranteed in a real production bundle), permanently freezing every
+    // device on the hardcoded defaults regardless of actual support. The
+    // flags are sent per-request as postMessage data instead (see
+    // `getImage` below and `self.onmessage` above) - plain data survives
+    // minification untouched.
     let workerCode = `(${createImageWorker.toString()})()`;
-
-    // Replace placeholders with actual initialization values
-    if (createImageBitmapSupport.options === true) {
-      workerCode = workerCode.replace(
-        'var supportsOptionsCreateImageBitmap = false;',
-        'var supportsOptionsCreateImageBitmap = true;',
-      );
-    }
-
-    if (createImageBitmapSupport.full === true) {
-      workerCode = workerCode.replace(
-        'var supportsOptionsCreateImageBitmap = false;',
-        'var supportsOptionsCreateImageBitmap = true;',
-      );
-
-      workerCode = workerCode.replace(
-        'var supportsFullCreateImageBitmap = false;',
-        'var supportsFullCreateImageBitmap = true;',
-      );
-    }
-
-    if (createImageBitmapSupport.premultiplyHonored === false) {
-      workerCode = workerCode.replace(
-        'var premultiplyAlphaHonored = true;',
-        'var premultiplyAlphaHonored = false;',
-      );
-    }
-
     workerCode = workerCode.replace('"use strict";', '');
     return new Blob([workerCode], {
       type: 'application/javascript',
@@ -368,6 +357,11 @@ export class ImageWorkerManager {
           sy,
           sw,
           sh,
+          supportsOptionsCreateImageBitmap:
+            this.createImageBitmapSupport.options,
+          supportsFullCreateImageBitmap: this.createImageBitmapSupport.full,
+          premultiplyAlphaHonored:
+            this.createImageBitmapSupport.premultiplyHonored,
         });
       } catch (error) {
         reject(error);

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

@@ -65,21 +65,19 @@ function createPlatform(gl: object | null): Platform {
 
 describe('detectPremultiplyAlphaHonored', () => {
   beforeEach(() => {
-    // node test env has no ImageData global; the probe constructs one.
-    (globalThis as unknown as { ImageData: unknown }).ImageData = class {
-      data: Uint8ClampedArray;
-      width: number;
-      height: number;
-      constructor(data: Uint8ClampedArray, width: number, height: number) {
-        this.data = data;
-        this.width = width;
-        this.height = height;
+    // The probe decodes a real PNG blob (not ImageData), so node's missing
+    // Blob global must be stubbed. It just needs to be constructible and
+    // preserve the mime type the probe tags it with.
+    (globalThis as unknown as { Blob: unknown }).Blob = class {
+      constructor(public parts: unknown[], public opts: { type?: string }) {}
+      get type() {
+        return this.opts?.type ?? '';
       }
     };
   });
 
   afterEach(() => {
-    delete (globalThis as unknown as { ImageData?: unknown }).ImageData;
+    delete (globalThis as unknown as { Blob?: unknown }).Blob;
   });
 
   it('returns true when the bitmap reads back premultiplied (~128)', async () => {
@@ -87,6 +85,15 @@ describe('detectPremultiplyAlphaHonored', () => {
     expect(await detectPremultiplyAlphaHonored(platform)).toBe(true);
   });
 
+  it('decodes a real PNG blob with the premultiply option (the path real textures take)', async () => {
+    const platform = createPlatform(createFakeGl(128));
+    await detectPremultiplyAlphaHonored(platform);
+    const call = (platform.createImageBitmap as ReturnType<typeof vi.fn>).mock
+      .calls[0];
+    expect((call![0] as { type: string }).type).toBe('image/png');
+    expect(call![1]).toMatchObject({ premultiplyAlpha: 'premultiply' });
+  });
+
   it('returns false when the bitmap reads back straight (~255)', async () => {
     const platform = createPlatform(createFakeGl(255));
     expect(await detectPremultiplyAlphaHonored(platform)).toBe(false);

package/src/core/lib/validateImageBitmap.ts

@@ -95,34 +95,52 @@ export async function validateCreateImageBitmap(
   return support;
 }
 
+// 1x1 PNG, color type 6 (RGBA), single pixel = (255, 0, 0, 128) in straight
+// (un-premultiplied) alpha. Decoding this real PNG blob exercises the same
+// image-decode pipeline that actual textures use — which on embedded WebKit
+// forks can honor `premultiplyAlpha` differently from the raw
+// ImageData->createImageBitmap path (some decoders ignore the option on the
+// PNG path while honoring it for ImageData). Detecting via the path real
+// images take is what makes this correct on devices like the Movistar STB.
+// prettier-ignore
+const STRAIGHT_ALPHA_TEST_PNG = new Uint8Array([
+  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d,
+  0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+  0x08, 0x06, 0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4, 0x89, 0x00, 0x00, 0x00,
+  0x0d, 0x49, 0x44, 0x41, 0x54, 0x78, 0x9c, 0x63, 0xf8, 0xcf, 0xc0, 0xd0,
+  0x00, 0x00, 0x04, 0x81, 0x01, 0x80, 0x2c, 0x55, 0xce, 0xb0, 0x00, 0x00,
+  0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82,
+]);
+
 /**
  * Determine whether `createImageBitmap(..., { premultiplyAlpha: 'premultiply' })`
  * is actually honored by this browser.
  *
- * Strategy: feed a known straight-alpha pixel (255, 0, 0, 128) through
- * createImageBitmap with 'premultiply', upload it to a WebGL texture with
- * GL-side premultiply DISABLED (so we observe the bitmap's own state), then
- * read the raw texel back via a framebuffer.
+ * Strategy: decode a known straight-alpha pixel (255, 0, 0, 128) delivered as
+ * a real PNG blob through createImageBitmap with 'premultiply', upload it to a
+ * WebGL texture with GL-side premultiply DISABLED (so we observe the bitmap's
+ * own state), then read the raw texel back via a framebuffer.
  *
  *  - honored   -> red comes back premultiplied (~128)
- *  - ignored   -> red comes back straight (~255)  [older Safari/WebKit]
+ *  - ignored   -> red comes back straight (~255)  [older Safari/WebKit,
+ *                 Movistar-class embedded STBs]
+ *
+ * A real PNG blob (not ImageData) is used deliberately: it matches the code
+ * path real textures take, and some embedded devices don't even support
+ * ImageData->createImageBitmap (the old ImageData probe returned null there,
+ * silently disabling detection on exactly the devices that needed it).
  *
  * @returns true if honored, false if ignored, null if it couldn't be measured
- * (no WebGL, createImageBitmap from ImageData unsupported, framebuffer
- * incomplete, etc.) — caller should treat null as "unknown".
+ * (no WebGL, createImageBitmap unsupported, framebuffer incomplete, etc.) —
+ * caller should treat null as "unknown".
  */
 export async function detectPremultiplyAlphaHonored(
   platform: Platform,
 ): Promise<boolean | null> {
   let bitmap: ImageBitmap;
   try {
-    // Straight (un-premultiplied) RGBA. ImageData is straight-alpha by spec.
-    const imageData = new ImageData(
-      new Uint8ClampedArray([255, 0, 0, 128]),
-      1,
-      1,
-    );
-    bitmap = await platform.createImageBitmap(imageData, {
+    const blob = new Blob([STRAIGHT_ALPHA_TEST_PNG], { type: 'image/png' });
+    bitmap = await platform.createImageBitmap(blob, {
       premultiplyAlpha: 'premultiply',
       colorSpaceConversion: 'none',
       imageOrientation: 'none',

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

@@ -65,37 +65,57 @@ export const loadFont = (
 ): Promise<void> => {
   const { fontFamily, fontUrl, metrics } = options;
 
+  // A single load may register the font under several names. The first entry
+  // is the primary name used to key the in-flight promise; the rest are
+  // aliases registered against the same source URL (the browser dedupes the
+  // download by URL).
+  const names = Array.isArray(fontFamily) ? fontFamily : [fontFamily];
+  const primary = names[0]!;
+
   // If already loaded, return immediately
-  if (fontCache.has(fontFamily) === true) {
+  if (fontCache.has(primary) === true) {
     return Promise.resolve();
   }
 
-  const existingPromise = fontLoadPromises.get(fontFamily);
+  const existingPromise = fontLoadPromises.get(primary);
   // If already loading, return the existing promise
   if (existingPromise !== undefined) {
     return existingPromise;
   }
 
-  const nwff: CoreTextNode[] = (nodesWaitingForFont[fontFamily] = []);
-  // Create and store the loading promise
-  const loadPromise = new FontFace(fontFamily, `url(${fontUrl})`)
-    .load()
-    .then((loadedFont) => {
-      stage.platform.addFont(loadedFont);
-      processFontData(fontFamily, loadedFont, metrics);
-      fontLoadPromises.delete(fontFamily);
-      for (let key in nwff) {
-        nwff[key]!.setUpdateType(UpdateType.Local);
+  for (let i = 0; i < names.length; i++) {
+    nodesWaitingForFont[names[i]!] = [];
+  }
+  // Register a FontFace under every name (all share the same source URL) and
+  // wait for all of them to be ready before waking parked nodes.
+  const loadPromise = Promise.all(
+    names.map((name) =>
+      new FontFace(name, `url(${fontUrl})`).load().then((loadedFont) => {
+        stage.platform.addFont(loadedFont);
+        processFontData(name, loadedFont, metrics);
+      }),
+    ),
+  )
+    .then(() => {
+      fontLoadPromises.delete(primary);
+      for (let i = 0; i < names.length; i++) {
+        const name = names[i]!;
+        const nwff = nodesWaitingForFont[name];
+        if (nwff !== undefined) {
+          for (let key in nwff) {
+            nwff[key]!.setUpdateType(UpdateType.Local);
+          }
+          delete nodesWaitingForFont[name];
+        }
       }
-      delete nodesWaitingForFont[fontFamily];
     })
     .catch((error) => {
-      fontLoadPromises.delete(fontFamily);
-      console.error(`Failed to load font: ${fontFamily}`, error);
+      fontLoadPromises.delete(primary);
+      console.error(`Failed to load font: ${primary}`, error);
       throw error;
     });
 
-  fontLoadPromises.set(fontFamily, loadPromise);
+  fontLoadPromises.set(primary, loadPromise);
   return loadPromise;
 };
 

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

@@ -309,30 +309,39 @@ export const loadFont = (
   options: FontLoadOptions,
 ): Promise<void> => {
   const { fontFamily, atlasUrl, atlasDataUrl, metrics } = options;
+  // A single load may register the font under several names (the atlas is
+  // fetched once and shared). The first entry is the primary name used to key
+  // the in-flight promise and drive the fetch; the rest are aliases.
+  const names = Array.isArray(fontFamily) ? fontFamily : [fontFamily];
+  const primary = names[0]!;
+
   // Early return if already loaded
-  if (fontCache.get(fontFamily) !== undefined) {
+  if (fontCache.get(primary) !== undefined) {
     return Promise.resolve();
   }
 
   // Early return if already loading
-  const existingPromise = fontLoadPromises.get(fontFamily);
+  const existingPromise = fontLoadPromises.get(primary);
   if (existingPromise !== undefined) {
     return existingPromise;
   }
 
   if (atlasDataUrl === undefined) {
     return Promise.reject(
-      new Error(`Atlas data URL must be provided for SDF font: ${fontFamily}`),
+      new Error(`Atlas data URL must be provided for SDF font: ${primary}`),
     );
   }
 
-  // Reuse an existing waiter list. A previous load attempt for this font may
-  // have failed and left nodes parked here; overwriting the list would strand
-  // them, so a successful retry could never wake them. The list is consumed
-  // (and deleted) on the next successful load.
-  let nwff = nodesWaitingForFont[fontFamily];
-  if (nwff === undefined) {
-    nwff = nodesWaitingForFont[fontFamily] = [];
+  // Ensure every name has a waiter list so nodes requesting an alias can park
+  // and be woken on load. Reuse existing lists — a previous load attempt for a
+  // name may have failed and left nodes parked there; overwriting the list
+  // would strand them, so a successful retry could never wake them. Lists are
+  // consumed (and deleted) on the next successful load.
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i]!;
+    if (nodesWaitingForFont[name] === undefined) {
+      nodesWaitingForFont[name] = [];
+    }
   }
   // One attempt at fetching + decoding the JSON atlas description. A fresh
   // XHR runs per attempt so a transient network/parse failure can recover.
@@ -390,17 +399,34 @@ export const loadFont = (
         premultiplyAlpha: false,
       });
 
-      atlasTexture.setRenderableOwner(fontFamily, true);
+      // Register every name as a renderable owner so the shared atlas stays
+      // alive as long as any of its names is in use.
+      for (let i = 0; i < names.length; i++) {
+        atlasTexture.setRenderableOwner(names[i]!, true);
+      }
       atlasTexture.preventCleanup = true; // Prevent automatic cleanup
 
       const onLoaded = () => {
-        // Process and cache font data
-        processFontData(fontFamily, fontData, atlasTexture, metrics);
+        // Process and cache font data under the primary name...
+        processFontData(primary, fontData, atlasTexture, metrics);
+        // ...then alias the remaining names onto the same cache entry so they
+        // resolve to the identical glyph/kerning/atlas data.
+        const cached = fontCache.get(primary)!;
+        for (let i = 1; i < names.length; i++) {
+          fontCache.set(names[i]!, cached);
+        }
 
-        for (let key in nwff) {
-          nwff[key]!.setUpdateType(UpdateType.Local);
+        // Wake every parked node across all names and clear their lists.
+        for (let i = 0; i < names.length; i++) {
+          const name = names[i]!;
+          const list = nodesWaitingForFont[name];
+          if (list !== undefined) {
+            for (let key in list) {
+              list[key]!.setUpdateType(UpdateType.Local);
+            }
+            delete nodesWaitingForFont[name];
+          }
         }
-        delete nodesWaitingForFont[fontFamily];
         resolve();
       };
 
@@ -419,7 +445,9 @@ export const loadFont = (
       atlasTexture.on('failed', (_target, error: TextureError) => {
         // Drop the failed atlas so a retry builds a fresh texture rather than
         // getting this dead instance back from the createTexture key-cache.
-        atlasTexture.setRenderableOwner(fontFamily, false);
+        for (let i = 0; i < names.length; i++) {
+          atlasTexture.setRenderableOwner(names[i]!, false);
+        }
         stage.txManager.removeTextureFromCache(atlasTexture);
         reject(error);
       });
@@ -434,15 +462,15 @@ export const loadFont = (
         await loadAtlas(await fetchFontData());
         // Success: clear the in-flight marker (the font now lives in fontCache)
         // — parked nodes were already woken inside loadAtlas.
-        fontLoadPromises.delete(fontFamily);
+        fontLoadPromises.delete(primary);
         return;
       } catch (error) {
         lastError = error;
         if (attempt < MAX_FONT_LOAD_RETRIES) {
           console.warn(
-            `SDF font "${fontFamily}" failed to load (attempt ${
-              attempt + 1
-            } of ${MAX_FONT_LOAD_RETRIES + 1}), retrying.`,
+            `SDF font "${primary}" failed to load (attempt ${attempt + 1} of ${
+              MAX_FONT_LOAD_RETRIES + 1
+            }), retrying.`,
             error,
           );
         }
@@ -455,13 +483,15 @@ export const loadFont = (
     // loadFont() (which reuses the list) can still wake them if the font
     // eventually loads. The list shrinks as nodes self-remove via
     // stopWaitingForFont on destroy.
-    fontLoadPromises.delete(fontFamily);
-    fontCache.delete(fontFamily);
-    console.error(`Failed to load SDF font: ${fontFamily}`, lastError);
+    fontLoadPromises.delete(primary);
+    for (let i = 0; i < names.length; i++) {
+      fontCache.delete(names[i]!);
+    }
+    console.error(`Failed to load SDF font: ${primary}`, lastError);
     throw lastError;
   })();
 
-  fontLoadPromises.set(fontFamily, loadPromise);
+  fontLoadPromises.set(primary, loadPromise);
   return loadPromise;
 };
 

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

@@ -349,7 +349,16 @@ export interface TextLayout {
 }
 
 export interface FontLoadOptions {
-  fontFamily: string;
+  /**
+   * Font family name to register the font under.
+   *
+   * Pass an array to register the same font under several names in a single
+   * load — the atlas/font resource is fetched once and every name resolves to
+   * the same loaded font. The first entry is the primary name; the rest are
+   * aliases. Useful when one physical font is referenced by multiple families
+   * (e.g. `['Roboto', 'Roboto500']`).
+   */
+  fontFamily: string | string[];
   metrics?: FontMetrics;
   // For Canvas/traditional font loading
   fontUrl?: string;

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

@@ -3,6 +3,7 @@ import {
   loadFont,
   waitingForFont,
   isFontLoaded,
+  getFontData,
   MAX_FONT_LOAD_RETRIES,
 } from '../SdfFontHandler.js';
 import { EventEmitter } from '../../../common/EventEmitter.js';
@@ -71,7 +72,7 @@ function makeStage(): { stage: Stage; textures: FakeTexture[] } {
   return { stage, textures };
 }
 
-const opts = (fontFamily: string) =>
+const opts = (fontFamily: string | string[]) =>
   ({
     fontFamily,
     atlasUrl: 'atlas.png',
@@ -256,3 +257,66 @@ describe('SdfFontHandler loadFont — automatic retry', () => {
     expect(node.setUpdateType).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('SdfFontHandler loadFont — multiple names for one font', () => {
+  let originalXHR: unknown;
+
+  beforeEach(() => {
+    originalXHR = (globalThis as unknown as { XMLHttpRequest: unknown })
+      .XMLHttpRequest;
+    (globalThis as unknown as { XMLHttpRequest: unknown }).XMLHttpRequest =
+      FakeXHR;
+  });
+
+  afterEach(() => {
+    (globalThis as unknown as { XMLHttpRequest: unknown }).XMLHttpRequest =
+      originalXHR;
+  });
+
+  it('fetches once and registers every name against the same font data', async () => {
+    const { stage, textures } = makeStage();
+    const names = ['Roboto', 'Roboto500', 'RobotoMedium'];
+
+    const promise = loadFont(stage, opts(names));
+    await flush();
+    textures[0]!.emit('loaded');
+    await promise;
+
+    // A single atlas texture was created for all three names.
+    expect(textures.length).toBe(1);
+
+    // Every name reports loaded and resolves to the identical cache entry.
+    const primaryData = getFontData(names[0]!);
+    expect(primaryData).not.toBe(undefined);
+    for (let i = 0; i < names.length; i++) {
+      expect(isFontLoaded(names[i]!)).toBe(true);
+      expect(getFontData(names[i]!)).toBe(primaryData);
+    }
+  });
+
+  it('wakes nodes parked under an alias, not just the primary name', async () => {
+    const { stage, textures } = makeStage();
+    const names = ['MultiWakePrimary', 'MultiWakeAlias'];
+
+    const promise = loadFont(stage, opts(names));
+
+    // Park one node under the primary name and one under the alias.
+    const primaryNode = { id: 1, setUpdateType: vi.fn() };
+    const aliasNode = { id: 2, setUpdateType: vi.fn() };
+    waitingForFont(
+      names[0]!,
+      primaryNode as unknown as Parameters<typeof waitingForFont>[1],
+    );
+    waitingForFont(
+      names[1]!,
+      aliasNode as unknown as Parameters<typeof waitingForFont>[1],
+    );
+
+    await flush();
+    textures[0]!.emit('loaded');
+    await promise;
+
+    expect(primaryNode.setUpdateType).toHaveBeenCalledTimes(1);
+    expect(aliasNode.setUpdateType).toHaveBeenCalledTimes(1);
+  });
+});