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

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

@@ -0,0 +1,108 @@
+import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+import { isUndefined } from '@tarojs/shared'
+
+import { Current } from '../current'
+import { TaroComment } from './comment'
+import { createCSSStyleDeclaration } from './cssStyleDeclaration'
+import { TaroButtonElement, TaroCheckboxGroupElement, TaroElement, TaroIgnoreElement, TaroImageElement, TaroInputElement, TaroPickerElement, TaroRadioGroupElement, TaroSliderElement, TaroSwitchElement, TaroTextElement, TaroVideoElement, TaroViewElement } from './element'
+import { NodeType, TaroNode } from './node'
+import { TaroTextNode } from './text'
+
+import type { Window } from '../bom/window'
+
+class TaroDocument extends TaroNode {
+  public documentElement: TaroElement
+  public head: TaroElement
+  public body: TaroElement
+  public cookie = ''
+  private _win: Window
+
+  constructor(window: Window) {
+    super('#document', NodeType.DOCUMENT_NODE)
+    this._win = window
+    window._doc = this
+  }
+
+  get defaultView (): Window {
+    return this._win
+  }
+
+  public createElement (tagName: string): TaroElement {
+    let node: TaroElement
+
+    // @ts-ignore
+    if (Current?.createHarmonyElement) {
+      // @ts-ignore
+      node = Current.createHarmonyElement(tagName)
+    } else {
+      switch (tagName) {
+        case 'view':
+          node = new TaroViewElement()
+          break
+        case 'text':
+          node = new TaroTextElement()
+          break
+        case 'image':
+          node = new TaroImageElement()
+          break
+        case 'button':
+          node = new TaroButtonElement()
+          break
+        case 'video':
+          node = new TaroVideoElement()
+          break
+        case 'input':
+          node = new TaroInputElement()
+          break
+        case 'switch':
+          node = new TaroSwitchElement()
+          break
+        case 'slider':
+          node = new TaroSliderElement()
+          break
+        case 'checkbox-group':
+          node = new TaroCheckboxGroupElement()
+          break
+        case 'radio-group':
+          node = new TaroRadioGroupElement()
+          break
+        case 'picker':
+          node = new TaroPickerElement()
+          break
+        case 'ignore':
+          node = new TaroIgnoreElement()
+          break
+        default:
+          node = new TaroElement(tagName)
+      }
+    }
+    node._doc = this
+    // Hack: 此 Proxy 不能放在 Element 类内定义，否则响应式更新会失效
+    node._style = createCSSStyleDeclaration(node)
+    return node
+  }
+
+  public createTextNode (value: string): TaroTextNode {
+    const node = new TaroTextNode(value)
+    node._doc = this
+    return node
+  }
+
+  public createComment (data: string): TaroComment {
+    return new TaroComment(data)
+  }
+
+
+  public getElementById<T extends TaroElement> (id: string | undefined | null): T | null {
+    const el = eventSource.get(id)
+    return isUndefined(el) ? null : el as unknown as T
+  }
+
+  // @Todo
+  // public getElementsByClassName (names: string): TaroElement[]
+  // public querySelector (selectors: string): TaroElement | null
+  // public querySelectorAll (selectors: string): TaroElement[]
+  // public createElementNS
+}
+
+export { TaroDocument }

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

@@ -0,0 +1,457 @@
+// @ts-nocheck
+import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+
+import { 
+  ButtonProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  FormProps,
+  IconProps,
+  ImageProps, InputProps,
+  LabelProps,
+  PickerDateProps,
+  PickerMultiSelectorProps,
+  PickerSelectorProps,
+  PickerTimeProps,
+  RadioGroupProps,
+  RadioProps,
+  RichTextProps,
+  ScrollViewProps,
+  SliderProps,
+  StandardProps,
+  SwiperItemProps,
+  SwiperProps,
+  SwitchProps,
+  TextareaProps,
+  TextProps,
+  VideoProps
+} from '../../components/types'
+import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../constant'
+import { findChildNodeWithDFS, isElement, TaroAny } from '../utils'
+import { triggerAttributesCallback } from '../utils/info'
+import { ClassList } from './class-list'
+import { NodeType, TaroNode } from './node'
+import StyleSheet from './stylesheet'
+
+import type { ICSSStyleDeclaration } from './cssStyleDeclaration'
+
+type NamedNodeMap = ({ name: string, value: string })[]
+
+interface TaroAttributeProps extends StandardProps {
+  compileMode?: string | boolean
+  compileIf?: boolean
+  disabled?: boolean
+}
+
+export class TaroElement<T extends TaroAttributeProps = TaroAttributeProps> extends TaroNode {
+
+  public _attrs: T = {}
+
+  private _innerHTML = ''
+  public readonly tagName: string
+
+  // 用于标记元素是否已经出现
+  private _appearResolve: (value?: unknown) => void
+  public awaitAppear: Promise<unknown>
+  public resolveAppear = () => this._appearResolve()
+
+  // public changeRecord = ''
+
+  constructor(tagName: string) {
+    super(tagName.replace(/(?<=.)([A-Z])/g, '-$1').toUpperCase(), NodeType.ELEMENT_NODE)
+    this.tagName = this.nodeName
+
+    this.awaitAppear = new Promise(resolve => { this._appearResolve = resolve })
+  }
+
+  public set id (value: string) {
+    this.setAttribute('id', value)
+  }
+
+  public get id (): string {
+    return this.getAttribute('id') || this._nid
+  }
+
+  public set className (value: string) {
+    this.setAttribute('class', value)
+  }
+
+  public get className (): string {
+    return this.getAttribute('class') || ''
+  }
+
+  public get classList (): ClassList {
+    return new ClassList(this.className, this)
+  }
+
+  public get attributes (): NamedNodeMap {
+    const list: NamedNodeMap = []
+    for (const name in this._attrs) {
+      const value = this._attrs[name]
+      list.push({ name, value })
+    }
+    return list
+  }
+
+  public get children (): TaroElement[] {
+    return this.childNodes.filter(isElement)
+  }
+
+  public setAttribute (name: string, value: any): void {
+    if (name === ID) {
+      eventSource.delete(this._attrs.id)
+      eventSource.set(value, this as any)
+    }
+
+    this._attrs[name] = value
+
+    const attributeTriggerValue = ATTRIBUTES_CALLBACK_TRIGGER_MAP[name]
+    if (attributeTriggerValue) {
+      const { triggerName, valueInspect } = attributeTriggerValue
+
+      if (valueInspect && !valueInspect(value)) return
+
+      triggerAttributesCallback(this, triggerName)
+    }
+  }
+
+  public getAttribute (name: string): string {
+    return this._attrs[name]
+  }
+
+  public removeAttribute (name: string): void {
+    delete this._attrs[name]
+  }
+
+  public hasAttribute (name: string): boolean {
+    return this._attrs.hasOwnProperty(name)
+  }
+
+  public hasAttributes (): boolean {
+    return Object.keys(this._attrs).length > 0
+  }
+
+  public getElementById (id: string | undefined | null): TaroElement | null {
+    return findChildNodeWithDFS(this, (el) => {
+      return el.id === id
+    }, false)
+  }
+
+  public getElementsByTagName<T> (tagName: string): T[] {
+    return findChildNodeWithDFS(this, (el) => {
+      return el.nodeName === tagName || (tagName === '*' && this !== el)
+    }, true) || []
+  }
+
+  public getElementsByClassName (className: string): TaroElement[] {
+    const classNames = className.trim().split(/\s+/)
+
+    return findChildNodeWithDFS(this, (el) => {
+      const classList = el.classList
+      return classNames.every(c => classList.contains(c))
+    }, true) || []
+  }
+
+  // TODO dataset
+
+  public set innerHTML (value: string) {
+    if (this.nodeType === NodeType.ELEMENT_NODE) {
+      const ele = this.ownerDocument.createElement('inner-html')
+      ele._innerHTML = value
+      this.appendChild(ele)
+    }
+  }
+
+  public get innerHTML (): string {
+    return this._innerHTML
+  }
+
+  public _st = new StyleSheet()
+
+  // 经转换后的鸿蒙样式
+  public get hmStyle () {
+    return this._st.hmStyle
+  }
+
+  public _style: ICSSStyleDeclaration
+
+  public get style (): ICSSStyleDeclaration {
+    return this._style
+  }
+}
+
+export class TaroViewElement extends TaroElement {
+  constructor() {
+    super('View')
+  }
+}
+
+export class TaroTextElement extends TaroElement<TextProps> {
+  constructor() {
+    super('Text')
+  }
+}
+
+export class TaroImageElement extends TaroElement<ImageProps> {
+  constructor() {
+    super('Image')
+  }
+}
+
+export class TaroButtonElement extends TaroElement<ButtonProps> {
+  constructor() {
+    super('Button')
+  }
+}
+
+
+export class TaroFormWidgetElement<T extends TaroAttributeProps = TaroAttributeProps> extends TaroElement<T> {
+
+  public get name () {
+    return this._attrs.name
+  }
+
+  public set name (val) {
+    this._attrs.name = val
+  }
+
+  public get value () {
+    return ''
+  }
+
+  public set value (val: any) {
+    if (this._instance) {
+      this._instance.value = val
+    }
+    this._attrs.value = val
+  }
+}
+
+export class TaroInputElement extends TaroFormWidgetElement<InputProps> {
+  constructor() {
+    super('Input')
+  }
+
+  public get value () {
+    if (this._instance) {
+      return this._instance.text
+    } else {
+      return this._attrs.value || ''
+    }
+  }
+
+  public set value (val) {
+    if (this._instance) {
+      this._instance.text = val
+    }
+    this._attrs.value = val
+  }
+}
+
+export class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
+  constructor() {
+    super('Slider')
+  }
+
+  public get value () {
+    if (this._instance) {
+      return this._instance.value
+    } else {
+      return this._attrs.value || ''
+    }
+  }
+
+  public set value (val) {
+    if (this._instance) {
+      this._instance.value = val
+    }
+  }
+}
+
+export class TaroSwitchElement extends TaroFormWidgetElement<SwitchProps> {
+  constructor() {
+    super('Switch')
+  }
+
+  public get value () {
+    if (this._instance) {
+      return this._instance.value
+    } else {
+      return this._attrs.checked || ''
+    }
+  }
+
+  public set value (val) {
+    if (this._instance) {
+      this._instance.value = val
+    }
+  }
+}
+
+export class TaroCheckboxGroupElement extends TaroFormWidgetElement<CheckboxGroupProps> {
+  constructor() {
+    super('CheckboxGroup')
+  }
+
+  public get value () {
+    if (this._instance) {
+      return this._instance.getValues()
+    }
+  }
+}
+
+export class TaroRadioGroupElement extends TaroFormWidgetElement<RadioGroupProps> {
+  constructor() {
+    super('RadioGroup')
+  }
+
+  public get value () {
+    if (this._instance) {
+      return this._instance.getValue()
+    }
+  }
+
+}
+
+export class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | PickerTimeProps | PickerDateProps | PickerMultiSelectorProps> {
+  constructor() {
+    super('Picker')
+  }
+
+  public get value () {
+    if (this._instance) {
+      if (this._instance.select instanceof Array) {
+        return this._instance.select.join(',')
+      }
+      return this._instance.select
+    }
+  }
+
+  public set value (val) {
+    if (this._instance) {
+      this._instance.select = val
+    }
+  }
+}
+
+export class TaroVideoElement extends TaroElement<VideoProps> {
+  constructor() {
+    super('Video')
+  }
+
+  async play() {
+    try {
+      this._instance.controller.start()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  pause() {
+    try {
+      this._instance.controller.pause()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  stop() {
+    try {
+      this._instance.controller.stop()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  get currentTime() {
+    return this._instance.nodeInfoMap[this._nid].currentTime || 0
+  }
+
+  set currentTime(val: number) {
+    this._instance.nodeInfoMap[this._nid].currentTime = val
+    this._instance.controller.setCurrentTime(val)
+  }
+}
+
+export class TaroScrollViewElement extends TaroElement<ScrollViewProps> {
+  constructor() {
+    super('ScrollView')
+  }
+}
+export class TaroCheckboxElement extends TaroElement<CheckboxProps> {
+  constructor() {
+    super('Checkbox')
+  }
+}
+export class TaroRadioElement extends TaroElement<RadioProps> {
+  constructor() {
+    super('Radio')
+  }
+  
+  public group?: string
+}
+export class TaroIconElement extends TaroElement<IconProps> {
+  constructor() {
+    super('Icon')
+  }
+}
+export class TaroLabelElement extends TaroElement<LabelProps> {
+  constructor() {
+    super('Label')
+  }
+}
+export class TaroRichTextElement extends TaroElement<RichTextProps> {
+  constructor() {
+    super('RichText')
+  }
+}
+export class TaroSwiperElement extends TaroElement<SwiperProps> {
+  constructor() {
+    super('Swiper')
+  }
+}
+export class TaroSwiperItemElement extends TaroElement<SwiperItemProps> {
+  constructor() {
+    super('SwiperItem')
+  }
+}
+export class TaroTextAreaElement extends TaroElement<TextareaProps> {
+  constructor() {
+    super('TextArea')
+  }
+}
+
+export class TaroIgnoreElement extends TaroElement {
+  isIgnore = true
+
+  constructor() {
+    super('Ignore')
+  }
+}
+
+export class FormElement extends TaroElement<FormProps> {
+  constructor() {
+    super('Form')
+  }
+  // public get type () {
+  //   return this._attrs.type ?? ''
+  // }
+  //
+  // public set type (val: string) {
+  //   this.setAttribute('type', val)
+  // }
+
+  public get value () {
+    // eslint-disable-next-line dot-notation
+    const val = this._attrs.value
+    return val == null ? '' : val
+  }
+
+  public set value (val: string | boolean | number | any[]) {
+    this.setAttribute('value', val)
+  }
+}
+

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

@@ -0,0 +1,164 @@
+import { hooks } from '@tarojs/shared'
+
+import { CONFIRM, CURRENT_TARGET, INPUT, KEY_CODE, TARGET, TIME_STAMP, TYPE } from '../constant'
+import { TaroElement } from './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)) {
+    event.currentTarget = target
+    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',
+  'touchMove',
+  'touchEnd',
+  'touchCancel',
+  '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) {
+  if (!node) return
+
+  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]
+      }
+    })
+  }
+}