@tarojs/plugin-platform-harmony-cpp 4.1.0 → 4.1.1-alpha.1

package/dist/runtime/components/utils/htmlParser/HarmonyHTMLParser.ts

@@ -0,0 +1,100 @@
+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/runtime/components/utils/htmlParser/index.ts

@@ -0,0 +1,58 @@
+import { document } from '@tarojs/runtime'
+
+import parseHTML, { TTreeNode } from './HarmonyHTMLParser'
+
+import type { TaroElement } from '@tarojs/runtime'
+
+// 构建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 | null {
+  htmlString = fixBrokenTags(htmlString)
+  const trees = parseHTML(`<root>${htmlString}</root>`)
+  return buildDomTree(trees[0])
+}

package/dist/runtime/components/utils/index.ts

@@ -0,0 +1,77 @@
+import { 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])
+}
+
+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 generateText (node: TaroRichTextElement): string {
+  return parseHtmlNode(node._attrs.nodes || '')
+}
+
+// 将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 ''
+}
+
+function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElement> | string) {
+  return typeof nodes === 'string' ? nodes : `<div>${nodes.map(node => nodeToHtml(node)).join('')}</div>`
+}
+
+// 背景偏移算法：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 convertVp2Px(val: string | number) {
+  const vp = parseFloat(`${val}`)
+  return vp2px(vp)
+}

package/dist/runtime/components/utils/styles.ets

@@ -0,0 +1,41 @@
+import { isUndefined } from '@tarojs/shared'
+import { ObjectAssign } from '@tarojs/runtime'
+
+import { FlexManager } from './flexManager'
+
+import type { StandardProps, TextProps } from '@tarojs/components/types'
+import type { TaroAny, TaroElement, TaroTextStyleType, HarmonyStyle } from '@tarojs/runtime'
+
+export function getFontAttributes (node: TaroElement): TaroAny {
+}
+
+// 模拟 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 {
+  if (!node) return {}
+
+  const hmStyle: TaroAny = node.hmStyle
+  if (!hmStyle) return {}
+
+  const _nid = node._nid
+  const _attrs: StandardProps = node._attrs || {}
+
+  let normalAttributes: TaroAny = hmStyle
+
+  // 覆盖属性
+  normalAttributes.id = _attrs.id || _nid.toString()
+
+  // 初始化默认的值
+  if (initStyle) {
+    normalAttributes = ObjectAssign({}, initStyle, normalAttributes)
+  }
+  return normalAttributes
+}
+
+export function getStyleAttr(node: TaroElement | null, key: string): TaroAny {
+}

package/dist/runtime/components/video.ets

@@ -0,0 +1,119 @@
+import { audio } from '@kit.AudioKit'
+import { AREA_CHANGE_EVENT_NAME, Current, createTaroEvent, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroEvent, TaroVideoElement } from '@tarojs/runtime'
+
+export interface VideoUpdateEvent {
+  time: number
+}
+
+function emitEvent (node: TaroVideoElement, type: string, detail?: TaroAny) {
+  const event: TaroEvent = createTaroEvent(type, { detail }, node)
+
+  event.stopPropagation()
+  eventHandler(event, type, node)
+}
+
+function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
+  node._nodeInfo._currentTime = e.time
+
+  emitEvent(node, 'timeUpdate', { currentTime: e.time})
+}
+
+@ComponentV2
+export default struct TaroVideo {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroVideoElement) => void = this.customBuilder
+  @Param @Require node: TaroVideoElement
+  controller: VideoController = new VideoController()
+
+  @Local attrSrc: string = ''
+  @Local attrPoster: string = ''
+  @Local attrAutoplay: boolean = false
+  @Local attrControls: boolean = false
+  @Local attrLoop: boolean = false
+  @Local attrMuted: boolean = false
+  @Local attrObjectFit: string = ''
+
+  @Computed get computedObjectFit () {
+    switch (this.attrObjectFit) {
+      case 'contain': return ImageFit.Contain
+      case 'cover': return ImageFit.Cover
+      case 'fill': return ImageFit.Fill
+      default: return ImageFit.Contain
+    }
+  }
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+      this.node.controller = this.controller
+      this.attrSrc = this.node._attrs.src ?? this.attrSrc
+      this.attrPoster = this.node._attrs.poster ?? this.attrPoster
+      this.attrAutoplay = this.node._attrs.autoplay ?? this.attrAutoplay
+      this.attrControls = this.node._attrs.controls ?? this.attrControls
+      this.attrLoop = this.node._attrs.loop ?? this.attrLoop
+      this.attrMuted = this.node._attrs.muted ?? this.attrMuted
+      this.attrObjectFit = this.node._attrs.objectFit ?? this.attrObjectFit
+    }
+  }
+
+  refreshAudioSession() {
+    if (Current.audioSessionManager) {
+      const manager: audio.AudioSessionManager = Current.audioSessionManager
+      if (manager.isAudioSessionActivated()) {
+        manager.deactivateAudioSession().then(() => {
+          let strategy: audio.AudioSessionStrategy = {
+            concurrencyMode: audio.AudioConcurrencyMode.CONCURRENCY_PAUSE_OTHERS
+          }
+          manager.activateAudioSession(strategy)
+        })
+      }
+    }
+  }
+
+  aboutToDisappear(): void {
+    setTimeout(() => {
+      this.refreshAudioSession()
+    }, 200)
+  }
+
+  build () {
+    Video({
+      src: this.attrSrc,
+      previewUri: this.attrPoster,
+      controller: this.node.controller
+    })
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .muted(this.attrMuted || false)
+      .autoPlay(this.attrAutoplay || false)
+      .controls(this.attrControls || false)
+      .objectFit(this.computedObjectFit)
+      .loop(this.attrLoop || false)
+      .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))
+      .onPause(() => {
+        shouldBindEvent(() => { emitEvent(this.node, 'pause') }, this.node, ['pause'])?.()
+        this.refreshAudioSession()
+      })
+      .onStop(() => {
+        this.refreshAudioSession()
+      })
+      .onFinish(() => {
+        shouldBindEvent(() => { emitEvent(this.node, 'ended') }, this.node, ['ended'])?.()
+        this.refreshAudioSession()
+      })
+      .onError(shouldBindEvent(() => { emitEvent(this.node, 'error') }, this.node, ['error']))
+      .onUpdate((e) => { handleUpdate(this.node, e) })
+      .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
+      .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'seeking', { duration: e.time }) }, this.node, ['seeking']))
+      .onSeeked(shouldBindEvent(() => { emitEvent(this.node, 'seeked') }, this.node, ['seeked']))
+      .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
+      .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/runtime/components/webView.ets

@@ -0,0 +1,55 @@
+import { AREA_CHANGE_EVENT_NAME, createTaroEvent, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroWebViewElement, TaroEvent } from '@tarojs/runtime'
+
+interface IPageLoad {
+  url: string
+}
+
+interface IError {
+  request: WebResourceRequest
+  error: WebResourceError
+}
+
+@Component
+export default struct TaroWebView {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroWebViewElement, layer?: number) => void = this.customBuilder
+  @ObjectLink node: TaroWebViewElement
+
+  build () {
+    Web({ src: this.node._attrs.src, controller: this.node.controller })
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onPageEnd((e: IPageLoad) => {
+        // 1. 创建消息端口
+        this.node.ports = this.node.controller.createWebMessagePorts(true)
+        // 2. 发送端口1到HTML5
+        this.node.controller.postMessage('init_web_messageport', [this.node.ports[1]], '*');
+        // 3. 保存端口0到本地
+        this.node.nativePort = this.node.ports[0]
+        // 4. 设置回调函数
+        this.node.nativePort.onMessageEventExt((result) => {
+          const message: TaroAny = this.node.handleMessageFromWeb(result)
+          const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, this.node)
+
+          eventHandler(messageEvent, 'message', this.node)
+        })
+
+        const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: this.node._attrs.src } }, this.node)
+
+        eventHandler(onLoadEvent, 'load', this.node)
+      })
+      .onErrorReceive(shouldBindEvent((e: IError) => {
+        const event: TaroEvent = createTaroEvent('error', { detail: { url: this.node._attrs.src, fullUrl: e.request.getRequestUrl() } }, this.node)
+
+        eventHandler(event, 'error', this.node)
+      }, this.node, ['error']))
+      .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/runtime/components/xComponent.ets

@@ -0,0 +1,89 @@
+import { Current, createEvent, createTaroEvent, eventCenter, eventHandler } from '@tarojs/runtime'
+import { getDeviceInfo } from '@tarojs/taro'
+
+import type { TaroAny } from '@tarojs/runtime'
+
+const X_COMPONENT_ID_PREFIX = 'taro_x_'
+
+Current.nativeModule.initJSCAPIBridge("js_capi_bridge", {
+  createEvent,
+  createTaroEvent,
+  eventHandler,
+  deviceInfo: getDeviceInfo(),
+})
+
+interface ILocation {
+  path: string
+}
+
+interface IRouterChangeEventFeedback {
+  toLocation?: ILocation
+  stage: string
+}
+
+const ROUTER_STAGE = new Map<string, number>([
+  ['load', 0],
+  ['show', 1],
+  ['hide', 2],
+  ['unload', 3],
+])
+
+@Component
+export struct TaroXComponent {
+  @Prop pageId: number = 0
+  @Prop path: string = ''
+  @State stage: number = 0
+  data: TaroAny = null
+
+  aboutToAppear(): void {
+    if (Current.isDebug) {
+      console.log("C-Component onAppear 使用 NAPI 调用 C++ 侧的方法", `taro_x_${this.pageId}`)
+    }
+    // FIXME Current.router 为空会导致页面切换和卸载出现问题，后续修复
+    this.path = Current.router?.path?.replace(/^\//, '')
+    eventCenter.on('__taroRouterChange', this.handleRouterChange)
+    if (Current.page?.config?.isHome) {
+      Current.taro.updatePageSync()
+    }
+  }
+
+  aboutToDisappear(): void {
+    if (Current.isDebug) {
+      console.log("C-Component onDisAppear 使用 NAPI 调用 C++ 侧的方法", `taro_x_${this.pageId}`)
+    }
+    if (this.stage !== ROUTER_STAGE.get('unload')) {
+      eventCenter.off('__taroRouterChange', this.handleRouterChange)
+      this.handleRouterChange({ stage: 'unload' })
+    }
+  }
+
+  handleRouterChange = (params: IRouterChangeEventFeedback) => {
+    if (!this.pageId || !this.path) return
+
+    if (this.path === params.toLocation?.path || (params.stage && !params.toLocation)) {
+      this.stage = ROUTER_STAGE.get(params.stage) || 0
+      Current.nativeModule.onXComponentStateChange(this.pageId, this.stage)
+    }
+  }
+
+  build() {
+    if (this.pageId > 0) {
+      Stack() {
+        ContentSlot(this.data)
+      }
+      .id(`${X_COMPONENT_ID_PREFIX}${this.pageId}`)
+      .align(Alignment.TopStart)
+      .height('100%')
+      .width('100%')
+      .onDetach(() => {
+        if (Current.isDebug) {
+          console.log("C-Component onDetach 使用 NAPI 调用 C++ 侧的方法", `taro_x_${this.pageId}`)
+        }
+        if (this.stage !== ROUTER_STAGE.get('unload')) {
+          eventCenter.off('__taroRouterChange', this.handleRouterChange)
+          this.handleRouterChange({ stage: 'unload' })
+        }
+      })
+    }
+  }
+}