@shopify/cli-hydrogen 7.1.1 → 8.0.0

package/dist/lib/setups/i18n/replacers.test.js

@@ -1,261 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import { describe, it, expect } from 'vitest';
-import { inTemporaryDirectory, copyFile, readFile, writeFile } from '@shopify/cli-kit/node/fs';
-import { joinPath } from '@shopify/cli-kit/node/path';
-import { ts } from 'ts-morph';
-import { getSkeletonSourceDir } from '../../build.js';
-import { replaceRemixEnv, replaceServerI18n } from './replacers.js';
-import { DEFAULT_COMPILER_OPTIONS } from '../../transpile/morph/index.js';
-
-const remixDts = "remix.env.d.ts";
-const serverTs = "server.ts";
-const checkTypes = (content) => {
-  const { diagnostics } = ts.transpileModule(content, {
-    reportDiagnostics: true,
-    compilerOptions: DEFAULT_COMPILER_OPTIONS
-  });
-  if (diagnostics && diagnostics.length > 0) {
-    throw new Error(
-      ts.formatDiagnostics(
-        diagnostics,
-        ts.createCompilerHost(DEFAULT_COMPILER_OPTIONS)
-      )
-    );
-  }
-};
-describe("i18n replacers", () => {
-  it("adds i18n type to remix.env.d.ts", async () => {
-    await inTemporaryDirectory(async (tmpDir) => {
-      const skeletonDir = getSkeletonSourceDir();
-      await copyFile(
-        joinPath(skeletonDir, remixDts),
-        joinPath(tmpDir, remixDts)
-      );
-      await replaceRemixEnv(
-        { rootDirectory: tmpDir },
-        {},
-        await readFile(
-          fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
-        )
-      );
-      const newContent = await readFile(joinPath(tmpDir, remixDts));
-      expect(() => checkTypes(newContent)).not.toThrow();
-      expect(newContent).toMatchInlineSnapshot(`
-        "/// <reference types="@remix-run/dev" />
-        /// <reference types="@shopify/remix-oxygen" />
-        /// <reference types="@shopify/oxygen-workers-types" />
-
-        // Enhance TypeScript's built-in typings.
-        import "@total-typescript/ts-reset";
-
-        import type {
-          Storefront,
-          CustomerAccount,
-          HydrogenCart,
-        } from "@shopify/hydrogen";
-        import type {
-          LanguageCode,
-          CountryCode,
-        } from "@shopify/hydrogen/storefront-api-types";
-        import type { AppSession } from "~/lib/session";
-
-        declare global {
-          /**
-           * A global \`process\` object is only available during build to access NODE_ENV.
-           */
-          const process: { env: { NODE_ENV: "production" | "development" } };
-
-          /**
-           * Declare expected Env parameter in fetch handler.
-           */
-          interface Env {
-            SESSION_SECRET: string;
-            PUBLIC_STOREFRONT_API_TOKEN: string;
-            PRIVATE_STOREFRONT_API_TOKEN: string;
-            PUBLIC_STORE_DOMAIN: string;
-            PUBLIC_STOREFRONT_ID: string;
-            PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-            PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-          }
-
-          /**
-           * The I18nLocale used for Storefront API query context.
-           */
-          type I18nLocale = { language: LanguageCode; country: CountryCode };
-        }
-
-        declare module "@shopify/remix-oxygen" {
-          /**
-           * Declare local additions to the Remix loader context.
-           */
-          export interface AppLoadContext {
-            env: Env;
-            cart: HydrogenCart;
-            storefront: Storefront<I18nLocale>;
-            customerAccount: CustomerAccount;
-            session: AppSession;
-            waitUntil: ExecutionContext["waitUntil"];
-          }
-        }
-        "
-      `);
-    });
-  });
-  it("adds i18n type to server.ts", async () => {
-    await inTemporaryDirectory(async (tmpDir) => {
-      const skeletonDir = getSkeletonSourceDir();
-      await writeFile(
-        joinPath(tmpDir, serverTs),
-        // Remove the part that is not needed for this test (AppSession, Cart query, etc);
-        (await readFile(joinPath(skeletonDir, serverTs))).replace(/^};$.*/ms, "};")
-      );
-      await replaceServerI18n(
-        { rootDirectory: tmpDir, serverEntryPoint: serverTs },
-        {},
-        await readFile(
-          fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
-        ),
-        false
-      );
-      const newContent = await readFile(joinPath(tmpDir, serverTs));
-      expect(() => checkTypes(newContent)).not.toThrow();
-      expect(newContent).toMatchInlineSnapshot(`
-        "// Virtual entry point for the app
-        import * as remixBuild from "@remix-run/dev/server-build";
-        import {
-          cartGetIdDefault,
-          cartSetIdDefault,
-          createCartHandler,
-          createStorefrontClient,
-          storefrontRedirect,
-          createCustomerAccountClient,
-        } from "@shopify/hydrogen";
-        import {
-          createRequestHandler,
-          getStorefrontHeaders,
-          type AppLoadContext,
-        } from "@shopify/remix-oxygen";
-        import { AppSession } from "~/lib/session";
-        import { CART_QUERY_FRAGMENT } from "~/lib/fragments";
-
-        /**
-         * Export a fetch handler in module format.
-         */
-        export default {
-          async fetch(
-            request: Request,
-            env: Env,
-            executionContext: ExecutionContext
-          ): Promise<Response> {
-            try {
-              /**
-               * Open a cache instance in the worker and a custom session instance.
-               */
-              if (!env?.SESSION_SECRET) {
-                throw new Error("SESSION_SECRET environment variable is not set");
-              }
-
-              const waitUntil = executionContext.waitUntil.bind(executionContext);
-              const [cache, session] = await Promise.all([
-                caches.open("hydrogen"),
-                AppSession.init(request, [env.SESSION_SECRET]),
-              ]);
-
-              /**
-               * Create Hydrogen's Storefront client.
-               */
-              const { storefront } = createStorefrontClient({
-                cache,
-                waitUntil,
-                i18n: getLocaleFromRequest(request),
-                publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-                privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-                storeDomain: env.PUBLIC_STORE_DOMAIN,
-                storefrontId: env.PUBLIC_STOREFRONT_ID,
-                storefrontHeaders: getStorefrontHeaders(request),
-              });
-
-              /**
-               * Create a client for Customer Account API.
-               */
-              const customerAccount = createCustomerAccountClient({
-                waitUntil,
-                request,
-                session,
-                customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID,
-                customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_API_URL,
-              });
-
-              /*
-               * Create a cart handler that will be used to
-               * create and update the cart in the session.
-               */
-              const cart = createCartHandler({
-                storefront,
-                customerAccount,
-                getCartId: cartGetIdDefault(request.headers),
-                setCartId: cartSetIdDefault(),
-                cartQueryFragment: CART_QUERY_FRAGMENT,
-              });
-
-              /**
-               * Create a Remix request handler and pass
-               * Hydrogen's Storefront client to the loader context.
-               */
-              const handleRequest = createRequestHandler({
-                build: remixBuild,
-                mode: process.env.NODE_ENV,
-                getLoadContext: (): AppLoadContext => ({
-                  session,
-                  storefront,
-                  customerAccount,
-                  cart,
-                  env,
-                  waitUntil,
-                }),
-              });
-
-              const response = await handleRequest(request);
-
-              if (response.status === 404) {
-                /**
-                 * Check for redirects only when there's a 404 from the app.
-                 * If the redirect doesn't exist, then \`storefrontRedirect\`
-                 * will pass through the 404 response.
-                 */
-                return storefrontRedirect({ request, response, storefront });
-              }
-
-              return response;
-            } catch (error) {
-              // eslint-disable-next-line no-console
-              console.error(error);
-              return new Response("An unexpected error occurred", { status: 500 });
-            }
-          },
-        };
-
-        function getLocaleFromRequest(request: Request): I18nLocale {
-          const defaultLocale: I18nLocale = { language: "EN", country: "US" };
-          const supportedLocales = {
-            ES: "ES",
-            FR: "FR",
-            DE: "DE",
-            JP: "JA",
-          } as Record<I18nLocale["country"], I18nLocale["language"]>;
-
-          const url = new URL(request.url);
-          const domain = url.hostname
-            .split(".")
-            .pop()
-            ?.toUpperCase() as keyof typeof supportedLocales;
-
-          return domain && supportedLocales[domain]
-            ? { language: supportedLocales[domain], country: domain }
-            : defaultLocale;
-        }
-        "
-      `);
-    });
-  });
-});

package/dist/lib/setups/i18n/subdomains.test.js

@@ -1,39 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import { describe, it, expect } from 'vitest';
-import { getLocaleFromRequest } from './templates/subdomains.js';
-import { readFile } from '@shopify/cli-kit/node/fs';
-
-describe("Setup i18n with subdomains", () => {
-  it("extracts the locale from the subdomain", () => {
-    expect(
-      getLocaleFromRequest(new Request("https://example.com"))
-    ).toMatchObject({
-      language: "EN",
-      country: "US"
-    });
-    expect(
-      getLocaleFromRequest(new Request("https://jp.example.com"))
-    ).toMatchObject({
-      language: "JA",
-      country: "JP"
-    });
-    expect(
-      getLocaleFromRequest(new Request("https://es.sub.example.com"))
-    ).toMatchObject({
-      language: "ES",
-      country: "ES"
-    });
-  });
-  it("does not access imported types directly", async () => {
-    const template = await readFile(
-      fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
-    );
-    const typeImports = (template.match(/import\s+type\s+{([^}]+)}/)?.[1] || "").trim().split(/\s*,\s*/);
-    expect(typeImports).not.toHaveLength(0);
-    const fnCode = template.match(/function .*\n}$/ms)?.[0] || "";
-    expect(fnCode).toBeTruthy();
-    typeImports.forEach(
-      (typeImport) => expect(fnCode).not.toContain(typeImport)
-    );
-  });
-});

package/dist/lib/setups/i18n/subfolders.test.js

@@ -1,39 +0,0 @@
-import { fileURLToPath } from 'node:url';
-import { describe, it, expect } from 'vitest';
-import { getLocaleFromRequest } from './templates/subfolders.js';
-import { readFile } from '@shopify/cli-kit/node/fs';
-
-describe("Setup i18n with subfolders", () => {
-  it("extracts the locale from the pathname", () => {
-    expect(
-      getLocaleFromRequest(new Request("https://example.com"))
-    ).toMatchObject({
-      language: "EN",
-      country: "US"
-    });
-    expect(
-      getLocaleFromRequest(new Request("https://example.com/ja-jp"))
-    ).toMatchObject({
-      language: "JA",
-      country: "JP"
-    });
-    expect(
-      getLocaleFromRequest(new Request("https://example.com/es-es/path"))
-    ).toMatchObject({
-      language: "ES",
-      country: "ES"
-    });
-  });
-  it("does not access imported types directly", async () => {
-    const template = await readFile(
-      fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
-    );
-    const typeImports = (template.match(/import\s+type\s+{([^}]+)}/)?.[1] || "").trim().split(/\s*,\s*/);
-    expect(typeImports).not.toHaveLength(0);
-    const fnCode = template.match(/function .*\n}$/ms)?.[0] || "";
-    expect(fnCode).toBeTruthy();
-    typeImports.forEach(
-      (typeImport) => expect(fnCode).not.toContain(typeImport)
-    );
-  });
-});

package/dist/lib/setups/routes/generate.test.js

@@ -1,296 +0,0 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
-import { getResolvedRoutes, generateRoutes, generateProjectFile } from './generate.js';
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { inTemporaryDirectory, fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
-import { joinPath, dirname } from '@shopify/cli-kit/node/path';
-import { getTemplateAppFile } from '../../../lib/build.js';
-import { getRemixConfig } from '../../remix-config.js';
-
-const readProjectFile = (dirs, fileBasename, ext = "tsx") => readFile(joinPath(dirs.appDirectory, `${fileBasename}.${ext}`));
-describe("generate/route", () => {
-  beforeEach(() => {
-    vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit/node/output");
-    vi.mock("@shopify/cli-kit/node/ui");
-    vi.mock("../../remix-config.js", async () => ({ getRemixConfig: vi.fn() }));
-  });
-  describe("generateRoutes", () => {
-    it("generates all routes with correct configuration", async () => {
-      const { resolvedRouteFiles } = await getResolvedRoutes();
-      expect(
-        resolvedRouteFiles.find((item) => /account_?\.login/.test(item))
-      ).toBeTruthy();
-      await inTemporaryDirectory(async (tmpDir) => {
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [
-            ["jsconfig.json", JSON.stringify({ compilerOptions: { test: "js" } })],
-            [".prettierrc.json", JSON.stringify({ singleQuote: false })]
-          ],
-          templates: resolvedRouteFiles.map(
-            (filepath) => ["routes/" + filepath + ".tsx", ""]
-          )
-        });
-        vi.mocked(getRemixConfig).mockResolvedValue(directories);
-        const result = await generateRoutes({
-          routeName: "all",
-          directory: directories.rootDirectory,
-          templatesRoot: directories.templatesRoot
-        });
-        expect(result).toMatchObject(
-          expect.objectContaining({
-            isTypescript: false,
-            formatOptions: { singleQuote: false },
-            routes: expect.any(Array)
-          })
-        );
-        expect(result.routes).toHaveLength(
-          Object.values(resolvedRouteFiles).length
-        );
-      });
-    });
-    it("figures out the locale if a home route already exists", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const route = "routes/pages.$handle";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [
-            ["tsconfig.json", JSON.stringify({ compilerOptions: { test: "ts" } })],
-            ["app/routes/($locale)._index.tsx", "export const test = true;"]
-          ],
-          templates: [[route + ".tsx", `const str = "hello world"`]]
-        });
-        vi.mocked(getRemixConfig).mockResolvedValue({
-          ...directories,
-          tsconfigPath: "somewhere/tsconfig.json"
-        });
-        const result = await generateRoutes({
-          routeName: ["page"],
-          directory: directories.rootDirectory,
-          templatesRoot: directories.templatesRoot
-        });
-        expect(result).toMatchObject(
-          expect.objectContaining({
-            isTypescript: true,
-            routes: expect.any(Array),
-            formatOptions: expect.any(Object)
-          })
-        );
-        expect(result.routes).toHaveLength(1);
-        expect(result.routes[0]).toMatchObject({
-          destinationRoute: expect.stringContaining("($locale).pages.$handle")
-        });
-      });
-    });
-  });
-  describe("generateProjectFile", () => {
-    it("generates a route file for Remix v1", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const route = "routes/pages.$handle";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [],
-          templates: [[route + ".tsx", `const str = "hello world"`]]
-        });
-        await generateProjectFile(route, {
-          ...directories,
-          v1RouteConvention: true
-        });
-        expect(
-          await readProjectFile(directories, route.replace(".", "/"), "jsx")
-        ).toContain(`const str = 'hello world'`);
-      });
-    });
-    it("generates a route file for Remix v2", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const route = "routes/custom.path.$handle._index";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [],
-          templates: [[route + ".tsx", `const str = "hello world"`]]
-        });
-        await generateProjectFile(route, directories);
-        expect(await readProjectFile(directories, route, "jsx")).toContain(
-          `const str = 'hello world'`
-        );
-      });
-    });
-    it("generates route files with locale prefix", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const routeCode = `const str = 'hello world'`;
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [],
-          templates: [
-            ["routes/_index.tsx", routeCode],
-            ["routes/pages.$handle.tsx", routeCode],
-            ["routes/[robots.txt].tsx", routeCode],
-            ["routes/[sitemap.xml].tsx", routeCode]
-          ]
-        });
-        const localePrefix = "locale";
-        await generateProjectFile("routes/_index", {
-          ...directories,
-          localePrefix,
-          typescript: true
-        });
-        await generateProjectFile("routes/pages.$handle", {
-          ...directories,
-          v1RouteConvention: true,
-          localePrefix,
-          typescript: true
-        });
-        await generateProjectFile("routes/[sitemap.xml]", {
-          ...directories,
-          localePrefix,
-          typescript: true
-        });
-        await generateProjectFile("routes/[robots.txt]", {
-          ...directories,
-          localePrefix,
-          typescript: true
-        });
-        await expect(
-          readProjectFile(directories, `routes/($locale)._index`)
-        ).resolves.toContain(routeCode);
-        await expect(
-          readProjectFile(directories, `routes/($locale).[sitemap.xml]`)
-        ).resolves.toContain(routeCode);
-        await expect(
-          readProjectFile(directories, `routes/[robots.txt]`)
-        ).resolves.toContain(routeCode);
-        await expect(
-          readProjectFile(directories, `routes/($locale)/pages/$handle`)
-        ).resolves.toContain(routeCode);
-      });
-    });
-    it("produces a typescript file when typescript argument is true", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const route = "routes/pages.$handle";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [],
-          templates: [[route + ".tsx", 'const str = "hello typescript"']]
-        });
-        await generateProjectFile(route, {
-          ...directories,
-          typescript: true
-        });
-        expect(await readProjectFile(directories, route)).toContain(
-          `const str = 'hello typescript'`
-        );
-      });
-    });
-    it("prompts the user if there the file already exists", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-          async () => true
-        );
-        const route = "routes/page.$handle";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [[`app/${route}.jsx`, 'const str = "I exist"']],
-          templates: [[route + ".tsx", 'const str = "hello world"']]
-        });
-        await generateProjectFile(route, {
-          ...directories
-        });
-        expect(renderConfirmationPrompt).toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: expect.stringContaining("already exists")
-          })
-        );
-      });
-    });
-    it("does not prompt the user if the force property is true", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-          async () => true
-        );
-        const route = "routes/page.$pageHandle";
-        const directories = await createHydrogenFixture(tmpDir, {
-          files: [[`app/${route}.jsx`, 'const str = "I exist"']],
-          templates: [[route + ".tsx", 'const str = "hello world"']]
-        });
-        await generateProjectFile(route, {
-          ...directories,
-          force: true
-        });
-        expect(renderConfirmationPrompt).not.toHaveBeenCalled();
-      });
-    });
-    it("generates all the route dependencies", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const templates = [
-          [
-            "routes/pages.$pageHandle.tsx",
-            `import Dep from 'some-node-dep';
-import AnotherRoute from './AnotherRoute';
-import Form from '~/components/Form';
-import {
-
-
-Button} from '../components/Button';
-import {stuff} from '../utils';
-import {serverOnly} from '../something.server';
-import styles from '../styles/app.css';
-export {Dep, AnotherRoute, Form, Button, stuff, serverOnly, styles};
-`
-          ],
-          [
-            "components/Form.tsx",
-            `import {Button} from './Button';
-import {Text} from './Text';
-export {Button, Text};
-`
-          ],
-          ["components/Button.tsx", `export const Button = '';
-`],
-          ["components/Text.tsx", `export const Text = '';
-`],
-          ["utils/index.ts", `export {stuff} from './stuff';
-`],
-          ["utils/stuff.ts", `export const stuff = '';
-`],
-          ["something.server.ts", `export const serverOnly = '';
-`],
-          ["styles/app.css", `.red{color:red;}`]
-        ];
-        const directories = await createHydrogenFixture(tmpDir, { templates });
-        vi.mocked(getRemixConfig).mockResolvedValue(directories);
-        await generateProjectFile("routes/pages.$pageHandle", {
-          ...directories,
-          force: true
-        });
-        await Promise.all(
-          templates.map(async ([file, content]) => {
-            const actualFile = joinPath(
-              directories.appDirectory,
-              file.replace(".ts", ".js")
-            );
-            await expect(fileExists(actualFile)).resolves.toBeTruthy();
-            await expect(readFile(actualFile)).resolves.toEqual(
-              content.replace(/\{\n+/, "{")
-            );
-          })
-        );
-      });
-    });
-  });
-});
-async function createHydrogenFixture(directory, {
-  files = [],
-  templates = []
-}) {
-  const projectDir = "project";
-  for (const item of files) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = joinPath(directory, projectDir, filePath);
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  for (const item of templates) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = getTemplateAppFile(filePath, directory);
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  return {
-    rootDirectory: joinPath(directory, projectDir),
-    appDirectory: joinPath(directory, projectDir, "app"),
-    templatesRoot: directory
-  };
-}