@shopify/cli-hydrogen 8.0.2 → 8.0.4

package/dist/commands/hydrogen/dev.js

@@ -1,29 +1,24 @@
-import fs from 'node:fs/promises';
-import { outputInfo, outputDebug } from '@shopify/cli-kit/node/output';
-import { fileExists } from '@shopify/cli-kit/node/fs';
-import { renderFatalError } from '@shopify/cli-kit/node/ui';
-import { resolvePath, relativePath } from '@shopify/cli-kit/node/path';
-import { copyPublicFiles } from './build.js';
-import { getProjectPaths, assertOxygenChecks, handleRemixImportFail, getRemixConfig } from '../../lib/remix-config.js';
-import { setH2OVerbose, isH2Verbose, muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_APP_PORT } from '../../lib/flags.js';
+import { fileURLToPath } from 'node:url';
+import { setH2OVerbose, isH2Verbose, muteDevLogs, enhanceH2Logs } from '../../lib/log.js';
+import { commonFlags, overrideFlag, deprecated, flagsToCamelObject, DEFAULT_INSPECTOR_PORT, DEFAULT_APP_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
+import colors from '@shopify/cli-kit/node/colors';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { collectLog } from '@shopify/cli-kit/node/output';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { Flags } from '@oclif/core';
-import { buildAssetsUrl, startMiniOxygen } from '../../lib/mini-oxygen/index.js';
-import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
-import { setupLiveReload } from '../../lib/live-reload.js';
-import { checkRemixVersions } from '../../lib/remix-version-check.js';
 import { displayDevUpgradeNotice } from './upgrade.js';
-import { findPort } from '../../lib/find-port.js';
 import { prepareDiffDirectory, copyShopifyConfig } from '../../lib/template-diff.js';
-import { getDevConfigInBackground, startTunnelAndPushConfig, isMockShop, notifyIssueWithTunnelAndMockShop } from '../../lib/dev-shared.js';
+import { getDevConfigInBackground, TUNNEL_DOMAIN, startTunnelAndPushConfig, getUtilityBannerlines, getDebugBannerLine, isMockShop, notifyIssueWithTunnelAndMockShop } from '../../lib/dev-shared.js';
 import { getCliCommand } from '../../lib/shell.js';
-import { hasViteConfig } from '../../lib/vite-config.js';
+import { findPort } from '../../lib/find-port.js';
+import { logRequestLine } from '../../lib/mini-oxygen/common.js';
+import { hasViteConfig, findHydrogenPlugin, findOxygenPlugin } from '../../lib/vite-config.js';
+import { runClassicCompilerDev } from '../../lib/classic-compiler/dev.js';
 
-const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
-const LOG_REBUILT = "\u{1F680} Rebuilt";
 class Dev extends Command {
   static descriptionWithMarkdown = `Runs a Hydrogen storefront in a local runtime that emulates an Oxygen worker for development.
 
@@ -31,11 +26,11 @@ class Dev extends Command {
   static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
   static flags = {
     ...commonFlags.path,
-    ...commonFlags.port,
-    worker: deprecated("--worker", { isBoolean: true }),
-    ...commonFlags.legacyRuntime,
+    ...commonFlags.entry,
+    ...overrideFlag(commonFlags.port, {
+      port: { default: void 0, required: false }
+    }),
     ...commonFlags.codegen,
-    ...commonFlags.sourcemap,
     "disable-virtual-routes": Flags.boolean({
       description: "Disable rendering fallback routes when a route file doesn't exist.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
@@ -52,7 +47,24 @@ class Dev extends Command {
     }),
     ...commonFlags.diff,
     ...commonFlags.customerAccountPush,
-    ...commonFlags.verbose
+    ...commonFlags.verbose,
+    host: Flags.boolean({
+      description: "Expose the server to the local network",
+      default: false,
+      required: false
+    }),
+    // For the classic compiler:
+    worker: deprecated("--worker", { isBoolean: true }),
+    ...overrideFlag(commonFlags.legacyRuntime, {
+      "legacy-runtime": {
+        description: "[Classic Remix Compiler] " + commonFlags.legacyRuntime["legacy-runtime"].description
+      }
+    }),
+    ...overrideFlag(commonFlags.sourcemap, {
+      sourcemap: {
+        description: "[Classic Remix Compiler] " + commonFlags.sourcemap.sourcemap.description
+      }
+    })
   };
   async run() {
     const { flags } = await this.parse(Dev);
@@ -67,9 +79,7 @@ class Dev extends Command {
       path: directory,
       cliConfig: this.config
     };
-    const { close } = await hasViteConfig(directory ?? process.cwd()) ? await import('./dev-vite.js').then(
-      ({ runViteDev }) => runViteDev(devParams)
-    ) : await runDev(devParams);
+    const { close } = await hasViteConfig(directory) ? await runDev(devParams) : await runClassicCompilerDev(devParams);
     let closingPromise;
     const processExit = process.exit;
     process.exit = async (code) => {
@@ -83,20 +93,20 @@ class Dev extends Command {
   }
 }
 async function runDev({
+  entry: ssrEntry,
   port: appPort,
   path: appPath,
+  host,
   codegen: useCodegen = false,
-  legacyRuntime = false,
   codegenConfigPath,
   disableVirtualRoutes,
-  env: envHandle,
   envBranch,
+  env: envHandle,
   debug = false,
-  sourcemap = true,
   disableVersionCheck = false,
   inspectorPort,
+  isLocalDev = false,
   customerAccountPush: customerAccountPushFlag = false,
-  shouldLiveReload = true,
   cliConfig,
   verbose
 }) {
@@ -106,217 +116,138 @@ async function runDev({
     setH2OVerbose();
   if (!isH2Verbose())
     muteDevLogs();
-  const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
-  const copyFilesPromise = copyPublicFiles(publicPath, buildPathClient);
+  const root = appPath ?? process.cwd();
   const cliCommandPromise = getCliCommand(root);
-  const reloadConfig = async () => {
-    const config = await getRemixConfig(root);
-    return disableVirtualRoutes ? config : addVirtualRoutes(config).catch((error) => {
-      outputDebug(
-        "Could not add virtual routes: " + (error?.stack ?? error?.message ?? error)
-      );
-      return config;
-    });
-  };
-  const getFilePaths = (file) => {
-    const fileRelative = relativePath(root, file);
-    return [fileRelative, resolvePath(root, fileRelative)];
-  };
-  const serverBundleExists = () => fileExists(buildPathWorkerFile);
-  if (!appPort) {
-    appPort = await findPort(DEFAULT_APP_PORT);
-  }
-  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
-  if (assetsPort) {
-    process.env.HYDROGEN_ASSET_BASE_URL = await buildAssetsUrl(assetsPort);
-  }
   const backgroundPromise = getDevConfigInBackground(
     root,
     customerAccountPushFlag
   );
-  const tunnelPromise = cliConfig && backgroundPromise.then(({ customerAccountPush, storefrontId }) => {
-    if (customerAccountPush) {
-      return startTunnelAndPushConfig(
-        root,
-        cliConfig,
-        appPort,
-        storefrontId
-      );
-    }
-  });
-  const remixConfig = await reloadConfig();
-  assertOxygenChecks(remixConfig);
   const envPromise = backgroundPromise.then(
     ({ fetchRemote, localVariables }) => getAllEnvironmentVariables({
       root,
-      fetchRemote,
       envBranch,
       envHandle,
+      fetchRemote,
       localVariables
     })
   );
-  const [{ watch }, { createFileWatchCache }] = await Promise.all([
-    import('@remix-run/dev/dist/compiler/watch.js'),
-    import('@remix-run/dev/dist/compiler/fileWatchCache.js')
-  ]).catch(handleRemixImportFail);
-  let isInitialBuild = true;
-  let initialBuildDurationMs = 0;
-  let initialBuildStartTimeMs = Date.now();
-  const liveReload = shouldLiveReload ? await setupLiveReload(remixConfig.dev?.port ?? 8002) : void 0;
-  let miniOxygen;
-  let codegenProcess;
-  async function safeStartMiniOxygen() {
-    if (miniOxygen)
-      return;
-    const { allVariables, logInjectedVariables } = await envPromise;
-    miniOxygen = await startMiniOxygen(
-      {
-        root,
-        debug,
-        appPort,
-        assetsPort,
-        inspectorPort,
-        watch: !liveReload,
-        buildPathWorkerFile,
-        buildPathClient,
-        env: allVariables
-      },
-      legacyRuntime
-    );
-    logInjectedVariables();
-    const host = (await tunnelPromise)?.host ?? miniOxygen.listeningAt;
-    const cliCommand = await cliCommandPromise;
-    enhanceH2Logs({ host, cliCommand, ...remixConfig });
-    const { storefrontTitle } = await backgroundPromise;
-    miniOxygen.showBanner({
-      appName: storefrontTitle,
-      headlinePrefix: initialBuildDurationMs > 0 ? `Initial build: ${initialBuildDurationMs}ms
-` : "",
-      host
-    });
-    if (useCodegen) {
-      codegenProcess = spawnCodegenProcess({
-        ...remixConfig,
-        configFilePath: codegenConfigPath
-      });
-    }
-    checkRemixVersions();
-    if (!disableVersionCheck) {
-      displayDevUpgradeNotice({ targetPath: appPath });
-    }
-    if (customerAccountPushFlag && isMockShop(allVariables)) {
-      notifyIssueWithTunnelAndMockShop(cliCommand);
-    }
+  if (debug && !inspectorPort) {
+    inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
   }
-  const fileWatchCache = createFileWatchCache();
-  let skipRebuildLogs = false;
-  const closeWatcher = await watch(
-    {
-      config: remixConfig,
-      options: {
-        mode: process.env.NODE_ENV,
-        sourcemap
-      },
-      fileWatchCache,
-      logger: createRemixLogger()
-    },
-    {
-      reloadConfig,
-      onBuildStart(ctx) {
-        if (!isInitialBuild && !skipRebuildLogs) {
-          outputInfo(LOG_REBUILDING);
-          console.time(LOG_REBUILT);
-        }
-        liveReload?.onBuildStart(ctx);
-      },
-      onBuildManifest: liveReload?.onBuildManifest,
-      async onBuildFinish(context, duration, succeeded) {
-        if (isInitialBuild) {
-          await copyFilesPromise;
-          initialBuildDurationMs = Date.now() - initialBuildStartTimeMs;
-          isInitialBuild = false;
-        } else if (!skipRebuildLogs) {
-          skipRebuildLogs = false;
-          console.timeEnd(LOG_REBUILT);
-          if (!miniOxygen)
-            console.log("");
-        }
-        if (!miniOxygen && !await serverBundleExists()) {
-          return renderFatalError({
-            name: "BuildError",
-            type: 0,
-            message: "MiniOxygen cannot start because the server bundle has not been generated.",
-            skipOclifErrorHandling: true,
-            tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
-          });
-        }
-        if (succeeded) {
-          if (!miniOxygen) {
-            await safeStartMiniOxygen();
-          } else if (liveReload) {
-            await miniOxygen.reload();
-          }
-          liveReload?.onAppReady(context);
-        }
-      },
-      async onFileCreated(file) {
-        const [relative, absolute] = getFilePaths(file);
-        outputInfo(`
-\u{1F4C4} File created: ${relative}`);
-        if (absolute.startsWith(publicPath)) {
-          await copyPublicFiles(
-            absolute,
-            absolute.replace(publicPath, buildPathClient)
-          );
-        }
-      },
-      async onFileChanged(file) {
-        fileWatchCache.invalidateFile(file);
-        const [relative, absolute] = getFilePaths(file);
-        outputInfo(`
-\u{1F4C4} File changed: ${relative}`);
-        if (relative.endsWith(".env")) {
-          skipRebuildLogs = true;
-          const { fetchRemote } = await backgroundPromise;
-          const { allVariables, logInjectedVariables } = await getAllEnvironmentVariables({
-            root,
-            fetchRemote,
-            envBranch,
-            envHandle
+  const vite = await import('vite');
+  const fs = isLocalDev ? { allow: [root, fileURLToPath(new URL("../../../../", import.meta.url))] } : void 0;
+  const customLogger = vite.createLogger();
+  if (process.env.SHOPIFY_UNIT_TEST) {
+    customLogger.info = (msg) => collectLog("info", msg);
+    customLogger.warn = (msg) => collectLog("warn", msg);
+    customLogger.error = (msg) => collectLog("error", msg);
+  }
+  const viteServer = await vite.createServer({
+    root,
+    customLogger,
+    clearScreen: false,
+    server: { fs, host: host ? true : void 0 },
+    plugins: [
+      {
+        name: "hydrogen:cli",
+        configResolved(config) {
+          findHydrogenPlugin(config)?.api?.registerPluginOptions({
+            disableVirtualRoutes
           });
-          logInjectedVariables();
-          await miniOxygen.reload({
-            env: allVariables
+          findOxygenPlugin(config)?.api?.registerPluginOptions({
+            debug,
+            entry: ssrEntry,
+            envPromise: envPromise.then(({ allVariables: allVariables2 }) => allVariables2),
+            inspectorPort,
+            logRequestLine
           });
-        }
-        if (absolute.startsWith(publicPath)) {
-          await copyPublicFiles(
-            absolute,
-            absolute.replace(publicPath, buildPathClient)
-          );
-        }
-      },
-      async onFileDeleted(file) {
-        fileWatchCache.invalidateFile(file);
-        const [relative, absolute] = getFilePaths(file);
-        outputInfo(`
-\u{1F4C4} File deleted: ${relative}`);
-        if (absolute.startsWith(publicPath)) {
-          await fs.unlink(absolute.replace(publicPath, buildPathClient));
+        },
+        configureServer: (viteDevServer) => {
+          if (customerAccountPushFlag) {
+            viteDevServer.middlewares.use((req, res, next) => {
+              const host2 = req.headers.host;
+              if (host2?.includes(TUNNEL_DOMAIN.ORIGINAL)) {
+                req.headers.host = host2.replace(
+                  TUNNEL_DOMAIN.ORIGINAL,
+                  TUNNEL_DOMAIN.REBRANDED
+                );
+              }
+              next();
+            });
+          }
         }
       }
-    }
+    ]
+  });
+  const h2Plugin = findHydrogenPlugin(viteServer.config);
+  if (!h2Plugin) {
+    await viteServer.close();
+    throw new AbortError(
+      "Hydrogen plugin not found.",
+      "Add `hydrogen()` plugin to your Vite config."
+    );
+  }
+  const h2PluginOptions = h2Plugin.api?.getPluginOptions?.();
+  const codegenProcess = useCodegen ? spawnCodegenProcess({
+    rootDirectory: root,
+    configFilePath: codegenConfigPath,
+    appDirectory: h2PluginOptions?.remixConfig?.appDirectory
+  }) : void 0;
+  process.on("unhandledRejection", (err) => {
+    console.log("Unhandled Rejection: ", err);
+  });
+  const publicPort = appPort ?? viteServer.config.server.port ?? DEFAULT_APP_PORT;
+  const [tunnel, cliCommand] = await Promise.all([
+    backgroundPromise.then(
+      ({ customerAccountPush, storefrontId }) => customerAccountPush ? startTunnelAndPushConfig(root, cliConfig, publicPort, storefrontId) : void 0
+    ),
+    cliCommandPromise,
+    viteServer.listen(publicPort)
+  ]);
+  const publicUrl = new URL(
+    viteServer.resolvedUrls.local[0] ?? viteServer.resolvedUrls.network[0]
   );
+  const finalHost = tunnel?.host || publicUrl.toString() || publicUrl.origin;
+  enhanceH2Logs({
+    rootDirectory: root,
+    host: finalHost,
+    cliCommand
+  });
+  const { logInjectedVariables, allVariables } = await envPromise;
+  logInjectedVariables();
+  console.log("");
+  viteServer.printUrls();
+  viteServer.bindCLIShortcuts({ print: true });
+  console.log("\n");
+  const customSections = [];
+  if (!h2PluginOptions?.disableVirtualRoutes) {
+    customSections.push({ body: getUtilityBannerlines(finalHost) });
+  }
+  if (debug && inspectorPort) {
+    customSections.push({
+      body: { warn: getDebugBannerLine(inspectorPort) }
+    });
+  }
+  const { storefrontTitle } = await backgroundPromise;
+  renderSuccess({
+    body: [
+      `View ${storefrontTitle ? colors.cyan(storefrontTitle) : "Hydrogen"} app:`,
+      { link: { url: finalHost } }
+    ],
+    customSections
+  });
+  if (!disableVersionCheck) {
+    displayDevUpgradeNotice({ targetPath: root });
+  }
+  if (customerAccountPushFlag && isMockShop(allVariables)) {
+    notifyIssueWithTunnelAndMockShop(cliCommand);
+  }
   return {
-    getUrl: () => miniOxygen.listeningAt,
+    getUrl: () => finalHost,
     async close() {
       codegenProcess?.removeAllListeners("close");
       codegenProcess?.kill("SIGINT");
-      await Promise.allSettled([
-        closeWatcher(),
-        miniOxygen?.close(),
-        Promise.resolve(tunnelPromise).then((tunnel) => tunnel?.cleanup?.())
-      ]);
+      await Promise.allSettled([viteServer.close(), tunnel?.cleanup?.()]);
     }
   };
 }

package/dist/commands/hydrogen/init.js

@@ -3,12 +3,11 @@ import { fileURLToPath } from 'node:url';
 import { packageManagerFromUserAgent } from '@shopify/cli-kit/node/node-package-manager';
 import { Flags } from '@oclif/core';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { AbortController } from '@shopify/cli-kit/node/abort';
 import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { I18N_CHOICES } from '../../lib/setups/i18n/index.js';
 import { supressNodeExperimentalWarnings } from '../../lib/process.js';
-import { setupRemoteTemplate, setupLocalStarterTemplate } from '../../lib/onboarding/index.js';
+import { setupTemplate } from '../../lib/onboarding/index.js';
 import { LANGUAGES } from '../../lib/onboarding/common.js';
 
 const FLAG_MAP = { f: "force" };
@@ -103,14 +102,7 @@ async function runInit({
       packageManager === "unknown" ? "" : `Please use the latest version with \`${packageManager} create @shopify/hydrogen@latest\``
     );
   }
-  const controller = new AbortController();
-  try {
-    const template = options.template;
-    return template ? await setupRemoteTemplate({ ...options, template }, controller) : await setupLocalStarterTemplate(options, controller);
-  } catch (error) {
-    controller.abort();
-    throw error;
-  }
+  return setupTemplate(options);
 }
 
 export { Init as default, runInit };

package/dist/commands/hydrogen/upgrade.js

@@ -6,7 +6,7 @@ import cliTruncate from 'cli-truncate';
 import { Flags } from '@oclif/core';
 import { ensureInsideGitDirectory, isClean } from '@shopify/cli-kit/node/git';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderSuccess, renderInfo, renderConfirmationPrompt, renderTasks, renderSelectPrompt } from '@shopify/cli-kit/node/ui';
+import { renderSuccess, renderInfo, renderConfirmationPrompt, renderTasks, renderSelectPrompt, renderWarning } from '@shopify/cli-kit/node/ui';
 import { readFile, isDirectory, mkdir, fileExists, touchFile, removeFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { installNodeModules, getPackageManager, getDependencies } from '@shopify/cli-kit/node/node-package-manager';
 import { AbortError } from '@shopify/cli-kit/node/error';
@@ -174,7 +174,7 @@ async function getChangelog() {
   } catch {
   }
   throw new AbortError(
-    "Failed to fetch changelog",
+    "Failed to fetch Hydrogen changelog",
     "Ensure you have internet connection and try again"
   );
 }
@@ -182,7 +182,10 @@ function hasOutdatedDependencies({
   release,
   currentDependencies
 }) {
-  return Object.entries(release.dependencies).some(([name, version]) => {
+  return Object.entries({
+    ...release.dependencies,
+    ...release.devDependencies
+  }).some(([name, version]) => {
     const currentDependencyVersion = currentDependencies?.[name];
     if (!currentDependencyVersion)
       return false;
@@ -653,71 +656,81 @@ Do you want to overwrite it?`,
 async function displayDevUpgradeNotice({
   targetPath
 }) {
-  const appPath = targetPath ? path.resolve(targetPath) : process.cwd();
-  const { currentVersion } = await getHydrogenVersion({ appPath });
-  const isPrerelease = semver.prerelease(currentVersion);
-  if (isPrerelease || /^[a-z]+$/i.test(currentVersion)) {
-    return;
-  }
-  const changelog = await getChangelog();
-  const { availableUpgrades, uniqueAvailableUpgrades } = getAvailableUpgrades({
-    releases: changelog.releases,
-    currentVersion
-  });
-  if (availableUpgrades.length === 0 || !availableUpgrades[0]?.version) {
-    return;
-  }
-  const pinnedLatestVersion = getAbsoluteVersion(availableUpgrades[0].version);
-  const pinnedCurrentVersion = getAbsoluteVersion(currentVersion);
-  const currentReleaseIndex = changelog.releases.findIndex((release) => {
-    const pinnedReleaseVersion = getAbsoluteVersion(release.version);
-    return pinnedReleaseVersion === pinnedCurrentVersion;
-  });
-  const uniqueNextReleases = changelog.releases.slice(0, currentReleaseIndex).reverse().reduce((acc, release) => {
-    if (acc[release.version])
+  try {
+    const appPath = targetPath ? path.resolve(targetPath) : process.cwd();
+    const { currentVersion } = await getHydrogenVersion({ appPath });
+    const isPrerelease = semver.prerelease(currentVersion);
+    if (isPrerelease || /^[a-z]+$/i.test(currentVersion)) {
+      return;
+    }
+    const changelog = await getChangelog();
+    const { availableUpgrades, uniqueAvailableUpgrades } = getAvailableUpgrades({
+      releases: changelog.releases,
+      currentVersion
+    });
+    if (availableUpgrades.length === 0 || !availableUpgrades[0]?.version) {
+      return;
+    }
+    const pinnedLatestVersion = getAbsoluteVersion(
+      availableUpgrades[0].version
+    );
+    const pinnedCurrentVersion = getAbsoluteVersion(currentVersion);
+    const currentReleaseIndex = changelog.releases.findIndex((release) => {
+      const pinnedReleaseVersion = getAbsoluteVersion(release.version);
+      return pinnedReleaseVersion === pinnedCurrentVersion;
+    });
+    const uniqueNextReleases = changelog.releases.slice(0, currentReleaseIndex).reverse().reduce((acc, release) => {
+      if (acc[release.version])
+        return acc;
+      acc[release.version] = release;
       return acc;
-    acc[release.version] = release;
-    return acc;
-  }, {});
-  const nextReleases = Object.keys(uniqueNextReleases).length ? Object.entries(uniqueNextReleases).map(([version, release]) => {
-    return `${version} - ${release.title}`;
-  }).slice(0, 5) : [];
-  let headline = Object.keys(uniqueAvailableUpgrades).length > 1 ? `There are ${Object.keys(uniqueAvailableUpgrades).length} new @shopify/hydrogen versions available.` : `There's a new @shopify/hydrogen version available.`;
-  const cliCommand = await getCliCommand();
-  renderInfo({
-    headline,
-    body: [`Current: ${currentVersion} | Latest: ${pinnedLatestVersion}`],
-    //@ts-ignore will always be an array
-    customSections: nextReleases.length ? [
-      {
-        title: `The next ${nextReleases.length} version(s) include`,
-        body: [
-          {
-            list: {
-              items: [
-                ...nextReleases,
-                availableUpgrades.length > 5 && `...more`
-              ].flat().filter(Boolean)
+    }, {});
+    const nextReleases = Object.keys(uniqueNextReleases).length ? Object.entries(uniqueNextReleases).map(([version, release]) => {
+      return `${version} - ${release.title}`;
+    }).slice(0, 5) : [];
+    let headline = Object.keys(uniqueAvailableUpgrades).length > 1 ? `There are ${Object.keys(uniqueAvailableUpgrades).length} new @shopify/hydrogen versions available.` : `There's a new @shopify/hydrogen version available.`;
+    const cliCommand = await getCliCommand();
+    renderInfo({
+      headline,
+      body: [`Current: ${currentVersion} | Latest: ${pinnedLatestVersion}`],
+      //@ts-ignore will always be an array
+      customSections: nextReleases.length ? [
+        {
+          title: `The next ${nextReleases.length} version(s) include`,
+          body: [
+            {
+              list: {
+                items: [
+                  ...nextReleases,
+                  availableUpgrades.length > 5 && `...more`
+                ].flat().filter(Boolean)
+              }
             }
-          }
-        ].filter(Boolean)
-      },
-      {
-        title: "Next steps",
-        body: [
-          {
-            list: {
-              items: [
-                `Run \`${cliCommand} upgrade\` or \`${cliCommand} upgrade --version XXXX.X.XX\``,
-                ,
-                `Read release notes at https://hydrogen.shopify.dev/releases`
-              ]
+          ].filter(Boolean)
+        },
+        {
+          title: "Next steps",
+          body: [
+            {
+              list: {
+                items: [
+                  `Run \`${cliCommand} upgrade\` or \`${cliCommand} upgrade --version XXXX.X.XX\``,
+                  ,
+                  `Read release notes at https://hydrogen.shopify.dev/releases`
+                ]
+              }
             }
-          }
-        ]
-      }
-    ] : []
-  });
+          ]
+        }
+      ] : []
+    });
+  } catch (error) {
+    const abortError = error;
+    renderWarning({
+      headline: abortError.message,
+      body: abortError.tryMessage ?? void 0
+    });
+  }
 }
 
-export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCummulativeRelease, getHydrogenVersion, getSelectedRelease, hasOutdatedDependencies, isUpgradeableRelease, runUpgrade, upgradeNodeModules };
+export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCummulativeRelease, getHydrogenVersion, getSelectedRelease, isUpgradeableRelease, runUpgrade, upgradeNodeModules };