glass-easel 0.2.0 → 0.3.0

package/src/element_iterator.ts

@@ -1,6 +1,6 @@
 import { Element } from './element'
-import { TextNode } from './text_node'
-import { Node } from './node'
+import { type Node } from './node'
+import { isElement, isTextNode } from './type_symbol'
 
 /** The iterator direction and order */
 export const enum ElementIteratorType {
@@ -24,10 +24,15 @@ export const enum ElementIteratorType {
  * This iterator is convenient but seems a little slower.
  */
 export class ElementIterator {
+  /* @internal */
   private _$node: Node
+  /* @internal */
   private _$nodeTypeLimit: unknown
+  /* @internal */
   private _$composed: boolean
+  /* @internal */
   private _$isAncestor: boolean
+  /* @internal */
   private _$rootFirst: boolean
 
   /**
@@ -41,7 +46,7 @@ export class ElementIterator {
    * Specify `Component` will only return components.
    */
   constructor(node: Node, type: ElementIteratorType, nodeTypeLimit: unknown = Element) {
-    if (!(node instanceof Element) && !(node instanceof TextNode)) {
+    if (!isElement(node) && !isTextNode(node)) {
       throw new Error('Element iterators can only be used in elements or text nodes')
     }
     this._$node = node
@@ -110,7 +115,7 @@ export class ElementIterator {
             if (f(node) === false) return false
           }
         }
-        if (node instanceof Element) {
+        if (isElement(node)) {
           let interrupted = false
           const childFn = (child: Node) => {
             if (rec(child) === false) {

package/src/event.ts

@@ -1,12 +1,11 @@
+import { type GeneralBackendElement } from './backend'
+import { type GeneralComponent } from './component'
+import { addTimelineEvent, performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { type Element } from './element'
+import { type ExternalShadowRoot } from './external_shadow_tree'
 import { FuncArrWithMeta } from './func_arr'
-import {
-  Element,
-  Component,
-  GeneralComponent,
-  ShadowRoot,
-  GeneralBackendElement,
-  ExternalShadowRoot,
-} from '.'
+import { ENV } from './global_options'
+import { isComponent, isShadowRoot } from './type_symbol'
 
 /**
  * Options for an event
@@ -17,6 +16,7 @@ export type EventOptions = {
   composed?: boolean
   capturePhase?: boolean
   extraFields?: { [key: string]: unknown }
+  handleListenerReturn?: (ret: unknown) => boolean | void
 }
 
 /**
@@ -116,7 +116,7 @@ export class EventTarget<TEvents extends { [type: string]: unknown }> {
       efa = listeners[name] = {
         mutCount: 0,
         finalCount: 0,
-        funcArr: new FuncArrWithMeta(),
+        funcArr: new FuncArrWithMeta('listener'),
       }
     }
     efa.funcArr.add(func, mutLevel)
@@ -177,6 +177,8 @@ export class Event<TDetail> {
   bubbles: boolean
   composed: boolean
   /** @internal */
+  private _$eventName: string
+  /** @internal */
   private _$capturePhase: boolean
   /** @internal */
   private _$originalEvent: unknown
@@ -188,10 +190,12 @@ export class Event<TDetail> {
     mutated: boolean
     noDefault: boolean
   }
+  /** @internal */
+  private _$handleListenerReturn: ((ret: unknown) => boolean | void) | undefined
 
   constructor(name: string, detail: TDetail, options: EventOptions = {}) {
     const ts = getCurrentTimeStamp()
-    this.type = name
+    this._$eventName = this.type = name
     this.timeStamp = ts
     this.detail = detail
     this.bubbles = options.bubbles || false
@@ -204,6 +208,7 @@ export class Event<TDetail> {
     }
     this._$originalEvent = options.originalEvent
     this._$dispatched = false
+    this._$handleListenerReturn = options.handleListenerReturn
     if (options.extraFields) {
       Object.assign(this, options.extraFields)
     }
@@ -226,6 +231,10 @@ export class Event<TDetail> {
     return ret
   }
 
+  getEventName(): string {
+    return this._$eventName
+  }
+
   getOriginalEvent(): unknown {
     return this._$originalEvent
   }
@@ -254,13 +263,17 @@ export class Event<TDetail> {
     return this._$eventBubblingControl.mutated
   }
 
+  listenerReturnHandler() {
+    return this._$handleListenerReturn
+  }
+
   callListener(
     currentTarget: Element,
     mark: Record<string, unknown> | null,
     target: Element,
     isCapture: boolean,
   ) {
-    const evName = this.type
+    const evName = this._$eventName
 
     const eventTarget = currentTarget._$eventTarget
     if (!eventTarget) return
@@ -270,18 +283,18 @@ export class Event<TDetail> {
     if (!efa) return
     const skipMut = this.mutatedMarked()
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const targetCaller = target instanceof Component ? target.getMethodCaller() || target : target
+    const targetCaller = isComponent(target) ? target.getMethodCaller() || target : target
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const currentTargetCaller =
-      currentTarget instanceof Component
-        ? currentTarget.getMethodCaller() || currentTarget
-        : currentTarget
+    const currentTargetCaller = isComponent(currentTarget)
+      ? currentTarget.getMethodCaller() || currentTarget
+      : currentTarget
     const ev = this.wrapShadowedEvent(targetCaller, mark, currentTargetCaller)
     const ret = efa.funcArr.call(
       currentTargetCaller,
       [ev],
       (mulLevel) => !skipMut || mulLevel !== MutLevel.Mut,
-      target instanceof Component ? (target as GeneralComponent) : undefined,
+      isComponent(target) ? target : undefined,
+      this._$handleListenerReturn,
     )
     if (ret === false || efa.finalCount > 0) {
       ev.stopPropagation()
@@ -295,6 +308,10 @@ export class Event<TDetail> {
     if (this._$dispatched) {
       throw new Error('Event cannot be dispatched twice')
     }
+    if (ENV.DEV) {
+      addTimelineEvent(this._$eventName, { event: this })
+      performanceMeasureStart('event.dispatch')
+    }
     this._$dispatched = true
     const crossShadow = this.composed
     const bubbles = this.bubbles
@@ -312,7 +329,7 @@ export class Event<TDetail> {
           if (f(currentTarget, target, mark) === false) return null
           let next
           if (crossShadow) {
-            if (currentTarget instanceof ShadowRoot) return currentTarget.getHostNode()
+            if (isShadowRoot(currentTarget)) return currentTarget.getHostNode()
             if (currentTarget.containingSlot === null) return null
             if (currentTarget.containingSlot) {
               next = recShadow(currentTarget.containingSlot)
@@ -354,7 +371,7 @@ export class Event<TDetail> {
 
     // bubble phase in external component
     if (!eventBubblingControl.stopped && externalTarget) {
-      if (target instanceof Component && target._$external) {
+      if (isComponent(target) && target._$external) {
         ;(target.shadowRoot as ExternalShadowRoot).handleEvent(externalTarget, this)
       }
     }
@@ -363,7 +380,7 @@ export class Event<TDetail> {
     if (!eventBubblingControl.stopped && !inExternalOnly) {
       let atTarget = true
       forEachBubblePath(target, (currentTarget, target, mark) => {
-        if (!atTarget && currentTarget instanceof Component && currentTarget._$external) {
+        if (!atTarget && isComponent(currentTarget) && currentTarget._$external) {
           const sr = currentTarget.shadowRoot as ExternalShadowRoot
           sr.handleEvent(sr.slot, this)
         }
@@ -374,6 +391,8 @@ export class Event<TDetail> {
         return bubbles && !eventBubblingControl.stopped
       })
     }
+
+    if (ENV.DEV) performanceMeasureEnd()
   }
 
   static dispatchEvent<TDetail>(target: Element, event: Event<TDetail>) {

package/src/external_shadow_tree.ts

@@ -1,5 +1,5 @@
-import { Event, ShadowedEvent } from './event'
-import { GeneralBackendElement } from './node'
+import { type Event, type ShadowedEvent } from './event'
+import { type GeneralBackendElement } from './backend'
 
 /**
  * An external shadow root

package/src/func_arr.ts

@@ -1,31 +1,18 @@
-import { Component, GeneralComponent } from '.'
-import { globalOptions } from './global_options'
+import { type AnyComponent, type GeneralComponent } from './component'
+import { performanceMeasureEnd, performanceMeasureStart } from './devtool'
+import { ENV } from './global_options'
+import { type Node } from './node'
 
 export type GeneralFuncType = (this: any, ...args: any[]) => any
 
-type ErrorInfo = {
-  message: string
-  type: string
-  element: unknown
-  method: unknown
-  args: unknown[]
-}
-
-function dispatchError(err: unknown, info: ErrorInfo, avoidErrorHandler?: boolean) {
-  if (!avoidErrorHandler && errorFuncArr.call(err as any, [err, info]) === false) return
-  if (globalOptions.throwGlobalError) {
-    throw err
-  } else {
-    // eslint-disable-next-line no-console
-    console.error(err instanceof Error ? `${err.message}\n${err.stack || ''}` : String(err))
-  }
-}
-
 export class FuncArr<F extends GeneralFuncType> {
   empty = true
-  private _$type = ''
+  private _$type: string
   private _$arr: F[] | null = null
-  _$avoidErrorHandler = false
+
+  constructor(type: string) {
+    this._$type = type
+  }
 
   add(func: F) {
     if (!this._$arr) this._$arr = [func]
@@ -52,93 +39,32 @@ export class FuncArr<F extends GeneralFuncType> {
     return ret
   }
 
-  call(caller: ThisType<F>, args: Parameters<F>, relatedComponent?: GeneralComponent): boolean {
+  call(
+    caller: ThisParameterType<F>,
+    args: Parameters<F>,
+    relatedComponent?: AnyComponent,
+  ): boolean {
     const arr = this._$arr
     let ret = true
     if (arr) {
       for (let i = 0; i < arr.length; i += 1) {
-        const r = safeCallback(
-          this._$type,
-          arr[i]!,
-          caller,
-          args,
-          relatedComponent,
-          this._$avoidErrorHandler,
-        )
+        const r = safeCallback<F>(this._$type, arr[i]!, caller, args, relatedComponent)
         if (r === false) ret = false
       }
     }
     return ret
   }
-
-  static safeCallback<F extends GeneralFuncType>(
-    this: void,
-    type: string,
-    method: F,
-    caller: ThisType<F>,
-    args: Parameters<F>,
-    relatedComponent?: GeneralComponent,
-    avoidErrorHandler = false,
-  ): ReturnType<F> | undefined {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return method.apply(caller, args)
-    } catch (e) {
-      let msg = `[Error] [Component] ${type || 'Error Listener'} Error @ `
-      if (caller instanceof Component) msg += caller.is
-      msg += `#${method.name || '(anonymous)'}`
-      if (relatedComponent) {
-        relatedComponent.triggerLifetime('error', [e])
-      }
-      dispatchError(
-        e,
-        {
-          message: msg,
-          type,
-          element: caller,
-          method,
-          args,
-        },
-        avoidErrorHandler,
-      )
-      return undefined
-    }
-  }
-
-  static addGlobalErrorListener(this: void, func: (err: Error, info: ErrorInfo) => boolean) {
-    errorFuncArr.add(func)
-  }
-
-  static removeGlobalErrorListener(this: void, func: (err: Error, info: ErrorInfo) => boolean) {
-    errorFuncArr.remove(func)
-  }
-
-  static addGlobalWarningListener(this: void, func: (msg: string) => void) {
-    warningFuncArr.add(func)
-  }
-
-  static removeGlobalWarningListener(this: void, func: (msg: string) => void) {
-    warningFuncArr.remove(func)
-  }
-}
-
-export function triggerWarning(msg: string) {
-  const message = `[Warning] [Component] ${msg}`
-  if (warningFuncArr.call(message, [message])) {
-    // eslint-disable-next-line no-console
-    console.warn(message)
-  }
 }
 
-const errorFuncArr = new FuncArr()
-errorFuncArr._$avoidErrorHandler = true
-const warningFuncArr = new FuncArr()
-
 export class FuncArrWithMeta<F extends GeneralFuncType, T> {
   empty = true
-  private _$type = ''
+  private _$type: string
   private _$arr: { f: F; data: T }[] | null = null
 
+  constructor(type: string) {
+    this._$type = type
+  }
+
   add(func: F, data: T) {
     const item = { f: func, data }
     if (!this._$arr) this._$arr = [item]
@@ -167,10 +93,11 @@ export class FuncArrWithMeta<F extends GeneralFuncType, T> {
   }
 
   call(
-    caller: ThisType<F>,
+    caller: ThisParameterType<F>,
     args: Parameters<F>,
     retainFn: (data: T) => boolean,
     relatedComponent?: GeneralComponent,
+    handleReturn?: (ret: unknown) => boolean | void,
   ): boolean {
     const arr = this._$arr
     let ret = true
@@ -178,7 +105,8 @@ export class FuncArrWithMeta<F extends GeneralFuncType, T> {
       for (let i = 0; i < arr.length; i += 1) {
         const { f, data } = arr[i]!
         if (!retainFn(data)) continue
-        const r = FuncArr.safeCallback(this._$type, f, caller, args, relatedComponent)
+        const rawReturn = safeCallback(this._$type, f, caller, args, relatedComponent)
+        const r = handleReturn ? handleReturn(rawReturn) : rawReturn
         if (r === false) ret = false
       }
     }
@@ -186,8 +114,34 @@ export class FuncArrWithMeta<F extends GeneralFuncType, T> {
   }
 }
 
-export const safeCallback = FuncArr.safeCallback
-export const addGlobalErrorListener = FuncArr.addGlobalErrorListener
-export const removeGlobalErrorListener = FuncArr.removeGlobalErrorListener
-export const addGlobalWarningListener = FuncArr.addGlobalWarningListener
-export const removeGlobalWarningListener = FuncArr.removeGlobalWarningListener
+let dispatchError: (
+  err: unknown,
+  method?: string,
+  relatedComponent?: AnyComponent | string,
+  element?: Node,
+) => void = () => {}
+
+export function _setErrorDispatcher(dispatcher: typeof dispatchError) {
+  dispatchError = dispatcher
+}
+
+export function safeCallback<F extends GeneralFuncType>(
+  this: void,
+  type: string,
+  method: F,
+  caller: ThisParameterType<F>,
+  args: Parameters<F>,
+  relatedComponent?: AnyComponent,
+): ReturnType<F> | undefined {
+  try {
+    if (ENV.DEV)
+      performanceMeasureStart(`${type}.${method.name || '(anonymous)'}`, relatedComponent, { args })
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return method.apply(caller, args)
+  } catch (e) {
+    dispatchError(e, `${type || 'Listener'} ${method.name || '(anonymous)'}`, relatedComponent)
+    return undefined
+  } finally {
+    if (ENV.DEV) performanceMeasureEnd()
+  }
+}

package/src/global_options.ts

@@ -1,13 +1,13 @@
-import * as backend from './backend/backend_protocol'
-import * as composedBackend from './backend/composed_backend_protocol'
-import * as domlikeBackend from './backend/domlike_backend_protocol'
-import { StyleScopeId, StyleScopeManager } from './class_list'
-import { Context as BackendContext } from './backend/backend_protocol'
-import { TemplateEngine } from './template_engine'
-import { ComponentSpace } from './component_space'
-import { GlassEaselTemplateEngine } from './tmpl'
-import { GeneralComponent, GeneralBackendContext } from '.'
-import { BM } from './backend/mode'
+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 TemplateEngine } from './template_engine'
+
+export const ENV = {
+  DEV: !(typeof process && process.env.NODE_ENV === 'production'),
+}
 
 /**
  * The deep copy strategy
@@ -40,33 +40,6 @@ export enum DeepCopyKind {
   SimpleWithRecursion = 'simple-recursion',
 }
 
-let defaultComponentSpace: ComponentSpace | null = null
-
-export const getDefaultComponentSpace = (): ComponentSpace => {
-  if (defaultComponentSpace) {
-    return defaultComponentSpace
-  }
-  const cs = new ComponentSpace()
-  defaultComponentSpace = cs
-  return cs
-}
-
-let defaultBackendContext: GeneralBackendContext | null = null
-
-export const getDefaultBackendContext = (): GeneralBackendContext => {
-  if (defaultBackendContext) return defaultBackendContext
-  let c: GeneralBackendContext
-  if (BM.DOMLIKE) {
-    c = new domlikeBackend.CurrentWindowBackendContext()
-  } else if (BM.COMPOSED) {
-    c = new composedBackend.EmptyComposedBackendContext()
-  } else {
-    c = new backend.EmptyBackendContext()
-  }
-  defaultBackendContext = c
-  return c
-}
-
 /**
  * Options for a component
  */
@@ -114,8 +87,8 @@ export type ComponentOptions = {
 export type NormalizedComponentOptions = {
   externalComponent: boolean
   hostNodeTagName: string
-  templateEngine: TemplateEngine
-  styleScope: StyleScopeId
+  templateEngine: TemplateEngine | null
+  styleScope: StyleScopeId | null
   extraStyleScope: StyleScopeId | null
   multipleSlots: boolean
   dynamicSlots: boolean
@@ -144,7 +117,9 @@ export type EnvironmentOptions = {
   /** Write some extra attributes to DOM backend (for testing) */
   writeExtraInfoToAttr: boolean
   /** The default backend context */
-  backendContext: BackendContext | null
+  backendContext: GeneralBackendContext | null
+  /** The devtool interface */
+  devtool: DevtoolInterface | null
 }
 
 /**
@@ -153,8 +128,8 @@ export type EnvironmentOptions = {
 export const globalOptions: NormalizedComponentOptions & EnvironmentOptions = {
   defaultComponentSpace: null,
   externalComponent: false,
-  templateEngine: new GlassEaselTemplateEngine(),
-  styleScope: StyleScopeManager.globalScope(),
+  templateEngine: null,
+  styleScope: null,
   extraStyleScope: null,
   hostNodeTagName: 'wx-x',
   multipleSlots: false,
@@ -174,6 +149,7 @@ export const globalOptions: NormalizedComponentOptions & EnvironmentOptions = {
   throwGlobalError: false,
   writeExtraInfoToAttr: false,
   backendContext: null,
+  devtool: null,
 }
 
 export const normalizeComponentOptions = (