@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.0 → 4.0.0-alpha.10

package/dist/apis/ui/pull-down-refresh.ts

@@ -1,14 +1,17 @@
 import { Current } from '@tarojs/runtime'
 
-import { callAsyncSuccess } from '../utils'
+import { callAsyncFail, callAsyncSuccess } from '../utils'
 
 import type Taro from '@tarojs/taro/types'
 
 export const startPullDownRefresh: typeof Taro.startPullDownRefresh = function (options) {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     const taro = (Current as any).taro
     const page = taro.getCurrentInstance().page
 
+    if (!page) {
+      return callAsyncFail(reject, { errMsg: 'stopPullDownRefresh:fail' }, options)
+    }
     if (page.isRefreshing instanceof Array) {
       const index = page.tabBarCurrentIndex || 0
       page.isRefreshing[index] = true
@@ -23,10 +26,13 @@ export const startPullDownRefresh: typeof Taro.startPullDownRefresh = function (
 }
 
 export const stopPullDownRefresh: typeof Taro.stopPullDownRefresh = function (options) {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     const taro = (Current as any).taro
     const page = taro.getCurrentInstance().page
 
+    if (!page) {
+      return callAsyncFail(reject, { errMsg: 'stopPullDownRefresh:fail' }, options)
+    }
     if (page.isRefreshing instanceof Array) {
       const index = page.tabBarCurrentIndex || 0
       page.isRefreshing[index] = false

package/dist/apis/ui/scroll/index.ts

@@ -34,8 +34,8 @@ export const pageScrollTo: typeof Taro.pageScrollTo = (options) => {
     const page = taro.getCurrentInstance().page
 
     let scrollValue = -1
-    let scroller = page.scroller
-    const currentPageNode = getPageScrollerOrNode(page.node, page)
+    let scroller = getPageScrollerOrNode(page?.scroller, page)
+    const currentPageNode = getPageScrollerOrNode(page?.node, page)
 
     if (scrollTop || typeof scrollTop === 'number') {
       scrollValue = scrollTop
@@ -66,14 +66,14 @@ export const pageScrollTo: typeof Taro.pageScrollTo = (options) => {
         scrollValue = areaInfo.globalPosition.y + yOffset + pxTransformHelper(offsetTop, 'px', true)
       }
     }
-    const { xOffset } = scroller.currentOffset()
-
-    if (scrollValue === -1) {
+    if (!scroller || scrollValue === -1) {
       return handle.fail({
         errMsg: '请检查传入的 scrollTop 或 selector 是否合法'
       }, { resolve, reject })
     }
 
+    const { xOffset } = scroller.currentOffset()
+
     try {
       scroller.scrollTo({
         xOffset,

package/dist/apis/ui/tab-bar.ts

@@ -22,7 +22,7 @@ const toggleTabBar = function<T extends ToggleAPIs['type']> (type: T): Extract<T
     return new Promise((resolve, reject) => {
       const taro = (Current as any).taro
       const page = taro.getCurrentInstance().page
-      const currentData = page._data?.taroTabBar || page.tabBar
+      const currentData = page?._data?.taroTabBar || page?.tabBar
       const res = { errMsg: `${type}TabBar:ok` }
       const error = { errMsg: `${type}TabBar:fail not TabBar page` }
 
@@ -49,7 +49,7 @@ export const setTabBarStyle: typeof Taro.setTabBarStyle = function (options = {}
   return new Promise((resolve, reject) => {
     const taro = (Current as any).taro
     const page = taro.getCurrentInstance().page
-    const currentData = page._data?.taroTabBar || page.tabBar
+    const currentData = page?._data?.taroTabBar || page?.tabBar
     const res = { errMsg: 'setTabBarStyle:ok' }
     const error = { errMsg: 'setTabBarStyle:fail not TabBar page' }
 
@@ -74,7 +74,7 @@ export const setTabBarItem: typeof Taro.setTabBarItem = function (options) {
   return new Promise((resolve, reject) => {
     const taro = (Current as any).taro
     const page = taro.getCurrentInstance().page
-    const currentData = page._data?.taroTabBar || page.tabBar
+    const currentData = page?._data?.taroTabBar || page?.tabBar
     const res = { errMsg: 'setTabBarItem:ok' }
     const error = { errMsg: 'setTabBarItem:fail not TabBar page' }
 

package/dist/apis/utils/index.ts

@@ -19,7 +19,7 @@ export function temporarilyNotSupport (name: string, recommended?: string) {
   return (option = {}, ...args) => {
     const { success, fail, complete } = option as any
     const handle = new MethodHandler({ name, success, fail, complete })
-    let errMsg = '暂时不支持 API'
+    let errMsg = `暂时不支持 API ${name}`
     if (recommended) {
       errMsg += `, 请使用 ${recommended}`
     }

package/dist/apis/wxml/IntersectionObserver.ts

@@ -19,31 +19,33 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
   constructor(component: any, options: Taro.createIntersectionObserver.Option = {}) {
     const taro = (Current as any).taro
     const page = taro.getCurrentInstance().page
-    const currentPage = getPageScrollerOrNode(page.node, page)
-    this._component = component || currentPage
+
+    this._component = component || getPageScrollerOrNode(page?.node, page)
     Object.assign(this._options, options)
   }
 
   public disconnect (): void {
-    if (this._observerNodes) {
+    if (this._observerNodes && this._component) {
       if (this._observerNodes instanceof Array) {
         this._observerNodes.forEach((n: TaroElement & any) => {
           disconnectEvent(n, VISIBLE_CHANGE_EVENT_NAME)
           // @ts-ignore
-          n._nodeInfo?.thresholds = null
+          n._nodeInfo.thresholds = null
         })
       } else {
         disconnectEvent(this._observerNodes, VISIBLE_CHANGE_EVENT_NAME)
         // @ts-ignore
         if (this._observerNodes._nodeInfo) {
           // @ts-ignore
-          this._observerNodes._nodeInfo?.thresholds = null
+          this._observerNodes._nodeInfo.thresholds = null
         }
       }
     }
   }
 
   public observe (targetSelector: string, callback: Taro.IntersectionObserver.ObserveCallback): void {
+    if (!this._component) return
+
     const { observeAll, thresholds } = this._options
     const node = findChildNodeWithDFS(this._component, targetSelector, observeAll)
     this._observerNodes = node
@@ -52,20 +54,24 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
       if (node instanceof Array) {
         node.forEach(n => {
           // @ts-ignore
-          n._nodeInfo?.thresholds = thresholds
+          n._nodeInfo.thresholds = thresholds
 
           setNodeEventCallbackAndTriggerComponentUpdate(n, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
-            callback(this.handleResult(isVisible, currentRatio))
+            callback(this.handleResult(isVisible, currentRatio, n))
           })
         })
       } else {
         // @ts-ignore
-        node._nodeInfo?.thresholds = thresholds
+        node._nodeInfo.thresholds = thresholds
 
         setNodeEventCallbackAndTriggerComponentUpdate(node, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
-          callback(this.handleResult(isVisible, currentRatio))
+          callback(this.handleResult(isVisible, currentRatio, node))
         })
       }
+    } else {
+      callback({
+        errMsg: 'IntersectionObserver.observe:fail cannot find the node for selector.'
+      })
     }
   }
 
@@ -80,8 +86,10 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
   }
 
   // @ts-ignore
-  private handleResult (isVisible: boolean, currentRatio: number): Taro.IntersectionObserver.ObserveCallbackResult {
+  private handleResult (isVisible: boolean, currentRatio: number, node: TaroElement): Taro.IntersectionObserver.ObserveCallbackResult {
     const result = {
+      id: node.id,
+      dataset: node.dataset,
       intersectionRatio: currentRatio,
       // TODO 未做，等待能拿到element的info信息
       boundingClientRect: {

package/dist/apis/wxml/index.ts

@@ -13,3 +13,5 @@ export const createIntersectionObserver: typeof Taro.createIntersectionObserver
 }
 
 export const createMediaQueryObserver = /* @__PURE__ */ temporarilyNotSupport('createMediaQueryObserver')
+
+export { IntersectionObserver }

package/dist/apis/wxml/selectorQuery.ts

@@ -112,7 +112,7 @@ function filter (fields, dom) {
     return res
   }
   if (context) {
-    // TODO: 暂未实现获取 context
+    // TODO: 暂未实现获取  context
     // const typeName = dom.type
     // if (/^video/i.test(typeName)) {
     //   return { context: dom }
@@ -179,37 +179,50 @@ function filter (fields, dom) {
 
 function querySelector (selector, selectAll) {
   if (typeof selector === 'string') {
-    return parseHandler(selector, selectAll)
+    return selector.split(',').reduce((prev, current) => {
+      const item = current.trim()
+
+      return prev.concat(parseHandler(item, selectAll))
+    }, [])
   }
-  return null
+  return []
 }
 
 function queryBat (queue, cb) {
   const result: any = []
   const taro = (Current as any).taro
   const page = taro.getCurrentInstance().page
-  const element = getPageScrollerOrNode(page.node, page)
+  const element = getPageScrollerOrNode(page?.node, page)
 
-  if (element == null) return null
+  if (!element) return null
 
   arr = []
   traversalDFSDom(element)
-  queue.forEach(item => {
+  queue.forEach((item) => {
     const { selector, single, fields } = item
-    const nodeList = querySelector(selector, !single)
 
-    result.push(nodeList.map(dom => {
+    if (single) {
+      const dom = querySelector(selector, !single)[0]
       // eslint-disable-next-line no-async-promise-executor
-      return new Promise(async resolve => {
+      result.push(new Promise(async resolve => {
         await setNodeEventCallbackAndTriggerComponentUpdate(dom, AREA_CHANGE_EVENT_NAME, null, true)
-
         resolve(filter(fields, dom))
-      })
-    }))
+      }))
+    } else {
+      const nodeList = querySelector(selector, !single)
+      result.push(nodeList.map(dom => {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async resolve => {
+          await setNodeEventCallbackAndTriggerComponentUpdate(dom, AREA_CHANGE_EVENT_NAME, null, true)
+
+          resolve(filter(fields, dom))
+        })
+      }))
+    }
   })
 
   Promise.all(result.map(item => {
-    return Promise.all(item)
+    return item instanceof Array ? Promise.all(item) : item
   })).then(data => {
     cb(data)
   })

package/dist/components-harmony-ets/button.ets

@@ -1,41 +1,11 @@
 import { eventHandler, createTaroEvent, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
-import { createLazyChildren } from './render'
+import commonStyleModify from './style'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent, TaroButtonElement, TaroStyleType } from '@tarojs/runtime'
 
-@Extend(Button)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .width(style.width)
-  .height(style.height)
-  .padding({
-    top: style.padding?.top,
-    left: style.padding?.left || 10,
-    right: style.padding?.right || 10,
-    bottom: style.padding?.bottom,
-  })
-  .margin(style.margin)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .clip(style.clip)
-}
-
 @Extend(Button)
 function themeStyles(style: TaroStyleType) {
   .fontColor(style.color)
@@ -71,22 +41,37 @@ function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
   const type: string = _attrs.type || 'default'
 
   return {
-    borderColor: hmStyle.borderColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
-    borderWidth: hmStyle.borderWidth || 1,
-    borderRadius: hmStyle.borderRadius || convertNumber2VP(10),
+    borderColor: {
+      top: hmStyle.borderTopColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      right: hmStyle.borderRightColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      bottom: hmStyle.borderBottomColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      left: hmStyle.borderLeftColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background)
+    },
+    borderWidth: {
+      top: hmStyle.borderTopWidth || 1,
+      right: hmStyle.borderRightWidth || 1,
+      bottom: hmStyle.borderBottomWidth || 1,
+      left: hmStyle.borderLeftWidth || 1
+    },
+    borderRadius: {
+      topLeft: hmStyle.borderTopLeftRadius || convertNumber2VP(10),
+      topRight: hmStyle.borderTopRightRadius || convertNumber2VP(10),
+      bottomLeft: hmStyle.borderBottomLeftRadius || convertNumber2VP(10),
+      bottomRight: hmStyle.borderBottomRightRadius || convertNumber2VP(10)
+    },
     opacity: isDisabled ? 0.4 : hmStyle.opacity,
     backgroundColor: isPlain ? Color.Transparent : (hmStyle.backgroundColor || BUTTON_THEME_COLOR.get(type).background),
     color: hmStyle.color || getButtonColor(node, BUTTON_THEME_COLOR.get(type).text),
   }
 }
 
-function getButtonWidth (node: TaroButtonElement) {
+function getButtonWidth (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
 
   return isMini ? convertNumber2VP(120) : '100%'
 }
 
-function getButtonHeight (node: TaroButtonElement) {
+function getButtonHeight (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
 
   return isMini ? convertNumber2VP(60) : convertNumber2VP(92)
@@ -108,38 +93,53 @@ function getButtonMinHeight (node: TaroButtonElement): string | number | undefin
   return getButtonHeight(node)
 }
 
-@Builder
-export default function TaroButton (node: TaroButtonElement) {
-  Button({ stateEffect: !node._attrs.disabled }) {
-    Row() {
-      if (node._attrs.loading) {
-        LoadingProgress()
-        .width(20).height(20)
-        .color(getThemeAttributes(node).color)
-      }
-      createLazyChildren(node)
+@Component
+export default struct TaroButton {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
+  @ObjectLink node: TaroButtonElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
     }
   }
-  .themeStyles(getThemeAttributes(node))
-  .attrs(getNormalAttributes(node))
-  .constraintSize({
-    minWidth: node.hmStyle?.constraintSize?.minWidth || getButtonMinWidth(node),
-    minHeight: node.hmStyle?.constraintSize?.minHeight || getButtonMinHeight(node),
-    maxWidth: node.hmStyle?.constraintSize?.maxWidth,
-    maxHeight: node.hmStyle?.constraintSize?.maxHeight,
-  })
-  .type(ButtonType.Normal)
-  .onClick((e: ClickEvent) => {
-    if (['submit', 'reset'].includes(node._attrs.formType)) {
-      const eventName = node._attrs.formType + '-btn'
-      const event: TaroEvent = createTaroEvent(eventName, {}, node)
-      eventHandler(event, eventName, node)
+
+  build() {
+    Button({ stateEffect: !this.node._attrs.disabled }) {
+      if (this.node._attrs.loading) {
+        Row() {
+          LoadingProgress()
+            .width(20).height(20)
+            .color(getThemeAttributes(this.node).color)
+          this.createLazyChildren(this.node)
+        }
+      } else {
+        this.createLazyChildren(this.node)
+      }
     }
-    eventHandler(e, 'click', node)
-  })
-  .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-  .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-    node._nodeInfo.areaInfo = res[1]
-  }))
-  .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .constraintSize({
+      minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
+      minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),
+      maxWidth: this.node.hmStyle?.maxWidth,
+      maxHeight: this.node.hmStyle?.maxHeight,
+    })
+    .type(ButtonType.Normal)
+    .onClick((e: ClickEvent) => {
+      if (this.node._attrs.formType && ['submit', 'reset'].includes(this.node._attrs.formType)) {
+        const eventName = this.node._attrs.formType + '-btn'
+        const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
+        eventHandler(event, eventName, this.node)
+      }
+      eventHandler(e, 'click', this.node)
+    })
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      this.node._nodeInfo.areaInfo = res[1]
+    }))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
 }

package/dist/components-harmony-ets/canvas.ets

@@ -0,0 +1,51 @@
+import type { TaroAny, TaroCanvasElement } from '@tarojs/runtime'
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
+import commonStyleModify from './style'
+
+@Component
+export default struct TaroCanvas {
+  @ObjectLink node: TaroCanvasElement
+  rafId: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  aboutToDisappear() {
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  }
+
+  build() {
+    Canvas(this.node._context)
+      .attributeModifier(commonStyleModify.setNode(this.node as TaroAny, {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#ffff00'
+      }).setAnimationStyle(this.overwriteStyle))
+      .onReady(() => {
+        const context = this.node._context
+
+        const draw = () => {
+          if (this.node._drawList.length) {
+            while (this.node._drawList.length) {
+              const item = this.node._drawList.shift()
+              if (item) {
+                if (typeof context[item.key] === 'function') {
+                  context[item.key](...[].concat(item.value))
+                } else {
+                  context[item.key] = item.value
+                }
+              }
+            }
+          }
+          this.rafId = requestAnimationFrame(draw)
+        }
+        draw()
+      })
+  }
+}