@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.2

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -1,20 +1,33 @@
+// @ts-nocheck
 import matrix4 from '@ohos.matrix4'
 
 export interface HarmonyStyle extends TaroStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
-  maxLines?: number
+  WebkitLineClamp?: number
   letterSpacing?: number | string
 }
 
 export interface TaroStyleType {
   id?: string
 
-  padding?: Margin | Length
-  margin?: Margin | Length
+  paddingTop?: Length
+  paddingRight?: Length
+  paddingBottom?: Length
+  paddingLeft?: Length
+
+  marginTop?: Length
+  marginRight?: Length
+  marginBottom?: Length
+  marginLeft?: Length
+
   width?: Length
   height?: Length
-  constraintSize?: ConstraintSizeOptions
+
+  minHeight?: Length
+  maxHeight?: Length
+  minWidth?: Length
+  maxWidth?: Length
 
   display?: 'flex' | 'block' | 'none'
 
@@ -28,29 +41,47 @@ export interface TaroStyleType {
   flexGrow?: number
   flexShrink?: number
   alignSelf?: ItemAlign
-  direction?: FlexDirection
+  flexDirection?: FlexDirection
   justifyContent?: FlexAlign
   alignItems?: ItemAlign
-  wrap?: FlexWrap
+  flexWrap?: FlexWrap
   alignContent?: FlexAlign
 
   // background
   backgroundColor?: ResourceColor
-  backgroundImage?: ResourceStr
+  backgroundImage?: HarmonyType.Background.BackgroundImage
   backgroundRepeat?: ImageRepeat
-  backgroundImageSize?: SizeOptions | ImageSize
+  backgroundSize?: SizeOptions | ImageSize
+  backgroundPosition?: Position | Alignment
 
   // transform
   rotate?: HarmonyType.Transform.Rotate
   translate?: HarmonyType.Transform.Translate
   scale?: HarmonyType.Transform.Scale
   transform?: HarmonyType.Transform.Transform
+  transformOrigin?: HarmonyType.Transform.Origin
 
   // border
   borderWidth?: Length | EdgeWidths
+  borderLeftWidth?: Length
+  borderRightWidth?: Length
+  borderTopWidth?: Length
+  borderBottomWidth?: Length
   borderColor?: ResourceColor | EdgeColors
+  borderLeftColor?: ResourceColor
+  borderRightColor?: ResourceColor
+  borderTopColor?: ResourceColor
+  borderBottomColor?: ResourceColor
   borderStyle?: BorderStyle | EdgeStyles
+  borderLeftStyle?: BorderStyle
+  borderRightStyle?: BorderStyle
+  borderTopStyle?: BorderStyle
+  borderBottomStyle?: BorderStyle
   borderRadius?: Length | BorderRadiuses
+  borderTopLeftRadius?: Length
+  borderTopRightRadius?: Length
+  borderBottomLeftRadius?: Length
+  borderBottomRightRadius?: Length
 
   // text
   color?: ResourceColor
@@ -59,7 +90,7 @@ export interface TaroStyleType {
   fontWeight?: number | FontWeight | string
   fontFamily?: string | Resource
   lineHeight?: string | number | Resource
-  decoration?: TextDecorationType
+  textDecoration?: TextDecorationType
 
   // gradient
   linearGradient?: HarmonyType.LinearGradient
@@ -67,14 +98,14 @@ export interface TaroStyleType {
   // other
   opacity?: number | Resource
   zIndex?: number
-  clip?: boolean
+  overflow?: boolean
   focus?: boolean
 }
 
 export interface TaroTextStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
-  maxLines?: number
+  WebkitLineClamp?: number
   letterSpacing?: number | string
 }
 
@@ -103,11 +134,16 @@ export namespace HarmonyType {
     export interface backgroundImage {
       src: ResourceStr
       repeat?: ImageRepeat
+      colors?: Array<[ResourceColor, number]>
     }
     export type backgroundImageSize = SizeOptions | ImageSize
     export type backgroundImagePosition = Position | Alignment
   }
   export namespace Transform {
+    export interface Origin {
+      x?: number
+      y?: number
+    }
     export interface Rotate {
       x?: number
       y?: number

package/dist/runtime-ets/dom/stylesheet/util.ts

@@ -1,10 +1,10 @@
 // @ts-nocheck
+import matrix4 from '@ohos.matrix4'
 import { isNumber } from '@tarojs/shared'
 
 import { convertNumber2VP } from '../../'
 
 export class FlexManager {
-
   static flexAlign (value: string | number | undefined): FlexAlign {
     switch (value) {
       case 'flex-end':
@@ -22,6 +22,25 @@ export class FlexManager {
     }
   }
 
+  static reverseFlexAlign (value: FlexAlign): string {
+    switch (value) {
+      case FlexAlign.Start:
+        return 'flex-start'
+      case FlexAlign.End:
+        return 'flex-end'
+      case FlexAlign.Center:
+        return 'center'
+      case FlexAlign.SpaceBetween:
+        return 'space-between'
+      case FlexAlign.SpaceAround:
+        return 'space-around'
+      case FlexAlign.SpaceEvenly:
+        return 'space-evenly'
+      default:
+        return ''
+    }
+  }
+
   static direction (value: string): FlexDirection {
     switch (value) {
       case 'row': return FlexDirection.Row
@@ -31,6 +50,16 @@ export class FlexManager {
     }
   }
 
+  static reverseDirection (value: FlexDirection): string {
+    switch (value) {
+      case FlexDirection.Row: return 'row'
+      case FlexDirection.RowReverse: return 'row-reverse'
+      case FlexDirection.Column: return 'column'
+      case FlexDirection.ColumnReverse: return 'column-reverse'
+      default: return ''
+    }
+  }
+
   static itemAlign (value: string | number | undefined): ItemAlign {
     switch (value) {
       case 'flex-start':
@@ -48,6 +77,25 @@ export class FlexManager {
     }
   }
 
+  static reverseItemAlign (value: ItemAlign): string {
+    switch (value) {
+      case ItemAlign.Start:
+        return 'flex-start'
+      case ItemAlign.End:
+        return 'flex-end'
+      case ItemAlign.Center:
+        return 'center'
+      case ItemAlign.Stretch:
+        return 'stretch'
+      case ItemAlign.Baseline:
+        return 'baseline'
+      case ItemAlign.Auto:
+        return 'auto'
+      default:
+        return ''
+    }
+  }
+
   static justifyContent (value: string): FlexAlign {
     return FlexManager.flexAlign(value)
   }
@@ -61,7 +109,29 @@ export class FlexManager {
   }
 
   static flexWrap (value: string): FlexWrap {
-    return value === 'wrap' ? FlexWrap.Wrap : FlexWrap.NoWrap
+    switch (value) {
+      case 'nowrap':
+        return FlexWrap.NoWrap
+      case 'wrap':
+        return FlexWrap.Wrap
+      case 'wrap-reverse':
+        return FlexWrap.WrapReverse
+      default:
+        return FlexWrap.NoWrap
+    }
+  }
+
+  static reverseFlexWrap (value: FlexWrap): string {
+    switch (value) {
+      case FlexWrap.NoWrap:
+        return 'nowrap'
+      case FlexWrap.Wrap:
+        return 'wrap'
+      case FlexWrap.WrapReverse:
+        return 'wrap-reverse'
+      default:
+        return 'nowrap'
+    }
   }
 
   static alignContent (style: Record<string, string | number> = {}): FlexAlign | undefined {
@@ -93,6 +163,32 @@ export class FlexManager {
   }
 }
 
+
+export class BORDER_STYLE_MAP {
+  static solid = BorderStyle.Solid
+  static dotted = BorderStyle.Dotted
+  static dashed = BorderStyle.Dashed
+
+  static get(type: string): BorderStyle {
+    switch (type) {
+      case 'dotted': return BorderStyle.Dotted
+      case 'dashed': return BorderStyle.Dashed
+      default: return BorderStyle.Solid
+    }
+  }
+
+  static reverse(type: BorderStyle): string {
+    switch (type) {
+      case BorderStyle.Dotted: return 'dotted'
+      case BorderStyle.Dashed: return 'dashed'
+      case BorderStyle.Solid: return 'solid'
+      default: return ''
+    }
+  
+  }
+}
+
+
 export function getNodeMarginOrPaddingData (dataValue: string) {
   let res: any = {}
   if (dataValue) {
@@ -114,10 +210,7 @@ export function getNodeMarginOrPaddingData (dataValue: string) {
         break
     }
     Object.keys(res).forEach(key => {
-      const exec = `${res[key]}`.match(/(\d+)(px)$/)
-      if (exec && values.length > 1) {
-        res[key] = getUnit(+exec[1])
-      }
+      res[key] = getUnit(res[key]) || 0
     })
   }
   return res
@@ -125,10 +218,39 @@ export function getNodeMarginOrPaddingData (dataValue: string) {
 
 
 export function getUnit (val) {
+  // 空的字符串代表 Reconciler remove 了这个 prop，不进行后面的逻辑了
+  if (val === '') return val
+
   if (/\d+(vp)$/.test(val)) {
     return val
-  } else if (isNumber(val) || /\d+px$/.test(val)) {
+  } else if (isNumber(val)) {
     return convertNumber2VP(parseFloat(val))
   }
+  if (val) {
+    // 匹配vw\vh
+    const exec = val.match(/(\d+)(vw|vh|px)$/)
+    if (exec) {
+      const [, num, unit] = exec
+      return convertNumber2VP(parseFloat(num), unit)
+    }
+  }
   return val
 }
+
+export function getTransform(transform) {
+  if (transform) {
+    return transform.reduce((res, item) => {
+      switch (item.type) {
+        case 'Translate': return res.translate(item.value)
+        case 'Scale': return res.scale(item.value)
+        case 'Rotate': return res.rotate(item.value)
+        case 'Matrix': return res.combine(matrix4.init(item.value))
+      }
+      return res
+    }, matrix4.identity())
+  }
+}
+
+export function capitalizeFirstLetter (str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package/dist/runtime-ets/index.ts

@@ -9,11 +9,9 @@ export * from './bom/window'
 export * from './dom/element'
 export * from './dom/event'
 export * from './dom/node'
-export * from './dom/text'
 export * from './dom/stylesheet'
 export * from './interface'
 export * from './utils'
-export * from './utils/bind'
 export * from './utils/info'
-export { URLSearchParams, eventSource } from '@tarojs/runtime/dist/runtime.esm'
+export { URLSearchParams, eventSource, Events } from '@tarojs/runtime/dist/runtime.esm'
 export { hooks } from '@tarojs/shared'

package/dist/runtime-ets/interface/event.ts

@@ -4,6 +4,7 @@ export interface EventOptions {
   [x: string]: any
 }
 
-export interface EventHandler extends Function {
+export interface EventHandler<T = any, R = void> {
+  (...args: T[]): R
   _stop?: boolean
 }

package/dist/runtime-ets/utils/index.ts

@@ -1,11 +1,15 @@
+import _display from '@ohos.display'
 import { pxTransformHelper } from '@tarojs/taro'
 
 import { NodeType } from '../dom/node'
+import convertWebStyle2HmStyle from '../dom/stylesheet/covertWeb2Hm'
 
 import type { CSSProperties } from 'react'
-import type { TaroElement } from '../dom/element'
+import type { TaroElement } from '../dom/element/element'
 import type { TaroNode } from '../dom/node'
 
+const display = _display.getDefaultDisplaySync()
+
 export function isElement (node: TaroNode): node is TaroElement {
   return node.nodeType === NodeType.ELEMENT_NODE
 }
@@ -18,7 +22,6 @@ export function isElement (node: TaroNode): node is TaroElement {
 export function isParentBinded (node: TaroElement | null, type: string): boolean {
   let res = false
 
-  // TODO: 当前 node 结构没有 root，因此不作判断，后续可根据情况添加 root 条件
   while (node?.parentElement) {
     if (node.parentElement.__listeners[type]?.length) {
       res = true
@@ -35,7 +38,10 @@ export function convertNumber2PX (value: number) {
   return pxTransformHelper(value, 'vp')
 }
 
-export function convertNumber2VP (value: number) {
+export function convertNumber2VP (value: number, unit = 'px') {
+  if (unit === 'vw' || unit === 'vh') {
+    return (value / 100 * (unit === 'vw' ? display.width: display.height)) + 'px'
+  }
   return pxTransformHelper(value, 'vp')
 }
 
@@ -48,7 +54,11 @@ export function calcDynamicStyle (styleSheet: Record<string, CSSProperties>, cla
       obj.push(styleSheet[className])
     }
   }
-  obj.push(style)
+
+  if (style) {
+    obj.push(convertWebStyle2HmStyle(style))
+  }
+  
   return Object.assign.apply(null, [{}].concat(obj))
 }
 
@@ -84,10 +94,10 @@ export function bindFn (fn: any, ctx: any, ...args: any) {
 
 // 使用深度优先遍历寻找节点树中对应的子节点，且只需要找到第一个
 // 通过 selector 判断是 id 还是 selector，从 node 的 id 和 className 属性中寻找
-export function findChildNodeWithDFS<T extends TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll: true): TaroElement[] | null;
-export function findChildNodeWithDFS<T extends TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll?: false): TaroElement | null;
-export function findChildNodeWithDFS<T extends TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll: boolean): TaroElement[] | TaroElement | null;
-export function findChildNodeWithDFS<T extends TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll): TaroElement[] | TaroElement | null {
+export function findChildNodeWithDFS<T extends TaroElement = TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll: true): T[] | null;
+export function findChildNodeWithDFS<T extends TaroElement = TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll?: false): T | null;
+export function findChildNodeWithDFS<T extends TaroElement = TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll: boolean): T[] | T | null;
+export function findChildNodeWithDFS<T extends TaroElement = TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll): T[] | T | null {
   const queue = [node]
 
   const nodeList: TaroElement[] = []

package/dist/runtime-ets/utils/info.ts

@@ -1,6 +1,6 @@
 import { isFunction } from '@tarojs/shared'
 
-import type { TaroElement } from '../dom/element'
+import type { TaroElement } from '../dom/element/element'
 
 export const AREA_CHANGE_EVENT_NAME = 'areaChange'
 export const VISIBLE_CHANGE_EVENT_NAME = 'visibleChange'
@@ -20,34 +20,23 @@ export function createEventTapName (eventName: string) {
 export const disconnectEvent = (node: TaroElement, eventName: string) => {
   if (!node) return null
 
-  const id = node._nid
-  const component = node._instance
-
   try {
-    component.nodeInfoMap[id].eventMap[createEventTapName(eventName)] = false
+    node._nodeInfo.eventMap[createEventTapName(eventName)] = false
   } catch (e) {
     console.warn(`disconnectEvent ${eventName} error: `, e)
   }
 }
 
-export function getComponentEventCallback (node: TaroElement, eventName: string, callback?: (data: {component: any, eventResult: any}) => void) {
-  if (!node || !node?._instance) return null
-
-  const id = node._nid
-  const component = node?._instance
+export function getComponentEventCallback (node: TaroElement, eventName: string, callback?: (data: any) => void) {
+  if (!node) return null
 
-  if (component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) {
+  if (node._nodeInfo?.eventMap?.[createEventTapName(eventName)]) {
     return (...eventResult: any[]) => {
-      if (!component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) return
-
-      const res = {
-        component,
-        eventResult
-      }
+      if (!node._nodeInfo?.eventMap?.[createEventTapName(eventName)]) return
 
-      callback && callback.call(component, res)
+      callback && callback(eventResult)
 
-      node?.[createEventOnName(eventName)]?.(res)
+      node?.[createEventOnName(eventName)]?.(eventResult)
     }
   }
 
@@ -56,33 +45,27 @@ export function getComponentEventCallback (node: TaroElement, eventName: string,
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 function tapCallbackToNodeAndUpdate (node: TaroElement, eventName: string, callback: Function) {
-  const id = node._nid
-
-  node._instance.nodeInfoMap[id].eventMap[createEventTapName(eventName)] = true
-  node[createEventOnName(eventName)] = ({ eventResult }) => {
+  node._nodeInfo.eventMap[createEventTapName(eventName)] = true
+  node[createEventOnName(eventName)] = (eventResult) => {
     callback && callback(...eventResult)
   }
 
-  // 是半编译模式的节点但没有自主更新权，需要父节点触发更新
-  if (!node._isDynamicNode && node._isCompileMode) {
+  if (!node._isDynamicNode || !node._isCompileMode) {
     node.updateComponent()
   }
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export async function setNodeEventCallbackAndTriggerComponentUpdate (node: TaroElement, eventName: string, callback: Function, isAsync = false) {
-  const id = node._nid
-  const instance = node._instance
-
   if (isAsync) {
     // 阻塞函数执行，等待监听节点绑定上的回调函数
-    if (!instance.nodeInfoMap[id].eventMap[createEventTapName(eventName)]) {
+    if (!node._nodeInfo.eventMap[createEventTapName(eventName)]) {
       let onEventPromiseResolve
       const eventPromise = new Promise(resolve => {
         onEventPromiseResolve = resolve
       })
 
-      instance.nodeInfoMap[id].promiseMap[eventName] = eventPromise
+      node._nodeInfo.promiseMap[eventName] = eventPromise
       tapCallbackToNodeAndUpdate(node, eventName, (...eventResult) => {
         callback && callback(...eventResult)
 
@@ -90,39 +73,30 @@ export async function setNodeEventCallbackAndTriggerComponentUpdate (node: TaroE
       })
     }
 
-    await instance.nodeInfoMap[id].promiseMap[eventName]
+    await node._nodeInfo.promiseMap[eventName]
   } else {
     tapCallbackToNodeAndUpdate(node, eventName, callback)
   }
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export function bindAttributesCallback (node: TaroElement, attributeName: string, callback: Function) {
+export function bindAttributesCallback (node: TaroElement, _: string, callback: Function) {
   if (!node) return
 
-  const id = node._nid
-  const component = node._instance
-
-  component.nodeInfoMap[id].attributeCallback[attributeName] = callback
+  node._nodeInfo = callback
 }
 
 export function triggerAttributesCallback (node, attributeName) {
   if (!node) return
 
-  const id = node._nid
   const value = node._attrs[attributeName]
-
-  return node.awaitAppear.then(() => {
-    const component = node._instance
-    const cb = component.nodeInfoMap[id].attributeCallback[attributeName]
+  const cb = node._nodeInfo.attributeCallback[attributeName]
     
-    isFunction(cb) && cb(value)
-  })
+  isFunction(cb) && cb(value)
 }
 
-export function initComponentNodeInfo (component: any, node: TaroElement) {
-  component.nodeInfoMap[node._nid] = {}
-  component.nodeInfoMap[node._nid].eventMap = {}
-  component.nodeInfoMap[node._nid].promiseMap = {}
-  component.nodeInfoMap[node._nid].attributeCallback = {}
+export function initComponentNodeInfo (node: TaroElement) {
+  node._nodeInfo.eventMap = {}
+  node._nodeInfo.promiseMap = {}
+  node._nodeInfo.attributeCallback = {}
 }

package/dist/runtime-framework/react/app.ts

@@ -1,7 +1,5 @@
-// eslint-disable-next-line import/no-duplicates
-import { Current, document } from '@tarojs/runtime'
-// eslint-disable-next-line import/no-duplicates
-import { eventCenter } from '@tarojs/runtime/dist/runtime.esm'
+import { Current, document } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
+import { AppInstance, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
 
 import { setReconciler } from './connect'
 import { injectPageInstance } from './page'
@@ -28,8 +26,11 @@ const pageKeyId = incrementId()
 
 export function connectReactPage (
   R: typeof React,
-  id: string
+  id: string,
+  getCtx: () => any
 ) {
+  const ctx = getCtx?.()
+
   return (Page): React.ComponentClass<any> => {
     // eslint-disable-next-line dot-notation
     const isReactComponent = isClassComponent(R, Page)
@@ -65,11 +66,10 @@ export function connectReactPage (
         const children = this.state.hasError
           ? []
           : h(ReactMeta.PageContext.Provider, { value: id }, h(Page, {
-            ...this.props,
+            ...Object.assign({}, ctx?.props, this.props),
             ...refs
           }))
 
-        // TODO root
         return h(
           'view',
           { id, className: 'taro_page' },
@@ -129,8 +129,8 @@ export function createReactApp (
       appWrapperResolver(this)
     }
 
-    public mount (pageComponent: any, id: string, cb: () => void) {
-      const pageWrapper = connectReactPage(react, id)(pageComponent)
+    public mount (pageComponent: any, id: string, getCtx: () => any, cb: () => void) {
+      const pageWrapper = connectReactPage(react, id, getCtx)(pageComponent)
       const key = id + pageKeyId()
       const page = () => h(pageWrapper, { key, tid: id })
       this.pages.push(page)
@@ -172,14 +172,13 @@ export function createReactApp (
     render (cb: () => void) {
       appWrapper.forceUpdate(cb)
     },
-    mount (component: any, id: string, cb: () => void) {
+    mount (component: any, id: string, getCtx: () => any, cb: () => void) {
       if (appWrapper) {
-        appWrapper.mount(component, id, cb)
+        appWrapper.mount(component, id, getCtx, cb)
       } else {
-        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, cb))
+        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, getCtx, cb))
       }
     },
-
     unmount (id: string, cb: () => void) {
       appWrapper?.unmount(id, cb)
     },
@@ -212,7 +211,7 @@ export function createReactApp (
 
           app.onCreate?.()
         }
-        
+
         eventCenter.trigger('__taroRouterLaunch', launchParam)
       })
     },
@@ -236,19 +235,7 @@ export function createReactApp (
         app?.componentDidHide?.()
       })
     }
-  }
-
-  // TODO: function componennt hook
-  // function triggerAppHook (lifecycle: string, ...option) {
-  //   const instance = getPageInstance('taro-app')
-  //   if (instance) {
-  //     const app = getAppInstance()
-  //     const func = hooks.call('getLifecycle', instance, lifecycle)
-  //     if (Array.isArray(func)) {
-  //       func.forEach(cb => cb.apply(app, option))
-  //     }
-  //   }
-  // }
+  } as unknown as AppInstance
 
   Current.app = app
 

package/dist/runtime-framework/react/hooks.ts

@@ -7,14 +7,14 @@ import { HOOKS_APP_ID } from './utils'
 
 import type {
   AppInstance,
-  Func,
   Instance,
   PageLifeCycle,
-  PageProps
+  PageProps,
+  TFunc
 } from '@tarojs/runtime/dist/runtime.esm'
 
 const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
-  return (fn: Func) => {
+  return (fn: TFunc) => {
     const { R: React, PageContext } = ReactMeta
     const id = React.useContext(PageContext) || HOOKS_APP_ID
     const instRef = React.useRef<Instance<PageProps>>()

package/dist/runtime-framework/react/index.ts

@@ -13,4 +13,5 @@ hooks.tap('initNativeApi', function (taro) {
 export * from './app'
 export * from './connect'
 export * from './hooks'
+export * from './native-page'
 export * from './page'