@solidtv/renderer 1.0.3 → 1.0.5

package/src/core/Stage.ts

@@ -979,6 +979,9 @@ export class Stage {
       data,
       imageType: props.imageType,
       interactive: props.interactive ?? false,
+      preventDestroy: props.preventDestroy,
+      componentName: props.componentName,
+      componentLocation: props.componentLocation,
     };
   }
 

package/src/main-api/Inspector.ts

@@ -9,7 +9,7 @@ import type {
   IAnimationController,
   AnimationControllerState,
 } from '../common/IAnimationController.js';
-import { isProductionEnvironment } from '../utils.js';
+import { ENABLE_INSPECTOR } from '../utils.js';
 import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
 import type { Texture } from '../core/textures/Texture.js';
 import { TextureType } from '../core/textures/Texture.js';
@@ -230,8 +230,59 @@ const knownProperties = new Set<string>([
   'parent',
   'data',
   'text',
+  'componentName',
+  'componentLocation',
 ]);
 
+/**
+ * Convert a PascalCase or camelCase component name to a valid custom-element
+ * tag name by inserting hyphens before uppercase letters and lower-casing.
+ * A mandatory "x-" prefix is added so the name always contains a hyphen,
+ * which is required by the Custom Elements spec.
+ *
+ * Examples:
+ *   "MyButton"   → "x-my-button"
+ *   "FocusRing"  → "x-focus-ring"
+ *   "view"       → "x-view"
+ */
+function toCustomElementTag(componentName: string): string {
+  const kebab = componentName
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, ''); // strip leading hyphen if name starts with uppercase
+  return `${kebab}-x`;
+}
+
+/**
+ * Registry of custom element tag names that have already been defined so we
+ * only call customElements.define() once per unique component name.
+ */
+const registeredCustomElements = new Set<string>();
+
+/**
+ * Ensure a minimal custom element class is registered for the given tag name.
+ * The element extends HTMLElement with no additional behaviour; its only
+ * purpose is to make Chrome DevTools show the component name in the Elements
+ * panel.
+ */
+function ensureCustomElement(tagName: string): void {
+  if (registeredCustomElements.has(tagName)) {
+    return;
+  }
+  registeredCustomElements.add(tagName);
+
+  // Guard: skip if already defined (e.g. by another module) or if the
+  // Custom Elements API is unavailable (SSR / test environments).
+  if (
+    typeof customElements === 'undefined' ||
+    customElements.get(tagName) !== undefined
+  ) {
+    return;
+  }
+
+  customElements.define(tagName, class extends HTMLElement {});
+}
+
 export class Inspector {
   private root: HTMLElement | null = null;
   private canvas: HTMLCanvasElement | null = null;
@@ -289,7 +340,7 @@ export class Inspector {
   private animationStatsTimer: number | null = null;
 
   constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
-    if (isProductionEnvironment === true) return;
+    if (!ENABLE_INSPECTOR) return;
 
     if (!settings) {
       throw new Error('settings is required');
@@ -732,14 +783,29 @@ export class Inspector {
     id: number,
     properties: CoreNodeProps | CoreTextNodeProps,
   ): HTMLElement {
-    const div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.id = id.toString();
+    // Use a custom element tag when the node carries a componentName so that
+    // Chrome DevTools' Elements panel shows the framework component name
+    // instead of a generic <div>.
+    const componentName = (properties as CoreNodeProps).componentName;
+    let el: HTMLElement;
+
+    if (componentName) {
+      const tagName = toCustomElementTag(componentName);
+      ensureCustomElement(tagName);
+      el = document.createElement(tagName);
+      // Store the original PascalCase name as a readable attribute.
+      // el.setAttribute('data-component', componentName);
+    } else {
+      el = document.createElement('div');
+    }
+
+    el.style.position = 'absolute';
+    el.id = id.toString();
 
     // set initial properties
     for (const key in properties) {
       this.updateNodeProperty(
-        div,
+        el,
         // really typescript? really?
         key as keyof CoreNodeProps,
         properties[key as keyof CoreNodeProps],
@@ -747,7 +813,7 @@ export class Inspector {
       );
     }
 
-    return div;
+    return el;
   }
 
   createNodes(node: CoreNode): boolean {
@@ -1205,6 +1271,22 @@ export class Inspector {
       }
       return;
     }
+
+    // Component metadata – handled when the element is created in createDiv;
+    // re-applied here to support dynamic updates (rare but possible).
+    if (property === 'componentName' && value) {
+      const tagName = toCustomElementTag(String(value));
+      ensureCustomElement(tagName);
+      // div.setAttribute('data-component', String(value));
+      return;
+    }
+
+    if (property === 'componentLocation' && value) {
+      // Expose the source path so Chrome DevTools extensions and VS Code's
+      // browser debugger can offer "open in editor" functionality.
+      // div.setAttribute('data-location', String(value));
+      return;
+    }
   }
 
   updateViewport(

package/src/main-api/Renderer.ts

@@ -1,6 +1,6 @@
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { isProductionEnvironment } from '../utils.js';
+import { ENABLE_INSPECTOR } from '../utils.js';
 import { Stage, type StageOptions } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
 import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
@@ -620,7 +620,7 @@ export class RendererMain extends EventEmitter {
     }
 
     // Initialize inspector (if enabled)
-    if (inspector && isProductionEnvironment === false) {
+    if (inspector && ENABLE_INSPECTOR) {
       this.inspector = new inspector(canvas, settings as RendererMainSettings);
     }
   }
@@ -683,7 +683,7 @@ export class RendererMain extends EventEmitter {
   ): INode<ShNode> {
     const node = this.stage.createNode(props as Partial<CoreNodeProps>);
 
-    if (!isProductionEnvironment && this.inspector) {
+    if (ENABLE_INSPECTOR && this.inspector) {
       return this.inspector.createNode(node) as unknown as INode<ShNode>;
     }
 
@@ -707,7 +707,7 @@ export class RendererMain extends EventEmitter {
   createTextNode(props: Partial<ITextNodeProps>): ITextNode {
     const textNode = this.stage.createTextNode(props as CoreTextNodeProps);
 
-    if (!isProductionEnvironment && this.inspector) {
+    if (ENABLE_INSPECTOR && this.inspector) {
       return this.inspector.createTextNode(textNode) as unknown as ITextNode;
     }
 
@@ -724,7 +724,7 @@ export class RendererMain extends EventEmitter {
    * @returns
    */
   destroyNode(node: INode) {
-    if (!isProductionEnvironment && this.inspector) {
+    if (ENABLE_INSPECTOR && this.inspector) {
       this.inspector.destroyNode(node.id);
     }
 
@@ -888,7 +888,7 @@ export class RendererMain extends EventEmitter {
       stageOptions[key] = options[key]!;
     }
 
-    if (options.inspector !== undefined && !isProductionEnvironment) {
+    if (options.inspector !== undefined && ENABLE_INSPECTOR) {
       if (options.inspector === false) {
         this.inspector?.destroy();
         this.inspector = null;

package/src/utils.ts

@@ -77,6 +77,12 @@ export const CALCULATE_FPS =
     ? __calculateFps__
     : !isProductionEnvironment;
 
+declare const __enableInspector__: boolean;
+export const ENABLE_INSPECTOR =
+  typeof __enableInspector__ !== 'undefined'
+    ? __enableInspector__
+    : !isProductionEnvironment;
+
 // Works on WebOS 4!!
 declare const __dirtyQuadBuffer__: boolean;
 export const DIRTY_QUAD_BUFFER =