@shopify/cli-hydrogen 7.1.2 → 8.0.0

package/dist/lib/package-managers.js

@@ -0,0 +1,24 @@
+const packageManagers = [
+  {
+    name: "npm",
+    lockfile: "package-lock.json",
+    installCommand: "npm ci"
+  },
+  {
+    name: "yarn",
+    lockfile: "yarn.lock",
+    installCommand: "yarn install --frozen-lockfile"
+  },
+  {
+    name: "pnpm",
+    lockfile: "pnpm-lock.yaml",
+    installCommand: "pnpm install --frozen-lockfile"
+  },
+  {
+    name: "bun",
+    lockfile: "bun.lockb",
+    installCommand: "bun install --frozen-lockfile"
+  }
+];
+
+export { packageManagers };

package/dist/lib/remix-config.js

@@ -7,7 +7,13 @@ import { outputWarn } from '@shopify/cli-kit/node/output';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { muteRemixLogs } from './log.js';
 import { getRequiredRemixVersion } from './remix-version-check.js';
+import { findFileWithExtension } from './file.js';
+import { getViteConfig } from './vite-config.js';
 
+async function hasRemixConfigFile(root) {
+  const result = await findFileWithExtension(root, "remix.config");
+  return !!result.filepath;
+}
 const BUILD_DIR = "dist";
 const CLIENT_SUBDIR = "client";
 const WORKER_SUBDIR = "worker";
@@ -33,7 +39,17 @@ function handleRemixImportFail() {
     `Please make sure you have \`@remix-run/dev@${remixVersion}\` installed and all the other Remix packages have the same version.`
   );
 }
+function getRawRemixConfig(root) {
+  return findFileWithExtension(root, "remix.config").then(({ filepath }) => {
+    if (!filepath)
+      throw new AbortError("No remix.config.js file found.");
+    return createRequire(import.meta.url)(filepath);
+  });
+}
 async function getRemixConfig(root, mode = process.env.NODE_ENV) {
+  if (!await hasRemixConfigFile(root)) {
+    return (await getViteConfig(root)).remixConfig;
+  }
   await muteRemixLogs();
   const { readConfig } = await import('@remix-run/dev/dist/config.js').catch(
     handleRemixImportFail
@@ -144,4 +160,4 @@ async function assertEntryFileExists(root, fileRelative) {
   }
 }
 
-export { assertOxygenChecks, getProjectPaths, getRemixConfig, handleRemixImportFail };
+export { assertOxygenChecks, getProjectPaths, getRawRemixConfig, getRemixConfig, handleRemixImportFail, hasRemixConfigFile };

package/dist/lib/request-events.js

@@ -9,7 +9,12 @@ let ResponseConstructor;
 function setConstructors(constructors) {
   ResponseConstructor = constructors.Response;
 }
-const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/subrequest-profiler"]);
+const DEV_ROUTES = /* @__PURE__ */ new Set([
+  "/graphiql",
+  "/graphiql/customer-account.schema.json",
+  "/subrequest-profiler",
+  "/debug-network-server"
+]);
 const EVENT_MAP = {
   request: "Request",
   subrequest: "Sub request"

package/dist/lib/setups/i18n/replacers.js

@@ -1,5 +1,5 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { joinPath } from '@shopify/cli-kit/node/path';
+import { joinPath, resolvePath } from '@shopify/cli-kit/node/path';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { replaceFileContent, findFileWithExtension } from '../../file.js';
 import { importLangAstGrep } from '../../ast.js';
@@ -147,9 +147,12 @@ ${localeExtractFn}
   });
 }
 async function replaceRemixEnv({ rootDirectory }, formatConfig, localeExtractImpl) {
-  const remixEnvPath = joinPath(rootDirectory, "remix.env.d.ts");
-  if (!await fileExists(remixEnvPath)) {
-    return;
+  let envPath = joinPath(rootDirectory, "env.d.ts");
+  if (!await fileExists(envPath)) {
+    envPath = "remix.env.d.ts";
+    if (!await fileExists(envPath)) {
+      return;
+    }
   }
   const i18nType = localeExtractImpl.match(
     /^(export )?(type \w+ =\s+\{.*?\};)\n/ms
@@ -158,7 +161,7 @@ async function replaceRemixEnv({ rootDirectory }, formatConfig, localeExtractImp
   if (!i18nTypeName) {
     return;
   }
-  await replaceFileContent(remixEnvPath, formatConfig, async (content) => {
+  await replaceFileContent(envPath, formatConfig, async (content) => {
     if (content.includes(`Storefront<`))
       return;
     const astGrep = await importLangAstGrep("ts");
@@ -237,7 +240,7 @@ async function findEntryFile({
   serverEntryPoint = "server"
 }) {
   const match = serverEntryPoint.match(/\.([jt]sx?)$/)?.[1];
-  const { filepath, astType } = match ? { filepath: joinPath(rootDirectory, serverEntryPoint), astType: match } : await findFileWithExtension(rootDirectory, serverEntryPoint);
+  const { filepath, astType } = match ? { filepath: resolvePath(rootDirectory, serverEntryPoint), astType: match } : await findFileWithExtension(rootDirectory, serverEntryPoint);
   if (!filepath || !astType) {
     throw new AbortError(
       `Could not find a server entry point at ${serverEntryPoint}`

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

@@ -199,6 +199,7 @@ async function findRouteDependencies(routeFilePath, appDirectory) {
     for (let [, , match] of importMatches) {
       if (!match || !/^(\.|~)/.test(match))
         continue;
+      match = match.replace(/\?[a-z.]+$/, "");
       match = match.replace(
         "~",
         // import from '~/components/...'

package/dist/lib/shell.js

@@ -113,7 +113,8 @@ async function createPlatformShortcut() {
 }
 const BASH_ZSH_COMMAND = `
 # Shopify Hydrogen alias to local projects
-alias ${ALIAS_NAME}='$(npm prefix -s)/node_modules/.bin/shopify hydrogen'`;
+alias ${ALIAS_NAME}='$(npm prefix -s)/node_modules/.bin/shopify hydrogen'
+`;
 const FISH_FUNCTION = `
 function ${ALIAS_NAME} --wraps='shopify hydrogen' --description 'Shortcut for the Hydrogen CLI'
    set npmPrefix (npm prefix -s)

package/dist/lib/shopify-config.js

@@ -87,5 +87,23 @@ async function ensureShopifyGitIgnore(root) {
     return false;
   }
 }
+async function setCustomerAccountConfig(root, customerAccountConfig) {
+  try {
+    const filePath = resolvePath(root, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
+    const existingConfig = JSON.parse(await readFile(filePath));
+    const config = {
+      ...existingConfig,
+      storefront: {
+        ...existingConfig.storefront,
+        customerAccountConfig
+      }
+    };
+    await writeFile(filePath, JSON.stringify(config));
+    await ensureShopifyGitIgnore(root);
+    return config;
+  } catch {
+    throw new AbortError("Project configuration could not be found.");
+  }
+}
 
-export { SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, ensureShopifyGitIgnore, getConfig, resetConfig, setStorefront, setUserAccount, unsetStorefront };
+export { SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, ensureShopifyGitIgnore, getConfig, resetConfig, setCustomerAccountConfig, setStorefront, setUserAccount, unsetStorefront };

package/dist/lib/template-diff.js

@@ -1,7 +1,7 @@
 import { rmdirSync } from 'node:fs';
 import { temporaryDirectory } from 'tempy';
-import { createSymlink, copy, remove } from 'fs-extra/esm';
-import { copyFile, removeFile } from '@shopify/cli-kit/node/fs';
+import { createSymlink, copy } from 'fs-extra/esm';
+import { copyFile, removeFile, fileExists } from '@shopify/cli-kit/node/fs';
 import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
 import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
@@ -66,9 +66,10 @@ ${colors.dim(
   return targetDirectory;
 }
 async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = getStarterDir()) {
-  const pkgJson = await readAndParsePackageJson(
+  const diffPkgJson = await readAndParsePackageJson(
     joinPath(diffDirectory, "package.json")
   );
+  const diffOptions = diffPkgJson["h2:diff"] ?? {};
   const createFilter = (re, skipFiles) => (filepath) => {
     const filename = relativePath(templateDir, filepath);
     return !re.test(filename) && !skipFiles?.includes(filename);
@@ -76,7 +77,7 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = g
   await copy(templateDir, targetDirectory, {
     filter: createFilter(
       /(^|\/|\\)(dist|node_modules|\.cache|.turbo|CHANGELOG\.md)(\/|\\|$)/i,
-      pkgJson["h2:diff"]?.["skip-files"] || []
+      diffOptions.skipFiles || []
     )
   });
   await copy(diffDirectory, targetDirectory, {
@@ -86,29 +87,49 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = g
   });
   await mergePackageJson(diffDirectory, targetDirectory, {
     ignoredKeys: ["h2:diff"],
-    onResult: (pkgJson2) => {
+    onResult: (pkgJson) => {
       for (const key of ["build", "dev"]) {
-        const scriptLine = pkgJson2.scripts?.[key];
-        if (pkgJson2.scripts?.[key] && typeof scriptLine === "string") {
-          pkgJson2.scripts[key] = scriptLine.replace(/\s+--diff/, "");
+        const scriptLine = pkgJson.scripts?.[key];
+        if (pkgJson.scripts?.[key] && typeof scriptLine === "string") {
+          pkgJson.scripts[key] = scriptLine.replace(/\s+--diff/, "");
         }
       }
-      return pkgJson2;
+      if (diffOptions.skipDependencies && pkgJson.dependencies) {
+        for (const dep of diffOptions.skipDependencies) {
+          delete pkgJson.dependencies[dep];
+        }
+      }
+      if (diffOptions.skipDevDependencies && pkgJson.devDependencies) {
+        for (const devDep of diffOptions.skipDevDependencies) {
+          delete pkgJson.devDependencies[devDep];
+        }
+      }
+      return pkgJson;
     }
   });
 }
-async function copyDiffBuild(targetDirectory, diffDirectory) {
-  const targetDist = joinPath(diffDirectory, "dist");
-  await remove(targetDist);
+async function copyDiffBuild(generatedDirectory, diffDirectory) {
+  const target = joinPath(diffDirectory, "dist");
+  await removeFile(target);
   await Promise.all([
-    copy(joinPath(targetDirectory, "dist"), targetDist, {
+    copy(joinPath(generatedDirectory, "dist"), target, {
       overwrite: true
     }),
     copyFile(
-      joinPath(targetDirectory, ".env"),
+      joinPath(generatedDirectory, ".env"),
       joinPath(diffDirectory, ".env")
     )
   ]);
 }
+async function copyShopifyConfig(generatedDirectory, diffDirectory) {
+  const source = joinPath(generatedDirectory, ".shopify");
+  if (!await fileExists(source))
+    return;
+  const target = joinPath(diffDirectory, ".shopify");
+  await removeFile(target);
+  await copy(joinPath(generatedDirectory, ".shopify"), target, {
+    overwrite: true
+  });
+}
 
-export { applyTemplateDiff, copyDiffBuild, prepareDiffDirectory };
+export { applyTemplateDiff, copyDiffBuild, copyShopifyConfig, prepareDiffDirectory };

package/dist/lib/template-downloader.js

@@ -4,9 +4,12 @@ import { pipeline } from 'stream/promises';
 import gunzipMaybe from 'gunzip-maybe';
 import { extract } from 'tar-fs';
 import { fetch } from '@shopify/cli-kit/node/http';
-import { fileExists, mkdir } from '@shopify/cli-kit/node/fs';
+import { parseGitHubRepositoryURL } from '@shopify/cli-kit/node/github';
+import { fileExists, mkdir, rmdir } from '@shopify/cli-kit/node/fs';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { getSkeletonSourceDir } from './build.js';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { downloadGitRepository } from '@shopify/cli-kit/node/git';
 
 const REPO_RELEASES_URL = `https://api.github.com/repos/shopify/hydrogen/releases/latest`;
 const getTryMessage = (status) => status === 403 ? `If you are using a VPN, WARP, or similar service, consider disabling it momentarily.` : void 0;
@@ -25,7 +28,7 @@ async function getLatestReleaseDownloadUrl(signal) {
     url: release.tarball_url
   };
 }
-async function downloadTarball(url, storageDir, signal) {
+async function downloadMonorepoTarball(url, storageDir, signal) {
   const response = await fetch(url, { signal });
   if (!response.ok || response.status >= 400) {
     throw new AbortError(
@@ -48,7 +51,7 @@ async function downloadTarball(url, storageDir, signal) {
     })
   );
 }
-async function getLatestTemplates({
+async function downloadMonorepoTemplates({
   signal
 } = {}) {
   if (process.env.LOCAL_DEV) {
@@ -69,7 +72,7 @@ async function getLatestTemplates({
     }
     const templateStorageVersionPath = path.join(templateStoragePath, version);
     if (!await fileExists(templateStorageVersionPath)) {
-      await downloadTarball(url, templateStorageVersionPath, signal);
+      await downloadMonorepoTarball(url, templateStorageVersionPath, signal);
     }
     return {
       version,
@@ -87,5 +90,32 @@ Please check your internet connection and the following error:
     );
   }
 }
+async function downloadExternalRepo(appTemplate, signal) {
+  const parsed = parseGitHubRepositoryURL(appTemplate);
+  if (parsed.isErr()) {
+    throw new AbortError(parsed.error.message);
+  }
+  const externalTemplates = fileURLToPath(
+    new URL("../external-templates", import.meta.url)
+  );
+  if (!await fileExists(externalTemplates)) {
+    await mkdir(externalTemplates);
+  }
+  const result = parsed.value;
+  const templateDir = joinPath(
+    externalTemplates,
+    result.full.replace(/^https?:\/\//, "").replace(/[^\w]+/, "_")
+  );
+  if (await fileExists(templateDir)) {
+    await rmdir(templateDir, { force: true });
+  }
+  await downloadGitRepository({
+    repoUrl: result.full,
+    destination: templateDir,
+    shallow: true
+  });
+  await rmdir(joinPath(templateDir, ".git"), { force: true });
+  return { templateDir };
+}
 
-export { getLatestTemplates };
+export { downloadExternalRepo, downloadMonorepoTemplates };

package/dist/lib/transpile/morph/typedefs.js

@@ -26,13 +26,16 @@ function generateTypeDefs(sourceFile, code) {
     }
   }
   typedefs.push("");
+  const knownGenerics = {
+    MetaFunction: "T"
+  };
   typedefsFromImports.forEach((typeElements, moduleSpecifier) => {
     for (const typeElement of typeElements) {
       if (typeElement === "SerializeFrom")
         continue;
-      const hasGeneric = typeElement === "MetaFunction";
+      const hasGeneric = !!knownGenerics[typeElement];
       typedefs.push(
-        `/** ${hasGeneric ? "@template T " : ""}@typedef {import('${moduleSpecifier}').${typeElement}${hasGeneric ? "<T>" : ""}} ${typeElement} */`
+        `/** ${hasGeneric ? `@template ${knownGenerics[typeElement]} ` : ""}@typedef {import('${moduleSpecifier}').${typeElement}${hasGeneric ? `<${knownGenerics[typeElement]}>` : ""}} ${typeElement} */`
       );
     }
   });

package/dist/lib/transpile/project.js

@@ -3,6 +3,7 @@ import { outputDebug } from '@shopify/cli-kit/node/output';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { getCodeFormatOptions, formatCode } from '../format-code.js';
 import { transpileFile } from './file.js';
+import { findFileWithExtension } from '../file.js';
 
 const DEFAULT_JS_CONFIG = {
   checkJs: false,
@@ -120,10 +121,13 @@ async function transpileProject(projectDir, keepTypes = true) {
     );
   }
   try {
-    const eslintrcPath = joinPath(projectDir, ".eslintrc.js");
-    let eslintrc = await readFile(eslintrcPath);
-    eslintrc = eslintrc.replace(/\/\*\*[\s*]+@type.+\s+\*\/\s?/gim, "").replace(/\s*,?\s*['"`]plugin:hydrogen\/typescript['"`]/gim, "").replace(/\s+['"`]@typescript-eslint\/.+,/gim, "");
-    await writeFile(eslintrcPath, eslintrc);
+    const { filepath = joinPath(projectDir, ".eslintrc.cjs") } = await findFileWithExtension(projectDir, ".eslintrc", ["cjs", "js"]);
+    let eslintrc = await readFile(filepath);
+    if (!keepTypes) {
+      eslintrc = eslintrc.replace(/\/\*\*[\s*]+@type.+\s+\*\/\s?/gim, "");
+    }
+    eslintrc = eslintrc.replace(/\s*,?\s*['"`]plugin:hydrogen\/typescript['"`]/gim, "").replace(/\s+['"`]@typescript-eslint\/.+,/gim, "");
+    await writeFile(filepath, await formatCode(eslintrc, formatConfig));
   } catch (error) {
     outputDebug(
       "Could not remove TS rules from .eslintrc:\n" + error.stack

package/dist/lib/tunneling.js

@@ -0,0 +1,44 @@
+import { fanoutHooks } from '@shopify/cli-kit/node/plugins';
+import { outputDebug } from '@shopify/cli-kit/node/output';
+import { BugError, AbortError } from '@shopify/cli-kit/node/error';
+
+async function startTunnelPlugin(config, port, provider) {
+  const hooks = await fanoutHooks(config, "tunnel_start", { port, provider });
+  const results = Object.values(hooks).filter(
+    (tunnelResponse) => !tunnelResponse?.isErr() || tunnelResponse.error.type !== "invalid-provider"
+  );
+  const first = results[0];
+  if (!first)
+    throw new BugError(`We couldn't find the ${provider} tunnel plugin`);
+  if (first.isErr())
+    throw new AbortError(
+      `${provider} failed to start the tunnel.
+${first.error.message}`
+    );
+  return first.value;
+}
+async function pollTunnelURL(tunnelClient) {
+  return new Promise((resolve, reject) => {
+    let retries = 0;
+    const pollTunnelStatus = async () => {
+      const result = tunnelClient.getTunnelStatus();
+      outputDebug(
+        `Polling tunnel status for ${tunnelClient.provider} (attempt ${retries}): ${result.status}`
+      );
+      if (result.status === "error")
+        return reject(new AbortError(result.message, result.tryMessage));
+      if (result.status === "connected") {
+        resolve(result.url);
+      } else {
+        retries += 1;
+        startPolling();
+      }
+    };
+    const startPolling = () => {
+      setTimeout(pollTunnelStatus, 500);
+    };
+    pollTunnelStatus();
+  });
+}
+
+export { pollTunnelURL, startTunnelPlugin };

package/dist/lib/virtual-routes.js

@@ -5,8 +5,8 @@ import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
 const VIRTUAL_ROUTES_DIR = "virtual-routes/routes";
 const VIRTUAL_ROOT = "virtual-routes/virtual-root";
 async function addVirtualRoutes(config) {
+  const distPath = process.env.SHOPIFY_UNIT_TEST ? fileURLToPath(new URL("../../../hydrogen/src/vite", import.meta.url)) : fileURLToPath(new URL("..", import.meta.url));
   const userRouteList = Object.values(config.routes);
-  const distPath = fileURLToPath(new URL("..", import.meta.url));
   const virtualRoutesPath = joinPath(distPath, VIRTUAL_ROUTES_DIR);
   for (const absoluteFilePath of await glob(
     joinPath(virtualRoutesPath, "**", "*")

package/dist/lib/vite-config.js

@@ -1,6 +1,11 @@
-import { joinPath } from '@shopify/cli-kit/node/path';
+import { joinPath, resolvePath, dirname, basename } from '@shopify/cli-kit/node/path';
+import { findFileWithExtension } from './file.js';
 
-async function getViteConfig(root) {
+async function hasViteConfig(root) {
+  const result = await findFileWithExtension(root, "vite.config");
+  return !!result.filepath;
+}
+async function getViteConfig(root, ssrEntryFlag) {
   const vite = await import('vite');
   const command = "build";
   const mode = process.env.NODE_ENV || "production";
@@ -18,13 +23,19 @@ async function getViteConfig(root) {
     mode,
     mode
   );
+  const { appDirectory, serverBuildFile, routes } = getRemixConfigFromVite(resolvedViteConfig);
   const serverOutDir = resolvedViteConfig.build.outDir;
   const clientOutDir = serverOutDir.replace(/server$/, "client");
   const rollupOutput = resolvedViteConfig.build.rollupOptions.output;
   const { entryFileNames } = (Array.isArray(rollupOutput) ? rollupOutput[0] : rollupOutput) ?? {};
   const serverOutFile = joinPath(
     serverOutDir,
-    typeof entryFileNames === "string" ? entryFileNames : "index.js"
+    typeof entryFileNames === "string" ? entryFileNames : serverBuildFile ?? "index.js"
+  );
+  const ssrEntry = ssrEntryFlag ?? resolvedViteConfig.build.ssr;
+  const resolvedSsrEntry = resolvePath(
+    resolvedViteConfig.root,
+    typeof ssrEntry === "string" ? ssrEntry : "server"
   );
   return {
     clientOutDir,
@@ -32,14 +43,33 @@ async function getViteConfig(root) {
     serverOutFile,
     resolvedViteConfig,
     userViteConfig: maybeConfig.config,
-    remixConfig: getRemixConfigFromVite(resolvedViteConfig)
+    remixConfig: {
+      routes: routes ?? {},
+      appDirectory: appDirectory ?? joinPath(resolvedViteConfig.root, "app"),
+      rootDirectory: resolvedViteConfig.root,
+      serverEntryPoint: (await findFileWithExtension(
+        dirname(resolvedSsrEntry),
+        basename(resolvedSsrEntry)
+      )).filepath || resolvedSsrEntry
+    }
   };
 }
 function getRemixConfigFromVite(viteConfig) {
-  const { remixConfig } = viteConfig.__remixPluginContext || {
-    remixConfig: { appDirectory: joinPath(viteConfig.root, "app") }
-  };
-  return remixConfig;
+  const { remixConfig } = findHydrogenPlugin(viteConfig)?.api?.getPluginOptions() ?? {};
+  return remixConfig ? {
+    appDirectory: remixConfig.appDirectory,
+    serverBuildFile: remixConfig.serverBuildFile,
+    routes: remixConfig.routes
+  } : {};
+}
+function findPlugin(config, name) {
+  return config.plugins.find((plugin) => plugin.name === name);
+}
+function findHydrogenPlugin(config) {
+  return findPlugin(config, "hydrogen:main");
+}
+function findOxygenPlugin(config) {
+  return findPlugin(config, "oxygen:main");
 }
 
-export { getViteConfig };
+export { findHydrogenPlugin, findOxygenPlugin, getViteConfig, hasViteConfig };