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

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

@@ -0,0 +1,103 @@
+// @ts-nocheck
+
+export type TTreeNode = {
+  type: string
+  name?: string
+  content?: string
+  attributes?: Record<string, string>
+  children?: TTreeNode[]
+  endIndex?: number
+  selfClosing?: boolean
+}
+
+function parseHTML(htmlString: string): TTreeNode[] {
+  const stack: TTreeNode[] = []
+  let current: TTreeNode
+  let index = 0
+  const jsonTree: TTreeNode[] = []
+
+  while (index < htmlString.length) {
+    const char = htmlString[index]
+
+    if (char === '<') {
+      const tag = parseTag(htmlString, index)
+      if (tag.type === 'open') {
+        const element: TTreeNode = {
+          type: 'element',
+          name: tag.name,
+          attributes: tag.attributes,
+          children: [],
+        }
+        if (!current) {
+          jsonTree.push(element)
+        } else {
+          current.children?.push(element)
+        }
+        if (!tag.selfClosing) {
+          stack.push(current!)
+          current = element
+        }
+      } else if (tag.type === 'close') {
+        if (stack.length > 0) {
+          current = stack.pop()
+        }
+      }
+      index = tag.endIndex + 1
+    } else {
+      const endIndex = htmlString.indexOf('<', index)
+      const text = htmlString.slice(index, endIndex !== -1 ? endIndex : undefined)
+      if (text.trim() !== '') {
+        current.children?.push({ type: 'text', content: text })
+      }
+      index = endIndex !== -1 ? endIndex : htmlString.length
+    }
+  }
+
+  return jsonTree
+}
+
+function parseTag(htmlString, startIndex) {
+  let index = startIndex
+  const tag: TTreeNode = {
+    type: '',
+    name: '',
+    attributes: {},
+    selfClosing: false,
+  }
+
+  // Skip '<'
+  index++
+
+  if (htmlString[index] === '/') {
+    tag.type = 'close'
+    index++
+  } else {
+    tag.type = 'open'
+  }
+
+  // Parse tag name
+  tag.name = htmlString.slice(index).match(/^\s*([^/\s>]+)/)[1]
+  index += tag.name.length
+
+  // Parse attributes
+  let attrMatch
+  while ((attrMatch = htmlString.slice(index).match(/^\s+([^=]+)="([^"]*)"/))) {
+    const [, attr, value] = attrMatch
+    tag.attributes[attr] = value
+    index += attrMatch[0].length
+  }
+
+  if (htmlString[index] === '/' || htmlString[index + 1] === '/') {
+    tag.selfClosing = true
+  }
+
+  // Skip '>'
+  index = htmlString.indexOf('>', index) + 1
+
+  tag.endIndex = index - 1
+
+  return tag
+}
+
+
+export default parseHTML

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

@@ -0,0 +1,56 @@
+import { document, TaroElement } from '@tarojs/runtime'
+
+import parseHTML, { TTreeNode } from './HarmonyHTMLParser'
+
+// 构建harmony的dom树
+function buildDomTree(dom: TTreeNode) {
+  const { name, attributes, children } = dom
+  let tagName = ''
+  // TODO: 仍需补充更多节点解析和它默认样式行为的转换，比如h1\h2
+  switch (name) {
+    case 'root': tagName = 'view'; break
+    case 'img': tagName = 'image'; break
+    case 'div': tagName = 'view'; break
+    case 'p': tagName = 'text'; break
+    case 'span': tagName = 'text'; break
+  }
+  if (!tagName) return null
+  
+  const ele = document.createElement(tagName)
+  attributes && Object.keys(attributes).forEach(key => {
+    if (key === 'style') {
+      ele.style.cssText = attributes[key]
+    } else {
+      ele.setAttribute(key, attributes[key])
+    }
+  })
+
+  if (children && children.length) {
+    children.forEach(child => {
+      let childEle
+      if (child.type === 'element') {
+        childEle = buildDomTree(child)
+      } else if (child.type === 'text') {
+        childEle = document.createTextNode(child.content)
+      }
+      childEle && ele.appendChild(childEle)
+    })
+  }
+  return ele
+}
+
+// 净化常见错别标签如：<br> <hr>
+function fixBrokenTags(htmlString) {
+  const selfClosingTags = ['br', 'hr']
+  // 匹配容易忘记闭合的标签
+  const pattern = new RegExp(`<(${selfClosingTags.join('|')})\\b[^>]*>`, 'gi')
+  // 修复匹配到的标签
+  const fixedHTML = htmlString.replace(pattern, '<$1/>')
+  return fixedHTML
+}
+
+export default function htmlParser(htmlString: string): TaroElement {
+  htmlString = fixBrokenTags(htmlString)
+  const trees = parseHTML(`<root>${htmlString}</root>`)
+  return buildDomTree(trees[0])
+}

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

@@ -0,0 +1,83 @@
+import { convertNumber2VP } from '@tarojs/runtime'
+import { isNumber } from '@tarojs/shared'
+
+export function getSingleSelector(ctx, range, rangeKey): any[] {
+  return range.map((data) => data[rangeKey])
+}
+
+export function getMultiSelector(ctx, range, rangeKey, value) {
+  return range.map((arr, arrIndex) => arr.map((data, i) => {
+    const columnValue = value[arrIndex]
+    if (columnValue === data) {
+      ctx.showSelector[arrIndex] = i
+    }
+    if (rangeKey && typeof range[0][0] === 'object') {
+      return data[rangeKey]
+    }
+    return data
+  }))
+}
+
+export function getUnit (val) {
+  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
+
+    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 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
+    }
+  })
+}
+
+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
+    }
+  })
+}

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

@@ -0,0 +1,91 @@
+import { ObjectAssign } from '@tarojs/runtime'
+
+import { AttributeManager } from './AttributeManager'
+import { TEXT_DEFAULT_STYLE } from './constant/style'
+
+import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
+import type { StandardProps } from '@tarojs/components/types'
+
+export function getFontAttributes (node: TaroElement): TaroTextStyleType {
+  const hmStyle = node.hmStyle
+
+  const attributes: TaroAny = {
+    maxLines: hmStyle.maxLines || Infinity,
+    // 已做处理的属性
+    letterSpacing: hmStyle.letterSpacing,
+    textAlign: hmStyle.textAlign,
+    textOverflow: hmStyle.textOverflow
+  }
+
+  return attributes
+}
+
+export function getNormalAttributes (node: TaroElement): TaroStyleType {
+  const hmStyle = node.hmStyle
+
+  const _nid = node._nid
+  const _attrs: StandardProps = node._attrs || {}
+
+  const transform: TaroAny = hmStyle.transform
+  const transformRotate: HarmonyType.Transform.Rotate = transform?.rotate?.[0]
+  const transformTranslate: HarmonyType.Transform.Translate = transform?.translate?.[0]
+  const transformScale: HarmonyType.Transform.Scale = transform?.scale?.[0]
+  const transformTransform: HarmonyType.Transform.Transform = transform?.transform?.[0]
+
+  let normalAttributes: HarmonyStyle = {
+    // Flex相关
+    flexBasis: hmStyle.flexBasis,
+    flexGrow: hmStyle.flexGrow,
+    flexShrink: hmStyle.flexShrink,
+    alignSelf: hmStyle.alignSelf,
+    // 尺寸相关
+    width: hmStyle.width,
+    height: hmStyle.height,
+    constraintSize: hmStyle.constraintSize,
+    margin: hmStyle.margin,
+    padding: hmStyle.padding,
+    // 边框相关
+    borderStyle: hmStyle.borderStyle,
+    borderWidth: hmStyle.borderWidth,
+    borderColor: hmStyle.borderColor,
+    borderRadius: hmStyle.borderRadius,
+    // 背景相关
+    backgroundColor: hmStyle.backgroundColor,
+    backgroundImage: hmStyle.backgroundImage,
+    backgroundImageSize: hmStyle.backgroundImageSize,
+    backgroundRepeat: hmStyle.backgroundRepeat,
+    linearGradient: hmStyle.linearGradient,
+    // 变换相关
+    rotate: transformRotate,
+    translate: transformTranslate,
+    scale: transformScale,
+    transform: transformTransform,
+    // 通用文本相关
+    color: hmStyle.color,
+    fontSize: hmStyle.fontSize,
+    fontStyle: hmStyle.fontStyle,
+    fontWeight: hmStyle.fontWeight,
+    fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
+    lineHeight: hmStyle.lineHeight,
+    decoration: hmStyle.decoration,
+    // 其他
+    clip: hmStyle.clip,
+    id: _attrs.id || _nid,
+    // focus: _attrs.focus || false,
+  }
+
+
+  const id = node._nid
+  const component: TaroAny = node._instance
+
+  // taro_page 等写死在运行时里的节点，没有 _instance
+  if (component) {
+    const overwriteStyle: TaroStyleType = component.nodeInfoMap[id].overwriteStyle
+
+    // 处理覆盖属性：如动画的覆盖
+    if (overwriteStyle) {
+      normalAttributes = ObjectAssign(normalAttributes, overwriteStyle)
+    }
+  }
+  return normalAttributes
+}

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

@@ -0,0 +1,161 @@
+import { bindInstanceToNode, AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, getPageScrollerOrNode,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { createTaroEvent } from './utils/events'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+
+import type { TaroVideoElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+export interface VideoOptions {
+  src?: string | Resource
+  previewUri?: string |PixelMap | Resource
+  controller?: VideoController
+}
+export interface VideoAttrs {
+  muted?: boolean
+  controls?: boolean
+  autoPlay?: boolean
+  loop?: boolean
+  objectFit?: ImageFit
+}
+export interface VideoUpdateEvent {
+  time: number
+}
+
+@Extend(Video)
+function attrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Video)
+function props(attr: VideoAttrs) {
+  .muted(attr.muted)
+  .autoPlay(attr.autoPlay)
+  .controls(attr.controls)
+  .objectFit(attr.objectFit)
+  .loop(attr.loop)
+}
+
+@Component
+export default struct TaroVideo {
+  nodeInfoMap: TaroAny = {}
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  @ObjectLink node: TaroVideoElement
+
+  controller: VideoController = new VideoController()
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick((e: ClickEvent) => {
+      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 => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  emitEvent = (type: string, detail?: TaroAny) => {
+    const event: TaroEvent = createTaroEvent(type, { detail }, this.node)
+    event.stopPropagation()
+    eventHandler(event, type, this.node)
+  }
+
+
+  getVideoData (): VideoOptions {
+    const src = this.node._attrs.src
+    const poster = this.node._attrs.poster
+    return {
+      src,
+      previewUri: poster,
+      controller: this.controller
+    }
+  }
+
+  getObjectFit () {
+    switch (this.node._attrs.objectFit) {
+      case 'contain': return ImageFit.Contain
+      case 'cover': return ImageFit.Cover
+      case 'fill': return ImageFit.Fill
+      default: return ImageFit.Contain
+    }
+  }
+
+  getVideoProps (): VideoAttrs {
+    const muted: boolean = this.node._attrs.muted || false
+    const autoPlay: boolean = this.node._attrs.autoplay || false
+    const controls: boolean = this.node._attrs.controls || false
+    const objectFit: ImageFit = this.getObjectFit()
+    const loop: boolean = this.node._attrs.loop || false
+    return {
+      muted,
+      controls,
+      objectFit,
+      loop,
+      autoPlay
+    }
+  }
+
+  handleUpdate (e: VideoUpdateEvent) {
+    this.nodeInfoMap[this.node._nid].currentTime = e.time
+    this.emitEvent('timeUpdate', { currentTime: e.time})
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Video(this.getVideoData())
+        .attrs(getNormalAttributes(this.node))
+        .props(this.getVideoProps())
+        .defaultEvent()
+        .visibleChangeEvent()
+        .onStart(shouldBindEvent(() => { this.emitEvent('play') }, this.node, ['play']))
+        .onPause(shouldBindEvent(() => { this.emitEvent('pause') }, this.node, ['pause']))
+        .onFinish(shouldBindEvent(() => { this.emitEvent('ended') }, this.node, ['ended']))
+        .onError(shouldBindEvent(() => { this.emitEvent('error') }, this.node, ['error']))
+        .onUpdate((e) => { this.handleUpdate(e) })
+        .onPrepared(shouldBindEvent((e: TaroAny) => { this.emitEvent('loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
+        .onSeeking(shouldBindEvent((e: TaroAny) => { this.emitEvent('seeking', { duration: e.time }) }, this.node, ['seeking']))
+        .onSeeked(shouldBindEvent(() => { this.emitEvent('seeked') }, this.node, ['seeked']))
+        .onFullscreenChange(shouldBindEvent((e: TaroAny) => { this.emitEvent('fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny } from '@tarojs/runtime'
+
+import { createNode } from './render'
+import TaroComponentWrapper from './base'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { FlexManager } from './utils/FlexManager'
+import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { TaroViewElement, TaroElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+@Extend(Flex)
+function attrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Component
+export default struct TaroView {
+  nodeInfoMap: TaroAny = {}
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .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 => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        ForEach(this.node.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .attrs(getNormalAttributes(this.node))
+      .defaultEvent()
+      .visibleChangeEvent()
+    }
+  }
+}