@shopify/cli-hydrogen 5.0.1 → 5.1.0

package/dist/commands/hydrogen/generate/route.test.js

@@ -1,134 +1,42 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
-import { temporaryDirectoryTask } from 'tempy';
-import { runGenerate, GENERATOR_TEMPLATES_DIR } from './route.js';
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
-import { joinPath, dirname } from '@shopify/cli-kit/node/path';
-import { convertRouteToV2 } from '../../../lib/remix-version-interop.js';
+import { describe, beforeEach, vi, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { runGenerate } from './route.js';
+import { generateRoutes } from '../../../lib/setups/routes/generate.js';
 
-describe("generate/route", () => {
+describe("runGenerate", () => {
+  const outputMock = mockAndCaptureOutput();
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit/node/output");
-    vi.mock("@shopify/cli-kit/node/ui");
+    vi.mock("../../../lib/setups/routes/generate.js");
   });
-  it("generates a route file", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "pages/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, `const str = "hello world"`]]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(
-        await readFile(joinPath(appRoot, "app/routes", `${route}.jsx`))
-      ).toContain(`const str = 'hello world'`);
-    });
-  });
-  it("generates a route file for Remix v2", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "custom/path/$handle/index";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, `const str = "hello world"`]]
-      });
-      await runGenerate(route, convertRouteToV2(route), {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(
-        await readFile(
-          joinPath(appRoot, "app/routes", `custom.path.$handle._index.jsx`)
-        )
-      ).toContain(`const str = 'hello world'`);
-    });
-  });
-  it("produces a typescript file when typescript argument is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const route = "pages/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [],
-        templates: [[route, 'const str = "hello typescript"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot,
-        typescript: true
-      });
-      expect(
-        await readFile(joinPath(appRoot, "app/routes", `${route}.tsx`))
-      ).toContain(`const str = 'hello typescript'`);
-    });
-  });
-  it("prompts the user if there the file already exists", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-        async () => true
-      );
-      const route = "page/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
-        templates: [[route, 'const str = "hello world"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot
-      });
-      expect(renderConfirmationPrompt).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: expect.stringContaining("already exists")
-        })
-      );
-    });
+  afterEach(() => {
+    vi.resetAllMocks();
+    outputMock.clear();
   });
-  it("does not prompt the user if the force property is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
-        async () => true
-      );
-      const route = "page/$pageHandle";
-      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
-        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
-        templates: [[route, 'const str = "hello world"']]
-      });
-      await runGenerate(route, route, {
-        directory: appRoot,
-        templatesRoot,
-        force: true
-      });
-      expect(renderConfirmationPrompt).not.toHaveBeenCalled();
+  it("calls route generation and renders the result", async () => {
+    vi.mocked(generateRoutes).mockResolvedValue({
+      isTypescript: true,
+      transpilerOptions: {},
+      formatOptions: {},
+      v2Flags: {},
+      routeGroups: {},
+      routes: [
+        { sourceRoute: "", destinationRoute: "/cart", operation: "created" },
+        { sourceRoute: "", destinationRoute: "/about", operation: "skipped" },
+        {
+          sourceRoute: "",
+          destinationRoute: "/collections",
+          operation: "created"
+        }
+      ]
     });
+    const options = {
+      routeName: "all",
+      directory: "there",
+      typescript: true
+    };
+    await runGenerate(options);
+    expect(generateRoutes).toHaveBeenCalledWith(options);
+    expect(outputMock.info()).toMatch(/2 of 3 routes/i);
   });
 });
-async function createHydrogen(directory, {
-  files,
-  templates
-} = {
-  files: [],
-  templates: []
-}) {
-  for (const item of files) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = joinPath(directory, "app", filePath);
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  for (const item of templates) {
-    const [filePath, fileContent] = item;
-    const fullFilePath = joinPath(
-      directory,
-      GENERATOR_TEMPLATES_DIR,
-      "routes",
-      `${filePath}.tsx`
-    );
-    await mkdir(dirname(fullFilePath));
-    await writeFile(fullFilePath, fileContent);
-  }
-  return {
-    appRoot: joinPath(directory, "app"),
-    templatesRoot: directory
-  };
-}

package/dist/commands/hydrogen/init.js

@@ -1,19 +1,17 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { readdir } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
-import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
-import { renderFatalError, renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { packageManagerUsedForCreating } from '@shopify/cli-kit/node/node-package-manager';
 import { Flags } from '@oclif/core';
-import { basename, resolvePath, joinPath } from '@shopify/cli-kit/node/path';
-import { rmdir, copyFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
-import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { AbortController } from '@shopify/cli-kit/node/abort';
 import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
-import { transpileProject } from '../../lib/transpile-ts.js';
-import { getLatestTemplates } from '../../lib/template-downloader.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
+import { SETUP_CSS_STRATEGIES } from './../../lib/setups/css/index.js';
+import { I18N_CHOICES } from '../../lib/setups/i18n/index.js';
 import { supressNodeExperimentalWarnings } from '../../lib/process.js';
+import { setupRemoteTemplate, setupLocalStarterTemplate } from '../../lib/onboarding/index.js';
+import { LANGUAGES } from '../../lib/onboarding/common.js';
 
-const STARTER_TEMPLATES = ["hello-world", "demo-store"];
 const FLAG_MAP = { f: "force" };
 class Init extends Command {
   static description = "Creates a new Hydrogen storefront.";
@@ -25,148 +23,69 @@ class Init extends Command {
     }),
     language: Flags.string({
       description: "Sets the template language to use. One of `js` or `ts`.",
-      choices: ["js", "ts"],
+      choices: Object.keys(LANGUAGES),
       env: "SHOPIFY_HYDROGEN_FLAG_LANGUAGE"
     }),
     template: Flags.string({
-      description: "Sets the template to use. One of `demo-store` or `hello-world`.",
-      choices: STARTER_TEMPLATES,
+      description: "Sets the template to use. Pass `demo-store` for a fully-featured store template or `hello-world` for a barebones project.",
       env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE"
     }),
-    "install-deps": Flags.boolean({
-      description: "Auto install dependencies using the active package manager",
-      env: "SHOPIFY_HYDROGEN_FLAG_INSTALL_DEPS",
+    "install-deps": commonFlags.installDeps,
+    "mock-shop": Flags.boolean({
+      description: "Use mock.shop as the data source for the storefront.",
+      default: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_MOCK_DATA"
+    }),
+    styling: commonFlags.styling,
+    markets: commonFlags.markets,
+    shortcut: commonFlags.shortcut,
+    routes: Flags.boolean({
+      description: "Generate routes for all pages.",
+      env: "SHOPIFY_HYDROGEN_FLAG_ROUTES",
+      hidden: true
+    }),
+    git: Flags.boolean({
+      description: "Init Git and create initial commits.",
+      env: "SHOPIFY_HYDROGEN_FLAG_GIT",
+      default: true,
       allowNo: true
     })
   };
   async run() {
     const { flags } = await this.parse(Init);
+    if (flags.markets && !I18N_CHOICES.includes(flags.markets)) {
+      throw new AbortError(
+        `Invalid URL structure strategy: ${flags.markets}. Must be one of ${I18N_CHOICES.join(", ")}`
+      );
+    }
+    if (flags.styling && !SETUP_CSS_STRATEGIES.includes(flags.styling)) {
+      throw new AbortError(
+        `Invalid styling strategy: ${flags.styling}. Must be one of ${SETUP_CSS_STRATEGIES.join(", ")}`
+      );
+    }
     await runInit(flagsToCamelObject(flags));
   }
 }
 async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   supressNodeExperimentalWarnings();
+  options.git ??= true;
   const showUpgrade = await checkHydrogenVersion(
     fileURLToPath(new URL("../../../package.json", import.meta.url)),
     "cli"
   );
   if (showUpgrade) {
-    const packageManager2 = await packageManagerUsedForCreating();
+    const packageManager = await packageManagerUsedForCreating();
     showUpgrade(
-      packageManager2 === "unknown" ? "" : `Please use the latest version with \`${packageManager2} create @shopify/hydrogen@latest\``
+      packageManager === "unknown" ? "" : `Please use the latest version with \`${packageManager} create @shopify/hydrogen@latest\``
     );
   }
-  let templatesDownloaded = false;
-  const templatesPromise = getLatestTemplates().then((result) => {
-    templatesDownloaded = true;
-    return result;
-  }).catch((error) => {
-    renderFatalError(error);
-    process.exit(1);
-  });
-  const appTemplate = options.template ?? await renderSelectPrompt({
-    message: "Choose a template",
-    defaultValue: "hello-world",
-    choices: STARTER_TEMPLATES.map((value) => ({
-      label: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
-      value
-    }))
-  });
-  const language = options.language ?? await renderSelectPrompt({
-    message: "Choose a language",
-    choices: [
-      { label: "JavaScript", value: "js" },
-      { label: "TypeScript", value: "ts" }
-    ],
-    defaultValue: "js"
-  });
-  const location = options.path ?? await renderTextPrompt({
-    message: "Where would you like to create your app?",
-    defaultValue: "hydrogen-storefront"
-  });
-  const projectName = basename(location);
-  const projectDir = resolvePath(process.cwd(), location);
-  if (await projectExists(projectDir)) {
-    if (!options.force) {
-      const deleteFiles = await renderConfirmationPrompt({
-        message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
-        defaultValue: false
-      });
-      if (!deleteFiles) {
-        renderInfo({
-          headline: `Destination path ${location} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`
-        });
-        return;
-      }
-    }
-    await rmdir(projectDir, { force: true });
-  }
-  if (!templatesDownloaded) {
-    await renderTasks([
-      {
-        title: "Downloading templates",
-        task: async () => {
-          await templatesPromise;
-        }
-      }
-    ]);
+  const controller = new AbortController();
+  try {
+    return options.template ? await setupRemoteTemplate(options, controller) : await setupLocalStarterTemplate(options, controller);
+  } catch (error) {
+    controller.abort();
+    throw error;
   }
-  const { templatesDir } = await templatesPromise;
-  await copyFile(joinPath(templatesDir, appTemplate), projectDir);
-  if (language === "js") {
-    try {
-      await transpileProject(projectDir);
-    } catch (error) {
-      await rmdir(projectDir, { force: true });
-      throw error;
-    }
-  }
-  let depsInstalled = false;
-  let packageManager = await packageManagerUsedForCreating();
-  if (packageManager !== "unknown") {
-    const installDeps = options.installDeps ?? await renderConfirmationPrompt({
-      message: `Install dependencies with ${packageManager}?`
-    });
-    if (installDeps) {
-      await installNodeModules({
-        directory: projectDir,
-        packageManager,
-        args: [],
-        stdout: process.stdout,
-        stderr: process.stderr
-      });
-      depsInstalled = true;
-    }
-  } else {
-    packageManager = "npm";
-  }
-  renderSuccess({
-    headline: `${projectName} is ready to build.`,
-    nextSteps: [
-      outputContent`Run ${outputToken.genericShellCommand(`cd ${location}`)}`.value,
-      depsInstalled ? void 0 : outputContent`Run ${outputToken.genericShellCommand(
-        `${packageManager} install`
-      )} to install the dependencies`.value,
-      outputContent`Run ${outputToken.packagejsonScript(
-        packageManager,
-        "dev"
-      )} to start your local development server and start building`.value
-    ].filter((step) => Boolean(step)),
-    reference: [
-      "Getting started with Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development",
-      "Hydrogen project structure: https://shopify.dev/docs/custom-storefronts/hydrogen/project-structure",
-      "Setting up Hydrogen environment variables: https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
-    ]
-  });
-  if (appTemplate === "demo-store") {
-    renderInfo({
-      headline: `Your project will display inventory from the Hydrogen Demo Store.`,
-      body: `To connect this project to your Shopify store\u2019s inventory, update \`${projectName}/.env\` with your store ID and Storefront API key.`
-    });
-  }
-}
-async function projectExists(projectDir) {
-  return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
 
 export { Init as default, runInit };