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

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

@@ -0,0 +1,311 @@
+// 抽出来的嵌套查询
+// const __nesting_style__ = [
+//   {
+//     selectors: ['container', '>', 'hello', ' ', 'txt'],
+//     declaration: {
+//         _color: "#00F00F",
+//       _fontSize: convertNumber2VP(40),
+//     }
+//   },
+// ]
+// 
+// function Index() {
+//   return __combine_nesting_style__(jsx(TaroViewTagName, {
+//     className: "container aaa",
+//     style: calcDynamicStyle(__inner_style__(), "container", null),
+//     children: [
+//       jsx(TaroTextTagName, {
+//         className: "txt cc",
+//         style: calcDynamicStyle(__inner_style__(), "txt", null),
+//         children: "Hello!"
+//       }),
+//       jsx(TaroViewTagName, {
+//         className: "hello",
+//         style: calcDynamicStyle(__inner_style__(), "hello", null),
+//         children: [
+//           jsx(TaroTextTagName, {
+//             className: "txt",
+//             style: calcDynamicStyle(__inner_style__(), "txt", null),
+//             children: "wo2rld!"
+//           }),
+//           jsx(TaroTextTagName, {
+//             className: "txt2",
+//             style: calcDynamicStyle(__inner_style__(), "txt2", null),
+//             children: "Hello wo2rld!"
+//           })
+//         ]
+//       })
+//     ]
+//   }), __nesting_style__);
+// }
+
+import type { ReactElement } from 'react'
+
+type TMappingNode = {
+  node: ReactElement
+  children: TMapping
+  descendants: TMapping
+}
+
+type TMapping = Record<string, TMappingNode>
+
+type TSelectorNode = {
+  mapping: TMapping
+  node: ReactElement
+}
+
+export type NestingStyle = {
+  node: ReactElement
+  selectors: string[]
+  declaration: Record<string, any>
+}[]
+
+// 构建映射表
+function depthTraversal(root: ReactElement) {
+  const class_mapping: TMapping = {}
+  // 记录别名，防止冲突
+  const selector_alias: Record<string, string[]> = {}
+  // 统计重名次数：{ txt: 1, cc: 2 }
+  const selector_alias_count: Record<string, number> = {}
+
+  const traverse = (tree) => {
+    const result: Record<string, TMapping> = {}
+    if (tree && tree.props) {
+      // 后代选择器
+      const descendant_map = {
+        node: tree,
+        children: {},
+        descendants: {}
+      }
+
+      if (tree.props.children) {
+        // 遍历叶子节点
+        if (tree.props.children instanceof Array) {
+          for (let i = 0; i < tree.props.children.length; i++) {
+            // 收集叶子节点所拥有的类名
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            processLeaf(tree.props.children[i], descendant_map)
+          }
+        } else if (typeof tree.props.children !== 'string'){
+          // 收集叶子节点所拥有的类名
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          processLeaf(tree.props.children, descendant_map)
+        }
+      }
+      // 拆分classnames
+      const classnames = (tree.props.className || '').split(' ')
+      for (let i = 0; i < classnames.length; i++) {
+        const cls = classnames[i]
+        let name = cls
+        if (selector_alias_count[name]) {
+          // 存在重名，需要使用别名替代
+          const oldName = name
+          name = `___${name}${selector_alias_count[oldName]}`
+          selector_alias_count[oldName] = selector_alias_count[oldName] + 1
+          selector_alias[oldName] ? selector_alias[oldName].push(name) : (selector_alias[oldName] = [name])
+        }
+        selector_alias_count[name] = 1
+
+        class_mapping[name] = descendant_map
+        result[name] = {
+          ref: descendant_map,
+          node: tree
+        }
+      }
+    }
+    return result
+  }
+
+  const processLeaf = (leaf, descendant_map: TMappingNode) => {
+    if (!leaf) return
+
+    // 如果是个数组
+    if (leaf instanceof Array) {
+      for (let i = 0; i < leaf.length; i++) {
+        processLeaf(leaf[i], descendant_map)
+      }
+    }
+
+    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)
+      }
+    }
+  }
+
+  traverse(root)
+  return {
+    mapping: class_mapping,
+    alias: selector_alias
+  }
+}
+
+// 将嵌套样式与节点合并
+function combineStyle(nestingStyle: NestingStyle, class_mapping: TMapping, alias: Record<string, string[]>) {
+
+  const findElement = (selector_string, combinator_type, selector_mapping) => {
+    let selector_list = [selector_string]
+    const selector_nodes: TSelectorNode[] = []
+    let shouldUseCombinations = false
+    // 判断是否存在别名
+    if (selector_string instanceof Array) {
+      // 多类选择器类名，需要进行排列组合选择了，一对多的查找 ['a', 'b']，需要找出所有a和b都指向同一个node的节点
+      selector_string.forEach((item, i) => {
+        if (alias[item]) {
+          selector_string[i] = [item, ...alias[item]]
+        }
+      })
+      shouldUseCombinations = true
+    } else if (alias[selector_string]) {
+      selector_list = selector_list.concat(alias[selector_string])
+    }
+
+    for (let i = 0; i < selector_list.length; i++) {
+      const selector = selector_list[i]
+      if (selector instanceof Array) {
+        let obj
+        // 如果是数组，说明他是一个多类选择器：.a.b，我们需要搜索这两个类名都指向同一个node
+        if (shouldUseCombinations) {
+          obj = generateCombinations(selector, (combination) => {
+            // combination 是组合后的选择器['parent', 'child']
+            const _obj = findSendNode(combination, selector_mapping)
+            if (_obj) return _obj
+          })
+        } else {
+          obj = findSendNode(selector, selector_mapping)
+        }
+        // 找出最后搜寻出来的node
+        if (obj) {
+          selector_nodes.push({
+            mapping: (obj.ref || obj)[combinator_type === ' > ' ? 'children' : 'descendants'],
+            node: obj.node
+          })
+        }
+      } else {
+        // 查询选择器的节点
+        const object = selector_mapping[selector]
+        if (object) {
+          selector_nodes.push({
+            mapping: (object.ref || object)[combinator_type === ' > ' ? 'children' : 'descendants'],
+            node: object.node
+          })
+        }
+      }
+    }
+    return selector_nodes
+  }
+  const findSelector = (selectors, current_mapping): 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)
+    if (_elements.length) {
+      if (new_selectors.length) {
+        let elements: TSelectorNode[] = []
+        _elements.forEach(element => {
+          elements = elements.concat(findSelector(new_selectors.slice(), element.mapping))
+        })
+        return elements
+      } else {
+        return _elements
+      }
+    } else {
+      return []
+    }
+  }
+  if (nestingStyle && nestingStyle instanceof Array) {
+    // 合并样式
+    nestingStyle.forEach(({ selectors, declaration }) => {
+      // 获取选中的节点列表
+      const selectors_elements = findSelector(selectors, class_mapping)
+      for (let i = 0; i < selectors_elements.length; i++) {
+        const ele = selectors_elements[i].node
+        if (ele) {
+          // 直接注入到__hmStyle
+          // Hack: ReactElement会在dev模式下被冻结，所以在dev模式下，我们会将Object.freeze覆盖使其失效
+          if (ele.props.__hmStyle) {
+            ele.props.__hmStyle = Object.assign({}, ele.props.__hmStyle, declaration)
+          } else {
+            ele.props.__hmStyle = declaration
+          }
+        }
+      }
+    })
+  }
+}
+
+// 排列组合选择器，找出符合的组合
+// let arrayA = [1, 2, 3];
+// let arrayB = [4, 5, 6];
+// let arrayC = 'abc'
+// let result = generateCombinations([arrayA, arrayB, arrayC], (combination) => { if (combination[0] == 3 ) { return combination }})
+// console.log(result)  => [3, 4, "abc"]
+function generateCombinations (arrays: (string[] | string)[], cbFn, currentCombination: (string[] | string)[] = []) {
+  if (arrays.length === 0) {
+    // 当所有数组都被处理完时，将当前组合添加到结果中
+    return cbFn(currentCombination.slice())
+  }
+  // 取出当前数组
+  const currentArray = arrays[0]
+  if (currentArray instanceof Array) {
+    // 遍历当前数组的每个元素
+    for (let i = 0; i < currentArray.length; i++) {
+      // 将当前元素添加到当前组合中
+      currentCombination.push(currentArray[i])
+      // 递归处理剩余的数组
+      const shouldStop = generateCombinations(arrays.slice(1), cbFn, currentCombination)
+      if (shouldStop) {
+        return shouldStop
+      }
+      // 回溯，移除最后一个元素，尝试其他组合
+      currentCombination.pop()
+    }
+  } else {
+    // 如果不是数组，直接将当前元素添加到当前组合中
+    currentCombination.push(currentArray)
+    // 递归处理剩余的数组
+    const shouldStop = generateCombinations(arrays.slice(1), cbFn, currentCombination)
+    if (shouldStop) {
+      return shouldStop
+    }
+    // 回溯，移除最后一个元素，尝试其他组合
+    currentCombination.pop()
+  }
+  return false
+}
+
+// 多类选择器辅助函数：.a.b => 这里的.a .b其实都是指向同一个node
+// 匹配寻找所有选择器都指向同一个node
+function findSendNode (selectorArr: string[], selector_mapping: TMapping) {
+  let obj: any = null
+  for (let i = 0; i < selectorArr.length; i++) {
+    // 查询选择器的节点
+    const object = selector_mapping[selectorArr[i]]
+    if (object) {
+      if (!obj) { obj = object }
+      if (object.node === obj.node) continue
+    }
+    obj = null
+    break
+  }
+  return obj
+}
+
+// 合并嵌套样式
+// 1、构建映射表，生成一份扁平的样式表结构
+// 2、遍历嵌套样式，根据选择器查找节点，合并样式
+export function __combine_nesting_style__(react_tree: ReactElement, styles: NestingStyle) {
+  // 循环一遍，构建出一颗JSX映射表
+  const { mapping, alias } = depthTraversal(react_tree)
+  // 合并样式
+  combineStyle(styles, mapping, alias)
+  return react_tree
+}

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

@@ -1,7 +1,7 @@
 import { isObject, toCamelCase, toDashed } from '@tarojs/shared'
 
 import { TaroElement } from './element/element'
-import convertWebStyle2HmStyle, { WEB_STYLE_MAP } from './stylesheet/covertWeb2Hm'
+import convertWebStyle2HmStyle from './stylesheet/covertWeb2Hm'
 
 class CSSStyleDeclaration {
   // eslint-disable-next-line no-useless-constructor
@@ -26,6 +26,8 @@ class CSSStyleDeclaration {
     if (value === '' || value === undefined || value === null) {
       // TODO: 清空 stylesheet 里面的 hmstyle
       // this.el._st = {}
+      this._st.hmStyle = {}
+      return
     }
 
     const rules = value.split(';')
@@ -48,59 +50,32 @@ class CSSStyleDeclaration {
   }
 
   public setProperty (prop: string, value: any): void {
-    const node = this.el
-    
     prop = prop.includes('-') ? toCamelCase(prop) : prop
-
-    const webStyleList = WEB_STYLE_MAP[prop]
-    const needUpdateProperty = !prop.startsWith('_') && webStyleList && webStyleList.length > 0
-
+    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[key] = newProperty[key]
-        })
-      } else {
-        node._st[prop] = value
-      }
+      // if (needUpdateProperty) {
+      const newProperty = convertWebStyle2HmStyle({ [prop]: value })
+      Object.keys(newProperty).forEach(key => {
+        node._st.hmStyle[key] = newProperty[key]
+      })
     } else if (!value) {
-      // '' | undefined | null
-      if (needUpdateProperty) {
-        webStyleList.forEach(key => {
-          this.removeProperty(key)
-        })
-      } else {
-        this.removeProperty(prop)
-      }
+      this.removeProperty(prop)
     }
   }
 
   public getPropertyValue (prop: string): string | number {
-    const node = this.el
     prop = prop.includes('-') ? toCamelCase(prop) : prop
+    const node = this.el
     const value = node._st[prop]
     return value === undefined ? '' : value
   }
 
   public removeProperty (prop: string): string | number {
-    const node = this.el
     prop = prop.includes('-') ? toCamelCase(prop) : prop
-    const value = node._st[prop]
-    if (prop.startsWith('_')) {
-      prop = prop.replace('_', '')
-    }
-    if (value === undefined) {
-      // node._st[prop] = undefined
-      delete node._st.hmStyle[prop]
-      return ''
-    } else {
-      delete node._st.hmStyle[prop]
-      // node._st[prop] = undefined
-      // node._st = { ...node._st }
-      return value
-    }
+    const node = this.el
+    const value = node._st.hmStyle[prop]
+    delete node._st.hmStyle[prop]
+    return value
   }
 }
 

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

@@ -2,11 +2,10 @@ import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
 import { isUndefined } from '@tarojs/shared'
 
 import { Current } from '../current'
+import { findChildNodeWithDFS, getPageScrollerOrNode } from '../utils'
 import { TaroComment } from './comment'
-import { createCSSStyleDeclaration } from './cssStyleDeclaration'
 import { TaroElement } from './element/element'
-import { NodeType, TaroNode } from './node'
-import { TaroTextNode } from './text'
+import { NodeType, TaroNode, TaroTextNode } from './node'
 
 import type { Window } from '../bom/window'
 
@@ -45,8 +44,6 @@ class TaroDocument extends TaroNode {
       node = new TaroElement(tagName)
     }
     node._doc = this
-    // Hack: 此 Proxy 不能放在 Element 类内定义，否则响应式更新会失效
-    node._style = createCSSStyleDeclaration(node)
     return node
   }
 
@@ -63,16 +60,32 @@ class TaroDocument extends TaroNode {
     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
   }
 
+  public querySelector (selectors: string): TaroElement | null {
+    const taro = (Current as any).taro
+    const page = taro.getCurrentInstance().page
+    const element = getPageScrollerOrNode(page.node, page)
+  
+    if (element == null) return null
+    
+    return findChildNodeWithDFS(element, selectors)
+  }
+
+  public querySelectorAll (selectors: string): TaroElement[] {
+    const taro = (Current as any).taro
+    const page = taro.getCurrentInstance().page
+    const element = getPageScrollerOrNode(page.node, page)
+  
+    if (element == null) return []
+    
+    return findChildNodeWithDFS(element, selectors, true) || []
+  }
   // @Todo
   // public getElementsByClassName (names: string): TaroElement[]
-  // public querySelector (selectors: string): TaroElement | null
-  // public querySelectorAll (selectors: string): TaroElement[]
   // public createElementNS
 }
 

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

@@ -1,16 +1,17 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+import { EMPTY_OBJ, toCamelCase } from '@tarojs/shared'
 
 import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../../constant'
 import { findChildNodeWithDFS } from '../../utils'
 import { initComponentNodeInfo, triggerAttributesCallback } from '../../utils/info'
 import { bindAnimation } from '../bind'
 import { ClassList } from '../class-list'
+import { type ICSSStyleDeclaration, createCSSStyleDeclaration } from '../cssStyleDeclaration'
 import { NodeType, TaroNode } from '../node'
-import StyleSheet from '../stylesheet'
+import StyleSheet, { HarmonyStyle } from '../stylesheet'
 
 import type { StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
-import type { ICSSStyleDeclaration } from '../cssStyleDeclaration'
 
 type NamedNodeMap = ({ name: string, value: string })[]
 
@@ -20,20 +21,17 @@ export interface TaroExtraProps {
   disabled?: boolean
 }
 
-@Observed
 export class TaroElement<T extends StandardProps = StandardProps> extends TaroNode {
   public _innerHTML = ''
   public _nodeInfo: TaroAny = {}
   public readonly tagName: string
+  public dataset: Record<string, unknown> = EMPTY_OBJ
   public _attrs: T & TaroExtraProps = {} as T & TaroExtraProps
 
-  _client?: Area
-  _scroll?: Area
-
   constructor(tagName: string) {
     super(tagName.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase(), NodeType.ELEMENT_NODE)
     this.tagName = this.nodeName
-
+    this._style = createCSSStyleDeclaration(this)
     initComponentNodeInfo(this)
     bindAnimation(this)
   }
@@ -75,6 +73,21 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   }
 
   public setAttribute (name: string, value: TaroAny): void {
+    switch (name) {
+      case ID:
+        eventSource.delete(this._attrs.id)
+        eventSource.set(value, this as TaroAny)
+        break
+      default:
+        if (name.startsWith('data-')) {
+          if (this.dataset === EMPTY_OBJ) {
+            this.dataset = Object.create(null)
+          }
+          this.dataset[toCamelCase(name.replace(/^data-/, ''))] = value
+        }
+        break
+    }
+
     if (name === ID) {
       eventSource.delete(this._attrs.id)
       eventSource.set(value, this as TaroAny)
@@ -134,8 +147,6 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }, true) || []
   }
 
-  // TODO dataset
-
   public set innerHTML (value: string) {
     if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
       const ele = this.ownerDocument.createElement('inner-html')
@@ -148,6 +159,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     return this._innerHTML
   }
 
+  // 存放的样式，获取其实跟获取style是一样的，只不过这里取的更快捷，不需要走style的get方法进到cssStyleDeclaration
   public _st = new StyleSheet()
 
   // 经转换后的鸿蒙样式
@@ -160,4 +172,36 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public get style (): ICSSStyleDeclaration | null {
     return this._style
   }
+
+  // 伪类，不存在style动态设置，均已被转换为鸿蒙样式
+  // 可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
+  public _pseudo_before: StyleSheet | null = null
+
+  public set_pseudo_before (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_before) {
+        this._pseudo_before = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_before!.hmStyle[key] = value[key]
+      })
+    } else {
+      this._pseudo_before = null
+    }
+  }
+
+  public _pseudo_after: StyleSheet | null = null
+
+  public set_pseudo_after (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_after) {
+        this._pseudo_after = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_after!.hmStyle[key] = value[key]
+      })
+    } else {
+      this._pseudo_after = null
+    }
+  }
 }

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

@@ -134,6 +134,7 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
   }
 }
 
+@Observed
 class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormWidgetElement<T> {
   _height = 0
 
@@ -193,7 +194,7 @@ class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormW
   }
 }
 
-
+@Observed
 class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
   controller: TextAreaController = new TextAreaController()
 
@@ -201,13 +202,14 @@ class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
     super('TextArea')
   }
 }
-
+@Observed
 class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps>{
   constructor() {
     super('Checkbox')
   }
 }
 
+@Observed
 class TaroRadioElement extends TaroCheckedElement<RadioProps>{
   public group?: string
 
@@ -215,6 +217,8 @@ class TaroRadioElement extends TaroCheckedElement<RadioProps>{
     super('Radio')
   }
 }
+
+@Observed
 class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
   _value = 0
 
@@ -224,7 +228,7 @@ class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
     this._value = Number(this._attrs.value || 0)
   }
 }
-
+@Observed
 class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | PickerTimeProps | PickerDateProps | PickerMultiSelectorProps> {
   constructor() {
     super('Picker')
@@ -273,12 +277,13 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
   }
 }
 
+@Observed
 class TaroSwitchElement extends TaroCheckedElement<SwitchProps> {
   constructor() {
     super('Switch')
   }
 }
-
+@Observed
 class TaroCheckboxGroupElement extends TaroFormWidgetElement<CheckboxGroupProps> {
   constructor() {
     super('CheckboxGroup')
@@ -304,6 +309,7 @@ class TaroCheckboxGroupElement extends TaroFormWidgetElement<CheckboxGroupProps>
   }
 }
 
+@Observed
 class TaroRadioGroupElement extends TaroFormWidgetElement<RadioGroupProps> {
   constructor() {
     super('RadioGroup')
@@ -329,6 +335,7 @@ class TaroRadioGroupElement extends TaroFormWidgetElement<RadioGroupProps> {
   }
 }
 
+@Observed
 class TaroFormElement extends TaroFormWidgetElement {
   constructor() {
     super('Form')