@shopify/cli-hydrogen 5.0.2 → 5.1.1

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

@@ -0,0 +1,89 @@
+import { readFile, writeFile, fileExists } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { readAndParsePackageJson, writePackageJSON } from '@shopify/cli-kit/node/node-package-manager';
+import { GENERATOR_SETUP_ASSETS_SUB_DIRS, getAssetDir } from '../../build.js';
+
+const SETUP_CSS_STRATEGIES = GENERATOR_SETUP_ASSETS_SUB_DIRS;
+function copyAssets(feature, assets, rootDirectory, replacer = (content, filename) => content) {
+  const setupAssetsPath = getAssetDir(feature);
+  return Promise.all(
+    Object.entries(assets).map(async ([source, destination]) => {
+      const content = await readFile(joinPath(setupAssetsPath, source));
+      await writeFile(
+        joinPath(rootDirectory, destination),
+        replacer(content, source)
+      );
+    })
+  );
+}
+async function canWriteFiles(assetMap, directory, force) {
+  const fileExistPromises = Object.values(assetMap).map(
+    (file) => fileExists(joinPath(directory, file)).then(
+      (exists) => exists ? file : null
+    )
+  );
+  const existingFiles = (await Promise.all(fileExistPromises)).filter(
+    Boolean
+  );
+  if (existingFiles.length > 0) {
+    if (!force) {
+      const overwrite = await renderConfirmationPrompt({
+        message: `Some files already exist (${existingFiles.join(
+          ", "
+        )}). Overwrite?`,
+        defaultValue: false
+      });
+      if (!overwrite) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+const MANAGED_PACKAGE_JSON_KEYS = Object.freeze([
+  "dependencies",
+  "devDependencies",
+  "peerDependencies"
+]);
+async function mergePackageJson(feature, projectDir) {
+  const targetPkgJson = await readAndParsePackageJson(
+    joinPath(projectDir, "package.json")
+  );
+  const sourcePkgJson = await readAndParsePackageJson(
+    joinPath(getAssetDir(feature), "package.json")
+  );
+  delete sourcePkgJson.comment;
+  const unmanagedKeys = Object.keys(sourcePkgJson).filter(
+    (key) => !MANAGED_PACKAGE_JSON_KEYS.includes(key)
+  );
+  for (const key of unmanagedKeys) {
+    const sourceValue = sourcePkgJson[key];
+    const targetValue = targetPkgJson[key];
+    const newValue = Array.isArray(sourceValue) && Array.isArray(targetValue) ? [...targetValue, ...sourceValue] : typeof sourceValue === "object" && typeof targetValue === "object" ? { ...targetValue, ...sourceValue } : sourceValue;
+    targetPkgJson[key] = newValue;
+  }
+  const remixVersion = Object.entries(targetPkgJson.dependencies || {}).find(
+    ([dep]) => dep.startsWith("@remix-run/")
+  )?.[1];
+  for (const key of MANAGED_PACKAGE_JSON_KEYS) {
+    if (sourcePkgJson[key]) {
+      targetPkgJson[key] = [
+        .../* @__PURE__ */ new Set([
+          ...Object.keys(targetPkgJson[key] ?? {}),
+          ...Object.keys(sourcePkgJson[key] ?? {})
+        ])
+      ].sort().reduce((acc, dep) => {
+        let version = sourcePkgJson[key]?.[dep] ?? targetPkgJson[key]?.[dep];
+        if (dep.startsWith("@remix-run/") && remixVersion) {
+          version = remixVersion;
+        }
+        acc[dep] = version;
+        return acc;
+      }, {});
+    }
+  }
+  await writePackageJSON(projectDir, targetPkgJson);
+}
+
+export { SETUP_CSS_STRATEGIES, canWriteFiles, copyAssets, mergePackageJson };

package/dist/lib/setups/css/css-modules.js

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

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

@@ -0,0 +1,44 @@
+import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
+import { setupTailwind } from './tailwind.js';
+import { setupPostCss } from './postcss.js';
+import { setupCssModules } from './css-modules.js';
+import { setupVanillaExtract } from './vanilla-extract.js';
+export { SETUP_CSS_STRATEGIES } from './assets.js';
+
+const CSS_STRATEGY_NAME_MAP = {
+  tailwind: "Tailwind",
+  "css-modules": "CSS Modules",
+  "vanilla-extract": "Vanilla Extract",
+  postcss: "CSS"
+};
+function setupCssStrategy(strategy, options, force) {
+  switch (strategy) {
+    case "tailwind":
+      return setupTailwind(options, force);
+    case "postcss":
+      return setupPostCss(options, force);
+    case "css-modules":
+      return setupCssModules(options);
+    case "vanilla-extract":
+      return setupVanillaExtract(options);
+    default:
+      throw new Error("Unknown strategy");
+  }
+}
+async function renderCssPrompt(options) {
+  const cssStrategies = Object.entries({
+    ...CSS_STRATEGY_NAME_MAP,
+    ...options?.extraChoices
+  });
+  return renderSelectPrompt({
+    message: "Select a styling library",
+    ...options,
+    choices: cssStrategies.map(([value, label]) => ({
+      value,
+      label
+    })),
+    defaultValue: "tailwind"
+  });
+}
+
+export { CSS_STRATEGY_NAME_MAP, renderCssPrompt, setupCssStrategy };

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

@@ -0,0 +1,34 @@
+import { outputInfo } from '@shopify/cli-kit/node/output';
+import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
+import { getCodeFormatOptions } from '../../format-code.js';
+import { replaceRemixConfig } from './replacers.js';
+
+async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
+  const assetMap = {
+    "postcss.config.js": "postcss.config.js"
+  };
+  if (futureOptions.postcss) {
+    outputInfo(`PostCSS is 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("postcss", rootDirectory),
+    copyAssets("postcss", assetMap, rootDirectory),
+    getCodeFormatOptions(rootDirectory).then(
+      (formatConfig) => replaceRemixConfig(rootDirectory, formatConfig, { postcss: true })
+    )
+  ]);
+  return {
+    workPromise,
+    generatedAssets: Object.values(assetMap),
+    helpUrl: "https://postcss.org/"
+  };
+}
+
+export { setupPostCss };

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