@solidtv/renderer 1.5.5 → 1.6.0

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

@@ -368,6 +368,13 @@ export const wrapLine = (
 ): WrappedLinesStruct => {
   const words = line.split(spaceRegex);
   const spaces = line.match(spaceRegex) || [];
+  // Leading whitespace splits into an empty token; fold it into the next
+  // word so it isn't dropped and re-applied after the first word instead.
+  if (words[0] === '' && words.length > 1) {
+    const leadingSpace = spaces.shift() ?? '';
+    words.shift();
+    words[0] = leadingSpace + (words[0] ?? '');
+  }
   const wrappedLines: TextLineStruct[] = [];
   let currentLine = '';
   let currentLineWidth = 0;
@@ -454,8 +461,14 @@ export const wrapLine = (
       continue;
     }
     const space = spaces[spaceIdx++] || '';
-    // For width calculation, treat ZWSP as having 0 width but regular space functionality
-    const effectiveSpaceWidth = space === '\u200B' ? 0 : spaceWidth;
+    // Single ' ' is the dominant separator \u2014 reuse the precomputed width.
+    // Multi-space/ZWSP runs collapse into one match; measure those for real.
+    const effectiveSpaceWidth =
+      space === ' '
+        ? spaceWidth
+        : space.length > 0
+        ? measureText(space, fontFamily, letterSpacing)
+        : 0;
     const totalWidth = currentLineWidth + effectiveSpaceWidth + wordWidth;
 
     if (totalWidth < maxWidth) {

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

@@ -248,6 +248,105 @@ describe('SDF Text Utils', () => {
       expect(result[0][0]?.[2]).toBe(true);
       expect(result[1]).toBe(0);
     });
+
+    it('should keep leading whitespace attached to the first word, not the word after it', () => {
+      // Regression test: a line starting with padding spaces (used e.g. to
+      // reserve room for an inline badge before the first word) used to have
+      // those spaces silently reassigned as the gap AFTER the first word.
+      const result = wrapLine(
+        testMeasureText,
+        '   hello world',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      const [lines] = result;
+      expect(lines).toHaveLength(1);
+      expect(lines[0]?.[0]).toBe('   hello world');
+    });
+
+    it('should count the full width of a multi-space separator when wrapping', () => {
+      // 'aa  bb' really measures 60 (6 chars * 10). Counting the separator
+      // as a single spaceWidth (50) used to keep it on one line past maxWidth.
+      const result = wrapLine(
+        testMeasureText,
+        'aa  bb',
+        'Arial',
+        55, // maxWidth — below the real 60, above the buggy 50
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      const [lines] = result;
+      expect(lines).toHaveLength(2);
+      expect(lines[0]).toEqual(['aa', 20, false, 0, 0]);
+      expect(lines[1]).toEqual(['bb', 20, false, 0, 0]);
+    });
+
+    it('should preserve a multi-space separator and its width when the line fits', () => {
+      const result = wrapLine(
+        testMeasureText,
+        'aa  bb',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      expect(result[0][0]).toEqual(['aa  bb', 60, false, 0, 0]);
+    });
+
+    it('should treat a run of multiple ZWSPs as a zero-width separator', () => {
+      const result = wrapLine(
+        testMeasureText,
+        'aa\u200B\u200Bbb',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      // Zero-width separator: no visible gap added, width is just the glyphs
+      expect(result[0][0]).toEqual(['aabb', 40, false, 0, 0]);
+    });
+
+    it('should use the precomputed spaceWidth for a single-space separator', () => {
+      // spaceWidth (4) deliberately differs from testMeasureText(' ') (10):
+      // the single-space fast path must reuse the precomputed value instead
+      // of re-measuring the separator.
+      const result = wrapLine(
+        testMeasureText,
+        'aa bb',
+        'Arial',
+        1000,
+        0,
+        4, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      expect(result[0][0]).toEqual(['aa bb', 44, false, 0, 0]);
+    });
   });
 
   describe('wrapText', () => {

package/src/main-api/Renderer.ts

@@ -23,6 +23,9 @@ import type {
 import { WebPlatform } from '../core/platforms/web/WebPlatform.js';
 import { Platform } from '../core/platforms/Platform.js';
 
+/** Shared default `handleLoopError` — swallows the error, keeping the loop alive. */
+const noop = (): void => {};
+
 /**
  * FPS Update Event Data
  *
@@ -661,6 +664,27 @@ export type RendererMainSettings = RendererRuntimeSettings & {
    *
    */
   maxRetryCount?: number;
+
+  /**
+   * Render loop error handler — an escape hatch for `requestAnimationFrame` crashes
+   *
+   * @remarks
+   * The render loop runs client-supplied code every frame: synchronous event
+   * subscribers (`frameTick`, `idle`, `fpsUpdate`, etc.) and animation steps. If
+   * any of these throw, the exception would otherwise propagate out of the
+   * `requestAnimationFrame` callback and permanently stop the loop — freezing
+   * the entire app until reload.
+   *
+   * The loop catches such errors and never lets them stop it. By default the
+   * error is swallowed (the default handler is a no-op), so a single bad frame
+   * can't freeze the app. Provide your own handler to log/report the crash (and
+   * optionally recover); the loop still keeps running after it returns.
+   *
+   * @param error The error thrown during the frame
+   *
+   * @defaultValue a no-op (errors are swallowed; the loop keeps running)
+   */
+  handleLoopError?: (error: unknown) => void;
 };
 
 /**
@@ -777,6 +801,9 @@ export class RendererMain extends EventEmitter {
           : settings.premultiplyAlphaHonored,
       platform: settings.platform || null,
       maxRetryCount: settings.maxRetryCount ?? 5,
+      // Default to a no-op so a thrown frame is swallowed and the render loop
+      // never crashes; apps can override to log/report.
+      handleLoopError: settings.handleLoopError ?? noop,
     };
 
     const {
@@ -841,6 +868,7 @@ export class RendererMain extends EventEmitter {
       premultiplyAlphaHonored: settings.premultiplyAlphaHonored,
       platform,
       maxRetryCount: settings.maxRetryCount ?? 5,
+      handleLoopError: settings.handleLoopError,
     });
 
     // Extract the root node

package/src/utils.ts

@@ -9,7 +9,7 @@ export function createWebGLContext(
     alpha: true,
     antialias: false,
     depth: false,
-    stencil: true,
+    stencil: false,
     desynchronized: false,
     // Disabled because it prevents Visual Regression Tests from working
     // failIfMajorPerformanceCaveat: true,