@shopify/cli-hydrogen 7.1.2 → 8.0.1

package/dist/lib/mini-oxygen/workerd.js

@@ -1,23 +1,16 @@
-import { Response, Miniflare, Request, fetch, NoOpLog } from 'miniflare';
+import { createRequire } from 'node:module';
 import { resolvePath, dirname } from '@shopify/cli-kit/node/path';
-import { readFile } from '@shopify/cli-kit/node/fs';
+import { readFile, createFileReadStream } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { outputNewline } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
-import { createInspectorConnector } from './workerd-inspector.js';
-import { findPort } from '../find-port.js';
-import { OXYGEN_HEADERS_MAP, SUBREQUEST_PROFILER_ENDPOINT, logRequestLine } from './common.js';
+import { handleMiniOxygenImportFail, logRequestLine, SUBREQUEST_PROFILER_ENDPOINT } from './common.js';
+import { TUNNEL_DOMAIN, getUtilityBannerlines, getDebugBannerLine } from '../dev-shared.js';
 import { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, createLogRequestEvent } from '../request-events.js';
-import { STATIC_ASSET_EXTENSIONS, createAssetsServer, buildAssetsUrl } from './assets.js';
 
-const PRIVATE_WORKERD_INSPECTOR_PORT = 9222;
-const OXYGEN_WORKERD_COMPAT_PARAMS = {
-  compatibilityFlags: ["streams_enable_constructors"],
-  compatibilityDate: "2022-10-31"
-};
 async function startWorkerdServer({
   root,
-  port: appPort,
+  appPort,
   inspectorPort: publicInspectorPort,
   assetsPort,
   debug = false,
@@ -26,58 +19,56 @@ async function startWorkerdServer({
   buildPathClient,
   env
 }) {
-  const privateInspectorPort = await findPort(PRIVATE_WORKERD_INSPECTOR_PORT);
-  const oxygenHeadersMap = Object.values(OXYGEN_HEADERS_MAP).reduce(
-    (acc, item) => {
-      acc[item.name] = item.defaultValue;
-      return acc;
-    },
-    {}
-  );
+  const { createMiniOxygen, Response } = await import('@shopify/mini-oxygen').catch(handleMiniOxygenImportFail);
   setConstructors({ Response });
-  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
-  const handleAssets = createAssetHandler(assetsPort);
-  const staticAssetExtensions = STATIC_ASSET_EXTENSIONS.slice();
-  let stringifiedOxygenHandler = miniOxygenHandler.toString().replace(
-    "SUBREQUEST_PROFILER_ENDPOINT",
-    JSON.stringify(SUBREQUEST_PROFILER_ENDPOINT)
-  );
-  if (process.env.NODE_ENV === "test") {
-    stringifiedOxygenHandler = stringifiedOxygenHandler.replace(
-      /\w*vite_ssr_import[\w\d]*\./g,
-      ""
+  async function handleCustomerAccountSchema() {
+    const require2 = createRequire(import.meta.url);
+    const filePath = require2.resolve(
+      "@shopify/hydrogen/customer-account.schema.json"
     );
+    return new Response(createFileReadStream(filePath), {
+      headers: { "Content-Type": "application/json" }
+    });
   }
-  const buildMiniOxygenOptions = async () => ({
-    cf: false,
-    verbose: false,
+  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
+  const mainWorkerName = "hydrogen";
+  const miniOxygen = createMiniOxygen({
+    debug,
     port: appPort,
-    inspectorPort: privateInspectorPort,
-    log: new NoOpLog(),
-    liveReload: watch,
     host: "localhost",
-    handleRuntimeStdio(stdout, stderr) {
-      stdout.destroy();
-      stderr.destroy();
-    },
+    liveReload: watch,
+    requestHook: logRequestLine,
+    inspectorPort: publicInspectorPort,
+    inspectWorkerName: mainWorkerName,
+    assets: { port: assetsPort, directory: buildPathClient },
     workers: [
       {
-        name: "mini-oxygen",
+        name: "hydrogen:middleware",
         modules: true,
-        script: `export default { fetch: ${stringifiedOxygenHandler} }`,
-        bindings: {
-          staticAssetExtensions,
-          oxygenHeadersMap
-        },
+        script: `export default { fetch: (request, env) => {
+          const url = new URL(request.url);
+          if (url.hostname.endsWith('${TUNNEL_DOMAIN.ORIGINAL}')) {
+            url.hostname = url.hostname.replace(
+              '${TUNNEL_DOMAIN.ORIGINAL}',
+              '${TUNNEL_DOMAIN.REBRANDED}',
+            );
+          }
+
+          return url.pathname === '${SUBREQUEST_PROFILER_ENDPOINT}'
+            ? env.profiler.fetch(url, request)
+            : url.pathname === '/graphiql/customer-account.schema.json'
+            ? env.assets.fetch(url, request)
+            : env.next.fetch(url, request)
+          }
+        }`,
         serviceBindings: {
-          hydrogen: "hydrogen",
-          assets: handleAssets,
-          debugNetwork: handleDebugNetworkRequest,
-          logRequest
+          profiler: handleDebugNetworkRequest,
+          assets: handleCustomerAccountSchema,
+          next: mainWorkerName
         }
       },
       {
-        name: "hydrogen",
+        name: mainWorkerName,
         modulesRoot: dirname(absoluteBundlePath),
         modules: [
           {
@@ -86,7 +77,6 @@ async function startWorkerdServer({
             contents: await readFile(absoluteBundlePath)
           }
         ],
-        ...OXYGEN_WORKERD_COMPAT_PARAMS,
         bindings: { ...env },
         serviceBindings: {
           [H2O_BINDING_NAME]: createLogRequestEvent({
@@ -96,130 +86,47 @@ async function startWorkerdServer({
       }
     ]
   });
-  let miniOxygenOptions = await buildMiniOxygenOptions();
-  const miniOxygen = new Miniflare(miniOxygenOptions);
-  const listeningAt = (await miniOxygen.ready).origin;
-  const sourceMapPath = buildPathWorkerFile + ".map";
-  const reconnect = createInspectorConnector({
-    debug,
-    sourceMapPath,
-    absoluteBundlePath,
-    privateInspectorPort,
-    publicInspectorPort
-  });
-  await reconnect();
-  const assetsServer = createAssetsServer(buildPathClient);
-  assetsServer.listen(assetsPort);
+  const { workerUrl, inspectorUrl } = await miniOxygen.ready;
   return {
-    port: appPort,
-    listeningAt,
-    async reload(nextOptions) {
-      miniOxygenOptions = await buildMiniOxygenOptions();
-      if (nextOptions) {
-        const hydrogen = miniOxygenOptions.workers.find(
-          (worker) => worker.name === "hydrogen"
-        );
-        if (hydrogen) {
-          hydrogen.bindings = { ...nextOptions?.env ?? env };
+    port: Number(workerUrl.port),
+    listeningAt: workerUrl.origin,
+    reload(nextOptions) {
+      return miniOxygen.reload(async ({ workers }) => {
+        const mainWorker = workers.find(({ name }) => name === mainWorkerName);
+        if (Array.isArray(mainWorker.modules) && mainWorker.modules[0]) {
+          mainWorker.modules[0].contents = await readFile(absoluteBundlePath);
         }
-      }
-      await reconnect(() => miniOxygen.setOptions(miniOxygenOptions));
+        if (nextOptions) {
+          mainWorker.bindings = { ...nextOptions?.env ?? env };
+        }
+        return { workers };
+      });
     },
     showBanner(options) {
-      console.log("");
+      outputNewline();
+      const customSections = [];
+      if (options?.host) {
+        customSections.push({ body: getUtilityBannerlines(options.host) });
+      }
+      if (inspectorUrl) {
+        customSections.push({
+          body: { warn: getDebugBannerLine(Number(inspectorUrl.port)) }
+        });
+      }
       renderSuccess({
         headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Worker Runtime) ${options?.mode ?? "development"} server running.`,
         body: [
-          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
-          ...options?.extraLines ?? [],
-          ...debug ? [{ warn: getDebugBannerLine(publicInspectorPort) }] : []
-        ]
+          `View ${options?.appName ? colors.cyan(options?.appName) : "Hydrogen"} app:`,
+          { link: { url: options?.host || workerUrl.origin } }
+        ],
+        customSections
       });
       console.log("");
     },
     async close() {
-      assetsServer.closeAllConnections();
-      assetsServer.close();
       await miniOxygen.dispose();
     }
   };
 }
-async function miniOxygenHandler(request, env, context) {
-  const { pathname } = new URL(request.url);
-  if (pathname === SUBREQUEST_PROFILER_ENDPOINT) {
-    return env.debugNetwork.fetch(request);
-  }
-  if (request.method === "GET") {
-    const staticAssetExtensions = new Set(env.staticAssetExtensions);
-    const wellKnown = pathname.startsWith("/.well-known");
-    const extension = pathname.split(".").at(-1) ?? "";
-    const isAsset = wellKnown || !!staticAssetExtensions.has(extension.toUpperCase());
-    if (isAsset) {
-      const response2 = await env.assets.fetch(
-        new Request(request.url, {
-          signal: request.signal,
-          headers: request.headers
-        })
-      );
-      if (response2.status !== 404)
-        return response2;
-    }
-  }
-  const requestInit = {
-    headers: {
-      "request-id": crypto.randomUUID(),
-      ...env.oxygenHeadersMap,
-      ...Object.fromEntries(request.headers.entries())
-    }
-  };
-  const startTimeMs = Date.now();
-  const response = await env.hydrogen.fetch(request, requestInit);
-  const durationMs = Date.now() - startTimeMs;
-  context.waitUntil(
-    env.logRequest.fetch(
-      new Request(request.url, {
-        method: request.method,
-        signal: request.signal,
-        headers: {
-          ...requestInit.headers,
-          "h2-duration-ms": String(durationMs),
-          "h2-response-status": String(response.status)
-        }
-      })
-    )
-  );
-  return response;
-}
-function createAssetHandler(assetsPort) {
-  const assetsServerOrigin = buildAssetsUrl(assetsPort);
-  return async (request) => {
-    return fetch(
-      new Request(
-        request.url.replace(
-          new URL(request.url).origin + "/",
-          assetsServerOrigin
-        ),
-        request
-      )
-    );
-  };
-}
-async function logRequest(request) {
-  logRequestLine(request, {
-    responseStatus: Number(request.headers.get("h2-response-status") || 200),
-    durationMs: Number(request.headers.get("h2-duration-ms") || 0)
-  });
-  return new Response("ok");
-}
-function getDebugBannerLine(publicInspectorPort) {
-  const isVSCode = process.env.TERM_PROGRAM === "vscode";
-  const debuggingDocsLink = "https://h2o.fyi/debugging/server-code" + (isVSCode ? "#visual-studio-code" : "#step-2-attach-a-debugger");
-  return outputContent`\n\nDebugging enabled on port ${String(
-    publicInspectorPort
-  )}.\nAttach a ${outputToken.link(
-    colors.yellow(isVSCode ? "VSCode debugger" : "debugger"),
-    debuggingDocsLink
-  )} or open DevTools in http://localhost:${String(publicInspectorPort)}.`.value;
-}
 
-export { OXYGEN_WORKERD_COMPAT_PARAMS, PRIVATE_WORKERD_INSPECTOR_PORT, getDebugBannerLine, startWorkerdServer };
+export { startWorkerdServer };

package/dist/lib/missing-routes.js

@@ -58,7 +58,7 @@ function findMissingRoutes(config, requiredRoutes = REQUIRED_ROUTES) {
         }
         const optionalSegment = ":?[^\\/\\?]+\\?";
         const reString = `^(${optionalSegment}\\/)?` + // Starts with an optional segment
-        requiredRoute.replaceAll(".", "\\.").replace(/\//g, `\\/(${optionalSegment}\\/)?`).replace(/:[^/)?]+/g, ":[^\\/]+") + // Replace params with regex
+        requiredRoute.replaceAll(".", "\\.").replace(/\//g, `\\/(${optionalSegment}\\/)?`).replace(/:[^/)?]+/g, "(:[^\\/]+|\\*)") + // Replace params with regex
         `(\\/${optionalSegment})?$`;
         if (new RegExp(reString).test(currentRoute.path)) {
           missingRoutes.delete(requiredRoute);

package/dist/lib/onboarding/common.js

@@ -6,14 +6,14 @@ import { joinPath, resolvePath, basename } 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 { outputDebug, 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 } from '../shell.js';
 import { transpileProject } from '../transpile/index.js';
-import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+import { CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
 import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
 import { execAsync } from '../process.js';
 import { getStorefronts } from '../graphql/admin/link-storefront.js';
@@ -141,6 +141,9 @@ async function handleStorefrontSelection(storefronts) {
       value: id
     }))
   ];
+  if (choices.length === 1) {
+    return;
+  }
   const storefrontId = await renderSelectPrompt({
     message: "Select a Hydrogen storefront to link",
     choices
@@ -189,7 +192,7 @@ async function handleProjectLocation({
         return;
       }
     }
-    await rmdir(directory);
+    await rmdir(directory, { force: true });
   }
   return {
     name: basename(location),
@@ -220,33 +223,10 @@ async function handleLanguage(projectDir, controller, flagLanguage) {
   };
 }
 async function handleCssStrategy(projectDir, controller, flagStyling) {
-  const selection = 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")
-            // Default value in new projects
-          },
-          true
-        );
-        if (result) {
-          await result.workPromise;
-        }
-      }
-    }
-  };
+  return {};
 }
-async function handleDependencies(projectDir, controller, shouldInstallDeps) {
-  const detectedPackageManager = packageManagerFromUserAgent();
+async function handleDependencies(projectDir, controller, packageManagerFromFlag, shouldInstallDeps) {
+  const detectedPackageManager = packageManagerFromFlag ?? packageManagerFromUserAgent();
   let actualPackageManager = "npm";
   if (shouldInstallDeps !== false) {
     if (detectedPackageManager === "unknown") {
@@ -403,39 +383,6 @@ async function renderProjectReady(project, {
           }
         ]
       },
-      {
-        title: "Help\n",
-        body: {
-          list: {
-            items: [
-              {
-                link: {
-                  label: "Guides",
-                  url: "https://h2o.fyi/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: [
@@ -445,13 +392,11 @@ async function renderProjectReady(project, {
                 [
                   "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
+                    command: [
+                      project.directory === process.cwd() ? void 0 : `cd ${project.location.replace(/^\.\//, "")}`,
+                      depsInstalled ? void 0 : `${packageManager} install`,
+                      formatPackageManagerCommand(packageManager, "dev")
+                    ].filter(Boolean).join(" && ")
                   }
                 ]
               ].filter((step) => Boolean(step))
@@ -485,5 +430,75 @@ async function projectExists(projectDir) {
 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");
 }
+function generateRandomName() {
+  function getRandomElement(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+  const geographicalFeature = getRandomElement([
+    "Bay",
+    "Bend",
+    "Cape",
+    "Cliff",
+    "Cove",
+    "Creek",
+    "Dale",
+    "Dune",
+    "Fjord",
+    "Glade",
+    "Gulf",
+    "Hill",
+    "Isle",
+    "Knoll",
+    "Lake",
+    "Loch",
+    "Mesa",
+    "Peak",
+    "Pond",
+    "Quay",
+    "Reef",
+    "Ridge",
+    "Rise",
+    "River",
+    "Road",
+    "Shore",
+    "Strait",
+    "Stream",
+    "Vale",
+    "Valley",
+    "View",
+    "Vista"
+  ]);
+  const colorNames = getRandomElement([
+    "Crimson",
+    "Azure",
+    "Coral",
+    "Fuchsia",
+    "Indigo",
+    "Ivory",
+    "Lavender",
+    "Lime",
+    "Magenta",
+    "Maroon",
+    "Orchid",
+    "Peach",
+    "Plum",
+    "Quartz",
+    "Salmon",
+    "Teal",
+    "Turquoise",
+    "Violet",
+    "Yellow",
+    "Ebony",
+    "Jade",
+    "Lilac",
+    "Mint",
+    "Onyx",
+    "Pearl",
+    "Ruby",
+    "Sapphire",
+    "Topaz"
+  ]);
+  return `${colorNames} ${geographicalFeature}`;
+}
 
-export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, handleStorefrontSelection, renderProjectReady };
+export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, generateRandomName, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, handleStorefrontSelection, renderProjectReady };

package/dist/lib/onboarding/local.js

@@ -63,15 +63,20 @@ async function setupLocalStarterTemplate(options, controller) {
       })
     )
   ).catch(abort);
+  const initMsg = {
+    create: "Creating storefront",
+    setup: `Setting up ${options.quickstart ? "Quickstart " : ""}project`,
+    install: "Installing dependencies. This could take a few minutes"
+  };
   const tasks = [
     {
-      title: "Creating storefront",
+      title: initMsg.create,
       task: async () => {
         await createStorefrontPromise;
       }
     },
     {
-      title: "Setting up project",
+      title: initMsg.setup,
       task: async () => {
         await backgroundWorkPromise;
       }
@@ -152,6 +157,7 @@ async function setupLocalStarterTemplate(options, controller) {
   const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
     project.directory,
     controller,
+    options.packageManager,
     options.installDeps
   );
   const setupSummary = {
@@ -171,7 +177,7 @@ async function setupLocalStarterTemplate(options, controller) {
       }
     });
     tasks.push({
-      title: "Installing dependencies. This could take a few minutes",
+      title: initMsg.install,
       task: async () => {
         await installingDepsPromise;
       }
@@ -190,12 +196,16 @@ async function setupLocalStarterTemplate(options, controller) {
     });
     showShortcutBanner();
   }
-  renderSuccess({
-    headline: [
-      { userInput: storefrontInfo?.title ?? project.name },
-      "is ready to build."
-    ]
-  });
+  if (options.quickstart) {
+    console.log("\n");
+  } else {
+    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",

package/dist/lib/onboarding/remote.js

@@ -1,37 +1,19 @@
 import { readdir } from 'node:fs/promises';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { copyFile, fileExists } from '@shopify/cli-kit/node/fs';
 import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
-import { getLatestTemplates } from '../template-downloader.js';
+import { downloadExternalRepo, downloadMonorepoTemplates } from '../template-downloader.js';
 import { applyTemplateDiff } from '../template-diff.js';
 import { getCliCommand } from '../shell.js';
 import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
+const DEMO_STORE_REPO = "shopify/hydrogen-demo-store";
 async function setupRemoteTemplate(options, controller) {
-  const appTemplate = options.template;
+  const appTemplate = options.template === "demo-store" ? DEMO_STORE_REPO : options.template;
   let abort = createAbortHandler(controller);
-  const backgroundDownloadPromise = getLatestTemplates({
-    signal: controller.signal
-  }).then(async ({ templatesDir, examplesDir }) => {
-    const templatePath = joinPath(templatesDir, appTemplate);
-    const examplePath = joinPath(examplesDir, appTemplate);
-    if (await fileExists(templatePath)) {
-      return { templatesDir, sourcePath: templatePath };
-    }
-    if (await fileExists(examplePath)) {
-      return { templatesDir, sourcePath: examplePath };
-    }
-    const availableTemplates = (await Promise.all([readdir(examplesDir), readdir(templatesDir)]).catch(
-      () => []
-    )).flat().filter((name) => name !== "skeleton" && !name.endsWith(".md")).sort();
-    throw new AbortError(
-      `Unknown value in \`--template\` flag "${appTemplate}".
-Skip the flag or provide the name of a template or example in the Hydrogen repository.`,
-      availableTemplates.length === 0 ? "" : { list: { title: "Available templates:", items: availableTemplates } }
-    );
-  }).catch(abort);
+  const backgroundDownloadPromise = appTemplate.includes("/") ? getExternalTemplate(appTemplate, controller.signal).catch(abort) : getMonorepoTemplate(appTemplate, controller.signal).catch(abort);
   const project = await handleProjectLocation({ ...options, controller });
   if (!project)
     return;
@@ -42,16 +24,12 @@ Skip the flag or provide the name of a template or example in the Hydrogen repos
   let backgroundWorkPromise = Promise.resolve().then(async () => {
     if (controller.signal.aborted)
       return;
-    const { sourcePath, templatesDir } = downloaded;
+    const { sourcePath, skeletonPath } = downloaded;
     const pkgJson = await readAndParsePackageJson(
       joinPath(sourcePath, "package.json")
     );
     if (pkgJson.scripts?.dev?.includes("--diff")) {
-      return applyTemplateDiff(
-        project.directory,
-        sourcePath,
-        joinPath(templatesDir, "skeleton")
-      );
+      return applyTemplateDiff(project.directory, sourcePath, skeletonPath);
     }
     return copyFile(sourcePath, project.directory);
   }).catch(abort);
@@ -65,6 +43,7 @@ Skip the flag or provide the name of a template or example in the Hydrogen repos
   const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
     project.directory,
     controller,
+    options.packageManager,
     options.installDeps
   );
   const setupSummary = {
@@ -108,7 +87,7 @@ Skip the flag or provide the name of a template or example in the Hydrogen repos
   }
   await renderProjectReady(project, setupSummary);
   renderInfo({
-    headline: `Your project will display inventory from ${options.template === "demo-store" ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
+    headline: `Your project will display inventory from ${options.template.endsWith(DEMO_STORE_REPO) ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
     body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
   });
   return {
@@ -116,5 +95,31 @@ Skip the flag or provide the name of a template or example in the Hydrogen repos
     ...setupSummary
   };
 }
+async function getExternalTemplate(appTemplate, signal) {
+  const { templateDir } = await downloadExternalRepo(appTemplate, signal);
+  return { sourcePath: templateDir };
+}
+async function getMonorepoTemplate(appTemplate, signal) {
+  const { templatesDir, examplesDir } = await downloadMonorepoTemplates({
+    signal
+  });
+  const skeletonPath = joinPath(templatesDir, "skeleton");
+  const templatePath = joinPath(templatesDir, appTemplate);
+  const examplePath = joinPath(examplesDir, appTemplate);
+  if (await fileExists(templatePath)) {
+    return { skeletonPath, sourcePath: templatePath };
+  }
+  if (await fileExists(examplePath)) {
+    return { skeletonPath, sourcePath: examplePath };
+  }
+  const availableTemplates = (await Promise.all([readdir(examplesDir), readdir(templatesDir)]).catch(
+    () => []
+  )).flat().filter((name) => name !== "skeleton" && !name.endsWith(".md")).concat("demo-store").sort();
+  throw new AbortError(
+    `Unknown value in \`--template\` flag "${appTemplate}".
+Skip the flag or provide the name of a template or example in the Hydrogen repository or a URL to a git repository.`,
+    availableTemplates.length === 0 ? "" : { list: { title: "Available templates:", items: availableTemplates } }
+  );
+}
 
 export { setupRemoteTemplate };