@eui/cli 22.0.0-alpha.6 → 22.0.0-alpha.60

package/lib/app-utils/migrate.js

@@ -0,0 +1,610 @@
+'use strict';
+
+const path = require('path');
+const childProcess = require('child_process');
+const execFileSync = childProcess.execFileSync;
+const { MultiSelect } = require('enquirer');
+
+const utils = require('../utils');
+
+/**
+ * Installs graceful cancellation handlers for the interactive enquirer prompts.
+ *
+ * Without these, pressing Ctrl+C mid-prompt makes enquirer call into an already-closed readline
+ * interface and Node throws an uncaught `ERR_USE_AFTER_CLOSE` with a stack trace. This mirrors the
+ * handling in `lib/cli.js` (the `new` command): swallow that specific readline error and treat
+ * SIGINT as a clean "cancelled by user" exit. Idempotent — safe to call more than once.
+ */
+let cancelHandlersInstalled = false;
+const installCancelHandlers = () => {
+  if (cancelHandlersInstalled) {
+    return;
+  }
+  cancelHandlersInstalled = true;
+
+  // enquirer can reach into a closed readline on Ctrl+C; swallow only that specific error.
+  process.on('uncaughtException', (err) => {
+    if (err && err.code === 'ERR_USE_AFTER_CLOSE') {
+      process.exit(130); // 128 + SIGINT(2)
+    }
+    throw err;
+  });
+
+  // Ctrl+C: exit cleanly with the conventional 130 code.
+  process.on('SIGINT', () => {
+    console.log('\n\nOperation cancelled by user');
+    process.exit(130);
+  });
+};
+
+/**
+ * Reads the set of schematic names a package actually exposes, as installed in the target
+ * application's `node_modules` (resolved from `process.cwd()`).
+ *
+ * The available schematics depend on the exact installed version of the package — e.g. Angular 21
+ * has no `service-migration`, Angular 22 does; a given `@eui/core` build may or may not ship
+ * `migrate-ecl`. Introspecting the installed collection lets the command self-adapt instead of
+ * relying on a hardcoded, version-specific list.
+ *
+ * @param {string} pkg - Package name, e.g. `@angular/core` or `@eui/core`.
+ * @returns {Set<string>|null} Set of schematic names, or null if the collection can't be resolved.
+ */
+const loadInstalledSchematics = (pkg) => {
+  try {
+    // Resolve the package.json from the APP's node_modules (not the CLI's own).
+    const pkgJsonPath = require.resolve(`${pkg}/package.json`, { paths: [process.cwd()] });
+    const pkgJson = require(pkgJsonPath);
+    const collectionRel = pkgJson.schematics;
+    if (!collectionRel) {
+      return null; // package exposes no schematics collection
+    }
+    const collectionPath = path.resolve(path.dirname(pkgJsonPath), collectionRel);
+    const collection = require(collectionPath);
+    return new Set(Object.keys(collection.schematics || {}));
+  } catch (e) {
+    utils.logDebugTrace('migrate.js', 'loadInstalledSchematics', e);
+    return null;
+  }
+};
+
+/**
+ * Reads the installed major version of a package from the target application's `node_modules`.
+ *
+ * @param {string} pkg - Package name, e.g. `@angular/core`.
+ * @returns {number|null} The major version number, or null if it can't be resolved/parsed.
+ */
+const getInstalledMajor = (pkg) => {
+  try {
+    const pkgJsonPath = require.resolve(`${pkg}/package.json`, { paths: [process.cwd()] });
+    const version = require(pkgJsonPath).version;
+    const major = parseInt(String(version).split('.')[0], 10);
+    return Number.isNaN(major) ? null : major;
+  } catch (e) {
+    utils.logDebugTrace('migrate.js', 'getInstalledMajor', e);
+    return null;
+  }
+};
+
+// The command's Angular migration group targets this Angular major only.
+const SUPPORTED_ANGULAR_MAJOR = 22;
+
+/**
+ * Returns a copy of GROUPS filtered to the schematics actually present in each group's installed
+ * package collection. A group whose package can't be resolved is kept as-is (best effort — let
+ * `ng` report the real error). A group with an `allSchematic` that isn't installed falls back to
+ * running its individual members. Schematics not found in the installed collection are dropped and
+ * reported, so a version mismatch warns-and-skips instead of hard-failing.
+ *
+ * @returns {{groups: typeof GROUPS, skipped: {group:string, name:string}[]}} Filtered groups and
+ *   the list of schematics that were skipped because they are not installed.
+ */
+const resolveAvailableGroups = () => {
+  const skipped = [];
+  const groups = GROUPS.map((group) => {
+    const available = loadInstalledSchematics(group.package);
+
+    // Can't introspect (package/collection not resolvable): keep the group unchanged.
+    if (available === null) {
+      return { ...group };
+    }
+
+    const schematics = group.schematics.filter((s) => {
+      if (available.has(s.name)) {
+        return true;
+      }
+      skipped.push({ group: group.key, name: s.name });
+      return false;
+    });
+
+    // Drop the aggregate if the installed collection doesn't have it (fall back to members).
+    const allSchematic = group.allSchematic && available.has(group.allSchematic)
+      ? group.allSchematic
+      : null;
+
+    return { ...group, schematics, allSchematic };
+  });
+
+  return { groups, skipped };
+};
+
+/**
+ * Resolves the Angular CLI entry script to run, from the target application's installation.
+ *
+ * Install layouts differ: the package's bin may be `bin/ng` or `bin/ng.js` depending on the
+ * Angular version; `@angular/cli` may be hoisted (monorepo / pnpm); and the convenience shim lives
+ * at `node_modules/.bin/ng`. We resolve, in order:
+ *   1. the real entry from `@angular/cli`'s own `bin.ng` field (via require.resolve from the app) —
+ *      the most reliable, and a plain `.js` we can run with `node` on every OS;
+ *   2. common fixed locations: `@angular/cli/bin/ng.js`, `@angular/cli/bin/ng`;
+ *   3. the `node_modules/.bin/ng` shim as a last resort.
+ *
+ * @returns {string|null} Absolute path to the Angular CLI script, or null if none is found.
+ */
+const resolveNgBin = () => {
+  const cwd = process.cwd();
+
+  // 1) Resolve via the package's own bin field (handles ng vs ng.js, and hoisting).
+  try {
+    const pkgJsonPath = require.resolve('@angular/cli/package.json', { paths: [cwd] });
+    const pkgJson = require(pkgJsonPath);
+    const binRel = typeof pkgJson.bin === 'string' ? pkgJson.bin : (pkgJson.bin && pkgJson.bin.ng);
+    if (binRel) {
+      const binAbs = path.resolve(path.dirname(pkgJsonPath), binRel);
+      if (utils.isFileExists(binAbs)) {
+        return binAbs;
+      }
+    }
+  } catch (e) {
+    utils.logDebugTrace('migrate.js', 'resolveNgBin', e);
+  }
+
+  // 2) & 3) Fall back to well-known locations relative to the app's node_modules.
+  const candidates = [
+    path.resolve(cwd, 'node_modules', '@angular', 'cli', 'bin', 'ng.js'),
+    path.resolve(cwd, 'node_modules', '@angular', 'cli', 'bin', 'ng'),
+    path.resolve(cwd, 'node_modules', '.bin', 'ng'),
+  ];
+  return candidates.find((c) => utils.isFileExists(c)) || null;
+};
+
+/**
+ * `eui-cli migrate` — run migration schematics on a standalone eUI application.
+ *
+ * A standalone eUI application (one that is NOT part of the MyWorkplace / CSDR ecosystem, where
+ * the csdr-engine runs these schematics automatically) is responsible for running its own
+ * migrations. This command executes the migration schematics directly via `ng generate`
+ * (NOT `ng update`, which only runs the version-gated subset tied to a package upgrade), so the
+ * developer can run — or re-run — any migration on demand.
+ *
+ * Migrations are organised into three groups. Each group lists the individual schematics it can
+ * run; when a whole group is selected without drilling into it, its `allSchematic` (an aggregate
+ * that runs every member in sequence) is executed when one exists, otherwise all members are run.
+ *
+ *  - angular : the official Angular v22 migrations (https://v22.angular.dev/reference/migrations),
+ *              invoked as `ng generate @angular/core:<name>`. Only v22 schematics are supported.
+ *  - eui     : the eUI breaking-change / modernisation schematics from `@eui/core`'s collection,
+ *              invoked as `ng generate @eui/core:<name>`. The `migrate-all` aggregate runs them
+ *              all in sequence.
+ *  - ecl     : the eUI-ECL template migration, `ng generate @eui/core:migrate-ecl`.
+ *
+ * Group order is angular → eui → ecl so framework-level migrations run before the eUI/ECL ones
+ * that build on them.
+ */
+const GROUPS = [
+  {
+    key: 'angular',
+    label: 'Angular v22 migrations (v22.angular.dev/reference/migrations)',
+    package: '@angular/core',
+    // Angular v22 migration schematics only (https://v22.angular.dev/reference/migrations), each
+    // present in the v22 @angular/core schematics collection. No single "run all" aggregate exists
+    // for Angular migrations; running the whole group runs each member schematic in order.
+    allSchematic: null,
+    schematics: [
+      { name: 'standalone-migration', description: 'Standalone components' },
+      { name: 'control-flow-migration', description: 'Built-in control flow syntax (@if/@for/@switch)' },
+      { name: 'inject-migration', description: 'Constructor DI to the inject() function' },
+      { name: 'route-lazy-loading-migration', description: 'Convert eager component routes to lazy-loaded' },
+      { name: 'signal-input-migration', description: '@Input() fields to the signal input() API' },
+      { name: 'output-migration', description: '@Output() events to the output() function' },
+      { name: 'signal-queries-migration', description: 'Decorator queries to signal queries' },
+      { name: 'cleanup-unused-imports', description: 'Remove unused imports' },
+      { name: 'self-closing-tags-migration', description: 'Use self-closing tags where possible' },
+      { name: 'common-to-standalone-migration', description: 'CommonModule to individual standalone imports' },
+      { name: 'ngclass-to-class-migration', description: 'NgClass to class bindings' },
+      { name: 'ngstyle-to-style-migration', description: 'NgStyle to style bindings' },
+      { name: 'router-testing-module-migration', description: 'RouterTestingModule to RouterModule in TestBed' },
+      { name: 'service-migration', description: 'Eligible @Injectable classes to @Service' },
+    ],
+  },
+  {
+    key: 'eui',
+    label: 'eUI migrations (@eui/core breaking changes & modernisation)',
+    package: '@eui/core',
+    // `migrate-all` runs every eUI migration schematic in sequence — the default for the group.
+    allSchematic: 'migrate-all',
+    schematics: [
+      { name: 'migrate', description: 'Icons, modules and breaking-change replacements' },
+      { name: 'icon-migrate', description: 'Rename deprecated eUI icon names' },
+      { name: 'migrate-eui-tabs', description: 'eui-tabs label/content projection to header/body' },
+      { name: 'migrate-to-standalone', description: 'Deprecated eUI modules to standalone imports' },
+      { name: 'migrate-eui-alert', description: 'Remove deprecated eui-alert inputs' },
+      { name: 'migrate-eui-progress-circle', description: 'Rename deprecated eui-progress-circle inputs' },
+      { name: 'migrate-eui-popover', description: 'Remove deprecated eui-popover type input' },
+      { name: 'migrate-eui-icon-toggle', description: 'Rename eui-icon-toggle iconSet to iconSvgName' },
+      { name: 'migrate-eui-icon-svg', description: 'Rename removed eui-icon-svg inputs' },
+      { name: 'migrate-eui-fieldset', description: 'Rename eui-fieldset iconSvgType to iconSvgName' },
+      { name: 'migrate-eui-avatar', description: 'Remove deprecated eui-avatar isFlat input' },
+      { name: 'migrate-eui-editor', description: 'Rename eui-editor onEditorChanged to contentChange' },
+      { name: 'migrate-eui-discussion-thread', description: 'Remove trackByFn [trackBy] from eui-discussion-thread' },
+      { name: 'migrate-eui-button', description: 'Rename euiButtonCall to euiCTAButton' },
+      { name: 'migrate-eui-accent', description: 'Replace euiAccent directive with euiPrimary' },
+      { name: 'migrate-eui-toolbar-menu', description: 'eui-toolbar-menu to eui-toolbar-mega-menu' },
+      { name: 'migrate-eui-table', description: 'eui-table breaking changes' },
+      { name: 'migrate-eui-chip-list', description: 'eui-chip-list breaking changes' },
+      { name: 'migrate-eui-chip', description: 'Remove deprecated eui-chip isSquared input' },
+      { name: 'add-eui-imports', description: 'Ensure correct eUI imports for template selectors' },
+      { name: 'fix-no-multiple-empty-lines', description: 'Collapse multiple consecutive empty lines' },
+    ],
+  },
+  {
+    key: 'ecl',
+    label: 'ECL migration (eUI-ECL templates 19.x to 21.x)',
+    package: '@eui/core',
+    // ECL has a single schematic; running the group runs it directly.
+    allSchematic: 'migrate-ecl',
+    schematics: [
+      { name: 'migrate-ecl', description: 'Migrate eUI-ECL templates (selector/output renames + manual-action warnings)' },
+    ],
+  },
+];
+
+// The "active" groups used for the current run. Defaults to the full static GROUPS; `run()`
+// replaces it with the set filtered to what is actually installed in the target app. Keeping it
+// module-level lets the parse/prompt/build helpers resolve against the same filtered data.
+let activeGroups = GROUPS;
+const setActiveGroups = (groups) => { activeGroups = groups; };
+
+const allGroupKeys = () => activeGroups.map((g) => g.key);
+const groupByKey = (key) => activeGroups.find((g) => g.key === key);
+
+/**
+ * Parses a comma/space separated list argument into a lowercased, de-duplicated array.
+ *
+ * @param {string|boolean|undefined} value - Raw CLI value.
+ * @returns {string[]|null} The parsed tokens, or null when the argument was not provided.
+ */
+const parseListArg = (value) => {
+  if (value === undefined || value === true || value === '') {
+    return null;
+  }
+  const tokens = String(value)
+    .split(/[,\s]+/)
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  // de-duplicate, preserve first-seen order
+  return [...new Set(tokens)];
+};
+
+/**
+ * Resolves the groups requested via `--groups` (or legacy `--schematics`). Validates against the
+ * known group keys and exits on an unknown value so a typo never silently skips a migration.
+ *
+ * @param {string|boolean|undefined} groupsArg - Raw `--groups` / `--schematics` value.
+ * @returns {string[]|null} Group keys in canonical order, or null when not provided.
+ */
+const parseGroupsArg = (groupsArg) => {
+  const requested = parseListArg(groupsArg);
+  if (requested === null) {
+    return null;
+  }
+  const unknown = requested.filter((k) => !allGroupKeys().includes(k));
+  if (unknown.length > 0) {
+    utils.logError(`Unknown migration group(s): ${unknown.join(', ')}`);
+    utils.logError(`Available groups: ${allGroupKeys().join(', ')}`);
+    process.exit(1);
+  }
+  return allGroupKeys().filter((k) => requested.includes(k));
+};
+
+/**
+ * Resolves specific schematic names requested via `--only`, validating each against the schematics
+ * of the (already-resolved) selected groups. Exits on an unknown schematic name.
+ *
+ * @param {string|boolean|undefined} onlyArg - Raw `--only` value.
+ * @param {string[]} selectedGroupKeys - Groups the schematics must belong to.
+ * @returns {string[]|null} Requested schematic names (validated), or null when not provided.
+ */
+const parseOnlyArg = (onlyArg, selectedGroupKeys) => {
+  const requested = parseListArg(onlyArg);
+  if (requested === null) {
+    return null;
+  }
+  const available = new Set(
+    selectedGroupKeys
+      .map(groupByKey)
+      .flatMap((g) => g.schematics.map((s) => s.name.toLowerCase())),
+  );
+  const unknown = requested.filter((n) => !available.has(n));
+  if (unknown.length > 0) {
+    utils.logError(`Unknown schematic(s) for the selected group(s): ${unknown.join(', ')}`);
+    utils.logError(`Available schematics: ${[...available].join(', ')}`);
+    process.exit(1);
+  }
+  return requested;
+};
+
+/**
+ * Builds the ordered list of commands to execute from a per-group selection map.
+ *
+ * Resolution rules per group (key present in `selection`):
+ *  - value `null` (whole group): run its `allSchematic` aggregate when one exists (e.g. eUI
+ *    `migrate-all`), else every member schematic in canonical order.
+ *  - value `string[]` (specific selection): run exactly those members, as individual
+ *    `ng generate <package>:<name>` invocations, in canonical order.
+ *
+ * @param {Object.<string, (string[]|null)>} selection - Per-group selection map. Only groups
+ *   present as keys are considered; `null` means whole group, an array means specific names.
+ * @returns {{group:string, package:string, schematic:string, label:string}[]} Ordered tasks.
+ */
+const buildTasks = (selection) => {
+  const tasks = [];
+
+  for (const key of allGroupKeys()) {
+    if (!(key in selection)) {
+      continue;
+    }
+    const group = groupByKey(key);
+    const picked = selection[key]; // null => whole group, array => specific member names
+
+    // Whole group and an aggregate exists (e.g. eUI migrate-all) => run the aggregate.
+    if (picked === null && group.allSchematic) {
+      tasks.push({
+        group: group.key,
+        package: group.package,
+        schematic: group.allSchematic,
+        label: `${group.label} — all (${group.allSchematic})`,
+      });
+      continue;
+    }
+
+    // Whole group with no aggregate (e.g. Angular) => run every member in order.
+    // Specific selection => run exactly the picked members (keep canonical order).
+    const pickedSet = picked === null ? null : new Set(picked.map((n) => n.toLowerCase()));
+    const members = pickedSet
+      ? group.schematics.filter((s) => pickedSet.has(s.name.toLowerCase()))
+      : group.schematics;
+
+    for (const member of members) {
+      tasks.push({
+        group: group.key,
+        package: group.package,
+        schematic: member.name,
+        label: `${group.key}: ${member.name} — ${member.description}`,
+      });
+    }
+  }
+
+  return tasks;
+};
+
+/**
+ * Interactive flow (two stages):
+ *   1. Pick the migration groups (all pre-selected).
+ *   2. For each selected multi-schematic group, a pre-checked checklist of its individual
+ *      schematics — pressing Enter keeps them all, or toggle to run a subset.
+ * Single-schematic groups (e.g. ecl) skip stage 2 since there is nothing to choose.
+ *
+ * @returns {Promise<Object.<string, (string[]|null)>>} Per-group selection map: value is `null`
+ *   when the whole group is kept (so aggregates are used), or an array of chosen schematic names.
+ */
+const promptSelection = async () => {
+  const groupPrompt = new MultiSelect({
+    name: 'groups',
+    message: 'Select the migration groups to run (all selected by default) :',
+    hint: '(space to toggle, enter to confirm)',
+    choices: activeGroups.map((g) => ({ name: g.key, message: g.label, value: g.key })),
+    initial: allGroupKeys(),
+  });
+  const chosenGroups = await groupPrompt.run();
+  const groupKeys = allGroupKeys().filter((k) => chosenGroups.includes(k));
+
+  const selection = {};
+
+  for (const key of groupKeys) {
+    const group = groupByKey(key);
+
+    // Single-schematic group (e.g. ecl): nothing to drill into — keep the whole group.
+    if (group.schematics.length <= 1) {
+      selection[key] = null;
+      continue;
+    }
+
+    // Stage 2: pre-checked checklist of the group's individual schematics.
+    const schematicPrompt = new MultiSelect({
+      name: `schematics-${key}`,
+      message: `Select "${key}" schematics to run (all selected by default) :`,
+      hint: '(space to toggle, enter to confirm)',
+      choices: group.schematics.map((s) => ({ name: s.name, message: `${s.name} — ${s.description}`, value: s.name })),
+      initial: group.schematics.map((s) => s.name),
+    });
+    const chosen = await schematicPrompt.run();
+    const chosenNames = group.schematics.filter((s) => chosen.includes(s.name)).map((s) => s.name);
+
+    // If the user kept every schematic, treat it as "whole group" so an aggregate (if any) is used.
+    if (chosenNames.length === group.schematics.length) {
+      selection[key] = null;
+    } else {
+      selection[key] = chosenNames;
+    }
+  }
+
+  return selection;
+};
+
+/**
+ * Runs the selected migration schematics via `ng generate`.
+ *
+ * @param {Object} args - Arguments object (retrieved via utils.getArgs()).
+ * @param {string} [args.groups] - Comma/space separated groups (angular, eui, ecl). Alias:
+ *   `--schematics`. When omitted (and `--only` is also omitted) the command prompts interactively
+ *   with all groups pre-selected.
+ * @param {string} [args.only] - Comma/space separated specific schematic names to run (across the
+ *   selected groups). Runs non-interactively (skips the schematic checklist prompts).
+ * @param {boolean} [args.dryRun] - Pass `--dry-run` to each `ng generate` (no files written).
+ * @param {boolean} [args.force] - Pass `--force` to each `ng generate` (allow a dirty tree).
+ * @param {string} [args.path] - Restrict schematics to a sub-path (passed as `--path=` when the
+ *   schematic supports it; eUI schematics default to `./src`).
+ * @returns {Promise<void>} Resolves when all selected migrations have run.
+ */
+module.exports.run = async () => {
+  const args = utils.getArgs();
+  // `--schematics` kept as a backward-compatible alias for `--groups`.
+  const groupsArg = args.groups !== undefined ? args.groups : args.schematics;
+  const { only, dryRun, force } = args;
+  const scopePath = args.path;
+
+  utils.logBigTitle('eUI Migrate');
+
+  // Migration runs Angular/eUI schematics (`ng generate`). It requires an Angular workspace in the
+  // current directory; a standalone Vite React eUI app, or any folder without an `angular.json`,
+  // has nothing to migrate this way.
+  if (!utils.isFileExists(path.join(process.cwd(), 'angular.json'))) {
+    utils.logError('The migrate command is only available for Angular-based eUI applications.');
+    utils.logError('No angular.json found in the current directory.');
+    process.exit(1);
+  }
+
+  // The Angular migration group supports Angular  v22 schematics only. Warn (don't hard-fail) when
+  // the installed @angular/core is a different major: the runtime filter below drops any schematic
+  // not present in the installed collection anyway, so eUI/ECL migrations can still proceed.
+  const angularMajor = getInstalledMajor('@angular/core');
+  if (angularMajor !== null && angularMajor !== SUPPORTED_ANGULAR_MAJOR) {
+    utils.logWarning(`The Angular migration group targets Angular v${SUPPORTED_ANGULAR_MAJOR} only; detected v${angularMajor}.`);
+    utils.logWarning('Angular schematics not present in the installed @angular/core will be skipped.');
+  }
+
+  // Filter the known schematics down to what the app's installed package collections expose, so a
+  // schematic missing from the installed @angular/core or @eui/core is skipped (with a warning)
+  // rather than failing the run.
+  const { groups: available, skipped } = resolveAvailableGroups();
+  setActiveGroups(available);
+
+  if (skipped.length > 0) {
+    utils.logWarning(`Skipping ${skipped.length} schematic(s) not available in the installed packages:`);
+    skipped.forEach((s) => utils.logWarning(`  - ${s.group}: ${s.name}`));
+  }
+
+  // A group whose every schematic was filtered out has nothing to run.
+  const runnableGroupKeys = available.filter((g) => g.schematics.length > 0).map((g) => g.key);
+  if (runnableGroupKeys.length === 0) {
+    utils.logWarning('No migration schematics are available in the installed packages, nothing to migrate.');
+    return;
+  }
+
+  // Resolve the selection into a per-group map: { groupKey: null | string[] }
+  // null => whole group (aggregate when available), array => specific schematic names.
+  let groupKeys = parseGroupsArg(groupsArg);
+  const interactive = groupKeys === null && only === undefined;
+  let selection;
+
+  if (interactive) {
+    installCancelHandlers();
+    try {
+      selection = await promptSelection();
+    } catch (e) {
+      // enquirer rejects with '' or an error whose message is 'canceled' when the user aborts
+      // (Esc / Ctrl+C). Treat that as a clean cancellation rather than a crash.
+      if (e === '' || e === undefined || (e && e.message === 'canceled')) {
+        console.log('\n\nOperation cancelled by user');
+        return;
+      }
+      throw e;
+    }
+    groupKeys = Object.keys(selection);
+  } else {
+    // Non-interactive: default to all groups when --groups is absent but --only is present.
+    if (groupKeys === null) {
+      groupKeys = [...allGroupKeys()];
+    }
+    const onlyNames = parseOnlyArg(only, groupKeys);
+    selection = {};
+    for (const key of groupKeys) {
+      if (onlyNames === null) {
+        // Whole group.
+        selection[key] = null;
+      } else {
+        // Keep only the requested names that belong to this group (canonical order).
+        const names = groupByKey(key)
+          .schematics.filter((s) => onlyNames.includes(s.name.toLowerCase()))
+          .map((s) => s.name);
+        selection[key] = names.length ? names : [];
+      }
+    }
+  }
+
+  if (!groupKeys || groupKeys.length === 0) {
+    utils.logWarning('No migration groups selected, nothing to migrate.');
+    return;
+  }
+
+  const tasks = buildTasks(selection);
+
+  if (tasks.length === 0) {
+    utils.logWarning('No schematics resolved from the selection, nothing to migrate.');
+    return;
+  }
+
+  utils.logInfo(`Groups : ${groupKeys.join(', ')}`);
+  utils.logInfo(`Schematics to run (${tasks.length}) :`);
+  tasks.forEach((t) => utils.logInfo(`  - ng generate ${t.package}:${t.schematic}`));
+
+  // Resolve the app's own Angular CLI entry script (handles bin/ng vs bin/ng.js, hoisting and the
+  // node_modules/.bin/ng shim).
+  const ng = resolveNgBin();
+
+  // The schematics run through the app's own Angular CLI. If dependencies were never installed,
+  // no `ng` binary is present — fail early with an actionable message instead of a cryptic ENOENT
+  // from the spawned process.
+  if (!ng) {
+    utils.logError('Angular CLI not found in this project.');
+    utils.logError(`Looked under : ${path.resolve(process.cwd(), 'node_modules')} (@angular/cli and .bin/ng)`);
+    utils.logError('Install the project dependencies first, then re-run the migration:');
+    utils.logError('  npm install');
+    utils.logError('  eui-cli migrate');
+    process.exit(1);
+  }
+
+  const commonFlags = [];
+  if (dryRun) commonFlags.push('--dry-run');
+  if (force) commonFlags.push('--force');
+  if (scopePath) commonFlags.push(`--path=${scopePath}`);
+
+  for (const task of tasks) {
+    utils.logTitle(`Running ${task.package}:${task.schematic}`);
+    utils.logInfo(task.label);
+
+    // Build an argv array and run it WITHOUT a shell (execFileSync), so a project path containing
+    // spaces or other shell-special characters (e.g. ".../ease-portal-ui-new 3/...") is passed
+    // literally and never word-split. `ng` is a Node script, so it is invoked via `node <ng>`.
+    const ngArgs = [ng, 'generate', `${task.package}:${task.schematic}`, ...commonFlags];
+
+    utils.logInfo(`running : ng generate ${task.package}:${task.schematic} ${commonFlags.join(' ')}`.trim());
+
+    try {
+      execFileSync(process.execPath, ngArgs, { cwd: process.cwd(), stdio: 'inherit' });
+      utils.logSuccess();
+    } catch (e) {
+      utils.logError(`Migration failed for ${task.package}:${task.schematic}.`);
+      utils.logErrorTrace('migrate.js', 'run', e);
+      process.exit(1);
+    }
+  }
+
+  utils.logSuccess('All selected migrations completed.');
+};
+
+// Exposed for testing / potential programmatic use.
+module.exports.GROUPS = GROUPS;
+module.exports.parseGroupsArg = parseGroupsArg;
+module.exports.parseOnlyArg = parseOnlyArg;
+module.exports.buildTasks = buildTasks;

package/lib/app-utils/serve.js

@@ -32,6 +32,11 @@ module.exports.run = () => {
 
   let { configuration, baseHref, servePath, host, proxyConfig, maxSpaceSize, port, disableHostCheck, open, debug, configEnvTarget, noLiveReload, project } = utils.getArgs();
 
+  // Vite React app — serve with the Vite dev server instead of the Angular CLI.
+  if (utils.detectAppTool() === 'vite') {
+    return serveVite({ port, host, open });
+  }
+
   const ng = path.resolve(process.cwd(), 'node_modules', '@angular', 'cli', 'bin', 'ng');
 
   let prjName = 'app';
@@ -93,3 +98,30 @@ module.exports.run = () => {
 
       return execSync(`node ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
 }
+
+/**
+ * Serves a standalone Vite React app via the local `vite` binary. Maps the shared serve options
+ * (port / host / open) onto Vite's flags so the `eui-cli serve-app` surface stays the same for
+ * both Angular and React apps.
+ */
+const serveVite = ({ port, host, open }) => {
+  utils.logTitle('Serving Vite React application...');
+
+  const args = ['vite'];
+
+  if (port) {
+    args.push(`--port=${port}`);
+  }
+  if (host) {
+    args.push(`--host=${host}`);
+  }
+  if (open === 'false') {
+    args.push('--no-open');
+  } else {
+    args.push('--open');
+  }
+
+  utils.logInfo(`vite serve with args ${args.join(' ')}`);
+
+  return execSync(`npx ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
+};