@tarojs/taro-h5 3.4.0-beta.2 → 3.4.0-beta.3

package/dist/types/type.js

@@ -0,0 +1,2 @@
+const TaroH5 = {};
+export default TaroH5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-h5",
-  "version": "3.4.0-beta.2",
+  "version": "3.4.0-beta.3",
   "description": "Taro h5 framework",
   "main:h5": "dist/index.js",
   "main": "dist/index.cjs.js",
@@ -10,17 +10,14 @@
     "src",
     "index.js"
   ],
-  "sideEffects": [
-    "*.scss",
-    "*.css",
-    "./src/taro/index.js"
-  ],
+  "sideEffects": false,
   "scripts": {
     "test": "jest",
     "test:dev": "jest --watch",
     "test:coverage": "jest --coverage",
-    "build": "rollup -c",
-    "dev": "rollup -cw"
+    "copy:assets": "copy src/**/*.css dist",
+    "build": "tsc & npm run copy:assets & rollup -c",
+    "dev": "tsc -w & npm run copy:assets"
   },
   "repository": {
     "type": "git",
@@ -32,14 +29,14 @@
   "author": "O2Team",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/api": "3.4.0-beta.2",
-    "@tarojs/router": "3.4.0-beta.2",
-    "@tarojs/runtime": "3.4.0-beta.2",
-    "@tarojs/taro": "3.4.0-beta.2",
+    "@tarojs/api": "3.4.0-beta.3",
+    "@tarojs/router": "3.4.0-beta.3",
+    "@tarojs/runtime": "3.4.0-beta.3",
+    "@tarojs/taro": "3.4.0-beta.3",
     "base64-js": "^1.3.0",
     "jsonp-retry": "^1.0.3",
     "mobile-detect": "^1.4.2",
     "whatwg-fetch": "^3.4.0"
   },
-  "gitHead": "ac3eb29f11aec15d25e061775d9e970efabc2c98"
+  "gitHead": "2ef7e8c10c9e5784e98bb1ad3a803d5fd6a46c8b"
 }

package/src/api/canvas/CanvasContext.ts

@@ -16,12 +16,17 @@ export class CanvasContext implements Taro.CanvasContext {
   __raw__: CanvasRenderingContext2D
   actions: IAction[] = []
 
+  constructor (canvas, ctx) {
+    this.canvas = canvas
+    this.ctx = ctx
+  }
+
   set ctx (e: CanvasRenderingContext2D) {
     this.__raw__ = e
   }
 
   get ctx () {
-    return this.__raw__
+    return this.__raw__ || {}
   }
 
   canvas: HTMLCanvasElement
@@ -30,13 +35,11 @@ export class CanvasContext implements Taro.CanvasContext {
     this.actions.length = 0
   }
 
-  protected enqueueActions (func: IAction['func']) {
-    return (...args) => {
-      this.actions.push({
-        func,
-        args
-      })
-    }
+  protected enqueueActions (func: IAction['func'], ...args) {
+    this.actions.push({
+      func,
+      args
+    })
   }
 
   set fillStyle (e) { this.enqueueActions(() => { this.ctx.fillStyle = e }) }
@@ -82,13 +85,13 @@ export class CanvasContext implements Taro.CanvasContext {
   get filter () { return this.ctx.filter }
   /** 小程序文档中不包括 ↑↑↑ */
 
-  arc = this.enqueueActions(this.ctx.arc)
-  arcTo = this.enqueueActions(this.ctx.arcTo)
-  beginPath = this.enqueueActions(this.ctx.beginPath)
-  bezierCurveTo = this.enqueueActions(this.ctx.bezierCurveTo)
-  clearRect = this.enqueueActions(this.ctx.clearRect)
-  clip = this.enqueueActions(this.ctx.clip)
-  closePath = this.enqueueActions(this.ctx.closePath)
+  arc (...args) { return this.enqueueActions(this.ctx.arc, ...args) }
+  arcTo (...args) { return this.enqueueActions(this.ctx.arcTo, ...args) }
+  beginPath (...args) { return this.enqueueActions(this.ctx.beginPath, ...args) }
+  bezierCurveTo (...args) { return this.enqueueActions(this.ctx.bezierCurveTo, ...args) }
+  clearRect (...args) { return this.enqueueActions(this.ctx.clearRect, ...args) }
+  clip (...args) { return this.enqueueActions(this.ctx.clip, ...args) }
+  closePath (...args) { return this.enqueueActions(this.ctx.closePath, ...args) }
 
   createPattern (image: string, repetition: keyof Taro.CanvasContext.repetition): void {
     return this.createPattern(image, repetition)
@@ -139,17 +142,17 @@ export class CanvasContext implements Taro.CanvasContext {
     })
   }
 
-  fill = this.enqueueActions(this.ctx.fill)
-  fillRect = this.enqueueActions(this.ctx.fillRect)
-  fillText = this.enqueueActions(this.ctx.fillText)
-  lineTo = this.enqueueActions(this.ctx.lineTo)
-  moveTo = this.enqueueActions(this.ctx.moveTo)
-  quadraticCurveTo = this.enqueueActions(this.ctx.quadraticCurveTo)
-  rect = this.enqueueActions(this.ctx.rect)
-  restore = this.enqueueActions(this.ctx.restore)
-  rotate = this.enqueueActions(this.ctx.rotate)
-  save = this.enqueueActions(this.ctx.save)
-  scale = this.enqueueActions(this.ctx.scale)
+  fill (...args) { return this.enqueueActions(this.ctx.fill, ...args) }
+  fillRect (...args) { return this.enqueueActions(this.ctx.fillRect, ...args) }
+  fillText (...args) { return this.enqueueActions(this.ctx.fillText, ...args) }
+  lineTo (...args) { return this.enqueueActions(this.ctx.lineTo, ...args) }
+  moveTo (...args) { return this.enqueueActions(this.ctx.moveTo, ...args) }
+  quadraticCurveTo (...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args) }
+  rect (...args) { return this.enqueueActions(this.ctx.rect, ...args) }
+  restore (...args) { return this.enqueueActions(this.ctx.restore, ...args) }
+  rotate (...args) { return this.enqueueActions(this.ctx.rotate, ...args) }
+  save (...args) { return this.enqueueActions(this.ctx.save, ...args) }
+  scale (...args) { return this.enqueueActions(this.ctx.scale, ...args) }
 
   setFillStyle (color: string | CanvasGradient): void {
     this.enqueueActions(() => { this.ctx.fillStyle = color })
@@ -207,12 +210,12 @@ export class CanvasContext implements Taro.CanvasContext {
     this.textBaseline = TextBaseLineMap[textBaseline] || 'alphabetic'
   }
 
-  setTransform = this.enqueueActions(this.ctx.setTransform)
-  stroke = this.enqueueActions(this.ctx.stroke)
-  strokeRect = this.enqueueActions(this.ctx.strokeRect)
-  strokeText = this.enqueueActions(this.ctx.strokeText)
-  transform = this.enqueueActions(this.ctx.transform)
-  translate = this.enqueueActions(this.ctx.translate)
+  setTransform (...args) { return this.enqueueActions(this.ctx.setTransform, ...args) }
+  stroke (...args) { return this.enqueueActions(this.ctx.stroke, ...args) }
+  strokeRect (...args) { return this.enqueueActions(this.ctx.strokeRect, ...args) }
+  strokeText (...args) { return this.enqueueActions(this.ctx.strokeText, ...args) }
+  transform (...args) { return this.enqueueActions(this.ctx.transform, ...args) }
+  translate (...args) { return this.enqueueActions(this.ctx.translate, ...args) }
 
   measureText (text: string): TextMetrics {
     return this.measureText(text)

package/src/api/canvas/createCanvasContext.ts

@@ -6,10 +6,10 @@ import { CanvasContext } from './CanvasContext'
  * 创建 canvas 的绘图上下文 CanvasContext 对象
  */
 export const createCanvasContext: typeof Taro.createCanvasContext = (canvasId, inst) => {
-  const context = new CanvasContext()
   const el = findDOM(inst) as HTMLElement
   const canvas = el?.querySelector(`canvas[canvas-id="${canvasId}"]`) as HTMLCanvasElement
-  const ctx = canvas?.getContext('2d')
+  const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D
+  const context = new CanvasContext(canvas, ctx)
   if (!ctx) return context
   context.canvas = canvas
   context.ctx = ctx

package/src/api/location/chooseLocation.ts

@@ -28,13 +28,13 @@ function createLocationChooser (handler, key = LOCATION_APIKEY) {
   }
 
   function back () {
-    handler({ errMsg: 'cancel' })
     hide()
+    handler({ errMsg: 'cancel' })
   }
 
   function submit () {
-    handler()
     hide()
+    handler()
   }
 
   function remove () {

package/src/api/media/audio/index.ts

@@ -67,26 +67,26 @@ class InnerAudioContext implements Taro.InnerAudioContext {
     }
   }
 
-  onCanplay = (callback = () => {}) => this.Instance?.addEventListener('oncanplay', callback)
-  onPlay = (callback = () => {}) => this.Instance?.addEventListener('onplay', callback)
-  onPause = (callback = () => {}) => this.Instance?.addEventListener('onpause', callback)
+  onCanplay = (callback = () => {}) => this.Instance?.addEventListener('canplay', callback)
+  onPlay = (callback = () => {}) => this.Instance?.addEventListener('play', callback)
+  onPause = (callback = () => {}) => this.Instance?.addEventListener('pause', callback)
   onStop = (callback = () => {}) => this.stopStack.add(callback)
-  onEnded = (callback = () => {}) => this.Instance?.addEventListener('onended', callback)
-  onTimeUpdate = (callback = () => {}) => this.Instance?.addEventListener('ontimeUpdate', callback)
+  onEnded = (callback = () => {}) => this.Instance?.addEventListener('ended', callback)
+  onTimeUpdate = (callback = () => {}) => this.Instance?.addEventListener('timeupdate', callback)
   onError = (callback?: ((res: Taro.InnerAudioContext.onErrorDetail) => void)) => this.errorStack.add(callback)
-  onWaiting = (callback = () => {}) => this.Instance?.addEventListener('onwaiting', callback)
-  onSeeking = (callback = () => {}) => this.Instance?.addEventListener('onseeking', callback)
-  onSeeked = (callback = () => {}) => this.Instance?.addEventListener('onseeked', callback)
-  offCanplay = (callback = () => {}) => this.Instance?.removeEventListener('offcanplay', callback)
-  offPlay = (callback = () => {}) => this.Instance?.removeEventListener('offplay', callback)
-  offPause = (callback = () => {}) => this.Instance?.removeEventListener('offpause', callback)
+  onWaiting = (callback = () => {}) => this.Instance?.addEventListener('waiting', callback)
+  onSeeking = (callback = () => {}) => this.Instance?.addEventListener('seeking', callback)
+  onSeeked = (callback = () => {}) => this.Instance?.addEventListener('seeked', callback)
+  offCanplay = (callback = () => {}) => this.Instance?.removeEventListener('canplay', callback)
+  offPlay = (callback = () => {}) => this.Instance?.removeEventListener('play', callback)
+  offPause = (callback = () => {}) => this.Instance?.removeEventListener('pause', callback)
   offStop = (callback = () => {}) => this.stopStack.remove(callback)
-  offEnded = (callback = () => {}) => this.Instance?.removeEventListener('offended', callback)
-  offTimeUpdate = (callback = () => {}) => this.Instance?.removeEventListener('offtimeUpdate', callback)
+  offEnded = (callback = () => {}) => this.Instance?.removeEventListener('ended', callback)
+  offTimeUpdate = (callback = () => {}) => this.Instance?.removeEventListener('timeupdate', callback)
   offError = (callback = () => {}) => this.errorStack.remove(callback)
-  offWaiting = (callback = () => {}) => this.Instance?.removeEventListener('offwaiting', callback)
-  offSeeking = (callback = () => {}) => this.Instance?.removeEventListener('offseeking', callback)
-  offSeeked = (callback = () => {}) => this.Instance?.removeEventListener('offseeked', callback)
+  offWaiting = (callback = () => {}) => this.Instance?.removeEventListener('waiting', callback)
+  offSeeking = (callback = () => {}) => this.Instance?.removeEventListener('seeking', callback)
+  offSeeked = (callback = () => {}) => this.Instance?.removeEventListener('seeked', callback)
 }
 
 export const stopVoice = temporarilyNotSupport('stopVoice')

package/src/api/media/image/previewImage.ts

@@ -1,4 +1,4 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/api'
 
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
@@ -14,23 +14,12 @@ export const previewImage: typeof Taro.previewImage = async (options) => {
   function loadImage (url: string, loadFail: typeof fail): Promise<Node> {
     return new Promise((resolve) => {
       const item = document.createElement('taro-swiper-item-core')
-      item.style.cssText = `
-        display: flex;
-        align-items: start;
-        justify-content: center;
-        overflow-y: scroll;
-      `
+      item.style.cssText = 'display:flex;align-items:start;justify-content:center;overflow-y:scroll;'
       const image = new Image()
       image.style.maxWidth = '100%'
       image.src = url
       const div = document.createElement('div')
-      div.style.cssText = `
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 100%;
-        min-height: 100%;
-      `
+      div.style.cssText = 'display:flex;align-items:center;justify-content:center;max-width:100%;min-height:100%;'
       div.appendChild(image)
       item.appendChild(div)
       // Note: 等待图片加载完后返回，会导致轮播被卡住
@@ -55,17 +44,7 @@ export const previewImage: typeof Taro.previewImage = async (options) => {
   const handle = new MethodHandler({ name: 'previewImage', success, fail, complete })
   const container = document.createElement('div')
   container.classList.add('preview-image')
-  container.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1050;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    outline: 0;
-    background-color: #111;
-  `
+  container.style.cssText = 'position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;overflow:hidden;outline:0;background-color:#111;'
   container.addEventListener('click', () => {
     container.remove()
   })

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

@@ -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

@@ -38,12 +38,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

@@ -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 () {

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'

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