@tarojs/taro-h5 3.4.0-beta.0 → 3.4.0

package/dist/api/utils/handler.js

@@ -0,0 +1,80 @@
+export class MethodHandler {
+    constructor({ name, success, fail, complete }) {
+        this.methodName = name;
+        this.__success = success;
+        this.__fail = fail;
+        this.__complete = complete;
+    }
+    success(res = {}, resolve = Promise.resolve.bind(Promise)) {
+        if (!res.errMsg) {
+            res.errMsg = `${this.methodName}:ok`;
+        }
+        typeof this.__success === 'function' && this.__success(res);
+        typeof this.__complete === 'function' && this.__complete(res);
+        return resolve(res);
+    }
+    fail(res = {}, reject = Promise.reject.bind(Promise)) {
+        if (!res.errMsg) {
+            res.errMsg = `${this.methodName}:fail`;
+        }
+        else {
+            res.errMsg = `${this.methodName}:fail ${res.errMsg}`;
+        }
+        console.error(res.errMsg);
+        typeof this.__fail === 'function' && this.__fail(res);
+        typeof this.__complete === 'function' && this.__complete(res);
+        return reject(res);
+    }
+}
+export class CallbackManager {
+    constructor() {
+        this.callbacks = [];
+    }
+    /**
+     * 添加回调
+     * @param {{ callback: function, ctx: any } | function} opt
+     */
+    add(opt) {
+        if (opt)
+            this.callbacks.push(opt);
+    }
+    /**
+     * 移除回调
+     * @param {{ callback: function, ctx: any } | function} opt
+     */
+    remove(opt) {
+        if (opt) {
+            let pos = -1;
+            this.callbacks.forEach((callback, k) => {
+                if (callback === opt) {
+                    pos = k;
+                }
+            });
+            if (pos > -1) {
+                this.callbacks.splice(pos, 1);
+            }
+        }
+    }
+    /**
+     * 获取回调函数数量
+     * @return {number}
+     */
+    count() {
+        return this.callbacks.length;
+    }
+    /**
+     * 触发回调
+     * @param  {...any} args 回调的调用参数
+     */
+    trigger(...args) {
+        this.callbacks.forEach(opt => {
+            if (typeof opt === 'function') {
+                opt(...args);
+            }
+            else {
+                const { callback, ctx } = opt;
+                typeof callback === 'function' && callback.call(ctx, ...args);
+            }
+        });
+    }
+}

package/dist/api/utils/index.js

@@ -0,0 +1,148 @@
+/* eslint-disable prefer-promise-reject-errors */
+import { Current, container, SERVICE_IDENTIFIER } from '@tarojs/runtime';
+export function shouldBeObject(target) {
+    if (target && typeof target === 'object')
+        return { flag: true };
+    return {
+        flag: false,
+        msg: getParameterError({
+            correct: 'Object',
+            wrong: target
+        })
+    };
+}
+export function findDOM(inst) {
+    const runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks);
+    if (inst) {
+        const find = runtimeHooks.getDOMNode;
+        if (typeof find === 'function') {
+            return find(inst);
+        }
+    }
+    const page = Current.page;
+    const path = page === null || page === void 0 ? void 0 : page.path;
+    const msg = '没有找到已经加载了的页面，请在页面加载完成后时候此 API。';
+    if (path == null) {
+        throw new Error(msg);
+    }
+    const el = document.getElementById(path);
+    if (el == null) {
+        throw new Error('在已加载页面中没有找到对应的容器元素。');
+    }
+    return el;
+}
+export function getParameterError({ name = '', para, correct, wrong }) {
+    const parameter = para ? `parameter.${para}` : 'parameter';
+    const errorType = upperCaseFirstLetter(wrong === null ? 'Null' : typeof wrong);
+    if (name) {
+        return `${name}:fail parameter error: ${parameter} should be ${correct} instead of ${errorType}`;
+    }
+    else {
+        return `parameter error: ${parameter} should be ${correct} instead of ${errorType}`;
+    }
+}
+function upperCaseFirstLetter(string) {
+    if (typeof string !== 'string')
+        return string;
+    string = string.replace(/^./, match => match.toUpperCase());
+    return string;
+}
+export function inlineStyle(style) {
+    let res = '';
+    for (const attr in style)
+        res += `${attr}: ${style[attr]};`;
+    if (res.indexOf('display: flex;') >= 0)
+        res += 'display: -webkit-box;display: -webkit-flex;';
+    res = res.replace(/transform:(.+?);/g, (s, $1) => `${s}-webkit-transform:${$1};`);
+    res = res.replace(/flex-direction:(.+?);/g, (s, $1) => `${s}-webkit-flex-direction:${$1};`);
+    return res;
+}
+export function setTransform(el, val) {
+    el.style.webkitTransform = val;
+    el.style.transform = val;
+}
+export function serializeParams(params) {
+    if (!params) {
+        return '';
+    }
+    return Object.keys(params)
+        .map(key => (`${encodeURIComponent(key)}=${typeof (params[key]) === 'object'
+        ? encodeURIComponent(JSON.stringify(params[key]))
+        : encodeURIComponent(params[key])}`))
+        .join('&');
+}
+export function temporarilyNotSupport(apiName) {
+    return () => {
+        const errMsg = `暂时不支持 API ${apiName}`;
+        console.error(errMsg);
+        return Promise.reject({
+            errMsg
+        });
+    };
+}
+export function weixinCorpSupport(apiName) {
+    return () => {
+        const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`;
+        console.error(errMsg);
+        return Promise.reject({
+            errMsg
+        });
+    };
+}
+export function permanentlyNotSupport(apiName) {
+    return () => {
+        const errMsg = `不支持 API ${apiName}`;
+        console.error(errMsg);
+        return Promise.reject({
+            errMsg
+        });
+    };
+}
+export function isFunction(obj) {
+    return typeof obj === 'function';
+}
+const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/;
+export const isValidColor = (color) => {
+    return VALID_COLOR_REG.test(color);
+};
+export function processOpenApi(apiName, defaultOptions, formatResult = res => res, formatParams = options => options) {
+    // @ts-ignore
+    if (!window.wx) {
+        return weixinCorpSupport(apiName);
+    }
+    return options => {
+        options = options || {};
+        const obj = Object.assign({}, defaultOptions, options);
+        const p = new Promise((resolve, reject) => {
+            ['fail', 'success', 'complete'].forEach(k => {
+                obj[k] = oriRes => {
+                    const res = formatResult(oriRes);
+                    options[k] && options[k](res);
+                    if (k === 'success') {
+                        resolve(res);
+                    }
+                    else if (k === 'fail') {
+                        reject(res);
+                    }
+                };
+            });
+            // @ts-ignore
+            wx[apiName](formatParams(obj));
+        });
+        return p;
+    };
+}
+/**
+ * ease-in-out的函数
+ * @param t 0-1的数字
+ */
+export const easeInOut = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+export const getTimingFunc = (easeFunc, frameCnt) => {
+    return x => {
+        if (frameCnt <= 1) {
+            return easeFunc(1);
+        }
+        const t = x / (frameCnt - 1);
+        return easeFunc(t);
+    };
+};

package/dist/api/worker/index.js

@@ -0,0 +1,3 @@
+import { temporarilyNotSupport } from '../utils';
+// Worker
+export const createWorker = temporarilyNotSupport('createWorker');

package/dist/api/wxml/index.js

@@ -0,0 +1,6 @@
+import { temporarilyNotSupport } from '../utils';
+import { SelectorQuery } from './selectorQuery';
+export const createSelectorQuery = () => {
+    return new SelectorQuery();
+};
+export const createIntersectionObserver = temporarilyNotSupport('createIntersectionObserver');

package/dist/api/wxml/nodesRef.js

@@ -0,0 +1,42 @@
+export class NodesRef {
+    constructor(selector, querySelectorQuery, single) {
+        this._component = querySelectorQuery._component;
+        this._selector = selector;
+        this._selectorQuery = querySelectorQuery;
+        this._single = single;
+    }
+    context(cb) {
+        const { _selector, _component, _single, _selectorQuery } = this;
+        _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb);
+        return _selectorQuery;
+    }
+    node(cb) {
+        const { _selector, _component, _single, _selectorQuery } = this;
+        _selectorQuery._push(_selector, _component, _single, { nodeCanvasType: !0, node: !0 }, cb);
+        return _selectorQuery;
+    }
+    boundingClientRect(cb) {
+        const { _selector, _component, _single, _selectorQuery } = this;
+        _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, rect: !0, size: !0 }, cb);
+        return _selectorQuery;
+    }
+    scrollOffset(cb) {
+        const { _selector, _component, _single, _selectorQuery } = this;
+        _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, scrollOffset: !0 }, cb);
+        return _selectorQuery;
+    }
+    fields(fields, cb) {
+        const { _selector, _component, _single, _selectorQuery } = this;
+        const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields;
+        _selectorQuery._push(_selector, _component, _single, {
+            id,
+            dataset,
+            rect,
+            size,
+            scrollOffset,
+            properties,
+            computedStyle
+        }, cb);
+        return _selectorQuery;
+    }
+}

package/dist/api/wxml/selectorQuery.js

@@ -0,0 +1,201 @@
+import { CanvasContext } from '../canvas/CanvasContext';
+import { findDOM } from '../utils';
+import { NodesRef } from './nodesRef';
+function filter(fields, dom, selector) {
+    if (!dom)
+        return null;
+    const isViewport = selector === '.taro_page';
+    const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields;
+    const res = {};
+    if (nodeCanvasType && node) {
+        const tagName = dom.tagName;
+        res.node = {
+            id: dom.id,
+            $taroElement: dom
+        };
+        if (/^taro-canvas-core/i.test(tagName)) {
+            const type = dom.type || '';
+            res.nodeCanvasType = type;
+            const canvas = dom.getElementsByTagName('canvas')[0];
+            if (/^(2d|webgl)/i.test(type) && canvas) {
+                res.node = canvas;
+            }
+            else {
+                res.node = null;
+            }
+        }
+        else {
+            // TODO https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
+            // if (/^taro-scroll-view-core/i.test(tagName))
+            res.nodeCanvasType = '';
+            res.node = dom;
+        }
+        return res;
+    }
+    if (context) {
+        const tagName = dom.tagName;
+        if (/^taro-video-core/i.test(tagName)) {
+            // TODO HTMLVideoElement to VideoContext
+            return { context: dom };
+        }
+        else if (/^taro-canvas-core/i.test(tagName)) {
+            const type = dom.type || '2d';
+            const canvas = dom === null || dom === void 0 ? void 0 : dom.querySelector('canvas');
+            const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext(type);
+            return { context: new CanvasContext(canvas, ctx) };
+        }
+        else if (/^taro-live-player-core/i.test(tagName)) {
+            console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext');
+        }
+        else if (/^taro-editor-core/i.test(tagName)) {
+            console.error('暂时不支持通过 NodesRef.context 获取 EditorContext');
+        }
+        else if (/^taro-map-core/i.test(tagName)) {
+            console.error('暂时不支持通过 NodesRef.context 获取 MapContext');
+        }
+        return;
+    }
+    if (id)
+        res.id = dom.id;
+    if (dataset)
+        res.dataset = Object.assign({}, dom.dataset);
+    if (rect || size) {
+        const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
+        if (rect) {
+            if (!isViewport) {
+                res.left = left;
+                res.right = right;
+                res.top = top;
+                res.bottom = bottom;
+            }
+            else {
+                res.left = 0;
+                res.right = 0;
+                res.top = 0;
+                res.bottom = 0;
+            }
+        }
+        if (size) {
+            if (!isViewport) {
+                res.width = width;
+                res.height = height;
+            }
+            else {
+                res.width = dom.clientWidth;
+                res.height = dom.clientHeight;
+            }
+        }
+    }
+    if (scrollOffset) {
+        res.scrollLeft = dom.scrollLeft;
+        res.scrollTop = dom.scrollTop;
+    }
+    if (properties.length) {
+        properties.forEach(prop => {
+            const attr = dom.getAttribute(prop);
+            if (attr)
+                res[prop] = attr;
+        });
+    }
+    if (computedStyle.length) {
+        const styles = window.getComputedStyle(dom);
+        computedStyle.forEach(key => {
+            const value = styles.getPropertyValue(key) || styles[key];
+            if (value)
+                res[key] = value;
+        });
+    }
+    return res;
+}
+/**
+ * WXML节点信息API
+ * @return {Object} SelectorQuery 对象实例
+ */
+function queryBat(queue, cb) {
+    const result = [];
+    queue.forEach(item => {
+        var _a;
+        const { selector, single, fields, component } = item;
+        // selector 的容器节点
+        /* eslint-disable */
+        const container = (component !== null ?
+            (findDOM(component) || document) :
+            document);
+        /* eslint-enable */
+        // 特殊处理 ---- 选自己
+        let selectSelf = false;
+        if (container !== document) {
+            const $nodeList = (_a = container.parentNode) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector);
+            if ($nodeList) {
+                for (let i = 0, len = $nodeList.length; i < len; ++i) {
+                    if (container === $nodeList[i]) {
+                        selectSelf = true;
+                        break;
+                    }
+                }
+            }
+        }
+        if (single) {
+            const el = selectSelf === true ? container : container.querySelector(selector);
+            result.push(filter(fields, el, selector));
+        }
+        else {
+            const $children = container.querySelectorAll(selector);
+            const children = [];
+            selectSelf === true && children.push(container);
+            for (let i = 0, len = $children.length; i < len; ++i) {
+                children.push($children[i]);
+            }
+            result.push(children.map(dom => filter(fields, dom)));
+        }
+    });
+    cb(result);
+}
+export class SelectorQuery {
+    constructor() {
+        this._defaultWebviewId = null;
+        this._webviewId = null;
+        this._queue = [];
+        this._queueCb = [];
+        this._component;
+    }
+    in(component) {
+        this._component = component;
+        return this;
+    }
+    select(selector) {
+        // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
+        if (typeof selector === 'string')
+            selector = selector.replace('>>>', '>');
+        return new NodesRef(selector, this, true);
+    }
+    selectAll(selector) {
+        // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
+        if (typeof selector === 'string')
+            selector = selector.replace('>>>', '>');
+        return new NodesRef(selector, this, false);
+    }
+    selectViewport() {
+        return new NodesRef('.taro_page', this, true);
+    }
+    exec(cb) {
+        queryBat(this._queue, res => {
+            const _queueCb = this._queueCb;
+            res.forEach((item, index) => {
+                const cb = _queueCb[index];
+                typeof cb === 'function' && cb.call(this, item);
+            });
+            typeof cb === 'function' && cb.call(this, res);
+        });
+        return this;
+    }
+    _push(selector, component, single, fields, callback = null) {
+        this._queue.push({
+            component,
+            selector,
+            single,
+            fields
+        });
+        this._queueCb.push(callback);
+    }
+}