Merge pull request #252 from wechat-miniprogram/feat-extend-listener-wrapper

Extend EventListenerWrapper & ChangePropFilter

Author: Tidyzq

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 {

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 {
@@ -1205,6 +1205,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
    */

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],

glass-easel/src/tmpl/native_rendering.ts

@@ -30,7 +30,6 @@ export class GlassEaselTemplateDOM implements Template {
   innerData: DataValue
   genObjectGroupEnv: ProcGenEnv
   updateMode: string
-  methods: { [name: string]: GeneralFuncType }
 
   constructor(behavior: GeneralBehavior) {
     if (typeof behavior._$template !== 'object' && behavior._$template !== undefined) {
@@ -47,7 +46,6 @@ export class GlassEaselTemplateDOM implements Template {
       }
     }
     this.updateMode = ''
-    this.methods = behavior._$methodMap
   }
 
   createInstance(comp: GeneralComponent): TemplateInstance {
@@ -140,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)

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'
@@ -31,28 +30,34 @@ export type ChangePropListener<T> = (
 
 export type ChangePropFilter = <T>(
   listener: ChangePropListener<T>,
-  generalLvaluePath?: DataPath | null,
+  generalLvaluePath: DataPath | null | undefined,
+  elem: Element,
+  propName: string,
 ) => ChangePropListener<T>
 
 export interface EventListenerWrapper {
   <T>(
-    elem: GeneralComponent,
-    event: ShadowedEvent<T>,
+    elem: Element,
+    evName: string,
     listener: EventListener<T>,
+    final: boolean,
+    mutated: boolean,
+    capture: boolean,
     generalLvaluePath?: DataPath | null,
-  ): boolean | void
+  ): EventListener<T> | null
+  isEventListenerWrapper?: true
 }
 
-const emptyFilter = <T>(x: T) => x
+const defaultChangePropFilter: ChangePropFilter = <T>(x: T) => x
 
-const defaultEventListenerWrapper: EventListenerWrapper = (elem, event, listener) =>
-  listener.apply(elem, [event])
+const defaultEventListenerWrapper: EventListenerWrapper = (elem, evName, listener) => (e) =>
+  listener.call(elem.ownerShadowRoot?.getHostNode().getMethodCaller(), e)
 
 type TmplArgs = {
   key?: number | string
   keyList?: RangeListManager
   dynEvListeners?: {
-    [name: string]: EventListener<unknown>
+    [name: string]: EventListener<unknown> | null
   }
   dynamicSlotNameMatched?: boolean
   changeProp?: {
@@ -183,7 +188,7 @@ export class ProcGenWrapper {
   procGen: ProcGen
   fallbackListenerOnNativeNode: boolean
   bindingMapDisabled = false
-  changePropFilter: ChangePropFilter = emptyFilter
+  changePropFilter: ChangePropFilter = defaultChangePropFilter
   eventListenerWrapper: EventListenerWrapper = defaultEventListenerWrapper
 
   constructor(shadowRoot: ShadowRoot, procGen: ProcGen, fallbackListenerOnNativeNode: boolean) {
@@ -1146,21 +1151,23 @@ export class ProcGenWrapper {
     generalLvaluePath?: DataPath | null,
   ) => {
     const handler = typeof v === 'function' ? v : dataValueToString(v)
-    const listener: EventListener<unknown> = (ev) => {
-      const host = elem.ownerShadowRoot!.getHostNode()
-      const methodCaller = host.getMethodCaller()
-      const f = typeof handler === 'function' ? handler : Component.getMethod(host, handler)
-      if (typeof f === 'function') {
-        return this.eventListenerWrapper(
-          methodCaller,
-          ev,
-          f as EventListener<unknown>,
-          generalLvaluePath,
-        )
-      }
-      return undefined
-    }
-    if (ENV.DEV) {
+    const listener = this.eventListenerWrapper(
+      elem,
+      evName,
+      function (this: any, ...args: any[]) {
+        const host = elem.ownerShadowRoot!.getHostNode()
+        const f = typeof handler === 'function' ? handler : Component.getMethod(host, handler)
+        if (typeof f === 'function') {
+          return f.call(this, ...args) as boolean | void
+        }
+        return undefined
+      },
+      final,
+      mutated,
+      capture,
+      generalLvaluePath,
+    )
+    if (listener) {
       Object.defineProperty(listener, 'name', {
         value: typeof handler === 'string' ? handler : handler.name,
       })
@@ -1179,7 +1186,7 @@ export class ProcGenWrapper {
       }
       dynEvListeners[evName] = listener
     }
-    if (handler) elem.addListener(evName, listener, evOptions)
+    if (handler && listener) elem.addListener(evName, listener, evOptions)
   }
 
   // update a property or external class of a component, or an attribute of a native node
@@ -1267,7 +1274,7 @@ export class ProcGenWrapper {
       tmplArgs.changeProp = Object.create(null) as typeof tmplArgs.changeProp
     }
     tmplArgs.changeProp![name] = {
-      listener: this.changePropFilter(v, generalLvaluePath),
+      listener: this.changePropFilter(v, generalLvaluePath, elem, name),
       oldValue: undefined,
     }
   }

glass-easel/src/tmpl/proc_gen_wrapper_dom.ts

@@ -219,12 +219,15 @@ export class ProcGenWrapperDom {
 
   // set event handler
   v = (elem: HTMLElement, evName: string, v: string, final: boolean) => {
-    this.shadowRoot.setListener(elem as unknown as GeneralBackendElement, evName, (ev) => {
-      const handler = this.shadowRoot.template.methods[v]
-      const ret = handler?.(ev) as unknown
+    const listener = (ev: ShadowedEvent<unknown>) => {
+      const ret = this.shadowRoot.comp.callMethod(v, ev) as unknown
       if (final) return false
       return ret
+    }
+    Object.defineProperty(listener, 'name', {
+      value: v,
     })
+    this.shadowRoot.setListener(elem as unknown as GeneralBackendElement, evName, listener)
   }
 
   // update a property or external class of a component, or an attribute of a native node

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