@solidtv/renderer 1.3.2 → 1.4.1

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

@@ -291,27 +291,37 @@ export interface TrProps extends TrFontProps {
 }
 
 /**
- * Glyph layout information for WebGL rendering
+ * Number of Float32 entries per glyph in a packed {@link TextLayout.glyphs}
+ * buffer. The per-glyph fields are stored contiguously in this order:
+ *
+ * ```
+ * [0] x            [4] atlasX
+ * [1] y            [5] atlasY
+ * [2] width        [6] atlasWidth
+ * [3] height       [7] atlasHeight
+ * ```
+ *
+ * Glyph `i` occupies `glyphs[i * SDF_GLYPH_STRIDE .. +SDF_GLYPH_STRIDE]`.
+ * A flat typed array (instead of an array of `{x, y, ...}` objects) avoids
+ * allocating one object per glyph on every layout generation.
  */
-export interface GlyphLayout {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  atlasX: number;
-  atlasY: number;
-  atlasWidth: number;
-  atlasHeight: number;
-}
+export const SDF_GLYPH_STRIDE = 8;
 
 /**
  * Complete text layout information for caching
  */
 export interface TextLayout {
   /**
-   * Individual glyph layouts
+   * Packed glyph layout data — `SDF_GLYPH_STRIDE` floats per glyph.
+   * Valid entries cover the first `glyphCount * SDF_GLYPH_STRIDE` slots; the
+   * backing buffer may be slightly larger when codepoints are skipped during
+   * layout (zero-width spaces, missing glyphs).
    */
-  glyphs: GlyphLayout[];
+  glyphs: Float32Array;
+  /**
+   * Number of glyphs packed into {@link glyphs}.
+   */
+  glyphCount: number;
   /**
    * Total text width
    */

package/src/main-api/Inspector.ts

@@ -230,6 +230,11 @@ const knownProperties = new Set<string>([
   'parent',
   'data',
   'text',
+  'texture',
+  'rtt',
+  'mount',
+  'mountX',
+  'mountY',
   'componentName',
   'componentLocation',
 ]);
@@ -293,6 +298,10 @@ export class Inspector {
   private scaleX = 1;
   private scaleY = 1;
   private textureMetrics = new Map<Texture, TextureMetrics>();
+  // Stable reference so the same function can be passed to both
+  // add/removeEventListener — `.bind()` returns a new fn each call, so binding
+  // inline in destroy() would never actually remove the listener.
+  private boundSetRootPosition = this.setRootPosition.bind(this);
 
   // Performance monitoring for frequent setter calls
   private static setterCallCount = new Map<
@@ -393,7 +402,7 @@ export class Inspector {
     this.resizeObserver.observe(canvas);
 
     //listen for changes on window
-    window.addEventListener('resize', this.setRootPosition.bind(this));
+    window.addEventListener('resize', this.boundSetRootPosition);
 
     // Start animation stats timer if enabled
     this.startAnimationStatsTimer();
@@ -1033,7 +1042,7 @@ export class Inspector {
         });
         coreNodeListeners.clear();
 
-        this.destroyNode(node.id);
+        this.destroyNode(node);
         originalDestroy.call(node, isChild);
       },
       configurable: true,
@@ -1151,7 +1160,7 @@ export class Inspector {
     this.resizeObserver.disconnect();
 
     // Remove resize listener
-    window.removeEventListener('resize', this.setRootPosition.bind(this));
+    window.removeEventListener('resize', this.boundSetRootPosition);
     if (this.root && this.root.parentNode) {
       this.root.remove();
     }
@@ -1160,8 +1169,11 @@ export class Inspector {
     Inspector.clearAnimationStats();
   }
 
-  destroyNode(id: number) {
-    const div = document.getElementById(id.toString());
+  destroyNode(node: CoreNode) {
+    // Use the mirror div stored on the node rather than a document-global
+    // getElementById, which would collide across multiple renderer/inspector
+    // instances sharing one document.
+    const div = (node as CoreNode & { div?: HTMLElement }).div;
     div?.remove();
   }
 
@@ -1180,23 +1192,41 @@ export class Inspector {
      * Special case for parent property
      */
     if (property === 'parent') {
-      const parentId: number = value.id;
-
-      // only way to detect if the parent is the root node
-      // if you are reading this and have a better way, please let me know
-      if (parentId === 1) {
-        this.root.appendChild(div);
-        return;
-      }
+      // value is the parent CoreNode. Its mirror div is stored on the node
+      // itself (see createNode/createTextNode), so use that reference instead
+      // of a document-global getElementById — the latter collides across
+      // multiple renderer/inspector instances sharing one document.
+      //
+      // The stage root (the only node with parent === null) is mirrored by
+      // `this.root`, the container that is actually attached to the document.
+      // createNodes() also makes a plain div for the root node, but that div is
+      // never attached, so the root's direct children must be parented to
+      // `this.root` instead — otherwise the whole mirror tree ends up detached
+      // from the document. This replaces the old `parentId === 1` heuristic.
+      const parentNode = value as CoreNode & { div?: HTMLElement };
+      const parentDiv =
+        parentNode.parent === null ? this.root : parentNode.div ?? this.root;
+      parentDiv.appendChild(div);
+      return;
+    }
 
-      const parent = document.getElementById(parentId.toString());
-      parent?.appendChild(div);
+    // special case for mount changes — mount has no CSS equivalent, but it
+    // shifts the node's left/top, so recompute position from the latest props.
+    if (
+      property === 'mount' ||
+      property === 'mountX' ||
+      property === 'mountY'
+    ) {
+      div.style.left = `${props.x - props.w * (props.mountX ?? 0)}px`;
+      div.style.top = `${props.y - props.h * (props.mountY ?? 0)}px`;
       return;
     }
 
     // special case for text
     if (property === 'text') {
-      div.innerHTML = String(value);
+      // textContent (not innerHTML): text may contain <, &, etc. which would
+      // corrupt the mirror tree or act as an injection vector via innerHTML.
+      div.textContent = String(value);
 
       // Keep DOM text invisible without breaking visibility checks
       // Use very low opacity (0.001) instead of 0 so Playwright still detects it

package/src/main-api/Renderer.ts

@@ -514,17 +514,6 @@ export type RendererMainSettings = RendererRuntimeSettings & {
    */
   textBaselineMode: TextBaselineMode;
 
-  /**
-   * Force WebGL2
-   *
-   * @remarks
-   * Force the renderer to use WebGL2. This can be used to force the renderer to
-   * use WebGL2 even if the browser supports WebGL1.
-   *
-   * @defaultValue `false`
-   */
-  forceWebGL2: boolean;
-
   /**
    * Canvas object to use for rendering
    *
@@ -699,7 +688,6 @@ export class RendererMain extends EventEmitter {
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
-      forceWebGL2: settings.forceWebGL2 ?? false,
       inspector: settings.inspector ?? false,
       inspectorOptions: settings.inspectorOptions ?? {},
       renderEngine: settings.renderEngine,
@@ -761,7 +749,6 @@ export class RendererMain extends EventEmitter {
       deviceLogicalPixelRatio,
       devicePhysicalPixelRatio,
       enableContextSpy: settings.enableContextSpy!,
-      forceWebGL2: settings.forceWebGL2!,
       fpsUpdateInterval: settings.fpsUpdateInterval!,
       enableClear: settings.enableClear!,
       numImageWorkers: settings.numImageWorkers!,
@@ -941,7 +928,7 @@ export class RendererMain extends EventEmitter {
    */
   destroyNode(node: INode) {
     if (ENABLE_INSPECTOR && this.inspector) {
-      this.inspector.destroyNode(node.id);
+      this.inspector.destroyNode(node as unknown as CoreNode);
     }
 
     return node.destroy();

package/src/utils.ts

@@ -2,7 +2,6 @@ import type { ContextSpy } from './core/lib/ContextSpy.js';
 
 export function createWebGLContext(
   canvas: HTMLCanvasElement | OffscreenCanvas,
-  forceWebGL2 = false,
   contextSpy: ContextSpy | null,
 ): WebGLRenderingContext {
   const config: WebGLContextAttributes = {
@@ -20,7 +19,7 @@ export function createWebGLContext(
   const gl =
     // TODO: Remove this assertion once this issue is fixed in TypeScript
     // https://github.com/microsoft/TypeScript/issues/53614
-    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
+    (canvas.getContext('webgl', config) ||
       canvas.getContext(
         'experimental-webgl' as 'webgl',
         config,

package/src/core/renderers/webgl/internal/WebGlUtils.ts

@@ -1,16 +0,0 @@
-/**
- * Generic WebGL Utility Functions
- *
- * @remarks
- * Nothing here should be coupled to Renderer logic / types.
- *
- * @param gl
- * @returns
- */
-export function isWebGl2(
-  gl: WebGLRenderingContext,
-): gl is WebGL2RenderingContext {
-  return (
-    self.WebGL2RenderingContext && gl instanceof self.WebGL2RenderingContext
-  );
-}