@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/lib/onboarding/local.js

@@ -0,0 +1,229 @@
+import { copy } from 'fs-extra/esm';
+import { writeFile } from '@shopify/cli-kit/node/fs';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { hyphenate } from '@shopify/cli-kit/common/string';
+import colors from '@shopify/cli-kit/node/colors';
+import { renderSelectPrompt, renderSuccess, renderConfirmationPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
+import { handleStorefrontLink, handleProjectLocation, createAbortHandler, generateProjectEntries, handleLanguage, createInitialCommit, handleCssStrategy, commitAll, handleDependencies, handleCliShortcut, handleI18n, handleRouteGeneration, renderProjectReady } from './common.js';
+import { createStorefront } from '../graphql/admin/create-storefront.js';
+import { waitForJob } from '../graphql/admin/fetch-job.js';
+import { getStarterDir } from '../build.js';
+import { replaceFileContent } from '../file.js';
+import { setUserAccount, setStorefront } from '../shopify-config.js';
+import { getCliCommand, ALIAS_NAME } from '../shell.js';
+import { CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+
+async function setupLocalStarterTemplate(options, controller) {
+  const templateAction = options.mockShop ? "mock" : await renderSelectPrompt({
+    message: "Connect to Shopify",
+    choices: [
+      {
+        label: "Use sample data from Mock.shop (no login required)",
+        value: "mock"
+      },
+      { label: "Link your Shopify account", value: "link" }
+    ],
+    defaultValue: "mock",
+    abortSignal: controller.signal
+  });
+  const storefrontInfo = templateAction === "link" ? await handleStorefrontLink(controller) : void 0;
+  const project = await handleProjectLocation({
+    ...options,
+    storefrontInfo,
+    controller
+  });
+  if (!project)
+    return;
+  if (templateAction === "mock")
+    project.storefrontTitle = "Mock.shop";
+  const abort = createAbortHandler(controller, project);
+  const createStorefrontPromise = storefrontInfo && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
+    if (jobId)
+      await waitForJob(storefrontInfo.session, jobId);
+    return storefront;
+  }).catch(abort);
+  const templateDir = getStarterDir();
+  let backgroundWorkPromise = copy(
+    templateDir,
+    project.directory,
+    {
+      filter: (filepath) => !/^(app|dist|node_modules)\//i.test(
+        relativePath(templateDir, filepath)
+      )
+    }
+  ).then(
+    () => generateProjectEntries({
+      rootDirectory: project.directory,
+      appDirectory: joinPath(project.directory, "app"),
+      typescript: true
+    })
+  ).catch(abort);
+  const tasks = [
+    {
+      title: "Creating storefront",
+      task: async () => {
+        await createStorefrontPromise;
+      }
+    },
+    {
+      title: "Setting up project",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    }
+  ];
+  backgroundWorkPromise = backgroundWorkPromise.then(() => {
+    const promises = [
+      replaceFileContent(
+        joinPath(project.directory, "package.json"),
+        false,
+        (content) => content.replace(
+          /"name": "[^"]+"/,
+          `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
+        )
+      )
+    ];
+    const envLeadingComment = "# The variables added in this file are only available locally in MiniOxygen\n";
+    if (storefrontInfo && createStorefrontPromise) {
+      promises.push(
+        setUserAccount(project.directory, storefrontInfo),
+        createStorefrontPromise.then(
+          (storefront) => setStorefront(project.directory, storefront)
+        ),
+        writeFile(joinPath(project.directory, ".env"), envLeadingComment)
+      );
+    } else if (templateAction === "mock") {
+      promises.push(
+        writeFile(
+          joinPath(project.directory, ".env"),
+          envLeadingComment + "\n" + [
+            ["SESSION_SECRET", "foobar"],
+            ["PUBLIC_STORE_DOMAIN", "mock.shop"]
+          ].map(([key, value]) => `${key}="${value}"`).join("\n") + "\n"
+        )
+      );
+    }
+    return Promise.all(promises).catch(abort);
+  });
+  const { language, transpileProject } = await handleLanguage(
+    project.directory,
+    controller,
+    options.language
+  );
+  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(
+    () => options.git ? createInitialCommit(project.directory) : void 0
+  );
+  const { setupCss, cssStrategy } = await handleCssStrategy(
+    project.directory,
+    controller,
+    options.styling
+  );
+  if (cssStrategy) {
+    backgroundWorkPromise = backgroundWorkPromise.then(() => setupCss().catch(abort)).then(
+      () => options.git ? commitAll(
+        project.directory,
+        "Setup " + CSS_STRATEGY_NAME_MAP[cssStrategy]
+      ) : void 0
+    );
+  }
+  const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
+    project.directory,
+    controller,
+    options.installDeps
+  );
+  const setupSummary = {
+    language,
+    packageManager,
+    cssStrategy,
+    depsInstalled: false,
+    hasCreatedShortcut: false
+  };
+  if (shouldInstallDeps) {
+    const installingDepsPromise = backgroundWorkPromise.then(async () => {
+      try {
+        await installDeps();
+        setupSummary.depsInstalled = true;
+      } catch (error) {
+        setupSummary.depsError = error;
+      }
+    });
+    tasks.push({
+      title: "Installing dependencies. This could take a few minutes",
+      task: async () => {
+        await installingDepsPromise;
+      }
+    });
+  }
+  const pkgManagerCommand = await getCliCommand("", packageManager);
+  const { createShortcut, showShortcutBanner } = await handleCliShortcut(
+    controller,
+    pkgManagerCommand,
+    options.shortcut
+  );
+  if (createShortcut) {
+    backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+      setupSummary.hasCreatedShortcut = await createShortcut();
+    });
+    showShortcutBanner();
+  }
+  const cliCommand = createShortcut ? ALIAS_NAME : pkgManagerCommand;
+  renderSuccess({
+    headline: [
+      { userInput: storefrontInfo?.title ?? project.name },
+      "is ready to build."
+    ]
+  });
+  const continueWithSetup = (options.i18n ?? options.routes) !== void 0 || await renderConfirmationPrompt({
+    message: "Do you want to scaffold routes and core functionality?",
+    confirmationMessage: "Yes, set up now",
+    cancellationMessage: "No, set up later " + colors.dim(`(run \`${cliCommand} setup\`)`),
+    abortSignal: controller.signal
+  });
+  if (continueWithSetup) {
+    const { i18nStrategy, setupI18n } = await handleI18n(
+      controller,
+      cliCommand,
+      options.i18n
+    );
+    const { setupRoutes } = await handleRouteGeneration(
+      controller,
+      options.routes || true
+    );
+    setupSummary.i18n = i18nStrategy;
+    backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+      await setupI18n({
+        rootDirectory: project.directory,
+        serverEntryPoint: language === "ts" ? "server.ts" : "server.js"
+      }).then(
+        () => options.git ? commitAll(
+          project.directory,
+          `Setup markets support using ${i18nStrategy}`
+        ) : void 0
+      ).catch((error) => {
+        setupSummary.i18nError = error;
+      });
+      await setupRoutes(project.directory, language, i18nStrategy).then((routes) => {
+        setupSummary.routes = routes;
+        if (options.git && routes) {
+          return commitAll(
+            project.directory,
+            `Generate routes for core functionality`
+          );
+        }
+      }).catch((error) => {
+        setupSummary.routesError = error;
+      });
+    });
+  }
+  await renderTasks(tasks);
+  if (options.git) {
+    await commitAll(project.directory, "Lockfile");
+  }
+  await renderProjectReady(project, setupSummary);
+  return {
+    ...project,
+    ...setupSummary
+  };
+}
+
+export { setupLocalStarterTemplate };

package/dist/lib/onboarding/remote.js

@@ -0,0 +1,89 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { copyFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
+import { getLatestTemplates } from '../template-downloader.js';
+import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, renderProjectReady } from './common.js';
+
+async function setupRemoteTemplate(options, controller) {
+  const isOfficialTemplate = options.template === "demo-store" || options.template === "hello-world";
+  if (!isOfficialTemplate) {
+    throw new AbortError(
+      "Only `demo-store` and `hello-world` are supported in --template flag for now.",
+      "Skip the --template flag to run the setup flow."
+    );
+  }
+  const appTemplate = options.template;
+  const backgroundDownloadPromise = getLatestTemplates({
+    signal: controller.signal
+  }).catch((error) => {
+    throw abort(error);
+  });
+  const project = await handleProjectLocation({ ...options, controller });
+  if (!project)
+    return;
+  const abort = createAbortHandler(controller, project);
+  let backgroundWorkPromise = backgroundDownloadPromise.then(
+    ({ templatesDir }) => copyFile(joinPath(templatesDir, appTemplate), project.directory).catch(
+      abort
+    )
+  );
+  const { language, transpileProject } = await handleLanguage(
+    project.directory,
+    controller,
+    options.language
+  );
+  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(() => createInitialCommit(project.directory));
+  const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
+    project.directory,
+    controller,
+    options.installDeps
+  );
+  const setupSummary = {
+    language,
+    packageManager,
+    depsInstalled: false,
+    hasCreatedShortcut: false
+  };
+  const tasks = [
+    {
+      title: "Downloading template",
+      task: async () => {
+        await backgroundDownloadPromise;
+      }
+    },
+    {
+      title: "Setting up project",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    }
+  ];
+  if (shouldInstallDeps) {
+    tasks.push({
+      title: "Installing dependencies. This could take a few minutes",
+      task: async () => {
+        try {
+          await installDeps();
+          setupSummary.depsInstalled = true;
+        } catch (error) {
+          setupSummary.depsError = error;
+        }
+      }
+    });
+  }
+  await renderTasks(tasks);
+  await renderProjectReady(project, setupSummary);
+  if (isOfficialTemplate) {
+    renderInfo({
+      headline: `Your project will display inventory from the Hydrogen Demo Store.`,
+      body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
+    });
+  }
+  return {
+    ...project,
+    ...setupSummary
+  };
+}
+
+export { setupRemoteTemplate };

package/dist/lib/remix-version-interop.js

@@ -10,10 +10,10 @@ function isRemixV2() {
     return false;
   }
 }
-async function getV2Flags(root) {
+async function getV2Flags(root, remixConfigFuture) {
   const isV2 = isRemixV2();
   const futureFlags = {
-    ...!isV2 && (await getRemixConfig(root, true)).future
+    ...!isV2 && (remixConfigFuture ?? (await getRemixConfig(root, true)).future)
   };
   return {
     isV2Meta: isV2 || !!futureFlags.v2_meta,
@@ -21,8 +21,8 @@ async function getV2Flags(root) {
     isV2RouteConvention: isV2 ? !isV1RouteConventionInstalled() : !!futureFlags.v2_routeConvention
   };
 }
-function convertRouteToV2(route) {
-  return route.replace(/\/index$/, "/_index").replace(/(?<!^)\//g, ".");
+function convertRouteToV1(route) {
+  return route.replace(/(^|\.)_index$/, "$1index").replace(/\.(?!\w+\])/g, "/");
 }
 function convertTemplateToRemixVersion(template, { isV2Meta, isV2ErrorBoundary }) {
   template = isV2Meta ? convertToMetaV2(template) : convertToMetaV1(template);
@@ -51,4 +51,4 @@ function isV1RouteConventionInstalled() {
   }
 }
 
-export { convertRouteToV2, convertTemplateToRemixVersion, getV2Flags, isRemixV2 };
+export { convertRouteToV1, convertTemplateToRemixVersion, getV2Flags, isRemixV2 };

package/dist/lib/remix-version-interop.test.js

@@ -1,7 +1,17 @@
 import { describe, it, expect } from 'vitest';
-import { convertTemplateToRemixVersion } from './remix-version-interop.js';
+import { convertRouteToV1, convertTemplateToRemixVersion } from './remix-version-interop.js';
 
 describe("remix-version-interop", () => {
+  describe("v2_routeConvention", () => {
+    it("converts routes to v1", () => {
+      expect(convertRouteToV1("_index")).toEqual("index");
+      expect(convertRouteToV1("path.to.file")).toEqual("path/to/file");
+      expect(convertRouteToV1("path.to._index")).toEqual("path/to/index");
+      expect(convertRouteToV1("patht.to.[sitemap.xml]")).toEqual(
+        "patht/to/[sitemap.xml]"
+      );
+    });
+  });
   describe("v2_meta", () => {
     const META_TEMPLATE = `
     import {type MetaFunction} from '@shopify/remix-oxygen';

package/dist/lib/render-errors.js

@@ -1,11 +1,12 @@
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import { hydrogenStorefrontsUrl } from './admin-urls.js';
-import { parseGid } from './graphql.js';
+import { parseGid } from './gid.js';
 
 function renderMissingStorefront({
-  adminSession,
-  storefront
+  session,
+  storefront,
+  cliCommand
 }) {
   renderFatalError({
     name: "NoStorefrontError",
@@ -15,22 +16,23 @@ function renderMissingStorefront({
     )}`.value,
     tryMessage: outputContent`Couldn’t find ${storefront.title} (ID: ${parseGid(
       storefront.id
-    )}) on ${adminSession.storeFqdn}. Check that the storefront exists and run ${outputToken.genericShellCommand(
-      `npx shopify hydrogen link`
+    )}) on ${session.storeFqdn}. Check that the storefront exists and run ${outputToken.genericShellCommand(
+      `${cliCommand} link`
     )} to link this project to it.\n\n${outputToken.link(
       "Hydrogen Storefronts Admin",
-      hydrogenStorefrontsUrl(adminSession)
+      hydrogenStorefrontsUrl(session)
     )}`.value
   });
 }
-function renderMissingLink({ adminSession }) {
+function renderMissingLink({ session, cliCommand }) {
   renderFatalError({
     name: "NoLinkedStorefrontError",
     type: 0,
-    message: `No linked Hydrogen storefront on ${adminSession.storeFqdn}`,
-    tryMessage: outputContent`To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run ${outputToken.genericShellCommand(
-      `npx shopify hydrogen link`
-    )}.`.value
+    message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
+    tryMessage: [
+      "To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run",
+      { command: `${cliCommand} link` }
+    ]
   });
 }
 

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