@shopify/cli-hydrogen 8.2.0 → 8.3.0

package/dist/assets/hydrogen/starter/.graphqlrc.ts

@@ -0,0 +1,27 @@
+import type {IGraphQLConfig} from 'graphql-config';
+import {getSchema} from '@shopify/hydrogen-codegen';
+
+/**
+ * GraphQL Config
+ * @see https://the-guild.dev/graphql/config/docs/user/usage
+ * @type {IGraphQLConfig}
+ */
+export default {
+  projects: {
+    default: {
+      schema: getSchema('storefront'),
+      documents: [
+        './*.{ts,tsx,js,jsx}',
+        './app/**/*.{ts,tsx,js,jsx}',
+        '!./app/graphql/**/*.{ts,tsx,js,jsx}',
+      ],
+    },
+
+    customer: {
+      schema: getSchema('customer-account'),
+      documents: ['./app/graphql/customer-account/*.{ts,tsx,js,jsx}'],
+    },
+
+    // Add your own GraphQL projects here for CMS, Shopify Admin API, etc.
+  },
+} as IGraphQLConfig;

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,14 @@
 # skeleton
 
+## 2024.7.2
+
+### Patch Changes
+
+- Changed the GraphQL config file format to be TS/JS instead of YAML. ([#2311](https://github.com/Shopify/hydrogen/pull/2311)) by [@frandiox](https://github.com/frandiox)
+
+- Updated dependencies [[`18ea233c`](https://github.com/Shopify/hydrogen/commit/18ea233cd327bf3001ec9b107ad66b05c9c78584), [`8b2322d7`](https://github.com/Shopify/hydrogen/commit/8b2322d783078298cd5d20ec5f3b1faf99b7895b)]:
+  - @shopify/cli-hydrogen@8.3.0
+
 ## 2024.7.1
 
 ### Patch Changes

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2024.7.1",
+  "version": "2024.7.2",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -28,7 +28,7 @@
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.10.1",
     "@remix-run/eslint-config": "^2.10.1",
-    "@shopify/cli": "^3.63.2",
+    "@shopify/cli": "^3.64.0",
     "@shopify/hydrogen-codegen": "^0.3.1",
     "@shopify/mini-oxygen": "^3.0.4",
     "@shopify/oxygen-workers-types": "^4.1.2",

package/dist/commands/hydrogen/login.js

@@ -1,6 +1,8 @@
 import Command from '@shopify/cli-kit/node/base-command';
+import { outputNewline } from '@shopify/cli-kit/node/output';
 import { commonFlags } from '../../lib/flags.js';
 import { login, renderLoginSuccess } from '../../lib/auth.js';
+import { enhanceAuthLogs } from '../../lib/log.js';
 
 class Login extends Command {
   static descriptionWithMarkdown = "Logs in to the specified shop and saves the shop domain to the project.";
@@ -18,6 +20,8 @@ async function runLogin({
   path: root = process.cwd(),
   shop: shopFlag
 }) {
+  outputNewline();
+  enhanceAuthLogs(true);
   const { config } = await login(root, shopFlag ?? true);
   renderLoginSuccess(config);
 }

package/dist/commands/hydrogen/logout.js

@@ -1,5 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputNewline } from '@shopify/cli-kit/node/output';
 import { commonFlags } from '../../lib/flags.js';
 import { logout } from '../../lib/auth.js';
 
@@ -15,6 +16,7 @@ class Logout extends Command {
   }
 }
 async function runLogout({ path: root = process.cwd() }) {
+  outputNewline();
   await logout(root);
   renderSuccess({ body: "You are logged out from Shopify." });
 }

package/dist/hooks/init.js

@@ -53,9 +53,12 @@ function commandNeedsVM(id = "", argv = []) {
 function isHydrogenProject(projectPath) {
   try {
     const require2 = createRequire(import.meta.url);
-    const { dependencies } = require2(joinPath(projectPath, "package.json"));
-    return !!dependencies["@shopify/hydrogen"] || // Diff examples only have this package as a dependency
-    !!dependencies["@shopify/cli-hydrogen"];
+    const { dependencies, scripts } = require2(joinPath(
+      projectPath,
+      "package.json"
+    ));
+    return !!dependencies?.["@shopify/hydrogen"] || // Diff examples don't have dependencies:
+    !!scripts?.dev?.includes("--diff");
   } catch {
     return false;
   }

package/dist/lib/auth.js

@@ -1,20 +1,17 @@
-import { renderSelectPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { renderSelectPrompt, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { logout as logout$1, ensureAuthenticatedBusinessPlatform, ensureAuthenticatedAdmin } from '@shopify/cli-kit/node/session';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
-import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
-import colors from '@shopify/cli-kit/node/colors';
-import ansiEscapes from 'ansi-escapes';
 import { resetConfig, getConfig, setUserAccount } from './shopify-config.js';
 import { getUserAccount } from './graphql/business-platform/user-account.js';
-import { muteAuthLogs } from './log.js';
-import { deferPromise } from './defer.js';
+import { enhanceAuthLogs } from './log.js';
 
 async function logout(root) {
   await logout$1();
   await resetConfig(root);
 }
 async function login(root, shop) {
+  enhanceAuthLogs(false);
   const forcePrompt = shop === true;
   const existingConfig = root ? await getConfig(root) : {};
   let { email, shopName } = existingConfig;
@@ -22,7 +19,6 @@ async function login(root, shop) {
     shop = existingConfig.shop;
   }
   if (shop) shop = await normalizeStoreFqdn(shop);
-  const hideLoginInfo = showLoginInfo();
   if (!shop || !shopName || !email || forcePrompt || shop !== existingConfig.shop) {
     const token = await ensureAuthenticatedBusinessPlatform().catch(() => {
       throw new AbortError(
@@ -30,7 +26,6 @@ async function login(root, shop) {
       );
     });
     const userAccount = await getUserAccount(token);
-    await hideLoginInfo();
     const preselected = !forcePrompt && shop && userAccount.activeShops.find(({ fqdn }) => shop === fqdn);
     const selected = preselected || await renderSelectPrompt({
       message: "Select a shop to log in to",
@@ -48,64 +43,9 @@ async function login(root, shop) {
       `Ensure the shop that you specified is correct (you are trying to use: ${shop})`
     ]);
   });
-  await hideLoginInfo();
   const config = root ? await setUserAccount(root, { shop, shopName, email }) : { shop, shopName, email };
   return { session, config };
 }
-function showLoginInfo() {
-  const deferred = deferPromise();
-  console.log("");
-  let hasLoggedTimeout = false;
-  let hasLoggedPressKey = false;
-  const restoreLogs = muteAuthLogs({
-    onKeyTimeout: (link) => {
-      if (link) {
-        hasLoggedTimeout = true;
-        process.stdout.write(ansiEscapes.eraseLines(9));
-        try {
-          const secureLink = link.replace("http://", "https://");
-          const url = new URL(secureLink);
-          const label = url.origin + "/..." + url.search.slice(-14);
-          renderInfo({
-            headline: "Log in to Shopify",
-            body: outputContent`Timed out. Click to open your browser:\n${outputToken.link(
-              colors.white(label),
-              secureLink
-            )}`.value
-          });
-        } catch {
-        }
-      }
-    },
-    onPressKey: () => {
-      hasLoggedPressKey = true;
-      renderInfo({
-        headline: "Log in to Shopify",
-        body: "Press any key to login with your default browser"
-      });
-      process.stdin.once("data", () => {
-        renderTasks([
-          {
-            title: "Waiting for Shopify authentication",
-            task: async () => {
-              await deferred.promise;
-            }
-          }
-        ]);
-      });
-    }
-  });
-  deferred.promise.then(() => {
-    restoreLogs();
-    if (hasLoggedPressKey) {
-      process.stdout.write(ansiEscapes.eraseLines(hasLoggedTimeout ? 11 : 10));
-    }
-  });
-  return async () => {
-    deferred.resolve();
-    await new Promise((resolve) => setTimeout(resolve, 0));
-  };
-}
 function renderLoginSuccess(config) {
   renderSuccess({
     headline: "Shopify authentication complete",

package/dist/lib/codegen.js

@@ -168,53 +168,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 +253,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 +280,4 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
   }
 }
 
-export { codegen, spawnCodegenProcess };
+export { codegen, generateDefaultConfig, spawnCodegenProcess };

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,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");
@@ -383,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/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/oclif.manifest.json

@@ -1714,5 +1714,5 @@
       ]
     }
   },
-  "version": "8.2.0"
+  "version": "8.3.0"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "8.2.0",
+  "version": "8.3.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@oclif/core": "3.26.5",
-    "@shopify/cli-kit": "3.63.2",
+    "@shopify/cli-kit": "3.64.0",
     "@shopify/oxygen-cli": "4.4.9",
-    "@shopify/plugin-cloudflare": "3.63.2",
+    "@shopify/plugin-cloudflare": "3.64.0",
     "ansi-escapes": "^6.2.0",
     "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",

package/dist/assets/hydrogen/starter/.graphqlrc.yml

@@ -1,12 +0,0 @@
-projects:
-  default:
-    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
-    documents:
-      - '!*.d.ts'
-      - '*.{ts,tsx,js,jsx}'
-      - 'app/**/*.{ts,tsx,js,jsx}'
-      - '!app/graphql/**/*.{ts,tsx,js,jsx}'
-  customer-account:
-    schema: 'node_modules/@shopify/hydrogen/customer-account.schema.json'
-    documents:
-      - 'app/graphql/customer-account/**/*.{ts,tsx,js,jsx}'