mp-weixin-back 0.0.7 → 0.0.9

package/dist/index.mjs

@@ -2,133 +2,331 @@ import path from 'path';
 import fs from 'fs';
 import JSON5 from 'json5';
 import { white, red, green } from 'kolorist';
-import generate from '@babel/generator';
 import { parse } from '@vue/compiler-sfc';
+import generate from '@babel/generator';
 import { babelParse, walkAST } from 'ast-kit';
+import MagicString from 'magic-string';
 
 const virtualFileId = "mp-weixin-back-helper";
 
+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) {
   if (typeof func !== "function")
     return false;
   return !func.hasOwnProperty("prototype") && func.toString().includes("=>");
 }
-async function parseSFC(code) {
-  try {
-    return parse(code).descriptor;
-  } catch (error) {
-    throw new Error(`\u89E3\u6790vue\u6587\u4EF6\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u6587\u4EF6\u662F\u5426\u6B63\u786E`);
-  }
-}
-async function transformVueFile(code, id) {
-  if (code.includes("<page-container")) {
-    return code;
-  }
-  if (!code.includes("<template")) {
-    return code;
-  }
-  const componentStr = '<page-container :show="__MP_BACK_SHOW_PAGE_CONTAINER__" :overlay="false" @beforeleave="onBeforeLeave" :z-index="1" :duration="false"></page-container>';
-  const sfc = await parseSFC(code);
-  const setupCode = sfc.scriptSetup?.loc.source;
-  const setupAst = babelParse(setupCode || "", sfc.scriptSetup?.lang);
-  let pageBackConfig = this.config;
-  let hasPageBack = false, hasImportRef = false, pageBackFnName = "onPageBack", callbackCode = ``;
+function compositionWalk(context, code, sfc, id) {
+  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(setupAst, {
       enter(node) {
-        if (node.type == "ImportDeclaration" && node.source.value.includes(virtualFileId)) {
-          const importSpecifier = node.specifiers[0];
-          hasPageBack = true;
-          pageBackFnName = importSpecifier.local.name;
-        }
-        if (node.type == "ImportDeclaration" && node.source.value === "vue") {
-          const importSpecifiers = node.specifiers;
-          for (let i = 0; i < importSpecifiers.length; i++) {
-            const element = importSpecifiers[i];
-            if (element.local.name == "ref") {
-              hasImportRef = true;
-              break;
-            }
+        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 == pageBackFnName) {
+        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 && backArguments.type == "ObjectExpression") {
+          if (backArguments?.type === "ObjectExpression") {
             const config = new Function(
               // @ts-ignore
               `return (${(generate.default ? generate.default : generate)(backArguments).code});`
             )();
-            pageBackConfig = { ...pageBackConfig, ...config };
+            Object.assign(pageInfo.backConfig, config);
           }
           if (callback && (callback.type === "ArrowFunctionExpression" || callback.type === "FunctionExpression")) {
             const body = callback.body;
             if (body.type === "BlockStatement") {
-              body.body.forEach((statement) => {
-                callbackCode += (generate.default ? generate.default : generate)(statement).code;
-              });
+              pageInfo.callbackCode += body.body.map(
+                // @ts-ignore
+                (statement) => (generate.default ? generate.default : generate)(statement).code
+              ).join("");
             }
           }
         }
       }
     });
   }
-  if (!hasPageBack)
-    return;
-  this.log.devLog(`\u9875\u9762${this.getPageById(id)}\u6CE8\u5165mp-weixin-back`);
-  if (!pageBackConfig.preventDefault) {
-    callbackCode += `uni.navigateBack({ delta: 1 });`;
+  if (!pageInfo.hasPageBack)
+    return code;
+  if (code.includes("<page-container")) {
+    context.log.debugLog(`${context.getPageById(id)}\u9875\u9762\u5DF2\u6709page-container\u7EC4\u4EF6\uFF0C\u6CE8\u5165\u5931\u8D25`);
+    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 = (() => {
-    if (!pageBackConfig.onPageBack)
+    const onPageBack = pageInfo.backConfig.onPageBack;
+    if (!onPageBack)
       return "";
-    if (typeof pageBackConfig.onPageBack !== "function") {
+    if (typeof onPageBack !== "function") {
       throw new Error("`onPageBack` must be a function");
     }
-    const params = JSON.stringify({
-      page: this.getPageById(id)
-    });
-    const hasFunction = pageBackConfig.onPageBack.toString().includes("function");
-    if (isArrowFunction(pageBackConfig.onPageBack) || hasFunction) {
-      return `(${pageBackConfig.onPageBack})(${params});`;
+    const params = JSON.stringify({ page: context.getPageById(id) });
+    if (isArrowFunction(onPageBack) || onPageBack.toString().includes("function")) {
+      return `(${onPageBack})(${params});`;
     }
-    return `(function ${pageBackConfig.onPageBack})()`;
+    return `(function ${onPageBack})()`;
   })();
-  const beforeLeaveStr = `
-    ${!hasImportRef ? "import { ref } from 'vue'" : ""}
-    let __MP_BACK_FREQUENCY__ = 1
-    const __MP_BACK_SHOW_PAGE_CONTAINER__ = ref(true);
+  const stateBeforeLeave = `
     const onBeforeLeave = () => {
-      console.log("__MP_BACK_FREQUENCY__", __MP_BACK_FREQUENCY__, ${pageBackConfig.frequency})
-      if (__MP_BACK_FREQUENCY__ < ${pageBackConfig.frequency}) {
+      if (__MP_BACK_FREQUENCY__ < ${pageInfo.backConfig.frequency}) {
         __MP_BACK_SHOW_PAGE_CONTAINER__.value = false
-        setTimeout(() => {
-          __MP_BACK_SHOW_PAGE_CONTAINER__.value = true
-        }, 0);
+        setTimeout(() => __MP_BACK_SHOW_PAGE_CONTAINER__.value = true, 0);
         __MP_BACK_FREQUENCY__++
       }
-      // \u8FD0\u884C\u914D\u7F6E\u7684\u533F\u540D\u51FD\u6570
       ${configBack}
-      ${callbackCode}
+      ${pageInfo.callbackCode}
     };
   `;
-  const result = code.replace(
-    /(<template.*?>)([\s\S]*?)(<\/template>)([\s\S]*?)(<script\s+(?:lang="ts"\s+)?setup.*?>|$)/,
-    (match, templateStart, templateContent, templateEnd, middleContent, scriptSetup) => {
-      const hasScriptSetup = Boolean(scriptSetup);
-      const scriptStartTag = hasScriptSetup ? scriptSetup : "<script setup>";
-      const scriptEndTag = hasScriptSetup ? "" : "<\/script>";
-      const injectedTemplate = `${templateStart}${templateContent}
- ${componentStr}
-${templateEnd}`;
-      const injectedScript = `
-${middleContent}${scriptStartTag}
-${beforeLeaveStr}
-${scriptEndTag}`;
-      return injectedTemplate + injectedScript;
+  const { template, 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(pageContainerComp);
+  codeMs.overwrite(tempOffsets.start, tempOffsets.end, templateMagicString.toString());
+  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, code, sfc, id) {
+  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 = null;
+  let dataMethodNode = null;
+  let methodsNode = null;
+  let onPageBackNodeMethod = null;
+  let onPageBackNodeProperty = null;
+  if (ast) {
+    walkAST(ast, {
+      enter(node) {
+        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];
+            if (element.type === "ObjectMethod" && element.key.type === "Identifier" && element.key.name === "data" && element.body.type === "BlockStatement") {
+              dataMethodNode = element.body;
+            }
+            if (element.type === "ObjectProperty" && element.key.type === "Identifier" && element.key.name === "methods") {
+              methodsNode = element.value;
+            }
+            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
+    }
+  ];
+  if (dataMethodNode) {
+    const returnStatement = dataMethodNode.body.find(
+      (node) => node.type === "ReturnStatement"
+    );
+    if (returnStatement && returnStatement.argument && returnStatement.argument.type === "ObjectExpression") {
+      returnStatement.argument.properties.push(...newDataProperty);
     }
+  } else if (exportDefaultNode) {
+    const addData = {
+      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.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"
   );
-  return result;
+  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.body.body : [],
+        ...onPageBackNodeProperty ? onPageBackNodeProperty.value.body.body : [],
+        ...stateBeforeLeaveNode.body.body
+      ]
+    }
+  };
+  if (methodsNode) {
+    methodsNode.properties.push(newMethodsProperty);
+    const code2 = (generate.default ? generate.default : generate)(methodsNode);
+    console.log(code2);
+  } else if (exportDefaultNode) {
+    const addMethods = {
+      type: "ObjectProperty",
+      computed: false,
+      shorthand: false,
+      key: {
+        type: "Identifier",
+        name: "methods"
+      },
+      value: {
+        type: "ObjectExpression",
+        properties: [newMethodsProperty]
+      }
+    };
+    exportDefaultNode.properties.push(addMethods);
+  }
+  const { template, script } = sfc;
+  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());
+  const scriptOffsets = {
+    start: script.loc.start.offset,
+    end: script.loc.end.offset
+  };
+  const newScriptContent = (generate.default ? generate.default : generate)(ast).code;
+  codeMs.overwrite(scriptOffsets.start, scriptOffsets.end, newScriptContent);
+  return codeMs.toString();
+}
+const vueWalker = {
+  compositionWalk,
+  optionsWalk
+};
+
+async function transformVueFile(code, id) {
+  try {
+    const sfc = parse(code).descriptor;
+    const { template, script, scriptSetup } = sfc;
+    if (!template?.content) {
+      return code;
+    }
+    if (!script?.content && !scriptSetup?.content) {
+      return code;
+    }
+    const walker = scriptSetup ? "compositionWalk" : "optionsWalk";
+    return vueWalker[walker](this, code, sfc, id);
+  } catch (error) {
+    this.log.error("\u89E3\u6790vue\u6587\u4EF6\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u6587\u4EF6\u662F\u5426\u6B63\u786E");
+    this.log.debugLog(String(error));
+    return code;
+  }
 }
 
 var __defProp = Object.defineProperty;
@@ -139,18 +337,19 @@ var __publicField = (obj, key, value) => {
 };
 class pageContext {
   constructor(config) {
+    __publicField(this, "logPreText", "[mp-weixin-back] : ");
     __publicField(this, "config");
     __publicField(this, "pages", []);
     __publicField(this, "log", {
       info: (text) => {
-        console.log(white(text));
+        console.log(white(this.logPreText + text));
       },
       error: (text) => {
-        console.log(red(text));
+        console.log(red(this.logPreText + text));
       },
-      devLog: (text) => {
+      debugLog: (text) => {
         if (this.config.mode === "development" && this.config.debug) {
-          console.log(green(text));
+          console.log(green(this.logPreText + text));
         }
       }
     });
@@ -189,7 +388,7 @@ class pageContext {
       }
     } catch (error) {
       this.log.error("\u8BFB\u53D6pages.json\u6587\u4EF6\u5931\u8D25");
-      this.log.devLog(String(error));
+      this.log.debugLog(String(error));
     }
   }
   // 获取指定id的page

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mp-weixin-back",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "监听微信小程序的手势返回和页面默认导航栏的返回",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -41,14 +41,13 @@
     "@babel/generator": "^7.26.2",
     "@babel/parser": "^7.26.2",
     "@babel/traverse": "^7.25.9",
-    "@types/babel__generator": "^7.6.8",
-    "@types/node": "^22.9.3",
     "@vitejs/plugin-vue": "^5.2.0",
     "@vue/test-utils": "^2.4.6",
     "ast-kit": "^1.3.1",
     "happy-dom": "^15.11.6",
     "json5": "^2.2.3",
     "kolorist": "^1.8.0",
+    "magic-string": "^0.30.13",
     "typescript": "^5.7.2",
     "vitest": "^2.1.5"
   },
@@ -60,7 +59,9 @@
     "*": "prettier --write"
   },
   "devDependencies": {
+    "@types/babel__generator": "^7.6.8",
+    "@types/node": "^22.9.3",
     "unbuild": "^2.0.0",
     "vue": "^3.5.13"
   }
-}
+}

package/src/context.ts

@@ -6,18 +6,19 @@ import { ContextConfig, PagesJson } from '../types'
 import { transformVueFile } from '../utils'
 
 export class pageContext {
+  private logPreText = '[mp-weixin-back] : '
   config: ContextConfig
   pages: string[] = []
   log = {
     info: (text: string) => {
-      console.log(white(text))
+      console.log(white(this.logPreText + text))
     },
     error: (text: string) => {
-      console.log(red(text))
+      console.log(red(this.logPreText + text))
     },
-    devLog: (text: string) => {
+    debugLog: (text: string) => {
       if (this.config.mode === 'development' && this.config.debug) {
-        console.log(green(text))
+        console.log(green(this.logPreText + text))
       }
     },
   }
@@ -57,7 +58,7 @@ export class pageContext {
       }
     } catch (error: unknown) {
       this.log.error('读取pages.json文件失败')
-      this.log.devLog(String(error))
+      this.log.debugLog(String(error))
     }
   }
   // 获取指定id的page

package/test/data/index-default.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>我是默认的界面</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  onPageBack() {
+    console.log('触发了手势返回')
+    return true
+  },
+}
+</script>
+
+<style></style>

package/test/data/{index.vue → index-setup.vue}

@@ -7,6 +7,7 @@ import onPageBack from 'mp-weixin-back-helper'
 
 onPageBack(() => {
   console.log('触发了手势返回')
+  return true
 })
 </script>
 

package/test/generate.spec.ts

@@ -1,14 +1,31 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 // @ts-ignore
-import Index from './data/index.vue'
+import IndexSetup from './data/index-setup.vue'
+// @ts-ignore
+import IndexDefault from './data/index-default.vue'
 
 describe('generate page-container components', () => {
-  it('page has template tag', async () => {
-    const wrapper = mount(Index)
+  it('setup compisitionAPI', async () => {
+    const wrapper = mount(IndexSetup)
     await wrapper.vm.$nextTick()
 
     const pageContainerRef = wrapper.find('page-container')
     expect(pageContainerRef.exists()).toBe(true)
+    expect(wrapper.vm.__MP_BACK_SHOW_PAGE_CONTAINER__).toBe(true)
+    expect(wrapper.vm.onBeforeLeave()).toBe(true)
+  })
+
+  it('default optionsAPI', async () => {
+    const wrapper = mount(IndexDefault)
+    await wrapper.vm.$nextTick()
+    const pageContainerRef = wrapper.find('page-container')
+    expect(pageContainerRef.exists()).toBe(true)
+    // @ts-ignore
+    expect(wrapper.vm.__MP_BACK_SHOW_PAGE_CONTAINER__).toBe(true)
+    // @ts-ignore
+    expect(wrapper.vm.__MP_BACK_FREQUENCY__).toBe(1)
+    // @ts-ignore
+    expect(wrapper.vm.onBeforeLeave()).toBe(true)
   })
 })