@tarojs/shared 3.5.0-beta.0 → 3.5.0-beta.3

package/dist/template.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const DEFAULT_EMPTY_ARRAY = '[]';
 const NO_DEFAULT_VALUE = '';
-const DEFAULT_TRUE = 'true';
-const DEFAULT_FALSE = 'false';
+const DEFAULT_TRUE = '!0';
+const DEFAULT_FALSE = '!1';
 const touchEvents = {
     bindTouchStart: NO_DEFAULT_VALUE,
     bindTouchMove: NO_DEFAULT_VALUE,
@@ -328,6 +328,9 @@ const nestElements = new Map([
     ['swiper-item', 4]
 ]);
 
+function isString(o) {
+    return typeof o === 'string';
+}
 function isFunction(o) {
     return typeof o === 'function';
 }
@@ -338,6 +341,239 @@ function isBooleanStringLiteral(o) {
     return o === 'true' || o === 'false';
 }
 
+class Events {
+    constructor(opts) {
+        var _a;
+        this.callbacks = (_a = opts === null || opts === void 0 ? void 0 : opts.callbacks) !== null && _a !== void 0 ? _a : {};
+    }
+    on(eventName, callback, context) {
+        let event, node, tail, list;
+        if (!callback) {
+            return this;
+        }
+        eventName = eventName.split(Events.eventSplitter);
+        this.callbacks || (this.callbacks = {});
+        const calls = this.callbacks;
+        while ((event = eventName.shift())) {
+            list = calls[event];
+            node = list ? list.tail : {};
+            node.next = tail = {};
+            node.context = context;
+            node.callback = callback;
+            calls[event] = {
+                tail,
+                next: list ? list.next : node
+            };
+        }
+        return this;
+    }
+    once(events, callback, context) {
+        const wrapper = (...args) => {
+            callback.apply(this, args);
+            this.off(events, wrapper, context);
+        };
+        this.on(events, wrapper, context);
+        return this;
+    }
+    off(events, callback, context) {
+        let event, calls, node, tail, cb, ctx;
+        if (!(calls = this.callbacks)) {
+            return this;
+        }
+        if (!(events || callback || context)) {
+            delete this.callbacks;
+            return this;
+        }
+        events = events ? events.split(Events.eventSplitter) : Object.keys(calls);
+        while ((event = events.shift())) {
+            node = calls[event];
+            delete calls[event];
+            if (!node || !(callback || context)) {
+                continue;
+            }
+            tail = node.tail;
+            while ((node = node.next) !== tail) {
+                cb = node.callback;
+                ctx = node.context;
+                if ((callback && cb !== callback) || (context && ctx !== context)) {
+                    this.on(event, cb, ctx);
+                }
+            }
+        }
+        return this;
+    }
+    trigger(events) {
+        let event, node, calls, tail;
+        if (!(calls = this.callbacks)) {
+            return this;
+        }
+        events = events.split(Events.eventSplitter);
+        const rest = [].slice.call(arguments, 1);
+        while ((event = events.shift())) {
+            if ((node = calls[event])) {
+                tail = node.tail;
+                while ((node = node.next) !== tail) {
+                    node.callback.apply(node.context || this, rest);
+                }
+            }
+        }
+        return this;
+    }
+}
+Events.eventSplitter = /\s+/;
+
+var HOOK_TYPE;
+(function (HOOK_TYPE) {
+    HOOK_TYPE[HOOK_TYPE["SINGLE"] = 0] = "SINGLE";
+    HOOK_TYPE[HOOK_TYPE["MULTI"] = 1] = "MULTI";
+    HOOK_TYPE[HOOK_TYPE["WATERFALL"] = 2] = "WATERFALL";
+})(HOOK_TYPE || (HOOK_TYPE = {}));
+const defaultMiniLifecycle = {
+    app: [
+        'onLaunch',
+        'onShow',
+        'onHide'
+    ],
+    page: [
+        'onLoad',
+        'onUnload',
+        'onReady',
+        'onShow',
+        'onHide',
+        [
+            'onPullDownRefresh',
+            'onReachBottom',
+            'onPageScroll',
+            'onResize',
+            'onTabItemTap',
+            'onTitleClick',
+            'onOptionMenuClick',
+            'onPopMenuClick',
+            'onPullIntercept',
+            'onAddToFavorites'
+        ]
+    ]
+};
+function TaroHook(type, initial) {
+    return {
+        type,
+        initial: initial || null
+    };
+}
+class TaroHooks extends Events {
+    constructor(hooks, opts) {
+        super(opts);
+        this.hooks = hooks;
+        for (const hookName in hooks) {
+            const { initial } = hooks[hookName];
+            if (isFunction(initial)) {
+                this.on(hookName, initial);
+            }
+        }
+    }
+    tapOneOrMany(hookName, callback) {
+        const list = isFunction(callback) ? [callback] : callback;
+        list.forEach(cb => this.on(hookName, cb));
+    }
+    tap(hookName, callback) {
+        const hooks = this.hooks;
+        const { type, initial } = hooks[hookName];
+        if (type === HOOK_TYPE.SINGLE) {
+            this.off(hookName);
+            this.on(hookName, isFunction(callback) ? callback : callback[callback.length - 1]);
+        }
+        else {
+            initial && this.off(hookName, initial);
+            this.tapOneOrMany(hookName, callback);
+        }
+    }
+    call(hookName, ...rest) {
+        var _a;
+        const hook = this.hooks[hookName];
+        if (!hook)
+            return;
+        const { type } = hook;
+        const calls = this.callbacks;
+        if (!calls)
+            return;
+        const list = calls[hookName];
+        if (list) {
+            const tail = list.tail;
+            let node = list.next;
+            let args = rest;
+            let res;
+            while (node !== tail) {
+                res = (_a = node.callback) === null || _a === void 0 ? void 0 : _a.apply(node.context || this, args);
+                if (type === HOOK_TYPE.WATERFALL) {
+                    const params = [res];
+                    args = params;
+                }
+                node = node.next;
+            }
+            return res;
+        }
+    }
+    isExist(hookName) {
+        var _a;
+        return Boolean((_a = this.callbacks) === null || _a === void 0 ? void 0 : _a[hookName]);
+    }
+}
+new TaroHooks({
+    getMiniLifecycle: TaroHook(HOOK_TYPE.SINGLE, defaultConfig => defaultConfig),
+    getMiniLifecycleImpl: TaroHook(HOOK_TYPE.SINGLE, function () {
+        return this.call('getMiniLifecycle', defaultMiniLifecycle);
+    }),
+    getLifecycle: TaroHook(HOOK_TYPE.SINGLE, (instance, lifecycle) => instance[lifecycle]),
+    getPathIndex: TaroHook(HOOK_TYPE.SINGLE, indexOfNode => `[${indexOfNode}]`),
+    getEventCenter: TaroHook(HOOK_TYPE.SINGLE, Events => new Events()),
+    isBubbleEvents: TaroHook(HOOK_TYPE.SINGLE, eventName => {
+        /**
+         * 支持冒泡的事件, 除 支付宝小程序外，其余的可冒泡事件都和微信保持一致
+         * 详见 见 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
+         */
+        const BUBBLE_EVENTS = new Set([
+            'touchstart',
+            'touchmove',
+            'touchcancel',
+            'touchend',
+            'touchforcechange',
+            'tap',
+            'longpress',
+            'longtap',
+            'transitionend',
+            'animationstart',
+            'animationiteration',
+            'animationend'
+        ]);
+        return BUBBLE_EVENTS.has(eventName);
+    }),
+    getSpecialNodes: TaroHook(HOOK_TYPE.SINGLE, () => ['view', 'text', 'image']),
+    onRemoveAttribute: TaroHook(HOOK_TYPE.SINGLE),
+    batchedEventUpdates: TaroHook(HOOK_TYPE.SINGLE),
+    mergePageInstance: TaroHook(HOOK_TYPE.SINGLE),
+    modifyPageObject: TaroHook(HOOK_TYPE.SINGLE),
+    createPullDownComponent: TaroHook(HOOK_TYPE.SINGLE),
+    getDOMNode: TaroHook(HOOK_TYPE.SINGLE),
+    modifyHydrateData: TaroHook(HOOK_TYPE.SINGLE),
+    modifySetAttrPayload: TaroHook(HOOK_TYPE.SINGLE),
+    modifyRmAttrPayload: TaroHook(HOOK_TYPE.SINGLE),
+    onAddEvent: TaroHook(HOOK_TYPE.SINGLE),
+    modifyMpEvent: TaroHook(HOOK_TYPE.MULTI),
+    modifyMpEventImpl: TaroHook(HOOK_TYPE.SINGLE, function (e) {
+        try {
+            // 有些小程序的事件对象的某些属性只读
+            this.call('modifyMpEvent', e);
+        }
+        catch (error) {
+            console.warn('[Taro modifyMpEvent hook Error]: ', error);
+        }
+    }),
+    modifyTaroEvent: TaroHook(HOOK_TYPE.MULTI),
+    modifyDispatchEvent: TaroHook(HOOK_TYPE.MULTI),
+    initNativeApi: TaroHook(HOOK_TYPE.MULTI),
+    patchElement: TaroHook(HOOK_TYPE.MULTI)
+});
+
 function toDashed(s) {
     return s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
@@ -364,6 +600,45 @@ function capitalize(s) {
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 const hasOwn = (val, key) => hasOwnProperty.call(val, key);
 (new Date()).getTime().toString();
+function getComponentsAlias(origin) {
+    const mapping = {};
+    const viewAttrs = origin.View;
+    const extraList = {
+        '#text': {},
+        StaticView: viewAttrs,
+        StaticImage: origin.Image,
+        StaticText: origin.Text,
+        PureView: viewAttrs,
+        CatchView: viewAttrs
+    };
+    origin = Object.assign(Object.assign({}, origin), extraList);
+    Object.keys(origin)
+        .sort((a, b) => {
+        const reg = /^(Static|Pure|Catch)*(View|Image|Text)$/;
+        if (reg.test(a)) {
+            return -1;
+        }
+        else if (reg.test(b)) {
+            return 1;
+        }
+        else {
+            return a >= b ? 1 : -1;
+        }
+    })
+        .forEach((key, num) => {
+        const obj = {
+            _num: String(num)
+        };
+        Object.keys(origin[key])
+            .filter(attr => !(/^bind/.test(attr)) && !['focus', 'blur'].includes(attr))
+            .sort()
+            .forEach((attr, index) => {
+            obj[toCamelCase(attr)] = 'p' + index;
+        });
+        mapping[toDashed(key)] = obj;
+    });
+    return mapping;
+}
 function indent(str, size) {
     return str.split('\n')
         .map((line, index) => {
@@ -408,6 +683,7 @@ class BaseTemplate {
     constructor() {
         this.exportExpr = 'module.exports =';
         this.supportXS = false;
+        this.thirdPartyPatcher = {};
         this.Adapter = weixinAdapter;
         /** 组件列表 */
         this.internalComponents = internalComponents;
@@ -461,7 +737,7 @@ class BaseTemplate {
             .map(k => `${k}="${k.startsWith('bind') || k.startsWith('on') || k.startsWith('catch') ? attrs[k] : `{${this.getAttrValue(attrs[k], k, nodeName)}}`}" `)
             .join('');
     }
-    replacePropName(name, value, _componentName) {
+    replacePropName(name, value, _componentName, _componentAlias) {
         if (value === 'eh')
             return name.toLowerCase();
         return name;
@@ -473,6 +749,7 @@ class BaseTemplate {
                 let component = components[key];
                 const compName = toDashed(key);
                 const newComp = Object.create(null);
+                const componentAlias = this.componentsAlias[compName];
                 if (isFunction(this.modifyCompProps)) {
                     component = this.modifyCompProps(compName, component);
                 }
@@ -483,17 +760,23 @@ class BaseTemplate {
                             propValue = 'eh';
                         }
                         else if (propValue === '') {
-                            propValue = `i.${toCamelCase(prop)}`;
+                            const propInCamelCase = toCamelCase(prop);
+                            const propAlias = componentAlias[propInCamelCase] || propInCamelCase;
+                            propValue = `i.${propAlias}`;
                         }
                         else if (isBooleanStringLiteral(propValue) || isNumber(+propValue)) {
+                            const propInCamelCase = toCamelCase(prop);
+                            const propAlias = componentAlias[propInCamelCase] || propInCamelCase;
                             propValue = this.supportXS
-                                ? `xs.b(i.${toCamelCase(prop)},${propValue})`
-                                : `i.${toCamelCase(prop)}===undefined?${propValue}:i.${toCamelCase(prop)}`;
+                                ? `xs.b(i.${propAlias},${propValue})`
+                                : `i.${propAlias}===undefined?${propValue}:i.${propAlias}`;
                         }
                         else {
-                            propValue = `i.${toCamelCase(prop)}||${propValue || singleQuote('')}`;
+                            const propInCamelCase = toCamelCase(prop);
+                            const propAlias = componentAlias[propInCamelCase] || propInCamelCase;
+                            propValue = `i.${propAlias}||${propValue || singleQuote('')}`;
                         }
-                        prop = this.replacePropName(prop, propValue, compName);
+                        prop = this.replacePropName(prop, propValue, compName, componentAlias);
                         newComp[prop] = propValue;
                     }
                 }
@@ -553,7 +836,7 @@ class BaseTemplate {
 </template>
 `;
     }
-    buildThirdPartyAttr(attrs) {
+    buildThirdPartyAttr(attrs, patcher = {}) {
         return Array.from(attrs).reduce((str, attr) => {
             if (attr.startsWith('@')) {
                 // vue2
@@ -581,6 +864,13 @@ class BaseTemplate {
             else if (attr === 'style') {
                 return str + `style="{{i.${"st" /* Style */}}}" `;
             }
+            const patchValue = patcher[attr];
+            if (isBooleanStringLiteral(patchValue) || isNumber(patchValue) || isString(patchValue)) {
+                const propValue = this.supportXS
+                    ? `xs.b(i.${toCamelCase(attr)},${patchValue})`
+                    : `i.${toCamelCase(attr)}===undefined?${patchValue}:i.${toCamelCase(attr)}`;
+                return str + `${attr}="{{${propValue}}}" `;
+            }
             return str + `${attr}="{{i.${toCamelCase(attr)}}}" `;
         }, '');
     }
@@ -615,31 +905,34 @@ class BaseTemplate {
     }
     buildFocusComponentTemplte(comp, level) {
         const children = this.getChildren(comp, level);
+        const nodeName = comp.nodeName;
+        const nodeAlias = comp.nodeAlias;
         const attrs = Object.assign({}, comp.attributes);
         const templateName = this.supportXS
             ? `xs.c(i, 'tmpl_${level}_')`
-            : `i.focus ? 'tmpl_${level}_${comp.nodeName}_focus' : 'tmpl_${level}_${comp.nodeName}_blur'`;
+            : `i.focus ? 'tmpl_${level}_${nodeAlias}_focus' : 'tmpl_${level}_${nodeAlias}_blur'`;
         delete attrs.focus;
         let res = `
-<template name="tmpl_${level}_${comp.nodeName}">
+<template name="tmpl_${level}_${nodeAlias}">
   <template is="{{${templateName}}}" data="{{${this.dataKeymap('i:i')}${children ? ',cid:cid' : ''}}}" />
 </template>
 
-<template name="tmpl_${level}_${comp.nodeName}_focus">
-  <${comp.nodeName} ${this.buildAttribute(comp.attributes, comp.nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${comp.nodeName}>
+<template name="tmpl_${level}_${nodeAlias}_focus">
+  <${nodeName} ${this.buildAttribute(comp.attributes, nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
 </template>
 
-<template name="tmpl_${level}_${comp.nodeName}_blur">
-  <${comp.nodeName} ${this.buildAttribute(attrs, comp.nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${comp.nodeName}>
+<template name="tmpl_${level}_${nodeAlias}_blur">
+  <${nodeName} ${this.buildAttribute(attrs, nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
 </template>
 `;
         if (isFunction(this.modifyTemplateResult)) {
-            res = this.modifyTemplateResult(res, comp.nodeName, level, children);
+            res = this.modifyTemplateResult(res, nodeName, level, children);
         }
         return res;
     }
     buildStandardComponentTemplate(comp, level) {
         const children = this.getChildren(comp, level);
+        const nodeAlias = comp.nodeAlias;
         let nodeName = '';
         switch (comp.nodeName) {
             case 'slot':
@@ -660,7 +953,7 @@ class BaseTemplate {
                 break;
         }
         let res = `
-<template name="tmpl_${level}_${comp.nodeName}">
+<template name="tmpl_${level}_${nodeAlias}">
   <${nodeName} ${this.buildAttribute(comp.attributes, comp.nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
 </template>
 `;
@@ -671,7 +964,7 @@ class BaseTemplate {
     }
     buildPlainTextTemplate(level) {
         return `
-<template name="tmpl_${level}_#text">
+<template name="tmpl_${level}_${this.componentsAlias['#text']._num}">
   <block>{{i.${"v" /* Text */}}}</block>
 </template>
 `;
@@ -703,7 +996,7 @@ class BaseTemplate {
                 }
                 template += `
 <template name="tmpl_${level}_${compName}">
-  <${compName} ${this.buildThirdPartyAttr(attrs)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
+  <${compName} ${this.buildThirdPartyAttr(attrs, this.thirdPartyPatcher[compName] || {})} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
     <block ${Adapter.for}="{{i.${"cn" /* Childnodes */}}}" ${Adapter.key}="sid">
       ${child}
     </block>
@@ -756,6 +1049,9 @@ class BaseTemplate {
     mergeComponents(ctx, patch) {
         ctx.helper.recursiveMerge(this.internalComponents, patch);
     }
+    mergeThirdPartyComponents(patch) {
+        this.thirdPartyPatcher = patch;
+    }
     buildXSTmplName() {
         return `function (l, n) {
     return 'tmpl_' + l + '_' + n
@@ -778,6 +1074,7 @@ class RecursiveTemplate extends BaseTemplate {
         this.buildTemplate = (componentConfig) => {
             let template = this.buildBaseTemplate();
             if (!this.miniComponents) {
+                this.componentsAlias = getComponentsAlias(this.internalComponents);
                 this.miniComponents = this.createMiniComponents(this.internalComponents);
             }
             const ZERO_FLOOR = 0;
@@ -785,7 +1082,8 @@ class RecursiveTemplate extends BaseTemplate {
                 .filter(c => componentConfig.includes.size && !componentConfig.includeAll ? componentConfig.includes.has(c) : true);
             template = components.reduce((current, nodeName) => {
                 const attributes = this.miniComponents[nodeName];
-                return current + this.buildComponentTemplate({ nodeName, attributes }, ZERO_FLOOR);
+                const nodeAlias = this.componentsAlias[nodeName]._num;
+                return current + this.buildComponentTemplate({ nodeName, nodeAlias, attributes }, ZERO_FLOOR);
             }, template);
             template += this.buildPlainTextTemplate(ZERO_FLOOR);
             template += this.buildThirdPartyTemplate(ZERO_FLOOR, componentConfig);
@@ -802,6 +1100,7 @@ class UnRecursiveTemplate extends BaseTemplate {
         this.buildTemplate = (componentConfig) => {
             this.componentConfig = componentConfig;
             if (!this.miniComponents) {
+                this.componentsAlias = getComponentsAlias(this.internalComponents);
                 this.miniComponents = this.createMiniComponents(this.internalComponents);
             }
             const components = Object.keys(this.miniComponents)
@@ -826,7 +1125,8 @@ class UnRecursiveTemplate extends BaseTemplate {
             return this.buildContainerTemplate(level, restart);
         let template = components.reduce((current, nodeName) => {
             const attributes = this.miniComponents[nodeName];
-            return current + this.buildComponentTemplate({ nodeName, attributes }, level);
+            const nodeAlias = this.componentsAlias[nodeName]._num;
+            return current + this.buildComponentTemplate({ nodeName, nodeAlias, attributes }, level);
         }, '');
         template += this.buildPlainTextTemplate(level);
         template += this.buildThirdPartyTemplate(level, this.componentConfig);
@@ -851,7 +1151,8 @@ class UnRecursiveTemplate extends BaseTemplate {
                 }
             }
             const attributes = this.miniComponents[nodeName];
-            return current + this.buildComponentTemplate({ nodeName, attributes }, level);
+            const nodeAlias = this.componentsAlias[nodeName]._num;
+            return current + this.buildComponentTemplate({ nodeName, nodeAlias, attributes }, level);
         }, '');
         if (level === 0)
             template += this.buildPlainTextTemplate(level);
@@ -874,9 +1175,12 @@ class UnRecursiveTemplate extends BaseTemplate {
                 isLoopCompsSet.delete(comp);
             }
         });
+        const componentsAlias = this.componentsAlias;
+        const listA = Array.from(isLoopCompsSet).map(item => { var _a; return ((_a = componentsAlias[item]) === null || _a === void 0 ? void 0 : _a._num) || item; });
+        const listB = hasMaxComps.map(item => { var _a; return ((_a = componentsAlias[item]) === null || _a === void 0 ? void 0 : _a._num) || item; });
         return `function (l, n, s) {
-    var a = ${JSON.stringify(Array.from(isLoopCompsSet))}
-    var b = ${JSON.stringify(hasMaxComps)}
+    var a = ${JSON.stringify(listA)}
+    var b = ${JSON.stringify(listB)}
     if (a.indexOf(n) === -1) {
       l = 0
     }
@@ -897,8 +1201,10 @@ class UnRecursiveTemplate extends BaseTemplate {
             if (max > 1)
                 hasMaxComps.push(comp);
         });
+        const componentsAlias = this.componentsAlias;
+        const listA = hasMaxComps.map(item => { var _a; return ((_a = componentsAlias[item]) === null || _a === void 0 ? void 0 : _a._num) || item; });
         return `f: function (l, n) {
-    var b = ${JSON.stringify(hasMaxComps)}
+    var b = ${JSON.stringify(listA)}
     if (b.indexOf(n) > -1) {
       if (l) l += ','
       l += n