@tarojs/plugin-platform-harmony-ets 4.0.0-beta.21 → 4.0.0-beta.23

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

@@ -0,0 +1,136 @@
+import { eventSource, TaroAny, TaroNode } from '@tarojs/runtime'
+
+import { TaroElement } from './element'
+
+import type { CanvasProps, CanvasTouchEvent } from '@tarojs/components/types'
+
+export class CanvasRenderingContext2DWXAdapter extends CanvasRenderingContext2D {
+  // constructor(settings?: RenderingContextSetting) {
+  //   super(settings)
+  // }
+
+  createCircularGradient() {
+    // Not supported now
+  }
+
+  draw(cb?: (...args: any[]) => any) {
+    typeof cb === 'function' && cb()
+    // Not supported now
+  }
+
+  setFillStyle(fillStyle: typeof this.fillStyle) {
+    this.fillStyle = fillStyle
+  }
+
+  setFontSize(fontSize: number) {
+    const font = this.font.split(' ')
+    font[2] = `${fontSize}`
+    this.font = font.join(' ')
+  }
+
+  setGlobalAlpha(globalAlpha: typeof this.globalAlpha) {
+    this.globalAlpha = globalAlpha
+  }
+
+  setLineCap(lineCap: typeof this.lineCap) {
+    this.lineCap = lineCap
+  }
+
+  setLineJoin(lineJoin: typeof this.lineJoin) {
+    this.lineJoin = lineJoin
+  }
+
+  setLineWidth(lineWidth: typeof this.lineWidth) {
+    this.lineWidth = lineWidth
+  }
+
+  setMiterLimit(miterLimit: typeof this.miterLimit) {
+    this.miterLimit = miterLimit
+  }
+
+  setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+    this.shadowOffsetX = offsetX
+    this.shadowOffsetY = offsetY
+    this.shadowBlur = blur
+    this.shadowColor = color
+  }
+
+  setStrokeStyle(strokeStyle: typeof this.strokeStyle) {
+    this.strokeStyle = strokeStyle
+  }
+
+  setTextAlign(textAlign: typeof this.textAlign) {
+    this.textAlign = textAlign
+  }
+
+  setTextBaseline(textBaseline: typeof this.textBaseline) {
+    this.textBaseline = textBaseline
+  }
+}
+function getContextKey(obj) {
+  let currentObj = obj
+  let res = []
+  while (currentObj) {
+    if (currentObj instanceof CanvasRenderingContext2D) {
+      res = [...res, ...Object.getOwnPropertyNames(currentObj)]
+    }
+    currentObj = Object.getPrototypeOf(currentObj)
+  }
+  return res
+}
+
+@Observed
+export class TaroCanvasElement extends TaroElement<CanvasProps, CanvasTouchEvent> {
+  _drawList: {
+    key: string
+    value: TaroAny
+  }[] = []
+
+  settings: RenderingContextSettings
+  _context: CanvasRenderingContext2D
+  _contextProxy: CanvasRenderingContext2D
+
+  constructor() {
+    super('Canvas')
+    this.settings = new RenderingContextSettings(true)
+    const context = new CanvasRenderingContext2DWXAdapter(this.settings) as CanvasRenderingContext2D
+    this._context = context
+
+    const proxyObj = getContextKey(context).reduce((obj, key) => {
+      if (typeof context[key] === 'function') {
+        obj[key] = new Proxy(context[key], {
+          apply: (target, thisArg, argumentsList) => {
+            this._drawList.push({
+              key,
+              value: argumentsList,
+            })
+          },
+        })
+      } else {
+        obj[key] = context[key]
+      }
+      return obj
+    }, {})
+
+    this._contextProxy = new Proxy(proxyObj, {
+      set: (_, property, value) => {
+        this._drawList.push({
+          key: property,
+          value,
+        })
+        return true
+      },
+    })
+  }
+
+  get context() {
+    return this._contextProxy
+  }
+
+  public setAttribute(name: string, value: TaroAny): void {
+    if (name === 'canvasId') {
+      eventSource.set(`canvasId-${value}`, this as TaroNode)
+    }
+    super.setAttribute(name, value)
+  }
+}

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

@@ -10,10 +10,10 @@ import { type ICSSStyleDeclaration, createCSSStyleDeclaration } from '../cssStyl
 import { NodeType, TaroNode } from '../node'
 import StyleSheet, { HarmonyStyle } from '../stylesheet'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { BaseTouchEvent, ITouchEvent, StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
 
-type NamedNodeMap = ({ name: string, value: string })[]
+type NamedNodeMap = { name: string, value: string }[]
 
 export interface TaroExtraProps {
   compileMode?: string | boolean
@@ -21,8 +21,12 @@ export interface TaroExtraProps {
   disabled?: boolean
 }
 
-export class TaroElement<T extends StandardProps = StandardProps> extends TaroNode {
+export class TaroElement<
+  T extends StandardProps<any, U> = StandardProps,
+  U extends BaseTouchEvent<any> = ITouchEvent
+> extends TaroNode {
   public _innerHTML = ''
+  public _instance: TaroAny
   public _nodeInfo: TaroAny = {}
   public readonly tagName: string
   public dataset: Record<string, unknown> = EMPTY_OBJ
@@ -36,30 +40,30 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     bindAnimation(this)
   }
 
-  public set id (value: string) {
+  public set id(value: string) {
     this.setAttribute('id', value)
   }
 
-  public get id (): string {
+  public get id(): string {
     return this.getAttribute('id') || this._nid
   }
 
-  public set className (value: string) {
+  public set className(value: string) {
     this.setAttribute('class', value)
   }
 
-  public get className (): string {
+  public get className(): string {
     return this.getAttribute('class') || ''
   }
 
-  public get classList (): ClassList {
+  public get classList(): ClassList {
     return new ClassList(this.className, this)
   }
 
-  public get attributes (): NamedNodeMap {
+  public get attributes(): NamedNodeMap {
     const list: NamedNodeMap = []
 
-    Object.keys(this._attrs).forEach(name => {
+    Object.keys(this._attrs).forEach((name) => {
       const value: TaroAny = this._attrs[name]
 
       list.push({ name, value })
@@ -68,11 +72,11 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     return list
   }
 
-  public get children (): TaroElement[] {
-    return this.childNodes.filter(node => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
+  public get children(): TaroElement[] {
+    return this.childNodes.filter((node) => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
   }
 
-  public setAttribute (name: string, value: TaroAny): void {
+  public setAttribute(name: string, value: TaroAny): void {
     switch (name) {
       case ID:
         eventSource.delete(this._attrs.id)
@@ -88,11 +92,6 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
         break
     }
 
-    if (name === ID) {
-      eventSource.delete(this._attrs.id)
-      eventSource.set(value, this as TaroAny)
-    }
-
     this._attrs[name] = value
 
     const attributeTriggerValue: TaroAny = ATTRIBUTES_CALLBACK_TRIGGER_MAP[name]
@@ -106,48 +105,64 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public getAttribute (name: string): string {
+  public getAttribute(name: string): string {
     return this._attrs[name]
   }
 
-  public removeAttribute (name: string): void {
+  public removeAttribute(name: string): void {
     this._attrs[name] = null
   }
 
-  public hasAttribute (name: string): boolean {
+  public hasAttribute(name: string): boolean {
     return !!this._attrs[name]
   }
 
-  public hasAttributes (): boolean {
+  public hasAttributes(): boolean {
     return Object.keys(this._attrs).length > 0
   }
 
-  public getElementById<T extends TaroElement = TaroElement> (id: string | undefined | null) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.id === id
-    }, false)
+  public getElementById<T extends TaroElement = TaroElement>(id: string | undefined | null) {
+    return findChildNodeWithDFS<T>(
+      this as TaroAny,
+      (el) => {
+        return el.id === id
+      },
+      false
+    )
   }
 
-  public getElementsByTagName<T extends TaroElement = TaroElement> (tagName: string) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.nodeName === tagName || (tagName === '*' && this as TaroAny !== el)
-    }, true) || []
+  public getElementsByTagName<T extends TaroElement = TaroElement>(tagName: string) {
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          return el.nodeName === tagName || (tagName === '*' && (this as TaroAny) !== el)
+        },
+        true
+      ) || []
+    )
   }
 
-  public getElementsByClassName<T extends TaroElement = TaroElement> (className: string) {
+  public getElementsByClassName<T extends TaroElement = TaroElement>(className: string) {
     const classNames = className.trim().split(new RegExp('\\s+'))
 
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      const classList = el.classList
-      return classNames.every(c => {
-        const bool = classList.contains(c)
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          const classList = el.classList
+          return classNames.every((c) => {
+            const bool = classList.contains(c)
 
-        return bool
-      })
-    }, true) || []
+            return bool
+          })
+        },
+        true
+      ) || []
+    )
   }
 
-  public set innerHTML (value: string) {
+  public set innerHTML(value: string) {
     if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
       const ele = this.ownerDocument.createElement('inner-html')
       ele._innerHTML = value
@@ -155,7 +170,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public get innerHTML (): string {
+  public get innerHTML(): string {
     return this._innerHTML
   }
 
@@ -163,13 +178,13 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public _st = new StyleSheet()
 
   // 经转换后的鸿蒙样式
-  public get hmStyle () {
+  public get hmStyle() {
     return this._st.hmStyle
   }
 
   public _style: ICSSStyleDeclaration | null = null
 
-  public get style (): ICSSStyleDeclaration | null {
+  public get style(): ICSSStyleDeclaration | null {
     return this._style
   }
 
@@ -177,7 +192,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   // 可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
   public _pseudo_before: StyleSheet | null = null
 
-  public set_pseudo_before (value: HarmonyStyle | null) {
+  public set_pseudo_before(value: HarmonyStyle | null) {
     if (value) {
       if (!this._pseudo_before) {
         this._pseudo_before = new StyleSheet()
@@ -192,7 +207,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
 
   public _pseudo_after: StyleSheet | null = null
 
-  public set_pseudo_after (value: HarmonyStyle | null) {
+  public set_pseudo_after(value: HarmonyStyle | null) {
     if (value) {
       if (!this._pseudo_after) {
         this._pseudo_after = new StyleSheet()

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

@@ -29,14 +29,10 @@ interface FormWidgetProps extends StandardProps {
 }
 
 class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends TaroElement<T> {
-  _instance
-
   _isInit = false
 
   _name = ''
 
-  _value: TaroAny = ''
-
   _reset: TaroAny = ''
 
   constructor (tagName: string) {
@@ -45,7 +41,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
     bindFocus(this)
 
     this._name = this._attrs.name || ''
-    this._value = this._attrs.value || ''
+    this._nodeInfo._value = this._attrs.value || ''
   }
 
   public setAttribute (name: string, value: any): void {
@@ -66,11 +62,10 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
   public set name (val: string) {
     this.updateFormWidgetName(val)
-    this.updateComponent()
   }
 
   public get value () {
-    return this._value
+    return this._nodeInfo._value
   }
 
   public set value (val: TaroAny) {
@@ -78,8 +73,6 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
     if (this._instance) {
       this._instance.value = val
-    } else {
-      this.updateComponent()
     }
   }
 
@@ -89,7 +82,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
   }
 
   public updateFormWidgetValue (val: TaroAny) {
-    this._value = val
+    this._nodeInfo._value = val
     this._attrs.value = val
   }
 
@@ -121,7 +114,6 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
 
   set checked (val: boolean) {
     this.updateCheckedValue(val)
-    this.updateComponent()
   }
 
   public updateCheckedValue (val: boolean) {
@@ -220,12 +212,10 @@ class TaroRadioElement extends TaroCheckedElement<RadioProps>{
 
 @Observed
 class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
-  _value = 0
-
   constructor() {
     super('Slider')
 
-    this._value = Number(this._attrs.value || 0)
+    this._nodeInfo._value = Number(this._attrs.value || 0)
   }
 }
 @Observed

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

@@ -1,5 +1,6 @@
 import { Current } from '../../current'
 import { TaroTextNode } from '../node'
+import { TaroCanvasElement } from './canvas'
 import { TaroElement } from './element'
 import {
   FormElement,
@@ -55,6 +56,7 @@ export function initHarmonyElement () {
       case 'icon': return new TaroIconElement()
       case 'label': return new TaroLabelElement()
       case 'rich-text': return new TaroRichTextElement()
+      case 'canvas': return new TaroCanvasElement()
       case 'swiper': return new TaroSwiperElement()
       case 'swiper-item': return new TaroSwiperItemElement()
       case 'textarea': return new TaroTextAreaElement()
@@ -74,6 +76,7 @@ export function initHarmonyElement () {
 export {
   FormElement,
   TaroButtonElement,
+  TaroCanvasElement,
   TaroCheckboxElement,
   TaroCheckboxGroupElement,
   TaroElement,
@@ -99,5 +102,4 @@ export {
   TaroTextElement,
   TaroVideoElement,
   TaroViewElement,
-  TaroWebViewElement
-}
+  TaroWebViewElement }

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

@@ -8,6 +8,5 @@ export class TaroProgressElement extends TaroElement<ProgressProps> {
 
   constructor() {
     super('Progress')
-
   }
 }

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

@@ -1,4 +1,3 @@
-import { TaroNode } from '../node'
 import { TaroElement } from './element'
 
 import type { TextProps } from '@tarojs/components/types'
@@ -8,11 +7,4 @@ export class TaroTextElement extends TaroElement<TextProps> {
   constructor() {
     super('Text')
   }
-
-  public appendChild (child: TaroNode): TaroNode {
-    super.appendChild(child)
-
-    this.updateComponent()
-    return child
-  }
 }

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

@@ -4,12 +4,13 @@ import type { VideoProps } from '@tarojs/components/types'
 
 @Observed
 export class TaroVideoElement extends TaroElement<VideoProps> {
-  _currentTime = 0
 
   controller: VideoController = new VideoController()
 
   constructor() {
     super('Video')
+
+    this._nodeInfo._currentTime = 0
   }
 
   async play() {
@@ -40,11 +41,11 @@ export class TaroVideoElement extends TaroElement<VideoProps> {
   }
 
   get currentTime() {
-    return this._currentTime
+    return this._nodeInfo._currentTime
   }
 
   set currentTime(val: number) {
-    this._currentTime = val
+    this._nodeInfo._currentTime = val
     this.controller.setCurrentTime(val)
   }
 }

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

@@ -59,8 +59,8 @@ export class TaroNode extends TaroDataSourceElement {
     return this.childNodes[index] as TaroElement
   }
 
-  public findIndex (refChild: TaroNode): number {
-    return this.childNodes.findIndex(node => node._nid === refChild._nid)
+  public findIndex (refChild?: TaroNode): number {
+    return this.childNodes.findIndex(node => node._nid === refChild?._nid)
   }
 
   public updateTextNode () {
@@ -77,13 +77,11 @@ export class TaroNode extends TaroDataSourceElement {
 
   // 更新对应的 ArkUI 组件
   public updateComponent () {
-    if (!this._isCompileMode) return
-
-    // 半编译模式下走 @State 的更新模式
-    if (this._isDynamicNode) {
+    // 非半编译模式或者半编译模式下拥有自主更新权力的节点走 @State 的更新模式
+    if (this._isDynamicNode || !this._isCompileMode) {
       this._updateTrigger++
     } else {
-      this.parentNode.updateComponent()
+      this.parentNode?.updateComponent()
     }
   }
 
@@ -128,11 +126,12 @@ export class TaroNode extends TaroDataSourceElement {
   public set textContent (value: string) {
     if (this.nodeType === NodeType.TEXT_NODE) {
       this._textContent = value
-      this.parentNode?.updateComponent()
     } else if (this.nodeType === NodeType.ELEMENT_NODE) {
       const node = new TaroTextNode(value)
       node._doc = this.ownerDocument
-      this.childNodes = [node]
+      node.parentNode = this
+      this.childNodes.length = 0
+      this.childNodes.push(node)
     }
   }
 
@@ -150,7 +149,6 @@ export class TaroNode extends TaroDataSourceElement {
   public set nodeValue (value: string | null) {
     if (this.nodeType === NodeType.TEXT_NODE && value) {
       this.textContent = value
-      this.parentNode?.updateComponent()
     }
   }
 
@@ -163,11 +161,13 @@ export class TaroNode extends TaroDataSourceElement {
   }
 
   // TODO cloneNode()、contains()
-
-  public appendChild (child: TaroNode): TaroNode {
+  public connectParentNode (child: TaroNode) {
     child.parentNode?.removeChild(child)
     child.parentNode = this
+  }
 
+  public appendChild (child: TaroNode): TaroNode {
+    this.connectParentNode(child)
     this.childNodes.push(child)
     this.notifyDataAdd(this.childNodes.length - 1)
 
@@ -175,14 +175,15 @@ export class TaroNode extends TaroDataSourceElement {
     return child
   }
 
-  public insertBefore (newNode: TaroNode, referenceNode: TaroNode | null): TaroNode {
+  public insertBefore (newNode: TaroNode, referenceNode?: TaroNode): TaroNode {
     newNode.parentNode?.removeChild(newNode)
 
-    if (referenceNode === null) {
+    if (!referenceNode) {
       this.appendChild(newNode)
     } else {
       const idxOfRef = this.findIndex(referenceNode)
       this.childNodes.splice(idxOfRef, 0, newNode)
+      this.connectParentNode(newNode)
       // TODO: 优化
       this.notifyDataReload()
     }

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

@@ -2,11 +2,12 @@
 
 import { CSSProperties } from 'react'
 
+import { TaroElement } from '../element/element'
 import { BORDER_STYLE_MAP, capitalizeFirstLetter, FlexManager, getNodeMarginOrPaddingData, getUnit } from './util'
 
-// 将web端的style转换为hm端的style
-export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
-  const hmStyle: Record<string, any> = {}
+// Note: 将 web 端的 style 转换为 hm 端的 style
+export default function convertWebStyle2HmStyle(webStyle: CSSProperties, node?: TaroElement) {
+  const hmStyle: Record<string, any> = node?._st?.hmStyle || {}
   Object.keys(webStyle).forEach((key) => {
     const value = webStyle[key]
     switch (key) {
@@ -405,7 +406,7 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
       }
       case 'WebkitLineClamp': {
         hmStyle.WebkitLineClamp = Number(value)
-        break 
+        break
       }
       case 'transform': {
         // todo: 需要更新

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

@@ -183,7 +183,6 @@ export class BORDER_STYLE_MAP {
       case BorderStyle.Solid: return 'solid'
       default: return ''
     }
-  
   }
 }
 
@@ -191,25 +190,28 @@ export function getNodeMarginOrPaddingData (dataValue: string) {
   let res: any = {}
   if (dataValue) {
     const values = dataValue.toString().trim().split(new RegExp('\\s+'))
+    let val1: string
+    let val2: string
     switch (values.length) {
       case 1:
-        res = { top: values[0], right: values[0], bottom: values[0], left: values[0] }
+        val1 = getUnit(values[0])
+        res = { top: val1, right: val1, bottom: val1, left: val1 }
         break
       case 2:
-        res = { top: values[0], right: values[1], bottom: values[0], left: values[1] }
+        val1 = getUnit(values[0])
+        val2 = getUnit(values[1])
+        res = { top: val1, right: val2, bottom: val1, left: val2 }
         break
       case 3:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[1] }
+        val2 = getUnit(values[1])
+        res = { top: getUnit(values[0]), right: val2, bottom: getUnit(values[2]), left: val2 }
         break
       case 4:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[3] }
+        res = { top: getUnit(values[0]), right: getUnit(values[1]), bottom: getUnit(values[2]), left: getUnit(values[3]) }
         break
       default:
         break
     }
-    Object.keys(res).forEach(key => {
-      res[key] = getUnit(res[key]) || 0
-    })
   }
   return res
 }
@@ -225,9 +227,9 @@ export function getUnit (val) {
   }
   if (val) {
     // 匹配vw\vh
-    const exec = val.match(/(\d+)(vw|vh|px)$/)
+    const exec = val.match(/(-?\d*(\.\d+)?)(vw|vh|px)$/)
     if (exec) {
-      const [, num, unit] = exec
+      const [, num, , unit] = exec
       return convertNumber2VP(parseFloat(num), unit)
     }
   }