refactor(plugin-compiler-alipay & utils & runtime-mini & runtime-base): 重构支付宝转微信事件机制，降低参数长度，优化包体积

packages/plugin-compiler-alipay/src/templateProcessorToOther.ts

@@ -1,6 +1,7 @@
 import {
   FileParserOptions,
   logger,
+  Pairs,
   posthtml,
   tsTransformerFactory,
   typescript as ts
@@ -100,8 +101,8 @@ export const templateProcessorToOther = {
 }
 
 // 事件代理名称
-const PROXY_EVENT_NAME = '$morEventHandlerProxy'
-const EVENT_HANDLER_NAME = 'data-mor-event-handlers'
+const PROXY_EVENT_NAME = '$morEHP' // $morEventHandlerProxy
+const EVENT_HANDLER_NAME = 'data-meh' // data-mor-event-handlers
 const PROXY_DISABLE_EVENT_NAME = '$morDisableScrollProxy'
 
 /**
@@ -117,10 +118,7 @@ function processEventProxy(
     Object.keys(context.morHandlersMap).length &&
     !options.userConfig?.processComponentsPropsFunction
   ) {
-    node.attrs[EVENT_HANDLER_NAME] = Buffer.from(
-      JSON.stringify(context.morHandlersMap)
-    ).toString('base64')
-
+    node.attrs[EVENT_HANDLER_NAME] = Pairs.toString(context.morHandlersMap)
     delete context.morHandlersMap
   }
 }

packages/plugin-compiler/src/plugins/processComponentsPropsFunctionPlugin.ts

@@ -3,6 +3,7 @@ import {
   EntryType,
   fsExtra as fs,
   lodash as _,
+  Pairs,
   Plugin,
   Runner,
   SourceTypes,
@@ -142,15 +143,11 @@ export class ProcessComponentsPropsFunctionPlugin implements Plugin {
                 // props 中的函数传参
                 const propsFunction = propsFunctionList
                   .map((item) => {
-                    return `bind:${this.getEventName(
-                      item
-                    )}="$morEventHandlerProxy" `
+                    return `bind:${this.getEventName(item)}="$morEHP" `
                   })
                   .join('')
-                const eventHandlerName = Buffer.from(
-                  JSON.stringify(propsMorHandlers)
-                ).toString('base64')
-                return `<mor-component ${propsNormal} ${propsFunction} data-mor-event-handlers="${eventHandlerName}"></mor-component>`
+                const eventHandlerName = Pairs.toString(propsMorHandlers)
+                return `<mor-component ${propsNormal} ${propsFunction} data-meh="${eventHandlerName}"></mor-component>`
               } else if (
                 options?.fileInfo?.entryFileType === EntryFileType.style
               ) {
@@ -188,7 +185,7 @@ export class ProcessComponentsPropsFunctionPlugin implements Plugin {
     ${properties}
   },
   methods: {
-    $morEventHandlerProxy(event) {
+    $morEHP(event) {
       const { detail } = event;
       if (detail.name) {
         this.triggerEvent(event.type, { ...detail.args[0] })

packages/runtime-base/src/utils/index.ts

@@ -3,4 +3,5 @@ export * from './compose'
 export * from './generateId'
 export * from './getSharedProperty'
 export * from './hasOwnProperty'
+export * from './pairs'
 export * from './transformApis'

packages/runtime-base/src/utils/pairs.ts

@@ -0,0 +1,19 @@
+export const Pairs = {
+  /**
+   * 根据键值对字符串创建对象
+   * @param {string} param - 以短横线分隔的键值对字符串，形如 "key1_value1-key2_value2"
+   * @returns {Object} - 创建的对象，键为原始字符串中的 key，值为对应的 value
+   */
+  toObject(param: string): Record<string, any> {
+    const result = {}
+    if (typeof param !== 'string') return result
+
+    const paramsArr = param.split('-')
+    paramsArr.forEach((pair) => {
+      const [key, value] = pair.split('_')
+      result[key] = value
+    })
+
+    return result
+  }
+}

packages/runtime-mini/src/alipay/componentToOther.ts

@@ -1,9 +1,9 @@
 import {
-  Base64,
   compose,
   generateId,
   getSharedProperty,
-  logger
+  logger,
+  Pairs
 } from '@morjs/runtime-base'
 import clone from 'clone-deep'
 import { injectHasMixinSupport } from '../common/behaviorOrMixin'
@@ -13,7 +13,7 @@ const MOR_PREFIX = 'mor' as const
 /**
  * 保存在 dataset 的事件代理相关方法名称映射
  */
-const MOR_EVENT_HANDLERS_DATASET = `${MOR_PREFIX}EventHandlers` as const
+const MOR_EVENT_HANDLERS_DATASET = `meh` as const
 /**
  * 用于保存事件代理相关方法名称映射
  */
@@ -499,7 +499,7 @@ function hookComponentLifeCycle(
             }
 
             // 触发小程序原生事件
-            // 事件会被 $morEventHandlerProxy 事件代理方法捕获
+            // 事件会被 $morEHP 事件代理方法捕获
             // 并触发 event 事件, 基于 eventId
             this.triggerEvent(triggerEventName, {
               name: this[MOR_EVENT_HANDLERS][triggerEventName],
@@ -517,10 +517,9 @@ function hookComponentLifeCycle(
 
   const injectEventHandlers = function (): void {
     const morEventHandlers = this.dataset?.[MOR_EVENT_HANDLERS_DATASET]
-
     if (morEventHandlers) {
       try {
-        this[MOR_EVENT_HANDLERS] = JSON.parse(Base64.decode(morEventHandlers))
+        this[MOR_EVENT_HANDLERS] = Pairs.toObject(morEventHandlers)
 
         // ref 支持
         if (this[MOR_EVENT_HANDLERS].ref) {

packages/runtime-mini/src/alipay/utilsToOther.ts

@@ -30,7 +30,7 @@ export function addEventProxy(options: Record<string, any>): void {
    * 支付宝小程序转其他小程序的事件代理函数
    * @param event 事件
    */
-  options.$morEventHandlerProxy = function (event: IEvent): void {
+  options.$morEHP = function (event: IEvent): void {
     const { name, args, id } = event.detail
     let value: any
 

packages/utils/src/index.ts

@@ -38,6 +38,7 @@ export * from './babelDeps'
 export * from './constants'
 export * from './hooks'
 export * from './moduleGraph'
+export * from './pairs'
 export * from './queue'
 export * from './types'
 export * from './utils'

packages/utils/src/pairs.ts

@@ -0,0 +1,35 @@
+export const Pairs = {
+  /**
+   * 构建键值对字符串
+   * @param {Object} param - 包含键值对的对象
+   * @returns {string} - 键值对组合成的字符串，键和值之间以下划线连接，各对之间以破折号分隔
+   */
+  toString(param: Record<string, any>): string {
+    const keys = Object.keys(param)
+
+    return keys.reduce((pre, key, index) => {
+      const value = param[key]
+      const suffix = index === keys.length - 1 ? '' : '-'
+
+      return (pre += `${key}_${value}${suffix}`)
+    }, '')
+  },
+
+  /**
+   * 根据键值对字符串创建对象
+   * @param {string} param - 以短横线分隔的键值对字符串，形如 "key1_value1-key2_value2"
+   * @returns {Object} - 创建的对象，键为原始字符串中的 key，值为对应的 value
+   */
+  toObject(param: string): Record<string, any> {
+    const result = {}
+    if (typeof param !== 'string') return result
+
+    const paramsArr = param.split('-')
+    paramsArr.forEach((pair) => {
+      const [key, value] = pair.split('_')
+      result[key] = value
+    })
+
+    return result
+  }
+}