feat(compiler): generate patchFlags for runtime

packages/runtime-core/__tests__/rendererFragment.spec.ts

@@ -107,7 +107,7 @@ describe('renderer: fragment', () => {
   it('patch fragment children (compiler generated, unkeyed)', () => {
     const root = nodeOps.createElement('div')
     render(
-      createVNode(Fragment, 0, [h('div', 'one'), 'two'], PatchFlags.UNKEYED),
+      createVNode(Fragment, null, [h('div', 'one'), 'two'], PatchFlags.UNKEYED),
       root
     )
     expect(serializeInner(root)).toBe(`<!----><div>one</div>two<!---->`)
@@ -115,7 +115,7 @@ describe('renderer: fragment', () => {
     render(
       createVNode(
         Fragment,
-        0,
+        null,
         [h('div', 'foo'), 'bar', 'baz'],
         PatchFlags.UNKEYED
       ),
@@ -130,7 +130,7 @@ describe('renderer: fragment', () => {
     render(
       createVNode(
         Fragment,
-        0,
+        null,
         [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')],
         PatchFlags.KEYED
       ),
@@ -144,7 +144,7 @@ describe('renderer: fragment', () => {
     render(
       createVNode(
         Fragment,
-        0,
+        null,
         [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')],
         PatchFlags.KEYED
       ),

packages/runtime-core/src/componentProps.ts

@@ -10,11 +10,11 @@ import {
   isObject,
   isReservedProp,
   hasOwn,
-  toTypeString
+  toTypeString,
+  PatchFlags
 } from '@vue/shared'
 import { warn } from './warning'
 import { Data, ComponentInternalInstance } from './component'
-import { PatchFlags } from './patchFlags'
 
 export type ComponentPropsOptions<P = Data> = {
   [K in keyof P]: Prop<P[K]> | null

packages/runtime-core/src/componentRenderUtils.ts

@@ -6,7 +6,7 @@ import {
 import { VNode, normalizeVNode, createVNode, Comment } from './vnode'
 import { ShapeFlags } from './shapeFlags'
 import { handleError, ErrorCodes } from './errorHandling'
-import { PatchFlags } from './patchFlags'
+import { PatchFlags } from '@vue/shared'
 
 // mark the current rendering instance for asset resolution (e.g.
 // resolveComponent, resolveDirective) during render

packages/runtime-core/src/createRenderer.ts

@@ -25,7 +25,8 @@ import {
   EMPTY_ARR,
   isReservedProp,
   isFunction,
-  isArray
+  isArray,
+  PatchFlags
 } from '@vue/shared'
 import { queueJob, queuePostFlushCb, flushPostFlushCbs } from './scheduler'
 import {
@@ -38,7 +39,6 @@ import {
 } from '@vue/reactivity'
 import { resolveProps } from './componentProps'
 import { resolveSlots } from './componentSlots'
-import { PatchFlags } from './patchFlags'
 import { ShapeFlags } from './shapeFlags'
 import { pushWarningContext, popWarningContext, warn } from './warning'
 import { invokeDirectiveHook } from './directives'

packages/runtime-core/src/index.ts

@@ -21,8 +21,8 @@ export {
 // VNode type symbols
 export { Text, Comment, Fragment, Portal, Suspense } from './vnode'
 // VNode flags
-export { PublicPatchFlags as PatchFlags } from './patchFlags'
 export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
+export { PublicPatchFlags as PatchFlags } from '@vue/shared'
 
 // For advanced plugins
 export { getCurrentInstance } from './component'

packages/runtime-core/src/patchFlags.ts

@@ -1,76 +0,0 @@
-// Patch flags are optimization hints generated by the compiler.
-// when a block with dynamicChildren is encountered during diff, the algorithm
-// enters "optimized mode". In this mode, we know that the vdom is produced by
-// a render function generated by the compiler, so the algorithm only needs to
-// handle updates explicitly marked by these patch flags.
-
-// Patch flags can be combined using the | bitwise operator and can be checked
-// using the & operator, e.g.
-//
-//   const flag = TEXT | CLASS
-//   if (flag & TEXT) { ... }
-//
-// Check the `patchElement` function in './createRednerer.ts' to see how the
-// flags are handled during diff.
-
-export const enum PatchFlags {
-  // Indicates an element with dynamic textContent (children fast path)
-  TEXT = 1,
-
-  // Indicates an element with dynamic class.
-  // The compiler also pre-normalizes the :class binding:
-  // - b -> normalize(b)
-  // - ['foo', b] -> 'foo' + normalize(b)
-  // - { a, b: c } -> (a ? a : '') + (b ? c : '')
-  // - ['a', b, { c }] -> 'a' + normalize(b) + (c ? c : '')
-  CLASS = 1 << 1,
-
-  // Indicates an element with dynamic style
-  // The compiler pre-compiles static string styles into static objects
-  // + detects and hoists inline static objects
-  // e.g. style="color: red" and :style="{ color: 'red' }" both get hoisted as
-  //   const style = { color: 'red' }
-  //   render() { return e('div', { style }) }
-  STYLE = 1 << 2,
-
-  // Indicates an element that has non-class/style dynamic props.
-  // Can also be on a component that has any dynamic props (includes
-  // class/style). when this flag is present, the vnode also has a dynamicProps
-  // array that contains the keys of the props that may change so the runtime
-  // can diff them faster (without having to worry about removed props)
-  PROPS = 1 << 3,
-
-  // Indicates an element with props with dynamic keys. When keys change, a full
-  // diff is always needed to remove the old key. This flag is mutually
-  // exclusive with CLASS, STYLE and PROPS.
-  FULL_PROPS = 1 << 4,
-
-  // Indicates an element that only needs non-props patching, e.g. ref or
-  // directives (vnodeXXX hooks). It simply marks the vnode as "need patch",
-  // since every pathced vnode checks for refs and vnodeXXX hooks.
-  NEED_PATCH = 1 << 5,
-
-  // Indicates a fragment or element with keyed or partially-keyed v-for
-  // children
-  KEYED = 1 << 6,
-
-  // Indicates a fragment or element that contains unkeyed v-for children
-  UNKEYED = 1 << 7,
-
-  // Indicates a component with dynamic slots (e.g. slot that references a v-for
-  // iterated value, or dynamic slot names).
-  // Components with this flag are always force updated.
-  DYNAMIC_SLOTS = 1 << 8
-}
-
-// runtime object for public consumption
-export const PublicPatchFlags = {
-  TEXT: PatchFlags.TEXT,
-  CLASS: PatchFlags.CLASS,
-  STYLE: PatchFlags.STYLE,
-  PROPS: PatchFlags.PROPS,
-  NEED_PATCH: PatchFlags.NEED_PATCH,
-  FULL_PROPS: PatchFlags.FULL_PROPS,
-  KEYED: PatchFlags.KEYED,
-  UNKEYED: PatchFlags.UNKEYED
-}

packages/runtime-core/src/vnode.ts

@@ -4,11 +4,11 @@ import {
   isString,
   isObject,
   EMPTY_ARR,
-  extend
+  extend,
+  PatchFlags
 } from '@vue/shared'
 import { ComponentInternalInstance, Data, SetupProxySymbol } from './component'
 import { RawSlots } from './componentSlots'
-import { PatchFlags } from './patchFlags'
 import { ShapeFlags } from './shapeFlags'
 import { isReactive } from '@vue/reactivity'
 import { AppContext } from './apiApp'
@@ -131,14 +131,11 @@ export function isVNode(value: any): boolean {
 
 export function createVNode(
   type: VNodeTypes,
-  props: { [key: string]: any } | null | 0 = null,
-  children: any = null,
+  props: { [key: string]: any } | null = null,
+  children: unknown = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null
 ): VNode {
-  // Allow passing 0 for props, this can save bytes on generated code.
-  props = props || null
-
   // class & style normalization.
   if (props !== null) {
     // for reactive or proxy objects, we need to clone it to enable mutation.