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

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

@@ -0,0 +1,136 @@
+import matrix4 from '@ohos.matrix4'
+
+export interface HarmonyStyle extends TaroStyleType {
+  textAlign?: TextAlign
+  textOverflow?: HarmonyType.Overflow
+  maxLines?: number
+  letterSpacing?: number | string
+}
+
+export interface TaroStyleType {
+  id?: string
+
+  padding?: Margin | Length
+  margin?: Margin | Length
+  width?: Length
+  height?: Length
+  constraintSize?: ConstraintSizeOptions
+
+  display?: 'flex' | 'block' | 'none'
+
+  // position
+  position?: 'relative' | 'absolute' | 'fixed'
+  top?: Length
+  left?: Length
+
+  // flex
+  flexBasis?: number | string
+  flexGrow?: number
+  flexShrink?: number
+  alignSelf?: ItemAlign
+  direction?: FlexDirection
+  justifyContent?: FlexAlign
+  alignItems?: ItemAlign
+  wrap?: FlexWrap
+  alignContent?: FlexAlign
+
+  // background
+  backgroundColor?: ResourceColor
+  backgroundImage?: ResourceStr
+  backgroundRepeat?: ImageRepeat
+  backgroundImageSize?: SizeOptions | ImageSize
+
+  // transform
+  rotate?: HarmonyType.Transform.Rotate
+  translate?: HarmonyType.Transform.Translate
+  scale?: HarmonyType.Transform.Scale
+  transform?: HarmonyType.Transform.Transform
+
+  // border
+  borderWidth?: Length | EdgeWidths
+  borderColor?: ResourceColor | EdgeColors
+  borderStyle?: BorderStyle | EdgeStyles
+  borderRadius?: Length | BorderRadiuses
+
+  // text
+  color?: ResourceColor
+  fontSize?: number | string | Resource
+  fontStyle?: FontStyle
+  fontWeight?: number | FontWeight | string
+  fontFamily?: string | Resource
+  lineHeight?: string | number | Resource
+  decoration?: TextDecorationType
+
+  // gradient
+  linearGradient?: HarmonyType.LinearGradient
+
+  // other
+  opacity?: number | Resource
+  zIndex?: number
+  clip?: boolean
+  focus?: boolean
+}
+
+export interface TaroTextStyleType {
+  textAlign?: TextAlign
+  textOverflow?: HarmonyType.Overflow
+  maxLines?: number
+  letterSpacing?: number | string
+}
+
+export namespace HarmonyType {
+  export interface FlexOptions {
+    direction?: FlexDirection
+    justifyContent?: FlexAlign
+    alignItems?: ItemAlign
+  }
+  export interface LinearGradient {
+    angle?: number | string
+    direction?: GradientDirection
+    colors: Array<[ResourceColor, number]>
+    repeating?: boolean
+  }
+  export interface Overflow {
+    overflow: TextOverflow
+  }
+  export interface RadioStyle {
+    checkedBackgroundColor?: ResourceColor
+    uncheckedBorderColor?: ResourceColor
+    indicatorColor?: ResourceColor
+  }
+  export namespace Background {
+    export type backgroundColor = ResourceColor
+    export interface backgroundImage {
+      src: ResourceStr
+      repeat?: ImageRepeat
+    }
+    export type backgroundImageSize = SizeOptions | ImageSize
+    export type backgroundImagePosition = Position | Alignment
+  }
+  export namespace Transform {
+    export interface Rotate {
+      x?: number
+      y?: number
+      z?: number
+      angle: number | string
+      centerX?: number | string
+      centerY?: number | string
+      center?: number
+      perspective?: number
+    }
+    export interface Translate {
+      x?: number | string
+      y?: number | string
+      z? : number | string
+    }
+    export interface Scale {
+      x?: number
+      y?: number
+      z?: number
+      centerX?: number | string
+      centerY?: number | string
+    }
+    export type Transform = matrix4.Matrix4Transit
+  }
+}
+

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

@@ -0,0 +1,134 @@
+// @ts-nocheck
+import { isNumber } from '@tarojs/shared'
+
+import { convertNumber2VP } from '../../'
+
+export class FlexManager {
+
+  static flexAlign (value: string | number | undefined): FlexAlign {
+    switch (value) {
+      case 'flex-end':
+        return FlexAlign.End
+      case 'center':
+        return FlexAlign.Center
+      case 'space-between':
+        return FlexAlign.SpaceBetween
+      case 'space-around':
+        return FlexAlign.SpaceAround
+      case 'space-evenly':
+        return FlexAlign.SpaceEvenly
+      default:
+        return FlexAlign.Start
+    }
+  }
+
+  static direction (value: string): FlexDirection {
+    switch (value) {
+      case 'row': return FlexDirection.Row
+      case 'row-reverse': return FlexDirection.RowReverse
+      case 'column-reverse': return FlexDirection.ColumnReverse
+      default: return FlexDirection.Column
+    }
+  }
+
+  static itemAlign (value: string | number | undefined): ItemAlign {
+    switch (value) {
+      case 'flex-start':
+        return ItemAlign.Start
+      case 'flex-end':
+        return ItemAlign.End
+      case 'center':
+        return ItemAlign.Center
+      case 'stretch':
+        return ItemAlign.Stretch
+      case 'baseline':
+        return ItemAlign.Baseline
+      default:
+        return ItemAlign.Auto
+    }
+  }
+
+  static justifyContent (value: string): FlexAlign {
+    return FlexManager.flexAlign(value)
+  }
+
+  static alignItems (value: string): ItemAlign {
+    return FlexManager.itemAlign(value)
+  }
+
+  static alignSelf (value: string): ItemAlign {
+    return FlexManager.itemAlign(value)
+  }
+
+  static flexWrap (value: string): FlexWrap {
+    return value === 'wrap' ? FlexWrap.Wrap : FlexWrap.NoWrap
+  }
+
+  static alignContent (style: Record<string, string | number> = {}): FlexAlign | undefined {
+    if (style.flexWrap !== 'wrap') return undefined
+    const value = style.alignContent
+    return FlexManager.flexAlign(value)
+  }
+
+  static flexSize (style: Record<string, string | number> = {}): [number, number, number | string] {
+    const flex = style.flex
+    const flexGrow = style.flexGrow || 0
+    const flexShrink = style.flexShrink || 0
+    const flexBasis = style.flexBasis || 'auto'
+    let res: [number, number, number | string] = [Number(flexGrow), Number(flexShrink), flexBasis]
+
+    if (typeof flex === 'number') {
+      res = [flex, 1, 0]
+    } else if (flex === 'auto') {
+      res = [1, 1, 'auto']
+    } else if (flex === 'none') {
+      res = [0, 0, 'auto']
+    } else if (typeof flex === 'string') {
+      const FlexList = flex.replace(new RegExp('\\s+'), ' ').split(' ')
+      FlexList.forEach((item, index) => {
+        res[index] = index < 2 ? Number(item) : item
+      })
+    }
+    return res
+  }
+}
+
+export function getNodeMarginOrPaddingData (dataValue: string) {
+  let res: any = {}
+  if (dataValue) {
+    const values = dataValue.trim().split(new RegExp('\\s+'))
+    switch (values.length) {
+      case 1:
+        res = { top: values[0], right: values[0], bottom: values[0], left: values[0] }
+        break
+      case 2:
+        res = { top: values[0], right: values[1], bottom: values[0], left: values[1] }
+        break
+      case 3:
+        res = { top: values[0], right: values[1], bottom: values[2], left: values[1] }
+        break
+      case 4:
+        res = { top: values[0], right: values[1], bottom: values[2], left: 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)) {
+    return val
+  } else if (isNumber(val) || /\d+px$/.test(val)) {
+    return convertNumber2VP(parseFloat(val))
+  }
+  return val
+}

package/dist/runtime-ets/dom/text.ts

@@ -0,0 +1,19 @@
+import { NodeType, TaroNode } from './node'
+
+class TextNode extends TaroNode {
+  constructor(value = '', nodeName = '#text', nodeType: NodeType = NodeType.TEXT_NODE) {
+    super(nodeName, nodeType)
+    this.textContent = value
+  }
+
+  public get data (): string {
+    return this.textContent
+  }
+
+  public set data (value: string) {
+    this.textContent = value
+  }
+}
+
+@Observed
+export class TaroTextNode extends TextNode {}

package/dist/runtime-ets/index.ts

@@ -0,0 +1,19 @@
+// Current必须放在前面初始化
+// eslint-disable-next-line simple-import-sort/exports
+export * from './current'
+export * from './bom/document'
+export * from './bom/getComputedStyle'
+export { nav as navigator } from './bom/navigator'
+export { caf as cancelAnimationFrame, now, raf as requestAnimationFrame } from './bom/raf'
+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 { hooks } from '@tarojs/shared'

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

@@ -0,0 +1,9 @@
+export interface EventOptions {
+  bubbles: boolean
+  cancelable: boolean
+  [x: string]: any
+}
+
+export interface EventHandler extends Function {
+  _stop?: boolean
+}

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

@@ -0,0 +1 @@
+export * from './event'

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

@@ -0,0 +1,35 @@
+import { bindAttributesCallback } from './info'
+
+import type { TaroElement } from '../dom/element'
+
+// function convertToCamelCase(str) {
+//   return str.replace(/-(.)/g, (_, char) => char.toUpperCase()).replace(/^\w/, firstChar => firstChar.toUpperCase())
+// }
+
+export function bindInstanceToNode (node: TaroElement, instance: any) {
+  if (!node) return
+
+  // @ts-ignore
+  node._instance = instance
+
+  // 触发appear，让node监听到TaroNode已经和ete自定义组件绑定上
+  // @ts-ignore
+  node.resolveAppear?.() // #text node节点没有实现该方法
+}
+
+export function bindScrollTo (node: TaroElement, instance: any) {
+  bindAttributesCallback(node, 'scrollTo', () => {
+    instance.scroller.scrollTo({
+      xOffset: node._attrs.scrollLeft || 0,
+      yOffset: node._attrs.scrollTop || 0,
+    })
+  })
+}
+
+export function bindFocus (node: TaroElement) {
+  bindAttributesCallback(node, 'focus', () => {
+    // TODO: ETS转TS
+    // focusControl.requestFocus(node._nid)
+  })
+}
+

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

@@ -0,0 +1,135 @@
+import { pxTransformHelper } from '@tarojs/taro'
+
+import { NodeType } from '../dom/node'
+
+import type { CSSProperties } from 'react'
+import type { TaroElement } from '../dom/element'
+import type { TaroNode } from '../dom/node'
+
+export function isElement (node: TaroNode): node is TaroElement {
+  return node.nodeType === NodeType.ELEMENT_NODE
+}
+
+/**
+ * 往上寻找组件树直到 root，寻找是否有祖先组件绑定了同类型的事件
+ * @param node 当前组件
+ * @param type 事件类型
+ */
+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
+      break
+    }
+    node = node.parentElement
+  }
+
+  return res
+}
+
+// FIXME 当前样式转换、@tarojs/runtime 中尺寸使用该方法，暂不修复
+export function convertNumber2PX (value: number) {
+  return pxTransformHelper(value, 'vp')
+}
+
+export function convertNumber2VP (value: number) {
+  return pxTransformHelper(value, 'vp')
+}
+
+export function calcDynamicStyle (styleSheet: Record<string, CSSProperties>, classNames: string, style: CSSProperties): CSSProperties {
+  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])
+    }
+  }
+  obj.push(style)
+  return Object.assign.apply(null, [{}].concat(obj))
+}
+
+export function getPageScrollerOrNode (scrollerOrNode: any, page: any) {
+  if (!page) return scrollerOrNode
+
+  const isArrayData = scrollerOrNode instanceof Array
+
+  if (isArrayData) {
+    const index = page.tabBarCurrentIndex || 0
+
+    return scrollerOrNode[index]
+  }
+
+  return scrollerOrNode
+}
+
+export function ObjectAssign(...objects) {
+  return Object.assign.apply(this, [{}].concat(...objects))
+}
+
+export function callFn (fn: any, ctx: any, ...args: any) {
+  if (typeof fn === 'function') {
+    return fn.apply(ctx, args)
+  }
+}
+export function bindFn (fn: any, ctx: any, ...args: any) {
+  if (typeof fn === 'function') {
+    return fn.bind(ctx, ...args)
+  }
+}
+
+
+// 使用深度优先遍历寻找节点树中对应的子节点，且只需要找到第一个
+// 通过 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 {
+  const queue = [node]
+
+  const nodeList: TaroElement[] = []
+  while (queue.length) {
+    const currentNode = queue.shift()
+    if (currentNode) {
+      if (typeof selector === 'string') {
+        if (selector.startsWith('#')) {
+          // @ts-ignore
+          const id = currentNode.id || currentNode._nid
+          if (id === selector.slice(1)) {
+            nodeList.push(currentNode)
+            if (!selectAll) break
+          }
+        } else {
+          if (currentNode.className?.includes(selector.slice(1))) {
+            nodeList.push(currentNode)
+            if (!selectAll) break
+          }
+        }
+      } else if (typeof selector === 'function') {
+        if (selector(currentNode)) {
+          nodeList.push(currentNode)
+          if (!selectAll) break
+        }
+      }
+
+      if (currentNode.childNodes && currentNode.childNodes.length) {
+        // @ts-ignore
+        queue.push(...currentNode.childNodes)
+      }
+    }
+  }
+
+  if (nodeList.length) {
+    return selectAll ? nodeList : nodeList[0]
+  }
+
+  return null
+}
+
+export type TaroAny = any
+export type TaroFunc = (...args: TaroAny[]) => TaroAny
+export type TaroIndent = string | number | boolean | undefined | null
+export type TaroObject = Record<string | number | symbol, TaroAny>

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

@@ -0,0 +1,128 @@
+import { isFunction } from '@tarojs/shared'
+
+import type { TaroElement } from '../dom/element'
+
+export const AREA_CHANGE_EVENT_NAME = 'areaChange'
+export const VISIBLE_CHANGE_EVENT_NAME = 'visibleChange'
+
+function capitalize (s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+export function createEventOnName (eventName: string) {
+  return `on${capitalize(eventName)}`
+}
+
+export function createEventTapName (eventName: string) {
+  return `is${capitalize(eventName)}Tap`
+}
+
+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
+  } 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
+
+  if (component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) {
+    return (...eventResult: any[]) => {
+      if (!component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) return
+
+      const res = {
+        component,
+        eventResult
+      }
+
+      callback && callback.call(component, res)
+
+      node?.[createEventOnName(eventName)]?.(res)
+    }
+  }
+
+  return null
+}
+
+// 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 }) => {
+    callback && callback(...eventResult)
+  }
+
+  // 是半编译模式的节点但没有自主更新权，需要父节点触发更新
+  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)]) {
+      let onEventPromiseResolve
+      const eventPromise = new Promise(resolve => {
+        onEventPromiseResolve = resolve
+      })
+
+      instance.nodeInfoMap[id].promiseMap[eventName] = eventPromise
+      tapCallbackToNodeAndUpdate(node, eventName, (...eventResult) => {
+        callback && callback(...eventResult)
+
+        onEventPromiseResolve()
+      })
+    }
+
+    await instance.nodeInfoMap[id].promiseMap[eventName]
+  } else {
+    tapCallbackToNodeAndUpdate(node, eventName, callback)
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function bindAttributesCallback (node: TaroElement, attributeName: string, callback: Function) {
+  if (!node) return
+
+  const id = node._nid
+  const component = node._instance
+
+  component.nodeInfoMap[id].attributeCallback[attributeName] = 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]
+    
+    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 = {}
+}