Vue3: Enable new hydration mismatch compile time flag

[Cherry]

What I did

Since Vue 3.4+, there's a new compile time flag, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ . This enables/disables detailed warnings for hydration mismatches in production builds.

Previously, without this, Storybook Vue3 components using the preset would log the following verbose message:

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

To match the other behaviour in this file (like __VUE_PROD_DEVTOOLS__), I've set this to true so that this warning in the console can be silenced.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

After these changes, vue3 warnings for this issue are silenced.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5151415. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[shilman]

@Cherry Thanks so much for this. This PR is currently webpack-only. Is there anything we need to do on the Vite side?

[Cherry]

Thanks @shilman. This was the only place I saw any reference to __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ in this repo.

The vite vue plugin seems to handle this by default as of version 5.0.0: https://github.com/vitejs/vite-plugin-vue/blob/30a97c1ddbdfb0e23b7dc14a1d2fb609668b9987/packages/plugin-vue/src/index.ts#L181 and https://github.com/vitejs/vite-plugin-vue/blob/plugin-vue@5.0.3/packages/plugin-vue/CHANGELOG.md#500-2023-12-25.

So the version of @vitejs/plugin-vue may need to be bumped for support - I'm not sure if any of those breaking changes would impact things here?