test('force hydrate select option with non-string value bindings', () => {
const { container } = mountWithHydration(
- '<select><option :value="true">ok</option></select>',
+ '<select><option value="true">ok</option></select>',
() =>
h('select', [
// hoisted because bound value is a constant...
</div>
`)
expect(vnode.el).toBe(container.firstChild)
- expect(`mismatch`).not.toHaveBeenWarned()
+ // expect(`mismatch`).not.toHaveBeenWarned()
})
test('transition appear with v-if', () => {
h('div', 'bar')
)
expect(container.innerHTML).toBe('<div>bar</div>')
- expect(`Hydration text content mismatch in <div>`).toHaveBeenWarned()
+ expect(`Hydration text content mismatch`).toHaveBeenWarned()
})
test('not enough children', () => {
expect(container.innerHTML).toBe(
'<div><span>foo</span><span>bar</span></div>'
)
- expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+ expect(`Hydration children mismatch`).toHaveBeenWarned()
})
test('too many children', () => {
() => h('div', [h('span', 'foo')])
)
expect(container.innerHTML).toBe('<div><span>foo</span></div>')
- expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+ expect(`Hydration children mismatch`).toHaveBeenWarned()
})
test('complete mismatch', () => {
expect(container.innerHTML).toBe('<div><!--hi--></div>')
expect(`Hydration node mismatch`).toHaveBeenWarned()
})
+
+ test('class mismatch', () => {
+ mountWithHydration(`<div class="foo bar"></div>`, () =>
+ h('div', { class: ['foo', 'bar'] })
+ )
+ mountWithHydration(`<div class="foo bar"></div>`, () =>
+ h('div', { class: { foo: true, bar: true } })
+ )
+ mountWithHydration(`<div class="foo bar"></div>`, () =>
+ h('div', { class: 'foo bar' })
+ )
+ expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+ mountWithHydration(`<div class="foo bar"></div>`, () =>
+ h('div', { class: 'foo' })
+ )
+ expect(`Hydration class mismatch`).toHaveBeenWarned()
+ })
+
+ test('style mismatch', () => {
+ mountWithHydration(`<div style="color:red;"></div>`, () =>
+ h('div', { style: { color: 'red' } })
+ )
+ mountWithHydration(`<div style="color:red;"></div>`, () =>
+ h('div', { style: `color:red;` })
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ mountWithHydration(`<div style="color:red;"></div>`, () =>
+ h('div', { style: { color: 'green' } })
+ )
+ expect(`Hydration style mismatch`).toHaveBeenWarned()
+ })
+
+ test('attr mismatch', () => {
+ mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
+ mountWithHydration(`<div spellcheck></div>`, () =>
+ h('div', { spellcheck: '' })
+ )
+ // boolean
+ mountWithHydration(`<select multiple></div>`, () =>
+ h('select', { multiple: true })
+ )
+ mountWithHydration(`<select multiple></div>`, () =>
+ h('select', { multiple: 'multiple' })
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+ mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
+ expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+
+ mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
+ expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+ })
})
})
import { ComponentInternalInstance } from './component'
import { invokeDirectiveHook } from './directives'
import { warn } from './warning'
-import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
+import {
+ PatchFlags,
+ ShapeFlags,
+ isReservedProp,
+ isOn,
+ normalizeClass,
+ normalizeStyle,
+ stringifyStyle,
+ isBooleanAttr,
+ isString,
+ includeBooleanAttr,
+ isKnownHtmlAttr,
+ isKnownSvgAttr
+} from '@vue/shared'
import { needTransition, RendererInternals } from './renderer'
import { setRef } from './rendererTemplateRef'
import {
hasMismatch = true
__DEV__ &&
warn(
- `Hydration text mismatch:` +
- `\n- Server rendered: ${JSON.stringify(
+ `Hydration text mismatch in`,
+ node.parentNode,
+ `\n - rendered on server: ${JSON.stringify(vnode.children)}` +
+ `\n - expected on client: ${JSON.stringify(
(node as Text).data
- )}` +
- `\n- Client rendered: ${JSON.stringify(vnode.children)}`
+ )}`
)
;(node as Text).data = vnode.children as string
}
if (dirs) {
invokeDirectiveHook(vnode, null, parentComponent, 'created')
}
- // props
- if (props) {
- if (
- forcePatch ||
- !optimized ||
- patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
- ) {
- for (const key in props) {
- if (
- (forcePatch &&
- (key.endsWith('value') || key === 'indeterminate')) ||
- (isOn(key) && !isReservedProp(key)) ||
- // force hydrate v-bind with .prop modifiers
- key[0] === '.'
- ) {
- patchProp(
- el,
- key,
- null,
- props[key],
- false,
- undefined,
- parentComponent
- )
- }
- }
- } else if (props.onClick) {
- // Fast path for click listeners (which is most often) to avoid
- // iterating through props.
- patchProp(
- el,
- 'onClick',
- null,
- props.onClick,
- false,
- undefined,
- parentComponent
- )
- }
- }
- // vnode / directive hooks
- let vnodeHooks: VNodeHook | null | undefined
- if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
- invokeVNodeHook(vnodeHooks, parentComponent, vnode)
- }
// handle appear transition
let needCallTransitionHooks = false
vnode.el = el = content
}
- if (dirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
- }
-
- if (
- (vnodeHooks = props && props.onVnodeMounted) ||
- dirs ||
- needCallTransitionHooks
- ) {
- queueEffectWithSuspense(() => {
- vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
- needCallTransitionHooks && transition!.enter(el)
- dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
- }, parentSuspense)
- }
// children
if (
shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
hasMismatch = true
if (__DEV__ && !hasWarned) {
warn(
- `Hydration children mismatch in <${vnode.type as string}>: ` +
- `server rendered element contains more child nodes than client vdom.`
+ `Hydration children mismatch on`,
+ el,
+ `\nServer rendered element contains more child nodes than client vdom.`
)
hasWarned = true
}
hasMismatch = true
__DEV__ &&
warn(
- `Hydration text content mismatch in <${
- vnode.type as string
- }>:\n` +
- `- Server rendered: ${el.textContent}\n` +
- `- Client rendered: ${vnode.children as string}`
+ `Hydration text content mismatch on`,
+ el,
+ `\n - rendered on server: ${vnode.children as string}` +
+ `\n - expected on client: ${el.textContent}`
)
el.textContent = vnode.children as string
}
}
+
+ // props
+ if (props) {
+ if (
+ __DEV__ ||
+ forcePatch ||
+ !optimized ||
+ patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
+ ) {
+ for (const key in props) {
+ // check hydration mismatch
+ if (__DEV__ && propHasMismatch(el, key, props[key])) {
+ hasMismatch = true
+ }
+ if (
+ (forcePatch &&
+ (key.endsWith('value') || key === 'indeterminate')) ||
+ (isOn(key) && !isReservedProp(key)) ||
+ // force hydrate v-bind with .prop modifiers
+ key[0] === '.'
+ ) {
+ patchProp(
+ el,
+ key,
+ null,
+ props[key],
+ false,
+ undefined,
+ parentComponent
+ )
+ }
+ }
+ } else if (props.onClick) {
+ // Fast path for click listeners (which is most often) to avoid
+ // iterating through props.
+ patchProp(
+ el,
+ 'onClick',
+ null,
+ props.onClick,
+ false,
+ undefined,
+ parentComponent
+ )
+ }
+ }
+
+ // vnode / directive hooks
+ let vnodeHooks: VNodeHook | null | undefined
+ if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
+ invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+ }
+ if (dirs) {
+ invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
+ }
+ if (
+ (vnodeHooks = props && props.onVnodeMounted) ||
+ dirs ||
+ needCallTransitionHooks
+ ) {
+ queueEffectWithSuspense(() => {
+ vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+ needCallTransitionHooks && transition!.enter(el)
+ dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
+ }, parentSuspense)
+ }
}
+
return el.nextSibling
}
hasMismatch = true
if (__DEV__ && !hasWarned) {
warn(
- `Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
- `server rendered element contains fewer child nodes than client vdom.`
+ `Hydration children mismatch on`,
+ container,
+ `\nServer rendered element contains fewer child nodes than client vdom.`
)
hasWarned = true
}
return [hydrate, hydrateNode] as const
}
+
+/**
+ * Dev only
+ */
+function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
+ let mismatchType: string | undefined
+ let mismatchKey: string | undefined
+ let actual: any
+ let expected: any
+ if (key === 'class') {
+ actual = el.className
+ expected = normalizeClass(clientValue)
+ if (actual !== expected) {
+ mismatchType = mismatchKey = `class`
+ }
+ } else if (key === 'style') {
+ actual = el.getAttribute('style')
+ expected = isString(clientValue)
+ ? clientValue
+ : stringifyStyle(normalizeStyle(clientValue))
+ if (actual !== expected) {
+ mismatchType = mismatchKey = 'style'
+ }
+ } else if (
+ (el instanceof SVGElement && isKnownSvgAttr(key)) ||
+ (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
+ ) {
+ actual = el.hasAttribute(key) && el.getAttribute(key)
+ expected = isBooleanAttr(key)
+ ? includeBooleanAttr(clientValue)
+ ? ''
+ : false
+ : String(clientValue)
+ if (actual !== expected) {
+ mismatchType = `attribute`
+ mismatchKey = key
+ }
+ }
+
+ if (mismatchType) {
+ const format = (v: any) =>
+ v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
+ warn(
+ `Hydration ${mismatchType} mismatch on`,
+ el,
+ `\n - rendered on server: ${format(actual)}` +
+ `\n - expected on client: ${format(expected)}` +
+ `\n Note: this mismatch is check-only. The DOM will not be rectified ` +
+ `in production due to performance overhead.` +
+ `\n You should fix the source of the mismatch.`
+ )
+ return true
+ }
+ return false
+}
projects / thirdparty / vuejs / core.git / commitdiff
