chore: Optimize array flat performance, optimize types.

Author: leezng

src/components/TreeNode/index.tsx

@@ -24,7 +24,7 @@ export const treeNodePropsPass = {
   // Custom formatter for values.
   customValueFormatter: Function as PropType<
     (
-      data: string,
+      data: unknown,
       key: NodeDataType['key'],
       path: string,
       defaultFormatResult: string | JSX.Element,
@@ -54,7 +54,7 @@ export const treeNodePropsPass = {
   },
   // When using the selectableType, define whether current path/content is enabled.
   pathSelectable: {
-    type: Function as PropType<(path: string, content: string) => boolean>,
+    type: Function as PropType<(path: string, content: unknown) => boolean>,
     default: (): boolean => true,
   },
   // Highlight current node when selected.
@@ -138,7 +138,7 @@ export default defineComponent({
       emit('value-change', value, props.node.path);
     };
 
-    const defaultFormatter = (data: string) => {
+    const defaultFormatter = (data: unknown) => {
       const str = data + '';
       const text = dataType.value === 'string' ? `"${str}"` : str;
       if (props.editable && state.editing) {
@@ -161,7 +161,7 @@ export default defineComponent({
     };
 
     const customFormatter = props.customValueFormatter
-      ? (data: string) =>
+      ? (data: unknown) =>
           props.customValueFormatter?.(
             data,
             props.node.key,
@@ -276,8 +276,8 @@ export default defineComponent({
         {node.key && <span class="vjs-key">{`${state.prettyKey}: `}</span>}
 
         <span>
-          {node.type !== 'content' ? (
-            <Brackets data={node.content} onClick={onBracketsClickHandler} />
+          {node.type !== 'content' && node.content ? (
+            <Brackets data={node.content.toString()} onClick={onBracketsClickHandler} />
           ) : customFormatter ? (
             <span class={state.valueClass} v-html={customFormatter(node.content)} />
           ) : (

src/utils/index.ts

@@ -16,7 +16,7 @@ interface JSONFlattenOptions {
 export type JSONDataType = string | number | boolean | unknown[] | Record<string, unknown> | null;
 
 export interface JSONFlattenReturnType extends JSONFlattenOptions {
-  content: string;
+  content: string | number | null | boolean;
   level: number;
   path: string;
 }
@@ -45,17 +45,16 @@ export function jsonFlatten(
   const dataType = getDataType(data);
 
   if (dataType === 'array') {
-    const inner = (data as JSONDataType[])
-      .map((item, idx, arr) =>
+    const inner = arrFlat(
+      (data as JSONDataType[]).map((item, idx, arr) =>
         jsonFlatten(item, `${path}[${idx}]`, level + 1, {
           index: idx,
           showComma: idx !== arr.length - 1,
           length,
           type,
         }),
-      )
-      // No flat, for compatibility.
-      .reduce((acc, val) => acc.concat(val), []);
+      ),
+    ) as JSONFlattenReturnType[];
     return [
       jsonFlatten('[', path, level, {
         showComma: false,
@@ -73,8 +72,8 @@ export function jsonFlatten(
     );
   } else if (dataType === 'object') {
     const keys = Object.keys(data as Record<string, JSONDataType>);
-    const inner = keys
-      .map((objKey, idx, arr) =>
+    const inner = arrFlat(
+      keys.map((objKey, idx, arr) =>
         jsonFlatten(
           (data as Record<string, JSONDataType>)[objKey],
           objKey.includes('.') ? `${path}["${objKey}"]` : `${path}.${objKey}`,
@@ -86,9 +85,8 @@ export function jsonFlatten(
             type,
           },
         ),
-      )
-      // No flat, for compatibility.
-      .reduce((acc, val) => acc.concat(val), []);
+      ),
+    ) as JSONFlattenReturnType[];
     return [
       jsonFlatten('{', path, level, {
         showComma: false,
@@ -103,26 +101,35 @@ export function jsonFlatten(
     );
   }
 
-  const output = Object.entries({
-    content: data,
-    level,
-    key,
-    index,
-    path,
-    showComma,
-    length,
-    type,
-  }).reduce((acc, [key, value]) => {
-    if (value !== undefined) {
-      return {
-        ...acc,
-        [key]: value,
-      };
-    }
-    return acc;
-  }, {}) as JSONFlattenReturnType;
+  return [
+    {
+      content: data as JSONFlattenReturnType['content'],
+      level,
+      key,
+      index,
+      path,
+      showComma,
+      length,
+      type,
+    },
+  ];
+}
 
-  return [output];
+export function arrFlat<T extends unknown[]>(arr: T): unknown[] {
+  if (typeof Array.prototype.flat === 'function') {
+    return arr.flat();
+  }
+  const stack = [...arr];
+  const result = [];
+  while (stack.length) {
+    const first = stack.shift();
+    if (Array.isArray(first)) {
+      stack.unshift(...first);
+    } else {
+      result.push(first);
+    }
+  }
+  return result;
 }
 
 export function cloneDeep<T extends unknown>(source: T, hash = new WeakMap()): T {