Treat gl-emoji as a custom element with the Vue 3 compiler

Miguel Rinconrequested to merge
634491-vue3-compiler-lazy-optional-components into master

What does this MR do and why?

With the Vue 3 template compiler, templates that render <gl-emoji> log Failed to resolve component: gl-emoji. The Jest console watcher fails specs on it. In the Vue 2 removal proof of concept !263207, it failed contribution_music_app_spec.js, assignee_dropdown_spec.js and three work item integration specs.

The Vue 3 compiler decides while it parses whether a tag is an element or a component. Two things made it compile gl-emoji as a component:

  • config/vue3migration/compilers/vue3_template.js applied its own isCustomElement list only when it compiled, not when it parsed. Webpack runs the wrapper in thread-loader, which drops the function from the loader options (see the comment in config/webpack.config.js). So webpack builds with the Vue 3 compiler would also compile gl-emoji as a component.
  • jest.config.base.js passed its own list, which had only fe-island-duo-next. !259425 (merged) removed that list, so Jest now relies on the wrapper alone.

This MR has two commits. You can review them one by one:

  • The first commit changes the infrastructure (items 1 to 3 below).
  • The second commit only changes specs (item 4).

This MR:

  1. Makes the wrapper parse with its list too, both in compile and in the exported parse. A new Vitest spec, spec/frontend/config/vue3migration/compilers/vue3_template_spec.mjs, compiles a template without isCustomElement in the options. It fails on master and passes here. It also checks that an isCustomElement in the options replaces the wrapper's list.
  2. Makes Jest use the wrapper's list.
  3. Sets Vue.config.ignoredElements = ['gl-emoji'] in the shared Jest setup, the same as commons/vue.js does for the app.
  4. Removes the gl-emoji workarounds from 29 specs. Those specs find the gl-emoji element instead. The workarounds were:
    • GlEmoji stubs, as stubs: ['gl-emoji'] or 'gl-emoji': true
    • global Vue.component('GlEmoji', ...) stand-ins
    • per-spec ignoredElements lines

Where the stubs came from

Jest never loads commons/vue.js, so it never set ignoredElements, and Vue 2 warns Unknown custom element: <gl-emoji>. Specs worked around it one by one: some stubbed GlEmoji, starting with emoji_token_spec.js in 2021 and copied since, and others set Vue.config.ignoredElements = ['gl-emoji'] themselves. performance_bar/index_spec.js ignored the Vue 3 warning, with the comment "Setting Vue.config.ignoredElements is not sufficient here for some reason". The reason is the compiler, not the setting. The shared setup and the compiler fix replace all of these.

Screenshots or screen recordings

Not applicable. No build uses the Vue 3 compiler yet, and the app renders gl-emoji the same way.

How to set up and validate locally

  1. Run yarn vitest:vue3migration run spec/frontend/config/vue3migration/compilers/vue3_template_spec.mjs.
  2. Run the changed specs with VUE_VERSION=2, with VUE_VERSION=3, and with VUE_VERSION=3 VUE_COMPILER_VERSION=3. All 30 suites pass in all three, except help_center_spec.js with the Vue 3 compiler (router-link, see the @gitlab/ui fix in References).

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.

References

Edited by Miguel Rincon

Merge request reports