feat(cli/migrate): show npm commands for manual steps in `replace-r…

…emix-imports` migration

packages/remix-dev/cli/migrate/migrations/replace-remix-imports/index.ts

@@ -13,6 +13,7 @@ import { isAdapter, isRuntime } from "./transform";
 import type { MigrationFunction } from "../../types";
 import { readConfig } from "../../../../config";
 import { hint } from "../../../../logging";
+import * as colors from "../../../../colors";
 
 const transformPath = join(__dirname, "transform");
 
@@ -25,41 +26,55 @@ function* getTasks({
   runtime: string;
   adapter?: string;
 }): Generator<string> {
+  let commandTask = (message: string, command: string) =>
+    `${message}:\n\t${colors.hint(command)}`;
+  let remixRunPrefix = (dep: string) => "@remix-run/" + dep;
   let remixDeps = findRemixDependencies(packageJson.dependencies);
 
   // runtime not in deps
   if (!remixDeps.includes(runtime)) {
-    yield `Install \`@remix-run/${runtime}\` as a dependency`;
+    yield commandTask(
+      `Install \`@remix-run/${runtime}\` as a dependency`,
+      `npm install @remix-run/${runtime}`
+    );
   }
 
   // other runtimes in deps
   let otherRuntimes = remixDeps
     .filter(isRuntime)
     .filter((dep) => dep !== runtime);
   if (otherRuntimes.length > 0) {
-    yield `Uninstall all unused runtimes: (${otherRuntimes
-      .map((r) => "@remix-run/" + r)
-      .join(",")})`;
+    yield commandTask(
+      "Uninstall all unused runtimes",
+      `npm uninstall ${otherRuntimes.map(remixRunPrefix).join(" ")}`
+    );
   }
 
   // adapter not in deps
   if (adapter && !remixDeps.includes(adapter)) {
-    yield `Install \`@remix-run/${adapter}\` as a dependency`;
+    yield commandTask(
+      `Install \`@remix-run/${adapter}\` as a dependency`,
+      `npm install @remix-run/${adapter}`
+    );
   }
 
   // other adapters in deps
   let otherAdapters = remixDeps
     .filter(isAdapter)
     .filter((dep) => dep !== adapter);
   if (otherAdapters.length > 0) {
-    yield `Uninstall all unused adapters: (${otherRuntimes
-      .map((r) => "@remix-run/" + r)
-      .join(",")})`;
+    yield commandTask(
+      "Uninstall all unused adapters",
+      `npm uninstall ${otherAdapters.map(remixRunPrefix).join(" ")}`
+    );
   }
 
   // remix in deps
   if (Object.keys(packageJson.dependencies || {}).includes("remix")) {
-    yield "Uninstall `remix` as a dependency";
+    yield commandTask(
+      "Uninstall `remix` as a dependency",
+      "npm uninstall remix"
+    );
   }
 
   // `remix setup` in `postinstall`