4dkankan-components/packages/utils/vue/vnode.ts

import { Comment, Fragment, Text, createBlock, createCommentVNode, isVNode, openBlock } from 'vue';
import { camelize, isArray } from '@vue/shared';
import { hasOwn } from '../objects';
import { debugWarn } from '../error';
import type { VNode, VNodeArrayChildren, VNodeChild, VNodeNormalizedChildren } from 'vue';

const SCOPE = 'utils/vue/vnode';

export enum PatchFlags {
  TEXT = 1,
  CLASS = 2,
  STYLE = 4,
  PROPS = 8,
  FULL_PROPS = 16,
  HYDRATE_EVENTS = 32,
  STABLE_FRAGMENT = 64,
  KEYED_FRAGMENT = 128,
  UNKEYED_FRAGMENT = 256,
  NEED_PATCH = 512,
  DYNAMIC_SLOTS = 1024,
  HOISTED = -1,
  BAIL = -2,
}

export type VNodeChildAtom = Exclude<VNodeChild, Array<any>>;
export type RawSlots = Exclude<VNodeNormalizedChildren, Array<any> | null | string>;

export function isFragment(node: VNode): boolean;
export function isFragment(node: unknown): node is VNode;
export function isFragment(node: unknown): node is VNode {
  return isVNode(node) && node.type === Fragment;
}

export function isText(node: VNode): boolean;
export function isText(node: unknown): node is VNode;
export function isText(node: unknown): node is VNode {
  return isVNode(node) && node.type === Text;
}

export function isComment(node: VNode): boolean;
export function isComment(node: unknown): node is VNode;
export function isComment(node: unknown): node is VNode {
  return isVNode(node) && node.type === Comment;
}

const TEMPLATE = 'template';
export function isTemplate(node: VNode): boolean;
export function isTemplate(node: unknown): node is VNode;
export function isTemplate(node: unknown): node is VNode {
  return isVNode(node) && node.type === TEMPLATE;
}

/**
 * determine if the element is a valid element type rather than fragments and comment e.g. <template> v-if
 * @param node {VNode} node to be tested
 */
export function isValidElementNode(node: VNode): boolean;
export function isValidElementNode(node: unknown): node is VNode;
export function isValidElementNode(node: unknown): node is VNode {
  return isVNode(node) && !isFragment(node) && !isComment(node);
}

/**
 * get a valid child node (not fragment nor comment)
 * @param node {VNode} node to be searched
 * @param depth {number} depth to be searched
 */
function getChildren(
  node: VNodeNormalizedChildren | VNodeChild,
  depth: number,
): VNodeNormalizedChildren | VNodeChild {
  if (isComment(node)) return;
  if (isFragment(node) || isTemplate(node)) {
    return depth > 0 ? getFirstValidNode(node.children, depth - 1) : undefined;
  }
  return node;
}

export const getFirstValidNode = (nodes: VNodeNormalizedChildren, maxDepth = 3) => {
  if (Array.isArray(nodes)) {
    return getChildren(nodes[0], maxDepth);
  } else {
    return getChildren(nodes, maxDepth);
  }
};

export function renderIf(condition: boolean, ...args: Parameters<typeof createBlock>) {
  return condition ? renderBlock(...args) : createCommentVNode('v-if', true);
}

export function renderBlock(...args: Parameters<typeof createBlock>) {
  return openBlock(), createBlock(...args);
}

export const getNormalizedProps = (node: VNode) => {
  if (!isVNode(node)) {
    debugWarn(SCOPE, '[getNormalizedProps] must be a VNode');
    return {};
  }

  const raw = node.props || {};
  const type = (isVNode(node.type) ? node.type.props : undefined) || {};
  const props: Record<string, any> = {};

  Object.keys(type).forEach((key) => {
    if (hasOwn(type[key], 'default')) {
      props[key] = type[key].default;
    }
  });

  Object.keys(raw).forEach((key) => {
    props[camelize(key)] = raw[key];
  });

  return props;
};

export const ensureOnlyChild = (children: VNodeArrayChildren | undefined) => {
  if (!isArray(children) || children.length > 1) {
    throw new Error('expect to receive a single Vue element child');
  }
  return children[0];
};

export type FlattenVNodes = Array<VNodeChildAtom | RawSlots>;

export const flattedChildren = (
  children: FlattenVNodes | VNode | VNodeNormalizedChildren,
): FlattenVNodes => {
  const vNodes = isArray(children) ? children : [children];
  const result: FlattenVNodes = [];

  vNodes.forEach((child) => {
    if (isArray(child)) {
      result.push(...flattedChildren(child));
    } else if (isVNode(child) && isArray(child.children)) {
      result.push(...flattedChildren(child.children));
    } else {
      result.push(child);
    }
  });
  return result;
};