@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/commands/hydrogen/env/pull.test.js

@@ -3,10 +3,11 @@ import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { inTemporaryDirectory, fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { getAdminSession } from '../../../lib/admin-session.js';
-import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
-import { getConfig } from '../../../lib/shopify-config.js';
-import { pullVariables } from './pull.js';
+import { login } from '../../../lib/auth.js';
+import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-variables.js';
+import { runEnvPull } from './pull.js';
+import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+import { linkStorefront } from '../link.js';
 
 vi.mock("@shopify/cli-kit/node/ui", async () => {
   const original = await vi.importActual("@shopify/cli-kit/node/ui");
@@ -16,58 +17,65 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
   };
 });
 vi.mock("../link.js");
-vi.mock("../../../lib/admin-session.js");
-vi.mock("../../../lib/shopify-config.js");
-vi.mock("../../../lib/pull-environment-variables.js");
-vi.mock("../../../lib/shop.js", () => ({
-  getHydrogenShop: () => "my-shop"
-}));
+vi.mock("../../../lib/auth.js");
+vi.mock("../../../lib/render-errors.js");
+vi.mock("../../../lib/graphql/admin/pull-variables.js");
 describe("pullVariables", () => {
   const ADMIN_SESSION = {
     token: "abc123",
     storeFqdn: "my-shop"
   };
+  const SHOPIFY_CONFIG = {
+    shop: "my-shop",
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/2",
+      title: "Existing Link"
+    }
+  };
   beforeEach(async () => {
-    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
-    vi.mocked(getConfig).mockResolvedValue({
-      storefront: {
-        id: "gid://shopify/HydrogenStorefront/2",
-        title: "Existing Link"
-      }
-    });
-    vi.mocked(pullRemoteEnvironmentVariables).mockResolvedValue([
-      {
-        id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
-        key: "PUBLIC_API_TOKEN",
-        value: "abc123",
-        isSecret: false
-      },
-      {
-        id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/2",
-        key: "PRIVATE_API_TOKEN",
-        value: "",
-        isSecret: true
-      }
-    ]);
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: SHOPIFY_CONFIG
+    });
+    vi.mocked(getStorefrontEnvVariables).mockResolvedValue({
+      id: SHOPIFY_CONFIG.storefront.id,
+      environmentVariables: [
+        {
+          id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+          key: "PUBLIC_API_TOKEN",
+          value: "abc123",
+          isSecret: false
+        },
+        {
+          id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/2",
+          key: "PRIVATE_API_TOKEN",
+          value: "",
+          isSecret: true
+        }
+      ]
+    });
   });
   afterEach(() => {
     vi.resetAllMocks();
     mockAndCaptureOutput().clear();
   });
-  it("calls pullRemoteEnvironmentVariables", async () => {
+  it("calls getStorefrontEnvVariables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await pullVariables({ path: tmpDir, envBranch: "staging" });
-      expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
-        root: tmpDir,
-        envBranch: "staging"
-      });
+      await runEnvPull({ path: tmpDir, envBranch: "staging" });
+      expect(getStorefrontEnvVariables).toHaveBeenCalledWith(
+        ADMIN_SESSION,
+        SHOPIFY_CONFIG.storefront.id,
+        "staging"
+      );
     });
   });
   it("writes environment variables to a .env file", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const filePath = joinPath(tmpDir, ".env");
       expect(await fileExists(filePath)).toBeFalsy();
-      await pullVariables({ path: tmpDir });
+      await runEnvPull({ path: tmpDir });
       expect(await readFile(filePath)).toStrictEqual(
         'PUBLIC_API_TOKEN=abc123\nPRIVATE_API_TOKEN=""'
       );
@@ -76,7 +84,7 @@ describe("pullVariables", () => {
   it("warns about secret environment variables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const outputMock = mockAndCaptureOutput();
-      await pullVariables({ path: tmpDir });
+      await runEnvPull({ path: tmpDir });
       expect(outputMock.warn()).toMatch(
         /Existing Link contains environment variables marked as secret, so their/
       );
@@ -86,12 +94,85 @@ describe("pullVariables", () => {
   it("renders a success message", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const outputMock = mockAndCaptureOutput();
-      await pullVariables({ path: tmpDir });
+      await runEnvPull({ path: tmpDir });
       expect(outputMock.info()).toMatch(
         /Changes have been made to your \.env file/
       );
     });
   });
+  describe("when environment variables are empty", () => {
+    beforeEach(() => {
+      vi.mocked(getStorefrontEnvVariables).mockResolvedValue({
+        id: "gid://shopify/HydrogenStorefront/1",
+        environmentVariables: []
+      });
+    });
+    it("renders a message", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const outputMock = mockAndCaptureOutput();
+        await runEnvPull({ path: tmpDir });
+        expect(outputMock.info()).toMatch(/No environment variables found\./);
+      });
+    });
+  });
+  describe("when there is no linked storefront", () => {
+    beforeEach(async () => {
+      vi.mocked(login).mockResolvedValue({
+        session: ADMIN_SESSION,
+        config: {
+          ...SHOPIFY_CONFIG,
+          storefront: void 0
+        }
+      });
+    });
+    it("calls renderMissingLink", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await runEnvPull({ path: tmpDir });
+        expect(renderMissingLink).toHaveBeenCalledOnce();
+      });
+    });
+    it("prompts the user to create a link", async () => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
+      await inTemporaryDirectory(async (tmpDir) => {
+        await runEnvPull({ path: tmpDir });
+        expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+          message: expect.stringMatching(/Run .* link.*\?/i)
+        });
+        expect(linkStorefront).toHaveBeenCalledWith(
+          tmpDir,
+          ADMIN_SESSION,
+          { ...SHOPIFY_CONFIG, storefront: void 0 },
+          expect.anything()
+        );
+      });
+    });
+    it("ends without requesting variables", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await runEnvPull({ path: tmpDir });
+        expect(getStorefrontEnvVariables).not.toHaveBeenCalled();
+      });
+    });
+    describe("and the user does not create a new link", () => {
+      it("ends without requesting variables", async () => {
+        vi.mocked(renderConfirmationPrompt).mockResolvedValue(false);
+        await inTemporaryDirectory(async (tmpDir) => {
+          await runEnvPull({ path: tmpDir });
+          expect(getStorefrontEnvVariables).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+  describe("when there is no matching storefront in the shop", () => {
+    beforeEach(() => {
+      vi.mocked(getStorefrontEnvVariables).mockResolvedValue(null);
+    });
+    it("renders missing storefronts message and ends", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await runEnvPull({ path: tmpDir });
+        expect(renderMissingStorefront).toHaveBeenCalledOnce();
+      });
+    });
+  });
   describe("when a .env file already exists", () => {
     beforeEach(() => {
       vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
@@ -100,7 +181,7 @@ describe("pullVariables", () => {
       await inTemporaryDirectory(async (tmpDir) => {
         const filePath = joinPath(tmpDir, ".env");
         await writeFile(filePath, "EXISTING_TOKEN=1");
-        await pullVariables({ path: tmpDir });
+        await runEnvPull({ path: tmpDir });
         expect(renderConfirmationPrompt).toHaveBeenCalledWith({
           confirmationMessage: `Yes, confirm changes`,
           cancellationMessage: `No, make changes later`,
@@ -115,7 +196,7 @@ describe("pullVariables", () => {
         await inTemporaryDirectory(async (tmpDir) => {
           const filePath = joinPath(tmpDir, ".env");
           await writeFile(filePath, "EXISTING_TOKEN=1");
-          await pullVariables({ path: tmpDir, force: true });
+          await runEnvPull({ path: tmpDir, force: true });
           expect(renderConfirmationPrompt).not.toHaveBeenCalled();
         });
       });

package/dist/commands/hydrogen/generate/route.js

@@ -1,27 +1,11 @@
-import { fileURLToPath } from 'url';
 import Command from '@shopify/cli-kit/node/base-command';
-import { fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, joinPath, relativePath, relativizePath, dirname } from '@shopify/cli-kit/node/path';
-import { AbortError } from '@shopify/cli-kit/node/error';
-import { renderSuccess, renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
 import { commonFlags } from '../../../lib/flags.js';
 import { Flags, Args } from '@oclif/core';
-import { transpileFile, format, resolveFormatConfig } from '../../../lib/transpile-ts.js';
-import { getV2Flags, convertRouteToV2, convertTemplateToRemixVersion } from '../../../lib/remix-version-interop.js';
+import { ALL_ROUTE_CHOICES, generateRoutes } from '../../../lib/setups/routes/generate.js';
 
-const GENERATOR_TEMPLATES_DIR = "generator-templates";
-const ROUTE_MAP = {
-  home: "/index",
-  page: "/pages/$pageHandle",
-  cart: "/cart",
-  products: "/products/$productHandle",
-  collections: "/collections/$collectionHandle",
-  policies: ["/policies/index", "/policies/$policyHandle"],
-  robots: "/[robots.txt]",
-  sitemap: "/[sitemap.xml]",
-  account: ["/account/login", "/account/register"]
-};
-const ROUTES = [...Object.keys(ROUTE_MAP), "all"];
 class GenerateRoute extends Command {
   static description = "Generates a standard Shopify route.";
   static flags = {
@@ -38,131 +22,46 @@ class GenerateRoute extends Command {
   };
   static hidden;
   static args = {
-    route: Args.string({
-      name: "route",
-      description: `The route to generate. One of ${ROUTES.join()}.`,
+    routeName: Args.string({
+      name: "routeName",
+      description: `The route to generate. One of ${ALL_ROUTE_CHOICES.join()}.`,
       required: true,
-      options: ROUTES,
+      options: ALL_ROUTE_CHOICES,
       env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
     })
   };
   async run() {
-    const result = /* @__PURE__ */ new Map();
     const {
       flags,
-      args: { route }
+      args: { routeName }
     } = await this.parse(GenerateRoute);
-    const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
-    if (!routePath) {
-      throw new AbortError(
-        `No route found for ${route}. Try one of ${ROUTES.join()}.`
-      );
-    }
     const directory = flags.path ? resolvePath(flags.path) : process.cwd();
-    const isTypescript = flags.typescript || await fileExists(joinPath(directory, "tsconfig.json"));
-    const routesArray = Array.isArray(routePath) ? routePath : [routePath];
-    try {
-      const { isV2RouteConvention, ...v2Flags } = await getV2Flags(directory);
-      for (const item of routesArray) {
-        const routeFrom = item;
-        const routeTo = isV2RouteConvention ? convertRouteToV2(item) : item;
-        result.set(
-          routeTo,
-          await runGenerate(routeFrom, routeTo, {
-            directory,
-            typescript: isTypescript,
-            force: flags.force,
-            adapter: flags.adapter,
-            v2Flags
-          })
-        );
-      }
-    } catch (err) {
-      throw new AbortError(err.message);
-    }
-    const extension = isTypescript ? ".tsx" : ".jsx";
-    const success = Array.from(result.values()).filter(
-      (result2) => result2.operation !== "skipped"
-    );
-    renderSuccess({
-      headline: `${success.length} of ${result.size} route${result.size > 1 ? "s" : ""} generated`,
-      body: {
-        list: {
-          items: Array.from(result.entries()).map(
-            ([path, { operation }]) => `[${operation}] app/routes${path}${extension}`
-          )
-        }
-      }
+    await runGenerate({
+      ...flags,
+      directory,
+      routeName
     });
   }
 }
-async function runGenerate(routeFrom, routeTo, {
-  directory,
-  typescript,
-  force,
-  adapter,
-  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url)),
-  v2Flags = {}
-}) {
-  let operation;
-  const extension = typescript ? ".tsx" : ".jsx";
-  const templatePath = joinPath(
-    templatesRoot,
-    GENERATOR_TEMPLATES_DIR,
-    "routes",
-    `${routeFrom}.tsx`
+async function runGenerate(options) {
+  const { routes } = await generateRoutes(options);
+  const padEnd = 3 + routes.reduce(
+    (acc, route) => Math.max(acc, route.destinationRoute.length),
+    0
   );
-  const destinationPath = joinPath(
-    directory,
-    "app",
-    "routes",
-    `${routeTo}${extension}`
-  );
-  const relativeDestinationPath = relativePath(directory, destinationPath);
-  if (!force && await fileExists(destinationPath)) {
-    const shouldOverwrite = await renderConfirmationPrompt({
-      message: `The file ${relativizePath(
-        relativeDestinationPath
-      )} already exists. Do you want to overwrite it?`,
-      defaultValue: false
-    });
-    operation = shouldOverwrite ? "overwritten" : "skipped";
-    if (operation === "skipped") {
-      return { operation };
+  const successfulGenerationCount = routes.filter(
+    ({ operation }) => operation !== "skipped"
+  ).length;
+  renderSuccess({
+    headline: `${successfulGenerationCount} of ${routes.length} route${routes.length > 1 ? "s" : ""} generated`,
+    body: {
+      list: {
+        items: routes.map(
+          ({ operation, destinationRoute }) => destinationRoute.padEnd(padEnd) + colors.dim(`[${operation}]`)
+        )
+      }
     }
-  } else {
-    operation = "generated";
-  }
-  let templateContent = await readFile(templatePath);
-  templateContent = convertTemplateToRemixVersion(templateContent, v2Flags);
-  if (!typescript) {
-    const jsConfigPath = joinPath(directory, "jsconfig.json");
-    const config = await fileExists(jsConfigPath) ? JSON.parse(
-      (await readFile(jsConfigPath, { encoding: "utf8" })).replace(
-        /^\s*\/\/.*$/gm,
-        ""
-      )
-    ) : void 0;
-    templateContent = transpileFile(templateContent, config?.compilerOptions);
-  }
-  if (adapter) {
-    templateContent = templateContent.replace(
-      /@shopify\/remix-oxygen/g,
-      adapter
-    );
-  }
-  templateContent = format(
-    templateContent,
-    await resolveFormatConfig(destinationPath),
-    destinationPath
-  );
-  if (!await fileExists(dirname(destinationPath))) {
-    await mkdir(dirname(destinationPath));
-  }
-  await writeFile(destinationPath, templateContent);
-  return {
-    operation
-  };
+  });
 }
 
-export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };
+export { GenerateRoute as default, runGenerate };

package/dist/commands/hydrogen/generate/route.test.js

@@ -1,134 +1,42 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
-import { temporaryDirectoryTask } from 'tempy';
-import { runGenerate, GENERATOR_TEMPLATES_DIR } from './route.js';
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
-import { joinPath, dirname } from '@shopify/cli-kit/node/path';
-import { convertRouteToV2 } from '../../../lib/remix-version-interop.js';
+import { describe, beforeEach, vi, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { runGenerate } from './route.js';
+import { generateRoutes } from '../../../lib/setups/routes/generate.js';
 
-describe("generate/route", () => {
+describe("runGenerate", () => {
+  const outputMock = mockAndCaptureOutput();
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit/node/output");
-    vi.mock("@shopify/cli-kit/node/ui");
+    vi.mock("../../../lib/setups/routes/generate.js");
   });
-  it("generates a route file", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "pages/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, `const str = "hello world"`]]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(
-        await readFile(joinPath(appRoot, "app/routes", `${route}.jsx`))
-      ).toContain(`const str = 'hello world'`);
-    });
-  });
-  it("generates a route file for Remix v2", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "custom/path/$handle/index";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, `const str = "hello world"`]]
-      });
-      await runGenerate(route, convertRouteToV2(route), {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(
-        await readFile(
-          joinPath(appRoot, "app/routes", `custom.path.$handle._index.jsx`)
-        )
-      ).toContain(`const str = 'hello world'`);
-    });
-  });
-  it("produces a typescript file when typescript argument is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "pages/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, 'const str = "hello typescript"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot,
-        typescript: true
-      });
-      expect(
-        await readFile(joinPath(appRoot, "app/routes", `${route}.tsx`))
-      ).toContain(`const str = 'hello typescript'`);
-    });
-  });
-  it("prompts the user if there the file already exists", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-        async () => true
-      );
-      const route = "page/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
-        templates: [[route, 'const str = "hello world"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(renderConfirmationPrompt).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: expect.stringContaining("already exists")
-        })
-      );
-    });
+  afterEach(() => {
+    vi.resetAllMocks();
+    outputMock.clear();
   });
-  it("does not prompt the user if the force property is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-        async () => true
-      );
-      const route = "page/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
-        templates: [[route, 'const str = "hello world"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot,
-        force: true
-      });
-      expect(renderConfirmationPrompt).not.toHaveBeenCalled();
+  it("calls route generation and renders the result", async () => {
+    vi.mocked(generateRoutes).mockResolvedValue({
+      isTypescript: true,
+      transpilerOptions: {},
+      formatOptions: {},
+      v2Flags: {},
+      routeGroups: {},
+      routes: [
+        { sourceRoute: "", destinationRoute: "/cart", operation: "created" },
+        { sourceRoute: "", destinationRoute: "/about", operation: "skipped" },
+        {
+          sourceRoute: "",
+          destinationRoute: "/collections",
+          operation: "created"
+        }
+      ]
     });
+    const options = {
+      routeName: "all",
+      directory: "there",
+      typescript: true
+    };
+    await runGenerate(options);
+    expect(generateRoutes).toHaveBeenCalledWith(options);
+    expect(outputMock.info()).toMatch(/2 of 3 routes/i);
   });
 });
-async function createHydrogen(directory, {
-  files,
-  templates
-} = {
-  files: [],
-  templates: []
-}) {
-  for (const item of files) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = joinPath(directory, "app", filePath);
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  for (const item of templates) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = joinPath(
-      directory,
-      GENERATOR_TEMPLATES_DIR,
-      "routes",
-      `${filePath}.tsx`
-    );
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  return {
-    appRoot: joinPath(directory, "app"),
-    templatesRoot: directory
-  };
-}