mp-weixin-back 0.0.8 → 0.0.10

package/utils/index.ts

@@ -1,167 +1,26 @@
-import generate from '@babel/generator'
 import { parse } from '@vue/compiler-sfc'
-import { babelParse, walkAST } from 'ast-kit'
 import { pageContext } from '../src/context'
-import MagicString from 'magic-string'
-import { virtualFileId } from './constant'
+import { vueWalker } from './walker'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
-import type { Node } from '@babel/types'
-
-function isArrowFunction(func: Function) {
-  if (typeof func !== 'function') return false
-  return !func.hasOwnProperty('prototype') && func.toString().includes('=>')
-}
-
-async function parseSFC(code: string): Promise<SFCDescriptor> {
-  try {
-    return parse(code).descriptor
-  } catch (error) {
-    throw new Error(`解析vue文件失败，请检查文件是否正确`)
-  }
-}
 
 export async function transformVueFile(this: pageContext, code: string, id: string) {
-  const sfc = await parseSFC(code)
-  if (!sfc.template?.content) {
-    return code
-  }
-
-  const componentStr =
-    '  <page-container :show="__MP_BACK_SHOW_PAGE_CONTAINER__" :overlay="false" @beforeleave="onBeforeLeave" :z-index="1" :duration="false"></page-container>\n'
-
-  let pageBackConfig = { ...this.config }
-  let hasPageBack = false
-  let hasImportRef = false
-  let pageBackFnName = 'onPageBack'
-  let callbackCode = ``
-
-  const codeMs = new MagicString(code)
-  const setupCode = sfc.scriptSetup?.loc.source || ''
-  const setupAst = babelParse(setupCode, sfc.scriptSetup?.lang)
-
-  if (setupAst) {
-    walkAST<Node>(setupAst, {
-      enter(node) {
-        if (node.type === 'ImportDeclaration') {
-          if (node.source.value.includes(virtualFileId)) {
-            const importSpecifier = node.specifiers[0]
-            hasPageBack = true
-            pageBackFnName = importSpecifier.local.name
-          }
-          if (node.source.value === 'vue') {
-            node.specifiers.some((specifier) => {
-              if (specifier.local.name === 'ref') {
-                hasImportRef = true
-                return true
-              }
-              return false
-            })
-          }
-        }
-
-        if (
-          node.type === 'ExpressionStatement' &&
-          node.expression.type === 'CallExpression' &&
-          node.expression.callee.loc?.identifierName === pageBackFnName
-        ) {
-          const callback = node.expression.arguments[0]
-          const backArguments = node.expression.arguments[1]
-
-          if (backArguments?.type === 'ObjectExpression') {
-            const config = new Function(
-              // @ts-ignore
-              `return (${(generate.default ? generate.default : generate)(backArguments).code});`
-            )()
-            Object.assign(pageBackConfig, config)
-          }
-
-          if (
-            callback &&
-            (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression')
-          ) {
-            const body = callback.body
-            if (body.type === 'BlockStatement') {
-              callbackCode += body.body
-                .map(
-                  // @ts-ignore
-                  (statement) => (generate.default ? generate.default : generate)(statement).code
-                )
-                .join('')
-            }
-          }
-        }
-      },
-    })
-  }
-
-  if (!hasPageBack) return
-
-  this.log.devLog(`页面${this.getPageById(id)}注入mp-weixin-back`)
-
-  if (code.includes('<page-container')) {
-    this.log.devLog(`${this.getPageById(id)}页面已有page-container组件，注入失败`)
-    return code
-  }
-
-  if (!pageBackConfig.preventDefault) {
-    callbackCode += `uni.navigateBack({ delta: 1 });`
-  }
-
-  const configBack = (() => {
-    const onPageBack = pageBackConfig.onPageBack
-    if (!onPageBack) return ''
-    if (typeof onPageBack !== 'function') {
-      throw new Error('`onPageBack` must be a function')
+  try {
+    const sfc = parse(code).descriptor
+    const { template, script, scriptSetup } = sfc
+    if (!template?.content) {
+      return code
     }
 
-    const params = JSON.stringify({ page: this.getPageById(id) })
-
-    if (isArrowFunction(onPageBack) || onPageBack.toString().includes('function')) {
-      return `(${onPageBack})(${params});`
+    if (!script?.content && !scriptSetup?.content) {
+      return code
     }
 
-    return `(function ${onPageBack})()`
-  })()
-
-  const beforeLeaveStr = `
-    ${!hasImportRef ? "import { ref } from 'vue'" : ''}
-    let __MP_BACK_FREQUENCY__ = 1
-    const __MP_BACK_SHOW_PAGE_CONTAINER__ = ref(true);
-    const onBeforeLeave = () => {
-      console.log("__MP_BACK_FREQUENCY__", __MP_BACK_FREQUENCY__, ${pageBackConfig.frequency})
-      if (__MP_BACK_FREQUENCY__ < ${pageBackConfig.frequency}) {
-        __MP_BACK_SHOW_PAGE_CONTAINER__.value = false
-        setTimeout(() => __MP_BACK_SHOW_PAGE_CONTAINER__.value = true, 0);
-        __MP_BACK_FREQUENCY__++
-      }
-      ${configBack}
-      ${callbackCode}
-    };
-  `
-
-  const { template, script, scriptSetup } = sfc
-  const tempOffsets = {
-    start: template.loc.start.offset,
-    end: template.loc.end.offset,
-    content: template.content,
-  }
-
-  const templateMagicString = new MagicString(tempOffsets.content)
-  templateMagicString.append(componentStr)
-  codeMs.overwrite(tempOffsets.start, tempOffsets.end, templateMagicString.toString())
-
-  const scriptSfc = script || scriptSetup
-  if (!scriptSfc) return
-
-  const scriptOffsets = {
-    start: scriptSfc.loc.start.offset,
-    end: scriptSfc.loc.end.offset,
-    content: scriptSfc.content || '',
+    // 判断页面是否为组合式写法
+    const walker = scriptSetup ? 'compositionWalk' : 'optionsWalk'
+    return vueWalker[walker](this, code, sfc, id)
+  } catch (error) {
+    this.log.error('解析vue文件失败，请检查文件是否正确')
+    this.log.debugLog(String(error))
+    return code
   }
-
-  const scriptMagicString = new MagicString(scriptOffsets.content)
-  scriptMagicString.prepend(beforeLeaveStr)
-  codeMs.overwrite(scriptOffsets.start, scriptOffsets.end, scriptMagicString.toString())
-
-  return codeMs.toString()
 }

package/utils/walker.ts

@@ -0,0 +1,389 @@
+import generate from '@babel/generator'
+import MagicString from 'magic-string'
+import { babelParse, walkAST } from 'ast-kit'
+import { pageContext } from '../src/context'
+import { virtualFileId } from './constant'
+import type {
+  BlockStatement,
+  FunctionExpression,
+  Node,
+  ObjectExpression,
+  ObjectMethod,
+  ObjectProperty,
+} from '@babel/types'
+
+const pageContainerComp =
+  '  <page-container :show="__MP_BACK_SHOW_PAGE_CONTAINER__" :overlay="false" @beforeleave="onBeforeLeave" :z-index="1" :duration="false"></page-container>\n'
+
+function isArrowFunction(func: Function) {
+  if (typeof func !== 'function') return false
+  return !func.hasOwnProperty('prototype') && func.toString().includes('=>')
+}
+
+function compositionWalk(context: pageContext, code: string, sfc: any, id: string) {
+  const codeMs = new MagicString(code)
+  const setupAst = babelParse(sfc.scriptSetup!.loc.source, sfc.scriptSetup!.lang)
+
+  let pageInfo = {
+    hasPageBack: false,
+    pageBackFnName: 'onPageBack',
+    hasImportRef: false,
+    backConfig: { ...context.config },
+    callbackCode: '',
+  }
+
+  if (setupAst) {
+    walkAST<Node>(setupAst, {
+      enter(node) {
+        if (node.type === 'ImportDeclaration') {
+          if (node.source.value.includes(virtualFileId)) {
+            const importSpecifier = node.specifiers[0]
+            pageInfo.hasPageBack = true
+            pageInfo.pageBackFnName = importSpecifier.local.name
+          }
+          if (node.source.value === 'vue') {
+            node.specifiers.some((specifier) => {
+              if (specifier.local.name === 'ref') {
+                pageInfo.hasImportRef = true
+                return true
+              }
+              return false
+            })
+          }
+        }
+
+        if (
+          node.type === 'ExpressionStatement' &&
+          node.expression.type === 'CallExpression' &&
+          node.expression.callee.loc?.identifierName === pageInfo.pageBackFnName
+        ) {
+          const callback = node.expression.arguments[0]
+          const backArguments = node.expression.arguments[1]
+
+          if (backArguments?.type === 'ObjectExpression') {
+            const config = new Function(
+              // @ts-ignore
+              `return (${(generate.default ? generate.default : generate)(backArguments).code});`
+            )()
+            Object.assign(pageInfo.backConfig, config)
+          }
+
+          if (
+            callback &&
+            (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression')
+          ) {
+            const body = callback.body
+            if (body.type === 'BlockStatement') {
+              pageInfo.callbackCode += body.body
+                .map(
+                  // @ts-ignore
+                  (statement) => (generate.default ? generate.default : generate)(statement).code
+                )
+                .join('')
+            }
+          }
+        }
+      },
+    })
+  }
+
+  // 没有引入mp-weixin-back-helper
+  if (!pageInfo.hasPageBack) return code
+
+  if (code.includes('<page-container')) {
+    context.log.debugLog(`${context.getPageById(id)}页面已有page-container组件，注入失败`)
+    return code
+  }
+
+  if (!pageInfo.backConfig.preventDefault) {
+    pageInfo.callbackCode += 'uni.navigateBack({ delta: 1 });'
+  }
+
+  const importRefFromVue = !pageInfo.hasImportRef ? `import { ref } from 'vue'` : ''
+  const stateFrequency = 'let __MP_BACK_FREQUENCY__ = 1;'
+  const statePageContainerVar = 'const __MP_BACK_SHOW_PAGE_CONTAINER__ = ref(true);'
+  // 获取传入插件的统一方法
+  const configBack = (() => {
+    const onPageBack = pageInfo.backConfig.onPageBack
+    if (!onPageBack) return ''
+    if (typeof onPageBack !== 'function') {
+      throw new Error('`onPageBack` must be a function')
+    }
+    const params = JSON.stringify({ page: context.getPageById(id) })
+    if (isArrowFunction(onPageBack) || onPageBack.toString().includes('function')) {
+      return `(${onPageBack})(${params});`
+    }
+    return `(function ${onPageBack})()`
+  })()
+  const stateBeforeLeave = `
+    const onBeforeLeave = () => {
+      if (__MP_BACK_FREQUENCY__ < ${pageInfo.backConfig.frequency}) {
+        __MP_BACK_SHOW_PAGE_CONTAINER__.value = false
+        setTimeout(() => __MP_BACK_SHOW_PAGE_CONTAINER__.value = true, 0);
+        __MP_BACK_FREQUENCY__++
+      }
+      ${configBack}
+      ${pageInfo.callbackCode}
+    };
+  `
+  const { template, scriptSetup } = sfc
+
+  // template标签中插入page-container组件
+  const tempOffsets = {
+    start: template.loc.start.offset,
+    end: template.loc.end.offset,
+    content: template.content,
+  }
+  const templateMagicString = new MagicString(tempOffsets.content)
+  templateMagicString.append(pageContainerComp)
+  codeMs.overwrite(tempOffsets.start, tempOffsets.end, templateMagicString.toString())
+
+  // script标签中插入声明的变量和方法
+  const scriptOffsets = {
+    start: scriptSetup.loc.start.offset,
+    end: scriptSetup.loc.end.offset,
+    content: scriptSetup.content || '',
+  }
+  const scriptMagicString = new MagicString(scriptOffsets.content)
+  scriptMagicString.prepend(
+    ` ${importRefFromVue}
+      ${stateFrequency}
+      ${statePageContainerVar}
+      ${stateBeforeLeave} `
+  )
+  codeMs.overwrite(scriptOffsets.start, scriptOffsets.end, scriptMagicString.toString())
+
+  return codeMs.toString()
+}
+
+function optionsWalk(context: pageContext, code: string, sfc: any, id: string) {
+  const codeMs = new MagicString(code)
+  const ast = babelParse(sfc.script.loc.source, sfc.script.lang)
+
+  let pageInfo = {
+    hasPageBack: false,
+    pageBackFnName: 'onPageBack',
+    backConfig: { ...context.config },
+  }
+
+  let exportDefaultNode: ObjectExpression | null = null
+  let dataMethodNode: BlockStatement | null = null
+  let methodsNode: ObjectExpression | null = null
+  let onPageBackNodeMethod: ObjectMethod | null = null
+  let onPageBackNodeProperty: ObjectProperty | null = null
+
+  if (ast) {
+    walkAST<Node>(ast, {
+      enter(node) {
+        // todo需要判断使用默认选项式还是使用了setup
+        if (
+          node.type === 'ExportDefaultDeclaration' &&
+          node.declaration.type === 'ObjectExpression'
+        ) {
+          exportDefaultNode = node.declaration
+          const properties = node.declaration.properties
+
+          for (let i = 0; i < properties.length; i++) {
+            const element = properties[i]
+            // export default 的 data()
+            if (
+              element.type === 'ObjectMethod' &&
+              element.key.type === 'Identifier' &&
+              element.key.name === 'data' &&
+              element.body.type === 'BlockStatement'
+            ) {
+              dataMethodNode = element.body
+            }
+            // export default 的 methods
+            if (
+              element.type === 'ObjectProperty' &&
+              element.key.type === 'Identifier' &&
+              element.key.name === 'methods'
+            ) {
+              methodsNode = element.value as ObjectExpression
+            }
+
+            // 获取export default 的 onPackBack
+            const blockStatementCondition =
+              element.type === 'ObjectMethod' &&
+              element.key.type === 'Identifier' &&
+              element.key.name === pageInfo.pageBackFnName &&
+              element.body.type === 'BlockStatement'
+
+            const functionExpressionCondition =
+              element.type === 'ObjectProperty' &&
+              element.key.type === 'Identifier' &&
+              element.key.name === pageInfo.pageBackFnName &&
+              element.value.type === 'FunctionExpression'
+
+            if (blockStatementCondition) {
+              pageInfo.hasPageBack = true
+              onPageBackNodeMethod = element
+            }
+
+            if (functionExpressionCondition) {
+              pageInfo.hasPageBack = true
+              onPageBackNodeProperty = element
+            }
+          }
+        }
+      },
+    })
+  }
+
+  if (!pageInfo.hasPageBack) return
+
+  const newDataProperty = [
+    {
+      type: 'ObjectProperty',
+      key: { type: 'Identifier', name: '__MP_BACK_SHOW_PAGE_CONTAINER__' },
+      value: { type: 'BooleanLiteral', value: true },
+      computed: false,
+      shorthand: false,
+    },
+    {
+      type: 'ObjectProperty',
+      key: { type: 'Identifier', name: '__MP_BACK_FREQUENCY__' },
+      value: { type: 'NumericLiteral', value: 1 },
+      computed: false,
+      shorthand: false,
+    },
+  ] as ObjectProperty[]
+  if (dataMethodNode) {
+    const returnStatement = (dataMethodNode as BlockStatement).body.find(
+      (node) => node.type === 'ReturnStatement'
+    )
+    if (
+      returnStatement &&
+      returnStatement.argument &&
+      returnStatement.argument.type === 'ObjectExpression'
+    ) {
+      // 添加新的属性
+      returnStatement.argument.properties.push(...newDataProperty)
+    }
+  } else if (exportDefaultNode) {
+    const addData: ObjectMethod = {
+      type: 'ObjectMethod',
+      key: { type: 'Identifier', name: 'data' },
+      kind: 'method',
+      params: [],
+      async: false,
+      generator: false,
+      computed: false,
+      body: {
+        type: 'BlockStatement',
+        directives: [],
+        body: [
+          {
+            type: 'ReturnStatement',
+            argument: {
+              type: 'ObjectExpression',
+              properties: newDataProperty,
+            },
+          },
+        ],
+      },
+    }
+      ; (exportDefaultNode as ObjectExpression).properties.push(addData)
+  }
+
+  // 获取传入插件的统一方法
+  const configBack = (() => {
+    const onPageBack = pageInfo.backConfig.onPageBack
+    if (!onPageBack) return ''
+    if (typeof onPageBack !== 'function') {
+      throw new Error('`onPageBack` must be a function')
+    }
+    const params = JSON.stringify({ page: context.getPageById(id) })
+    if (isArrowFunction(onPageBack) || onPageBack.toString().includes('function')) {
+      return `(${onPageBack})(${params});`
+    }
+    return `(function ${onPageBack})()`
+  })()
+
+  const stateBeforeLeave = `
+    function onBeforeLeave() {
+      if (this.__MP_BACK_FREQUENCY__ < ${pageInfo.backConfig.frequency}) {
+        this.__MP_BACK_SHOW_PAGE_CONTAINER__ = false
+        setTimeout(() => { this.__MP_BACK_SHOW_PAGE_CONTAINER__ = true }, 0);
+        this.__MP_BACK_FREQUENCY__++
+      }
+      ${configBack}
+      ${!pageInfo.backConfig.preventDefault ? 'uni.navigateBack({ delta: 1 });' : ''}
+    };
+  `
+  const stateBeforeLeaveAst = babelParse(stateBeforeLeave)
+  const stateBeforeLeaveNode = stateBeforeLeaveAst.body.find(
+    (node) => node.type === 'FunctionDeclaration'
+  )
+  const newMethodsProperty = {
+    type: 'ObjectMethod',
+    key: {
+      type: 'Identifier',
+      name: 'onBeforeLeave',
+    },
+    kind: 'method',
+    generator: false,
+    async: false,
+    params: [],
+    computed: false,
+    body: {
+      type: 'BlockStatement',
+      directives: [],
+      body: [
+        ...(onPageBackNodeMethod ? (onPageBackNodeMethod as ObjectMethod)!.body.body : []),
+        ...(onPageBackNodeProperty
+          ? ((onPageBackNodeProperty as ObjectProperty)!.value as FunctionExpression).body.body
+          : []),
+        ...stateBeforeLeaveNode!.body.body,
+      ],
+    },
+  } as ObjectMethod
+  if (methodsNode) {
+    ; (methodsNode as ObjectExpression).properties.push(newMethodsProperty)
+  } else if (exportDefaultNode) {
+    const addMethods: ObjectProperty = {
+      type: 'ObjectProperty',
+      computed: false,
+      shorthand: false,
+      key: {
+        type: 'Identifier',
+        name: 'methods',
+      },
+      value: {
+        type: 'ObjectExpression',
+        properties: [newMethodsProperty],
+      },
+    }
+      ; (exportDefaultNode as ObjectExpression).properties.push(addMethods)
+  }
+
+  const { template, script } = sfc
+
+  // template标签中插入page-container组件
+  const tempOffsets = {
+    start: template.loc.start.offset,
+    end: template.loc.end.offset,
+    content: template.content,
+  }
+  const templateMagicString = new MagicString(tempOffsets.content)
+  templateMagicString.append(pageContainerComp)
+  codeMs.overwrite(tempOffsets.start, tempOffsets.end, templateMagicString.toString())
+
+  // script标签中插入声明的变量和方法
+  const scriptOffsets = {
+    start: script.loc.start.offset,
+    end: script.loc.end.offset,
+  }
+
+  // @ts-ignore
+  const newScriptContent = (generate.default ? generate.default : generate)(ast).code
+  codeMs.overwrite(scriptOffsets.start, scriptOffsets.end, newScriptContent)
+
+  return codeMs.toString()
+}
+
+export const vueWalker = {
+  compositionWalk,
+  optionsWalk,
+}