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

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,49 @@
+import { temporarilyNotSupport } from '../utils'
+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 = temporarilyNotSupport('NodesRef.context') as unknown as Taro.NodesRef['context']
+
+  node = temporarilyNotSupport('NodesRef.node') as unknown as Taro.NodesRef['node']
+
+  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/{createSelectorQuery/index.js → wxml/selectorQuery.ts}

@@ -1,58 +1,25 @@
+import Taro from '@tarojs/api'
 import { findDOM } from '../utils'
+import { NodesRef } from './nodesRef'
 
-/**
- * WXML节点信息API
- * @return {Object} SelectorQuery 对象实例
- */
-function queryBat (queue, cb) {
-  const res = []
-
-  queue.forEach(item => {
-    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 = container.parentNode.querySelectorAll(selector)
-      for (let i = 0, len = $nodeList.length; i < len; ++i) {
-        if (container === $nodeList[i]) {
-          selectSelf = true
-          break
-        }
-      }
-    }
+type TElement = Document | HTMLElement | Element
 
-    if (single) {
-      const el = selectSelf === true ? container : container.querySelector(selector)
-      res.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])
-      }
-      res.push(children.map(dom => filter(fields, dom)))
-    }
-  })
-  cb(res)
+interface ISelectorQueryQueue {
+  component: TaroGeneral.IAnyObject
+  selector: string
+  single: boolean
+  fields
 }
 
-function filter (fields, dom, selector) {
+type TSelectorQueryQueueCallback = (res: ISelectorQueryQueue) => void
+
+function filter (fields, dom?: HTMLElement, selector?: string) {
   if (!dom) return null
 
   const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields
   const { left, right, top, bottom, width, height } = dom.getBoundingClientRect()
   const isViewport = selector === 'html'
-  const res = {}
+  const res: any = {}
 
   if (id) res.id = dom.id
   if (dataset) res.dataset = Object.assign({}, dom.dataset)
@@ -99,27 +66,81 @@ function filter (fields, dom, selector) {
   return res
 }
 
-class Query {
+/**
+ * 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 = null
+    this._component
   }
 
-  in (component) {
+  in (component: TaroGeneral.IAnyObject) {
     this._component = component
     return this
   }
 
-  select (selector) {
+  select (selector: string) {
     // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
     if (typeof selector === 'string') selector = selector.replace('>>>', '>')
     return new NodesRef(selector, this, true)
   }
 
-  selectAll (selector) {
+  selectAll (selector: string) {
     // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
     if (typeof selector === 'string') selector = selector.replace('>>>', '>')
     return new NodesRef(selector, this, false)
@@ -133,13 +154,15 @@ class Query {
     queryBat(this._queue, res => {
       const _queueCb = this._queueCb
       res.forEach((item, index) => {
-        typeof _queueCb[index] === 'function' && _queueCb[index].call(this, item)
+        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, component, single, fields, callback = null) {
+  _push (selector: string, component, single, fields, callback: TSelectorQueryQueueCallback | null = null) {
     this._queue.push({
       component,
       selector,
@@ -149,45 +172,3 @@ class Query {
     this._queueCb.push(callback)
   }
 }
-
-class NodesRef {
-  constructor (selector, querySelectorQuery, single) {
-    this._component = querySelectorQuery._component
-    this._selector = selector
-    this._selectorQuery = querySelectorQuery
-    this._single = single
-  }
-
-  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
-  }
-}
-
-export function createSelectorQuery () {
-  return new Query()
-}

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 {

package/src/api/accelerometer/index.js

@@ -1,105 +0,0 @@
-import { createCallbackManager, successHandler, errorHandler } from '../utils/index'
-
-const callbackManager = createCallbackManager()
-let devicemotionListener
-
-/**
- * 停止监听加速度数据。
- * @param {Object} [object] 参数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const stopAccelerometer = ({ success, fail, complete } = {}) => {
-  const res = {}
-  try {
-    window.removeEventListener('devicemotion', devicemotionListener, true)
-    res.errMsg = 'stopAccelerometer:ok'
-    return successHandler(success, complete)(res)
-  } catch (e) {
-    res.errMsg = `stopAccelerometer:fail ${e.message}`
-    return errorHandler(fail, complete)(res)
-  }
-}
-
-const INTERVALMAP = {
-  game: {
-    interval: 20,
-    frequency: 50
-  },
-  ui: {
-    interval: 60,
-    frequency: 16.67
-  },
-  normal: {
-    interval: 200,
-    frequency: 5
-  }
-}
-
-const getDevicemotionListener = interval => {
-  let lock
-  let timer
-  return evt => {
-    if (lock) return
-    lock = true
-    timer && clearTimeout(timer)
-    callbackManager.trigger({
-      x: evt.acceleration.x || 0,
-      y: evt.acceleration.y || 0,
-      z: evt.acceleration.z || 0
-    })
-    timer = setTimeout(() => { lock = false }, interval)
-  }
-}
-
-/**
- * 开始监听加速度数据。
- * @param {Object} [object] 参数
- * @param {'game' | 'ui' | 'normal'} [object.interval=normal] 监听加速度数据回调函数的执行频率
- * game 适用于更新游戏的回调频率，在 20ms/次 左右
- * ui 适用于更新 UI 的回调频率，在 60ms/次 左右
- * normal 普通的回调频率，在 200ms/次 左右
- * @param {function} [object.success]  接口调用成功的回调函数
- * @param {function} [object.fail]  接口调用失败的回调函数
- * @param {function} [object.complete]  接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const startAccelerometer = ({ interval = 'normal', success, fail, complete } = {}) => {
-  try {
-    if (window.DeviceMotionEvent) {
-      const intervalObj = INTERVALMAP[interval]
-      if (devicemotionListener) {
-        stopAccelerometer()
-      }
-      devicemotionListener = getDevicemotionListener(intervalObj.interval)
-      window.addEventListener('devicemotion', devicemotionListener, true)
-    } else {
-      throw new Error('accelerometer is not supported')
-    }
-    return successHandler(success, complete)({
-      errMsg: 'startAccelerometer:ok'
-    })
-  } catch (e) {
-    return errorHandler(fail, complete)({
-      errMsg: `startAccelerometer:fail ${e.message}`
-    })
-  }
-}
-
-/**
- * 加速度数据事件的回调函数的参数
- * @typedef {object} AccelerometerParam
- * @property {number} x X 轴
- * @property {number} y Y 轴
- * @property {number} z Z 轴
- */
-
-/**
- * 监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数。可使用 wx.stopAccelerometer() 停止监听。
- * @param {(res: AccelerometerParam) => void} callback 加速度数据事件的回调函数
- */
-const onAccelerometerChange = callback => {
-  callbackManager.add(callback)
-}
-
-export { stopAccelerometer, startAccelerometer, onAccelerometerChange }

package/src/api/audio/index.js

@@ -1,137 +0,0 @@
-import Taro from '@tarojs/api'
-import { createCallbackManager } from '../utils/index'
-
-/**
- * @typedef {object} InnerAudioContext
- * @property {string} src 音频资源的地址，用于直接播放。2.2.3 开始支持云文件ID
- * @property {number} [startTime=0] 开始播放的位置（单位：s），默认为 0
- * @property {boolean} [autoplay=false] 是否自动开始播放，默认为 false
- * @property {boolean} [loop=false] 是否循环播放，默认为 false
- * @property {boolean} [obeyMuteSwitch=true] 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。从 2.3.0 版本开始此参数不生效，使用 wx.setInnerAudioOption 接口统一设置。
- * @property {number} [volume=1] 音量。范围 0~1。默认为 1
- * @property {number} duration 当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）
- * @property {number} currentTime 当前音频的播放位置（单位 s）。只有在当前有合法的 src 时返回，时间保留小数点后 6 位（只读）
- * @property {boolean} paused 当前是是否暂停或停止状态（只读）
- * @property {number} buffered 音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲（只读）
- * @property {() => void} play() 播放
- * @property {() => void} pause() 暂停。暂停后的音频再播放会从暂停处开始播放
- * @property {() => void} stop() 停止。停止后的音频再播放会从头开始播放。
- * @property {(position: number) => void} seek(number position) 跳转到指定位置
- * @property {() => void} destroy() 销毁当前实例
- * @property {(callback: function) => void} offCanplay(function callback) 取消监听音频进入可以播放状态的事件
- * @property {(callback: function) => void} offEnded(function callback) 取消监听音频自然播放至结束的事件
- * @property {(callback: function) => void} offError(function callback) 取消监听音频播放错误事件
- * @property {(callback: function) => void} offPause(function callback) 取消监听音频暂停事件
- * @property {(callback: function) => void} offPlay(function callback) 取消监听音频播放事件
- * @property {(callback: function) => void} offSeeked(function callback) 取消监听音频完成跳转操作的事件
- * @property {(callback: function) => void} offSeeking(function callback) 取消监听音频进行跳转操作的事件
- * @property {(callback: function) => void} offStop(function callback) 取消监听音频停止事件
- * @property {(callback: function) => void} offTimeUpdate(function callback) 取消监听音频播放进度更新事件
- * @property {(callback: function) => void} offWaiting(function callback) 取消监听音频加载中事件
- * @property {(callback: function) => void} onCanplay(function callback) 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放
- * @property {(callback: function) => void} onEnded(function callback) 监听音频自然播放至结束的事件
- * @property {(callback: function) => void} onError(function callback) 监听音频播放错误事件
- * @property {(callback: function) => void} onPause(function callback) 监听音频暂停事件
- * @property {(callback: function) => void} onPlay(function callback) 监听音频播放事件
- * @property {(callback: function) => void} onSeeked(function callback) 监听音频完成跳转操作的事件
- * @property {(callback: function) => void} onSeeking(function callback) 监听音频进行跳转操作的事件
- * @property {(callback: function) => void} onStop(function callback) 监听音频停止事件
- * @property {(callback: function) => void} onTimeUpdate(function callback) 监听音频播放进度更新事件
- * @property {(callback: function) => void} onWaiting(function callback) 监听音频加载中事件。当音频因为数据不足，需要停下来加载时会触发
- */
-
-/**
- * 创建内部 audio 上下文 InnerAudioContext 对象。
- * @returns {InnerAudioContext}
- */
-export const createInnerAudioContext = () => {
-  /** @type {HTMLAudioElement} */
-  let audioEl = new Audio()
-
-  /** @type {InnerAudioContext} */
-  const iac = {}
-
-  const callbackManagers = {
-    error: createCallbackManager(),
-    stop: createCallbackManager()
-  }
-
-  iac.play = () => audioEl.play()
-  iac.pause = () => audioEl.pause()
-  iac.stop = () => {
-    iac.pause()
-    iac.seek(0)
-    callbackManagers.stop.trigger()
-  }
-  iac.seek = position => {
-    audioEl.currentTime = position
-  }
-  /**
-   * @todo destroy得并不干净
-   */
-  iac.destroy = () => {
-    iac.stop()
-    document.body.removeChild(audioEl)
-    audioEl = null
-  }
-
-  const simpleProperties = ['src', 'autoplay', 'loop', 'volume', 'duration', 'currentTime', 'buffered', 'paused']
-  simpleProperties.forEach(propertyName => {
-    Object.defineProperty(iac, propertyName, {
-      get: () => audioEl[propertyName],
-      set (value) { audioEl[propertyName] = value }
-    })
-  })
-
-  Object.defineProperty(iac, 'startTime', {
-    value: 0
-  })
-  Object.defineProperty(iac, 'obeyMuteSwitch', {
-    value: true
-  })
-
-  const simpleEvents = [
-    'Canplay',
-    'Ended',
-    'Pause',
-    'Play',
-    'Seeked',
-    'Seeking',
-    'TimeUpdate',
-    'Waiting'
-  ]
-  const simpleListenerTuples = [
-    ['on', audioEl.addEventListener],
-    ['off', audioEl.removeEventListener]
-  ]
-
-  simpleEvents.forEach(eventName => {
-    simpleListenerTuples.forEach(([eventNamePrefix, listenerFunc]) => {
-      Object.defineProperty(iac, `${eventNamePrefix}${eventName}`, {
-        get () {
-          return callback => listenerFunc.call(audioEl, eventName.toLowerCase(), callback)
-        }
-      })
-    })
-  })
-
-  const customEvents = ['Stop', 'Error']
-  const customListenerTuples = [
-    ['on', 'add'],
-    ['off', 'remove']
-  ]
-
-  customEvents.forEach(eventName => {
-    customListenerTuples.forEach(([eventNamePrefix, actionName]) => {
-      Object.defineProperty(iac, `${eventNamePrefix}${eventName}`, {
-        get () {
-          return callback => callbackManagers[eventName.toLowerCase()][actionName](callback)
-        }
-      })
-    })
-  })
-
-  Taro.eventCenter.on('__taroRouterChange', () => { iac.stop() })
-
-  return iac
-}

package/src/api/canvas/canvasGetImageData.js

@@ -1,44 +0,0 @@
-import { findDOM } from '../utils/index'
-
-/**
- * @typedef {Object} Param
- * @property {String} canvasId 画布标识，传入 <canvas> 组件的 canvas-id 属性。
- * @property {Number} x 将要被提取的图像数据矩形区域的左上角横坐标
- * @property {Number} y 将要被提取的图像数据矩形区域的左上角纵坐标
- * @property {Number} width 将要被提取的图像数据矩形区域的宽度
- * @property {Number} height 将要被提取的图像数据矩形区域的高度
- * @property {Function} [success] 接口调用成功的回调函数
- * @property {Function} [fail] 接口调用失败的回调函数
- * @property {Function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-
-/**
- * 获取 canvas 区域隐含的像素数据。
- * @param {Param} object 参数
- */
-const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, inst) => {
-  /** @type {HTMLCanvasElement} */
-  const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`)
-
-  try {
-    const ctx = canvas.getContext('2d')
-    const data = ctx.getImageData(x, y, width, height)
-    const res = {
-      width,
-      height,
-      data
-    }
-    success && success(res)
-    complete && complete()
-    return Promise.resolve(res)
-  } catch (e) {
-    const res = {
-      errMsg: e.message
-    }
-    fail && fail(res)
-    complete && complete()
-    return Promise.reject(res)
-  }
-}
-
-export default canvasGetImageData

package/src/api/canvas/canvasPutImageData.js

@@ -1,45 +0,0 @@
-import { findDOM } from '../utils/index'
-
-/**
- * @typedef {Object} Param
- * @property {String} canvasId 画布标识，传入 <canvas> 组件的 canvas-id 属性。
- * @property {Uint8ClampedArray} data 图像像素点数据，一维数组，每四项表示一个像素点的 rgba
- * @property {Number} x 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
- * @property {Number} y 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
- * @property {Number} width 源图像数据矩形区域的宽度
- * @property {Number} height 源图像数据矩形区域的高度
- * @property {Function} [success] 接口调用成功的回调函数
- * @property {Function} [fail] 接口调用失败的回调函数
- * @property {Function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-
-/**
- * 将像素数据绘制到画布。在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件
- * @param {Param} object 参数
- * @todo 暂未支持尺寸相关功能
- */
-const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, inst) => {
-  /** @type {HTMLCanvasElement} */
-  const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`)
-
-  try {
-    const ctx = canvas.getContext('2d')
-
-    ctx.putImageData(data, x, y)
-    const res = {
-      errMsg: 'canvasPutImageData:ok'
-    }
-    success && success(res)
-    complete && complete()
-    return Promise.resolve(res)
-  } catch (e) {
-    const res = {
-      errMsg: e.message
-    }
-    fail && fail(res)
-    complete && complete()
-    return Promise.reject(res)
-  }
-}
-
-export default canvasPutImageData