Skip to content

Commit

Permalink
fix(hydration): fix SFC style v-bind hydration mismatch warnings (vue…
Browse files Browse the repository at this point in the history
  • Loading branch information
yangxiuxiu1115 authored and lynxlangya committed May 30, 2024
1 parent 2cff7c0 commit b7c03cf
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 1 deletion.
16 changes: 16 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
onMounted,
ref,
renderSlot,
useCssVars,
vModelCheckbox,
vShow,
withDirectives,
Expand Down Expand Up @@ -1538,5 +1539,20 @@ describe('SSR hydration', () => {
)
expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
})

test('should not warn css v-bind', () => {
const container = document.createElement('div')
container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
const app = createSSRApp({
setup() {
useCssVars(() => ({
foo: 'red',
}))
return () => h('div', { style: { color: 'var(--foo)' } })
},
})
app.mount(container)
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
})
})
})
6 changes: 6 additions & 0 deletions packages/runtime-core/src/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,12 @@ export interface ComponentInternalInstance {
* @internal
*/
ut?: (vars?: Record<string, string>) => void

/**
* dev only. For style v-bind hydration mismatch checks
* @internal
*/
getCssVars?: () => Record<string, string>
}

const emptyAppContext = createAppContext()
Expand Down
12 changes: 11 additions & 1 deletion packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,10 @@ export function createHydrationFunctions(
) {
for (const key in props) {
// check hydration mismatch
if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
if (
__DEV__ &&
propHasMismatch(el, key, props[key], vnode, parentComponent)
) {
hasMismatch = true
}
if (
Expand Down Expand Up @@ -718,6 +721,7 @@ function propHasMismatch(
key: string,
clientValue: any,
vnode: VNode,
instance: ComponentInternalInstance | null,
): boolean {
let mismatchType: string | undefined
let mismatchKey: string | undefined
Expand Down Expand Up @@ -748,6 +752,12 @@ function propHasMismatch(
}
}
}

const cssVars = instance?.getCssVars?.()
for (const key in cssVars) {
expectedMap.set(`--${key}`, String(cssVars[key]))
}

if (!isMapEqual(actualMap, expectedMap)) {
mismatchType = mismatchKey = 'style'
}
Expand Down
4 changes: 4 additions & 0 deletions packages/runtime-dom/src/helpers/useCssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
).forEach(node => setVarsOnNode(node, vars))
})

if (__DEV__) {
instance.getCssVars = () => getter(instance.proxy)
}

const setVars = () => {
const vars = getter(instance.proxy)
setVarsOnVNode(instance.subTree, vars)
Expand Down

0 comments on commit b7c03cf

Please sign in to comment.