@shopify/cli-hydrogen 4.1.0 → 4.1.2

package/dist/commands/hydrogen/list.js

@@ -0,0 +1,83 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderTable } from '@shopify/cli-kit/node/ui';
+import { outputInfo, outputContent } from '@shopify/cli-kit/node/output';
+import { adminRequest, parseGid } from '../../lib/graphql.js';
+import { commonFlags } from '../../lib/flags.js';
+import { getHydrogenShop } from '../../lib/shop.js';
+import { getAdminSession } from '../../lib/admin-session.js';
+import { ListStorefrontsQuery } from '../../lib/graphql/admin/list-storefronts.js';
+import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
+
+class List extends Command {
+  static description = "Returns a list of Hydrogen storefronts available on a given shop.";
+  static hidden = true;
+  static flags = {
+    path: commonFlags.path,
+    shop: commonFlags.shop
+  };
+  async run() {
+    const { flags } = await this.parse(List);
+    await listStorefronts(flags);
+  }
+}
+async function listStorefronts({ path, shop: flagShop }) {
+  const shop = await getHydrogenShop({ path, shop: flagShop });
+  const adminSession = await getAdminSession(shop);
+  const result = await adminRequest(
+    ListStorefrontsQuery,
+    adminSession
+  );
+  const storefrontsCount = result.hydrogenStorefronts.length;
+  if (storefrontsCount > 0) {
+    outputInfo(
+      outputContent`Found ${storefrontsCount.toString()} Hydrogen storefronts on ${shop}:\n`.value
+    );
+    const rows = result.hydrogenStorefronts.map(
+      ({ id, title, productionUrl, currentProductionDeployment }) => ({
+        id: parseGid(id),
+        title,
+        productionUrl,
+        currentDeployment: formatDeployment(currentProductionDeployment)
+      })
+    );
+    renderTable({
+      rows,
+      columns: {
+        id: {
+          header: "ID"
+        },
+        title: {
+          header: "Name",
+          color: "whiteBright"
+        },
+        productionUrl: {
+          header: "Production URL"
+        },
+        currentDeployment: {
+          header: "Current deployment"
+        }
+      }
+    });
+  } else {
+    logMissingStorefronts(adminSession);
+  }
+}
+const dateFormat = new Intl.DateTimeFormat("default", {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+});
+function formatDeployment(deployment) {
+  let message = "";
+  if (!deployment) {
+    return message;
+  }
+  message += dateFormat.format(new Date(deployment.createdAt));
+  if (deployment.commitMessage) {
+    const title = deployment.commitMessage.split(/\n/)[0];
+    message += `, ${title}`;
+  }
+  return message;
+}
+
+export { List as default, formatDeployment, listStorefronts };

package/dist/commands/hydrogen/list.test.d.ts

@@ -0,0 +1 @@
+

package/dist/commands/hydrogen/list.test.js

@@ -0,0 +1,116 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { ListStorefrontsQuery } from '../../lib/graphql/admin/list-storefronts.js';
+import { getAdminSession } from '../../lib/admin-session.js';
+import { adminRequest } from '../../lib/graphql.js';
+import { listStorefronts, formatDeployment } from './list.js';
+
+vi.mock("../../lib/admin-session.js");
+vi.mock("../../lib/graphql.js", async () => {
+  const original = await vi.importActual(
+    "../../lib/graphql.js"
+  );
+  return {
+    ...original,
+    adminRequest: vi.fn()
+  };
+});
+vi.mock("../../lib/shop.js", () => ({
+  getHydrogenShop: () => "my-shop"
+}));
+describe("list", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  beforeEach(async () => {
+    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
+    vi.mocked(adminRequest).mockResolvedValue({
+      hydrogenStorefronts: []
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  it("makes a GraphQL call to fetch the storefronts", async () => {
+    await listStorefronts({});
+    expect(adminRequest).toHaveBeenCalledWith(
+      ListStorefrontsQuery,
+      ADMIN_SESSION
+    );
+  });
+  describe("and there are storefronts", () => {
+    beforeEach(() => {
+      vi.mocked(adminRequest).mockResolvedValue({
+        hydrogenStorefronts: [
+          {
+            id: "gid://shopify/HydrogenStorefront/1",
+            title: "Hydrogen",
+            productionUrl: "https://example.com",
+            currentProductionDeployment: null
+          },
+          {
+            id: "gid://shopify/HydrogenStorefront/2",
+            title: "Demo Store",
+            productionUrl: "https://demo.example.com",
+            currentProductionDeployment: {
+              id: "gid://shopify/HydrogenStorefrontDeployment/1",
+              createdAt: "2023-03-22T22:28:38Z",
+              commitMessage: "Update README.md"
+            }
+          }
+        ]
+      });
+    });
+    it("renders a list of storefronts", async () => {
+      const outputMock = mockAndCaptureOutput();
+      await listStorefronts({});
+      expect(outputMock.info()).toMatch(
+        /Found 2 Hydrogen storefronts on my-shop/g
+      );
+      expect(outputMock.info()).toMatch(
+        /1   Hydrogen    https:\/\/example.com/g
+      );
+      expect(outputMock.info()).toMatch(
+        /2   Demo Store  https:\/\/demo.example.com  March 22, 2023, Update README.md/g
+      );
+    });
+  });
+  describe("and there are no storefronts", () => {
+    it("prompts the user to create a storefront", async () => {
+      const outputMock = mockAndCaptureOutput();
+      await listStorefronts({});
+      expect(outputMock.info()).toMatch(
+        /There are no Hydrogen storefronts on your Shop\./g
+      );
+      expect(outputMock.info()).toMatch(/Create a new Hydrogen storefront/g);
+      expect(outputMock.info()).toMatch(
+        /https:\/\/my\-shop\/admin\/custom_storefronts\/new/g
+      );
+    });
+  });
+});
+describe("formatDeployment", () => {
+  const createdAt = "2023-03-22T22:28:38Z";
+  it("returns a string combined with a date and commit message", () => {
+    const deployment = {
+      id: "gid://shopify/HydrogenStorefrontDeployment/1",
+      createdAt,
+      commitMessage: "Update README.md\n\nThis is a description of why the change was made."
+    };
+    expect(formatDeployment(deployment)).toStrictEqual(
+      "March 22, 2023, Update README.md"
+    );
+  });
+  describe("when there is no commit message", () => {
+    it("only returns the date", () => {
+      const deployment = {
+        id: "gid://shopify/HydrogenStorefrontDeployment/1",
+        createdAt,
+        commitMessage: null
+      };
+      expect(formatDeployment(deployment)).toStrictEqual("March 22, 2023");
+    });
+  });
+});

package/dist/commands/hydrogen/unlink.d.ts

@@ -0,0 +1,17 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Unlink extends Command {
+    static description: string;
+    static hidden: boolean;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+    };
+    run(): Promise<void>;
+}
+interface LinkFlags {
+    path?: string;
+}
+declare function unlinkStorefront({ path }: LinkFlags): Promise<void>;
+
+export { LinkFlags, Unlink as default, unlinkStorefront };

package/dist/commands/hydrogen/unlink.js

@@ -0,0 +1,29 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { outputWarn, outputSuccess } from '@shopify/cli-kit/node/output';
+import { commonFlags } from '../../lib/flags.js';
+import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
+
+class Unlink extends Command {
+  static description = "Unlink a local project from a Hydrogen storefront.";
+  static hidden = true;
+  static flags = {
+    path: commonFlags.path
+  };
+  async run() {
+    const { flags } = await this.parse(Unlink);
+    await unlinkStorefront(flags);
+  }
+}
+async function unlinkStorefront({ path }) {
+  const actualPath = path ?? process.cwd();
+  const { storefront: configStorefront } = await getConfig(actualPath);
+  if (!configStorefront) {
+    outputWarn("This project isn't linked to a Hydrogen storefront.");
+    return;
+  }
+  const storefrontTitle = configStorefront.title;
+  await unsetStorefront(actualPath);
+  outputSuccess(`You are no longer linked to ${storefrontTitle}`);
+}
+
+export { Unlink as default, unlinkStorefront };

package/dist/commands/hydrogen/unlink.test.d.ts

@@ -0,0 +1 @@
+

package/dist/commands/hydrogen/unlink.test.js

@@ -0,0 +1,36 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
+import { unlinkStorefront } from './unlink.js';
+
+vi.mock("../../lib/shopify-config.js");
+describe("link", () => {
+  const outputMock = mockAndCaptureOutput();
+  afterEach(() => {
+    vi.resetAllMocks();
+    outputMock.clear();
+  });
+  it("removes the storefront information from the config file", async () => {
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/2",
+        title: "Existing Link"
+      }
+    });
+    await unlinkStorefront({ path: "my-path" });
+    expect(unsetStorefront).toHaveBeenCalledWith("my-path");
+    expect(outputMock.output()).toMatch(
+      /You are no longer linked to Existing Link/g
+    );
+  });
+  describe("when there is no existing storefront link", () => {
+    it("renders a warning message and returns early", async () => {
+      vi.mocked(getConfig).mockResolvedValue({});
+      await unlinkStorefront({});
+      expect(outputMock.output()).toMatch(
+        /This project isn\'t linked to a Hydrogen storefront\./g
+      );
+      expect(unsetStorefront).not.toHaveBeenCalled();
+    });
+  });
+});

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/flags.d.ts

@@ -4,6 +4,7 @@ declare const commonFlags: {
     path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
 };
 declare function flagsToCamelObject(obj: Record<string, any>): any;
 /**

package/dist/lib/flags.js

@@ -1,6 +1,7 @@
 import { Flags } from '@oclif/core';
 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 './colors.js';
 
 const commonFlags = {
@@ -17,6 +18,12 @@ const commonFlags = {
     description: "Overwrite the destination directory and files if they already exist.",
     env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
     char: "f"
+  }),
+  shop: Flags.string({
+    char: "s",
+    description: "Shop URL. It can be the shop prefix (janes-apparel) or the full myshopify.com URL (janes-apparel.myshopify.com, https://janes-apparel.myshopify.com).",
+    env: "SHOPIFY_SHOP",
+    parse: async (input) => normalizeStoreFqdn(input)
   })
 };
 function flagsToCamelObject(obj) {

package/dist/lib/graphql/admin/link-storefront.d.ts

@@ -0,0 +1,11 @@
+declare const LinkStorefrontQuery = "#graphql\n  query LinkStorefront {\n    hydrogenStorefronts {\n      id\n      title\n      productionUrl\n    }\n  }\n";
+interface HydrogenStorefront {
+    id: string;
+    title: string;
+    productionUrl: string;
+}
+interface LinkStorefrontSchema {
+    hydrogenStorefronts: HydrogenStorefront[];
+}
+
+export { LinkStorefrontQuery, LinkStorefrontSchema };