refactor: dev tools interface

glass-easel/src/component.ts

@@ -51,7 +51,7 @@ import {
   performanceMeasureEnd,
   performanceMeasureRenderWaterfall,
   performanceMeasureStart,
-} from './devtool'
+} from './dev_tools'
 import { Element } from './element'
 import { type EventListener, type EventListenerOptions } from './event'
 import { type ExternalShadowRoot } from './external_shadow_tree'

glass-easel/src/devtool.ts → glass-easel/src/dev_tools.ts

@@ -1,7 +1,18 @@
 import { type AnyComponent, type GeneralComponent } from './component'
+import type { Element } from './element'
 import { ENV, globalOptions } from './global_options'
 
-export type DevtoolInterface = {
+export interface DevTools {
+  inspector?: InspectorDevTools
+  performance?: PerformanceDevTools
+}
+
+export interface InspectorDevTools {
+  addMountPoint(root: Element): void
+  removeMountPoint(root: Element): void
+}
+
+export interface PerformanceDevTools {
   now: () => number
   addTimelineEvent: (time: number, type: string, data?: Record<string, unknown>) => void
   addTimelineComponentEvent: (
@@ -28,29 +39,31 @@ export type DevtoolInterface = {
   ) => void
 }
 
-let defaultDevtools: DevtoolInterface | null | undefined
+let cachedDevTools: DevTools | undefined
 
-export const getDevtool = (): DevtoolInterface | null | undefined => {
+const getDevTools = (): DevTools | null | undefined => {
   if (!ENV.DEV) return null
-  if (defaultDevtools === undefined) {
-    defaultDevtools =
-      globalOptions.devtool ||
+  if (cachedDevTools === undefined) {
+    cachedDevTools =
+      globalOptions.devTools ||
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      ((globalThis as any).__glass_easel_devtool__ as DevtoolInterface | undefined)
+      ((globalThis as any).__glassEaselDevTools__ as DevTools | undefined)
   }
-  return defaultDevtools
+  return cachedDevTools
 }
 
 export const performanceMeasureStart = (
   type: string,
   comp: AnyComponent | string | null = null,
   data?: Record<string, unknown>,
 ) => {
-  getDevtool()?.addTimelinePerformanceMeasureStart(getDevtool()!.now(), type, comp, data)
+  const perf = getDevTools()?.performance
+  perf?.addTimelinePerformanceMeasureStart(perf.now(), type, comp, data)
 }
 
 export const performanceMeasureEnd = () => {
-  getDevtool()?.addTimelinePerformanceMeasureEnd(getDevtool()!.now())
+  const perf = getDevTools()?.performance
+  perf?.addTimelinePerformanceMeasureEnd(perf.now())
 }
 
 export const performanceMeasureRenderWaterfall = (
@@ -59,21 +72,21 @@ export const performanceMeasureRenderWaterfall = (
   comp: AnyComponent,
   render: () => void,
 ) => {
-  const devtool = getDevtool()
-  if (!devtool) {
+  const perf = getDevTools()?.performance
+  if (!perf) {
     render()
     return
   }
 
-  const pendingTimestamp = devtool.now()
+  const pendingTimestamp = perf.now()
   const nodeTreeContext = comp.getBackendContext()
   if (nodeTreeContext) {
     const measureId = nodeTreeContext.performanceTraceStart?.()
     performanceMeasureStart(type, comp)
     render()
     performanceMeasureEnd()
     nodeTreeContext.performanceTraceEnd?.(measureId!, ({ startTimestamp, endTimestamp }) => {
-      devtool.addTimelineBackendWaterfall(waterfallType, [
+      perf.addTimelineBackendWaterfall(waterfallType, [
         pendingTimestamp,
         startTimestamp,
         endTimestamp,
@@ -85,5 +98,16 @@ export const performanceMeasureRenderWaterfall = (
 }
 
 export const addTimelineEvent = (type: string, data?: Record<string, unknown>) => {
-  getDevtool()?.addTimelineEvent(getDevtool()!.now(), type, data)
+  const perf = getDevTools()?.performance
+  perf?.addTimelineEvent(perf.now(), type, data)
+}
+
+export const attachInspector = (elem: Element) => {
+  const inspector = getDevTools()?.inspector
+  inspector?.addMountPoint(elem)
+}
+
+export const detachInspector = (elem: Element) => {
+  const inspector = getDevTools()?.inspector
+  inspector?.removeMountPoint(elem)
 }

glass-easel/src/element.ts

@@ -19,7 +19,12 @@ import {
   type MethodList,
   type PropertyList,
 } from './component_params'
-import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import {
+  attachInspector,
+  detachInspector,
+  performanceMeasureEnd,
+  performanceMeasureStart,
+} from './dev_tools'
 import {
   Event,
   EventTarget,
@@ -2490,6 +2495,7 @@ export class Element implements NodeCast {
       if (ENV.DEV) performanceMeasureEnd()
     }
     Element.checkAndCallAttached(element)
+    if (ENV.DEV) attachInspector(element)
   }
 
   /**
@@ -2502,6 +2508,7 @@ export class Element implements NodeCast {
     if (!element._$attached) {
       Element.checkAndCallAttached(element)
     }
+    if (ENV.DEV) attachInspector(element)
   }
 
   /**
@@ -2513,6 +2520,7 @@ export class Element implements NodeCast {
     if (element._$attached) {
       Element.checkAndCallDetached(element)
     }
+    if (ENV.DEV) detachInspector(element)
   }
 
   /** Check the element is attached or not */

glass-easel/src/event.ts

@@ -1,6 +1,6 @@
 import { type GeneralBackendElement } from './backend'
 import { type GeneralComponent } from './component'
-import { addTimelineEvent, performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { addTimelineEvent, performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { type Element } from './element'
 import { type ExternalShadowRoot } from './external_shadow_tree'
 import { FuncArrWithMeta } from './func_arr'

glass-easel/src/func_arr.ts

@@ -1,5 +1,5 @@
 import { type AnyComponent, type GeneralComponent } from './component'
-import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { ENV } from './global_options'
 import { type Node } from './node'
 

glass-easel/src/global_options.ts

@@ -2,7 +2,7 @@ import { type GeneralBackendContext } from './backend'
 import { type StyleScopeId } from './class_list'
 import { type GeneralComponent } from './component'
 import { type ComponentSpace } from './component_space'
-import { type DevtoolInterface } from './devtool'
+import { type DevTools } from './dev_tools'
 import { type TemplateEngine } from './template_engine'
 
 export const ENV = {
@@ -119,7 +119,7 @@ export type EnvironmentOptions = {
   /** The default backend context */
   backendContext: GeneralBackendContext | null
   /** The devtool interface */
-  devtool: DevtoolInterface | null
+  devTools: DevTools | null
 }
 
 /**
@@ -149,7 +149,7 @@ export const globalOptions: NormalizedComponentOptions & EnvironmentOptions = {
   throwGlobalError: false,
   writeExtraInfoToAttr: false,
   backendContext: null,
-  devtool: null,
+  devTools: null,
 }
 
 export const normalizeComponentOptions = (

glass-easel/src/index.ts

@@ -78,6 +78,7 @@ export {
   removeGlobalErrorListener,
   removeGlobalWarningListener,
 } from './warning'
+export { DevTools, InspectorDevTools, PerformanceDevTools } from './dev_tools'
 
 import { type Behavior } from './behavior'
 import {

glass-easel/src/native_node.ts

@@ -10,7 +10,7 @@ import { ClassList, StyleScopeManager } from './class_list'
 import { type DataValue, type ModelBindingListener } from './data_proxy'
 import { Element } from './element'
 import { ENV, globalOptions } from './global_options'
-import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { type ShadowRoot } from './shadow_root'
 import { NATIVE_NODE_SYMBOL, isNativeNode } from './type_symbol'
 

glass-easel/src/text_node.ts

@@ -9,7 +9,7 @@ import {
 } from './backend'
 import { type Element } from './element'
 import { ENV } from './global_options'
-import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { MutationObserverTarget } from './mutation_observer'
 import { type NodeCast } from './node'
 import { type ShadowRoot } from './shadow_root'

glass-easel/src/virtual_node.ts

@@ -1,5 +1,5 @@
 import { BM, BackendMode, type GeneralBackendContext } from './backend'
-import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { Element } from './element'
 import { ENV } from './global_options'
 import { type ShadowRoot } from './shadow_root'