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

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

@@ -1,56 +1,97 @@
-import matrix4 from '@ohos.matrix4'
+// @ts-nocheck
+// import matrix4 from '@ohos.matrix4'
 
 export interface HarmonyStyle extends TaroStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
-  maxLines?: number
+  WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
+  verticalAlign?: Alignment
+  lineHeight?: Length
 }
 
 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'
+  visibility?: 'visible' | 'hidden'
 
   // position
   position?: 'relative' | 'absolute' | 'fixed'
   top?: Length
   left?: Length
+  bottom?: Length
+  right?: Length
 
   // flex
   flexBasis?: number | string
   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
+
+  // 渐变
+  linearGradient?: HarmonyType.LinearGradient
+  radialGradient?: HarmonyType.RadialGradient
 
   // 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
@@ -58,24 +99,45 @@ export interface TaroStyleType {
   fontStyle?: FontStyle
   fontWeight?: number | FontWeight | string
   fontFamily?: string | Resource
-  lineHeight?: string | number | Resource
-  decoration?: TextDecorationType
+  textDecoration?: {
+    type: TextDecorationType
+  }
 
-  // gradient
-  linearGradient?: HarmonyType.LinearGradient
+  // animation
+  animationName?: {
+    percentage: number
+    event: TaroStyleType
+  }[]
+  animationDuration?: number
+  animationTimingFunction?: string
+  animationDelay?: number
+  animationIterationCount?: number
+
+  // shadow
+  boxShadow?: {
+    radius: number
+    color?: string
+    offsetX?: number
+    offsetY?: number
+    fill?: boolean
+  }
 
   // other
   opacity?: number | Resource
   zIndex?: number
-  clip?: boolean
+  overflow?: string
   focus?: boolean
+  content?: string
 }
 
 export interface TaroTextStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
-  maxLines?: number
+  WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
+  verticalAlign?: Alignment
+  lineHeight?: string | number | Resource
 }
 
 export namespace HarmonyType {
@@ -90,6 +152,12 @@ export namespace HarmonyType {
     colors: Array<[ResourceColor, number]>
     repeating?: boolean
   }
+  export interface RadialGradient {
+    center: any
+    radius: number | string
+    colors: Array<[ResourceColor, number]>
+    repeating?: boolean
+  }
   export interface Overflow {
     overflow: TextOverflow
   }
@@ -108,6 +176,10 @@ export namespace HarmonyType {
     export type backgroundImagePosition = Position | Alignment
   }
   export namespace Transform {
+    export interface Origin {
+      x?: number
+      y?: number
+    }
     export interface Rotate {
       x?: number
       y?: number
@@ -130,7 +202,11 @@ export namespace HarmonyType {
       centerX?: number | string
       centerY?: number | string
     }
-    export type Transform = matrix4.Matrix4Transit
+    // export type Transform = matrix4.Matrix4Transit
+    export type Transform = {
+      Translate?: Translate
+      Scale?: Scale
+      Rotate?: Rotate
+    }
   }
 }
-

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,42 +163,100 @@ 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) {
-    const values = dataValue.trim().split(new RegExp('\\s+'))
+    const values = dataValue.toString().trim().split(new RegExp('\\s+'))
+    let val1: string
+    let val2: string
     switch (values.length) {
       case 1:
-        res = { top: values[0], right: values[0], bottom: values[0], left: values[0] }
+        val1 = getUnit(values[0])
+        res = { top: val1, right: val1, bottom: val1, left: val1 }
         break
       case 2:
-        res = { top: values[0], right: values[1], bottom: values[0], left: values[1] }
+        val1 = getUnit(values[0])
+        val2 = getUnit(values[1])
+        res = { top: val1, right: val2, bottom: val1, left: val2 }
         break
       case 3:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[1] }
+        val2 = getUnit(values[1])
+        res = { top: getUnit(values[0]), right: val2, bottom: getUnit(values[2]), left: val2 }
         break
       case 4:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[3] }
+        res = { top: getUnit(values[0]), right: getUnit(values[1]), bottom: getUnit(values[2]), left: getUnit(values[3]) }
         break
       default:
         break
     }
-    Object.keys(res).forEach(key => {
-      const exec = `${res[key]}`.match(/(\d+)(px)$/)
-      if (exec && values.length > 1) {
-        res[key] = getUnit(+exec[1])
-      }
-    })
   }
   return res
 }
 
-
 export function getUnit (val) {
-  if (/\d+(vp)$/.test(val)) {
+  // 空的字符串代表 Reconciler remove 了这个 prop，不进行后面的逻辑了
+  if (val === '') return val
+
+  if (/\d+(vp|px)$/.test(val)) {
     return val
-  } else if (isNumber(val) || /\d+px$/.test(val)) {
-    return convertNumber2VP(parseFloat(val))
+  } else if (isNumber(val)) {
+    return parseFloat(val) + 'px'
+  }
+  if (val) {
+    // 匹配vw\vh
+    const exec = val.match(/(-?\d*(\.\d+)?)(vw|vh)$/)
+    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())
+  // }
+  const result = {}
+  if (transform) {
+    transform.forEach((item) => {
+      result[item.type] = item.value
+    })
+    return result
+  }
+}
+
+export function capitalizeFirstLetter (str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package/dist/runtime-ets/index.ts

@@ -9,11 +9,10 @@ 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 './dom/cssNesting'
 export * from './interface'
 export * from './utils'
-export * from './utils/bind'
 export * from './utils/info'
-export { URLSearchParams, eventSource } from '@tarojs/runtime/dist/runtime.esm'
+export { URL, 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 { pxTransformHelper } from '@tarojs/taro'
+import _display from '@ohos.display'
+import { getSystemInfoSync, 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,21 +38,85 @@ export function convertNumber2PX (value: number) {
   return pxTransformHelper(value, 'vp')
 }
 
-export function convertNumber2VP (value: number) {
+export function convertNumber2VP (value: number, unit = 'px'): string | number {
+  if (unit === 'vw' || unit === 'vh') {
+    return (value / 100 * (unit === 'vw' ? display.width : display.height)) + 'px'
+  }
+  if (unit === 'PX') {
+    // 特殊单位：相当于PX、pX、Px
+    return pxTransformHelper(value, 'PX')
+  }
   return pxTransformHelper(value, 'vp')
 }
 
-export function calcDynamicStyle (styleSheet: Record<string, CSSProperties>, classNames: string, style: CSSProperties): CSSProperties {
+export function parseClasses (classNames = ''): string[] {
+  if (typeof classNames !== 'string') {
+    return []
+  }
+  return classNames.includes(' ') ? classNames.split(' ') : [classNames]
+}
+
+// 合并静态样式，从样式表里面找到对应的样式
+export function calcStaticStyle (styleSheet: Record<string, CSSProperties>, classNames = ''): CSSProperties {
+  classNames = classNames || '' // 兼容有些开发者传入了false/null等非字符串类型
   const obj: CSSProperties[] = []
-  const classes = typeof classNames === 'string' ? classNames.split(' ') : []
-  for (let i = 0; i < classes.length; i++) {
-    const className = classes[i]
-    if (styleSheet[className]) {
-      obj.push(styleSheet[className])
+
+  if (!styleSheet.cache) {
+    styleSheet.cache = {}
+  }
+  const cache: Record<string, CSSProperties> = styleSheet.cache as Record<string, CSSProperties>
+
+  const classes = parseClasses(classNames)
+  if (!classes.length) return {}
+  if (classes.length === 1) {
+    // 同一个引用
+    return styleSheet[classes[0]]
+  } else {
+    if (cache[classNames]) {
+      return cache[classNames]
+    } else {
+      for (let i = 0; i < classes.length; i++) {
+        const className = classes[i]
+        if (styleSheet[className]) {
+          obj.push(styleSheet[className])
+        }
+      }
+      const result = Object.assign.apply(null, [{}].concat(obj))
+
+      cache[classNames] = result
+
+      return result
+    }
+  }
+}
+
+// 动态样式计算，需要经过web2harmony进行反转
+export function calcDynamicStyle (style: CSSProperties): CSSProperties {
+  if (style) {
+    return convertWebStyle2HmStyle(style)
+  }
+  return {}
+}
+
+// css env()环境样式获取
+export function __env__(safeAreaType: string, fallback?: string | number) {
+  const sysInfo = getSystemInfoSync()
+
+  switch (safeAreaType) {
+    case 'safe-area-inset-top': {
+      return sysInfo.safeArea?.top ? `${sysInfo.safeArea?.top}px` : fallback
+    }
+    case 'safe-area-inset-right': {
+      return sysInfo.safeArea?.right ? `${sysInfo.screenWidth - sysInfo.safeArea?.right}px` : fallback
+    }
+    case 'safe-area-inset-bottom': {
+      return sysInfo.safeArea?.bottom ? `${sysInfo.screenHeight - sysInfo.safeArea?.bottom}px` : fallback
+    }
+    case 'safe-area-inset-left': {
+      return sysInfo.safeArea?.left ? `${sysInfo.safeArea?.left}px` : fallback
     }
   }
-  obj.push(style)
-  return Object.assign.apply(null, [{}].concat(obj))
+  return fallback
 }
 
 export function getPageScrollerOrNode (scrollerOrNode: any, page: any) {
@@ -66,6 +133,10 @@ export function getPageScrollerOrNode (scrollerOrNode: any, page: any) {
   return scrollerOrNode
 }
 
+export function ObjectKeys(obj: object): string[] {
+  return Object.keys(obj)
+}
+
 export function ObjectAssign(...objects) {
   return Object.assign.apply(this, [{}].concat(...objects))
 }
@@ -81,13 +152,12 @@ 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[] = []