Merge remote-tracking branch 'origin/master' into feat-webview

Tidyzq · Tidyzq · commit ea64855822c4 · 2025-10-17T17:10:20.000+08:00
diff --git a/glass-easel/src/behavior.ts b/glass-easel/src/behavior.ts
@@ -50,7 +50,7 @@ import {
   type PropertyDefinition,
 } from './data_proxy'
 import { simpleDeepCopy } from './data_utils'
-import { type EventListener } from './event'
+import { type EventListener, type ShadowedEvent } from './event'
 import { FuncArr, safeCallback } from './func_arr'
 import { type ComponentOptions } from './global_options'
 import { normalizeRelation, type RelationDefinition, type RelationHandler } from './relation'
@@ -189,6 +189,11 @@ export class BehaviorBuilder<
   _$init: { func: (this: any, ctx: any) => any; once: boolean }[] = []
   /** @internal */
   _$methodCallerInit?: (this: ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>) => any
+  /** @internal */
+  _$listenerEventReplacer?: (
+    this: ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>,
+    event: ShadowedEvent<unknown>,
+  ) => ShadowedEvent<unknown>
 
   /** @internal */
   constructor(is: string | undefined, ownerSpace: ComponentSpace) {
@@ -209,6 +214,21 @@ export class BehaviorBuilder<
     return this as any
   }
 
+  /**
+   * Set a listener wrapper function
+   *
+   * It should return the wrapped listener.
+   */
+  listenerEventReplacer(
+    func: (
+      this: ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>,
+      event: ShadowedEvent<unknown>,
+    ) => ShadowedEvent<unknown>,
+  ): ResolveBehaviorBuilder<this, TChainingFilter> {
+    this._$listenerEventReplacer = func
+    return this as any
+  }
+
   /**
    * Add a behavior
    *
@@ -850,6 +870,11 @@ export class Behavior<
   _$methodCallerInit?: (
     this: ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>,
   ) => ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>
+  /** @internal */
+  _$listenerEventReplacer?: (
+    this: ComponentInstance<TData, TProperty, TMethod, TExtraThisFields>,
+    event: ShadowedEvent<unknown>,
+  ) => ShadowedEvent<unknown>
 
   /**
    * Create a behavior with classic-style definition
@@ -900,6 +925,7 @@ export class Behavior<
     this._$relationMap = undefined
     this._$init = []
     this._$methodCallerInit = builder._$methodCallerInit
+    this._$listenerEventReplacer = builder._$listenerEventReplacer
   }
 
   general(): GeneralBehavior {
diff --git a/glass-easel/src/component.ts b/glass-easel/src/component.ts
@@ -53,7 +53,7 @@ import {
   performanceMeasureStart,
 } from './dev_tools'
 import { Element } from './element'
-import { type EventListener, type EventListenerOptions } from './event'
+import { type ShadowedEvent, type EventListener, type EventListenerOptions } from './event'
 import { type ExternalShadowRoot } from './external_shadow_tree'
 import { FuncArr, safeCallback, type GeneralFuncType } from './func_arr'
 import {
@@ -1232,6 +1232,13 @@ export class Component<
     return this._$methodCaller
   }
 
+  /**
+   * Get the final event object
+   */
+  getEventObject(e: ShadowedEvent<unknown>): ShadowedEvent<any> {
+    return this._$behavior._$listenerEventReplacer?.(e) || e
+  }
+
   /**
    * Add a lifetime event listener on the component
    */
diff --git a/glass-easel/src/event.ts b/glass-easel/src/event.ts
@@ -272,12 +272,13 @@ export class Event<TDetail> {
     targetCaller: Element,
     mark: { [name: string]: unknown } | null,
     currentTargetCaller: Element,
+    ownerHost: GeneralComponent | undefined,
   ): ShadowedEvent<TDetail> {
     const ret = Object.create(this) as ShadowedEvent<TDetail>
     ret.target = targetCaller
     ret.mark = mark
     ret.currentTarget = currentTargetCaller
-    return ret
+    return ownerHost?.getEventObject(ret) || ret
   }
 
   getEventName(): string {
@@ -346,7 +347,7 @@ export class Event<TDetail> {
       ? currentTarget.getMethodCaller() || currentTarget
       : currentTarget
     this._$hasListener ||= efa.funcArr.hasFunc()
-    const ev = this.wrapShadowedEvent(targetCaller, mark, currentTargetCaller)
+    const ev = this.wrapShadowedEvent(targetCaller, mark, currentTargetCaller, target.ownerShadowRoot?.getHostNode())
     const ret = efa.funcArr.call(
       currentTargetCaller,
       [ev],
diff --git a/glass-easel/src/func_arr.ts b/glass-easel/src/func_arr.ts
@@ -11,7 +11,6 @@ export class FuncArr<F extends GeneralFuncType> {
   private _$type: string
   /* @internal */
   private _$arr: F[] | null = null
-  /* @internal */
 
   constructor(type: string) {
     this._$type = type
diff --git a/glass-easel/src/native_node.ts b/glass-easel/src/native_node.ts
@@ -8,9 +8,9 @@ import {
 } from './backend'
 import { ClassList, StyleScopeManager } from './class_list'
 import { type DataValue, type ModelBindingListener } from './data_proxy'
-import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { Element } from './element'
 import { ENV, globalOptions } from './global_options'
+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'
 import { type ShadowRoot } from './shadow_root'
 import { NATIVE_NODE_SYMBOL, isNativeNode } from './type_symbol'
 
@@ -94,7 +94,6 @@ export class NativeNode extends Element {
       }
       if (ENV.DEV) performanceMeasureEnd()
     }
-
     return node
   }
 
diff --git a/glass-easel/src/tmpl/index.ts b/glass-easel/src/tmpl/index.ts
@@ -17,8 +17,6 @@ import {
 } from './proc_gen_wrapper'
 
 export {
-  setDefaultChangePropFilter,
-  setDefaultEventListenerWrapper,
   type TmplDevArgs,
   type EventListenerWrapper,
   type ChangePropListener,
diff --git a/glass-easel/src/tmpl/native_rendering.ts b/glass-easel/src/tmpl/native_rendering.ts
@@ -138,7 +138,7 @@ export class GlassEaselTemplateDOMInstance implements TemplateInstance, External
     const evName = event.getEventName()
     const bubbles = event.bubbles
     for (;;) {
-      const shadowedEvent = event.wrapShadowedEvent(target as any, null, cur as any)
+      const shadowedEvent = event.wrapShadowedEvent(target as any, null, cur as any, this.comp)
       const f = (cur as unknown as ElementWithEvent)._$wxTmplEv?.[evName]
       if (f) {
         const r = f.call(cur, shadowedEvent)
diff --git a/glass-easel/src/tmpl/proc_gen_wrapper.ts b/glass-easel/src/tmpl/proc_gen_wrapper.ts
@@ -4,9 +4,8 @@ import { Component, type GeneralComponent } from '../component'
 import { type DataPath } from '../data_path'
 import { type DataValue } from '../data_proxy'
 import { Element, StyleSegmentIndex } from '../element'
-import { type ShadowedEvent, type EventListener } from '../event'
+import { type EventListener } from '../event'
 import { safeCallback } from '../func_arr'
-import { ENV } from '../global_options'
 import { type NativeNode } from '../native_node'
 import { type Node } from '../node'
 import { SlotMode, type ShadowRoot } from '../shadow_root'
@@ -49,16 +48,10 @@ export interface EventListenerWrapper {
   isEventListenerWrapper?: true
 }
 
-let defaultChangePropFilter: ChangePropFilter = <T>(x: T) => x
-export const setDefaultChangePropFilter = (fn: ChangePropFilter) => {
-  defaultChangePropFilter = fn
-}
+const defaultChangePropFilter: ChangePropFilter = <T>(x: T) => x
 
-let defaultEventListenerWrapper: EventListenerWrapper = (elem, evName, listener) => (e) =>
+const defaultEventListenerWrapper: EventListenerWrapper = (elem, evName, listener) => (e) =>
   listener.call(elem.ownerShadowRoot?.getHostNode().getMethodCaller(), e)
-export const setDefaultEventListenerWrapper = (fn: EventListenerWrapper) => {
-  defaultEventListenerWrapper = fn
-}
 
 type TmplArgs = {
   key?: number | string
diff --git a/glass-easel/tests/core/behavior.test.ts b/glass-easel/tests/core/behavior.test.ts
@@ -512,6 +512,116 @@ describe('chaining-form interface', () => {
     expect(callOrder).toStrictEqual([3, 1, 2])
   })
 
+  test('chaining listener event replacer', () => {
+    const callOrder: [number, number | undefined][] = []
+    const beh = componentSpace
+      .define()
+      .init(({ self, lifetime }) => {
+        lifetime('created', () => {
+          self.addListener('customEv', (e) => {
+            callOrder.push([
+              1,
+              (e as glassEasel.ShadowedEvent<{ eventOrder?: number }>).detail.eventOrder,
+            ])
+          })
+        })
+      })
+      .registerBehavior()
+
+    let eventOrder = 0
+    const compDef = componentSpace
+      .define()
+      .behavior(beh)
+      .template(tmpl(`<div id="wrapper" bind:customEv="onCustomEv"></div>`))
+      .listenerEventReplacer((e) => {
+        eventOrder += 1
+        e.detail = { eventOrder }
+        return e
+      })
+      .init(({ self, lifetime, listener }) => {
+        lifetime('created', () => {
+          ;(self.shadowRoot as glassEasel.ShadowRoot).addListener('customEv', (e) => {
+            callOrder.push([
+              3,
+              (e as glassEasel.ShadowedEvent<{ eventOrder: number }>).detail.eventOrder,
+            ])
+          })
+        })
+        return {
+          onCustomEv: listener((e) => {
+            callOrder.push([
+              2,
+              (e as glassEasel.ShadowedEvent<{ eventOrder: number }>).detail.eventOrder,
+            ])
+          }),
+        }
+      })
+      .registerComponent()
+    const root = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    ;(root.$.wrapper as glassEasel.Element).triggerEvent(
+      'customEv',
+      {},
+      { bubbles: true, composed: true },
+    )
+    expect(callOrder).toStrictEqual([
+      [2, 1],
+      [3, 2],
+      [1, undefined],
+    ])
+  })
+
+  test('chaining listener event replacer on native rendering', () => {
+    const callOrder: [number, number | undefined][] = []
+    const beh = componentSpace
+      .define()
+      .init(({ self, lifetime }) => {
+        lifetime('created', () => {
+          self.addListener('customEv', (e) => {
+            callOrder.push([
+              1,
+              (e as glassEasel.ShadowedEvent<{ eventOrder?: number }>).detail.eventOrder,
+            ])
+          })
+        })
+      })
+      .registerBehavior()
+
+    let eventOrder = 0
+    const compDef = componentSpace
+      .define()
+      .behavior(beh)
+      .options({ externalComponent: true })
+      .template(tmpl(`<div id="wrapper" bind:customEv="onCustomEv"></div>`))
+      .listenerEventReplacer((e) => {
+        eventOrder += 1
+        e.detail = { eventOrder }
+        return e
+      })
+      .init(({ listener }) => {
+        return {
+          onCustomEv: listener((e) => {
+            callOrder.push([
+              2,
+              (e as glassEasel.ShadowedEvent<{ eventOrder: number }>).detail.eventOrder,
+            ])
+          }),
+        }
+      })
+      .registerComponent()
+    const root = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.triggerExternalEvent(
+      root,
+      root.$.wrapper as glassEasel.GeneralBackendElement,
+      'customEv',
+      {},
+      { bubbles: true, composed: true },
+    )
+    expect(callOrder).toStrictEqual([
+      [2, 1],
+      [1, undefined],
+    ])
+  })
+
   test('chaining relations', () => {
     const eventArr: number[] = []
     const parentDef = componentSpace

Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,9 @@ import {`
`8`	`8`	`} from './backend'`
`9`	`9`	`import { ClassList, StyleScopeManager } from './class_list'`
`10`	`10`	`import { type DataValue, type ModelBindingListener } from './data_proxy'`
`11`		`-import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'`
`12`	`11`	`import { Element } from './element'`
`13`	`12`	`import { ENV, globalOptions } from './global_options'`
	`13`	`+import { performanceMeasureEnd, performanceMeasureStart } from './dev_tools'`
`14`	`14`	`import { type ShadowRoot } from './shadow_root'`
`15`	`15`	`import { NATIVE_NODE_SYMBOL, isNativeNode } from './type_symbol'`
`16`	`16`
`@@ -94,7 +94,6 @@ export class NativeNode extends Element {`
`94`	`94`	`}`
`95`	`95`	`if (ENV.DEV) performanceMeasureEnd()`
`96`	`96`	`}`
`97`		`-`
`98`	`97`	`return node`
`99`	`98`	`}`
`100`	`99`