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

package/dist/components-harmony-ets/switch.ets

@@ -31,10 +31,12 @@ export default struct TaroSwitch {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroSwitchElement) => void = this.customBuilder
   @ObjectLink node: TaroSwitchElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
@@ -45,7 +47,7 @@ export default struct TaroSwitch {
         type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
         isOn: this.node.checked,
       })
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .attrs(getAttributes(this.node))
         .themeStyles(!!this.node._attrs.disabled)
         .onChange((isOn: boolean) => {

package/dist/components-harmony-ets/text.ets

@@ -44,6 +44,13 @@ export default struct TaroText {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroTextElement) => void = this.customBuilder
   @ObjectLink node: TaroTextElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.nodeType === NodeType.TEXT_NODE) {
@@ -66,7 +73,7 @@ export default struct TaroText {
       if (this.node.hmStyle?.display !== 'none') {
         Text(this.node.textContent)
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .textNormalFontStyle(this.node?.hmStyle)
         .textSpecialFontStyle(getFontAttributes(this.node))
         .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))

package/dist/components-harmony-ets/textArea.ets

@@ -33,6 +33,7 @@ export default struct TaroTextArea {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroTextAreaElement) => void = this.customBuilder
   @ObjectLink node: TaroTextAreaElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -52,7 +53,7 @@ export default struct TaroTextArea {
         .key(this.node._nid)
         .maxLength(Number(this.node._attrs?.maxlength) || null)
         .placeholderColor(getPlaceholderColor(this.node))
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .textStyle(this.node?.hmStyle)
         .textAttr(getFontAttributes(this.node))
         .onChange((value: string) => {

package/dist/components-harmony-ets/utils/flexManager.ets

@@ -14,7 +14,7 @@ class FlexManager {
   static isFlexNode (node: TaroElement): boolean {
     return !!node.hmStyle?.display?.includes('flex')
   }
-  
+
   static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems: ItemAlign | undefined): 	VerticalAlign | HorizontalAlign {
     if (direction === FlexDirection.Column) {
       switch (alignItems) {
@@ -38,7 +38,7 @@ class FlexManager {
   }
 
   static flexOptions (node: TaroElement): IFlexOptions {
-    const hmStyle = node.hmStyle
+    const hmStyle = node.hmStyle || {}
     const isFlex = FlexManager.isFlexNode(node)
     const justifyContent: FlexAlign = isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
 

package/dist/components-harmony-ets/utils/helper.ets

@@ -31,9 +31,7 @@ export function shouldBindEvent (cb: TFunc, node: TaroElement | null, eventNames
 }
 
 export function getNodeThresholds (node: TaroElement): number[] | null {
-  if (!node) return null
-
-  return node?._nodeInfo.thresholds || null
+  return node?._nodeInfo?.thresholds || null
 }
 
 

package/dist/components-harmony-ets/utils/htmlParser/index.ts

@@ -15,7 +15,7 @@ function buildDomTree(dom: TTreeNode) {
     case 'span': tagName = 'text'; break
   }
   if (!tagName) return null
-  
+
   const ele = document.createElement(tagName)
   attributes && Object.keys(attributes).forEach(key => {
     if (key === 'style') {

package/dist/components-harmony-ets/utils/index.ts

@@ -21,70 +21,15 @@ export function getMultiSelector(ctx, range, rangeKey, value) {
   }))
 }
 
-export function getUnit (val) {
-  if (/\d+(vp)$/.test(val)) {
+export function getUnit (val: string | number): string {
+  if (isNumber(val) || /\d+px$/.test(val)) {
+    return convertNumber2VP(parseFloat(val as string))
+  } else if (/\d+(vp)$/.test(val)) {
     return val
-  } else if (isNumber(val) || /\d+px$/.test(val)) {
-    return convertNumber2VP(parseFloat(val))
   }
   return val
 }
 
-function handleNodeStyleData (dataValue: string, handler: (values: string[]) => { [key: string]: string } | void) {
-  let res: any = {}
-  if (dataValue) {
-    const values = dataValue.toString().trim().split(/\s+/)
-    const data = handler(values)
-
-    if (!data) return res
-
-    res = data
-
-    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 getNodeBorderRadiusData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { topLeft: values[0], topRight: values[0], bottomRight: values[0], bottomLeft: values[0] }
-      case 2:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[0], bottomLeft: values[1] }
-      case 3:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[1] }
-      case 4:
-        return { topLeft: values[0], topRight: values[1], bottomRight: values[2], bottomLeft: values[3] }
-      default:
-        break
-    }
-  })
-}
-
-export function getNodeMarginOrPaddingData (dataValue: string) {
-  return handleNodeStyleData(dataValue, values => {
-    switch (values.length) {
-      case 1:
-        return { top: values[0], right: values[0], bottom: values[0], left: values[0] }
-      case 2:
-        return { top: values[0], right: values[1], bottom: values[0], left: values[1] }
-      case 3:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[1] }
-      case 4:
-        return { top: values[0], right: values[1], bottom: values[2], left: values[3] }
-      default:
-        break
-    }
-  })
-}
-
 export function generateText (node: TaroRichTextElement): string {
   return parseHtmlNode(node._attrs.nodes || '')
 }

package/dist/components-harmony-ets/video.ets

@@ -73,7 +73,7 @@ function getVideoProps (node: TaroVideoElement): VideoAttrs {
 }
 
 function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
-  node._currentTime = e.time
+  node._nodeInfo._currentTime = e.time
 
   emitEvent(node, 'timeUpdate', { currentTime: e.time})
 }
@@ -83,11 +83,18 @@ export default struct TaroVideo {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroVideoElement) => void = this.customBuilder
   @ObjectLink node: TaroVideoElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.hmStyle?.display !== 'none') {
       Video(getVideoData(this.node))
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .props(getVideoProps(this.node))
       .aspectRatio(4 / 3)
       .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))

package/dist/components-harmony-ets/view.ets

@@ -13,6 +13,13 @@ export default struct TaroView {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroViewElement) => void = this.customBuilder
   @ObjectLink node: TaroViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.hmStyle?.display !== 'none') {
@@ -24,7 +31,7 @@ export default struct TaroView {
             this.createLazyChildren(this.node)
           }
         }
-        .attributeModifier(rowModify.setNode(this.node))
+        .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
@@ -41,7 +48,7 @@ export default struct TaroView {
             this.createLazyChildren(this.node)
           }
         }
-        .attributeModifier(columnModify.setNode(this.node))
+        .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {

package/dist/runtime-ets/current.ts

@@ -5,6 +5,7 @@ export const context: any = {
 // @ts-nocheck
 export const Current: any = {
   app: null,
+  uiContext: null,
   router: {},
   taro: {},
   contextPromise: new Promise(resolve => {

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

@@ -1,3 +1,4 @@
+import { Current } from '../current'
 import { ObjectAssign } from '../utils'
 
 import type { TaroAny } from '../utils'
@@ -54,7 +55,7 @@ export function bindAnimation (node: TaroElement) {
             animateParams.duration = 0
           }
           animateParams.curve = Curve[convertToCamelCase(timingFunction)] || Curve.EaseInOut
-          animateTo(animateParams, () => {
+          Current.uiContext.animateTo(animateParams, () => {
             const transformOrigin: string = anim.transformOrigin
 
             if (transformOrigin) {
@@ -69,8 +70,7 @@ export function bindAnimation (node: TaroElement) {
               })
             }
 
-            node._nodeInfo.overwriteStyle = anim.rule
-            node.updateComponent()
+            node._instance.overwriteStyle = anim.rule
           })
         })
       }

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

@@ -1,3 +1,7 @@
+import { parseClasses } from '../utils'
+
+import type { CSSProperties, ReactElement } from 'react'
+
 // 抽出来的嵌套查询
 // const __nesting_style__ = [
 //   {
@@ -8,7 +12,7 @@
 //     }
 //   },
 // ]
-// 
+//
 // function Index() {
 //   return __combine_nesting_style__(jsx(TaroViewTagName, {
 //     className: "container aaa",
@@ -39,8 +43,6 @@
 //   }), __nesting_style__);
 // }
 
-import type { ReactElement } from 'react'
-
 type TMappingNode = {
   node: ReactElement
   children: TMapping
@@ -71,6 +73,13 @@ function depthTraversal(root: ReactElement) {
   const traverse = (tree) => {
     const result: Record<string, TMapping> = {}
     if (tree && tree.props) {
+      // 兜底适配：如果Taro组件被原封不动的再别的地方导出使用，导致无法在编译环境添加__hmStyle
+      // import { View } from '~/components'
+      // hack：如果是taro节点，但是被赋予了__styleSheet，则走一下__styleSheet转__hmStyle
+      if (tree.props.__styleSheet && typeof tree.type !== 'function') {
+        tree.props.__hmStyle = tree.props.__styleSheet.value
+      }
+
       // 后代选择器
       const descendant_map = {
         node: tree,
@@ -93,7 +102,7 @@ function depthTraversal(root: ReactElement) {
         }
       }
       // 拆分classnames
-      const classnames = (tree.props.className || '').split(' ')
+      const classnames = parseClasses(tree.props.className || '')
       for (let i = 0; i < classnames.length; i++) {
         const cls = classnames[i]
         let name = cls
@@ -128,17 +137,19 @@ function depthTraversal(root: ReactElement) {
 
     const leaf_map = traverse(leaf)
     if (!leaf_map) return
+
     // 直接后代
     Object.assign(descendant_map.children, leaf_map)
+
     // 子孙后代
-    Object.assign(descendant_map.descendants, leaf_map)
-    const keys = Object.keys(leaf_map)
-    for (let i = 0; i < keys.length; i++) {
-      const leaf_child_map = class_mapping[keys[i]]
-      if (leaf_child_map) {
-        Object.assign(descendant_map.descendants, leaf_child_map.descendants)
+    const grandchild: (Record<string, TMapping> | TMapping)[] = [leaf_map]
+    Object.keys(leaf_map).forEach(key => {
+      const leaf_child_map = class_mapping[key]
+      if (leaf_child_map?.descendants) {
+        grandchild.push(leaf_child_map.descendants)
       }
-    }
+    })
+    Object.assign(descendant_map.descendants, ...grandchild)
   }
 
   traverse(root)
@@ -151,7 +162,7 @@ function depthTraversal(root: ReactElement) {
 // 将嵌套样式与节点合并
 function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias: Record<string, string[]>) {
 
-  const findElement = (selector_string, combinator_type, selector_mapping) => {
+  const findElement = (selector_string, combinator_type, selector_mapping, remainder_selector, declaration) => {
     let selector_list = [selector_string]
     const selector_nodes: TSelectorNode[] = []
     let shouldUseCombinations = false
@@ -184,6 +195,15 @@ function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias
         }
         // 找出最后搜寻出来的node
         if (obj) {
+          if (typeof obj.node.type === 'function') {
+            // 自定义组件，往下传递需要搜寻的内容向里面搜寻
+            const nestingData = {
+              selectors: [selector_string, combinator_type, ...remainder_selector.slice()],
+              declaration: declaration
+            }
+            obj.node.props.__nesting = obj.node.props.__nesting ?
+              [...obj.node.props.__nesting, nestingData] : [nestingData]
+          }
           selector_nodes.push({
             mapping: (obj.ref || obj)[combinator_type === ' > ' ? 'children' : 'descendants'],
             node: obj.node
@@ -193,6 +213,15 @@ function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias
         // 查询选择器的节点
         const object = selector_mapping[selector]
         if (object) {
+          if (typeof object.node.type === 'function') {
+            // 自定义组件，往下传递需要搜寻的内容向里面搜寻
+            const nestingData = {
+              selectors: [selector_string, combinator_type, ...remainder_selector.slice()],
+              declaration: declaration
+            }
+            object.node.props.__nesting = object.node.props.__nesting ?
+              [...object.node.props.__nesting, nestingData] : [nestingData]
+          }
           selector_nodes.push({
             mapping: (object.ref || object)[combinator_type === ' > ' ? 'children' : 'descendants'],
             node: object.node
@@ -202,16 +231,16 @@ function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias
     }
     return selector_nodes
   }
-  const findSelector = (selectors, current_mapping): TSelectorNode[] => {
+  const findSelector = (selectors, current_mapping, declaration): TSelectorNode[] => {
     const new_selectors = selectors.slice()
     const selector_string = new_selectors.shift()
     const combinator_type = new_selectors.shift()
-    const _elements = findElement(selector_string, combinator_type, current_mapping)
+    const _elements = findElement(selector_string, combinator_type, current_mapping, new_selectors, declaration)
     if (_elements.length) {
       if (new_selectors.length) {
         let elements: TSelectorNode[] = []
         _elements.forEach(element => {
-          elements = elements.concat(findSelector(new_selectors.slice(), element.mapping))
+          elements = elements.concat(findSelector(new_selectors.slice(), element.mapping, declaration))
         })
         return elements
       } else {
@@ -225,10 +254,10 @@ function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias
     // 合并样式
     nestingStyle.forEach(({ selectors, declaration }) => {
       // 获取选中的节点列表
-      const selectors_elements = findSelector(selectors, class_mapping)
+      const selectors_elements = findSelector(selectors, class_mapping, declaration)
       for (let i = 0; i < selectors_elements.length; i++) {
         const ele = selectors_elements[i].node
-        if (ele) {
+        if (ele && typeof ele !== 'function') {
           // 直接注入到__hmStyle
           // Hack: ReactElement会在dev模式下被冻结，所以在dev模式下，我们会将Object.freeze覆盖使其失效
           if (ele.props.__hmStyle) {
@@ -299,13 +328,66 @@ function findSendNode (selectorArr: string[], selector_mapping: TMapping) {
   return obj
 }
 
+function insertParentStyle(data: {key: string, value: CSSProperties}, class_mapping: TMapping, alias: Record<string, string[]>) {
+  const { key, value } = data
+  key.split(' ').forEach(key => {
+    let classnames = [key] 
+    if (alias[key]) {
+      classnames = classnames.concat(alias[key])
+    }
+    classnames.forEach(name => {
+      if (class_mapping[name]) {
+        // 插入样式
+        const ele = class_mapping[key].node
+        if (ele) {
+          // 直接注入到__hmStyle
+          // Hack: ReactElement会在dev模式下被冻结，所以在dev模式下，我们会将Object.freeze覆盖使其失效
+          if (ele.props.__hmStyle) {
+            ele.props.__hmStyle = Object.assign({}, ele.props.__hmStyle, value)
+          } else {
+            ele.props.__hmStyle = value
+          }
+        }
+      }
+    })
+  })
+
+}
+
 // 合并嵌套样式
 // 1、构建映射表，生成一份扁平的样式表结构
 // 2、遍历嵌套样式，根据选择器查找节点，合并样式
-export function __combine_nesting_style__(react_tree: ReactElement, styles: NestingStyle) {
-  // 循环一遍，构建出一颗JSX映射表
-  const { mapping, alias } = depthTraversal(react_tree)
-  // 合并样式
-  combineStyle(styles, mapping, alias)
+export function __combine_nesting_style__(react_tree: ReactElement, styles: NestingStyle | null) {
+  if (react_tree) {
+    let newStyle = styles
+    const parentProps: {
+      __styleSheet?: {key: string, value: CSSProperties}
+      __nesting?: NestingStyle
+    } = // @ts-ignore 
+    react_tree._owner?.pendingProps // Hack：取出父组件的props，考虑版本问题，取的内部属性，可能会有问题
+
+    if (newStyle || (parentProps && (parentProps.__styleSheet || parentProps.__nesting))) {
+      // 1、循环一遍，构建出一颗JSX映射表
+      const { mapping, alias } = depthTraversal(react_tree)
+      if (parentProps) {
+        // 2、如果自定义节点，则增加合成__stylesheet步骤，将父节点的样式合并到当前节点
+        if (parentProps.__styleSheet) {
+          insertParentStyle(parentProps.__styleSheet, mapping, alias)
+          // @ts-ignore
+          parentProps.__styleSheet = null // 释放内存
+        }
+        // 3、如果自定节点，存在需要往下查询的嵌套样式，需要合并到子组件
+        if (parentProps.__nesting) {
+          newStyle = (newStyle || []).concat(parentProps.__nesting)
+          // @ts-ignore
+          parentProps.__nesting = null // 释放内存
+        }
+      }
+      // 4、合并嵌套样式样式
+      if (newStyle && newStyle.length) {
+        combineStyle(newStyle, mapping, alias)
+      }
+    }
+  }
   return react_tree
 }

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

@@ -53,11 +53,7 @@ class CSSStyleDeclaration {
     prop = prop.includes('-') ? toCamelCase(prop) : prop
     const node = this.el
     if ((typeof value === 'string' && value.length) || typeof value === 'number' || isObject(value)) {
-      // if (needUpdateProperty) {
-      const newProperty = convertWebStyle2HmStyle({ [prop]: value })
-      Object.keys(newProperty).forEach(key => {
-        node._st.hmStyle[key] = newProperty[key]
-      })
+      convertWebStyle2HmStyle({ [prop]: value }, node)
     } else if (!value) {
       this.removeProperty(prop)
     }
@@ -82,6 +78,7 @@ class CSSStyleDeclaration {
 type ICSSStyleDeclaration = CSSStyleDeclaration & Record<string, any>
 
 function createCSSStyleDeclaration (node: TaroElement): CSSStyleDeclaration {
+  // FIXME 临时使用 Proxy 代理，后续需要优化
   return new Proxy(new CSSStyleDeclaration(node), {
     set (target, prop: string, value) {
       if (prop === 'cssText') {

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

@@ -26,6 +26,7 @@ export class TaroElement<
   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
@@ -91,11 +92,6 @@ export class TaroElement<
         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]

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/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)
   }
 }