refactor: encapsulating the method for checking the shapeFlag of a vnode

packages/runtime-core/src/compat/componentVModel.ts

@@ -1,4 +1,4 @@
-import { ShapeFlags, extend } from '@vue/shared'
+import { extend, isComponentVNode } from '@vue/shared'
 import type { ComponentInternalInstance, ComponentOptions } from '../component'
 import { ErrorCodes, callWithErrorHandling } from '../errorHandling'
 import type { VNode } from '../vnode'
@@ -16,7 +16,7 @@ const warnedTypes = new WeakSet()
 export function convertLegacyVModelProps(vnode: VNode) {
  const { type, shapeFlag, props, dynamicProps } = vnode
  const comp = type as ComponentOptions
- if (shapeFlag & ShapeFlags.COMPONENT && props && 'modelValue' in props) {
+ if (isComponentVNode(shapeFlag) && props && 'modelValue' in props) {
  if (
  !isCompatEnabled(
  DeprecationTypes.COMPONENT_V_MODEL,

packages/runtime-core/src/compat/instanceChildren.ts

@@ -1,4 +1,4 @@
-import { ShapeFlags } from '@vue/shared'
+import { isArrayChildrenVNode } from '@vue/shared'
 import type { ComponentInternalInstance } from '../component'
 import type { ComponentPublicInstance } from '../componentPublicInstance'
 import type { VNode } from '../vnode'
@@ -19,7 +19,7 @@ export function getCompatChildren(
 function walk(vnode: VNode, children: ComponentPublicInstance[]) {
  if (vnode.component) {
  children.push(vnode.component.proxy!)
- } else if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ } else if (isArrayChildrenVNode(vnode.shapeFlag)) {
  const vnodes = vnode.children as VNode[]
  for (let i = 0; i < vnodes.length; i++) {
  walk(vnodes[i], children)

packages/runtime-core/src/compat/renderFn.ts

@@ -1,9 +1,10 @@
 import {
- ShapeFlags,
  extend,
  hyphenate,
  isArray,
+ isComponentVNode,
  isObject,
+ isStatefulComponentVNode,
  isString,
  makeMap,
  normalizeClass,
@@ -263,7 +264,7 @@ function convertLegacySlots(vnode: VNode): VNode {
 
  let slots: Record<string, any> | undefined
 
- if (vnode.shapeFlag & ShapeFlags.COMPONENT && isArray(children)) {
+ if (isComponentVNode(vnode.shapeFlag) && isArray(children)) {
  slots = {}
  // check "slot" property on vnodes and turn them into v3 function slots
  for (let i = 0; i < children.length; i++) {
@@ -330,7 +331,7 @@ export function defineLegacyVNodeProperties(vnode: VNode) {
  context: { get: () => context && context.proxy },
  componentOptions: {
  get: () => {
- if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+ if (isStatefulComponentVNode(vnode.shapeFlag)) {
  if (componentOptions) {
  return componentOptions
  }

packages/runtime-core/src/component.ts

@@ -62,13 +62,13 @@ import {
  EMPTY_OBJ,
  type IfAny,
  NOOP,
- ShapeFlags,
  extend,
  getGlobalThis,
  isArray,
  isFunction,
  isObject,
  isPromise,
+ isStatefulComponentVNode,
  makeMap,
 } from '@vue/shared'
 import type { SuspenseBoundary } from './components/Suspense'
@@ -717,10 +717,6 @@ export function validateComponentName(
  }
 }
 
-export function isStatefulComponent(instance: ComponentInternalInstance) {
- return instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
-}
-
 export let isInSSRComponentSetup = false
 
 export function setupComponent(
@@ -730,7 +726,7 @@ export function setupComponent(
  isSSR && setInSSRSetupState(isSSR)
 
  const { props, children } = instance.vnode
- const isStateful = isStatefulComponent(instance)
+ const isStateful = isStatefulComponentVNode(instance.vnode.shapeFlag)
  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)
 

packages/runtime-core/src/componentPublicInstance.ts

@@ -2,7 +2,6 @@ import {
  type ComponentInternalInstance,
  type Data,
  getExposeProxy,
- isStatefulComponent,
 } from './component'
 import { nextTick, queueJob } from './scheduler'
 import {
@@ -20,6 +19,7 @@ import {
  hasOwn,
  isFunction,
  isGloballyAllowed,
+ isStatefulComponentVNode,
  isString,
 } from '@vue/shared'
 import {
@@ -254,7 +254,8 @@ const getPublicInstance = (
  i: ComponentInternalInstance | null,
 ): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null => {
  if (!i) return null
- if (isStatefulComponent(i)) return getExposeProxy(i) || i.proxy
+ if (isStatefulComponentVNode(i.vnode.shapeFlag))
+ return getExposeProxy(i) || i.proxy
  return getPublicInstance(i.parent)
 }
 

packages/runtime-core/src/componentRenderUtils.ts

@@ -15,7 +15,14 @@ import {
  normalizeVNode,
 } from './vnode'
 import { ErrorCodes, handleError } from './errorHandling'
-import { PatchFlags, ShapeFlags, isModelListener, isOn } from '@vue/shared'
+import {
+ PatchFlags,
+ ShapeFlags,
+ isCustomTypeVNode,
+ isModelListener,
+ isOn,
+ isStatefulComponentVNode,
+} from '@vue/shared'
 import { warn } from './warning'
 import { isHmrUpdating } from './hmr'
 import type { NormalizedProps } from './componentProps'
@@ -69,7 +76,7 @@ export function renderComponentRoot(
  }
 
  try {
- if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+ if (isStatefulComponentVNode(vnode.shapeFlag)) {
  // withProxy is a proxy with a different `has` trap only for
  // runtime-compiled render functions using `with` block.
  const proxyToUse = withProxy || proxy
@@ -151,7 +158,9 @@ export function renderComponentRoot(
  const keys = Object.keys(fallthroughAttrs)
  const { shapeFlag } = root
  if (keys.length) {
- if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.COMPONENT)) {
+ if (
+ isCustomTypeVNode(shapeFlag, ShapeFlags.ELEMENT | ShapeFlags.COMPONENT)
+ ) {
  if (propsOptions && keys.some(isModelListener)) {
  // If a v-model listener (onUpdate:xxx) has a corresponding declared
  // prop, it indicates this component expects to handle v-model and
@@ -205,8 +214,8 @@ export function renderComponentRoot(
  if (
  __COMPAT__ &&
  isCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, instance) &&
- vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT &&
- root.shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.COMPONENT)
+ isStatefulComponentVNode(vnode.shapeFlag) &&
+ isCustomTypeVNode(root.shapeFlag, ShapeFlags.ELEMENT | ShapeFlags.COMPONENT)
  ) {
  const { class: cls, style } = vnode.props || {}
  if (cls || style) {
@@ -346,8 +355,10 @@ const filterModelListeners = (attrs: Data, props: NormalizedProps): Data => {
 
 const isElementRoot = (vnode: VNode) => {
  return (
- vnode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.ELEMENT) ||
- vnode.type === Comment // potential v-if branch switch
+ isCustomTypeVNode(
+ vnode.shapeFlag,
+ ShapeFlags.COMPONENT | ShapeFlags.ELEMENT,
+ ) || vnode.type === Comment // potential v-if branch switch
  )
 }
 

packages/runtime-core/src/componentSlots.ts

@@ -10,12 +10,12 @@ import {
  EMPTY_OBJ,
  type IfAny,
  type Prettify,
- ShapeFlags,
  SlotFlags,
  def,
  extend,
  isArray,
  isFunction,
+ isSlotsChildrenVNode,
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
@@ -167,7 +167,7 @@ export const initSlots = (
  instance: ComponentInternalInstance,
  children: VNodeNormalizedChildren,
 ) => {
- if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
+ if (isSlotsChildrenVNode(instance.vnode.shapeFlag)) {
  const type = (children as RawSlots)._
  if (type) {
  // users can get the shallow readonly version of the slots object through `this.$slots`,
@@ -199,7 +199,7 @@ export const updateSlots = (
  const { vnode, slots } = instance
  let needDeletionCheck = true
  let deletionComparisonTarget = EMPTY_OBJ
- if (vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
+ if (isSlotsChildrenVNode(vnode.shapeFlag)) {
  const type = (children as RawSlots)._
  if (type) {
  // compiled slots.

packages/runtime-core/src/components/BaseTransition.ts

@@ -16,7 +16,12 @@ import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
-import { PatchFlags, ShapeFlags, isArray } from '@vue/shared'
+import {
+ PatchFlags,
+ isArray,
+ isComponentVNode,
+ isSuspenseVNode,
+} from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
 import type { RendererElement } from '../renderer'
 
@@ -471,9 +476,9 @@ function getKeepAliveChild(vnode: VNode): VNode | undefined {
 }
 
 export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
- if (vnode.shapeFlag & ShapeFlags.COMPONENT && vnode.component) {
+ if (isComponentVNode(vnode.shapeFlag) && vnode.component) {
  setTransitionHooks(vnode.component.subTree, hooks)
- } else if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
+ } else if (__FEATURE_SUSPENSE__ && isSuspenseVNode(vnode.shapeFlag)) {
  vnode.ssContent!.transition = hooks.clone(vnode.ssContent!)
  vnode.ssFallback!.transition = hooks.clone(vnode.ssFallback!)
  } else {

packages/runtime-core/src/components/KeepAlive.ts

@@ -28,7 +28,9 @@ import {
  invokeArrayFns,
  isArray,
  isRegExp,
+ isStatefulComponentVNode,
  isString,
+ isSuspenseVNode,
  remove,
 } from '@vue/shared'
 import { watch } from '../apiWatch'
@@ -267,8 +269,8 @@ const KeepAliveImpl: ComponentOptions = {
  return children
  } else if (
  !isVNode(rawVNode) ||
- (!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) &&
- !(rawVNode.shapeFlag & ShapeFlags.SUSPENSE))
+ (!isStatefulComponentVNode(rawVNode.shapeFlag) &&
+ !isSuspenseVNode(rawVNode.shapeFlag))
  ) {
  current = null
  return rawVNode
@@ -301,7 +303,7 @@ const KeepAliveImpl: ComponentOptions = {
  // clone vnode if it's reused because we are going to mutate it
  if (vnode.el) {
  vnode = cloneVNode(vnode)
- if (rawVNode.shapeFlag & ShapeFlags.SUSPENSE) {
+ if (isSuspenseVNode(rawVNode.shapeFlag)) {
  rawVNode.ssContent = vnode
  }
  }
@@ -442,5 +444,5 @@ function resetShapeFlag(vnode: VNode) {
 }
 
 function getInnerChild(vnode: VNode) {
- return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent! : vnode
+ return isSuspenseVNode(vnode.shapeFlag) ? vnode.ssContent! : vnode
 }

packages/runtime-core/src/components/Suspense.ts

@@ -10,7 +10,13 @@ import {
  normalizeVNode,
  openBlock,
 } from '../vnode'
-import { ShapeFlags, isArray, isFunction, toNumber } from '@vue/shared'
+import {
+ isArray,
+ isComponentKeptAliveVNode,
+ isFunction,
+ isSlotsChildrenVNode,
+ toNumber,
+} from '@vue/shared'
 import { type ComponentInternalInstance, handleSetupResult } from '../component'
 import type { Slots } from '../componentSlots'
 import {
@@ -376,7 +382,7 @@ function patchSuspense(
  triggerEvent(n2, 'onPending')
  // mount pending branch in off-dom container
  suspense.pendingBranch = newBranch
- if (newBranch.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
+ if (isComponentKeptAliveVNode(newBranch.shapeFlag)) {
  suspense.pendingId = newBranch.component!.suspenseId!
  } else {
  suspense.pendingId = suspenseId++
@@ -819,7 +825,7 @@ function hydrateSuspense(
 
 function normalizeSuspenseChildren(vnode: VNode) {
  const { shapeFlag, children } = vnode
- const isSlotChildren = shapeFlag & ShapeFlags.SLOTS_CHILDREN
+ const isSlotChildren = isSlotsChildrenVNode(shapeFlag)
  vnode.ssContent = normalizeSuspenseSlot(
  isSlotChildren ? (children as Slots).default : children,
  )

packages/runtime-core/src/components/Teleport.ts

@@ -10,7 +10,7 @@ import {
  traverseStaticChildren,
 } from '../renderer'
 import type { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { ShapeFlags, isString } from '@vue/shared'
+import { isArrayChildrenVNode, isString } from '@vue/shared'
 import { warn } from '../warning'
 import { isHmrUpdating } from '../hmr'
 
@@ -125,7 +125,7 @@ export const TeleportImpl = {
  const mount = (container: RendererElement, anchor: RendererNode) => {
  // Teleport *always* has Array children. This is enforced in both the
  // compiler and vnode children normalization.
- if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ if (isArrayChildrenVNode(shapeFlag)) {
  mountChildren(
  children as VNodeArrayChildren,
  container,
@@ -263,7 +263,7 @@ export const TeleportImpl = {
 
  // an unmounted teleport should always unmount its children whether it's disabled or not
  doRemove && hostRemove(anchor!)
- if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ if (isArrayChildrenVNode(shapeFlag)) {
  const shouldRemove = doRemove || !isTeleportDisabled(props)
  for (let i = 0; i < (children as VNode[]).length; i++) {
  const child = (children as VNode[])[i]
@@ -310,7 +310,7 @@ function moveTeleport(
  // is not a reorder, or the teleport is disabled
  if (!isReorder || isTeleportDisabled(props)) {
  // Teleport has either Array children or no children.
- if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ if (isArrayChildrenVNode(shapeFlag)) {
  for (let i = 0; i < (children as VNode[]).length; i++) {
  move(
  (children as VNode[])[i],
@@ -361,7 +361,7 @@ function hydrateTeleport(
  // pick up from where the last teleport finished instead of the first node
  const targetNode =
  (target as TeleportTargetElement)._lpa || target.firstChild
- if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ if (isArrayChildrenVNode(vnode.shapeFlag)) {
  if (isTeleportDisabled(vnode.props)) {
  vnode.anchor = hydrateChildren(
  nextSibling(node),