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

package/dist/runtime/runtime-cpp/dom/event.ts

@@ -0,0 +1,187 @@
+import { hooks } from '@tarojs/shared'
+
+import { CONFIRM, CURRENT_TARGET, INPUT, KEY_CODE, TARGET, TIME_STAMP, TYPE } from '../constant'
+import { TaroElement } from './element/element'
+
+import type { EventOptions } from '../interface'
+
+// Taro 事件对象。以 Web 标准的事件对象为基础，加入小程序事件对象中携带的部分信息，并模拟实现事件冒泡。
+export class TaroEvent<T = any> {
+  public type: string
+
+  public bubbles: boolean
+
+  public cancelable: boolean
+
+  public _stop = false
+
+  public _end = false
+
+  public defaultPrevented = false
+
+  public target: TaroElement
+
+  public currentTarget: TaroElement
+
+  /** 额外的信息 */
+  public detail: T
+
+  // Mouse Event botton property, it's used in 3rd lib, like react-router. default 0 in general
+  public button = 0
+
+  // timestamp can either be hi-res ( relative to page load) or low-res (relative to UNIX epoch)
+  // here use hi-res timestamp
+  public timeStamp = Date.now()
+
+  public mpEvent: TaroEvent | undefined
+
+  public constructor (type: string, opts: EventOptions, event?: TaroEvent) {
+    this.type = type.toLowerCase()
+    this.mpEvent = event
+    this.bubbles = Boolean(opts && opts.bubbles)
+    this.cancelable = Boolean(opts && opts.cancelable)
+  }
+
+  public stopPropagation () {
+    this._stop = true
+  }
+
+  public stopImmediatePropagation () {
+    this._end = this._stop = true
+  }
+
+  public preventDefault () {
+    this.defaultPrevented = true
+  }
+}
+
+export function createEvent (event: TaroEvent | string, type?: string, node?: TaroElement) {
+  if (typeof event === 'string') {
+    // For Vue3 using document.createEvent
+    return new TaroEvent(event, { bubbles: true, cancelable: true })
+  }
+
+  if (!type) return
+
+  const domEv = new TaroEvent(type, { bubbles: true, cancelable: true }, event)
+
+  for (const key in event) {
+    if (key === CURRENT_TARGET || key === TARGET || key === TYPE || key === TIME_STAMP) {
+      continue
+    } else {
+      domEv[key] = event[key]
+    }
+  }
+
+  if (domEv.type === CONFIRM && node?.nodeName === INPUT) {
+    // eslint-disable-next-line dot-notation
+    domEv[KEY_CODE] = 13
+  }
+
+  return domEv
+}
+
+// function stopOrTriggerPropagation (event: TaroEvent, node: TaroElement) {
+//   let target = node
+
+//   // eslint-disable-next-line no-unmodified-loop-condition
+//   while ((target = target.parentNode as TaroElement)) {
+//     const listeners = target.__listeners[event.type]
+
+//     if (!Array.isArray(listeners) || target._attrs?.disabled) {
+//       continue
+//     }
+
+//     const _target = target
+//     collectBatchFunction(event.type, () => {
+//       hooks.call('dispatchTaroEvent', event, _target)
+//     })
+//   }
+// }
+
+// const eventsBatch = {}
+// const BUBBLE_EVENTS = new Set([
+//   // 'touchstart', // Note: CAPI 目前没有事件捕获，暂时禁用
+//   // 'touchmove', // Note: CAPI 目前没有事件捕获，暂时禁用
+//   // 'touchend', // Note: CAPI 目前没有事件捕获，暂时禁用
+//   // 'touchcancel', // Note: CAPI 目前没有事件捕获，暂时禁用
+//   // Note: 鸿蒙当前不支持以下事件冒泡
+//   'click',
+//   'longtap',
+//   'change',
+//   'submit',
+//   'submit-btn',
+//   'reset-btn'
+// ])
+
+// function collectBatchFunction (type: string, dispatch: () => void) {
+//   if (hooks.isExist('batchedEventUpdates')) {
+//     (eventsBatch[type] ||= []).push(dispatch)
+//   } else {
+//     dispatch()
+//   }
+// }
+
+export function eventHandler (event, _type: string, node: TaroElement): void {
+  if (!node) return
+
+  hooks.call('dispatchTaroEvent', event, node)
+  // const isBatchUpdates = hooks.isExist('batchedEventUpdates')
+  // const e = createEvent(event, type, node)
+
+  // if (!e) return
+
+  // const dispatch = () => {
+  //   e.target = e.currentTarget = node
+
+  //   // hooks.call('modifyTaroEvent', e, node)
+  //   hooks.call('dispatchTaroEvent', e, node)
+
+  //   // BatchUpdates 时冒泡环节需要提前，因为需要收集父节点事件
+  //   if (!isBatchUpdates) {
+  //     stopOrTriggerPropagation(e, node)
+  //   }
+
+  //   // hooks.call('dispatchTaroEventFinish', e, node)
+  // }
+
+  // dispatch()
+  // if (isBatchUpdates) {
+  //   // collectBatchFunction(type, dispatch)
+
+  //   // 如果需要触发冒泡，则执行 stopOrTriggerPropagation
+  //   if (BUBBLE_EVENTS.has(type)) {
+  //     stopOrTriggerPropagation(e, node)
+  //   }
+
+  //   hooks.call('batchedEventUpdates', () => {
+  //     if (eventsBatch[type]) {
+  //       eventsBatch[type].forEach(fn => fn())
+  //       delete eventsBatch[type]
+  //     }
+  //   })
+  // }
+}
+
+export function createTaroEvent(type: string, opts: Partial<EventOptions> = {}, node?: TaroElement) {
+  opts.bubbles ||= true
+  opts.cancelable ||= true
+  const e = new TaroEvent(type, opts as Required<EventOptions>)
+
+  if (node) {
+    const properties: Record<string, PropertyDescriptor> = {}
+    properties.target = properties.currentTarget = {
+      get() {
+        return node
+      }
+    }
+    Object.defineProperties(e, properties)
+  }
+  for (const key in opts) {
+    if (['bubbles', 'cancelable'].includes(key)) {
+      continue
+    }
+    e[key] = opts[key]
+  }
+  return e
+}

package/dist/runtime/runtime-cpp/dom/eventTarget.ts

@@ -0,0 +1,81 @@
+import { Events } from '../emitter/emitter'
+import { TaroNativeModule } from '../harmony-library'
+import { TaroEvent } from './event'
+
+import type { EventHandler } from '../interface'
+
+interface IOptions {
+  capture?: boolean
+  once?: boolean
+  passive?: boolean
+}
+
+type fn = (...args: any[]) => any
+
+class TaroEventTarget extends Events {
+  __listeners: Record<string, EventHandler[]> = {}
+
+  public addEventListener (type: string, listener: fn, options?: IOptions) {
+    const once = options?.once ?? false
+
+    if (once) {
+      const wrapper = () => {
+        listener.apply(this, arguments)
+        this.removeEventListener(type, wrapper)
+      }
+      this.addEventListener(type, wrapper)
+    }
+
+    const listeners = this.__listeners[type]
+    if (Array.isArray(listeners)) {
+      listeners.push(listener)
+    } else {
+      this.__listeners[type] = [listener]
+    }
+    TaroNativeModule.registerNodeEvent(this, type, listener)
+  }
+
+  public removeEventListener (type: string, listener: fn) {
+    const listeners = this.__listeners[type]
+    if (listeners?.length) {
+      this.__listeners[type] = listeners.filter(item => item !== listener)
+
+      if (this.__listeners[type].length === 0) {
+        delete this.__listeners[type]
+      }
+    }
+    TaroNativeModule.unRegisterNodeEvent(this, type, listener)
+  }
+
+  // TODO 转成 C++ 实现
+  public dispatchEvent (event: TaroEvent) {
+    const cancelable = event.cancelable
+    const listeners = this.__listeners[event.type]
+
+    if (!Array.isArray(listeners)) {
+      return false
+    }
+
+    for (let i = listeners.length; i--;) {
+      const listener = listeners[i]
+      let result: unknown
+      if (listener._stop) {
+        listener._stop = false
+      } else {
+        result = listener.call(this, event)
+      }
+
+      if ((result === false || event._end) && cancelable) {
+        event.defaultPrevented = true
+      }
+
+      if (event._end && event._stop) {
+        break
+      }
+    }
+
+    return listeners != null
+  }
+}
+
+export { TaroEventTarget }

package/dist/runtime/runtime-cpp/dom/node.ts

@@ -0,0 +1,307 @@
+import { isString } from '@tarojs/shared'
+
+import { TaroNativeModule } from '../harmony-library'
+import { printInfo, runInDebug } from '../utils/info'
+import { TaroEventTarget } from './eventTarget'
+
+import type { TaroAny } from '../interface'
+import type { TaroDocument } from './document'
+import type { TaroElement } from './element/element'
+
+const registry = new FinalizationRegistry((val) => {
+  runInDebug(() => {
+    printInfo('FinalizationRegistry', val)
+  })
+})
+
+export enum NodeType {
+  ELEMENT_NODE = 1,
+  ATTRIBUTE_NODE = 2,
+  TEXT_NODE = 3,
+  CDATA_SECTION_NODE = 4,
+  ENTITY_REFERENCE_NODE = 5,
+  PROCESSING_INSTRUCTION_NODE = 7,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11
+}
+
+let _id = 0
+function genId (): number {
+  return ++_id
+}
+
+export class TaroNode extends TaroEventTarget {
+  public readonly nodeName: string
+  public readonly nodeType: NodeType
+  public _nid: number = genId()
+  public _doc: TaroDocument | null = null
+  public get _instance (): TaroAny {
+    return null
+  }
+
+  public set _instance (_) {}
+
+  private _textContent = ''
+  private _childNodes: TaroNode[] | null = null
+  private _parentNode: TaroNode | null = null
+
+  // 以下属性为原生混写组件才有意义的属性
+  public _nativeUpdateTrigger = 0
+
+  constructor(nodeName: string, nodeType = NodeType.ELEMENT_NODE) {
+    super()
+
+    this.nodeType = nodeType
+    this.nodeName = nodeName
+    registry.register(this, `nodeName: ${nodeName}; nid: ${this._nid}; nodeType: ${nodeType};`)
+  }
+
+  public getStrNid() {
+    return `n_${this._nid}`
+  }
+
+  public getNumNid(id) {
+    return +id.slice(2)
+  }
+
+  // 提供唯一标识，方便与小程序一致，能根据uid获取到对应的节点
+  public get uid (): string {
+    return `${this._nid}`
+  }
+
+  public get firstChild (): TaroNode | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'firstChild') || null
+  }
+
+  public get firstElementChild (): TaroElement | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'firstElementChild') || null
+  }
+
+  public get lastChild (): TaroNode | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'lastChild') || null
+  }
+
+  public get lastElementChild (): TaroElement | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'lastElementChild') || null
+  }
+
+  public get nextSibling (): TaroNode | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'nextSibling') || null
+  }
+
+  public get previousSibling (): TaroNode | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'previousSibling') || null
+  }
+
+  public get parentElement (): TaroElement | null {
+    return TaroNativeModule.getTaroNodeProperty(this, 'parentElement') || null
+  }
+
+  public get textContent (): string {
+    return this._textContent || ''
+  }
+
+  public set textContent (value: string) {
+    // APP 节点在缓存的情况下会被手动 append 到页面上，因此 APP 不能清空内容，否则会导致页面 crash
+    if (this.nodeName === 'APP') return
+
+    if (this.nodeType === NodeType.TEXT_NODE) {
+      this._textContent = value
+      runInDebug(() => {
+        printInfo('setAttribute', 'textContent', this._nid, this.parentNode?.nodeName, this.nodeName, this._textContent)
+      })
+      TaroNativeModule.setTaroNodeAttribute(this, 'textContent', this._textContent)
+    } else if (this.nodeType === NodeType.ELEMENT_NODE) {
+      const node = new TaroTextNode(value)
+      node._doc = this.ownerDocument
+      runInDebug(() => {
+        printInfo('appendChild', 'textContent', this._nid, node._nid, this.parentNode?.nodeName, this.nodeName, value)
+      })
+      TaroNativeModule.appendTaroNode(this, node)
+    }
+  }
+
+  public get childNodes (): TaroNode[] {
+    if (this._childNodes) {
+      return this._childNodes!
+    }
+
+    this._childNodes = TaroNativeModule.getTaroNodeProperty(this, 'childNodes')
+
+    return this._childNodes! || []
+  }
+
+  public get parentNode (): TaroNode | null {
+    if (this._parentNode) {
+      return this._parentNode
+    }
+
+    this._parentNode = TaroNativeModule.getTaroNodeProperty(this, 'parentNode')
+
+    return this._parentNode
+  }
+
+  public get nodeValue (): string | null {
+    switch (this.nodeType) {
+      case NodeType.TEXT_NODE:
+        return this.textContent
+      case NodeType.COMMENT_NODE:
+        return 'comment'
+      default:
+        return null
+    }
+  }
+
+  public set nodeValue (value: string | null) {
+    if (this.nodeType === NodeType.TEXT_NODE && value) {
+      this.textContent = value
+    }
+  }
+
+  public get ownerDocument (): TaroDocument | null {
+    return this._doc
+  }
+
+  public hasChildNodes (): boolean {
+    return this.childNodes.length > 0
+  }
+
+  // TODO cloneNode()、contains()
+
+  public appendChild (child: TaroElement): TaroNode {
+    // FIXME: 后续移除
+    if ((this as any).isETS) {
+      (this as any).notifyDataAdd?.(this.childNodes.length - 1)
+    }
+
+    runInDebug(() => {
+      printInfo('appendChild', this._nid, child._nid, this.parentNode?.nodeName, this.nodeName, child.nodeName)
+    })
+    TaroNativeModule.appendTaroNode(this, child)
+
+    child._parentNode = this
+    this._childNodes = null
+    return child
+  }
+
+  public insertBefore (newNode: TaroElement, referenceNode?: TaroNode): TaroNode {
+    if (!referenceNode) {
+      this.appendChild(newNode)
+    } else {
+      // FIXME: 后续移除
+      if ((this as any).isETS) {
+        (this as any).notifyDataReload?.()
+      }
+
+      runInDebug(() => {
+        printInfo('insertBefore', this.parentNode?.nodeName, this._nid, referenceNode._nid, this.nodeName)
+      })
+      TaroNativeModule.insertBeforeTaroNode(this, newNode, referenceNode)
+    }
+
+    newNode._parentNode = this
+    this._childNodes = null
+    return newNode
+  }
+
+  public replaceChild (newChild: TaroNode, oldChild: TaroNode): TaroNode {
+    // FIXME: 后续移除
+    if ((this as any).isETS) {
+      (this as any).notifyDataChange?.((this as any).findIndex(oldChild))
+    }
+
+    runInDebug(() => {
+      printInfo('replaceChild', this.parentNode?.nodeName, this._nid, newChild._nid, this.nodeName)
+    })
+    TaroNativeModule.replaceTaroNode(this, newChild, oldChild)
+    newChild._parentNode = this
+    oldChild._parentNode = null
+    this._childNodes = null
+    return oldChild
+  }
+
+  public removeChild (child: TaroNode): TaroNode {
+    // FIXME: 后续移除
+    if ((this as any).isETS) {
+      (this as any).notifyDataChange?.((this as any).findIndex(child))
+    }
+
+    runInDebug(() => {
+      // @ts-ignore
+      printInfo('removeChild', this.parentNode?.nodeName, this._nid, child._nid, this.nodeName, '-', this.className, '-', child.className)
+    })
+    TaroNativeModule.removeTaroNode(this, child)
+    child._parentNode = this
+    this._childNodes = null
+    return child
+  }
+
+  public getElementById<T extends TaroNode = TaroElement> (id?: string): T | null {
+    runInDebug(() => {
+      printInfo('getElementById', this._nid, this.nodeName, 'id:', id)
+    })
+    return isString(id) ? TaroNativeModule.getTaroNodeById(this, id) : null
+  }
+
+  public getElementsByTagName<T extends TaroNode = TaroElement>(tagName: string): T[] {
+    runInDebug(() => {
+      printInfo('getElementsByTagName', this._nid, this.nodeName, 'tagName:', tagName)
+    })
+    return (isString(tagName) ? TaroNativeModule.getTaroNodesByTagName(this, tagName) : null) || []
+  }
+
+  public getElementsByClassName<T extends TaroNode = TaroElement>(className: string): T[] {
+    runInDebug(() => {
+      printInfo('getElementsByClassName', this._nid, this.nodeName, 'className:', className)
+    })
+    return (isString(className) ? TaroNativeModule.getTaroNodesByClassName(this, className) : null) || []
+  }
+
+  public querySelector (selectors: string): TaroElement | null {
+    runInDebug(() => {
+      printInfo('querySelector', this._nid, this.nodeName, 'selectors:', selectors)
+    })
+    const result = isString(selectors) ? TaroNativeModule.querySelectDOMSync(this, selectors, false) : null
+
+    return !result || !result.length ? null : result[0]
+  }
+
+  public querySelectorAll (selectors: string): TaroElement[] {
+    runInDebug(() => {
+      printInfo('querySelectorAll', this._nid, this.nodeName, 'selectors:', selectors)
+    })
+    const result = isString(selectors) ? TaroNativeModule.querySelectDOMSync(this, selectors, true) : null
+
+    return !result || !result.length ? [] : result
+  }
+
+  public getComputedStyle () {
+    // Note: HiLog 直接输出 Proxy 对象会崩溃，后续切换到 JSVM 如果还存在这个问题可以再做优化
+    return new Proxy({}, {
+      get: (_, name = '') => {
+        runInDebug(() => {
+          printInfo('getComputedStyle', this._nid, this.nodeName, 'name:', name)
+        })
+        return isString(name) ? TaroNativeModule.getComputedStyle(this, name) : null
+      }
+    })
+  }
+}
+
+export class TaroTextNode extends TaroNode {
+  constructor(value = '', nodeName = '#text', nodeType: NodeType = NodeType.TEXT_NODE) {
+    super(nodeName, nodeType)
+    TaroNativeModule.createTaroNode(this)
+    this.textContent = value
+  }
+
+  public get data (): string {
+    return this.textContent
+  }
+
+  public set data (value: string) {
+    this.textContent = value
+  }
+}

package/dist/runtime/runtime-cpp/dom/style.ts

@@ -0,0 +1,44 @@
+import { isNull, isUndefined } from '@tarojs/shared'
+
+import type { TaroAny } from '../interface'
+
+export class Style {
+  public _pending: boolean
+
+  public _value: TaroAny
+
+  public constructor (_) {
+    this._value = {}
+  }
+
+  public get cssText () {
+    return ''
+  }
+
+  public set cssText (_str: string) {
+    // TODO
+  }
+
+  public setProperty (propertyName: string, value?: string | null) {
+    if (propertyName[0] === '-') {
+      // Note: 暂不支持 webkit 属性或 css 变量
+      return
+    }
+
+    if (isNull(value) || isUndefined(value)) {
+      this.removeProperty(propertyName)
+    } else {
+      // TODO setProperty
+    }
+  }
+
+  public removeProperty (_propertyName: string): string {
+    // TODO: removeProperty
+    return ''
+  }
+
+  public getPropertyValue (_propertyName: string) {
+    // TODO: getPropertyValue
+    return ''
+  }
+}