feat: add new plugin tag-modify

WeBankFinTech · hugzh · Mar 25, 2022 · Mar 25, 2022 · Mar 25, 2022 · Sep 18, 2022
commit 0e9fb21c63400f48de3895d942d0f171f3b6f471
diff --git a/packages/wxa-plugin-tag-modify/.gitignore b/packages/wxa-plugin-tag-modify/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
diff --git a/packages/wxa-plugin-tag-modify/.npmignore b/packages/wxa-plugin-tag-modify/.npmignore
@@ -0,0 +1 @@
+node_modules
diff --git a/packages/wxa-plugin-tag-modify/CHANGELOG.md b/packages/wxa-plugin-tag-modify/CHANGELOG.md
diff --git a/packages/wxa-plugin-tag-modify/LICENSE b/packages/wxa-plugin-tag-modify/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 hughliu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/wxa-plugin-tag-modify/README.md b/packages/wxa-plugin-tag-modify/README.md
@@ -0,0 +1,77 @@
+# wxa-plugin-bind-hijack
+
+[![NPM version](https://img.shields.io/npm/v/@wxa/lugin-bind-hijack.svg)](https://www.npmjs.com/package/@wxa/lugin-bind-hijack)
+
+劫持小程序bind事件
+
+## install
+```
+npm install -S @wxa/plugin-bind-hijack
+```
+
+
+## Usage
+### 在wxa打包配置中使用
+使用插件时，需要实例化插件并传入参数，支持拦截所有事件和指定拦截事件
+```javascript
+// wxa.config.js
+const BindHijackPlugin = require('@wxa/plugin-bind-hijack');
+
+module.exports = {
+    resolve: {
+        alias: {
+            '@': path.join(__dirname, 'src'),
+        },
+    },
+    use: ['babel', 'sass'],
+    plugins: [
+        // 指定拦截事件
+        new BindHijackPlugin([
+            'tap',
+            'getuserinfo',
+        ]);
+
+        // 拦截所有事件
+        new BindHijackPlugin();
+    ]
+}
+```
+
+### 实现拦截函数
+在app.js中引入运行时组件，并实现钩子函数
+```javascript
+/**
+ * wxa plugin
+ */
+import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";
+
+/**
+ * 钩子函数名字为 before${event}或 after${event}
+ * 事件首字母大写
+ * 如： beforeTap、afterGetuserinfo
+ */
+wxa.use(BindHijackPlugin, {
+    // tap事件之前调用
+    beforeTap: function(e){
+        console.log('beforeTap', e);
+    },
+    // getuserinfo事件之后调用
+    afterGetuserinfo: function(e){
+        console.log('afterGetuserinfo', e);
+    },
+    // 所有事件之前调用
+    before: function(e){
+        console.log('before', e);
+    },
+    // 所有事件之后调用
+    after: function(e){
+        console.log('after', e);
+    },
+});
+
+```
+
+### 其他说明
+1. 拦截事件支持bind和catch（阻止冒泡），支持冒号写法（bind:tap）
+2. 自动执行执行的事件也会触发拦截，如：swiper设置了autoplay时，bindchange事件会自动执行
+3. 事件对象的dataset中注入节点相关信息，包括：data、type、class、id，通过e.mark.id获取
diff --git a/packages/wxa-plugin-tag-modify/index.js b/packages/wxa-plugin-tag-modify/index.js
@@ -0,0 +1,107 @@
+var debug = require('debug')('WXA:PLUGIN-REPLACE')
+var htmlparser2 = require('htmlparser2');
+
+let { Parser, DomHandler, DomUtils } = htmlparser2;
+
+module.exports = class TagModifyPlugin {
+    constructor(options = []) {
+        this.configs = Object.assign({}, {
+            test: /\.wxml$/,
+            plugins: []
+        }, { options });
+        this.pmap=['<', '&', '"', '>'];
+        this.amap=['&lt;', '&amp;', '&quot;', '&gt;'];
+    }
+    apply(compiler) {
+        if (compiler.hooks == null || compiler.hooks.buildModule == null) return;
+
+        compiler.hooks.buildModule.tap('TagModifyPlugin', (mdl) => {
+            if (
+                mdl.meta &&
+                this.configs.test.test(mdl.meta.source)
+            ) {
+                debug('Plugin TagModify started %O', mdl.src);
+                this.run(mdl);
+            }
+        })
+    }
+    run(mdl) {
+        if (mdl.content && mdl.content.replace) {
+            let configsOptions = this.configs.options;
+
+            const {
+                target,
+                operateFn = () => {}
+            } = configsOptions;
+
+            let handler = new DomHandler((err, dom) => {
+                if (err) {
+                    logger.error('XML错误:'+mdl.meta.source);
+                    logger.error(err);
+                }
+            }, {
+                normalizeWhitespace: true,   //default:false
+            });
+
+            let htmlStr = mdl.content.replace(/{{([^{}]*)}}/g, (match, express) => `{{${this.encode(express)}}}`);
+            new Parser(handler, {
+                xmlMode: false, // forgiving html parser
+                recognizeSelfClosing: true,
+                lowerCaseTags: false, // needn't make tag lower case
+                lowerCaseAttributeNames: false,
+                recognizeCDATA: true,
+            }).end(htmlStr);
+
+            let dom = handler.dom;
+            let rewrite = function (dom) {
+                dom.forEach(v => {
+                    configsOptions.forEach((action) => {
+                        const { target, operateFn } = action;
+                        if(v.attribs && v.name === target) {
+                            const attribs = operateFn(v.attribs);
+                            v.attribs = {
+                                ...v.attribs,
+                                ...attribs
+                            }
+                        }
+                    });
+                    if (v.children) {
+                        rewrite(v.children);
+                    }
+                });
+            }
+            rewrite(dom);
+
+            mdl.content = DomUtils.getOuterHTML(dom)
+                    .replace(/{{([^{}]*)}}/g, (match, express) => `{{${this.decode(express)}}}`);
+        }
+    }
+    decode(content, pmap, amap) {
+        pmap = pmap || this.pmap;
+        amap = amap || this.amap;
+
+        let ret = amap.reduce((ret, item)=>(ret+'|'+item), '').replace(/^\|/, '');
+        let reg = new RegExp(`(${ret})`, 'ig');
+        return content.replace(reg, (match, m) => {
+            return pmap[amap.indexOf(m)];
+        });
+    }
+    encode(content, start, end, pmap, amap) {
+        start = start || 0;
+        end = end || content.length;
+        pmap = pmap || this.pmap;
+        amap = amap || this.amap;
+        let buffer = [];
+
+        for (let i=0, len=content.length; i < len; i++) {
+            if (i < start || i > end) {
+                buffer.push(content[i]);
+            } else {
+                let idx = pmap.indexOf(content[i]);
+                buffer.push(idx === -1 ? content[i] : amap[idx]);
+            }
+        }
+
+        return buffer.join('');
+    }
+}
diff --git a/packages/wxa-plugin-tag-modify/package-lock.json b/packages/wxa-plugin-tag-modify/package-lock.json
diff --git a/packages/wxa-plugin-tag-modify/package.json b/packages/wxa-plugin-tag-modify/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@wxa/plugin-tag-modify",
+  "version": "1.0.0",
+  "description": "batched modify tags",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [
+    "wxa",
+    "tag",
+    "modify"
+  ],
+  "repository": "https://github.com/wxajs/wxa.git",
+  "homepage": "https://wxajs.github.io/wxa/",
+  "author": "hughliu",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "debug": "^4.1.1"
+  },
+  "gitHead": "b925c4fe80f493edd89c0c39a70e6eda3b97d915",
+  "dependencies": {
+    "htmlparser2": "^4.1.0"
+  }
+}