Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ flag #9550

Merged
merged 2 commits into from
Dec 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ declare var __COMPAT__: boolean
declare var __FEATURE_OPTIONS_API__: boolean
declare var __FEATURE_PROD_DEVTOOLS__: boolean
declare var __FEATURE_SUSPENSE__: boolean
declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean

// for tests
declare namespace jest {
Expand Down
5 changes: 5 additions & 0 deletions packages/runtime-core/src/featureFlags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ export function initFeatureFlags() {
getGlobalThis().__VUE_PROD_DEVTOOLS__ = false
}

if (typeof __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__ !== 'boolean') {
__DEV__ && needWarn.push(`__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`)
getGlobalThis().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
}

if (__DEV__ && needWarn.length) {
const multi = needWarn.length > 1
console.warn(
Expand Down
20 changes: 13 additions & 7 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function createHydrationFunctions(

const hydrate: RootHydrateFunction = (vnode, container) => {
if (!container.hasChildNodes()) {
__DEV__ &&
;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
warn(
`Attempting to hydrate existing markup but container is empty. ` +
`Performing full mount instead.`
Expand Down Expand Up @@ -159,7 +159,7 @@ export function createHydrationFunctions(
} else {
if ((node as Text).data !== vnode.children) {
hasMismatch = true
__DEV__ &&
;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
warn(
`Hydration text mismatch in`,
node.parentNode,
Expand Down Expand Up @@ -326,7 +326,7 @@ export function createHydrationFunctions(
rendererInternals,
hydrateNode
)
} else if (__DEV__) {
} else if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
warn('Invalid HostVNode type:', type, `(${typeof type})`)
}
}
Expand Down Expand Up @@ -398,7 +398,10 @@ export function createHydrationFunctions(
let hasWarned = false
while (next) {
hasMismatch = true
if (__DEV__ && !hasWarned) {
if (
(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
!hasWarned
) {
warn(
`Hydration children mismatch on`,
el,
Expand All @@ -414,7 +417,7 @@ export function createHydrationFunctions(
} else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
if (el.textContent !== vnode.children) {
hasMismatch = true
__DEV__ &&
;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
warn(
`Hydration text content mismatch on`,
el,
Expand Down Expand Up @@ -525,7 +528,10 @@ export function createHydrationFunctions(
continue
} else {
hasMismatch = true
if (__DEV__ && !hasWarned) {
if (
(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
!hasWarned
) {
warn(
`Hydration children mismatch on`,
container,
Expand Down Expand Up @@ -595,7 +601,7 @@ export function createHydrationFunctions(
isFragment: boolean
): Node | null => {
hasMismatch = true
__DEV__ &&
;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
warn(
`Hydration node mismatch:\n- Client vnode:`,
vnode.type,
Expand Down
1 change: 1 addition & 0 deletions packages/vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ Starting with 3.0.0-rc.3, `esm-bundler` builds now exposes global feature flags

- `__VUE_OPTIONS_API__` (enable/disable Options API support, default: `true`)
- `__VUE_PROD_DEVTOOLS__` (enable/disable devtools support in production, default: `false`)
- `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` (enable/disable detailed warnings for hydration mismatches in production, default: `false`)

The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:

Expand Down
3 changes: 3 additions & 0 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,9 @@ function createConfig(format, output, plugins = []) {
: `true`,
__FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
? `__VUE_PROD_DEVTOOLS__`
: `false`,
__FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
: `false`
}

Expand Down
3 changes: 2 additions & 1 deletion scripts/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@ esbuild
__COMPAT__: String(target === 'vue-compat'),
__FEATURE_SUSPENSE__: `true`,
__FEATURE_OPTIONS_API__: `true`,
__FEATURE_PROD_DEVTOOLS__: `false`
__FEATURE_PROD_DEVTOOLS__: `false`,
__FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`
}
})
.then(ctx => ctx.watch())
1 change: 1 addition & 0 deletions scripts/usage-size.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ async function generateBundle(preset: Preset) {
replace({
'process.env.NODE_ENV': '"production"',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
__VUE_OPTIONS_API__: 'true',
preventAssignment: true
})
Expand Down
1 change: 1 addition & 0 deletions vitest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default defineConfig({
__FEATURE_OPTIONS_API__: true,
__FEATURE_SUSPENSE__: true,
__FEATURE_PROD_DEVTOOLS__: false,
__FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
__COMPAT__: true
},
resolve: {
Expand Down