@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/lib/mini-oxygen.js

@@ -10,12 +10,12 @@ async function startMiniOxygen({
   watch = false,
   buildPathWorkerFile,
   buildPathClient,
-  environmentVariables = {}
+  env
 }) {
-  const { default: miniOxygen } = await import('@shopify/mini-oxygen');
-  const miniOxygenPreview = miniOxygen.default ?? miniOxygen;
+  const { default: miniOxygenImport } = await import('@shopify/mini-oxygen');
+  const miniOxygenPreview = miniOxygenImport.default ?? miniOxygenImport;
   const dotenvPath = resolvePath(root, ".env");
-  const { port: actualPort } = await miniOxygenPreview({
+  const miniOxygen = await miniOxygenPreview({
     workerFile: buildPathWorkerFile,
     assetsDir: buildPathClient,
     publicPath: "",
@@ -24,10 +24,10 @@ async function startMiniOxygen({
     autoReload: watch,
     modules: true,
     env: {
-      ...environmentVariables,
+      ...env,
       ...process.env
     },
-    envPath: !Object.keys(environmentVariables).length && await fileExists(dotenvPath) ? dotenvPath : void 0,
+    envPath: !env && await fileExists(dotenvPath) ? dotenvPath : void 0,
     log: () => {
     },
     buildWatchPaths: watch ? [resolvePath(root, buildPathWorkerFile)] : void 0,
@@ -36,18 +36,28 @@ async function startMiniOxygen({
       response
     )
   });
-  const listeningAt = `http://localhost:${actualPort}`;
+  const listeningAt = `http://localhost:${miniOxygen.port}`;
   return {
     listeningAt,
-    port: actualPort,
+    port: miniOxygen.port,
+    reload(nextOptions) {
+      return miniOxygen.reload({
+        env: {
+          ...nextOptions?.env ?? env,
+          ...process.env
+        }
+      });
+    },
     showBanner(options) {
+      console.log("");
       renderSuccess({
         headline: `${options?.headlinePrefix ?? ""}MiniOxygen ${options?.mode ?? "development"} server running.`,
         body: [
-          `View Hydrogen app: ${listeningAt}`,
+          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
           ...options?.extraLines ?? []
         ]
       });
+      console.log("");
     }
   };
 }

package/dist/lib/missing-routes.js

@@ -3,7 +3,6 @@ import { renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
 const REQUIRED_ROUTES = [
   "",
   "cart",
-  "products",
   "products/:productHandle",
   "collections",
   "collections/:collectionHandle",
@@ -12,7 +11,6 @@ const REQUIRED_ROUTES = [
   "pages/:pageHandle",
   "policies/:policyHandle",
   "search",
-  "discount/:discountCode",
   "account",
   "account/login",
   "account/register",

package/dist/lib/onboarding/common.js

@@ -0,0 +1,456 @@
+import { readdir } from 'node:fs/promises';
+import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { renderConfirmationPrompt, renderInfo, renderTextPrompt, renderSelectPrompt, renderFatalError, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { hyphenate, capitalize } from '@shopify/cli-kit/common/string';
+import { resolvePath, basename, joinPath } from '@shopify/cli-kit/node/path';
+import { initializeGitRepository, addAllToGitFromDirectory, createGitCommit } from '@shopify/cli-kit/node/git';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { rmdir, writeFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
+import { outputDebug, outputContent, outputToken, formatPackageManagerCommand } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
+import { login, renderLoginSuccess } from '../auth.js';
+import { renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../setups/i18n/index.js';
+import { titleize } from '../string.js';
+import { ALIAS_NAME, createPlatformShortcut, getCliCommand } from '../shell.js';
+import { transpileProject } from '../transpile-ts.js';
+import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
+import { execAsync } from '../process.js';
+
+const LANGUAGES = {
+  js: "JavaScript",
+  ts: "TypeScript"
+};
+async function handleI18n(controller, cliCommand, flagI18n) {
+  let selection = flagI18n ?? await renderI18nPrompt({
+    abortSignal: controller.signal,
+    extraChoices: {
+      none: "Set up later " + colors.dim(`(run \`${cliCommand} setup markets\`)`)
+    }
+  });
+  const i18nStrategy = selection === "none" ? void 0 : selection;
+  return {
+    i18nStrategy,
+    setupI18n: async (options) => {
+      if (i18nStrategy) {
+        await setupI18nStrategy(i18nStrategy, options);
+      }
+    }
+  };
+}
+async function handleRouteGeneration(controller, flagRoutes) {
+  const routesToScaffold = flagRoutes ? "all" : await renderRoutePrompt({
+    abortSignal: controller.signal
+  });
+  const needsRouteGeneration = routesToScaffold === "all" || routesToScaffold.length > 0;
+  return {
+    needsRouteGeneration,
+    setupRoutes: async (directory, language, i18nStrategy) => {
+      if (needsRouteGeneration) {
+        const result = await generateRoutes({
+          routeName: routesToScaffold,
+          directory,
+          force: true,
+          typescript: language === "ts",
+          localePrefix: i18nStrategy === "subfolders" ? "locale" : false,
+          signal: controller.signal
+        });
+        return result.routeGroups;
+      }
+    }
+  };
+}
+function generateProjectEntries(options) {
+  return Promise.all(
+    ["root", "entry.server", "entry.client"].map(
+      (filename) => generateProjectFile(filename, {
+        v2Flags: {
+          isV2ErrorBoundary: true,
+          isV2Meta: true,
+          isV2RouteConvention: true
+        },
+        ...options
+      })
+    )
+  );
+}
+async function handleCliShortcut(controller, cliCommand, flagShortcut) {
+  const shouldCreateShortcut = flagShortcut ?? await renderConfirmationPrompt({
+    confirmationMessage: "Yes",
+    cancellationMessage: "No",
+    message: [
+      "Create a global",
+      { command: ALIAS_NAME },
+      "alias to run commands instead of",
+      { command: cliCommand },
+      "?"
+    ],
+    abortSignal: controller.signal
+  });
+  if (!shouldCreateShortcut)
+    return {};
+  return {
+    createShortcut: async () => {
+      try {
+        const shortcuts = await createPlatformShortcut();
+        return shortcuts.length > 0;
+      } catch (error) {
+        outputDebug(
+          "Failed to create shortcut." + (error?.stack ?? error?.message ?? error)
+        );
+        return false;
+      }
+    },
+    showShortcutBanner: () => renderInfo({
+      body: `You'll need to restart your terminal session to make \`${ALIAS_NAME}\` alias available.`
+    })
+  };
+}
+async function handleStorefrontLink(controller) {
+  const { session, config } = await login();
+  renderLoginSuccess(config);
+  const title = await renderTextPrompt({
+    message: "New storefront name",
+    defaultValue: titleize(config.shopName),
+    abortSignal: controller.signal
+  });
+  return { ...config, title, session };
+}
+async function handleProjectLocation({
+  storefrontInfo,
+  controller,
+  force,
+  path: flagPath
+}) {
+  const storefrontDirectory = storefrontInfo && hyphenate(storefrontInfo.title);
+  let location = flagPath ?? storefrontDirectory ?? await renderTextPrompt({
+    message: "Where would you like to create your storefront?",
+    defaultValue: "hydrogen-storefront",
+    abortSignal: controller.signal
+  });
+  let directory = resolvePath(process.cwd(), location);
+  if (await projectExists(directory)) {
+    if (!force && storefrontDirectory) {
+      location = await renderTextPrompt({
+        message: `There's already a folder called \`${storefrontDirectory}\`. Where do you want to create the app?`,
+        defaultValue: storefrontDirectory,
+        abortSignal: controller.signal
+      });
+      directory = resolvePath(process.cwd(), location);
+      if (!await projectExists(directory)) {
+        force = true;
+      }
+    }
+    if (!force) {
+      const deleteFiles = await renderConfirmationPrompt({
+        message: `The directory ${colors.cyan(
+          location
+        )} is not empty. Do you want to delete the existing files and continue?`,
+        defaultValue: false,
+        abortSignal: controller.signal
+      });
+      if (!deleteFiles) {
+        renderInfo({
+          body: `Destination path ${colors.cyan(
+            location
+          )} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`
+        });
+        return;
+      }
+    }
+    await rmdir(directory);
+  }
+  return {
+    name: basename(location),
+    location,
+    directory,
+    storefrontTitle: storefrontInfo?.title
+  };
+}
+async function handleLanguage(projectDir, controller, flagLanguage) {
+  const language = flagLanguage ?? await renderSelectPrompt({
+    message: "Select a language",
+    choices: [
+      { label: "JavaScript", value: "js" },
+      { label: "TypeScript", value: "ts" }
+    ],
+    defaultValue: "js",
+    abortSignal: controller.signal
+  });
+  return {
+    language,
+    async transpileProject() {
+      if (language === "js") {
+        await transpileProject(projectDir);
+      }
+    }
+  };
+}
+async function handleCssStrategy(projectDir, controller, flagStyling) {
+  const selection = flagStyling ? flagStyling : await renderCssPrompt({
+    abortSignal: controller.signal,
+    extraChoices: { none: "Skip and set up later" }
+  });
+  const cssStrategy = selection === "none" ? void 0 : selection;
+  return {
+    cssStrategy,
+    async setupCss() {
+      if (cssStrategy) {
+        const result = await setupCssStrategy(
+          cssStrategy,
+          {
+            rootDirectory: projectDir,
+            appDirectory: joinPath(projectDir, "app")
+          },
+          true
+        );
+        if (result) {
+          await result.workPromise;
+        }
+      }
+    }
+  };
+}
+async function handleDependencies(projectDir, controller, shouldInstallDeps) {
+  const detectedPackageManager = await packageManagerUsedForCreating();
+  let actualPackageManager = "npm";
+  if (shouldInstallDeps !== false) {
+    if (detectedPackageManager === "unknown") {
+      const result = await renderSelectPrompt({
+        message: `Select package manager to install dependencies`,
+        choices: [
+          { label: "NPM", value: "npm" },
+          { label: "PNPM", value: "pnpm" },
+          { label: "Yarn v1", value: "yarn" },
+          { label: "Skip and install later", value: "no" }
+        ],
+        defaultValue: "npm",
+        abortSignal: controller.signal
+      });
+      if (result === "no") {
+        shouldInstallDeps = false;
+      } else {
+        actualPackageManager = result;
+        shouldInstallDeps = true;
+      }
+    } else if (shouldInstallDeps === void 0) {
+      actualPackageManager = detectedPackageManager;
+      shouldInstallDeps = await renderConfirmationPrompt({
+        message: `Install dependencies with ${detectedPackageManager}?`,
+        confirmationMessage: "Yes",
+        cancellationMessage: "No",
+        abortSignal: controller.signal
+      });
+    }
+  }
+  return {
+    packageManager: actualPackageManager,
+    shouldInstallDeps,
+    installDeps: shouldInstallDeps ? async () => {
+      await installNodeModules({
+        directory: projectDir,
+        packageManager: actualPackageManager,
+        args: [],
+        signal: controller.signal
+      });
+    } : () => {
+    }
+  };
+}
+const gitIgnoreContent = `
+node_modules
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.shopify
+`.slice(1);
+async function createInitialCommit(directory) {
+  try {
+    await initializeGitRepository(directory);
+    await writeFile(joinPath(directory, ".gitignore"), gitIgnoreContent);
+    if (process.env.NODE_ENV === "test" && process.env.CI) {
+      await execAsync(`git config --global user.name "hydrogen"`);
+      await execAsync(`git config --global user.email "hydrogen@shopify.com"`);
+    }
+    return commitAll(directory, "Scaffold Storefront");
+  } catch (error) {
+    outputDebug(
+      "Failed to initialize Git.\n" + error?.stack
+    );
+  }
+}
+async function commitAll(directory, message) {
+  try {
+    await addAllToGitFromDirectory(directory);
+    await createGitCommit(message, { directory });
+  } catch (error) {
+    outputDebug(
+      "Failed to commit code.\n" + error?.stack
+    );
+  }
+}
+async function renderProjectReady(project, {
+  language,
+  packageManager,
+  depsInstalled,
+  cssStrategy,
+  hasCreatedShortcut,
+  routes,
+  i18n,
+  depsError,
+  i18nError,
+  routesError
+}) {
+  const hasErrors = Boolean(depsError || i18nError || routesError);
+  const bodyLines = [];
+  if (project.storefrontTitle) {
+    bodyLines.push(["Shopify", project.storefrontTitle]);
+  }
+  if (language) {
+    bodyLines.push(["Language", LANGUAGES[language]]);
+  }
+  if (cssStrategy) {
+    bodyLines.push(["Styling", CSS_STRATEGY_NAME_MAP[cssStrategy]]);
+  }
+  if (!i18nError && i18n) {
+    bodyLines.push(["Markets", I18N_STRATEGY_NAME_MAP[i18n].split(" (")[0]]);
+  }
+  let routeSummary = "";
+  if (!routesError && routes && Object.keys(routes).length) {
+    bodyLines.push(["Routes", ""]);
+    for (let [routeName, routePaths] of Object.entries(routes)) {
+      routePaths = Array.isArray(routePaths) ? routePaths : [routePaths];
+      let urls = [
+        ...new Set(routePaths.map((item) => "/" + normalizeRoutePath(item)))
+      ].sort();
+      if (urls.length > 2) {
+        const prefixesSet = new Set(urls.map((url) => url.split("/")[1] ?? ""));
+        urls = [...prefixesSet].map((item) => "/" + item + "/*");
+      }
+      routeSummary += `
+    \u2022 ${capitalize(routeName)} ${colors.dim(
+        "(" + urls.join(" & ") + ")"
+      )}`;
+    }
+  }
+  const padMin = 1 + bodyLines.reduce((max, [label]) => Math.max(max, label.length), 0);
+  const cliCommand = hasCreatedShortcut ? ALIAS_NAME : await getCliCommand(project.directory, packageManager);
+  const render = hasErrors ? renderWarning : renderSuccess;
+  render({
+    headline: `Storefront setup complete` + (hasErrors ? " with errors (see warnings below)." : "!"),
+    body: bodyLines.map(
+      ([label, value]) => `  ${(label + ":").padEnd(padMin, " ")}  ${colors.dim(value)}`
+    ).join("\n") + routeSummary,
+    customSections: [
+      hasErrors && {
+        title: "Warnings\n",
+        body: [
+          {
+            list: {
+              items: [
+                depsError && [
+                  "Failed to install dependencies:",
+                  { subdued: depsError.message }
+                ],
+                i18nError && [
+                  "Failed to scaffold Markets:",
+                  { subdued: i18nError.message }
+                ],
+                routesError && [
+                  "Failed to scaffold routes:",
+                  { subdued: routesError.message }
+                ]
+              ].filter((step) => Boolean(step))
+            }
+          }
+        ]
+      },
+      {
+        title: "Help\n",
+        body: {
+          list: {
+            items: [
+              {
+                link: {
+                  label: "Guides",
+                  url: "https://shopify.dev/docs/custom-storefronts/hydrogen/building"
+                }
+              },
+              {
+                link: {
+                  label: "API reference",
+                  url: "https://shopify.dev/docs/api/storefront"
+                }
+              },
+              {
+                link: {
+                  label: "Demo Store code",
+                  url: "https://github.com/Shopify/hydrogen/tree/HEAD/templates/demo-store"
+                }
+              },
+              [
+                "Run",
+                {
+                  command: `${cliCommand} --help`
+                }
+              ]
+            ]
+          }
+        }
+      },
+      {
+        title: "Next steps\n",
+        body: [
+          {
+            list: {
+              items: [
+                [
+                  "Run",
+                  {
+                    command: outputContent`${outputToken.genericShellCommand(
+                      [
+                        project.directory === process.cwd() ? void 0 : `cd ${project.location.replace(/^\.\//, "")}`,
+                        depsInstalled ? void 0 : `${packageManager} install`,
+                        formatPackageManagerCommand(packageManager, "dev")
+                      ].filter(Boolean).join(" && ")
+                    )}`.value
+                  }
+                ]
+              ].filter((step) => Boolean(step))
+            }
+          }
+        ]
+      }
+    ].filter((step) => Boolean(step))
+  });
+}
+function createAbortHandler(controller, project) {
+  return async function abort(error) {
+    controller.abort();
+    if (typeof project !== "undefined") {
+      await rmdir(project.directory, { force: true }).catch(() => {
+      });
+    }
+    renderFatalError(
+      new AbortError(
+        "Failed to initialize project: " + error?.message,
+        error?.tryMessage ?? error?.stack
+      )
+    );
+    if (process.env.NODE_ENV === "test") {
+      console.error(error);
+    }
+    process.exit(1);
+  };
+}
+async function projectExists(projectDir) {
+  return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
+}
+function normalizeRoutePath(routePath) {
+  return routePath.replace(/(^|\.)_index$/, "").replace(/((^|\.)[^\.]+)_\./g, "$1.").replace(/\.(?!\w+\])/g, "/").replace(/\$$/g, ":catchAll").replace(/\$/g, ":").replace(/[\[\]]/g, "").replace(/:\w*Handle/i, ":handle");
+}
+
+export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, renderProjectReady };

package/dist/lib/onboarding/index.js

@@ -0,0 +1,2 @@
+export { setupLocalStarterTemplate } from './local.js';
+export { setupRemoteTemplate } from './remote.js';