@shopify/cli-hydrogen 4.1.1 → 4.2.0

package/dist/generator-templates/routes/[robots.txt].tsx

@@ -3,19 +3,28 @@ import {
   type ErrorBoundaryComponent,
 } from '@shopify/remix-oxygen';
 import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';
+import type {Shop} from '@shopify/hydrogen/storefront-api-types';
+import {parseGid} from '@shopify/hydrogen';
 
-export const loader = ({request}: LoaderArgs) => {
+export const loader = async ({request, context}: LoaderArgs) => {
   const url = new URL(request.url);
 
-  return new Response(robotsTxtData({url: url.origin}), {
-    status: 200,
-    headers: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'content-type': 'text/plain',
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'cache-control': `max-age=${60 * 60 * 24}`,
+  const {shop} = await context.storefront.query<{shop: Pick<Shop, 'id'>}>(
+    SHOP_QUERY,
+  );
+
+  return new Response(
+    robotsTxtData({url: url.origin, shopId: parseGid(shop.id).id}),
+    {
+      status: 200,
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'text/plain',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Cache-Control': `max-age=${60 * 60 * 24}`,
+      },
     },
-  });
+  );
 };
 
 export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
@@ -48,28 +57,111 @@ export function ErrorBoundary() {
   }
 }
 
-function robotsTxtData({url}: {url: string}) {
+function robotsTxtData({url, shopId}: {shopId?: string; url?: string}) {
   const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
 
   return `
 User-agent: *
-Disallow: /admin
-Disallow: /cart
-Disallow: /orders
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /account
-${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
+${generalDisallowRules({sitemapUrl, shopId})}
 
 # Google adsbot ignores robots.txt unless specifically named!
 User-agent: adsbot-google
 Disallow: /checkouts/
 Disallow: /checkout
 Disallow: /carts
-Disallow: /orders
+Disallow: /orders${
+    shopId
+      ? `
+Disallow: /${shopId}/checkouts
+Disallow: /${shopId}/orders`
+      : ''
+  }
+Disallow: /*?*oseid=*
+Disallow: /*preview_theme_id*
+Disallow: /*preview_script_id*
+
+User-agent: Nutch
+Disallow: /
+
+User-agent: AhrefsBot
+Crawl-delay: 10
+${generalDisallowRules({sitemapUrl, shopId})}
+
+User-agent: AhrefsSiteAudit
+Crawl-delay: 10
+${generalDisallowRules({sitemapUrl, shopId})}
+
+User-agent: MJ12bot
+Crawl-Delay: 10
 
 User-agent: Pinterest
 Crawl-delay: 1
 `.trim();
 }
+
+/**
+ *
+ * This function generates disallow rules that generally follow what Shopify's Online Store has as defaults for their robots.txt
+ *
+ */
+function generalDisallowRules({
+  shopId,
+  sitemapUrl,
+}: {
+  shopId?: string;
+  sitemapUrl?: string;
+}) {
+  return `Disallow: /admin
+Disallow: /cart
+Disallow: /orders
+Disallow: /checkouts/
+Disallow: /checkout${
+    shopId
+      ? `
+Disallow: /${shopId}/checkouts
+Disallow: /${shopId}/orders`
+      : ''
+  }
+Disallow: /carts
+Disallow: /account
+Disallow: /collections/*sort_by*
+Disallow: /*/collections/*sort_by*
+Disallow: /collections/*+*
+Disallow: /collections/*%2B*
+Disallow: /collections/*%2b*
+Disallow: /*/collections/*+*
+Disallow: /*/collections/*%2B*
+Disallow: /*/collections/*%2b*
+Disallow: */collections/*filter*&*filter*
+Disallow: /blogs/*+*
+Disallow: /blogs/*%2B*
+Disallow: /blogs/*%2b*
+Disallow: /*/blogs/*+*
+Disallow: /*/blogs/*%2B*
+Disallow: /*/blogs/*%2b*
+Disallow: /*?*oseid=*
+Disallow: /*preview_theme_id*
+Disallow: /*preview_script_id*
+Disallow: /policies/
+Disallow: /*/*?*ls=*&ls=*
+Disallow: /*/*?*ls%3D*%3Fls%3D*
+Disallow: /*/*?*ls%3d*%3fls%3d*
+Disallow: /search
+Allow: /search/
+Disallow: /search/?*
+Disallow: /apple-app-site-association
+Disallow: /.well-known/shopify/monorail${
+    sitemapUrl
+      ? `
+Sitemap: ${sitemapUrl}`
+      : ''
+  }`;
+}
+
+const SHOP_QUERY = `#graphql
+  query robots_shop_query {
+    shop {
+      id
+    }
+  }
+`;

package/dist/generator-templates/routes/collections/index.tsx

@@ -0,0 +1,102 @@
+import {
+  useLoaderData,
+  Link,
+  useRouteError,
+  isRouteErrorResponse,
+  useCatch,
+} from '@remix-run/react';
+import {
+  json,
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import type {CollectionConnection} from '@shopify/hydrogen/storefront-api-types';
+import {Image} from '@shopify/hydrogen';
+
+export async function loader({context}: LoaderArgs) {
+  const {collectionConnection} = await context.storefront.query<{
+    collectionConnection: CollectionConnection;
+  }>(COLLECTIONS_QUERY, {
+    variables: {
+      country: context.storefront.i18n?.country,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  return json({collectionConnection});
+}
+
+export default function Collections() {
+  const {collectionConnection} = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      {collectionConnection.nodes.map((collection, collectionIndex) => {
+        return (
+          <Link key={collection.id} to={`/collections/${collection.handle}`}>
+            <h3>{collection.title}</h3>
+            {collection.image && (
+              <Image
+                data={collection.image}
+                loading={collectionIndex === 0 ? 'eager' : undefined}
+              />
+            )}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
+  console.error(error);
+
+  return <div>There was an error.</div>;
+};
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  console.error(caught);
+
+  return (
+    <div>
+      There was an error. Status: {caught.status}. Message:{' '}
+      {caught.data?.message}
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    console.error(error.status, error.statusText, error.data);
+    return <div>Route Error</div>;
+  } else {
+    console.error((error as Error).message);
+    return <div>Thrown Error</div>;
+  }
+}
+
+const COLLECTIONS_QUERY = `#graphql
+  query collection_index(
+    $country: CountryCode
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language)
+  {
+    collectionConnection: collections(first: 250) {
+      nodes {
+        id
+        title
+        handle
+        image {
+          id
+          url
+          altText
+          width
+          height
+        }
+      }
+    }
+  }
+`;

package/dist/lib/admin-session.d.ts

@@ -0,0 +1,5 @@
+import { AdminSession } from '@shopify/cli-kit/node/session';
+
+declare function getAdminSession(shop: string): Promise<AdminSession>;
+
+export { getAdminSession };

package/dist/lib/admin-session.js

@@ -0,0 +1,16 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { ensureAuthenticatedAdmin } from '@shopify/cli-kit/node/session';
+
+async function getAdminSession(shop) {
+  let adminSession;
+  try {
+    adminSession = await ensureAuthenticatedAdmin(shop);
+  } catch {
+    throw new AbortError("Unable to authenticate with Shopify", void 0, [
+      `Ensure the shop that you specified is correct (you are trying to use: ${shop})`
+    ]);
+  }
+  return adminSession;
+}
+
+export { getAdminSession };

package/dist/lib/admin-session.test.d.ts

@@ -0,0 +1 @@
+

package/dist/lib/admin-session.test.js

@@ -0,0 +1,27 @@
+import { describe, vi, afterEach, it, expect } from 'vitest';
+import { ensureAuthenticatedAdmin } from '@shopify/cli-kit/node/session';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { getAdminSession } from './admin-session.js';
+
+describe("list", () => {
+  vi.mock("@shopify/cli-kit/node/session");
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("returns the admin session", async () => {
+    vi.mocked(ensureAuthenticatedAdmin).mockResolvedValue(ADMIN_SESSION);
+    const adminSession = await getAdminSession("my-shop");
+    expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith("my-shop");
+    expect(adminSession).toStrictEqual(ADMIN_SESSION);
+  });
+  describe("when it fails to authenticate", () => {
+    it("throws an error", async () => {
+      vi.mocked(ensureAuthenticatedAdmin).mockRejectedValue({});
+      await expect(getAdminSession("my-shop")).rejects.toThrow(AbortError);
+    });
+  });
+});

package/dist/lib/admin-urls.d.ts

@@ -0,0 +1,8 @@
+import { AdminSession } from '@shopify/cli-kit/node/session';
+
+declare function newHydrogenStorefrontUrl(session: AdminSession): string;
+declare function hydrogenStorefrontsUrl(session: AdminSession): string;
+declare function hydrogenStorefrontUrl(session: AdminSession, storefrontId: string): string;
+declare function hydrogenStorefrontSettingsUrl(session: AdminSession, storefrontId: string): string;
+
+export { hydrogenStorefrontSettingsUrl, hydrogenStorefrontUrl, hydrogenStorefrontsUrl, newHydrogenStorefrontUrl };

package/dist/lib/admin-urls.js

@@ -0,0 +1,18 @@
+function newHydrogenStorefrontUrl(session) {
+  const { storeFqdn } = session;
+  return `https://${storeFqdn}/admin/custom_storefronts/new`;
+}
+function hydrogenStorefrontsUrl(session) {
+  const { storeFqdn } = session;
+  return `https://${storeFqdn}/admin/custom_storefronts`;
+}
+function hydrogenStorefrontUrl(session, storefrontId) {
+  const { storeFqdn } = session;
+  return `https://${storeFqdn}/admin/custom_storefronts/${storefrontId}`;
+}
+function hydrogenStorefrontSettingsUrl(session, storefrontId) {
+  const { storeFqdn } = session;
+  return `https://${storeFqdn}/admin/custom_storefronts/${storefrontId}/settings`;
+}
+
+export { hydrogenStorefrontSettingsUrl, hydrogenStorefrontUrl, hydrogenStorefrontsUrl, newHydrogenStorefrontUrl };

package/dist/lib/codegen.d.ts

@@ -0,0 +1,25 @@
+import * as child_process from 'child_process';
+import * as stream from 'stream';
+export { patchGqlPluck } from '@shopify/hydrogen-codegen';
+
+declare function normalizeCodegenError(errorMessage: string, rootDirectory?: string): {
+    message: string;
+    details: string;
+};
+/**
+ * Spawns a child process to run GraphlQL CLI Codegen.
+ * Running on a separate process splits work from this processor
+ * and also allows us to filter out logs.
+ */
+declare function spawnCodegenProcess({ rootDirectory, appDirectory, configFilePath, }: CodegenOptions): child_process.ChildProcessByStdio<null, null, stream.Readable>;
+type ProjectDirs = {
+    rootDirectory: string;
+    appDirectory: string;
+};
+type CodegenOptions = ProjectDirs & {
+    configFilePath?: string;
+    watch?: boolean;
+};
+declare function generateTypes({ configFilePath, watch, ...dirs }: CodegenOptions): Promise<string[]>;
+
+export { generateTypes, normalizeCodegenError, spawnCodegenProcess };

package/dist/lib/codegen.js

@@ -0,0 +1,128 @@
+import { loadCodegenConfig, generate } from '@graphql-codegen/cli';
+import { patchGqlPluck, pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';
+export { patchGqlPluck } from '@shopify/hydrogen-codegen';
+import { resolveFormatConfig, format } from './transpile-ts.js';
+import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const nodePath = process.argv[1];
+const modulePath = fileURLToPath(import.meta.url);
+const isStandaloneProcess = nodePath === modulePath;
+if (isStandaloneProcess) {
+  patchGqlPluck().then(
+    () => generateTypes({
+      rootDirectory: process.argv[2],
+      appDirectory: process.argv[3],
+      configFilePath: process.argv[4],
+      watch: true
+    })
+  );
+}
+function normalizeCodegenError(errorMessage, rootDirectory) {
+  const [first = "", ...rest] = errorMessage.replaceAll("[FAILED]", "").replace(/\s{2,}/g, "\n").replace(/\n,\n/, "\n").trim().split("\n");
+  const message = "[Codegen] " + first;
+  let details = rest.join("\n");
+  if (rootDirectory) {
+    const forwardSlashRootDir = rootDirectory.replaceAll("\\", "/") + "/";
+    details = details.replaceAll(forwardSlashRootDir, "");
+  }
+  return { message, details };
+}
+function spawnCodegenProcess({
+  rootDirectory,
+  appDirectory,
+  configFilePath
+}) {
+  const child = spawn(
+    "node",
+    [
+      fileURLToPath(import.meta.url),
+      rootDirectory,
+      appDirectory,
+      configFilePath ?? ""
+    ],
+    { stdio: ["inherit", "ignore", "pipe"] }
+  );
+  child.stderr.on("data", (data) => {
+    const dataString = typeof data === "string" ? data : data?.toString?.("utf8") ?? "";
+    if (!dataString)
+      return;
+    const { message, details } = normalizeCodegenError(dataString, rootDirectory);
+    console.log("");
+    renderWarning({ headline: message, body: details });
+  });
+  child.on("close", (code) => {
+    if (code && code > 0) {
+      renderFatalError({
+        type: 0,
+        name: "CodegenError",
+        message: `Codegen process exited with code ${code}`,
+        tryMessage: "Try restarting the dev server."
+      });
+      process.exit(code);
+    }
+  });
+  return child;
+}
+async function generateTypes({
+  configFilePath,
+  watch,
+  ...dirs
+}) {
+  const { config: codegenConfig } = await loadCodegenConfig({
+    configFilePath,
+    searchPlaces: [dirs.rootDirectory]
+  }) || generateDefaultConfig(dirs);
+  await addHooksToHydrogenOptions(codegenConfig, dirs);
+  await generate(
+    {
+      ...codegenConfig,
+      cwd: dirs.rootDirectory,
+      watch,
+      silent: !watch
+    },
+    true
+  );
+  return Object.keys(codegenConfig.generates);
+}
+function generateDefaultConfig({
+  rootDirectory,
+  appDirectory
+}) {
+  const tsDefaultGlob = "*!(*.d).{ts,tsx}";
+  const appDirRelative = relativePath(rootDirectory, appDirectory);
+  return {
+    filepath: "virtual:codegen",
+    config: {
+      overwrite: true,
+      pluckConfig,
+      generates: {
+        ["storefrontapi.generated.d.ts"]: {
+          preset,
+          schema,
+          documents: [
+            tsDefaultGlob,
+            joinPath(appDirRelative, "**", tsDefaultGlob)
+          ]
+        }
+      }
+    }
+  };
+}
+async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
+  const [, options] = Object.entries(codegenConfig.generates).find(
+    ([, value]) => (Array.isArray(value) ? value[0] : value)?.schema === schema
+  ) || [];
+  const hydrogenOptions = Array.isArray(options) ? options[0] : options;
+  if (hydrogenOptions) {
+    const formatConfig = await resolveFormatConfig(rootDirectory);
+    hydrogenOptions.hooks = {
+      beforeOneFileWrite: (file, content) => format(content, formatConfig, file),
+      ...hydrogenOptions.hooks
+    };
+  }
+}
+
+export { generateTypes, normalizeCodegenError, spawnCodegenProcess };

package/dist/lib/colors.d.ts

@@ -3,6 +3,9 @@ import ansiColors from 'ansi-colors';
 declare const colors: {
     dim: ansiColors.StyleFunction;
     bold: ansiColors.StyleFunction;
+    green: ansiColors.StyleFunction;
+    whiteBright: ansiColors.StyleFunction;
+    yellow: ansiColors.StyleFunction;
 };
 
 export { colors };

package/dist/lib/colors.js

@@ -2,7 +2,10 @@ import ansiColors from 'ansi-colors';
 
 const colors = {
   dim: ansiColors.dim,
-  bold: ansiColors.bold
+  bold: ansiColors.bold,
+  green: ansiColors.green,
+  whiteBright: ansiColors.whiteBright,
+  yellow: ansiColors.yellow
 };
 
 export { colors };

package/dist/lib/combined-environment-variables.d.ts

@@ -0,0 +1,8 @@
+interface Arguments {
+    envBranch?: string;
+    root: string;
+    shop?: string;
+}
+declare function combinedEnvironmentVariables({ envBranch, root, shop, }: Arguments): Promise<{}>;
+
+export { combinedEnvironmentVariables };

package/dist/lib/combined-environment-variables.js

@@ -0,0 +1,74 @@
+import { fileExists } from '@shopify/cli-kit/node/fs';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { outputInfo, outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
+import { colors } from './colors.js';
+import { pullRemoteEnvironmentVariables } from './pull-environment-variables.js';
+import { getConfig } from './shopify-config.js';
+
+async function combinedEnvironmentVariables({
+  envBranch,
+  root,
+  shop
+}) {
+  const remoteEnvironmentVariables = await pullRemoteEnvironmentVariables({
+    root,
+    flagShop: shop,
+    silent: true,
+    envBranch
+  });
+  const formattedRemoteVariables = remoteEnvironmentVariables?.reduce(
+    (a, v) => ({ ...a, [v.key]: v.value }),
+    {}
+  );
+  const dotEnvPath = resolvePath(root, ".env");
+  const localEnvironmentVariables = await fileExists(dotEnvPath) ? (await readAndParseDotEnv(dotEnvPath)).variables : {};
+  const remoteKeys = new Set(
+    remoteEnvironmentVariables.map((variable) => variable.key)
+  );
+  const localKeys = new Set(Object.keys(localEnvironmentVariables));
+  if ([...remoteKeys, ...localKeys].length) {
+    outputInfo(
+      `${colors.bold("Injecting environment variables into MiniOxygen...")}`
+    );
+  }
+  let storefrontTitle = "";
+  if (remoteEnvironmentVariables.length) {
+    const { storefront } = await getConfig(root);
+    if (storefront) {
+      storefrontTitle = storefront.title;
+    }
+  }
+  remoteEnvironmentVariables.forEach(({ key, isSecret }) => {
+    if (localKeys.has(key)) {
+      outputIgnoringKey(key, `overwritten via ${colors.yellow(".env")}`);
+    } else if (isSecret) {
+      outputIgnoringKey(key, "value is marked as secret");
+    } else {
+      outputUsingKey(key, storefrontTitle);
+    }
+  });
+  [...localKeys].forEach((keyName) => {
+    outputUsingKey(keyName, ".env");
+  });
+  return {
+    ...formattedRemoteVariables,
+    ...localEnvironmentVariables
+  };
+}
+function outputUsingKey(keyName, source) {
+  outputInfo(
+    outputContent`  Using ${outputToken.green(
+      keyName
+    )} from ${outputToken.yellow(source)}`.value
+  );
+}
+function outputIgnoringKey(keyName, reason) {
+  outputInfo(
+    outputContent`${colors.dim(
+      `  Ignoring ${colors.green(keyName)} (${reason})`
+    )}`.value
+  );
+}
+
+export { combinedEnvironmentVariables };

package/dist/lib/combined-environment-variables.test.d.ts

@@ -0,0 +1 @@
+