@shopify/cli-hydrogen 5.0.2 → 5.1.1

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

@@ -1,47 +1,78 @@
 import { diffLines } from 'diff';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderInfo, renderConfirmationPrompt, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { renderConfirmationPrompt, renderInfo, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputContent, outputToken, outputInfo } from '@shopify/cli-kit/node/output';
 import { fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { patchEnvFile } from '@shopify/cli-kit/node/dot-env';
 import colors from '@shopify/cli-kit/node/colors';
 import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
-import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
-import { getConfig } from '../../../lib/shopify-config.js';
+import { login } from '../../../lib/auth.js';
+import { getCliCommand } from '../../../lib/shell.js';
+import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+import { linkStorefront } from '../link.js';
+import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-variables.js';
 
 class EnvPull extends Command {
   static description = "Populate your .env with variables from your Hydrogen storefront.";
   static flags = {
-    ["env-branch"]: commonFlags["env-branch"],
+    ["env-branch"]: commonFlags.envBranch,
     path: commonFlags.path,
-    shop: commonFlags.shop,
     force: commonFlags.force
   };
   async run() {
     const { flags } = await this.parse(EnvPull);
-    await pullVariables({ ...flagsToCamelObject(flags) });
+    await runEnvPull({ ...flagsToCamelObject(flags) });
   }
 }
-async function pullVariables({
+async function runEnvPull({
   envBranch,
-  force,
-  path,
-  shop: flagShop
+  path: root = process.cwd(),
+  force
 }) {
-  const actualPath = path ?? process.cwd();
-  const environmentVariables = await pullRemoteEnvironmentVariables({
-    root: actualPath,
-    flagShop,
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(root),
+    getCliCommand()
+  ]);
+  if (!config.storefront?.id) {
+    renderMissingLink({ session, cliCommand });
+    const runLink = await renderConfirmationPrompt({
+      message: outputContent`Run ${outputToken.genericShellCommand(
+        `${cliCommand} link`
+      )}?`.value
+    });
+    if (!runLink)
+      return;
+    config.storefront = await linkStorefront(root, session, config, {
+      cliCommand
+    });
+  }
+  if (!config.storefront?.id)
+    return;
+  const storefront = await getStorefrontEnvVariables(
+    session,
+    config.storefront.id,
     envBranch
-  });
-  if (!environmentVariables.length) {
+  );
+  if (!storefront) {
+    renderMissingStorefront({
+      session,
+      storefront: config.storefront,
+      cliCommand
+    });
+    return;
+  }
+  if (!storefront.environmentVariables.length) {
+    outputInfo(`No environment variables found.`);
     return;
   }
+  const variables = storefront.environmentVariables;
+  if (!variables.length)
+    return;
   const fileName = colors.whiteBright(`.env`);
-  const dotEnvPath = resolvePath(actualPath, ".env");
+  const dotEnvPath = resolvePath(root, ".env");
   const fetchedEnv = {};
-  environmentVariables.forEach(({ isSecret, key, value }) => {
+  variables.forEach(({ isSecret, key, value }) => {
     fetchedEnv[key] = isSecret ? `""` : value;
   });
   if (await fileExists(dotEnvPath) && !force) {
@@ -70,13 +101,10 @@ Continue?`.value
     const newEnv = patchEnvFile(null, fetchedEnv);
     await writeFile(dotEnvPath, newEnv);
   }
-  const hasSecretVariables = environmentVariables.some(
-    ({ isSecret }) => isSecret
-  );
+  const hasSecretVariables = variables.some(({ isSecret }) => isSecret);
   if (hasSecretVariables) {
-    const { storefront: configStorefront } = await getConfig(actualPath);
     renderWarning({
-      body: `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
+      body: `${config.storefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
     });
   }
   renderSuccess({
@@ -84,4 +112,4 @@ Continue?`.value
   });
 }
 
-export { EnvPull as default, pullVariables };
+export { EnvPull as default, runEnvPull };

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 };