@shopify/cli-hydrogen 5.0.2 → 5.1.0

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

@@ -0,0 +1,137 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { ts, tsx, js, jsx } from '@ast-grep/napi';
+import { findFileWithExtension, replaceFileContent } from '../../file.js';
+
+const astGrep = { ts, tsx, js, jsx };
+async function replaceRemixConfig(rootDirectory, formatConfig, newProperties) {
+  const { filepath, astType } = await findFileWithExtension(
+    rootDirectory,
+    "remix.config"
+  );
+  if (!filepath || !astType) {
+    throw new AbortError(
+      `Could not find remix.config.js file in ${rootDirectory}`
+    );
+  }
+  await replaceFileContent(filepath, formatConfig, async (content) => {
+    const root = astGrep[astType].parse(content).root();
+    const remixConfigNode = root.find({
+      rule: {
+        kind: "object",
+        inside: {
+          any: [
+            {
+              kind: "export_statement"
+            },
+            {
+              kind: "assignment_expression",
+              has: {
+                kind: "member_expression",
+                field: "left",
+                pattern: "module.exports"
+              }
+            }
+          ]
+        }
+      }
+    });
+    if (!remixConfigNode) {
+      throw new AbortError(
+        "Could not find a default export in remix.config.js"
+      );
+    }
+    newProperties = { ...newProperties };
+    for (const key of Object.keys(newProperties)) {
+      const propertyNode = remixConfigNode.find({
+        rule: {
+          kind: "pair",
+          has: {
+            field: "key",
+            regex: `^${key}$`
+          }
+        }
+      });
+      if (propertyNode?.text().endsWith(" " + JSON.stringify(newProperties[key]))) {
+        delete newProperties[key];
+      }
+    }
+    if (Object.keys(newProperties).length === 0) {
+      return;
+    }
+    const childrenNodes = remixConfigNode.children();
+    const lastNode = childrenNodes.find((node) => node.text().startsWith("future:")) ?? childrenNodes.pop();
+    if (!lastNode) {
+      throw new AbortError("Could not add properties to Remix config");
+    }
+    const { start } = lastNode.range();
+    return content.slice(0, start.index) + JSON.stringify(newProperties).slice(1, -1) + "," + content.slice(start.index);
+  });
+}
+async function replaceRootLinks(appDirectory, formatConfig, importer) {
+  const { filepath, astType } = await findFileWithExtension(appDirectory, "root");
+  if (!filepath || !astType) {
+    throw new AbortError(`Could not find root file in ${appDirectory}`);
+  }
+  await replaceFileContent(filepath, formatConfig, async (content) => {
+    const importStatement = `import ${importer.isDefault ? importer.name : `{${importer.name}}`} from '${(importer.isAbsolute ? "" : "./") + importer.path}';`;
+    if (content.includes(importStatement.split("from")[0])) {
+      return;
+    }
+    const root = astGrep[astType].parse(content).root();
+    const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
+    const linksReturnNode = root.find({
+      utils: {
+        "has-links-id": {
+          has: {
+            kind: "identifier",
+            pattern: "links"
+          }
+        }
+      },
+      rule: {
+        kind: "return_statement",
+        pattern: "return [$$$]",
+        inside: {
+          any: [
+            {
+              kind: "function_declaration",
+              matches: "has-links-id"
+            },
+            {
+              kind: "variable_declarator",
+              matches: "has-links-id"
+            }
+          ],
+          stopBy: "end",
+          inside: {
+            stopBy: "end",
+            kind: "export_statement"
+          }
+        }
+      }
+    });
+    if (!lastImportNode || !linksReturnNode) {
+      throw new AbortError(
+        'Could not find a "links" export in root file. Please add one and try again.'
+      );
+    }
+    const lastImportContent = lastImportNode.text();
+    const linksExportReturnContent = linksReturnNode.text();
+    const newLinkReturnItem = importer.isConditional ? `...(${importer.name} ? [{ rel: 'stylesheet', href: ${importer.name} }] : [])` : `{rel: 'stylesheet', href: ${importer.name}}`;
+    return content.replace(lastImportContent, lastImportContent + "\n" + importStatement).replace(
+      linksExportReturnContent,
+      linksExportReturnContent.replace("[", `[${newLinkReturnItem},`)
+    );
+  });
+}
+function injectCssBundlingLink(appDirectory, formatConfig) {
+  return replaceRootLinks(appDirectory, formatConfig, {
+    name: "cssBundleHref",
+    path: "@remix-run/css-bundle",
+    isDefault: false,
+    isConditional: true,
+    isAbsolute: true
+  });
+}
+
+export { injectCssBundlingLink, replaceRemixConfig, replaceRootLinks };

package/dist/lib/setups/css/tailwind.js

@@ -0,0 +1,54 @@
+import { outputInfo } from '@shopify/cli-kit/node/output';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
+import { getCodeFormatOptions } from '../../format-code.js';
+import { replaceRemixConfig, replaceRootLinks } from './replacers.js';
+
+const tailwindCssPath = "styles/tailwind.css";
+async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
+  const relativeAppDirectory = relativePath(rootDirectory, appDirectory);
+  const assetMap = {
+    "tailwind.config.js": "tailwind.config.js",
+    "postcss.config.js": "postcss.config.js",
+    "tailwind.css": joinPath(relativeAppDirectory, tailwindCssPath)
+  };
+  if (futureOptions.tailwind && futureOptions.postcss) {
+    outputInfo(`Tailwind and PostCSS are already setup in ${rootDirectory}.`);
+    return;
+  }
+  if (!await canWriteFiles(assetMap, appDirectory, force)) {
+    outputInfo(
+      `Skipping CSS setup as some files already exist. You may use \`--force\` or \`-f\` to override it.`
+    );
+    return;
+  }
+  const workPromise = Promise.all([
+    mergePackageJson("tailwind", rootDirectory),
+    copyAssets(
+      "tailwind",
+      assetMap,
+      rootDirectory,
+      (content, filepath) => filepath === "tailwind.config.js" ? content.replace("{src-dir}", relativeAppDirectory) : content
+    ),
+    getCodeFormatOptions(rootDirectory).then(
+      (formatConfig) => Promise.all([
+        replaceRemixConfig(rootDirectory, formatConfig, {
+          tailwind: true,
+          postcss: true
+        }),
+        replaceRootLinks(appDirectory, formatConfig, {
+          name: "tailwindCss",
+          path: tailwindCssPath,
+          isDefault: true
+        })
+      ])
+    )
+  ]);
+  return {
+    workPromise,
+    generatedAssets: Object.values(assetMap),
+    helpUrl: "https://tailwindcss.com/docs/configuration"
+  };
+}
+
+export { setupTailwind };

package/dist/lib/setups/css/vanilla-extract.js

@@ -0,0 +1,22 @@
+import { mergePackageJson } from './assets.js';
+import { getCodeFormatOptions } from '../../format-code.js';
+import { injectCssBundlingLink } from './replacers.js';
+
+async function setupVanillaExtract({
+  rootDirectory,
+  appDirectory
+}) {
+  const workPromise = Promise.all([
+    mergePackageJson("vanilla-extract", rootDirectory),
+    getCodeFormatOptions(rootDirectory).then(
+      (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
+    )
+  ]);
+  return {
+    workPromise,
+    generatedAssets: [],
+    helpUrl: "https://vanilla-extract.style/documentation/styling/"
+  };
+}
+
+export { setupVanillaExtract };

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { getLocaleFromRequest } from './templates/domains.js';
+
+describe("Setup i18n with domains", () => {
+  it("extracts the locale from the domain", () => {
+    expect(
+      getLocaleFromRequest(new Request("https://example.com"))
+    ).toMatchObject({
+      language: "EN",
+      country: "US"
+    });
+    expect(
+      getLocaleFromRequest(new Request("https://example.jp"))
+    ).toMatchObject({
+      language: "JA",
+      country: "JP"
+    });
+    expect(
+      getLocaleFromRequest(new Request("https://www.example.es"))
+    ).toMatchObject({
+      language: "ES",
+      country: "ES"
+    });
+  });
+});

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

@@ -0,0 +1,46 @@
+import { fileURLToPath } from 'node:url';
+import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
+import { fileExists, readFile } from '@shopify/cli-kit/node/fs';
+import { getCodeFormatOptions } from '../../format-code.js';
+import { replaceServerI18n, replaceRemixEnv } from './replacers.js';
+
+const SETUP_I18N_STRATEGIES = [
+  "subfolders",
+  "domains",
+  "subdomains"
+];
+const I18N_STRATEGY_NAME_MAP = {
+  subfolders: "Subfolders (example.com/fr-ca/...)",
+  subdomains: "Subdomains (de.example.com/...)",
+  domains: "Top-level domains (example.jp/...)"
+};
+const I18N_CHOICES = [...SETUP_I18N_STRATEGIES, "none"];
+async function setupI18nStrategy(strategy, options) {
+  const isTs = options.serverEntryPoint?.endsWith(".ts") ?? false;
+  const templatePath = fileURLToPath(
+    new URL(`./templates/${strategy}${isTs ? ".ts" : ".js"}`, import.meta.url)
+  );
+  if (!await fileExists(templatePath)) {
+    throw new Error("Unknown strategy");
+  }
+  const template = await readFile(templatePath);
+  const formatConfig = await getCodeFormatOptions(options.rootDirectory);
+  await replaceServerI18n(options, formatConfig, template);
+  await replaceRemixEnv(options, formatConfig, template);
+}
+async function renderI18nPrompt(options) {
+  const i18nStrategies = Object.entries({
+    ...I18N_STRATEGY_NAME_MAP,
+    ...options?.extraChoices
+  });
+  return renderSelectPrompt({
+    message: "Select a URL structure to support multiple markets",
+    ...options,
+    choices: i18nStrategies.map(([value, label]) => ({
+      value,
+      label
+    }))
+  });
+}
+
+export { I18N_CHOICES, I18N_STRATEGY_NAME_MAP, SETUP_I18N_STRATEGIES, renderI18nPrompt, setupI18nStrategy };

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