Merge pull request #265 from wechat-miniprogram/feat-custom-method

feat(shadow-sync): add custom event

Author: Tidyzq

glass-easel-shadow-sync/src/backend.ts

@@ -377,25 +377,8 @@ export class ShadowSyncElement implements GlassEaselBackend.Element {
     this._context.channel.getContext(this._id, cb)
   }
 
-  setWXSListenerStats(
-    eventName: string,
-    final: boolean,
-    mutated: boolean,
-    capture: boolean,
-    lvaluePath: (string | number)[],
-  ): void {
-    this._context.channel.setWXSListenerStats(
-      this._id,
-      eventName,
-      final,
-      mutated,
-      capture,
-      lvaluePath,
-    )
-  }
-
-  callWxsPropChangeListener(newValue: any, oldValue: any, lvaluePath: (string | number)[]): void {
-    this._context.channel.callWXSPropChangeListener(this._id, newValue, oldValue, lvaluePath)
+  sendCustomMethod(options: unknown) {
+    this._context.channel.callCustomMethod(this._id, options)
   }
 }
 
@@ -687,6 +670,11 @@ export class ShadowSyncBackendContext implements GlassEaselBackend.Context {
     glassEasel: typeof import('glass-easel'),
     roots: Node[],
     getShadowSyncElement: (elem: Node) => ShadowSyncElement,
+    afterReplayElement?: (
+      ownerShadowRoot: ShadowSyncShadowRoot,
+      elem: Node,
+      be: ShadowSyncElement,
+    ) => void,
   ) {
     roots.forEach((root) => {
       replayShadowBackend(glassEasel, this, root, {
@@ -736,15 +724,21 @@ export class ShadowSyncBackendContext implements GlassEaselBackend.Context {
           }
           return be
         },
+        afterReplayElement,
       })
       this._shadowRoot.appendChild(getShadowSyncElement(root))
     })
   }
 
-  onWXSCallMethod(handler: (component: GeneralComponent, method: string, args: any[]) => void) {
-    this.channel.onWXSCallMethod((componentId, method, args) => {
-      const component = this._getElementId(componentId)!.__wxElement as GeneralComponent
-      handler(component, method, args)
+  sendCustomMethod(options: unknown) {
+    this.channel.callCustomMethod(null, options)
+  }
+
+  onCustomMethodFromView(handler: (element: Element | null, options: any) => void) {
+    this.channel.onCustenMethod((elementId, options) => {
+      const element =
+        elementId !== null ? (this._getElementId(elementId)!.__wxElement as GeneralComponent) : null
+      handler(element, options)
     })
   }
 
@@ -803,7 +797,7 @@ export class ShadowSyncBackendContext implements GlassEaselBackend.Context {
 
 export const hookBuilderToSyncData = <TBuilder extends GeneralBehaviorBuilder>(
   builder: TBuilder,
-  getComponentFromMethodCaller?: (methodCaller: GeneralComponent) => GeneralComponent | undefined
+  getComponentFromMethodCaller?: (methodCaller: GeneralComponent) => GeneralComponent | undefined,
 ): TBuilder => {
   const properties: string[] = []
 

glass-easel-shadow-sync/src/message_channel.ts

@@ -18,7 +18,6 @@ export const enum ChannelEventType {
   CREATE = 1,
   CREATE_CALLBACK,
   DESTROY,
-  INIT_DATA,
 
   ON_WINDOW_RESIZE,
   ON_WINDOW_RESIZE_CALLBACK,
@@ -110,9 +109,7 @@ export const enum ChannelEventType {
   PERFORMANCE_END_TRACE,
   PERFORMANCE_STATS_CALLBACK,
 
-  SET_WXS_LISTENER_STATS,
-  CALL_WXS_PROP_CHANGE_LISTENER,
-  ON_WXS_CALL_METHOD,
+  CUSTOM_METHOD,
 }
 
 export type ChannelEventTypeViewSide =
@@ -138,17 +135,18 @@ export type ChannelEventTypeViewSide =
   | ChannelEventType.ON_EVENT
   | ChannelEventType.ON_RELEASE_EVENT
   | ChannelEventType.PERFORMANCE_STATS_CALLBACK
-  | ChannelEventType.ON_WXS_CALL_METHOD
+  | ChannelEventType.CUSTOM_METHOD
 
-export type ChannelEventTypeDataSide = Exclude<ChannelEventType, ChannelEventTypeViewSide>
+export type ChannelEventTypeDataSide =
+  | Exclude<ChannelEventType, ChannelEventTypeViewSide>
+  | ChannelEventType.CUSTOM_METHOD
 
 type ExhaustiveChannelEvent<T extends Record<ChannelEventType, any>> = T
 
 export type ChannelArgs = ExhaustiveChannelEvent<{
   [ChannelEventType.CREATE]: [number]
   [ChannelEventType.CREATE_CALLBACK]: [number, number, number, number, string]
   [ChannelEventType.DESTROY]: []
-  [ChannelEventType.INIT_DATA]: [string]
 
   [ChannelEventType.ON_WINDOW_RESIZE]: [number]
   [ChannelEventType.ON_WINDOW_RESIZE_CALLBACK]: [number, number, number, number]
@@ -261,16 +259,7 @@ export type ChannelArgs = ExhaustiveChannelEvent<{
   [ChannelEventType.START_OVERLAY_INSPECT_CALLBACK]: [number, string, number | null]
   [ChannelEventType.STOP_OVERLAY_INSPECT]: []
 
-  [ChannelEventType.SET_WXS_LISTENER_STATS]: [
-    number,
-    string,
-    boolean,
-    boolean,
-    boolean,
-    (string | number)[],
-  ]
-  [ChannelEventType.CALL_WXS_PROP_CHANGE_LISTENER]: [number, unknown, unknown, (string | number)[]]
-  [ChannelEventType.ON_WXS_CALL_METHOD]: [number, string, string]
+  [ChannelEventType.CUSTOM_METHOD]: [number | null, unknown]
 }>
 
 export type Channel = ReturnType<typeof MessageChannelDataSide>
@@ -317,8 +306,7 @@ export const MessageChannelDataSide = (
       ) => void)
     | null = null
 
-  let handleWXSCallMethod: ((elementId: number, method: string, args: unknown[]) => void) | null =
-    null
+  let handleCustomMethod: ((elementId: number | null, options: any) => void) | null = null
   let overlayInspectCallbackId: number | null = null
 
   const callback2id = (cb: (...args: any[]) => void) => {
@@ -472,9 +460,9 @@ export const MessageChannelDataSide = (
         })
         break
       }
-      case ChannelEventType.ON_WXS_CALL_METHOD: {
-        const [, elementId, method, args] = arg
-        handleWXSCallMethod!(elementId, method, JSON.parse(args) as unknown[])
+      case ChannelEventType.CUSTOM_METHOD: {
+        const [, elementId, options] = arg
+        handleCustomMethod?.(elementId, options)
         break
       }
       default:
@@ -491,7 +479,6 @@ export const MessageChannelDataSide = (
       }) => void,
     ) => publish([ChannelEventType.CREATE, callback2id(init)]),
     destroy: () => publish([ChannelEventType.DESTROY]),
-    initData: (initData: Record<string, unknown>) => publish([ChannelEventType.INIT_DATA, JSON.stringify(initData)]),
 
     onWindowResize: (
       cb: (res: { width: number; height: number; devicePixelRatio: number }) => void,
@@ -632,11 +619,10 @@ export const MessageChannelDataSide = (
     performanceStartTrace: (index: number) => publish([ChannelEventType.PERFORMANCE_START_TRACE, index]),
     performanceEndTrace: (id: number, cb: (stats: { startTimestamp: number; endTimestamp: number }) => void,) => publish([ChannelEventType.PERFORMANCE_END_TRACE, id, callback2id(cb)]),
 
-    setWXSListenerStats: (elementId: number, eventName: string, final: boolean, mutated: boolean, capture: boolean, lvaluePath: (string | number)[]) => publish([ChannelEventType.SET_WXS_LISTENER_STATS, elementId, eventName, final, mutated, capture, lvaluePath]),
-    callWXSPropChangeListener: (elementId: number, newValue: any, oldValue: any, lvaluePath: (string | number)[]) => publish([ChannelEventType.CALL_WXS_PROP_CHANGE_LISTENER, elementId, newValue, oldValue, lvaluePath]),
-    onWXSCallMethod: (handler: (elementId: number, method: string, args: unknown[]) => void) => {
-      handleWXSCallMethod = handler
-    },
+    callCustomMethod: (elementId: number | null, options: any) => publish([ChannelEventType.CUSTOM_METHOD, elementId, options]),
+    onCustenMethod: (handler: (elementId: number | null, options: any) => void) => {
+      handleCustomMethod = handler
+    }
   }
 }
 
@@ -721,12 +707,12 @@ export const MessageChannelViewSide = (
     }
   }
 
-  const wxsCallMethodHandler = (elem: Element, method: string, args: any[]) => {
-    const elemId = getNodeId(elem)!
-    publish([ChannelEventType.ON_WXS_CALL_METHOD, elemId, method, JSON.stringify(args)])
+  const sendCustomMethodHandler = (elem: Element | null, options: any) => {
+    const elemId = elem ? getNodeId(elem)! : null
+    publish([ChannelEventType.CUSTOM_METHOD, elemId, options])
   }
 
-  controller.setWXSCallMethodHandler(wxsCallMethodHandler)
+  controller.onCustomMethod(sendCustomMethodHandler)
 
   // eslint-disable-next-line consistent-return
   subscribe((arg) => {
@@ -748,11 +734,6 @@ export const MessageChannelViewSide = (
       case ChannelEventType.DESTROY:
         controller.destroy()
         break
-      case ChannelEventType.INIT_DATA: {
-        const [, initData] = arg
-        controller.initData(JSON.parse(initData))
-        break
-      }
       case ChannelEventType.ON_WINDOW_RESIZE: {
         const [, callbackId] = arg
         controller.onWindowResize(({ width, height, devicePixelRatio }) => {
@@ -1246,24 +1227,10 @@ export const MessageChannelViewSide = (
         })
         break
       }
-      case ChannelEventType.SET_WXS_LISTENER_STATS: {
-        const [, elementId, eventName, final, mutated, capture, lvaluePath] = arg
-        const element = nodeMap[elementId]! as Element
-        controller.setWXSListenerStats(
-          element,
-          eventName,
-          final,
-          mutated,
-          capture,
-          lvaluePath,
-          eventHandler,
-        )
-        break
-      }
-      case ChannelEventType.CALL_WXS_PROP_CHANGE_LISTENER: {
-        const [, elementId, newValue, oldValue, lvaluepath] = arg
-        const element = nodeMap[elementId]! as Element
-        controller.callWXSPropChangeListener(element, newValue, oldValue, lvaluepath)
+      case ChannelEventType.CUSTOM_METHOD: {
+        const [, elementId, options] = arg
+        const element = elementId ? (nodeMap[elementId]! as Element) : null
+        controller.handleCustomMethod(element, options)
         break
       }
       default:

glass-easel-shadow-sync/src/replay.ts

@@ -5,6 +5,11 @@ export interface ReplayHandler {
     ownerShadowRoot: ShadowBackend.ShadowRootContext,
     elem: Node,
   ): ShadowBackend.Element
+  afterReplayElement?(
+    ownerShadowRoot: ShadowBackend.ShadowRootContext,
+    elem: Node,
+    be: ShadowBackend.Element,
+  ): void
 }
 
 export function replayShadowBackend(
@@ -74,7 +79,7 @@ export function replayShadowBackend(
       if (mutLevel !== undefined) be.setListenerStats(name, false, mutLevel)
       if (captureMutLevel !== undefined) be.setListenerStats(name, true, captureMutLevel)
     })
-    const slotName = glassEasel.Element.getSlotName(elem)
+    const slotName = elem.slot
     if (slotName) be.setSlot(slotName)
   }
 
@@ -165,6 +170,7 @@ export function replayShadowBackend(
     } else {
       throw new Error(`Unknown elem type ${elem.constructor.name}`)
     }
+    handlers.afterReplayElement?.(ownerShadowRoot, elem, be)
     backendElementMap.set(elem, be)
     return be
   }

glass-easel-shadow-sync/src/view_controller.ts

@@ -58,9 +58,7 @@ export class ViewController {
 
   private _traceStartTimestampMapping = Object.create(null) as Record<number, number>
 
-  private _WXSCallMethodHandler:
-    | ((element: Element, method: string, args: unknown[]) => void)
-    | undefined
+  private _customMethodHandler: ((element: Element | null, options: any) => void) | undefined
 
   // eslint-disable-next-line no-useless-constructor
   constructor(
@@ -95,10 +93,6 @@ export class ViewController {
     //
   }
 
-  initData(_initData: Record<string, unknown>): void {
-    //
-  }
-
   onWindowResize(
     cb: (res: { width: number; height: number; devicePixelRatio: number }) => void,
   ): void {
@@ -662,46 +656,16 @@ export class ViewController {
     cb({ startTimestamp, endTimestamp })
   }
 
-  setWXSListenerStats(
-    element: Element,
-    eventName: string,
-    final: boolean,
-    mutated: boolean,
-    capture: boolean,
-    lvaluePath: (string | number)[],
-    listener: EventListener<unknown>,
-  ): void {
-    // To be override
-    const { _glassEasel } = this
-    this.setListenerStats(
-      element,
-      eventName,
-      capture,
-      // eslint-disable-next-line no-nested-ternary
-      final
-        ? _glassEasel.EventMutLevel.Final
-        : mutated
-        ? _glassEasel.EventMutLevel.Mut
-        : _glassEasel.EventMutLevel.None,
-      listener,
-    )
-  }
-
-  callWXSPropChangeListener(
-    _element: Element,
-    _newValue: any,
-    _oldValue: any,
-    _lvaluePath: (string | number)[],
-  ): void {
+  handleCustomMethod(_element: Element | null, _options: unknown): void {
     // To be override
   }
 
-  setWXSCallMethodHandler(handler: (element: Element, method: string, args: unknown[]) => void) {
-    this._WXSCallMethodHandler = handler
+  onCustomMethod(handler: (element: Element | null, options: any) => void) {
+    this._customMethodHandler = handler
   }
 
-  onWXSCallMethod(element: Element, method: string, args: unknown[]): void {
-    this._WXSCallMethodHandler?.(element, method, args)
+  sendCustomMethod(element: Element | null, options: unknown): void {
+    this._customMethodHandler?.(element, options)
   }
 }