@shopify/cli-hydrogen 8.0.2 → 8.0.4

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,33 @@
 # skeleton
 
+## 2024.4.4
+
+### Patch Changes
+
+- Add JSdoc to `getSelectedProductOptions` utility and cleanup the skeleton implementation ([#2089](https://github.com/Shopify/hydrogen/pull/2089)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Updated dependencies [[`286589ee`](https://github.com/Shopify/hydrogen/commit/286589ee281c161ad323e3d45a8b9b859aa5b11f), [`6f5061d9`](https://github.com/Shopify/hydrogen/commit/6f5061d9432f749fde7902548894e98c0d3f899c), [`ae262b61`](https://github.com/Shopify/hydrogen/commit/ae262b616127a7173d23a1a38a6e658af3105ce8), [`2c11ca3b`](https://github.com/Shopify/hydrogen/commit/2c11ca3b7a00ccca2b621dbc29abd319f9598cc8), [`b70f9c2c`](https://github.com/Shopify/hydrogen/commit/b70f9c2c3db8e863c65509097454b9ad7c81cd52), [`17528db1`](https://github.com/Shopify/hydrogen/commit/17528db1eb3d1baa001bafe0684b4bce28d2e271), [`58ea9bb0`](https://github.com/Shopify/hydrogen/commit/58ea9bb0f0eee83ff89e34e2f1f6ac3c4999e213)]:
+  - @shopify/cli-hydrogen@8.0.4
+  - @shopify/hydrogen@2024.4.2
+
+## 1.0.10
+
+### Patch Changes
+
+- Update `@shopify/cli` dependency to avoid React version mismatches in your project: ([#2059](https://github.com/Shopify/hydrogen/pull/2059)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+    "dependencies": {
+      ...
+  -   "@shopify/cli": "3.58.0",
+  +   "@shopify/cli": "3.59.2",
+      ...
+    }
+  ```
+
+- Updated dependencies [[`d2bc720b`](https://github.com/Shopify/hydrogen/commit/d2bc720bb5f7cfb5f42617f98ad2dfcd29891f4b)]:
+  - @shopify/cli-hydrogen@8.0.3
+
 ## 1.0.9
 
 ### Patch Changes

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -26,7 +26,7 @@ import type {
 } from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/lib/variants';
 
-export const meta: MetaFunction<typeof loader> = ({data, location}) => {
+export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
 };
 
@@ -34,25 +34,13 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
   const {handle} = params;
   const {storefront} = context;
 
-  const selectedOptions = getSelectedProductOptions(request).filter(
-    (option) =>
-      // Filter out Shopify predictive search query params
-      !option.name.startsWith('_sid') &&
-      !option.name.startsWith('_pos') &&
-      !option.name.startsWith('_psq') &&
-      !option.name.startsWith('_ss') &&
-      !option.name.startsWith('_v') &&
-      // Filter out third party tracking params
-      !option.name.startsWith('fbclid'),
-  );
-
   if (!handle) {
     throw new Error('Expected product handle to be defined');
   }
 
   // await the query for the critical product data
   const {product} = await storefront.query(PRODUCT_QUERY, {
-    variables: {handle, selectedOptions},
+    variables: {handle, selectedOptions: getSelectedProductOptions(request)},
   });
 
   if (!product?.id) {

package/dist/generator-templates/starter/customer-accountapi.generated.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable eslint-comments/no-unlimited-disable */
 /* eslint-disable */
-import * as CustomerAccountAPI from '@shopify/hydrogen/customer-account-api-types';
+import type * as CustomerAccountAPI from '@shopify/hydrogen/customer-account-api-types';
 
 export type CustomerAddressUpdateMutationVariables = CustomerAccountAPI.Exact<{
   address: CustomerAccountAPI.CustomerAddressInput;

package/dist/generator-templates/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.9",
+  "version": "2024.4.4",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -16,22 +16,22 @@
   "dependencies": {
     "@remix-run/react": "^2.8.0",
     "@remix-run/server-runtime": "^2.8.0",
-    "@shopify/cli": "3.58.0",
-    "@shopify/cli-hydrogen": "^8.0.2",
-    "@shopify/hydrogen": "2024.4.1",
+    "@shopify/cli": "3.59.2",
+    "@shopify/cli-hydrogen": "^8.0.4",
+    "@shopify/hydrogen": "2024.4.2",
     "@shopify/remix-oxygen": "^2.0.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.8.0",
     "@remix-run/eslint-config": "^2.8.0",
-    "@shopify/hydrogen-codegen": "^0.3.0",
-    "@shopify/mini-oxygen": "^3.0.1",
+    "@shopify/hydrogen-codegen": "^0.3.1",
+    "@shopify/mini-oxygen": "^3.0.2",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/generator-templates/starter/storefrontapi.generated.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable eslint-comments/no-unlimited-disable */
 /* eslint-disable */
-import * as StorefrontAPI from '@shopify/hydrogen/storefront-api-types';
+import type * as StorefrontAPI from '@shopify/hydrogen/storefront-api-types';
 
 export type MoneyFragment = Pick<
   StorefrontAPI.MoneyV2,

package/dist/lib/classic-compiler/build.js

@@ -0,0 +1,132 @@
+import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
+import { rmdir, fileSize, glob, readFile, writeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import colors from '@shopify/cli-kit/node/colors';
+import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../remix-config.js';
+import { checkLockfileStatus } from '../check-lockfile.js';
+import { findMissingRoutes } from '../missing-routes.js';
+import { muteRemixLogs, createRemixLogger } from '../log.js';
+import { codegen } from '../codegen.js';
+import { buildBundleAnalysis, getBundleAnalysisSummary } from '../bundle/analyzer.js';
+import { isCI } from '../is-ci.js';
+
+const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
+const WORKER_BUILD_SIZE_LIMIT = 5;
+async function runClassicCompilerBuild({
+  directory,
+  useCodegen = false,
+  codegenConfigPath,
+  sourcemap = false,
+  disableRouteWarning = false,
+  bundleStats = true,
+  lockfileCheck = true,
+  assetPath
+}) {
+  if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "production";
+  }
+  if (assetPath) {
+    process.env.HYDROGEN_ASSET_BASE_URL = assetPath;
+  }
+  const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(directory);
+  if (lockfileCheck) {
+    await checkLockfileStatus(root, isCI());
+  }
+  await muteRemixLogs();
+  console.time(LOG_WORKER_BUILT);
+  outputInfo(`
+\u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
+  const [remixConfig, [{ build }, { logThrown }, { createFileWatchCache }]] = await Promise.all([
+    getRemixConfig(root),
+    Promise.all([
+      import('@remix-run/dev/dist/compiler/build.js'),
+      import('@remix-run/dev/dist/compiler/utils/log.js'),
+      import('@remix-run/dev/dist/compiler/fileWatchCache.js')
+    ]).catch(handleRemixImportFail),
+    rmdir(buildPath, { force: true })
+  ]);
+  assertOxygenChecks(remixConfig);
+  await Promise.all([
+    copyPublicFiles(publicPath, buildPathClient),
+    build({
+      config: remixConfig,
+      options: {
+        mode: process.env.NODE_ENV,
+        sourcemap
+      },
+      logger: createRemixLogger(),
+      fileWatchCache: createFileWatchCache()
+    }).catch((thrown) => {
+      logThrown(thrown);
+      if (process.env.SHOPIFY_UNIT_TEST) {
+        throw thrown;
+      } else {
+        process.exit(1);
+      }
+    }),
+    useCodegen && codegen({ ...remixConfig, configFilePath: codegenConfigPath })
+  ]);
+  if (process.env.NODE_ENV !== "development") {
+    console.timeEnd(LOG_WORKER_BUILT);
+    const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
+    const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
+    const formattedSize = colors.yellow(sizeMB.toFixed(2) + " MB");
+    outputInfo(
+      outputContent`   ${colors.dim(
+        relativePath(root, buildPathWorkerFile)
+      )}  ${bundleAnalysisPath ? outputToken.link(formattedSize, bundleAnalysisPath) : formattedSize}\n`
+    );
+    if (bundleStats && bundleAnalysisPath) {
+      outputInfo(
+        outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
+          "Complete analysis: " + bundleAnalysisPath,
+          bundleAnalysisPath
+        )}\n\n`
+      );
+    }
+    if (sizeMB >= WORKER_BUILD_SIZE_LIMIT) {
+      outputWarn(
+        `\u{1F6A8} Smaller worker bundles are faster to deploy and run.${remixConfig.serverMinify ? "" : "\n   Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+   Learn more about optimizing your worker bundle file: https://h2o.fyi/debugging/bundle-size
+`
+      );
+    }
+  }
+  if (!disableRouteWarning) {
+    const missingRoutes = findMissingRoutes(remixConfig);
+    if (missingRoutes.length) {
+      const packageManager = await getPackageManager(root);
+      const exec = packageManager === "npm" ? "npx" : packageManager;
+      outputWarn(
+        `Heads up: Shopify stores have a number of standard routes that aren\u2019t set up yet.
+Some functionality and backlinks might not work as expected until these are created or redirects are set up.
+This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ? "s" : ""}. For more details, run \`${exec} shopify hydrogen check routes\`.
+`
+      );
+    }
+  }
+  if (process.env.NODE_ENV !== "development") {
+    await cleanClientSourcemaps(buildPathClient);
+  }
+}
+async function cleanClientSourcemaps(buildPathClient) {
+  const bundleFiles = await glob(joinPath(buildPathClient, "**/*.js"));
+  await Promise.all(
+    bundleFiles.map(async (filePath) => {
+      const file = await readFile(filePath);
+      return await writeFile(
+        filePath,
+        file.replace(/\/\/# sourceMappingURL=.+\.js\.map$/gm, "")
+      );
+    })
+  );
+}
+async function copyPublicFiles(publicPath, buildPathClient) {
+  if (!await fileExists(publicPath)) {
+    return;
+  }
+  return copyFile(publicPath, buildPathClient);
+}
+
+export { copyPublicFiles, runClassicCompilerBuild };

package/dist/lib/classic-compiler/dev.js

@@ -0,0 +1,262 @@
+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 { relativePath, resolvePath } from '@shopify/cli-kit/node/path';
+import { copyPublicFiles } from './build.js';
+import { getProjectPaths, assertOxygenChecks, handleRemixImportFail, getRemixConfig } from '../remix-config.js';
+import { setH2OVerbose, isH2Verbose, muteDevLogs, createRemixLogger, enhanceH2Logs } from '../log.js';
+import { DEFAULT_APP_PORT } from '../flags.js';
+import { buildAssetsUrl, startMiniOxygen } from '../mini-oxygen/index.js';
+import { addVirtualRoutes } from '../virtual-routes.js';
+import { spawnCodegenProcess } from '../codegen.js';
+import { getAllEnvironmentVariables } from '../environment-variables.js';
+import { setupLiveReload } from '../live-reload.js';
+import { checkRemixVersions } from '../remix-version-check.js';
+import { displayDevUpgradeNotice } from '../../commands/hydrogen/upgrade.js';
+import { findPort } from '../find-port.js';
+import { getDevConfigInBackground, startTunnelAndPushConfig, isMockShop, notifyIssueWithTunnelAndMockShop } from '../dev-shared.js';
+import { getCliCommand } from '../shell.js';
+
+const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
+const LOG_REBUILT = "\u{1F680} Rebuilt";
+async function runClassicCompilerDev({
+  port: appPort,
+  path: appPath,
+  codegen: useCodegen = false,
+  legacyRuntime = false,
+  codegenConfigPath,
+  disableVirtualRoutes,
+  env: envHandle,
+  envBranch,
+  debug = false,
+  sourcemap = true,
+  disableVersionCheck = false,
+  inspectorPort,
+  customerAccountPush: customerAccountPushFlag = false,
+  shouldLiveReload = true,
+  cliConfig,
+  verbose
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "development";
+  if (verbose)
+    setH2OVerbose();
+  if (!isH2Verbose())
+    muteDevLogs();
+  const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
+  const copyFilesPromise = copyPublicFiles(publicPath, buildPathClient);
+  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,
+      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);
+    }
+  }
+  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
+          });
+          logInjectedVariables();
+          await miniOxygen.reload({
+            env: allVariables
+          });
+        }
+        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));
+        }
+      }
+    }
+  );
+  return {
+    getUrl: () => miniOxygen.listeningAt,
+    async close() {
+      codegenProcess?.removeAllListeners("close");
+      codegenProcess?.kill("SIGINT");
+      await Promise.allSettled([
+        closeWatcher(),
+        miniOxygen?.close(),
+        Promise.resolve(tunnelPromise).then((tunnel) => tunnel?.cleanup?.())
+      ]);
+    }
+  };
+}
+
+export { runClassicCompilerDev };

package/dist/lib/flags.js

@@ -23,7 +23,7 @@ const commonFlags = {
   legacyRuntime: {
     "legacy-runtime": Flags.boolean({
       description: "Runs the app in a Node.js sandbox instead of an Oxygen worker.",
-      env: "SHOPIFY_HYDROGEN_FLAG_WORKER"
+      env: "SHOPIFY_HYDROGEN_FLAG_LEGACY_RUNTIME"
     })
   },
   force: {

package/dist/lib/onboarding/index.js

@@ -1,2 +1,16 @@
-export { setupLocalStarterTemplate } from './local.js';
-export { setupRemoteTemplate } from './remote.js';
+import { AbortController } from '@shopify/cli-kit/node/abort';
+import { setupLocalStarterTemplate } from './local.js';
+import { setupRemoteTemplate } from './remote.js';
+
+async function setupTemplate(options) {
+  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;
+  }
+}
+
+export { setupTemplate };

package/dist/lib/onboarding/setup-template.mocks.js

@@ -0,0 +1,72 @@
+import { fileURLToPath } from 'node:url';
+import { vi } from 'vitest';
+import { remove, createSymlink } from 'fs-extra/esm';
+import { writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { getRepoNodeModules } from '../build.js';
+
+const { renderTasksHook } = vi.hoisted(() => ({ renderTasksHook: vi.fn() }));
+vi.mock("../template-downloader.js", async () => ({
+  downloadMonorepoTemplates: () => Promise.resolve({
+    version: "",
+    templatesDir: fileURLToPath(
+      new URL("../../../../../templates", import.meta.url)
+    ),
+    examplesDir: fileURLToPath(
+      new URL("../../../../../examples", import.meta.url)
+    )
+  }),
+  downloadExternalRepo: () => Promise.resolve({
+    templateDir: fileURLToPath(
+      new URL("../../../../../templates/skeleton", import.meta.url)
+    )
+  })
+}));
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn(),
+    renderSelectPrompt: vi.fn(),
+    renderTextPrompt: vi.fn(),
+    renderTasks: vi.fn(async (args) => {
+      await original.renderTasks(args);
+      renderTasksHook();
+    })
+  };
+});
+vi.mock(
+  "@shopify/cli-kit/node/node-package-manager",
+  async (importOriginal) => {
+    const original = await importOriginal();
+    return {
+      ...original,
+      getPackageManager: () => Promise.resolve("npm"),
+      packageManagerFromUserAgent: () => "npm",
+      installNodeModules: vi.fn(async ({ directory }) => {
+        renderTasksHook.mockImplementationOnce(async () => {
+          await writeFile(`${directory}/package-lock.json`, "{}");
+        });
+        await remove(joinPath(directory, "node_modules")).catch(() => {
+        });
+        await createSymlink(
+          await getRepoNodeModules(),
+          joinPath(directory, "node_modules")
+        );
+      })
+    };
+  }
+);
+vi.mock("./common.js", async (importOriginal) => {
+  const original = await importOriginal();
+  return Object.keys(original).reduce((acc, item) => {
+    const key = item;
+    const value = original[key];
+    if (typeof value === "function") {
+      acc[key] = vi.fn(value);
+    } else {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+});

package/dist/lib/template-diff.js

@@ -66,9 +66,10 @@ ${colors.dim(
   return targetDirectory;
 }
 async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = getStarterDir()) {
-  const diffPkgJson = await readAndParsePackageJson(
-    joinPath(diffDirectory, "package.json")
-  );
+  const [diffPkgJson, templatePkgJson] = await Promise.all([
+    readAndParsePackageJson(joinPath(diffDirectory, "package.json")),
+    readAndParsePackageJson(joinPath(templateDir, "package.json"))
+  ]);
   const diffOptions = diffPkgJson["h2:diff"] ?? {};
   const createFilter = (re, skipFiles) => (filepath) => {
     const filename = relativePath(templateDir, filepath);
@@ -88,6 +89,9 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = g
   await mergePackageJson(diffDirectory, targetDirectory, {
     ignoredKeys: ["h2:diff"],
     onResult: (pkgJson) => {
+      if (pkgJson.dependencies && templatePkgJson.dependencies) {
+        pkgJson.dependencies["@shopify/cli-hydrogen"] = templatePkgJson.dependencies["@shopify/cli-hydrogen"] ?? "*";
+      }
       for (const key of ["build", "dev"]) {
         const scriptLine = pkgJson.scripts?.[key];
         if (pkgJson.scripts?.[key] && typeof scriptLine === "string") {