@solidtv/renderer 1.3.2 → 1.4.0

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

@@ -131,3 +131,20 @@ describe('SdfTextRenderer layout cache', () => {
     expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(0);
   });
 });
+
+describe('SdfTextRenderer lazy shader compile', () => {
+  it('registers the SDF shader at init but defers compilation', () => {
+    const shManager = {
+      registerShaderType: vi.fn(),
+      createShader: vi.fn(() => ({})),
+    };
+    const fakeStage = { options: { textLayoutCacheSize: 10 }, shManager };
+
+    SdfTextRenderer.init(fakeStage as never);
+
+    // Registration is cheap and stays at boot; the expensive compile + link is
+    // deferred until the first SDF glyph actually renders (see getSdfShader).
+    expect(shManager.registerShaderType).toHaveBeenCalledTimes(1);
+    expect(shManager.createShader).not.toHaveBeenCalled();
+  });
+});

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

@@ -38,9 +38,27 @@ const init = (stage: Stage): void => {
     maxLayoutCacheSize = configuredCacheSize;
   }
 
-  // Register SDF shader with the shader manager
+  // Register the SDF shader, but defer the (expensive) compile + link until the
+  // first SDF glyph actually renders — see getSdfShader / renderQuads. SDF fonts
+  // load asynchronously, so the first frame almost never needs the shader, and
+  // compiling it during Stage construction sits on the critical path to first
+  // paint for no benefit.
   stage.shManager.registerShaderType('Sdf', Sdf);
-  sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
+  sdfShader = null;
+};
+
+/**
+ * Lazily compile (and memoize) the SDF shader on first use.
+ *
+ * @remarks
+ * The shader program is compiled and linked the first time an SDF glyph is
+ * actually drawn, not at boot. Subsequent calls return the cached node.
+ */
+const getSdfShader = (stage: Stage): WebGlShaderNode => {
+  if (sdfShader === null) {
+    sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
+  }
+  return sdfShader;
 };
 
 const font: FontHandler = SdfFontHandler;
@@ -141,6 +159,8 @@ const renderQuads = (
   const webGlRenderer = renderer as WebGlRenderer;
   const cache = renderProps.sdfCache;
   const ctxTexture = atlasTexture.ctxTexture as WebGlCtxTexture;
+  // Compiles on the first real SDF draw; cheap memoized lookup thereafter.
+  const shader = getSdfShader(webGlRenderer.stage);
 
   // --- Cache-hit fast path ------------------------------------------------
   if (cache !== undefined && cache.vertices !== null) {
@@ -167,7 +187,7 @@ const renderQuads = (
         layout.height,
         renderProps.parentHasRenderTexture,
         renderProps.framebufferDimensions,
-        sdfShader!,
+        shader,
       );
       return null;
     }
@@ -189,7 +209,7 @@ const renderQuads = (
     layout.height,
     renderProps.parentHasRenderTexture,
     renderProps.framebufferDimensions,
-    sdfShader!,
+    shader,
   );
 
   // Snapshot the written vertex data into the cache for future frames

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
-  );
-}