fix: forEachDeep support traversal NodeList

Author: chandq

rollup.config.js

@@ -3,7 +3,7 @@ import json from '@rollup/plugin-json';
 import typescript from '@rollup/plugin-typescript';
 import resolve from '@rollup/plugin-node-resolve';
 import subpathExternals from 'rollup-plugin-subpath-externals';
-import { dts } from 'rollup-plugin-dts';
+// import { dts } from 'rollup-plugin-dts';
 import clear from 'rollup-plugin-clear';
 import pkg from './package.json' assert { type: 'json' };
 import terser from '@rollup/plugin-terser';
@@ -52,7 +52,7 @@ export default [
         tsconfig: 'tsconfig.json',
         include: ['src/**/*.ts'],
         // declaration: true,
-        declarationMap: true,
+        // declarationMap: true,
         outDir: 'dist/esm'
       }),
       json()
@@ -77,7 +77,7 @@ export default [
         tsconfig: 'tsconfig.json',
         include: ['src/**/*.ts'],
         // declaration: true,
-        declarationMap: true,
+        // declarationMap: true,
         outDir: 'dist/cjs'
       }),
       json()

src/tree.ts

@@ -1,5 +1,5 @@
 import { objectOmit } from './object';
-import { AnyObject, isEmpty, isObject, objectHas } from './type';
+import { AnyObject, isEmpty, isNodeList, isObject, objectHas } from './type';
 
 export interface IFieldOptions {
   keyField: string;
@@ -26,7 +26,7 @@ export interface IFilterCondition<V> {
 }
 
 /**
- * 树遍历函数(支持continue和break操作), 可用于insert tree item 和 remove tree item
+ * 树遍历函数(支持continue和break操作), 可用于遍历Array和NodeList类型的数据
  * @param {ArrayLike<V>} tree  树形数据
  * @param {Function} iterator  迭代函数, 返回值为true时continue, 返回值为false时break
  * @param {options} options 支持定制子元素名称、反向遍历、广度优先遍历，默认{
@@ -46,13 +46,19 @@ export function forEachDeep<V>(
     parent: V | null,
     level: number
   ) => boolean | void,
-  options: { childField?: string; reverse?: boolean; breadthFirst?: boolean } = {
+  options: { childField?: string; reverse?: boolean; breadthFirst?: boolean; isDomNode?: boolean } = {
     childField: 'children',
     reverse: false,
-    breadthFirst: false
+    breadthFirst: false,
+    isDomNode: false
   }
 ): void {
-  const { childField = 'children', reverse = false, breadthFirst = false } = isObject(options) ? options : {};
+  const {
+    childField = 'children',
+    reverse = false,
+    breadthFirst = false,
+    isDomNode = false
+  } = isObject(options) ? options : {};
   let isBreak = false;
   const queue: {
     item: V;
@@ -80,7 +86,7 @@ export function forEachDeep<V>(
           } else if (re === true) {
             continue;
           }
-          if (item && Array.isArray(item[childField])) {
+          if (item && (isDomNode ? isNodeList(item[childField]) : Array.isArray(item[childField]))) {
             walk(item[childField], item, level + 1);
           }
         }
@@ -98,7 +104,7 @@ export function forEachDeep<V>(
             continue;
           }
 
-          if (item && Array.isArray(item[childField])) {
+          if (item && (isDomNode ? isNodeList(item[childField]) : Array.isArray(item[childField]))) {
             walk(item[childField], item, level + 1);
           }
         }
@@ -122,7 +128,7 @@ export function forEachDeep<V>(
             continue;
           }
 
-          if (item && Array.isArray(item[childField])) {
+          if (item && (isDomNode ? isNodeList(item[childField]) : Array.isArray(item[childField]))) {
             walk(item[childField], item, level + 1);
           }
         }
@@ -140,7 +146,7 @@ export function forEachDeep<V>(
             continue;
           }
 
-          if (item && Array.isArray(item[childField])) {
+          if (item && (isDomNode ? isNodeList(item[childField]) : Array.isArray(item[childField]))) {
             walk(item[childField], item, level + 1);
           }
         }

src/type.ts

@@ -205,7 +205,7 @@ export function isEmpty(value: any): boolean {
  * Checks if `value` is an NodeList object
  */
 export function isNodeList(value: any) {
-  return NodeList.prototype.isPrototypeOf(value);
+  return isUndefined(NodeList) ? false : NodeList.prototype.isPrototypeOf(value);
 }
 
 export default typeIs;

test/tree.test.ts

@@ -234,6 +234,26 @@ test('forEachDeep', () => {
     res4.push(name);
   });
   expect(res4).toEqual(['row1', 'row2']);
+
+  const divEl = document.createElement('div');
+  divEl.textContent = 'div1';
+  const divEl2 = document.createElement('div');
+  divEl2.textContent = 'div2';
+  const divEl3 = document.createElement('div');
+  divEl3.textContent = 'div3';
+  divEl2.appendChild(divEl3);
+  const nodeContent: string[] = [];
+  document.body.appendChild(divEl);
+  document.body.appendChild(divEl2);
+
+  forEachDeep(
+    document.body.children,
+    val => {
+      val.nodeType === Node.TEXT_NODE && nodeContent.push(val.nodeValue!);
+    },
+    { isDomNode: true, childField: 'childNodes' }
+  );
+  expect(nodeContent).toEqual(['div1', 'div2', 'div3']);
 });
 
 function generateTreeArray(length) {

test/type.test.ts

@@ -8,6 +8,7 @@ import {
   isFunction,
   isJsonString,
   isNaN,
+  isNodeList,
   isNull,
   isNullish,
   isNumber,
@@ -149,3 +150,11 @@ test('isEmpty', () => {
     )
   ).toBe(false);
 });
+
+test('isNodeList', () => {
+  const divEl = document.createElement('div');
+
+  document.body.appendChild(divEl);
+  expect(isNodeList(document.body.childNodes)).toBe(true);
+  expect(isNodeList([])).toBe(false);
+});