feat(runtime): support delay initializing props (fix #2325)

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

@@ -1,10 +1,12 @@
 import {
+  createRenderer,
   h,
-  render,
   nodeOps,
-  TestElement,
-  serializeInner as inner
+  render,
+  serializeInner as inner,
+  TestElement
 } from '@vue/runtime-test'
+import { extend } from '@vue/shared'
 
 describe('renderer: element', () => {
   let root: TestElement
@@ -48,4 +50,50 @@ describe('renderer: element', () => {
     render(h('div', { id: 'baz', class: 'bar' }, ['foo']), root)
     expect(inner(root)).toBe('<div id="baz" class="bar">foo</div>')
   })
+
+  it('should delay the initializing of specific props', () => {
+    const queue: string[] = []
+    const { render } = createRenderer(
+      extend(
+        {
+          patchProp(
+            el: TestElement,
+            key: string,
+            prevValue: any,
+            nextValue: any
+          ) {
+            el.props[key] = nextValue
+            queue.push(key)
+          },
+          delayInitProp(el: Element, key: string) {
+            return key.startsWith('delay')
+              ? key.startsWith('delay-weak')
+                ? -1
+                : 1
+              : 0
+          }
+        },
+        nodeOps
+      )
+    )
+
+    render(
+      h('div', {
+        'delay-a': 'a',
+        'delay-b': 'b',
+        'delay-weak-a': 'a',
+        id: 'baz'
+      }),
+      root
+    )
+    expect(queue.length).toBe(4)
+    expect(queue[0]).toBe('id')
+    expect(queue[1]).toBe('delay-weak-a')
+    expect(queue[2]).toBe('delay-a')
+    expect(queue[3]).toBe('delay-b')
+
+    expect(inner(root)).toBe(
+      '<div id="baz" delay-weak-a="a" delay-a="a" delay-b="b"></div>'
+    )
+  })
 })

packages/runtime-core/src/renderer.ts

@@ -119,24 +119,40 @@ export interface RendererOptions<
     parentSuspense?: SuspenseBoundary | null,
     unmountChildren?: UnmountChildrenFn
   ): void
+
   forcePatchProp?(el: HostElement, key: string): boolean
+
+  delayInitProp?(el: HostElement, key: string): number | boolean
+
   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
+
   remove(el: HostNode): void
+
   createElement(
     type: string,
     isSVG?: boolean,
     isCustomizedBuiltIn?: string,
     vnodeProps?: (VNodeProps & { [key: string]: any }) | null
   ): HostElement
+
   createText(text: string): HostNode
+
   createComment(text: string): HostNode
+
   setText(node: HostNode, text: string): void
+
   setElementText(node: HostElement, text: string): void
+
   parentNode(node: HostNode): HostElement | null
+
   nextSibling(node: HostNode): HostNode | null
+
   querySelector?(selector: string): HostElement | null
+
   setScopeId?(el: HostElement, id: string): void
+
   cloneNode?(node: HostNode): HostNode
+
   insertStaticContent?(
     content: string,
     parent: HostElement,
@@ -463,6 +479,7 @@ function baseCreateRenderer(
     remove: hostRemove,
     patchProp: hostPatchProp,
     forcePatchProp: hostForcePatchProp,
+    delayInitProp: hostDelayInitProp,
     createElement: hostCreateElement,
     createText: hostCreateText,
     createComment: hostCreateComment,
@@ -780,21 +797,66 @@ function baseCreateRenderer(
       }
       // props
       if (props) {
-        for (const key in props) {
-          if (!isReservedProp(key)) {
-            hostPatchProp(
-              el,
-              key,
-              null,
-              props[key],
-              isSVG,
-              vnode.children as VNode[],
-              parentComponent,
-              parentSuspense,
-              unmountChildren
-            )
+        if (!hostDelayInitProp) {
+          for (const key in props) {
+            if (!isReservedProp(key)) {
+              hostPatchProp(
+                el,
+                key,
+                null,
+                props[key],
+                isSVG,
+                vnode.children as VNode[],
+                parentComponent,
+                parentSuspense,
+                unmountChildren
+              )
+            }
+          }
+        } else {
+          let delayed: string[] | undefined
+          let priority
+          for (const key in props) {
+            if (!isReservedProp(key)) {
+              if ((priority = hostDelayInitProp(el, key))) {
+                !delayed && (delayed = [])
+                if (priority > 0 || priority === true) {
+                  delayed.push(key)
+                } else {
+                  delayed.unshift(key)
+                }
+              } else {
+                hostPatchProp(
+                  el,
+                  key,
+                  null,
+                  props[key],
+                  isSVG,
+                  vnode.children as VNode[],
+                  parentComponent,
+                  parentSuspense,
+                  unmountChildren
+                )
+              }
+            }
+          }
+          if (delayed) {
+            for (const key of delayed) {
+              hostPatchProp(
+                el,
+                key,
+                null,
+                props[key],
+                isSVG,
+                vnode.children as VNode[],
+                parentComponent,
+                parentSuspense,
+                unmountChildren
+              )
+            }
           }
         }
+
         if ((vnodeHook = props.onVnodeBeforeMount)) {
           invokeVNodeHook(vnodeHook, parentComponent, vnode)
         }

packages/runtime-dom/__tests__/patchAttrs.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../src/patchProp'
+import { patchProp } from '../src/propOps'
 import { xlinkNS } from '../src/modules/attrs'
 
 describe('runtime-dom: attrs patching', () => {

packages/runtime-dom/__tests__/patchClass.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../src/patchProp'
+import { patchProp } from '../src/propOps'
 import { ElementWithTransition } from '../src/components/Transition'
 import { svgNS } from '../src/nodeOps'
 

packages/runtime-dom/__tests__/patchEvents.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../src/patchProp'
+import { patchProp } from '../src/propOps'
 
 const timeout = () => new Promise(r => setTimeout(r))
 

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../src/patchProp'
+import { patchProp } from '../src/propOps'
 import { render, h } from '../src'
 
 describe('runtime-dom: props patching', () => {

packages/runtime-dom/__tests__/patchStyle.spec.ts

@@ -1,4 +1,4 @@
-import { patchProp } from '../src/patchProp'
+import { patchProp } from '../src/propOps'
 
 describe(`runtime-dom: style patching`, () => {
   it('string', () => {

packages/runtime-dom/src/directives/vModel.ts

@@ -47,7 +47,10 @@ type ModelDirective<T> = ObjectDirective<T & { _assign: AssignerFn }>
 export const vModelText: ModelDirective<
   HTMLInputElement | HTMLTextAreaElement
 > = {
-  created(el, { modifiers: { lazy, trim, number } }, vnode) {
+  created(el, { value, modifiers: { lazy, trim, number } }, vnode) {
+    // set value by props. #2325
+    // vnode.props at least contains onUpdate:modelValue
+    vnode.props!['value'] = value == null ? '' : value
     el._assign = getModelAssigner(vnode)
     const castToNumber = number || el.type === 'number'
     addEventListener(el, lazy ? 'change' : 'input', e => {
@@ -75,10 +78,6 @@ export const vModelText: ModelDirective<
       addEventListener(el, 'change', onCompositionEnd)
     }
   },
-  // set value on mounted so it's after min/max for type="range"
-  mounted(el, { value }) {
-    el.value = value == null ? '' : value
-  },
   beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) {
     el._assign = getModelAssigner(vnode)
     // avoid clearing unresolved text. #2302

packages/runtime-dom/src/index.ts

@@ -13,7 +13,7 @@ import {
   compatUtils
 } from '@vue/runtime-core'
 import { nodeOps } from './nodeOps'
-import { patchProp, forcePatchProp } from './patchProp'
+import { patchProp, forcePatchProp, delayInitProp } from './propOps'
 // Importing from the compiler, will be tree-shaken in prod
 import { isFunction, isString, isHTMLTag, isSVGTag, extend } from '@vue/shared'
 
@@ -24,7 +24,10 @@ declare module '@vue/reactivity' {
   }
 }
 
-const rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps)
+const rendererOptions = extend(
+  { patchProp, forcePatchProp, delayInitProp },
+  nodeOps
+)
 
 // lazy create the renderer - this makes core renderer logic tree-shakable
 // in case the user only imports reactivity utilities from Vue.

packages/runtime-dom/src/patchProp.ts → packages/runtime-dom/src/propOps.ts

@@ -13,6 +13,9 @@ type DOMRendererOptions = RendererOptions<Node, Element>
 export const forcePatchProp: DOMRendererOptions['forcePatchProp'] = (_, key) =>
   key === 'value'
 
+export const delayInitProp: DOMRendererOptions['delayInitProp'] = (_, key) =>
+  key === 'value'
+
 export const patchProp: DOMRendererOptions['patchProp'] = (
   el,
   key,