@tarojs/plugin-platform-harmony-ets 4.0.0-beta.1 → 4.0.0-beta.100

package/dist/components-harmony-ets/utils/flexManager.ets

@@ -1,21 +1,89 @@
-import type { TaroAny, TaroElement } from '@tarojs/runtime'
+import type { TaroElement, HarmonyStyle } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
+import { getNormalAttributes } from './styles'
+
+interface IFlexOptions {
+  direction: FlexDirection,
+  justifyContent: FlexAlign,
+  alignItems: ItemAlign,
+  wrap?: FlexWrap,
+  alignContent?: FlexAlign
+}
 
 class FlexManager {
-  static flexOptions (node: TaroElement): FlexOptions {
-    const hmStyle = node.hmStyle
+  static isFlexNode (node: TaroElement): boolean {
+    return !!node.hmStyle?.display?.includes('flex')
+  }
+
+  static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems: ItemAlign | undefined): 	VerticalAlign | HorizontalAlign {
+    if (direction === FlexDirection.Column) {
+      switch (alignItems) {
+        case ItemAlign.Center:
+          return HorizontalAlign.Center
+        case ItemAlign.End:
+          return HorizontalAlign.End
+        default:
+          return HorizontalAlign.Start
+      }
+    } else {
+      switch (alignItems) {
+        case ItemAlign.Center:
+          return VerticalAlign.Center
+        case ItemAlign.End:
+          return VerticalAlign.Bottom
+        default:
+          return VerticalAlign.Top
+      }
+    }
+  }
 
+  static useFlexLayout (node: TaroElement): boolean {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node) || {}
+    const isReverse = hmStyle.flexDirection && [FlexDirection.RowReverse, FlexDirection.ColumnReverse].indexOf(hmStyle.flexDirection) !== -1;
+    const isUnknownAlign = [ItemAlign.Stretch, ItemAlign.Baseline].indexOf(hmStyle.alignItems!) !== -1;
+    return !isUndefined(hmStyle.flexWrap) || isReverse || isUnknownAlign;
+  }
+
+  static flexOptions (node: TaroElement): IFlexOptions {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node) || {}
+    const isFlex = FlexManager.isFlexNode(node)
     let flexDirection = hmStyle.flexDirection
     if (!flexDirection && flexDirection !== 0) {
       flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
 
     return {
+      alignItems: isFlex ? (isUndefined(hmStyle.alignItems) ? ItemAlign.Start : hmStyle.alignItems) : ItemAlign.Start,
+      justifyContent: isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start,
       direction: flexDirection,
-      justifyContent: hmStyle.justifyContent,
-      alignItems: hmStyle.alignItems,
-      wrap: hmStyle.flexWrap,
-      alignContent: hmStyle.alignContent,
+      wrap: isFlex ? hmStyle.flexWrap: FlexWrap.NoWrap,
+      alignContent: isFlex ? hmStyle.alignContent: FlexAlign.Start
+    }
+  }
+
+  static direction (node: TaroElement): FlexDirection {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
+    return flexDirection
+  }
+
+  static alignItems<T> (node: TaroElement): T {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    let flexDirection = hmStyle.flexDirection
+    if (!flexDirection && flexDirection !== 0) {
+      flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
+    }
+    return (isFlex ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start) as T
+  }
+
+  static justifyContent (node: TaroElement): FlexAlign {
+    const hmStyle: HarmonyStyle = getNormalAttributes(node)
+    const isFlex = FlexManager.isFlexNode(node)
+    return isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
   }
 }
 

package/dist/components-harmony-ets/utils/helper.ets

@@ -1,7 +1,8 @@
-import { getNormalAttributes, getFontAttributes } from './styles'
+import { VIEW } from '@tarojs/runtime/dist/runtime.esm'
 
-import type { Func } from '@tarojs/runtime/dist/runtime.esm'
-import type { TaroElement } from '@tarojs/runtime'
+import { getNormalAttributes, getFontAttributes, getStyleAttr } from './styles'
+
+import type { TaroElement, TaroNode, TaroAny } from '@tarojs/runtime'
 
 export const parseStyles = (styles = ''): Record<string, string> => {
   const styleObj: Record<string, string> = {}
@@ -20,7 +21,7 @@ export const parseStyles = (styles = ''): Record<string, string> => {
   return styleObj
 }
 
-export function shouldBindEvent (cb: Func, node: TaroElement, eventNames: string[], disabled = false) {
+export function shouldBindEvent (cb: TaroAny, node: TaroElement | null, eventNames: string[], disabled = false): TaroAny {
   if (!node || node._attrs?.disabled || disabled) return null
   if (!node.__listeners) {
     return null
@@ -31,9 +32,20 @@ export function shouldBindEvent (cb: Func, node: TaroElement, eventNames: string
 }
 
 export function getNodeThresholds (node: TaroElement): number[] | null {
-  if (!node) return null
+  return node?._nodeInfo?.thresholds || null
+}
 
-  return node?._nodeInfo.thresholds || null
+export function isTagFirstChild (node: TaroElement, tagName = VIEW, level = 0): boolean {
+  const parent: TaroElement | null = node.parentElement
+  const list: TaroNode[] = node.parentNode?.childNodes || []
+  if (list.length < 1 || level < 0) return false
+  else if (!parent) return true
+
+  if (parent.nodeName === tagName.toUpperCase()) {
+    return list[0] === node
+  } else {
+    return (list[0] === node) && isTagFirstChild(parent, tagName, --level)
+  }
 }
 
-export { getNormalAttributes, getFontAttributes }
+export { getNormalAttributes, getFontAttributes, getStyleAttr }

package/dist/components-harmony-ets/utils/htmlParser/HarmonyHTMLParser.ts

@@ -99,5 +99,4 @@ function parseTag(htmlString, startIndex) {
   return tag
 }
 
-
-export default parseHTML
+export default parseHTML

package/dist/components-harmony-ets/utils/htmlParser/index.ts

@@ -15,7 +15,7 @@ function buildDomTree(dom: TTreeNode) {
     case 'span': tagName = 'text'; break
   }
   if (!tagName) return null
-  
+
   const ele = document.createElement(tagName)
   attributes && Object.keys(attributes).forEach(key => {
     if (key === 'style') {

package/dist/components-harmony-ets/utils/index.ts

@@ -1,5 +1,8 @@
 import { convertNumber2VP } from '@tarojs/runtime'
-import { isNumber } from '@tarojs/shared'
+import { isNumber, isUndefined } from '@tarojs/shared'
+
+import type { RichTextProps } from '@tarojs/components/types/RichText'
+import type { TaroRichTextElement } from '@tarojs/runtime'
 
 export function getSingleSelector(range, rangeKey): any[] {
   return range.map((data) => data[rangeKey])
@@ -18,66 +21,67 @@ export function getMultiSelector(ctx, range, rangeKey, value) {
   }))
 }
 
-export function getUnit (val) {
-  if (/\d+(vp)$/.test(val)) {
+export function getUnit (val: string | number): string {
+  if (isNumber(val) || /\d+px$/.test(val)) {
+    return convertNumber2VP(parseFloat(val as string))
+  } else if (/\d+(vp)$/.test(val)) {
     return val
-  } else if (isNumber(val) || /\d+px$/.test(val)) {
-    return convertNumber2VP(parseFloat(val))
   }
   return val
 }
 
-function handleNodeStyleData (dataValue: string, handler: (values: string[]) => { [key: string]: string } | void) {
-  let res: any = {}
-  if (dataValue) {
-    const values = dataValue.trim().split(/\s+/)
-    const data = handler(values)
-
-    if (!data) return res
-
-    res = data
+export function generateText (node: TaroRichTextElement): string {
+  return parseHtmlNode(node._attrs.nodes || '')
+}
 
-    Object.keys(res).forEach(key => {
-      const exec = `${res[key]}`.match(/(\d+)(px)$/)
-      if (exec && values.length > 1) {
-        res[key] = getUnit(+exec[1])
-      }
-    })
+// 将nodeTree转换成harmony需要的string结构
+function nodeToHtml(node: RichTextProps.Text | RichTextProps.HTMLElement): string {
+  if (node.type === 'text') {
+    return node.text
+  }
+  if (node.attrs) {
+    const attributes = Object.entries(node.attrs)
+      .map((item: [string, string]) => `${item[0]}="${item[1]}"`)
+      .join(' ')
+    const childrenHtml: string = typeof node.children === 'string' ? node.children : (node.children || []).map((child: RichTextProps.Text | RichTextProps.HTMLElement) => nodeToHtml(child)).join('')
+    return `<${node.name}${attributes ? ' ' + attributes : ''}>${childrenHtml}</${node.name}>`
   }
+  return ''
+}
 
-  return res
+function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElement> | string) {
+  return typeof nodes === 'string' ? nodes : `<div>${nodes.map(node => nodeToHtml(node)).join('')}</div>`
 }
 
-export function getNodeBorderRadiusData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { topLeft: values[0], topRight: values[0], bottomRight: values[0], bottomLeft: values[0] }
-      case 2:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[0], bottomLeft: values[1] }
-      case 3:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[1] }
-      case 4:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[3] }
-      default:
-        break
+// 背景偏移算法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
+export function computeBackgroundPosition(style) {
+  let offsetX = style.backgroundPosition?.x || 0
+  let offsetY = style.backgroundPosition?.y || 0
+  if (style.backgroundSize && typeof style.backgroundSize !== 'number') {
+    if (!isUndefined(style.backgroundSize.width) && style.width) {
+      if (typeof style.backgroundPosition.x === 'string' && style.backgroundPosition.x.indexOf('%') > 0) {
+        // (container width - image width) * (position x%) = (x offset value)
+        const width = parseFloat(style.width)
+        const bgWidth = parseFloat(style.backgroundSize.width)
+        const bgOffsetX = parseFloat(style.backgroundPosition.x)
+        offsetX = Number((width - bgWidth) * (bgOffsetX) / 100) || 0
+      }
+    }
+    if (!isUndefined(style.backgroundSize.height) && style.height) {
+      if (typeof style.backgroundPosition.y === 'string' && style.backgroundPosition.y.indexOf('%') > 0) {
+        // (container height - image height) * (position y%) = (y offset value)
+        const height = parseFloat(style.height)
+        const bgHeight = parseFloat(style.backgroundSize.height)
+        const bgOffsetY = parseFloat(style.backgroundPosition.y)
+        offsetY = Number((height - bgHeight) * (bgOffsetY) / 100) || 0
+      }
     }
-  })
+  }
+
+  return { offsetX, offsetY }
 }
 
-export function getNodeMarginOrPaddingData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { top: values[0], right: values[0], bottom: values[0], left: values[0] }
-      case 2:
-        return { top: values[0], right: values[1], bottom: values[0], left: values[1] }
-      case 3:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[1] }
-      case 4:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[3] }
-      default:
-        break
-    }
-  })
+export function convertVp2Px(val: string | number) {
+  const vp = parseFloat(`${val}`)
+  return vp2px(vp)
 }

package/dist/components-harmony-ets/utils/styles.ets

@@ -1,115 +1,203 @@
+import { isUndefined } from '@tarojs/shared'
 import { ObjectAssign } from '@tarojs/runtime'
 
-import { TEXT_DEFAULT_STYLE } from './constant/style'
+import { FlexManager } from './flexManager'
 
 import type { StandardProps, TextProps } from '@tarojs/components/types'
-import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
+import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyStyle } from '@tarojs/runtime'
 
 export function getFontAttributes (node: TaroElement): TaroTextStyleType {
-  const hmStyle = node.hmStyle
+  let hmStyle = getNormalAttributes(node)
   const attrs: TextProps = node._attrs || {}
 
+  if (!hmStyle) return {}
+
+  let lineHeight = hmStyle.lineHeight
+  if (!isUndefined(hmStyle.verticalAlign)) {
+    lineHeight = 0
+  }
+
+  let WebkitLineClamp = attrs.maxLines || hmStyle.WebkitLineClamp || Infinity
+  if (hmStyle.textOverflow && !isUndefined(hmStyle.textOverflow.overflow)) {
+    switch (hmStyle.textOverflow.overflow) {
+      case TextOverflow.Clip: 
+      case TextOverflow.Ellipsis:
+      case TextOverflow.None: WebkitLineClamp = WebkitLineClamp || 1; break
+      default: break
+    }
+  }
+
+  const isFlexText = hmStyle.display === 'flex'
+  let textAlign = hmStyle.textAlign
+  let verticalAlign = hmStyle.verticalAlign
+
+  // 按照 w3c 规范，一旦设置了 display: flex，textAlign 和 verticalAlign 都会直接失效
+  // 需要使用 justifyContent 和 alignItems
+  if (isFlexText) {
+    switch (hmStyle.justifyContent) {
+      case FlexAlign.Start:
+        textAlign = TextAlign.Start
+        break
+      case FlexAlign.Center:
+        textAlign = TextAlign.Center
+        break
+      case FlexAlign.End:
+        textAlign = TextAlign.End
+        break
+      case FlexAlign.SpaceBetween:
+      case FlexAlign.SpaceAround:
+        textAlign = TextAlign.JUSTIFY
+        break
+      default:
+        textAlign = TextAlign.Start
+        break
+    }
+    switch (hmStyle.alignItems) {
+      case ItemAlign.Start:
+        verticalAlign = Alignment.Top
+        break
+      case ItemAlign.Center:
+        verticalAlign = Alignment.Center
+        break
+      case ItemAlign.End:
+        verticalAlign = Alignment.End
+        break
+      default:
+        verticalAlign = Alignment.Top
+        break
+    }
+  }
+
   const attributes: TaroAny = {
-    WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
+    textAlign,
+    verticalAlign,
+    WebkitLineClamp: WebkitLineClamp,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
-    textAlign: hmStyle.textAlign,
-    textOverflow: hmStyle.textOverflow
+    textOverflow: hmStyle.textOverflow,
+    lineHeight: lineHeight
   }
 
   return attributes
 }
 
-export function getNormalAttributes (node: TaroElement): TaroStyleType {
+// 模拟 div 自动撑满父元素的情况
+export function isMaxWidthView (node: TaroElement) {
+  const parentNode: TaroElement = node.parentNode as TaroElement
+
+  return node.tagName === 'VIEW' && parentNode && parentNode.tagName === 'VIEW' && !FlexManager.isFlexNode(parentNode)
+}
+
+export function getNormalAttributes (node: TaroElement, initStyle?: HarmonyStyle): HarmonyStyle {
   const hmStyle = node.hmStyle
+  
+  if (!hmStyle) return {}
 
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}
 
-  let linearGradient: HarmonyType.LinearGradient | undefined = undefined
-  // 渐变
-  if (hmStyle.backgroundImage?.colors) {
-    linearGradient = hmStyle.backgroundImage
-  }
+  let normalAttributes = hmStyle
 
-  let normalAttributes: HarmonyStyle = {
-    // Flex相关
-    flexBasis: hmStyle.flexBasis,
-    flexGrow: hmStyle.flexGrow,
-    flexShrink: hmStyle.flexShrink,
-    alignSelf: hmStyle.alignSelf,
-    // 尺寸相关
-    width: hmStyle.width,
-    height: hmStyle.height,
-    minHeight: hmStyle.minHeight,
-    maxHeight: hmStyle.maxHeight,
-    minWidth: hmStyle.minWidth,
-    maxWidth: hmStyle.maxWidth,
-    marginTop: hmStyle.marginTop,
-    marginRight: hmStyle.marginRight,
-    marginBottom: hmStyle.marginBottom,
-    marginLeft: hmStyle.marginLeft,
-    paddingTop: hmStyle.paddingTop,
-    paddingRight: hmStyle.paddingRight,
-    paddingBottom: hmStyle.paddingBottom,
-    paddingLeft: hmStyle.paddingLeft,
-    // 边框相关
-    borderStyle: hmStyle.borderStyle,
-    borderTopStyle: hmStyle.borderTopStyle,
-    borderRightStyle: hmStyle.borderRightStyle,
-    borderBottomStyle: hmStyle.borderBottomStyle,
-    borderLeftStyle: hmStyle.borderLeftStyle,
-    borderWidth: hmStyle.borderWidth,
-    borderTopWidth: hmStyle.borderTopWidth,
-    borderRightWidth: hmStyle.borderRightWidth,
-    borderBottomWidth: hmStyle.borderBottomWidth,
-    borderLeftWidth: hmStyle.borderLeftWidth,
-    borderColor: hmStyle.borderColor,
-    borderTopColor: hmStyle.borderTopColor,
-    borderRightColor: hmStyle.borderRightColor,
-    borderBottomColor: hmStyle.borderBottomColor,
-    borderLeftColor: hmStyle.borderLeftColor,
-    borderRadius: hmStyle.borderRadius,
-    borderTopLeftRadius: hmStyle.borderTopLeftRadius,
-    borderTopRightRadius: hmStyle.borderTopRightRadius,
-    borderBottomRightRadius: hmStyle.borderBottomRightRadius,
-    borderBottomLeftRadius: hmStyle.borderBottomLeftRadius,
-    // 背景相关
-    backgroundColor: hmStyle.backgroundColor,
-    backgroundImage: hmStyle.backgroundImage,
-    backgroundSize: hmStyle.backgroundSize,
-    backgroundRepeat: hmStyle.backgroundRepeat,
-    backgroundPosition: hmStyle.backgroundPosition,
-    linearGradient,
-    // 变换相关
-    transform: hmStyle.transform,
-    transformOrigin: {
-      x: hmStyle.transformOrigin?.x || 0,
-      y: hmStyle.transformOrigin?.y || 0
-    },
-    // 通用文本相关
-    color: hmStyle.color,
-    fontSize: hmStyle.fontSize,
-    fontStyle: hmStyle.fontStyle,
-    fontWeight: hmStyle.fontWeight,
-    fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
-    lineHeight: hmStyle.lineHeight,
-    textDecoration: hmStyle.textDecoration,
-    // 其他
-    overflow: hmStyle.overflow,
-    id: _attrs.id || _nid,
-    opacity: hmStyle.opacity,
-    // focus: _attrs.focus || false,
+  // 覆盖属性
+  normalAttributes.id = _attrs.id || _nid.toString()
+
+  let pseudoStylesheet = getPseudoClass(node)
+  if (pseudoStylesheet) {
+    normalAttributes = ObjectAssign({}, normalAttributes, pseudoStylesheet)
   }
 
-  // taro_page 等写死在运行时里的节点，没有 _nodeInfo
-  if (node._nodeInfo) {
-    const overwriteStyle: TaroStyleType = node._nodeInfo?.overwriteStyle
+  // 初始化默认的值
+  if (initStyle) {
+    normalAttributes = ObjectAssign({}, initStyle, normalAttributes)
+  }
+  return normalAttributes
+}
 
-    // 处理覆盖属性：如动画的覆盖
-    if (overwriteStyle) {
-      normalAttributes = ObjectAssign(normalAttributes, overwriteStyle)
+// 应用伪类样式
+function getPseudoClass (node: TaroElement): HarmonyStyle | null {
+  // 伪类
+  const _pseudo_class = Object.keys(node._pseudo_class)
+  if (_pseudo_class.length) {
+    for (let i = 0; i < _pseudo_class.length; i++) {
+      const pseudoKey = _pseudo_class[i]
+      const pseudoStylesheet = node._pseudo_class[pseudoKey]
+      if (!pseudoStylesheet) continue
+      switch(pseudoKey) {
+        case "::first-child": {
+          if (node.parentNode?.firstChild?._nid === node._nid) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        case "::last-child": {
+          if (node.parentNode?.lastChild?._nid === node._nid) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        case "::empty": {
+          if (node.children?.length === 0) {
+            return pseudoStylesheet.hmStyle
+          }
+          break
+        }
+        default: {
+          // 解析nth-child()
+          // 找出当前节点在父节点中的位置
+          // 公式
+          let matchs: [number, number] | null = null
+          if (pseudoKey === '::nth-child(odd)') {
+            matchs = [2, 1]
+          } else if (pseudoKey === '::nth-child(even)') {
+            matchs = [2, 0]
+          } else {
+            matchs = parseNthChild(pseudoKey)
+          }
+          if (matchs) {
+            let index = node.parentNode?.childNodes.findIndex((child) => child._nid === node._nid)
+            if (isUndefined(index)) return null
+            else {
+              index = index + 1
+              if (matchs[0] === 0) {
+                if (index === matchs[1]) {
+                  return pseudoStylesheet.hmStyle
+                }
+              } else {
+                if ((index - matchs[1]) % matchs[0] === 0) {
+                  return pseudoStylesheet.hmStyle
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
-  return normalAttributes
+  return null
 }
+
+// 正则匹配nth-child
+function parseNthChild(selector: string): [number, number] | null {
+  const regex = /nth-child\((?:(-?\d*)n\s*)?([+-]?\s*\d+)?\)/;
+  const match = selector.match(regex);
+  
+  if (match) {
+      const a = match[1] ? parseInt(match[1]) : 0;
+      const b = match[2] ? parseInt(match[2]) : 0;
+      return [a, b];
+  } else {
+      return null;
+  }
+}
+
+
+export function getStyleAttr(node: TaroElement | null, key: string): TaroAny {
+  if (!node) return null
+  const hmStyle = node.hmStyle
+  if (!hmStyle) return null
+  // 覆盖属性
+  if (key === 'width') {
+    return isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width
+  }
+  return hmStyle[key]
+}