fix: bind event to function will lose comment (opentiny#1478)

Author: chilingling

packages/settings/events/package.json

@@ -28,7 +28,8 @@
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-configurator": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
-    "@opentiny/tiny-engine-utils": "workspace:*"
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "magic-string": "^0.30.17"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",

packages/settings/events/src/components/BindEventsDialog.vue

@@ -32,7 +32,7 @@
 
 <script>
 /* metaService: engine.setting.event.BindEventsDialog */
-import { ast2String, string2Ast } from '@opentiny/tiny-engine-common/js/ast'
+import { string2Ast } from '@opentiny/tiny-engine-common/js/ast'
 import {
   getMergeMeta,
   useCanvas,
@@ -44,6 +44,7 @@ import {
 } from '@opentiny/tiny-engine-meta-register'
 import { Button, DialogBox, TinyAlert } from '@opentiny/vue'
 import { nextTick, provide, reactive, ref } from 'vue'
+import MagicString from 'magic-string'
 import meta from '../../meta'
 
 const dialogVisible = ref(false)
@@ -147,38 +148,39 @@ export default {
 
     const getFormatParams = (extraParams) => Array.from({ length: extraParams.length }, (v, i) => `args${i}`).join(',')
 
-    const getFunctionBody = () => {
-      let method = getMethods()?.[state.bindMethodInfo.name]?.value
-      let preBody = '{}'
-      let isAsync = false
-      let isGenerator = false
+    const rewriteMethodParams = (method, name, formatParams, extraParams, enableExtraParams) => {
+      const finalParams = enableExtraParams && extraParams.length ? `event,${formatParams}` : formatParams
+      const defaultMethod = `function ${name} (${finalParams}) {\n}\n`
 
-      if (method) {
-        let astStr = {}
-        try {
-          astStr = string2Ast(method)
-        } catch (e) {
-          method = method.replace('function', `function ${state.bindMethodInfo.name}`)
-          astStr = string2Ast(method)
-        }
+      // 没有现存方法，直接拼接一个新的
+      if (!method) {
+        return defaultMethod
+      }
 
-        if (astStr?.program?.body[0]?.body) {
-          preBody = ast2String(astStr.program.body[0].body)
-        }
+      try {
+        const magicStr = new MagicString(method)
+        const astStr = string2Ast(method)
 
-        if (astStr?.program?.body[0]?.async) {
-          isAsync = true
+        // 解析出来不是函数声明，直接返回默认拼接的函数
+        if (astStr?.program?.body[0]?.type !== 'FunctionDeclaration') {
+          return defaultMethod
         }
 
-        if (astStr?.program?.body[0]?.generator) {
-          isGenerator = true
+        // 参数数量一致，不需要改写参数，直接返回
+        // extraParams.length 是传入的参数数量，+1 是 event 参数
+        if (astStr?.program?.body[0].params.length === extraParams.length + 1) {
+          return method
         }
-      }
 
-      return {
-        preBody: preBody || '{\n}',
-        isAsync,
-        isGenerator
+        // 参数数量不一致，需要改写参数
+        const start = astStr?.program?.body[0].id.end
+        const end = astStr?.program?.body[0].body.start
+        magicStr.remove(start, end)
+        magicStr.appendLeft(start, `(${finalParams})`)
+        return magicStr.toString()
+      } catch (e) {
+        // 尝试改写失败了，直接返回拼接的
+        return defaultMethod
       }
     }
 
@@ -214,14 +216,12 @@ export default {
       bindMethod({ ...state.bindMethodInfo, params, extra: extraParams })
 
       // 需要在bindMethod之后
-      const { preBody: functionBody, isAsync, isGenerator } = getFunctionBody()
       const { name } = state.bindMethodInfo
-      const functionName = `${isAsync ? 'async' : ''} function${isGenerator ? '*' : ''} ${name}`
+      const methodValue = getMethods()?.[state.bindMethodInfo.name]?.value
+      const functionStr = rewriteMethodParams(methodValue, name, formatParams, extraParams, state.enableExtraParams)
       const method = {
         name,
-        content: state.enableExtraParams
-          ? `${functionName}(eventArgs,${formatParams}) ${functionBody}`
-          : `${functionName}(${formatParams})  ${functionBody}`
+        content: functionStr
       }
       const { beforeSaveMethod } = getOptions(meta.id)