Strip tag:"component" from dynamic components in @vue/compat runtime

Illya Klymovrequested to merge
xanf/vue-compat-strip-tag-component into master

What does this MR do and why?

Vue 2's template compiler adds tag: "component" to render functions for dynamic components (<component :is="...">). This is an internal marker used by Vue 2 to preserve the original tag name. When running Vue 2-compiled code in Vue 3 compat mode, this marker leaks through convertLegacyProps and appears as an HTML attribute (tag="component") on the rendered DOM element.

This MR adds a new @vue/compat patch (012) that filters out tag: "component" in convertLegacyProps, preventing the leakage at the runtime level. This is an alternative approach to patching the Vue 2 compiler — by handling it in the runtime, we ensure any Vue 2-compiled code (including pre-compiled libraries) is covered.

References

How to set up and validate locally

This is a Vue patch MR. We need to ensure except of green pipeline that changed tests files and spec/frontend/lib/utils/vue3compat pass:

  • when invoked with yarn jest - Vue 2 mode
  • when invoked with VUE_VERSION=3 VUE_COMPILER_VERSION=2 yarn jest - hybrid mode
  • when invoked with VUE_VERSION=3 VUE_COMPILER_VERSION=3 yarn jest - Vue 3 mode

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports