@shopify/cli-hydrogen 8.2.0 → 8.4.0

package/dist/lib/codegen.js

@@ -70,6 +70,7 @@ function spawnCodegenProcess({
     if (/`punycode`/.test(message)) return;
     if (/\.body\[\d\]/.test(message)) return;
     if (/console\.time(End)?\(\)/.test(message)) return;
+    if (/─ (warning|info|success) ───/.test(message)) return;
     console.log("");
     renderWarning({ headline: message, body: details });
   });
@@ -168,53 +169,83 @@ 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;
   const schemaFilename = basename(schemaFilepath);
@@ -223,13 +254,17 @@ function findGqlProject(schemaFilepath, gqlConfig) {
   );
 }
 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"
+          );
         }
       }
     }
@@ -246,4 +281,4 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
   }
 }
 
-export { codegen, spawnCodegenProcess };
+export { codegen, generateDefaultConfig, spawnCodegenProcess };

package/dist/lib/dev-shared.js

@@ -27,22 +27,24 @@ function notifyIssueWithTunnelAndMockShop(cliCommand) {
     ]
   });
 }
-function getDevConfigInBackground(root, customerAccountPushFlag) {
-  return getLocalVariables(root).then(async ({ variables: localVariables }) => {
-    const customerAccountPush = customerAccountPushFlag && !isMockShop(localVariables);
-    if (customerAccountPush) {
-      await getStorefrontId(root);
+function getDevConfigInBackground(root, customerAccountPushFlag, envFile) {
+  return getLocalVariables(root, envFile).then(
+    async ({ variables: localVariables }) => {
+      const customerAccountPush = customerAccountPushFlag && !isMockShop(localVariables);
+      if (customerAccountPush) {
+        await getStorefrontId(root);
+      }
+      const { shop, storefront } = await getConfig(root);
+      const storefrontId = storefront?.id;
+      return {
+        storefrontId,
+        customerAccountPush,
+        fetchRemote: !!shop && !!storefrontId,
+        localVariables,
+        storefrontTitle: storefront?.title
+      };
     }
-    const { shop, storefront } = await getConfig(root);
-    const storefrontId = storefront?.id;
-    return {
-      storefrontId,
-      customerAccountPush,
-      fetchRemote: !!shop && !!storefrontId,
-      localVariables,
-      storefrontTitle: storefront?.title
-    };
-  });
+  );
 }
 const TUNNEL_DOMAIN = Object.freeze({
   ORIGINAL: ".trycloudflare.com",

package/dist/lib/environment-variables.js

@@ -18,6 +18,7 @@ async function getAllEnvironmentVariables({
   root,
   envHandle,
   envBranch,
+  envFile,
   fetchRemote = true,
   localVariables: inlineLocalVariables
 }) {
@@ -33,7 +34,7 @@ async function getAllEnvironmentVariables({
       }
     ) : createEmptyRemoteVars(),
     // Get local vars
-    inlineLocalVariables ? { variables: inlineLocalVariables } : getLocalVariables(root)
+    inlineLocalVariables ? { variables: inlineLocalVariables } : getLocalVariables(root, envFile)
   ]);
   const remoteSecretKeys = Object.keys(remoteSecrets);
   const remotePublicKeys = Object.keys(remoteVariables);
@@ -44,7 +45,7 @@ async function getAllEnvironmentVariables({
       outputInfo(
         linesToColumns([
           ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
-          ...localKeys.map((key) => [key, "from local .env"]),
+          ...localKeys.map((key) => [key, `from local ${envFile}`]),
           // Ensure secret variables always get added to the bottom of the list
           ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
             colors.dim(key),
@@ -81,8 +82,8 @@ async function getRemoteVariables(root, envHandle, envBranch) {
   }
   return { remoteVariables, remoteSecrets };
 }
-async function getLocalVariables(root) {
-  const dotEnvPath = resolvePath(root, ".env");
+async function getLocalVariables(root, envFile) {
+  const dotEnvPath = resolvePath(root, envFile);
   return await fileExists(dotEnvPath).then(
     (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
   );

package/dist/lib/flags.js

@@ -68,6 +68,13 @@ const commonFlags = {
       }
     })
   },
+  envFile: {
+    "env-file": Flags.string({
+      description: "Path to an environment file to override existing environment variables. Defaults to the '.env' located in your project path `--path`.",
+      required: false,
+      default: ".env"
+    })
+  },
   sourcemap: {
     sourcemap: Flags.boolean({
       description: "Controls whether sourcemaps are generated. Default to `true`. Deactivate `--no-sourcemaps`.",

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';
 
@@ -188,56 +189,24 @@ 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];
-      }
-    ],
-    [
-      ([first]) => typeof first === "string" && first.includes("\u{1F449}"),
-      () => {
-        onPressKey();
         return;
       }
     ],
     [
-      ([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 ? 5 : 6));
         return;
       }
     ]
   );
-  return () => {
-    process.stdout.write = originalWrite;
-  };
 }
 function enhanceH2Logs(options) {
   injectLogReplacer("error");
@@ -383,4 +352,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/onboarding/common.js

@@ -19,6 +19,7 @@ import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setup
 import { execAsync } from '../process.js';
 import { getStorefronts } from '../graphql/admin/link-storefront.js';
 import { isHydrogenMonorepo, getSkeletonSourceDir, getRepoNodeModules } from '../build.js';
+import { enhanceAuthLogs } from '../log.js';
 
 const LANGUAGES = {
   js: "JavaScript",
@@ -110,6 +111,7 @@ async function handleCliShortcut(controller, cliCommand, flagShortcut) {
   };
 }
 async function handleStorefrontLink(controller) {
+  enhanceAuthLogs(true);
   const { session, config } = await login();
   renderLoginSuccess(config);
   const storefronts = await getStorefronts(session);

package/dist/lib/onboarding/local.js

@@ -47,7 +47,7 @@ async function setupLocalStarterTemplate(options, controller) {
     {
       force: true,
       recursive: true,
-      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts)/i.test(
+      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts|\.shopify\/)/i.test(
         relativePath(templateDir, filepath)
       )
     }
@@ -87,14 +87,16 @@ async function setupLocalStarterTemplate(options, controller) {
 # or \`${cliCommand} env pull\` to populate this file.`;
   backgroundWorkPromise = backgroundWorkPromise.then(() => {
     const promises = [
-      // Add project name to package.json
       replaceFileContent(
         joinPath(project.directory, "package.json"),
         false,
-        (content) => content.replace(
-          /"name": "[^"]+"/,
-          `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
-        )
+        (content) => {
+          content = maybeInjectCliHydrogen(content);
+          return content.replace(
+            /"name": "[^"]+"/,
+            `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
+          );
+        }
       )
     ];
     let storefrontToLink;
@@ -223,7 +225,7 @@ async function setupLocalStarterTemplate(options, controller) {
     backgroundWorkPromise = backgroundWorkPromise.then(async () => {
       await setupI18n({
         rootDirectory: project.directory,
-        serverEntryPoint: language === "ts" ? "server.ts" : "server.js"
+        contextCreate: language === "ts" ? "app/lib/context.ts" : "app/lib/context.js"
       }).then(
         () => options.git ? commitAll(
           project.directory,
@@ -260,5 +262,18 @@ async function setupLocalStarterTemplate(options, controller) {
     ...setupSummary
   };
 }
+function maybeInjectCliHydrogen(pkgJsonContent) {
+  const hydrogenDep = pkgJsonContent.match(
+    /^\s+"@shopify\/hydrogen":\s+"[^"]+",\n/m
+  )?.[0];
+  if (hydrogenDep && /"0\.0\.0-\w+-/.test(hydrogenDep)) {
+    const cliHydrogenDep = hydrogenDep.replace("hydrogen", "cli-hydrogen");
+    pkgJsonContent = pkgJsonContent.replace(
+      hydrogenDep,
+      cliHydrogenDep + hydrogenDep
+    );
+  }
+  return pkgJsonContent;
+}
 
 export { setupLocalStarterTemplate };

package/dist/lib/remix-config.js

@@ -7,7 +7,7 @@ import { fileExists } from '@shopify/cli-kit/node/fs';
 import { muteRemixLogs } from './log.js';
 import { REQUIRED_REMIX_VERSION } from './remix-version-check.js';
 import { findFileWithExtension } from './file.js';
-import { getViteConfig } from './vite-config.js';
+import { isViteProject, getViteConfig } from './vite-config.js';
 import { importLocal } from './import-utils.js';
 import { isHydrogenMonorepo, hydrogenPackagesPath } from './build.js';
 
@@ -15,6 +15,11 @@ async function hasRemixConfigFile(root) {
   const result = await findFileWithExtension(root, "remix.config");
   return !!result.filepath;
 }
+async function isClassicProject(root) {
+  const isVite = await isViteProject(root);
+  if (isVite) return false;
+  return hasRemixConfigFile(root);
+}
 const BUILD_DIR = "dist";
 const CLIENT_SUBDIR = "client";
 const WORKER_SUBDIR = "worker";
@@ -47,7 +52,7 @@ function getRawRemixConfig(root) {
   });
 }
 async function getRemixConfig(root, mode = process.env.NODE_ENV) {
-  if (!await hasRemixConfigFile(root)) {
+  if (await isViteProject(root)) {
     return (await getViteConfig(root)).remixConfig;
   }
   await muteRemixLogs(root);
@@ -160,4 +165,4 @@ async function assertEntryFileExists(root, fileRelative) {
   }
 }
 
-export { assertOxygenChecks, getProjectPaths, getRawRemixConfig, getRemixConfig, handleRemixImportFail, hasRemixConfigFile };
+export { assertOxygenChecks, getProjectPaths, getRawRemixConfig, getRemixConfig, handleRemixImportFail, hasRemixConfigFile, isClassicProject };

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

@@ -14,8 +14,8 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
     }
     const astGrep = await importLangAstGrep(astType);
     const root = astGrep.parse(content).root();
-    const importNodes = root.findAll({ rule: { kind: "import_statement" } });
-    const lastImportNode = importNodes.findLast((node) => node.text().includes(".css")) || importNodes.pop();
+    const importNodes = root.findAll({ rule: { kind: "import_statement" } }).reverse();
+    const lastImportNode = importNodes.find((node) => node.text().includes(".css")) || importNodes.shift();
     const linksReturnNode = root.find({
       utils: {
         "has-links-id": {

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

@@ -1,7 +1,7 @@
 import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
-import { fileExists, readFile } from '@shopify/cli-kit/node/fs';
+import { fileExists } from '@shopify/cli-kit/node/fs';
 import { getCodeFormatOptions } from '../../format-code.js';
-import { replaceServerI18n, replaceRemixEnv } from './replacers.js';
+import { replaceContextI18n } from './replacers.js';
 import { getAssetsDir } from '../../build.js';
 
 const SETUP_I18N_STRATEGIES = [
@@ -20,11 +20,8 @@ async function setupI18nStrategy(strategy, options) {
   if (!await fileExists(templatePath)) {
     throw new Error("Unknown strategy");
   }
-  const template = await readFile(templatePath);
   const formatConfig = await getCodeFormatOptions(options.rootDirectory);
-  const isJs = options.serverEntryPoint?.endsWith(".js") ?? false;
-  await replaceServerI18n(options, formatConfig, template, isJs);
-  await replaceRemixEnv(options, formatConfig, template);
+  await replaceContextI18n(options, formatConfig, templatePath);
 }
 async function renderI18nPrompt(options) {
   const i18nStrategies = Object.entries({