@shopify/cli-hydrogen 11.1.3 → 11.1.5

package/dist/lib/build.js

@@ -1,13 +1,23 @@
 import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
 import { findPathUp } from '@shopify/cli-kit/node/fs';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { joinPath, dirname } from '@shopify/cli-kit/node/path';
 import { execAsync } from './process.js';
 
 const monorepoPackagesPath = new URL("../../..", import.meta.url).pathname;
-const isHydrogenMonorepo = monorepoPackagesPath.endsWith(
-  "/hydrogen/packages/"
-);
+const isHydrogenMonorepo = (() => {
+  try {
+    const skeletonPath = joinPath(
+      dirname(monorepoPackagesPath),
+      "templates",
+      "skeleton"
+    );
+    return existsSync(skeletonPath);
+  } catch {
+    return false;
+  }
+})();
 const hydrogenPackagesPath = isHydrogenMonorepo ? monorepoPackagesPath : void 0;
 const ASSETS_DIR_PREFIX = "assets/hydrogen";
 const ASSETS_STARTER_DIR = "starter";
@@ -55,6 +65,9 @@ function getSkeletonSourceDir() {
   }
   return joinPath(dirname(monorepoPackagesPath), "templates", "skeleton");
 }
+function getSkeletonNodeModules() {
+  return joinPath(getSkeletonSourceDir(), "node_modules");
+}
 async function getRepoNodeModules() {
   const { stdout } = await execAsync("npm root");
   let nodeModulesPath = stdout.trim();
@@ -64,4 +77,4 @@ async function getRepoNodeModules() {
   return nodeModulesPath;
 }
 
-export { ASSETS_DIR_PREFIX, ASSETS_STARTER_DIR, ASSETS_STARTER_DIR_ROUTES, getAssetsDir, getPkgJsonPath, getRepoNodeModules, getSkeletonSourceDir, getStarterDir, getTemplateAppFile, hydrogenPackagesPath, isHydrogenMonorepo };
+export { ASSETS_DIR_PREFIX, ASSETS_STARTER_DIR, ASSETS_STARTER_DIR_ROUTES, getAssetsDir, getPkgJsonPath, getRepoNodeModules, getSkeletonNodeModules, getSkeletonSourceDir, getStarterDir, getTemplateAppFile, hydrogenPackagesPath, isHydrogenMonorepo };

package/dist/lib/flags.js

@@ -125,13 +125,6 @@ const commonFlags = {
       env: "SHOPIFY_HYDROGEN_FLAG_INSPECTOR_PORT"
     })
   },
-  diff: {
-    diff: Flags.boolean({
-      description: "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-      required: false,
-      hidden: true
-    })
-  },
   entry: {
     entry: Flags.string({
       description: "Entry file for the worker. Defaults to `./server`.",
@@ -153,9 +146,8 @@ const commonFlags = {
     })
   },
   customerAccountPush: {
-    "customer-account-push__unstable": Flags.boolean({
-      hidden: true,
-      description: "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's Oauth flow",
+    "customer-account-push": Flags.boolean({
+      description: "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's OAuth flow",
       required: false,
       env: "SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH"
     })

package/dist/lib/import-utils.js

@@ -10,7 +10,10 @@ async function importVite(root) {
     process.env.SHOPIFY_UNIT_TEST ? void 0 : { paths: [root] }
   );
   const vitePackageJson = await findUpAndReadPackageJson(vitePath);
-  let viteNodeIndexFile = vitePackageJson.content.exports?.["."].import;
+  let viteNodeIndexFile = vitePackageJson.content.exports?.["."];
+  if (typeof viteNodeIndexFile !== "string") {
+    viteNodeIndexFile = viteNodeIndexFile?.import;
+  }
   if (typeof viteNodeIndexFile !== "string") {
     viteNodeIndexFile = viteNodeIndexFile.default;
   }

package/dist/lib/live-reload.js

@@ -6,18 +6,18 @@ async function setupLiveReload(devServerPort, root) {
   try {
     const [{ updates: hmrUpdates }, { serve }, { detectLoaderChanges }, { ok, err }] = await Promise.all([
       importLocal(
-        "@remix-run/dev/dist/devServer_unstable/hmr.js",
+        "@react-router/dev/dist/devServer_unstable/hmr.js",
         root
       ),
       importLocal(
-        "@remix-run/dev/dist/devServer_unstable/socket.js",
+        "@react-router/dev/dist/devServer_unstable/socket.js",
         root
       ),
       importLocal(
-        "@remix-run/dev/dist/devServer_unstable/hdr.js",
+        "@react-router/dev/dist/devServer_unstable/hdr.js",
         root
       ),
-      importLocal("@remix-run/dev/dist/result.js", root)
+      importLocal("@react-router/dev/dist/result.js", root)
     ]).catch(handleRemixImportFail);
     const state = {};
     const server = http.createServer(function(req, res) {

package/dist/lib/log.js

@@ -333,7 +333,7 @@ function createRemixLogger() {
 async function muteRemixLogs(root) {
   try {
     const { logger } = await importLocal(
-      "@remix-run/dev/dist/tux/logger.js",
+      "@react-router/dev/dist/tux/logger.js",
       root
     );
     logger.warn = logger.debug = logger.info = () => {

package/dist/lib/mini-oxygen/common.js

@@ -18,6 +18,9 @@ function logRequestLine({
 }) {
   try {
     const url = new URL(request.url);
+    if (!meta.durationMs && meta.startTimeMs && meta.endTimeMs) {
+      meta.durationMs = meta.endTimeMs - meta.startTimeMs;
+    }
     if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico") return;
     const isDataRequest = url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");
@@ -33,7 +36,7 @@ function logRequestLine({
     outputInfo(
       outputContent`${request.method.padStart(6)}  ${colorizeStatus(
         String(response.status)
-      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route} ${meta.durationMs > 0 ? colors.dim(` ${meta.durationMs}ms`) : ""}${info ? "  " + colors.dim(info) : ""}${request.headers["purpose"] === "prefetch" ? outputToken.italic(colors.dim("  prefetch")) : ""}`
+      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route} ${meta.durationMs && meta.durationMs > 0 ? colors.dim(` ${meta.durationMs}ms`) : ""}${info ? "  " + colors.dim(info) : ""}${request.headers.purpose === "prefetch" ? colors.italic(colors.dim("  prefetch")) : ""}`
     );
   } catch {
     if (request && response?.status) {

package/dist/lib/onboarding/local.js

@@ -12,6 +12,8 @@ import { replaceFileContent } from '../file.js';
 import { setUserAccount, setStorefront } from '../shopify-config.js';
 import { getCliCommand, ALIAS_NAME } from '../shell.js';
 import { CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+import { execAsync } from '../process.js';
+import { outputWarn } from '@shopify/cli-kit/node/output';
 
 async function setupLocalStarterTemplate(options, controller) {
   const templateAction = options.mockShop ? "mock" : await renderSelectPrompt({
@@ -170,6 +172,17 @@ async function setupLocalStarterTemplate(options, controller) {
       try {
         await installDeps();
         setupSummary.depsInstalled = true;
+        if (language === "ts") {
+          try {
+            await execAsync("npx react-router typegen", {
+              cwd: project.directory
+            });
+          } catch (error) {
+            outputWarn(
+              "Failed to generate React Router types. You may need to run `npx react-router typegen` manually."
+            );
+          }
+        }
       } catch (error) {
         setupSummary.depsError = error;
       }
@@ -239,8 +252,19 @@ async function setupLocalStarterTemplate(options, controller) {
         // The init process might have added and modified files. Do not overwrite them.
         // E.g. CSS imports might have been added to the root.
         overwriteFileDeps: false
-      }).then((routes) => {
+      }).then(async (routes) => {
         setupSummary.routes = routes;
+        if (language === "ts" && setupSummary.depsInstalled) {
+          try {
+            await execAsync("npx react-router typegen", {
+              cwd: project.directory
+            });
+          } catch (error) {
+            outputWarn(
+              "Failed to generate React Router types after route generation. You may need to run `npx react-router typegen` manually."
+            );
+          }
+        }
         if (options.git && routes) {
           return commitAll(
             project.directory,

package/dist/lib/onboarding/remote.js

@@ -1,33 +1,24 @@
 import { readdir } from 'node:fs/promises';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { copyFile, fileExists } from '@shopify/cli-kit/node/fs';
-import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { downloadExternalRepo, downloadMonorepoTemplates } from '../template-downloader.js';
-import { applyTemplateDiff } from '../template-diff.js';
 import { getCliCommand } from '../shell.js';
-import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
+import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 const DEMO_STORE_REPO = "shopify/hydrogen-demo-store";
 async function setupRemoteTemplate(options, controller) {
   const appTemplate = options.template === "demo-store" ? DEMO_STORE_REPO : options.template;
-  let abort = createAbortHandler(controller);
-  const backgroundDownloadPromise = appTemplate.includes("/") ? getExternalTemplate(appTemplate, controller.signal).catch(abort) : getMonorepoTemplate(appTemplate, controller.signal).catch(abort);
   const project = await handleProjectLocation({ ...options, controller });
   if (!project) return;
-  abort = createAbortHandler(controller, project);
+  const abort = createAbortHandler(controller, project);
+  const backgroundDownloadPromise = appTemplate.includes("/") ? getExternalTemplate(appTemplate, controller.signal).catch(abort) : getMonorepoTemplate(appTemplate, controller.signal).catch(abort);
   const downloaded = await backgroundDownloadPromise;
   if (controller.signal.aborted) return;
   let backgroundWorkPromise = Promise.resolve().then(async () => {
     if (controller.signal.aborted) return;
-    const { sourcePath, skeletonPath } = downloaded;
-    const pkgJson = await readAndParsePackageJson(
-      joinPath(sourcePath, "package.json")
-    );
-    if (pkgJson.scripts?.dev?.includes("--diff")) {
-      return applyTemplateDiff(project.directory, sourcePath, skeletonPath);
-    }
+    const { sourcePath } = downloaded;
     await copyFile(sourcePath, project.directory);
   }).catch(abort);
   const supportsTranspilation = await fileExists(

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

@@ -2,7 +2,7 @@ import { rm, symlink } from 'node:fs/promises';
 import { vi } from 'vitest';
 import { writeFile } from '@shopify/cli-kit/node/fs';
 import { dirname, joinPath } from '@shopify/cli-kit/node/path';
-import { getSkeletonSourceDir, getRepoNodeModules } from '../build.js';
+import { getSkeletonSourceDir, getSkeletonNodeModules } from '../build.js';
 
 const { renderTasksHook } = vi.hoisted(() => ({ renderTasksHook: vi.fn() }));
 vi.mock("../template-downloader.js", async () => ({
@@ -43,15 +43,13 @@ vi.mock(
         renderTasksHook.mockImplementationOnce(async () => {
           await writeFile(`${directory}/package-lock.json`, "{}");
         });
-        await rm(joinPath(directory, "node_modules"), {
+        const targetNodeModules = joinPath(directory, "node_modules");
+        await rm(targetNodeModules, {
           force: true,
           recursive: true
         }).catch(() => {
         });
-        await symlink(
-          await getRepoNodeModules(),
-          joinPath(directory, "node_modules")
-        );
+        await symlink(await getSkeletonNodeModules(), targetNodeModules);
       })
     };
   }

package/dist/lib/react-router-version-check.js

@@ -0,0 +1,82 @@
+import { readFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
+import { outputDebug } from '@shopify/cli-kit/node/output';
+import semver from 'semver';
+
+const REACT_ROUTER_PACKAGES = [
+  "react-router",
+  "react-router-dom",
+  "@react-router/dev",
+  "@react-router/fs-routes"
+];
+const EXPECTED_VERSION = "7.9.2";
+async function checkReactRouterVersions(appPath) {
+  const mismatches = [];
+  const packageJsonPath = joinPath(appPath, "package.json");
+  let packageJson;
+  try {
+    packageJson = JSON.parse(await readFile(packageJsonPath));
+  } catch (error) {
+    outputDebug(
+      `Unable to read package.json for React Router version check: ${error}`
+    );
+    return;
+  }
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+    ...packageJson.peerDependencies
+  };
+  for (const pkg of REACT_ROUTER_PACKAGES) {
+    const installedVersion = allDeps[pkg];
+    if (!installedVersion) {
+      continue;
+    }
+    installedVersion.replace(/^[\^~]/, "");
+    if (!semver.satisfies(EXPECTED_VERSION, installedVersion)) {
+      mismatches.push({
+        package: pkg,
+        installed: installedVersion,
+        expected: EXPECTED_VERSION
+      });
+    }
+  }
+  if (mismatches.length > 0) {
+    const mismatchList = mismatches.map(
+      (m) => `  \u2022 ${m.package}: installed ${m.installed}, expected ${m.expected}`
+    ).join("\n");
+    const devPackages = ["@react-router/dev", "@react-router/fs-routes"];
+    const regularMismatches = mismatches.filter(
+      (m) => !devPackages.includes(m.package)
+    );
+    const devMismatches = mismatches.filter(
+      (m) => devPackages.includes(m.package)
+    );
+    const commands = [];
+    if (regularMismatches.length > 0) {
+      const regularList = regularMismatches.map((m) => `${m.package}@${EXPECTED_VERSION}`).join(" ");
+      commands.push(`npm install ${regularList}`);
+    }
+    if (devMismatches.length > 0) {
+      const devList = devMismatches.map((m) => `${m.package}@${EXPECTED_VERSION}`).join(" ");
+      commands.push(`npm install -D ${devList}`);
+    }
+    renderWarning({
+      headline: "React Router version mismatch detected",
+      body: [
+        "Hydrogen requires React Router 7.9.x for proper functionality.",
+        "",
+        "Version mismatches found:",
+        mismatchList,
+        "",
+        "To fix this issue, run:",
+        ...commands.map((cmd) => `  ${cmd}`),
+        "",
+        "This may cause issues with routing, code splitting, and other features."
+      ].join("\n")
+    });
+  }
+}
+
+export { checkReactRouterVersions };

package/dist/lib/setups/routes/generate.js

@@ -209,6 +209,9 @@ async function findRouteDependencies(routeFilePath, appDirectory) {
         // import from '~/components/...'
         relativePath(dirname(filePath), appDirectory) || "."
       );
+      if (match.includes("/+types/")) {
+        continue;
+      }
       const resolvedMatchPath = resolvePath(dirname(filePath), match);
       const absoluteFilepath = (await findFileWithExtension(
         dirname(resolvedMatchPath),

package/dist/lib/transpile/project.js

@@ -1,4 +1,4 @@
-import { readFile, writeFile, glob, removeFile } from '@shopify/cli-kit/node/fs';
+import { fileExists, readFile, writeFile, glob, removeFile } from '@shopify/cli-kit/node/fs';
 import { outputDebug } from '@shopify/cli-kit/node/output';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { getCodeFormatOptions, formatCode } from '../format-code.js';
@@ -45,12 +45,14 @@ function convertConfigToJS(tsConfig, keepTypes = false) {
 }
 async function transpileProject(projectDir, keepTypes = true) {
   const routesPath = joinPath(projectDir, "app/routes.ts");
-  const routesFileContent = await readFile(routesPath);
-  const replacedRoutesFileContent = routesFileContent.replace(
-    "./layout.tsx",
-    "./layout.jsx"
-  );
-  await writeFile(routesPath, replacedRoutesFileContent);
+  if (await fileExists(routesPath)) {
+    const routesFileContent = await readFile(routesPath);
+    const replacedRoutesFileContent = routesFileContent.replace(
+      "./layout.tsx",
+      "./layout.jsx"
+    );
+    await writeFile(routesPath, replacedRoutesFileContent);
+  }
   const entries = await glob("**/*.+(ts|tsx)", {
     absolute: true,
     cwd: projectDir,
@@ -103,6 +105,12 @@ async function transpileProject(projectDir, keepTypes = true) {
       await readFile(joinPath(projectDir, "package.json"))
     );
     delete pkgJson.scripts["typecheck"];
+    const typegenPattern = /react-router typegen\s*&&\s*/g;
+    for (const [key, value] of Object.entries(pkgJson.scripts || {})) {
+      if (typeof value === "string" && value.includes("react-router typegen")) {
+        pkgJson.scripts[key] = value.replace(typegenPattern, "");
+      }
+    }
     if (!keepTypes) {
       delete pkgJson.devDependencies["typescript"];
       delete pkgJson.devDependencies["@shopify/oxygen-workers-types"];

package/oclif.manifest.json

@@ -60,14 +60,6 @@
           "multiple": false,
           "type": "option"
         },
-        "diff": {
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
-          "allowNo": false,
-          "type": "boolean"
-        },
         "watch": {
           "description": "Watches for changes and rebuilds the project writing output to disk.",
           "env": "SHOPIFY_HYDROGEN_FLAG_WATCH",
@@ -181,14 +173,6 @@
           "required": false,
           "allowNo": false,
           "type": "boolean"
-        },
-        "diff": {
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
-          "allowNo": false,
-          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -281,14 +265,6 @@
           "multiple": false,
           "type": "option"
         },
-        "diff": {
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
-          "allowNo": false,
-          "type": "boolean"
-        },
         "entry": {
           "description": "Entry file for the worker. Defaults to `./server`.",
           "env": "SHOPIFY_HYDROGEN_FLAG_ENTRY",
@@ -496,11 +472,10 @@
           "multiple": false,
           "type": "option"
         },
-        "diff": {
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
+        "force-client-sourcemap": {
+          "description": "Client sourcemapping is avoided by default because it makes backend code visible in the browser. Use this flag to force enabling it.",
+          "env": "SHOPIFY_HYDROGEN_FLAG_FORCE_CLIENT_SOURCEMAP",
+          "name": "force-client-sourcemap",
           "allowNo": false,
           "type": "boolean"
         }
@@ -630,19 +605,10 @@
           "allowNo": false,
           "type": "boolean"
         },
-        "diff": {
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
-          "allowNo": false,
-          "type": "boolean"
-        },
-        "customer-account-push__unstable": {
-          "description": "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's Oauth flow",
+        "customer-account-push": {
+          "description": "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's OAuth flow",
           "env": "SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH",
-          "hidden": true,
-          "name": "customer-account-push__unstable",
+          "name": "customer-account-push",
           "required": false,
           "allowNo": false,
           "type": "boolean"
@@ -1405,17 +1371,6 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "type": "option"
-        },
-        "diff": {
-          "dependsOn": [
-            "build"
-          ],
-          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-          "hidden": true,
-          "name": "diff",
-          "required": false,
-          "allowNo": false,
-          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -1728,5 +1683,5 @@
       ]
     }
   },
-  "version": "11.1.3"
+  "version": "11.1.5"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "11.1.3",
+  "version": "11.1.5",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -21,7 +21,7 @@
     "test:watch": "cross-env SHOPIFY_UNIT_TEST=1 LANG=en-US.UTF-8 vitest --test-timeout=60000"
   },
   "devDependencies": {
-    "@react-router/dev": "7.6.0",
+    "@react-router/dev": "7.9.2",
     "@types/diff": "^5.0.2",
     "@types/gunzip-maybe": "^1.4.0",
     "@types/prettier": "^2.7.2",
@@ -37,7 +37,7 @@
     "vitest": "^1.0.4"
   },
   "dependencies": {
-    "@ast-grep/napi": "0.11.0",
+    "@ast-grep/napi": "0.34.1",
     "@oclif/core": "3.26.5",
     "@shopify/cli-kit": "^3.80.4",
     "@shopify/oxygen-cli": "4.6.18",
@@ -60,9 +60,9 @@
   },
   "peerDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
-    "@react-router/dev": "7.6.0",
+    "@react-router/dev": "7.9.2",
     "@shopify/hydrogen-codegen": "^0.3.3",
-    "@shopify/mini-oxygen": "^3.2.1",
+    "@shopify/mini-oxygen": "^4.0.0",
     "graphql-config": "^5.0.3",
     "vite": "^5.1.0 || ^6.2.0"
   },