@shopify/cli-hydrogen 8.1.1 → 8.3.0

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

@@ -39,12 +39,9 @@ async function runClassicCompilerDev({
   cliConfig,
   verbose
 }) {
-  if (!process.env.NODE_ENV)
-    process.env.NODE_ENV = "development";
-  if (verbose)
-    setH2OVerbose();
-  if (!isH2Verbose())
-    muteDevLogs();
+  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);
@@ -111,8 +108,7 @@ async function runClassicCompilerDev({
   let miniOxygen;
   let codegenProcess;
   async function safeStartMiniOxygen() {
-    if (miniOxygen)
-      return;
+    if (miniOxygen) return;
     const { allVariables, logInjectedVariables } = await envPromise;
     miniOxygen = await startMiniOxygen(
       {
@@ -183,8 +179,7 @@ async function runClassicCompilerDev({
         } else if (!skipRebuildLogs) {
           skipRebuildLogs = false;
           console.timeEnd(LOG_REBUILT);
-          if (!miniOxygen)
-            console.log("");
+          if (!miniOxygen) console.log("");
         }
         if (!miniOxygen && !await serverBundleExists()) {
           return renderFatalError({

package/dist/lib/codegen.js

@@ -22,8 +22,7 @@ function normalizeCodegenError(errorMessage, rootDirectory) {
     const parsedError = errorMessage.split("AbortError: ")[1] ?? "";
     const message2 = parsedError.split("\n")[0];
     const details2 = parsedError.match(/tryMessage: '(.*)',$/m)?.[1];
-    if (message2)
-      return { message: message2, details: details2 };
+    if (message2) return { message: message2, details: details2 };
   }
   const [first = "", ...rest] = errorMessage.replaceAll("[FAILED]", "").replace(/\s{2,}/g, "\n").replace(/\n,\n/, "\n").trim().split("\n");
   const message = "[Codegen] " + first;
@@ -66,15 +65,11 @@ function spawnCodegenProcess({
   const child = spawn(command, args, { stdio: ["inherit", "ignore", "pipe"] });
   child.stderr.on("data", (data) => {
     const dataString = typeof data === "string" ? data : data?.toString?.("utf8") ?? "";
-    if (!dataString)
-      return;
+    if (!dataString) return;
     const { message, details } = normalizeCodegenError(dataString, rootDirectory);
-    if (/`punycode`/.test(message))
-      return;
-    if (/\.body\[\d\]/.test(message))
-      return;
-    if (/console\.time(End)?\(\)/.test(message))
-      return;
+    if (/`punycode`/.test(message)) return;
+    if (/\.body\[\d\]/.test(message)) return;
+    if (/console\.time(End)?\(\)/.test(message)) return;
     console.log("");
     renderWarning({ headline: message, body: details });
   });
@@ -90,8 +85,7 @@ function spawnCodegenProcess({
 }
 function codegen(options) {
   return generateTypes(options).catch((error) => {
-    if (error instanceof AbortError)
-      throw error;
+    if (error instanceof AbortError) throw error;
     const { message, details } = normalizeCodegenError(
       error.message,
       options.rootDirectory
@@ -117,8 +111,7 @@ async function generateTypes({
   const { config: codegenConfig } = (
     // Load <root>/codegen.ts if available
     await loadCodegenConfig({
-      configFilePath,
-      searchPlaces: [dirs.rootDirectory]
+      configFilePath: configFilePath ?? dirs.rootDirectory
     }) || // Fall back to default config
     await generateDefaultConfig(dirs, forceSfapiVersion)
   );
@@ -175,69 +168,102 @@ async function generateDefaultConfig({
   }).catch(() => void 0);
   const sfapiSchema = getSchema("storefront");
   const sfapiProject = findGqlProject(sfapiSchema, gqlConfig);
-  const defaultGlob = "*!(*.d).{ts,tsx,js,jsx}";
-  const appDirRelative = relativePath(rootDirectory, appDirectory);
   const caapiSchema = getSchema("customer-account", { throwIfMissing: false });
   const caapiProject = caapiSchema ? findGqlProject(caapiSchema, gqlConfig) : void 0;
-  const customerAccountAPIConfig = caapiProject?.documents ? {
-    ["customer-accountapi.generated.d.ts"]: {
-      preset,
-      schema: caapiSchema,
-      documents: caapiProject?.documents
-    }
-  } : void 0;
+  const defaultGlob = "*!(*.d).{ts,tsx,js,jsx}";
+  const appDirRelative = relativePath(rootDirectory, appDirectory);
+  const isKnownSchema = (schema) => {
+    const baseSfapiSchema = basename(sfapiSchema);
+    const baseCaapiSchema = caapiSchema && basename(caapiSchema);
+    return Boolean(
+      schema.endsWith(baseSfapiSchema) || baseCaapiSchema && schema.endsWith(baseCaapiSchema)
+    );
+  };
+  const otherCodegenProjects = Object.values(gqlConfig?.projects ?? {}).filter(
+    (project) => project.hasExtension("codegen") && (typeof project.schema !== "string" || !isKnownSchema(project.schema))
+  );
   return {
     filepath: "virtual:codegen",
     config: {
       overwrite: true,
       pluckConfig,
       generates: {
-        ["storefrontapi.generated.d.ts"]: {
-          preset,
-          schema: sfapiSchema,
-          documents: sfapiProject?.documents ?? [
-            defaultGlob,
-            // E.g. ./server.(t|j)s
-            joinPath(appDirRelative, "**", defaultGlob)
-            // E.g. app/routes/_index.(t|j)sx
-          ],
-          ...!!forceSfapiVersion && {
-            presetConfig: { importTypes: false },
-            schema: {
-              [`https://hydrogen-preview.myshopify.com/api/${forceSfapiVersion.split(":")[0]}/graphql.json`]: {
-                headers: {
-                  "content-type": "application/json",
-                  "X-Shopify-Storefront-Access-Token": forceSfapiVersion.split(":")[1] ?? "3b580e70970c4528da70c98e097c2fa0"
+        // If the SFAPI project in GraphQL config has a codegen extension, use it.
+        // Otherwise, always fallback to our default config for SFAPI.
+        ...getCodegenFromGraphQLConfig(sfapiProject) ?? {
+          ["storefrontapi.generated.d.ts"]: {
+            preset,
+            schema: sfapiSchema,
+            documents: sfapiProject?.documents ?? [
+              defaultGlob,
+              // E.g. ./server.(t|j)s
+              joinPath(appDirRelative, "**", defaultGlob)
+              // E.g. app/routes/_index.(t|j)sx
+            ],
+            ...!!forceSfapiVersion && {
+              presetConfig: { importTypes: false },
+              schema: {
+                [`https://hydrogen-preview.myshopify.com/api/${forceSfapiVersion.split(":")[0]}/graphql.json`]: {
+                  headers: {
+                    "content-type": "application/json",
+                    "X-Shopify-Storefront-Access-Token": forceSfapiVersion.split(":")[1] ?? "3b580e70970c4528da70c98e097c2fa0"
+                  }
                 }
+              },
+              config: {
+                defaultScalarType: "string",
+                scalars: { JSON: "unknown" }
               }
-            },
-            config: {
-              defaultScalarType: "string",
-              scalars: { JSON: "unknown" }
             }
           }
         },
-        ...customerAccountAPIConfig
+        // If the CAAPI project in GraphQL config has a codegen extension, use it.
+        // Otherwise, check if the user provided a list of documents to scan for queries
+        // before falling back to our default config for CAAPI.
+        ...getCodegenFromGraphQLConfig(caapiProject) ?? (caapiProject?.documents ? {
+          ["customer-accountapi.generated.d.ts"]: {
+            preset,
+            schema: caapiSchema,
+            documents: caapiProject.documents
+          }
+        } : {}),
+        // Use other unknown codegen projects from the GraphQL config as they are.
+        ...otherCodegenProjects.reduce(
+          (acc, project) => ({ ...acc, ...getCodegenFromGraphQLConfig(project) }),
+          {}
+        )
       }
     }
   };
 }
+function getCodegenFromGraphQLConfig(project) {
+  if (!project?.extensions?.codegen?.generates) return;
+  return Object.entries(
+    project.extensions.codegen.generates
+  ).reduce((acc, [key, value]) => {
+    acc[key] = { ...project, ...Array.isArray(value) ? value[0] : value };
+    return acc;
+  }, {});
+}
 function findGqlProject(schemaFilepath, gqlConfig) {
-  if (!gqlConfig)
-    return;
+  if (!gqlConfig) return;
   const schemaFilename = basename(schemaFilepath);
   return Object.values(gqlConfig.projects || {}).find(
     (project) => typeof project.schema === "string" && project.schema.endsWith(schemaFilename)
   );
 }
 async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
+  const name = Symbol.for("name");
   const hydrogenProjectsOptions = Object.values(codegenConfig.generates).filter(
     (value) => {
       const foundPreset = (Array.isArray(value) ? value[0] : value)?.preset;
       if (typeof foundPreset === "object") {
-        const name = Symbol.for("name");
         if (name in foundPreset) {
-          return foundPreset[name] === "hydrogen";
+          return (
+            // Preset from @shopify/hydrogen-codegen (e.g. SFAPI, CAAPI)
+            foundPreset[name] === "hydrogen" || // Preset from @shopify/graphql-codegen (e.g. Admin API)
+            foundPreset[name] === "@shopify/graphql-codegen"
+          );
         }
       }
     }
@@ -254,4 +280,4 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
   }
 }
 
-export { codegen, spawnCodegenProcess };
+export { codegen, generateDefaultConfig, spawnCodegenProcess };

package/dist/lib/defer.js

@@ -2,13 +2,11 @@ function deferPromise() {
   const deferred = { state: "pending" };
   deferred.promise = new Promise((resolve, reject) => {
     deferred.resolve = (value) => {
-      if (deferred.state === "pending")
-        deferred.state = "resolved";
+      if (deferred.state === "pending") deferred.state = "resolved";
       return resolve(value);
     };
     deferred.reject = (reason) => {
-      if (deferred.state === "pending")
-        deferred.state = "rejected";
+      if (deferred.state === "pending") deferred.state = "rejected";
       return reject(reason);
     };
   });

package/dist/lib/environment-variables.js

@@ -76,10 +76,8 @@ async function getRemoteVariables(root, envHandle, envBranch) {
   const remoteVariables = {};
   const remoteSecrets = {};
   for (const { key, value, isSecret } of envVariables) {
-    if (isSecret)
-      remoteSecrets[key] = value;
-    else
-      remoteVariables[key] = value;
+    if (isSecret) remoteSecrets[key] = value;
+    else remoteVariables[key] = value;
   }
   return { remoteVariables, remoteSecrets };
 }

package/dist/lib/file.js

@@ -6,8 +6,7 @@ import { formatCode } from './format-code.js';
 
 async function replaceFileContent(filepath, formatConfig, replacer) {
   let content = await replacer(await readFile(filepath));
-  if (typeof content !== "string")
-    return;
+  if (typeof content !== "string") return;
   if (formatConfig) {
     content = await formatCode(content, formatConfig, filepath);
   }
@@ -62,8 +61,7 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     (key) => !MANAGED_PACKAGE_JSON_KEYS.includes(key)
   );
   for (const key of unmanagedKeys) {
-    if (ignoredKeys.has(key))
-      continue;
+    if (ignoredKeys.has(key)) continue;
     const sourceValue = sourcePkgJson[key];
     const targetValue = targetPkgJson[key];
     const newValue = Array.isArray(sourceValue) && Array.isArray(targetValue) ? [...targetValue, ...sourceValue] : typeof sourceValue === "object" && typeof targetValue === "object" ? { ...targetValue, ...sourceValue } : sourceValue;
@@ -73,8 +71,7 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     ([dep]) => dep.startsWith("@remix-run/")
   )?.[1];
   for (const key of MANAGED_PACKAGE_JSON_KEYS) {
-    if (ignoredKeys.has(key))
-      continue;
+    if (ignoredKeys.has(key)) continue;
     if (sourcePkgJson[key]) {
       targetPkgJson[key] = [
         .../* @__PURE__ */ new Set([
@@ -96,5 +93,16 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     options?.onResult?.(targetPkgJson) ?? targetPkgJson
   );
 }
+async function mergeTsConfig(sourceDir, targetDir) {
+  const sourceTsConfig = await readFile(joinPath(sourceDir, "tsconfig.json"));
+  const sourceTsTypes = sourceTsConfig.match(/"types": \[(.*?)\]/)?.[1];
+  if (sourceTsTypes) {
+    replaceFileContent(
+      joinPath(targetDir, "tsconfig.json"),
+      false,
+      (content) => content.replace(/"types":\s*\[[^\]]*\]/, `"types": [${sourceTsTypes}]`)
+    );
+  }
+}
 
-export { findFileWithExtension, mergePackageJson, replaceFileContent };
+export { findFileWithExtension, mergePackageJson, mergeTsConfig, replaceFileContent };

package/dist/lib/flags.js

@@ -3,6 +3,7 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
+import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
 const DEFAULT_APP_PORT = 3e3;
@@ -86,6 +87,15 @@ const commonFlags = {
       dependsOn: ["codegen"]
     })
   },
+  styling: {
+    styling: Flags.string({
+      description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
+        (item) => `\`${item}\``
+      ).join(", ")}.`,
+      choices: STYLING_CHOICES,
+      env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
+    })
+  },
   markets: {
     markets: Flags.string({
       description: `Sets the URL structure to support multiple markets. Must be one of: ${I18N_CHOICES.map(

package/dist/lib/get-oxygen-deployment-data.js

@@ -18,8 +18,7 @@ async function getOxygenDeploymentData({
     config,
     cliCommand
   });
-  if (!linkedStorefront)
-    return;
+  if (!linkedStorefront) return;
   config.storefront = linkedStorefront;
   const { storefront } = await getOxygenData(session, config.storefront.id);
   if (!storefront) {

package/dist/lib/graphiql-url.js

@@ -5,8 +5,7 @@ function getGraphiQLUrl({
   let url = `${host.endsWith("/") ? host.slice(0, -1) : host}/graphiql`;
   if (graphql) {
     let { query, variables } = graphql;
-    if (typeof variables !== "string")
-      variables = JSON.stringify(variables);
+    if (typeof variables !== "string") variables = JSON.stringify(variables);
     url += `?query=${encodeURIComponent(query)}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
     if (graphql.schema) {
       url += `&schema=${graphql.schema}`;

package/dist/lib/import-utils.js

@@ -5,7 +5,10 @@ import { joinPath, dirname } from '@shopify/cli-kit/node/path';
 
 const require2 = createRequire(import.meta.url);
 async function importVite(root) {
-  const vitePath = require2.resolve("vite", { paths: [root] });
+  const vitePath = require2.resolve(
+    "vite",
+    process.env.SHOPIFY_UNIT_TEST ? void 0 : { paths: [root] }
+  );
   const vitePackageJson = await findUpAndReadPackageJson(vitePath);
   const viteNodeIndexFile = vitePackageJson.content.exports?.["."].import.default;
   const viteNodePath = joinPath(
@@ -15,7 +18,10 @@ async function importVite(root) {
   return import(pathToFileURL(viteNodePath).href);
 }
 function importLocal(packageName, path) {
-  const realPath = require2.resolve(packageName, { paths: [path] });
+  const realPath = require2.resolve(
+    packageName,
+    process.env.SHOPIFY_UNIT_TEST ? void 0 : { paths: [path] }
+  );
   return import(pathToFileURL(realPath).href);
 }
 

package/dist/lib/log.js

@@ -2,6 +2,7 @@ import { renderFatalError, renderWarning, renderInfo } from '@shopify/cli-kit/no
 import { BugError } from '@shopify/cli-kit/node/error';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
+import ansiEscapes from 'ansi-escapes';
 import { getGraphiQLUrl } from './graphiql-url.js';
 import { importLocal } from './import-utils.js';
 
@@ -25,8 +26,7 @@ function debounceMessage(args, debounceFor) {
     const message = item?.message ?? item;
     return typeof message === "string" ? message : "";
   }).filter(Boolean).join("");
-  if (printedMessages.has(key))
-    return true;
+  if (printedMessages.has(key)) return true;
   printedMessages.add(key);
   if (debounceFor !== true) {
     setTimeout(() => printedMessages.delete(key), debounceFor ?? 1e3);
@@ -47,18 +47,15 @@ function injectLogReplacer(method, debouncer) {
         return;
       }
       const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher(args, acc.length))
-          acc.push(replacer);
+        if (matcher(args, acc.length)) acc.push(replacer);
         return acc;
       }, []);
-      if (replacers.length === 0)
-        return originalConsole[method](...args);
+      if (replacers.length === 0) return originalConsole[method](...args);
       const result = replacers.reduce(
         (resultArgs, replacer) => resultArgs && replacer(resultArgs),
         args
       );
-      if (result)
-        return originalConsole[method](...result);
+      if (result) return originalConsole[method](...result);
     };
   }
 }
@@ -192,61 +189,30 @@ function muteDevLogs({ workerReload } = {}) {
     return processStderrWrite.apply(process.stderr, args);
   };
 }
-const originalWrite = process.stdout.write;
-function muteAuthLogs({
-  onPressKey,
-  onKeyTimeout
-}) {
-  if (process.stdout.write === originalWrite) {
-    const write = originalWrite.bind(process.stdout);
-    process.stdout.write = (item, cb) => {
-      if (typeof item !== "string")
-        return write(item, cb);
-      const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher([item], acc.length))
-          acc.push(replacer);
-        return acc;
-      }, []);
-      if (replacers.length === 0)
-        return write(item, cb);
-      const result = replacers.reduce(
-        (resultArgs, replacer) => resultArgs && replacer(resultArgs),
-        [item]
-      );
-      if (result)
-        return write(result[0], cb);
-    };
-  }
+function enhanceAuthLogs(hideInitialLog = false) {
+  injectLogReplacer("log", warningDebouncer);
   addMessageReplacers(
     "auth",
     [
-      ([first]) => typeof first === "string" && first.includes("Auto-open"),
+      ([first]) => hideInitialLog && typeof first === "string" && first.includes("To run this command,"),
       ([first]) => {
-        const content = first.replace(" to Shopify Partners", "");
-        const link = content.match(/(https?:\/\/.*)Log in/)?.[1];
-        onKeyTimeout(link);
-        if (link)
-          return;
-        return [content];
+        return;
       }
     ],
     [
-      ([first]) => typeof first === "string" && first.includes("\u{1F449}"),
-      () => {
-        onPressKey();
-        return;
+      ([first]) => typeof first === "string" && first.includes("Open this link to start the auth process"),
+      ([first]) => {
+        return [first.replace("\u{1F449} ", "").replace(": ", ":\n")];
       }
     ],
     [
-      ([first]) => typeof first === "string" && (first.includes("Shopify Partners") || first.includes("Logged in")),
+      ([first]) => typeof first === "string" && first.includes("Logged in."),
       () => {
+        process.stdout.write(ansiEscapes.eraseLines(hideInitialLog ? 4 : 5));
         return;
       }
     ]
   );
-  return () => {
-    process.stdout.write = originalWrite;
-  };
 }
 function enhanceH2Logs(options) {
   injectLogReplacer("error");
@@ -266,8 +232,7 @@ function enhanceH2Logs(options) {
         stringArg += "\nRun `h2 link` to link your store.";
       }
       const [, type, scope, message] = stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
-      if (!type || !scope || !message)
-        return args;
+      if (!type || !scope || !message) return args;
       const headline = `In Hydrogen's \`${scope.trim()}\`:
 
 `;
@@ -281,8 +246,7 @@ function enhanceH2Logs(options) {
           colors.magentaBright(`\`${options.cliCommand ?? "$1"} $2\``)
         );
       }
-      if (hasLinks || hasCommands)
-        lines.pop();
+      if (hasLinks || hasCommands) lines.pop();
       if (type === "error" || errorObject) {
         let tryMessage = hasLinks || hasCommands ? lastLine : void 0;
         let stack = errorObject?.stack;
@@ -394,4 +358,4 @@ function isH2Verbose() {
   return !!(process.env.DEBUG === "*" || process.env.DEBUG?.includes("h2:*"));
 }
 
-export { addMessageReplacers, createRemixLogger, enhanceH2Logs, isH2Verbose, muteAuthLogs, muteDevLogs, muteRemixLogs, resetAllLogs, setH2OVerbose, warnOnce };
+export { addMessageReplacers, createRemixLogger, enhanceAuthLogs, enhanceH2Logs, isH2Verbose, muteDevLogs, muteRemixLogs, resetAllLogs, setH2OVerbose, warnOnce };

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

@@ -18,8 +18,7 @@ function logRequestLine({
 }) {
   try {
     const url = new URL(request.url);
-    if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico")
-      return;
+    if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico") return;
     const isDataRequest = url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");
     let info = "";

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

@@ -42,8 +42,7 @@ async function startNodeServer({
     }
   };
   if (debug) {
-    if (!inspectorPort)
-      inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
+    if (!inspectorPort) inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
     (await import('node:inspector')).open(inspectorPort);
   }
   const readWorkerFile = () => readFile(buildPathWorkerFile).catch((error) => {

package/dist/lib/missing-routes.js

@@ -51,8 +51,7 @@ function findMissingRoutes(config, requiredRoutes = REQUIRED_ROUTES) {
           const parentRoute = userRoutes.find(
             (r) => r.id === currentRoute.parentId
           );
-          if (!parentRoute)
-            break;
+          if (!parentRoute) break;
           currentRoute.path = `${parentRoute.path}/${currentRoute.path}`;
           currentRoute.parentId = parentRoute.parentId;
         }