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

package/src/api/utils/handler.ts

@@ -0,0 +1,105 @@
+type TCallback<T = Partial<TaroGeneral.CallbackResult>> = (res: T) => Promise<void> | void
+interface IMethodParam<T = Partial<TaroGeneral.CallbackResult>> {
+  name: string
+  success?: TCallback<T>
+  fail?: TCallback
+  complete?: TCallback
+}
+
+export class MethodHandler<T = Partial<TaroGeneral.CallbackResult>> {
+  methodName: string
+
+  protected __success?: TCallback<T>
+  protected __fail?: TCallback
+  protected __complete?: TCallback
+
+  constructor ({ name, success, fail, complete }: IMethodParam<T>) {
+    this.methodName = name
+    this.__success = success
+    this.__fail = fail
+    this.__complete = complete
+  }
+
+  success<U = Record<string, unknown>> (res: Partial<T> & Partial<TaroGeneral.CallbackResult> = {}, resolve = Promise.resolve.bind(Promise)): Promise<T & U & TaroGeneral.CallbackResult> {
+    if (!res.errMsg) {
+      res.errMsg = `${this.methodName}:ok`
+    }
+    typeof this.__success === 'function' && this.__success(res as T)
+    typeof this.__complete === 'function' && this.__complete(res)
+    return resolve(res as Required<T & U & TaroGeneral.CallbackResult>)
+  }
+
+  fail<U = Record<string, unknown>> (res: Partial<T> & Partial<TaroGeneral.CallbackResult> = {}, reject = Promise.reject.bind(Promise)): Promise<T & U & TaroGeneral.CallbackResult> {
+    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)
+  }
+}
+
+type TCallbackManagerParam = (...arr: unknown[]) => void
+interface ICallbackManagerOption {
+  callback?: TCallbackManagerParam
+  ctx?: any
+  [key: string]: unknown
+}
+type TCallbackManagerListItem = (TCallbackManagerParam | ICallbackManagerOption)
+type TCallbackManagerList = TCallbackManagerListItem[]
+
+export class CallbackManager {
+  callbacks: TCallbackManagerList = []
+
+  /**
+   * 添加回调
+   * @param {{ callback: function, ctx: any } | function} opt
+   */
+  add (opt?: TCallbackManagerListItem) {
+    if (opt) this.callbacks.push(opt)
+  }
+
+  /**
+   * 移除回调
+   * @param {{ callback: function, ctx: any } | function} opt
+   */
+  remove (opt?: TCallbackManagerListItem) {
+    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: TCallbackManagerList) {
+    this.callbacks.forEach(opt => {
+      if (typeof opt === 'function') {
+        opt(...args)
+      } else {
+        const { callback, ctx } = opt
+        typeof callback === 'function' && callback.call(ctx, ...args)
+      }
+    })
+  }
+}

package/src/api/utils/{index.js → index.ts}

@@ -1,10 +1,10 @@
 /* eslint-disable prefer-promise-reject-errors */
-import { Current, container, SERVICE_IDENTIFIER } from '@tarojs/runtime'
+import { Current, container, SERVICE_IDENTIFIER, IHooks, TaroElement } from '@tarojs/runtime'
 
-function shouldBeObject (target) {
-  if (target && typeof target === 'object') return { res: true }
+export function shouldBeObject (target: unknown) {
+  if (target && typeof target === 'object') return { flag: true }
   return {
-    res: false,
+    flag: false,
     msg: getParameterError({
       correct: 'Object',
       wrong: target
@@ -12,8 +12,8 @@ function shouldBeObject (target) {
   }
 }
 
-export function findDOM (inst) {
-  const runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks)
+export function findDOM (inst?): TaroElement | HTMLElement | undefined {
+  const runtimeHooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
   if (inst) {
     const find = runtimeHooks.getDOMNode
@@ -23,7 +23,7 @@ export function findDOM (inst) {
   }
 
   const page = Current.page
-  const path = page.path
+  const path = page?.path
   const msg = '没有找到已经加载了的页面，请在页面加载完成后时候此 API。'
   if (path == null) {
     throw new Error(msg)
@@ -37,10 +37,20 @@ export function findDOM (inst) {
   return el
 }
 
-function getParameterError ({ name = '', para, correct, wrong }) {
+interface IParameterErrorParam {
+  name?: string
+  para?: string
+  correct?: string
+  wrong?: unknown
+}
+export function getParameterError ({ name = '', para, correct, wrong }: IParameterErrorParam) {
   const parameter = para ? `parameter.${para}` : 'parameter'
   const errorType = upperCaseFirstLetter(wrong === null ? 'Null' : typeof wrong)
-  return `${name}:fail parameter error: ${parameter} should be ${correct} instead of ${errorType}`
+  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) {
@@ -49,7 +59,7 @@ function upperCaseFirstLetter (string) {
   return string
 }
 
-function inlineStyle (style) {
+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;'
@@ -58,32 +68,12 @@ function inlineStyle (style) {
   return res
 }
 
-function setTransform (el, val) {
+export function setTransform (el, val) {
   el.style.webkitTransform = val
   el.style.transform = val
 }
 
-function isFunction (obj) {
-  return typeof obj === 'function'
-}
-
-function successHandler (success, complete) {
-  return function (res) {
-    isFunction(success) && success(res)
-    isFunction(complete) && complete(res)
-    return Promise.resolve(res)
-  }
-}
-
-function errorHandler (fail, complete) {
-  return function (res) {
-    isFunction(fail) && fail(res)
-    isFunction(complete) && complete(res)
-    return Promise.reject(res)
-  }
-}
-
-function serializeParams (params) {
+export function serializeParams (params) {
   if (!params) {
     return ''
   }
@@ -95,7 +85,7 @@ function serializeParams (params) {
     .join('&')
 }
 
-function temporarilyNotSupport (apiName) {
+export function temporarilyNotSupport (apiName) {
   return () => {
     const errMsg = `暂时不支持 API ${apiName}`
     console.error(errMsg)
@@ -105,7 +95,7 @@ function temporarilyNotSupport (apiName) {
   }
 }
 
-function weixinCorpSupport (apiName) {
+export function weixinCorpSupport (apiName) {
   return () => {
     const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
     console.error(errMsg)
@@ -115,7 +105,7 @@ function weixinCorpSupport (apiName) {
   }
 }
 
-function permanentlyNotSupport (apiName) {
+export function permanentlyNotSupport (apiName) {
   return () => {
     const errMsg = `不支持 API ${apiName}`
     console.error(errMsg)
@@ -125,69 +115,18 @@ function permanentlyNotSupport (apiName) {
   }
 }
 
-const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
-
-const isValidColor = (color) => {
-  return VALID_COLOR_REG.test(color)
+export function isFunction (obj) {
+  return typeof obj === 'function'
 }
 
-const createCallbackManager = () => {
-  const callbacks = []
-
-  /**
-   * 添加回调
-   * @param {{ callback: function, ctx: any } | function} opt
-   */
-  const add = (opt) => {
-    callbacks.push(opt)
-  }
-
-  /**
-   * 移除回调
-   * @param {{ callback: function, ctx: any } | function} opt
-   */
-  const remove = (opt) => {
-    let pos = -1
-    callbacks.forEach((callback, k) => {
-      if (callback === opt) {
-        pos = k
-      }
-    })
-    if (pos > -1) {
-      callbacks.splice(pos, 1)
-    }
-  }
-
-  /**
-   * 获取回调函数数量
-   * @return {number}
-   */
-  const count = () => callbacks.length
-
-  /**
-   * 触发回调
-   * @param  {...any} args 回调的调用参数
-   */
-  const trigger = (...args) => {
-    callbacks.forEach(opt => {
-      if (typeof opt === 'function') {
-        opt(...args)
-      } else {
-        const { callback, ctx } = opt
-        callback.call(ctx, ...args)
-      }
-    })
-  }
+const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
 
-  return {
-    add,
-    remove,
-    count,
-    trigger
-  }
+export const isValidColor = (color) => {
+  return VALID_COLOR_REG.test(color)
 }
 
-function processOpenapi (apiName, defaultOptions, formatResult = res => res, formatParams = options => options) {
+export function processOpenApi (apiName: string, defaultOptions?: Record<string, unknown>, formatResult = res => res, formatParams = options => options) {
+  // @ts-ignore
   if (!window.wx) {
     return weixinCorpSupport(apiName)
   }
@@ -206,6 +145,7 @@ function processOpenapi (apiName, defaultOptions, formatResult = res => res, for
           }
         }
       })
+      // @ts-ignore
       wx[apiName](formatParams(obj))
     })
     return p
@@ -214,11 +154,11 @@ function processOpenapi (apiName, defaultOptions, formatResult = res => res, for
 
 /**
  * ease-in-out的函数
- * @param {number} t 0-1的数字
+ * @param t 0-1的数字
  */
-const easeInOut = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+export const easeInOut = (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
 
-const getTimingFunc = (easeFunc, frameCnt) => {
+export const getTimingFunc = (easeFunc, frameCnt) => {
   return x => {
     if (frameCnt <= 1) {
       return easeFunc(1)
@@ -227,22 +167,3 @@ const getTimingFunc = (easeFunc, frameCnt) => {
     return easeFunc(t)
   }
 }
-
-export {
-  shouldBeObject,
-  getParameterError,
-  inlineStyle,
-  setTransform,
-  successHandler,
-  errorHandler,
-  serializeParams,
-  temporarilyNotSupport,
-  weixinCorpSupport,
-  permanentlyNotSupport,
-  isValidColor,
-  isFunction,
-  createCallbackManager,
-  processOpenapi,
-  easeInOut,
-  getTimingFunc
-}

package/src/api/worker/index.ts

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

package/src/api/wxml/index.ts

@@ -0,0 +1,9 @@
+import Taro from '@tarojs/api'
+import { temporarilyNotSupport } from '../utils'
+import { SelectorQuery } from './selectorQuery'
+
+export const createSelectorQuery: typeof Taro.createSelectorQuery = () => {
+  return new SelectorQuery()
+}
+
+export const createIntersectionObserver = temporarilyNotSupport('createIntersectionObserver')

package/src/api/wxml/nodesRef.ts

@@ -0,0 +1,56 @@
+import { SelectorQuery } from './selectorQuery'
+
+export class NodesRef implements Taro.NodesRef {
+  _component?: TaroGeneral.IAnyObject
+  _selector: string
+  _selectorQuery: SelectorQuery
+  _single: boolean
+
+  constructor (selector: string, querySelectorQuery: SelectorQuery, single: boolean) {
+    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/src/api/wxml/selectorQuery.ts

@@ -0,0 +1,219 @@
+import Taro from '@tarojs/api'
+import { CanvasContext } from '../canvas/CanvasContext'
+import { findDOM } from '../utils'
+import { NodesRef } from './nodesRef'
+
+type TElement = Document | HTMLElement | Element
+
+interface ISelectorQueryQueue {
+  component: TaroGeneral.IAnyObject
+  selector: string
+  single: boolean
+  fields
+}
+
+type TSelectorQueryQueueCallback = (res: ISelectorQueryQueue) => void
+
+function filter (fields, dom?: HTMLElement, selector?: string) {
+  if (!dom) return null
+
+  const isViewport = selector === '.taro_page'
+  const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields
+  const res: any = {}
+
+  if (nodeCanvasType && node) {
+    const tagName = dom.tagName
+    res.node = {
+      id: dom.id,
+      $taroElement: dom
+    }
+    if (/^taro-canvas-core/i.test(tagName)) {
+      const type = (dom as any).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 as unknown as Taro.VideoContext }
+    } else if (/^taro-canvas-core/i.test(tagName)) {
+      const type = (dom as any).type! || '2d'
+      const canvas = dom?.querySelector('canvas') as HTMLCanvasElement
+      const ctx = canvas?.getContext(type) as CanvasRenderingContext2D
+      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: ISelectorQueryQueue[], cb: (...args: any[]) => any): void {
+  const result: any[] = []
+
+  queue.forEach(item => {
+    const { selector, single, fields, component } = item
+    // selector 的容器节点
+    /* eslint-disable */
+    const container: TElement = (
+      component !== null ?
+        (findDOM(component) as HTMLElement || document) :
+        document
+    )
+    /* eslint-enable */
+
+    // 特殊处理 ---- 选自己
+    let selectSelf = false
+    if (container !== document) {
+      const $nodeList = container.parentNode?.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 as HTMLElement, selector))
+    } else {
+      const $children = container.querySelectorAll(selector)
+      const children: TElement[] = []
+      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 as HTMLElement)))
+    }
+  })
+  cb(result)
+}
+
+export class SelectorQuery implements Taro.SelectorQuery {
+  _defaultWebviewId: string | null
+  _webviewId: string | null
+  _queue: ISelectorQueryQueue[]
+  _queueCb: (TSelectorQueryQueueCallback | null)[]
+  _component?: TaroGeneral.IAnyObject
+
+  constructor () {
+    this._defaultWebviewId = null
+    this._webviewId = null
+    this._queue = []
+    this._queueCb = []
+    this._component
+  }
+
+  in (component: TaroGeneral.IAnyObject) {
+    this._component = component
+    return this
+  }
+
+  select (selector: string) {
+    // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
+    if (typeof selector === 'string') selector = selector.replace('>>>', '>')
+    return new NodesRef(selector, this, true)
+  }
+
+  selectAll (selector: string) {
+    // 小程序里跨自定义组件的后代选择器 '>>>' 在 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 as unknown as Taro.NodesRef
+  }
+
+  _push (selector: string, component, single, fields, callback: TSelectorQueryQueueCallback | null = null) {
+    this._queue.push({
+      component,
+      selector,
+      single,
+      fields
+    })
+    this._queueCb.push(callback)
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import taro from './api/taro'
+
+export * from './api/index'
+export * from './api/taro'
+
+export default taro

package/src/types/api.d.ts

@@ -0,0 +1,4 @@
+declare module '@tarojs/api' {
+  import Taro = require("@tarojs/taro")
+  export = Taro
+}

package/src/types/define.d.ts

@@ -0,0 +1,2 @@
+// NOTE: 允许用户自定义的常量
+declare const LOCATION_APIKEY: string | undefined

package/{types → src/types}/type.ts

@@ -1,4 +1,4 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/api'
 
 namespace Router {
   export interface Location {