@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/generator-templates/starter/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "types": ["@shopify/oxygen-workers-types"],
+    "paths": {
+      "~/*": ["app/*"]
+    },
+    "noEmit": true
+  }
+}

package/dist/lib/auth.js

@@ -0,0 +1,123 @@
+import { renderSelectPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { logout as logout$1, ensureAuthenticatedBusinessPlatform, ensureAuthenticatedAdmin } from '@shopify/cli-kit/node/session';
+import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
+import ansiEscapes from 'ansi-escapes';
+import { resetConfig, getConfig, setUserAccount } from './shopify-config.js';
+import { getUserAccount } from './graphql/business-platform/user-account.js';
+import { muteAuthLogs } from './log.js';
+
+async function logout(root) {
+  await logout$1();
+  await resetConfig(root);
+}
+async function login(root, shop) {
+  const forcePrompt = shop === true;
+  const existingConfig = root ? await getConfig(root) : {};
+  let { email, shopName } = existingConfig;
+  if (typeof shop !== "string") {
+    shop = existingConfig.shop;
+  }
+  if (shop)
+    shop = await normalizeStoreFqdn(shop);
+  const hideLoginInfo = showLoginInfo();
+  if (!shop || !shopName || !email || forcePrompt || shop !== existingConfig.shop) {
+    const token = await ensureAuthenticatedBusinessPlatform().catch(() => {
+      throw new AbortError(
+        "Unable to authenticate with Shopify. Please report this issue."
+      );
+    });
+    const userAccount = await getUserAccount(token);
+    await hideLoginInfo();
+    const preselected = !forcePrompt && shop && userAccount.activeShops.find(({ fqdn }) => shop === fqdn);
+    const selected = preselected || await renderSelectPrompt({
+      message: "Select a shop to log in to",
+      choices: userAccount.activeShops.map(({ name, fqdn }) => ({
+        label: `${name} (${fqdn})`,
+        value: { name, fqdn }
+      }))
+    });
+    shop = selected.fqdn;
+    shopName = selected.name;
+    email = userAccount.email;
+  }
+  const session = 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})`
+    ]);
+  });
+  await hideLoginInfo();
+  const config = root ? await setUserAccount(root, { shop, shopName, email }) : { shop, shopName, email };
+  return { session, config };
+}
+function showLoginInfo() {
+  let deferredResolve;
+  const promise = new Promise((resolve) => {
+    deferredResolve = resolve;
+  });
+  console.log("");
+  let hasLoggedTimeout = false;
+  let hasLoggedPressKey = false;
+  const restoreLogs = muteAuthLogs({
+    onKeyTimeout: (link) => {
+      if (link) {
+        hasLoggedTimeout = true;
+        process.stdout.write(ansiEscapes.eraseLines(9));
+        try {
+          const secureLink = link.replace("http://", "https://");
+          const url = new URL(secureLink);
+          const label = url.origin + "/..." + url.search.slice(-14);
+          renderInfo({
+            headline: "Log in to Shopify",
+            body: outputContent`Timed out. Click to open your browser:\n${outputToken.link(
+              colors.white(label),
+              secureLink
+            )}`.value
+          });
+        } catch {
+        }
+      }
+    },
+    onPressKey: () => {
+      hasLoggedPressKey = true;
+      renderInfo({
+        headline: "Log in to Shopify",
+        body: "Press any key to login with your default browser"
+      });
+      process.stdin.once("data", () => {
+        renderTasks([
+          {
+            title: "Waiting for Shopify authentication",
+            task: async () => {
+              await promise;
+            }
+          }
+        ]);
+      });
+    }
+  });
+  promise.then(() => {
+    restoreLogs();
+    if (hasLoggedPressKey) {
+      process.stdout.write(ansiEscapes.eraseLines(hasLoggedTimeout ? 11 : 10));
+    }
+  });
+  return async () => {
+    deferredResolve();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  };
+}
+function renderLoginSuccess(config) {
+  renderSuccess({
+    headline: "Shopify authentication complete",
+    body: [
+      "You are logged in to",
+      { userInput: config.shopName ?? config.shop ?? "your store" },
+      ...config.email ? ["as", { userInput: config.email }] : []
+    ]
+  });
+}
+
+export { login, logout, renderLoginSuccess };

package/dist/lib/auth.test.js

@@ -0,0 +1,157 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { ensureAuthenticatedAdmin, ensureAuthenticatedBusinessPlatform } from '@shopify/cli-kit/node/session';
+import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { login } from './auth.js';
+import { getUserAccount } from './graphql/business-platform/user-account.js';
+import { setUserAccount, getConfig } from './shopify-config.js';
+
+vi.mock("@shopify/cli-kit/node/session");
+vi.mock("@shopify/cli-kit/node/ui");
+vi.mock("./graphql/business-platform/user-account.js");
+vi.mock("./shopify-config.js");
+describe("auth", () => {
+  const EMAIL = "email";
+  const SHOP = "my-shop";
+  const SHOP_DOMAIN = SHOP + ".myshopify.com";
+  const SHOP_NAME = "My Shop";
+  const TOKEN = "abc123";
+  const ROOT = "path/to/project";
+  const SHOPIFY_CONFIG = {
+    shop: SHOP_DOMAIN,
+    shopName: SHOP_NAME,
+    email: EMAIL
+  };
+  const EXPECTED_LOGIN_RESULT = {
+    config: { shop: SHOP_DOMAIN, shopName: SHOP_NAME, email: EMAIL },
+    session: {
+      token: TOKEN,
+      storeFqdn: SHOP_DOMAIN
+    }
+  };
+  beforeEach(() => {
+    vi.mocked(setUserAccount).mockImplementation(
+      (root, account) => Promise.resolve(account)
+    );
+    vi.mocked(ensureAuthenticatedAdmin).mockImplementation(
+      (shop) => Promise.resolve({ token: TOKEN, storeFqdn: shop })
+    );
+    vi.mocked(ensureAuthenticatedBusinessPlatform).mockResolvedValue("bp123");
+    vi.mocked(getUserAccount).mockResolvedValue({
+      email: "email",
+      activeShops: [{ name: SHOP_NAME, fqdn: SHOP_DOMAIN }]
+    });
+    vi.mocked(getConfig).mockResolvedValue({});
+    vi.mocked(renderSelectPrompt).mockResolvedValue({
+      fqdn: SHOP_DOMAIN,
+      name: SHOP_NAME
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  describe("login", () => {
+    it("throws an error when it fails to authenticate", async () => {
+      vi.mocked(ensureAuthenticatedBusinessPlatform).mockRejectedValueOnce({});
+      await expect(login(ROOT)).rejects.toThrow(AbortError);
+      vi.mocked(ensureAuthenticatedAdmin).mockRejectedValueOnce({});
+      await expect(login(ROOT, SHOP)).rejects.toThrow(AbortError);
+    });
+    it("reads shop from local config", async () => {
+      vi.mocked(getConfig).mockResolvedValue(SHOPIFY_CONFIG);
+      const result = await login(ROOT);
+      expect(ensureAuthenticatedBusinessPlatform).not.toHaveBeenCalled();
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(SHOP_DOMAIN);
+      expect(setUserAccount).toHaveBeenCalledWith(
+        ROOT,
+        expect.objectContaining({ shop: SHOP_DOMAIN })
+      );
+      expect(result).toStrictEqual(EXPECTED_LOGIN_RESULT);
+    });
+    it("uses the shop flag argument when passed", async () => {
+      const ANOTHER_SHOP = "another-shop";
+      const ANOTHER_SHOP_DOMAIN = "another-shop.myshopify.com";
+      const ANOTHER_SHOP_NAME = "ANOTHER SHOP";
+      vi.mocked(getConfig).mockResolvedValue(SHOPIFY_CONFIG);
+      vi.mocked(renderSelectPrompt).mockResolvedValue({
+        fqdn: ANOTHER_SHOP_DOMAIN,
+        name: ANOTHER_SHOP_NAME
+      });
+      const result = await login(ROOT, ANOTHER_SHOP);
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(
+        ANOTHER_SHOP_DOMAIN
+      );
+      expect(setUserAccount).toHaveBeenCalledWith(
+        ROOT,
+        expect.objectContaining({ shop: ANOTHER_SHOP_DOMAIN })
+      );
+      expect(result).toStrictEqual({
+        config: {
+          shop: ANOTHER_SHOP_DOMAIN,
+          shopName: ANOTHER_SHOP_NAME,
+          email: EMAIL
+        },
+        session: {
+          storeFqdn: ANOTHER_SHOP_DOMAIN,
+          token: TOKEN
+        }
+      });
+    });
+    it("writes shop to local config and returns it with the admin session", async () => {
+      const result = await login(ROOT, SHOP);
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(SHOP_DOMAIN);
+      expect(setUserAccount).toHaveBeenCalledWith(
+        ROOT,
+        expect.objectContaining({ shop: SHOP_DOMAIN })
+      );
+      expect(result).toStrictEqual(EXPECTED_LOGIN_RESULT);
+    });
+    it("prompts for shop is not found in arguments and local config", async () => {
+      const result = await login(ROOT);
+      expect(ensureAuthenticatedBusinessPlatform).toHaveBeenCalled();
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(SHOP_DOMAIN);
+      expect(setUserAccount).toHaveBeenCalledWith(
+        ROOT,
+        expect.objectContaining({ shop: SHOP_DOMAIN })
+      );
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: expect.any(String),
+        choices: [
+          {
+            label: expect.stringContaining(SHOP_DOMAIN),
+            value: { fqdn: SHOP_DOMAIN, name: SHOP_NAME }
+          }
+        ]
+      });
+      expect(result).toStrictEqual(EXPECTED_LOGIN_RESULT);
+    });
+    it("ignores local config and forces prompt when indicated", async () => {
+      vi.mocked(getConfig).mockResolvedValue(SHOPIFY_CONFIG);
+      const result = await login(ROOT, true);
+      expect(ensureAuthenticatedBusinessPlatform).toHaveBeenCalled();
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(SHOP_DOMAIN);
+      expect(setUserAccount).toHaveBeenCalledWith(
+        ROOT,
+        expect.objectContaining({ shop: SHOP_DOMAIN })
+      );
+      expect(renderSelectPrompt).toHaveBeenCalledWith({
+        message: expect.any(String),
+        choices: [
+          {
+            label: expect.stringContaining(SHOP_DOMAIN),
+            value: { fqdn: SHOP_DOMAIN, name: SHOP_NAME }
+          }
+        ]
+      });
+      expect(result).toStrictEqual(EXPECTED_LOGIN_RESULT);
+    });
+    it("skips config steps when root argument is not passed", async () => {
+      const result = await login();
+      expect(ensureAuthenticatedBusinessPlatform).toHaveBeenCalled();
+      expect(ensureAuthenticatedAdmin).toHaveBeenCalledWith(SHOP_DOMAIN);
+      expect(getConfig).not.toHaveBeenCalled();
+      expect(setUserAccount).not.toHaveBeenCalled();
+      expect(result).toStrictEqual(EXPECTED_LOGIN_RESULT);
+    });
+  });
+});

package/dist/lib/build.js

@@ -0,0 +1,51 @@
+import { fileURLToPath } from 'node:url';
+
+const GENERATOR_TEMPLATES_DIR = "generator-templates";
+const GENERATOR_STARTER_DIR = "starter";
+const GENERATOR_APP_DIR = "app";
+const GENERATOR_ROUTE_DIR = "routes";
+const GENERATOR_SETUP_ASSETS_DIR = "assets";
+const GENERATOR_SETUP_ASSETS_SUB_DIRS = [
+  "tailwind",
+  "css-modules",
+  "vanilla-extract",
+  "postcss"
+];
+function getAssetDir(feature) {
+  if (process.env.NODE_ENV === "test") {
+    return fileURLToPath(
+      new URL(`../setup-assets/${feature}`, import.meta.url)
+    );
+  }
+  return fileURLToPath(
+    new URL(
+      `../${GENERATOR_TEMPLATES_DIR}/${GENERATOR_SETUP_ASSETS_DIR}/${feature}`,
+      import.meta.url
+    )
+  );
+}
+function getTemplateAppFile(filepath, root = getStarterDir()) {
+  const url = new URL(
+    `${root}/${GENERATOR_APP_DIR}${filepath ? `/${filepath}` : ""}`,
+    import.meta.url
+  );
+  return url.protocol === "file:" ? fileURLToPath(url) : url.toString();
+}
+function getStarterDir() {
+  if (process.env.NODE_ENV === "test") {
+    return getSkeletonSourceDir();
+  }
+  return fileURLToPath(
+    new URL(
+      `../${GENERATOR_TEMPLATES_DIR}/${GENERATOR_STARTER_DIR}`,
+      import.meta.url
+    )
+  );
+}
+function getSkeletonSourceDir() {
+  return fileURLToPath(
+    new URL(`../../../../templates/skeleton`, import.meta.url)
+  );
+}
+
+export { GENERATOR_APP_DIR, GENERATOR_ROUTE_DIR, GENERATOR_SETUP_ASSETS_DIR, GENERATOR_SETUP_ASSETS_SUB_DIRS, GENERATOR_STARTER_DIR, GENERATOR_TEMPLATES_DIR, getAssetDir, getSkeletonSourceDir, getStarterDir, getTemplateAppFile };

package/dist/lib/check-version.js

@@ -1,5 +1,5 @@
-import path from 'path';
-import { createRequire } from 'module';
+import path from 'node:path';
+import { createRequire } from 'node:module';
 import { checkForNewVersion } from '@shopify/cli-kit/node/node-package-manager';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 
@@ -20,7 +20,7 @@ async function checkHydrogenVersion(resolveFrom, pkgKey = "main") {
   if (!pkgJsonPath)
     return;
   const currentVersion = require2(pkgJsonPath).version;
-  if (!currentVersion)
+  if (!currentVersion || currentVersion.includes("next"))
     return;
   const newVersionAvailable = await checkForNewVersion(pkgName, currentVersion);
   if (!newVersionAvailable)

package/dist/lib/check-version.test.js

@@ -8,6 +8,21 @@ vi.mock("@shopify/cli-kit/node/node-package-manager", () => {
     checkForNewVersion: vi.fn()
   };
 });
+const requireMock = vi.fn();
+vi.mock("node:module", async () => {
+  const { createRequire } = await vi.importActual(
+    "node:module"
+  );
+  return {
+    createRequire: (url) => {
+      const actualRequire = createRequire(url);
+      requireMock.mockImplementation((mod) => actualRequire(mod));
+      const require2 = requireMock;
+      require2.resolve = actualRequire.resolve.bind(actualRequire);
+      return require2;
+    }
+  };
+});
 describe("checkHydrogenVersion()", () => {
   const outputMock = mockAndCaptureOutput();
   afterEach(() => {
@@ -30,6 +45,15 @@ describe("checkHydrogenVersion()", () => {
         expect(await checkHydrogenVersion("dir")).toBe(void 0);
       });
     });
+    describe("and it is using @next", () => {
+      it("returns undefined", async () => {
+        vi.mocked(checkForNewVersion).mockResolvedValue("2023.1.5");
+        vi.mocked(requireMock).mockReturnValueOnce({
+          version: "0.0.0-next-a188915-20230713115118"
+        });
+        expect(await checkHydrogenVersion("dir")).toBe(void 0);
+      });
+    });
     describe("and a new version is available", () => {
       beforeEach(() => {
         vi.mocked(checkForNewVersion).mockResolvedValue("2023.1.5");

package/dist/lib/codegen.js

@@ -1,9 +1,9 @@
 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 { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 
@@ -11,14 +11,12 @@ 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
-    })
-  );
+  codegen({
+    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");
@@ -66,6 +64,18 @@ function spawnCodegenProcess({
   });
   return child;
 }
+async function codegen(options) {
+  await patchGqlPluck();
+  try {
+    return await generateTypes(options);
+  } catch (error) {
+    const { message, details } = normalizeCodegenError(
+      error.message,
+      options.rootDirectory
+    );
+    throw new AbortError(message, details);
+  }
+}
 async function generateTypes({
   watch,
   configFilePath,
@@ -90,7 +100,6 @@ async function generateTypes({
 }
 function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
   const tsDefaultGlob = "*!(*.d).{ts,tsx}";
-  const appDirRelative = relativePath(rootDirectory, appDirectory);
   return {
     filepath: "virtual:codegen",
     config: {
@@ -101,8 +110,8 @@ function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersio
           preset,
           schema,
           documents: [
-            tsDefaultGlob,
-            joinPath(appDirRelative, "**", tsDefaultGlob)
+            joinPath(rootDirectory, tsDefaultGlob),
+            joinPath(appDirectory, "**", tsDefaultGlob)
           ],
           ...!!forceSfapiVersion && {
             presetConfig: { importTypes: false },
@@ -130,12 +139,12 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
   ) || [];
   const hydrogenOptions = Array.isArray(options) ? options[0] : options;
   if (hydrogenOptions) {
-    const formatConfig = await resolveFormatConfig(rootDirectory);
+    const formatConfig = await getCodeFormatOptions(rootDirectory);
     hydrogenOptions.hooks = {
-      beforeOneFileWrite: (file, content) => format(content, formatConfig, file),
+      beforeOneFileWrite: (file, content) => formatCode(content, formatConfig, file),
       ...hydrogenOptions.hooks
     };
   }
 }
 
-export { generateTypes, normalizeCodegenError, spawnCodegenProcess };
+export { codegen, spawnCodegenProcess };

package/dist/lib/environment-variables.js

@@ -0,0 +1,68 @@
+import { fileExists } from '@shopify/cli-kit/node/fs';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { linesToColumns } from '@shopify/cli-kit/common/string';
+import { outputInfo } from '@shopify/cli-kit/node/output';
+import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
+import { getStorefrontEnvVariables } from './graphql/admin/pull-variables.js';
+import { login } from './auth.js';
+
+async function getAllEnvironmentVariables({
+  root,
+  envBranch,
+  fetchRemote = true
+}) {
+  const dotEnvPath = resolvePath(root, ".env");
+  const [{ remoteVariables, remoteSecrets }, { variables: localVariables }] = await Promise.all([
+    fetchRemote ? getRemoteVariables(root, envBranch) : { remoteVariables: {}, remoteSecrets: {} },
+    fileExists(dotEnvPath).then(
+      (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
+    )
+  ]);
+  const remoteSecretKeys = Object.keys(remoteSecrets);
+  const remotePublicKeys = Object.keys(remoteVariables);
+  const localKeys = Object.keys(localVariables);
+  if (localKeys.length > 0 || remotePublicKeys.length + remoteSecretKeys.length > 0) {
+    outputInfo("\nEnvironment variables injected into MiniOxygen:\n");
+    outputInfo(
+      linesToColumns([
+        ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
+        ...localKeys.map((key) => [key, "from local .env"]),
+        ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
+          colors.dim(key),
+          colors.dim("from Oxygen (Marked as secret)")
+        ])
+      ])
+    );
+  }
+  return {
+    ...remoteSecrets,
+    ...remoteVariables,
+    ...localVariables
+  };
+}
+async function getRemoteVariables(root, envBranch) {
+  const { session, config } = await login(root);
+  const envVariables = (await getStorefrontEnvVariables(
+    session,
+    config.storefront.id,
+    envBranch
+  ).catch((error) => {
+    renderWarning({
+      headline: `Failed to load environment variables. The development server will still start, but the following error occurred:`,
+      body: error?.stack ?? error?.message ?? error
+    });
+  }))?.environmentVariables || [];
+  const remoteVariables = {};
+  const remoteSecrets = {};
+  for (const { key, value, isSecret } of envVariables) {
+    if (isSecret)
+      remoteSecrets[key] = value;
+    else
+      remoteVariables[key] = value;
+  }
+  return { remoteVariables, remoteSecrets };
+}
+
+export { getAllEnvironmentVariables };