Consolidate Vue 3 migration build tooling into config/vue3migration

What does this MR do and why?

Moves every Vue 3 migration build module into config/vue3migration/. The tooling was spread over four directories. Which directory a file landed in depended on which bundler first needed it. Nothing tied the files together, so the CI rule that runs their specs had to list paths by hand, and the list was already incomplete.

The issue proposes config/vue3/ as the home. This MR uses config/vue3migration/ instead. That directory already exists and holds the three compilers, so this is a consolidation into an existing home rather than a new one.

New layout

Files drop the vue3_ prefix because the directory carries it. Compilers keep the version in their names, because there the version tells the siblings apart.

config/vue3migration/
  aliases.js             was config/helpers/context_aliases_shared.js
  infection.js           was config/helpers/vue3_infection_shared.js
  migration.js           was config/helpers/vue3_migration_loader.js
  migration_schema.js    was config/helpers/vue3_migration_file_validation.js
  version.js             was config/helpers/vue_version.js
  compilers/
    vue2_template.js     was vue2_compiler.js in this directory
    vue3_template.js     was vue3_template_compiler.js in this directory
    vue3_sfc.mjs         was vue3_sfc_compiler.mjs in this directory
  plugins/
    vite.mjs             was config/helpers/vite_plugin_vue3_infection.mjs
    webpack.js           was config/plugins/webpack_vue3_infection_plugin.js
    rspack_loader.js     was config/rspack/vue3_infection_loader.js
    rspack_resolve.js    was config/rspack/vue3_infection_resolve_plugin.js
    manifest.js          was config/plugins/vue3_migration_manifest_plugin.js

Other changes

  • plugins/rspack_resolve.js is one level deeper, so its repository root gains one '..'. The other two files that derive the root stay at the same depth.
  • The vitest project is renamed, because it now covers more than the scanner:
    • vitest.infection_scanner.config.mjs to vitest.vue3migration.config.mjs, and it includes the moved .mjs spec. Jest does not load .mjs files, so without this the 50 tests in that spec would stop running.
    • package.json script vitest:infection-scanner to vitest:vue3migration
    • CI job test-infection-scanner to test-vue3migration-tooling
  • CI rules in .gitlab/ci/rules.gitlab-ci.yml:
    • .frontend:rules:test-vue3migration-tooling runs on config/vue3migration/**/* and spec/frontend/config/vue3migration/**/* in addition to the scanner paths. New files are covered without editing the list.
    • .frontend-dependency-patterns gains config/vue3migration/**/*. Its existing config/helpers/*.js glob is not recursive, so the moved files would otherwise drop out of it.
  • Path references updated in jest.config.base.js, vite.config.js, the webpack and rspack configs, the infection scanner, scripts/frontend/vue3_migration_stats.mjs, the developer guide, and comments in Ruby files.

This supersedes the hand-listed paths in !252664 (closed).

Out of scope

As agreed in the issue: lib/gitlab/vue3_migration.rb, scripts/frontend/infection_scanner/ and app/assets/javascripts/lib/utils/vue3compat/ stay where they are. The "infection" concept is not renamed.

How to set up and validate locally

The scanner graph is keyed by application paths and contains no config file, so the move must leave it byte-identical. A wrong __dirname root would change CONTEXT_ALIASES and therefore the graph.

git checkout master
node scripts/frontend/infection_scanner/infection_scanner.mjs
cp tmp/infection_scanner.json /tmp/graph_before.json
git checkout 626610-consolidate-vue3-migration-tooling
node scripts/frontend/infection_scanner/infection_scanner.mjs
cmp /tmp/graph_before.json tmp/infection_scanner.json

Then:

yarn vitest:vue3migration
yarn jest spec/frontend/config
yarn vite-prod
ENABLE_RSPACK=true yarn build
bundle exec rspec -r spec_helper spec/dot_gitlab_ci/rules_spec.rb spec/lib/gitlab/vue3_migration_files_spec.rb spec/helpers/webpack_helper_spec.rb spec/helpers/vite_helper_spec.rb

Local results on this branch:

Check Result
Scanner graph, EE and CE byte-identical to master
yarn vitest:vue3migration 4 files, 173 tests pass
yarn jest spec/frontend/config 5 suites, 49 tests pass
yarn vite-prod builds
ENABLE_RSPACK=true yarn build builds
RSpec, four files above, in the primary GDK checkout 2440 examples, 1 failure: rules_spec.rb:274 "does not miss files to match", a quarantined example that lists local dotfiles and untracked directories only; no file from this MR is in its list

On this MR's pipeline, test-vue3migration-tooling must appear, because the MR touches config/vue3migration/**.

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

Loading
Loading