@shopify/cli-hydrogen 5.0.2 → 5.1.1

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

@@ -0,0 +1,227 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
+import { fileExists } from '@shopify/cli-kit/node/fs';
+import { ts, tsx, js, jsx } from '@ast-grep/napi';
+import { replaceFileContent, findFileWithExtension } from '../../file.js';
+
+const astGrep = { ts, tsx, js, jsx };
+async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" }, formatConfig, localeExtractImplementation) {
+  const { filepath, astType } = await findEntryFile({
+    rootDirectory,
+    serverEntryPoint
+  });
+  await replaceFileContent(filepath, formatConfig, async (content) => {
+    const root = astGrep[astType].parse(content).root();
+    const requestIdentifier = root.find({
+      rule: {
+        kind: "identifier",
+        inside: {
+          kind: "formal_parameters",
+          stopBy: "end",
+          inside: {
+            kind: "method_definition",
+            stopBy: "end",
+            has: {
+              kind: "property_identifier",
+              regex: "^fetch$"
+            },
+            inside: {
+              kind: "export_statement",
+              stopBy: "end"
+            }
+          }
+        }
+      }
+    });
+    const requestIdentifierName = requestIdentifier?.text() ?? "request";
+    const i18nFunctionName = localeExtractImplementation.match(
+      /^(export )?function (\w+)/m
+    )?.[2];
+    if (!i18nFunctionName) {
+      throw new Error("Could not find the i18n function name");
+    }
+    const i18nFunctionCall = `${i18nFunctionName}(${requestIdentifierName})`;
+    const hydrogenImportPath = "@shopify/hydrogen";
+    const hydrogenImportName = "createStorefrontClient";
+    const importSpecifier = root.find({
+      rule: {
+        kind: "import_specifier",
+        inside: {
+          kind: "import_statement",
+          stopBy: "end",
+          has: {
+            kind: "string_fragment",
+            stopBy: "end",
+            regex: `^${hydrogenImportPath}$`
+          }
+        },
+        has: {
+          kind: "identifier",
+          regex: `^${hydrogenImportName}`
+        }
+      }
+    });
+    let [importName, importAlias] = importSpecifier?.text().split(/\s+as\s+/) || [];
+    importName = importAlias ?? importName;
+    if (!importName) {
+      throw new AbortError(
+        `Could not find a Hydrogen import in ${serverEntryPoint}`,
+        `Please import "${hydrogenImportName}" from "${hydrogenImportPath}"`
+      );
+    }
+    const argumentObject = root.find({
+      rule: {
+        kind: "object",
+        inside: {
+          kind: "arguments",
+          inside: {
+            kind: "call_expression",
+            has: {
+              kind: "identifier",
+              regex: importName
+            }
+          }
+        }
+      }
+    });
+    if (!argumentObject) {
+      throw new AbortError(
+        `Could not find a Hydrogen client instantiation with an inline object as argument in ${serverEntryPoint}`,
+        `Please add a call to ${importName}({...})`
+      );
+    }
+    const i18nProperty = argumentObject.find({
+      rule: {
+        kind: "property_identifier",
+        regex: "^i18n$"
+      }
+    });
+    const i18nValue = i18nProperty?.next()?.next();
+    if (i18nValue) {
+      if (i18nValue.text().includes(i18nFunctionName)) {
+        throw new AbortError(
+          "An i18n strategy is already set up.",
+          `Remove the existing i18n property in the ${importName}({...}) call to set up a new one.`
+        );
+      }
+      const { start, end } = i18nValue.range();
+      content = content.slice(0, start.index) + i18nFunctionCall + content.slice(end.index);
+    } else {
+      const { end } = argumentObject.range();
+      const firstPart = content.slice(0, end.index - 1);
+      content = firstPart + ((/,\s*$/.test(firstPart) ? "" : ",") + `i18n: ${i18nFunctionCall}`) + content.slice(end.index - 1);
+    }
+    const importTypes = localeExtractImplementation.match(
+      /import\s+type\s+[^;]+?;/
+    )?.[0];
+    if (importTypes) {
+      localeExtractImplementation = localeExtractImplementation.replace(
+        importTypes,
+        ""
+      );
+      const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
+      if (lastImportNode) {
+        const lastImportContent = lastImportNode.text();
+        content = content.replace(
+          lastImportContent,
+          lastImportContent + "\n" + importTypes.replace(
+            /'[^']+'/,
+            `'@shopify/hydrogen/storefront-api-types'`
+          )
+        );
+      }
+    }
+    return content + `
+
+${localeExtractImplementation.replace(/^export function/m, "function").replace(/^export {.*?;/m, "")}
+`;
+  });
+}
+async function replaceRemixEnv({ rootDirectory, serverEntryPoint }, formatConfig, localeExtractImplementation) {
+  const remixEnvPath = joinPath(rootDirectory, "remix.env.d.ts");
+  if (!await fileExists(remixEnvPath)) {
+    return;
+  }
+  const i18nTypeName = localeExtractImplementation.match(/export type (\w+)/)?.[1];
+  if (!i18nTypeName) {
+    return;
+  }
+  const { filepath: entryFilepath } = await findEntryFile({
+    rootDirectory,
+    serverEntryPoint
+  });
+  const relativePathToEntry = relativePath(
+    rootDirectory,
+    entryFilepath
+  ).replace(/.[tj]sx?$/, "");
+  await replaceFileContent(remixEnvPath, formatConfig, (content) => {
+    if (content.includes(`Storefront<`))
+      return;
+    const root = astGrep.ts.parse(content).root();
+    const storefrontTypeNode = root.find({
+      rule: {
+        kind: "property_signature",
+        has: {
+          kind: "type_annotation",
+          has: {
+            regex: "^Storefront$"
+          }
+        },
+        inside: {
+          kind: "interface_declaration",
+          stopBy: "end",
+          regex: "AppLoadContext"
+        }
+      }
+    });
+    if (!storefrontTypeNode) {
+      return;
+    }
+    const { end } = storefrontTypeNode.range();
+    content = content.slice(0, end.index) + `<${i18nTypeName}>` + content.slice(end.index);
+    const serverImportNode = root.findAll({
+      rule: {
+        kind: "import_statement",
+        has: {
+          kind: "string_fragment",
+          stopBy: "end",
+          regex: `^(\\./)?${relativePathToEntry.replaceAll(
+            ".",
+            "\\."
+          )}(\\.[jt]sx?)?$`
+        }
+      }
+    }).pop();
+    if (serverImportNode) {
+      content = content.replace(
+        serverImportNode.text(),
+        serverImportNode.text().replace("{", `{${i18nTypeName},`)
+      );
+    } else {
+      const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop() ?? root.findAll({ rule: { kind: "comment", regex: "^/// <reference" } }).pop();
+      const { end: end2 } = lastImportNode?.range() ?? { end: { index: 0 } };
+      const typeImport = `
+import type {${i18nTypeName}} from './${serverEntryPoint.replace(
+        /\.[jt]s$/,
+        ""
+      )}';`;
+      content = content.slice(0, end2.index) + typeImport + content.slice(end2.index);
+    }
+    return content;
+  });
+}
+async function findEntryFile({
+  rootDirectory,
+  serverEntryPoint = "server"
+}) {
+  const match = serverEntryPoint.match(/\.([jt]sx?)$/)?.[1];
+  const { filepath, astType } = match ? { filepath: joinPath(rootDirectory, serverEntryPoint), astType: match } : await findFileWithExtension(rootDirectory, serverEntryPoint);
+  if (!filepath || !astType) {
+    throw new AbortError(
+      `Could not find a server entry point at ${serverEntryPoint}`
+    );
+  }
+  return { filepath, astType };
+}
+
+export { replaceRemixEnv, replaceServerI18n };

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { getLocaleFromRequest } from './templates/subdomains.js';
+
+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"
+    });
+  });
+});

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { getLocaleFromRequest } from './templates/subfolders.js';
+
+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"
+    });
+  });
+});

package/dist/lib/setups/i18n/templates/domains.js

@@ -0,0 +1,14 @@
+function getLocaleFromRequest(request) {
+  const defaultLocale = { language: "EN", country: "US" };
+  const supportedLocales = {
+    ES: "ES",
+    FR: "FR",
+    DE: "DE",
+    JP: "JA"
+  };
+  const url = new URL(request.url);
+  const domain = url.hostname.split(".").pop()?.toUpperCase();
+  return supportedLocales[domain] ? { language: supportedLocales[domain], country: domain } : defaultLocale;
+}
+
+export { getLocaleFromRequest };

package/dist/lib/setups/i18n/templates/domains.ts

@@ -0,0 +1,25 @@
+import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+
+export type I18nLocale = {language: LanguageCode; country: CountryCode};
+
+function getLocaleFromRequest(request: Request): I18nLocale {
+  const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
+  const supportedLocales = {
+    ES: 'ES',
+    FR: 'FR',
+    DE: 'DE',
+    JP: 'JA',
+  } as Record<CountryCode, LanguageCode>;
+
+  const url = new URL(request.url);
+  const domain = url.hostname
+    .split('.')
+    .pop()
+    ?.toUpperCase() as keyof typeof supportedLocales;
+
+  return supportedLocales[domain]
+    ? {language: supportedLocales[domain], country: domain}
+    : defaultLocale;
+}
+
+export {getLocaleFromRequest};

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

@@ -0,0 +1,14 @@
+function getLocaleFromRequest(request) {
+  const defaultLocale = { language: "EN", country: "US" };
+  const supportedLocales = {
+    ES: "ES",
+    FR: "FR",
+    DE: "DE",
+    JP: "JA"
+  };
+  const url = new URL(request.url);
+  const firstSubdomain = url.hostname.split(".")[0]?.toUpperCase();
+  return supportedLocales[firstSubdomain] ? { language: supportedLocales[firstSubdomain], country: firstSubdomain } : defaultLocale;
+}
+
+export { getLocaleFromRequest };

package/dist/lib/setups/i18n/templates/subdomains.ts

@@ -0,0 +1,24 @@
+import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+
+export type I18nLocale = {language: LanguageCode; country: CountryCode};
+
+function getLocaleFromRequest(request: Request): I18nLocale {
+  const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
+  const supportedLocales = {
+    ES: 'ES',
+    FR: 'FR',
+    DE: 'DE',
+    JP: 'JA',
+  } as Record<CountryCode, LanguageCode>;
+
+  const url = new URL(request.url);
+  const firstSubdomain = url.hostname
+    .split('.')[0]
+    ?.toUpperCase() as keyof typeof supportedLocales;
+
+  return supportedLocales[firstSubdomain]
+    ? {language: supportedLocales[firstSubdomain], country: firstSubdomain}
+    : defaultLocale;
+}
+
+export {getLocaleFromRequest};

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

@@ -0,0 +1,14 @@
+function getLocaleFromRequest(request) {
+  const url = new URL(request.url);
+  const firstPathPart = url.pathname.split("/")[1]?.toUpperCase() ?? "";
+  let pathPrefix = "";
+  let language = "EN";
+  let country = "US";
+  if (/^[A-Z]{2}-[A-Z]{2}$/i.test(firstPathPart)) {
+    pathPrefix = "/" + firstPathPart;
+    [language, country] = firstPathPart.split("-");
+  }
+  return { language, country, pathPrefix };
+}
+
+export { getLocaleFromRequest };

package/dist/lib/setups/i18n/templates/subfolders.ts

@@ -0,0 +1,28 @@
+import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
+
+export type I18nLocale = {
+  language: LanguageCode;
+  country: CountryCode;
+  pathPrefix: string;
+};
+
+function getLocaleFromRequest(request: Request): I18nLocale {
+  const url = new URL(request.url);
+  const firstPathPart = url.pathname.split('/')[1]?.toUpperCase() ?? '';
+
+  let pathPrefix = '';
+  let language: LanguageCode = 'EN';
+  let country: CountryCode = 'US';
+
+  if (/^[A-Z]{2}-[A-Z]{2}$/i.test(firstPathPart)) {
+    pathPrefix = '/' + firstPathPart;
+    [language, country] = firstPathPart.split('-') as [
+      LanguageCode,
+      CountryCode,
+    ];
+  }
+
+  return {language, country, pathPrefix};
+}
+
+export {getLocaleFromRequest};

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

@@ -0,0 +1,244 @@
+import { readdir } from 'fs/promises';
+import { fileExists, mkdir, copyFile, readFile, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath, relativizePath, dirname, relativePath, resolvePath, basename } from '@shopify/cli-kit/node/path';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { transpileFile } from '../../../lib/transpile-ts.js';
+import { getCodeFormatOptions, formatCode } from '../../../lib/format-code.js';
+import { getTemplateAppFile, GENERATOR_ROUTE_DIR, getStarterDir } from '../../../lib/build.js';
+import { getV2Flags, convertTemplateToRemixVersion, convertRouteToV1 } from '../../../lib/remix-version-interop.js';
+import { getRemixConfig } from '../../remix-config.js';
+import { findFileWithExtension } from '../../file.js';
+
+const NO_LOCALE_PATTERNS = [/robots\.txt/];
+const ROUTE_MAP = {
+  home: ["_index", "$"],
+  page: "pages*",
+  cart: "cart",
+  products: "products*",
+  collections: "collections*",
+  policies: "policies*",
+  blogs: "blogs*",
+  account: "account*",
+  search: ["search", "api.predictive-search"],
+  robots: "[robots.txt]",
+  sitemap: "[sitemap.xml]"
+};
+let allRouteTemplateFiles = [];
+async function getResolvedRoutes(routeKeys = Object.keys(ROUTE_MAP)) {
+  if (allRouteTemplateFiles.length === 0) {
+    allRouteTemplateFiles = (await readdir(getTemplateAppFile(GENERATOR_ROUTE_DIR))).map((item) => item.replace(/\.tsx?$/, ""));
+  }
+  const routeGroups = {};
+  const resolvedRouteFiles = [];
+  for (const key of routeKeys) {
+    routeGroups[key] = [];
+    const value = ROUTE_MAP[key];
+    if (!value) {
+      throw new AbortError(
+        `No route found for ${key}. Try one of ${ALL_ROUTE_CHOICES.join()}.`
+      );
+    }
+    const routes = Array.isArray(value) ? value : [value];
+    for (const route of routes) {
+      const routePrefix = route.replace("*", "");
+      routeGroups[key].push(
+        ...allRouteTemplateFiles.filter((file) => file.startsWith(routePrefix))
+      );
+    }
+    resolvedRouteFiles.push(...routeGroups[key]);
+  }
+  return { routeGroups, resolvedRouteFiles };
+}
+const ALL_ROUTE_CHOICES = [...Object.keys(ROUTE_MAP), "all"];
+async function generateRoutes(options) {
+  const { routeGroups, resolvedRouteFiles } = options.routeName === "all" ? await getResolvedRoutes() : await getResolvedRoutes([options.routeName]);
+  const { rootDirectory, appDirectory, future, tsconfigPath } = await getRemixConfig(options.directory);
+  const routesArray = resolvedRouteFiles.flatMap(
+    (item) => GENERATOR_ROUTE_DIR + "/" + item
+  );
+  const v2Flags = await getV2Flags(rootDirectory, future);
+  const formatOptions = await getCodeFormatOptions(rootDirectory);
+  const localePrefix = await getLocalePrefix(
+    appDirectory,
+    options,
+    v2Flags.isV2RouteConvention
+  );
+  const typescript = options.typescript ?? !!tsconfigPath;
+  const transpilerOptions = typescript ? void 0 : await getJsTranspilerOptions(rootDirectory);
+  const routes = [];
+  for (const route of routesArray) {
+    routes.push(
+      await generateProjectFile(route, {
+        ...options,
+        typescript,
+        localePrefix,
+        rootDirectory,
+        appDirectory,
+        formatOptions,
+        transpilerOptions,
+        v2Flags
+      })
+    );
+  }
+  return {
+    routes,
+    routeGroups,
+    isTypescript: typescript,
+    transpilerOptions,
+    v2Flags,
+    formatOptions
+  };
+}
+async function getLocalePrefix(appDirectory, { localePrefix, routeName }, isV2RouteConvention = true) {
+  if (localePrefix)
+    return localePrefix;
+  if (localePrefix !== void 0 || routeName === "all")
+    return;
+  const existingFiles = await readdir(joinPath(appDirectory, "routes")).catch(
+    () => []
+  );
+  const homeRouteWithLocaleRE = isV2RouteConvention ? /^\(\$(\w+)\)\._index.[jt]sx?$/ : /^\(\$(\w+)\)$/;
+  const homeRouteWithLocale = existingFiles.find(
+    (file) => homeRouteWithLocaleRE.test(file)
+  );
+  if (homeRouteWithLocale) {
+    return homeRouteWithLocale.match(homeRouteWithLocaleRE)?.[1];
+  }
+}
+async function generateProjectFile(routeFrom, {
+  rootDirectory,
+  appDirectory,
+  typescript,
+  force,
+  adapter,
+  templatesRoot = getStarterDir(),
+  transpilerOptions,
+  formatOptions,
+  localePrefix,
+  v2Flags = {},
+  signal
+}) {
+  const extension = (routeFrom.match(/(\.[jt]sx?)$/) ?? [])[1] ?? ".tsx";
+  routeFrom = routeFrom.replace(extension, "");
+  const routeTemplatePath = getTemplateAppFile(
+    routeFrom + extension,
+    templatesRoot
+  );
+  const allFilesToGenerate = await findRouteDependencies(
+    routeTemplatePath,
+    getTemplateAppFile("", templatesRoot)
+  );
+  const routeDestinationPath = joinPath(
+    appDirectory,
+    getDestinationRoute(routeFrom, localePrefix, v2Flags) + (typescript ? extension : extension.replace(".ts", ".js"))
+  );
+  const result = {
+    operation: "created",
+    sourceRoute: routeFrom,
+    destinationRoute: relativizePath(routeDestinationPath, rootDirectory)
+  };
+  if (!force && await fileExists(routeDestinationPath)) {
+    const shouldOverwrite = await renderConfirmationPrompt({
+      message: `The file ${result.destinationRoute} already exists. Do you want to replace it?`,
+      defaultValue: false,
+      confirmationMessage: "Yes",
+      cancellationMessage: "No",
+      abortSignal: signal
+    });
+    if (!shouldOverwrite)
+      return { ...result, operation: "skipped" };
+    result.operation = "replaced";
+  }
+  for (const filePath of allFilesToGenerate) {
+    const isRoute = filePath.startsWith(GENERATOR_ROUTE_DIR + "/");
+    const destinationPath = isRoute ? routeDestinationPath : joinPath(
+      appDirectory,
+      filePath.replace(/\.ts(x?)$/, `.${typescript ? "ts$1" : "js$1"}`)
+    );
+    if (!await fileExists(dirname(destinationPath))) {
+      await mkdir(dirname(destinationPath));
+    }
+    if (!/\.[jt]sx?$/.test(filePath)) {
+      await copyFile(
+        getTemplateAppFile(filePath, templatesRoot),
+        destinationPath
+      );
+      continue;
+    }
+    let templateContent = convertTemplateToRemixVersion(
+      await readFile(getTemplateAppFile(filePath, templatesRoot)),
+      v2Flags
+    );
+    if (!typescript) {
+      templateContent = transpileFile(templateContent, transpilerOptions);
+    }
+    if (adapter) {
+      templateContent = templateContent.replace(
+        /@shopify\/remix-oxygen/g,
+        adapter
+      );
+    }
+    templateContent = formatCode(
+      templateContent,
+      formatOptions,
+      destinationPath
+    );
+    await writeFile(destinationPath, templateContent);
+  }
+  return result;
+}
+function getDestinationRoute(routeFrom, localePrefix, v2Flags) {
+  const routePath = routeFrom.replace(GENERATOR_ROUTE_DIR + "/", "");
+  const filePrefix = localePrefix && !NO_LOCALE_PATTERNS.some((pattern) => pattern.test(routePath)) ? `($${localePrefix})` + (v2Flags.isV2RouteConvention ? "." : "/") : "";
+  return GENERATOR_ROUTE_DIR + "/" + filePrefix + (v2Flags.isV2RouteConvention ? routePath : convertRouteToV1(routePath));
+}
+async function findRouteDependencies(routeFilePath, appDirectory) {
+  const filesToCheck = /* @__PURE__ */ new Set([routeFilePath]);
+  const fileDependencies = /* @__PURE__ */ new Set([relativePath(appDirectory, routeFilePath)]);
+  for (const filePath of filesToCheck) {
+    const importMatches = (await readFile(filePath, { encoding: "utf8" })).matchAll(/^(import|export)\s+.*?\s+from\s+['"](.*?)['"];?$/gims);
+    for (let [, , match] of importMatches) {
+      if (!match || !/^(\.|~)/.test(match))
+        continue;
+      match = match.replace(
+        "~",
+        relativePath(dirname(filePath), appDirectory) || "."
+      );
+      const resolvedMatchPath = resolvePath(dirname(filePath), match);
+      const absoluteFilepath = (await findFileWithExtension(
+        dirname(resolvedMatchPath),
+        basename(resolvedMatchPath)
+      )).filepath || resolvedMatchPath;
+      if (!absoluteFilepath.includes(`/${GENERATOR_ROUTE_DIR}/`)) {
+        fileDependencies.add(relativePath(appDirectory, absoluteFilepath));
+        if (/\.[jt]sx?$/.test(absoluteFilepath)) {
+          filesToCheck.add(absoluteFilepath);
+        }
+      }
+    }
+  }
+  return [...fileDependencies];
+}
+async function getJsTranspilerOptions(rootDirectory) {
+  const jsConfigPath = joinPath(rootDirectory, "jsconfig.json");
+  if (!await fileExists(jsConfigPath))
+    return;
+  return JSON.parse(
+    (await readFile(jsConfigPath, { encoding: "utf8" })).replace(
+      /^\s*\/\/.*$/gm,
+      ""
+    )
+  )?.compilerOptions;
+}
+async function renderRoutePrompt(options) {
+  const generateAll = await renderConfirmationPrompt({
+    message: "Scaffold all standard route files? " + Object.keys(ROUTE_MAP).join(", "),
+    confirmationMessage: "Yes",
+    cancellationMessage: "No",
+    ...options
+  });
+  return generateAll ? "all" : [];
+}
+
+export { ALL_ROUTE_CHOICES, generateProjectFile, generateRoutes, getResolvedRoutes, renderRoutePrompt };