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

package/src/api/network/download.ts

@@ -114,7 +114,7 @@ const createDownloadTask = ({ url, header, success, error }): Taro.DownloadTask
  * 注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。
  */
 export const downloadFile: typeof Taro.downloadFile = ({ url, header, success, fail, complete }) => {
-  let task: Taro.DownloadTask
+  let task!: Taro.DownloadTask
   const result: ReturnType<typeof Taro.downloadFile> = new Promise((resolve, reject) => {
     task = createDownloadTask({
       url,
@@ -130,11 +130,11 @@ export const downloadFile: typeof Taro.downloadFile = ({ url, header, success, f
         reject(res)
       }
     })
-
-    result.headersReceive = task.onHeadersReceived
-    result.progress = task.onProgressUpdate
-    result.abort = task.abort
   }) as any
 
+  result.headersReceive = task.onHeadersReceived
+  result.progress = task.onProgressUpdate
+  result.abort = task.abort
+
   return result
 }

package/src/api/network/upload.ts

@@ -8,7 +8,7 @@ import {
   XHR_STATS
 } from './utils'
 
-const createUploadTask = ({ url, filePath, formData, name, header, timeout, fileName, success, error }): Taro.UploadTask => {
+const createUploadTask = ({ url, filePath, formData = {}, name, header, timeout, fileName, success, error }): Taro.UploadTask => {
   let timeoutInter
   let formKey
   const apiName = 'uploadFile'
@@ -143,7 +143,7 @@ const createUploadTask = ({ url, filePath, formData, name, header, timeout, file
  * 将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。
  */
 export const uploadFile: typeof Taro.uploadFile = ({ url, filePath, name, header, formData, timeout, fileName, success, fail, complete }) => {
-  let task: Taro.UploadTask
+  let task!: Taro.UploadTask
   const result: ReturnType<typeof Taro.uploadFile> = new Promise((resolve, reject) => {
     task = createUploadTask({
       url,
@@ -164,11 +164,11 @@ export const uploadFile: typeof Taro.uploadFile = ({ url, filePath, name, header
         reject(res)
       }
     })
-
-    result.headersReceive = task.onHeadersReceived
-    result.progress = task.onProgressUpdate
-    result.abort = task.abort
   }) as any
 
+  result.headersReceive = task.onHeadersReceived
+  result.progress = task.onProgressUpdate
+  result.abort = task.abort
+
   return result
 }

package/src/api/network/websocket/index.ts

@@ -1,6 +1,6 @@
 import { SocketTask } from './socketTask'
 import { shouldBeObject, getParameterError } from '../../utils'
-import { MethodHandler } from 'src/api/utils/handler'
+import { MethodHandler } from '../../utils/handler'
 
 let socketTasks: SocketTask[] = []
 let socketsCounter = 1

package/src/api/ui/animation/index.ts

@@ -9,13 +9,17 @@ class StyleSheet {
     this.$style = document.createElement('style')
   }
 
-  $style: HTMLStyleElement
-  sheet?: CSSStyleSheet | null
+  $style?: HTMLStyleElement | null = null
+  sheet?: CSSStyleSheet | null = null
+
   appendStyleSheet = () => {
-    this.$style?.setAttribute('type', 'text/css')
-    this.$style?.setAttribute('data-type', 'Taro')
-    document.getElementsByTagName('head')[0].appendChild(this.$style)
-    this.sheet = this.$style?.sheet
+    if (this.$style) {
+      const head = document.getElementsByTagName('head')[0]
+      this.$style.setAttribute('type', 'text/css')
+      this.$style.setAttribute('data-type', 'Taro')
+      head.appendChild(this.$style)
+      this.sheet = this.$style.sheet
+    }
     if (this.sheet && !('insertRule' in this.sheet)) {
       console.warn('当前浏览器不支持 stylesheet.insertRule 接口')
     }
@@ -38,12 +42,7 @@ let TRANSITION_END = 'transitionend'
 let TRANSFORM = 'transform'
 
 const $detect = document.createElement('div')
-$detect.style.cssText = `
-  -webkit-animation-name: webkit;
-  -moz-animation-name: moz;
-  -ms-animation-name: ms;
-  animation-name: standard;
-`
+$detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;'
 if ($detect.style['animation-name'] === 'standard') {
   // 支持标准写法
   TRANSITION_END = 'transitionend'

package/src/api/ui/interaction/index.ts

@@ -62,9 +62,9 @@ const showToast: typeof Taro.showToast = (options = { title: '' }) => {
 
   let errMsg = ''
   if (!toast.el) {
-    errMsg = toast.create(options, 'loading')
+    errMsg = toast.create(options, 'toast')
   } else {
-    errMsg = toast.show(options, 'loading')
+    errMsg = toast.show(options, 'toast')
   }
   return handle.success({ errMsg })
 }
@@ -167,7 +167,7 @@ const showModal: typeof Taro.showModal = async (options = {}) => {
 
   if (options.cancelText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
     return handle.fail({
-      errMsg: 'showModal:fail cancelText length should not larger then 4 Chinese characters'
+      errMsg: 'cancelText length should not larger then 4 Chinese characters'
     })
   }
 
@@ -183,7 +183,7 @@ const showModal: typeof Taro.showModal = async (options = {}) => {
 
   if (options.confirmText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
     return handle.fail({
-      errMsg: 'showModal:fail confirmText length should not larger then 4 Chinese characters'
+      errMsg: 'confirmText length should not larger then 4 Chinese characters'
     })
   }
 
@@ -209,13 +209,15 @@ const showModal: typeof Taro.showModal = async (options = {}) => {
 
   options.showCancel = !!options.showCancel
 
-  let errMsg = ''
+  let result = ''
   if (!modal.el) {
-    errMsg = await modal.create(options)
+    result = await modal.create(options)
   } else {
-    errMsg = await modal.show(options)
+    result = await modal.show(options)
   }
-  return handle.success({ errMsg })
+  const res = { cancel: !1, confirm: !1 }
+  res[result] = !0
+  return handle.success(res)
 }
 
 function hideModal () {
@@ -244,11 +246,11 @@ const showActionSheet: typeof Taro.showActionSheet = async (options = { itemList
   }
 
   if (options.itemList.length < 1) {
-    return handle.fail({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should have at least 1 item' })
+    return handle.fail({ errMsg: 'parameter error: parameter.itemList should have at least 1 item' })
   }
 
   if (options.itemList.length > 6) {
-    return handle.fail({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should not be large than 6' })
+    return handle.fail({ errMsg: 'parameter error: parameter.itemList should not be large than 6' })
   }
 
   for (let i = 0; i < options.itemList.length; i++) {

package/src/api/ui/navigation-bar/index.ts

@@ -1,4 +1,4 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/api'
 
 import { MethodHandler } from '../../utils/handler'
 import { getParameterError, shouldBeObject, temporarilyNotSupport } from '../../utils'
@@ -16,7 +16,7 @@ export function setNavigationBarTitle (options) {
   }
 
   const { title, success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'makePhoneCall', success, fail, complete })
+  const handle = new MethodHandler({ name: 'setNavigationBarTitle', success, fail, complete })
 
   if (!title || typeof title !== 'string') {
     return handle.fail({

package/src/api/ui/scroll/index.ts

@@ -4,7 +4,7 @@ import { Current } from '@tarojs/runtime'
 import { MethodHandler } from '../../utils/handler'
 import { getTimingFunc, easeInOut } from '../../utils'
 
-let timer: number
+let timer: NodeJS.Timer
 const FRAME_DURATION = 17
 
 /**
@@ -21,9 +21,9 @@ export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '
         }, reject)
       }
 
-      const id = Current.page?.path
+      const id = Current.page?.path?.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1')
       const el: HTMLDivElement | null = (id
-        ? document.getElementById(id)
+        ? document.querySelector(`.taro_page#${id}`)
         : document.querySelector('.taro_page') ||
       document.querySelector('.taro_router')) as HTMLDivElement
 

package/src/api/utils/index.ts

@@ -12,7 +12,7 @@ export function shouldBeObject (target: unknown) {
   }
 }
 
-export function findDOM (inst): TaroElement | HTMLElement | undefined {
+export function findDOM (inst?): TaroElement | HTMLElement | undefined {
   const runtimeHooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
   if (inst) {
@@ -88,30 +88,51 @@ export function serializeParams (params) {
 export function temporarilyNotSupport (apiName) {
   return () => {
     const errMsg = `暂时不支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 
 export function weixinCorpSupport (apiName) {
   return () => {
     const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 
 export function permanentlyNotSupport (apiName) {
   return () => {
     const errMsg = `不支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 

package/src/api/wxml/nodesRef.ts

@@ -1,4 +1,3 @@
-import { temporarilyNotSupport } from '../utils'
 import { SelectorQuery } from './selectorQuery'
 
 export class NodesRef implements Taro.NodesRef {
@@ -14,9 +13,17 @@ export class NodesRef implements Taro.NodesRef {
     this._single = single
   }
 
-  context = temporarilyNotSupport('NodesRef.context') as unknown as Taro.NodesRef['context']
+  context (cb) {
+    const { _selector, _component, _single, _selectorQuery } = this
+    _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb)
+    return _selectorQuery
+  }
 
-  node = temporarilyNotSupport('NodesRef.node') as unknown as Taro.NodesRef['node']
+  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

package/src/api/wxml/selectorQuery.ts

@@ -1,4 +1,5 @@
 import Taro from '@tarojs/api'
+import { CanvasContext } from '../canvas/CanvasContext'
 import { findDOM } from '../utils'
 import { NodesRef } from './nodesRef'
 
@@ -16,33 +17,77 @@ 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 isViewport = selector === '.taro_page'
+  const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields
   const res: any = {}
 
-  if (id) res.id = dom.id
-  if (dataset) res.dataset = Object.assign({}, dom.dataset)
-  if (rect) {
-    if (!isViewport) {
-      res.left = left
-      res.right = right
-      res.top = top
-      res.bottom = bottom
+  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 {
-      res.left = 0
-      res.right = 0
-      res.top = 0
-      res.bottom = 0
+      // 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 (size) {
-    if (!isViewport) {
-      res.width = width
-      res.height = height
-    } else {
-      res.width = dom.clientWidth
-      res.height = dom.clientHeight
+  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) {
@@ -147,7 +192,7 @@ export class SelectorQuery implements Taro.SelectorQuery {
   }
 
   selectViewport () {
-    return new NodesRef('html', this, true)
+    return new NodesRef('.taro_page', this, true)
   }
 
   exec (cb) {

package/src/index.ts

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