refactor(runtime): 注释节点不进行 setData，fix #9369

Vue 会在使用 v-if 等指令时，会生成注释节点用于 diff，因此 Taro DOM 需要保留这些注释节点，在 hydrate 阶段进行去除。

本应该在 hydrate 阶段把“空文本节点”也去除掉，但 hydrate 阶段去除节点，在某些情况下（如空文本节点变为非空了）会影响其它兄弟节点的 _path，也就是 index 值。所以目前只对比较稳定的注释节点进行优化。

commitlint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', Infinity]
+  }
+}

package.json

@@ -31,7 +31,7 @@
   },
   "husky": {
     "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
       "pre-commit": "lint-staged"
     }
   },

packages/taro-runtime/src/constants/index.ts

@@ -37,3 +37,4 @@ export const DATE = 'Date'
 export const SET_TIMEOUT = 'setTimeout'
 export const CATCHMOVE = 'catchMove'
 export const CATCH_VIEW = 'catch-view'
+export const COMMENT = 'comment'

packages/taro-runtime/src/dom/document.ts

@@ -7,7 +7,8 @@ import { eventSource } from '../dom/event-source'
 import { ElementNames, InstanceFactory, InstanceNamedFactory } from '../interface'
 import {
   ROOT_STR,
-  DOCUMENT_ELEMENT_NAME
+  DOCUMENT_ELEMENT_NAME,
+  COMMENT
 } from '../constants'
 
 import type { FormElement } from '../dom/form'
@@ -71,6 +72,8 @@ export class TaroDocument extends TaroElement {
 
   // @TODO: @PERF: 在 hydrate 移除掉空的 node
   public createComment (): TaroText {
-    return this._getText('')
+    const textnode = this._getText('')
+    textnode.nodeName = COMMENT
+    return textnode
   }
 }

packages/taro-runtime/src/dom/node.ts

@@ -2,7 +2,7 @@ import { inject, injectable } from 'inversify'
 import { Shortcuts, ensure } from '@tarojs/shared'
 import SERVICE_IDENTIFIER from '../constants/identifiers'
 import { NodeType } from './node_types'
-import { incrementId } from '../utils'
+import { incrementId, isComment } from '../utils'
 import { TaroEventTarget } from './event-target'
 import { hydrate } from '../hydrate'
 import { eventSource } from './event-source'
@@ -75,7 +75,9 @@ export class TaroNode extends TaroEventTarget {
     const parentNode = this.parentNode
 
     if (parentNode) {
-      const indexOfNode = parentNode.findIndex(this)
+      // 计算路径时，先过滤掉 comment 节点
+      const list = parentNode.childNodes.filter(node => !isComment(node))
+      const indexOfNode = list.indexOf(this)
       const index = this.hooks.getPathIndex(indexOfNode)
 
       return `${parentNode._path}.${Shortcuts.Childnodes}.${index}`

packages/taro-runtime/src/hydrate.ts

@@ -1,5 +1,5 @@
 import { Shortcuts, toCamelCase } from '@tarojs/shared'
-import { isText, isHasExtractProp } from './utils'
+import { isText, isHasExtractProp, isComment } from './utils'
 import {
   SPECIAL_NODES,
   VIEW,
@@ -35,7 +35,7 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     [Shortcuts.NodeName]: nodeName,
     uid: node.uid
   }
-  const { props, childNodes } = node
+  const { props } = node
 
   if (!node.isAnyEventBinded() && SPECIAL_NODES.indexOf(nodeName) > -1) {
     data[Shortcuts.NodeName] = `static-${nodeName}`
@@ -60,6 +60,11 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     }
   }
 
+  let { childNodes } = node
+
+  // 过滤 comment 节点
+  childNodes = childNodes.filter(node => !isComment(node))
+
   if (childNodes.length > 0) {
     data[Shortcuts.Childnodes] = childNodes.map(hydrate)
   } else {

packages/taro-runtime/src/utils/index.ts

@@ -5,7 +5,8 @@ import {
   STYLE,
   ID,
   UID,
-  CLASS
+  CLASS,
+  COMMENT
 } from '../constants'
 
 import type { TaroElement } from '../dom/element'
@@ -25,6 +26,10 @@ export function isText (node: TaroNode): node is TaroText {
   return node.nodeType === NodeType.TEXT_NODE
 }
 
+export function isComment (node: TaroNode): boolean {
+  return node.nodeName === COMMENT
+}
+
 export function isHasExtractProp (el: TaroElement): boolean {
   const res = Object.keys(el.props).find(prop => {
     return !(/^(class|style|id)$/.test(prop) || prop.startsWith('data-'))