feat: import inspector so it isn't included by default

examples/index.ts

@@ -32,6 +32,7 @@ import {
   CanvasTextRenderer,
 } from '@lightningjs/renderer/canvas';
 
+import { Inspector } from '@lightningjs/renderer/inspector';
 import { assertTruthy } from '@lightningjs/renderer/utils';
 import * as mt19937 from '@stdlib/random-base-mt19937';
 import type {
@@ -223,6 +224,8 @@ async function initRenderer(
   enableInspector: boolean,
   customSettings?: Partial<RendererMainSettings>,
 ) {
+  let inspector: typeof Inspector | undefined;
+  if (enableInspector) inspector = Inspector;
   const renderer = new RendererMain(
     {
       appWidth,
@@ -233,7 +236,7 @@ async function initRenderer(
       clearColor: 0x00000000,
       fpsUpdateInterval: logFps ? 1000 : 0,
       enableContextSpy,
-      enableInspector,
+      inspector,
       renderEngine:
         renderMode === 'webgl' ? WebGlCoreRenderer : CanvasCoreRenderer,
       fontEngines: [SdfTextRenderer, CanvasTextRenderer],

exports/index.ts

@@ -66,6 +66,7 @@ export type {
 } from '../src/core/CoreShaderManager.js';
 export type { WebGlCoreRenderer } from '../src/core/renderers/webgl/WebGlCoreRenderer.js';
 export type { WebGlCoreCtxTexture } from '../src/core/renderers/webgl/WebGlCoreCtxTexture.js';
+export type { Inspector } from '../src/main-api/Inspector.js';
 
 // Shaders
 export * from '../src/core/renderers/webgl/WebGlCoreShader.js';

exports/inspector.ts

@@ -0,0 +1,20 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Inspector } from '../src/main-api/Inspector.js';

package.json

@@ -8,7 +8,8 @@
     ".": "./dist/exports/index.js",
     "./utils": "./dist/exports/utils.js",
     "./canvas": "./dist/exports/canvas.js",
-    "./webgl": "./dist/exports/webgl.js"
+    "./webgl": "./dist/exports/webgl.js",
+    "./inspector": "./dist/exports/inspector.js"
   },
   "scripts": {
     "preinstall": "node scripts/please-use-pnpm.js",

src/main-api/Inspector.ts

@@ -128,7 +128,7 @@ const convertColorToRgba = (color: number) => {
 };
 
 const domPropertyMap: { [key: string]: string } = {
-  id: 'id',
+  id: 'test-id',
 };
 
 const gradientColorPropertyMap = [
@@ -163,7 +163,7 @@ export class Inspector {
     );
 
     this.width = Math.ceil(
-      settings.appWidth ?? 1900 / (settings.deviceLogicalPixelRatio ?? 1),
+      settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1),
     );
 
     this.scaleX = settings.deviceLogicalPixelRatio ?? 1;

src/main-api/Renderer.ts

@@ -21,7 +21,6 @@
 import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js';
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { Inspector } from './Inspector.js';
 import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
@@ -44,6 +43,7 @@ import type { CanvasTextRenderer } from '../core/text-rendering/renderers/Canvas
 import type { SdfTextRenderer } from '../core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
 import type { WebGlCoreRenderer } from '../core/renderers/webgl/WebGlCoreRenderer.js';
 import type { CanvasCoreRenderer } from '../core/renderers/canvas/CanvasCoreRenderer.js';
+import type { Inspector } from './Inspector.js';
 
 /**
  * An immutable reference to a specific Shader type
@@ -185,16 +185,14 @@ export interface RendererMainSettings {
   numImageWorkers?: number;
 
   /**
-   * Enable inspector
+   * DOM Inspector
    *
    * @remarks
-   * When enabled the renderer will spawn a inspector. The inspector will
-   * replicate the state of the Nodes created in the renderer and allow
-   * inspection of the state of the nodes.
+   * The inspector will replicate the state of the Nodes created
+   * in the renderer and allow inspection of the state of the nodes.
    *
-   * @defaultValue `false` (disabled)
    */
-  enableInspector?: boolean;
+  inspector: typeof Inspector | undefined;
 
   /**
    * Renderer Engine
@@ -332,7 +330,7 @@ export class RendererMain extends EventEmitter {
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
-      enableInspector: settings.enableInspector ?? false,
+      inspector: settings.inspector,
       renderEngine: settings.renderEngine,
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
       fontEngines: settings.fontEngines,
@@ -344,7 +342,7 @@ export class RendererMain extends EventEmitter {
       appHeight,
       deviceLogicalPixelRatio,
       devicePhysicalPixelRatio,
-      enableInspector,
+      inspector,
     } = resolvedSettings;
 
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
@@ -397,8 +395,8 @@ export class RendererMain extends EventEmitter {
     targetEl.appendChild(canvas);
 
     // Initialize inspector (if enabled)
-    if (enableInspector && !isProductionEnvironment()) {
-      this.inspector = new Inspector(canvas, resolvedSettings);
+    if (inspector && !isProductionEnvironment()) {
+      this.inspector = new inspector(canvas, resolvedSettings);
     }
   }