@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/commands/hydrogen/init.test.js

@@ -3,17 +3,19 @@ import { vi, describe, beforeEach, it, expect } from 'vitest';
 import { runInit } from './init.js';
 import { exec } from '@shopify/cli-kit/node/system';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { writeFile, inTemporaryDirectory, readFile, isDirectory, removeFile, fileExists } from '@shopify/cli-kit/node/fs';
 import { joinPath, basename } from '@shopify/cli-kit/node/path';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { handleProjectLocation } from '../../lib/onboarding/common.js';
 import glob from 'fast-glob';
-import { getSkeletonSourceDir } from '../../lib/build.js';
+import { getRepoNodeModules, getSkeletonSourceDir } from '../../lib/build.js';
 import { execAsync } from '../../lib/process.js';
-import { rmdir, symlink } from 'fs-extra';
+import { remove, createSymlink } from 'fs-extra/esm';
 import { runCheckRoutes } from './check.js';
 import { runCodegen } from './codegen.js';
 import { runBuild } from './build.js';
+import { runDev } from './dev.js';
 
 const { renderTasksHook } = vi.hoisted(() => ({ renderTasksHook: vi.fn() }));
 vi.mock("../../lib/check-version.js");
@@ -22,6 +24,9 @@ vi.mock("../../lib/template-downloader.js", async () => ({
     version: "",
     templatesDir: fileURLToPath(
       new URL("../../../../../templates", import.meta.url)
+    ),
+    examplesDir: fileURLToPath(
+      new URL("../../../../../examples", import.meta.url)
     )
   })
 }));
@@ -51,12 +56,10 @@ vi.mock(
         renderTasksHook.mockImplementationOnce(async () => {
           await writeFile(`${directory}/package-lock.json`, "{}");
         });
-        await rmdir(joinPath(directory, "node_modules")).catch(() => {
+        await remove(joinPath(directory, "node_modules")).catch(() => {
         });
-        await symlink(
-          fileURLToPath(
-            new URL("../../../../../node_modules", import.meta.url)
-          ),
+        await createSymlink(
+          await getRepoNodeModules(),
           joinPath(directory, "node_modules")
         );
       })
@@ -101,6 +104,8 @@ describe("init", () => {
   });
   describe("remote templates", () => {
     it("throws for unknown templates", async () => {
+      const processExit = vi.spyOn(process, "exit").mockImplementationOnce(() => {
+      });
       await inTemporaryDirectory(async (tmpDir) => {
         await expect(
           runInit({
@@ -109,8 +114,11 @@ describe("init", () => {
             language: "ts",
             template: "https://github.com/some/repo"
           })
-        ).rejects.toThrow("supported");
+        ).resolves;
       });
+      expect(outputMock.error()).toMatch("--template");
+      expect(processExit).toHaveBeenCalledWith(1);
+      processExit.mockRestore();
     });
     it("creates basic projects", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
@@ -120,20 +128,20 @@ describe("init", () => {
           language: "ts",
           template: "hello-world"
         });
-        const helloWorldFiles = await glob("**/*", {
+        const templateFiles = await glob("**/*", {
           cwd: getSkeletonSourceDir().replace("skeleton", "hello-world"),
           ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        const projectFiles = await glob("**/*", { cwd: tmpDir });
-        const nonAppFiles = helloWorldFiles.filter(
+        const resultFiles = await glob("**/*", { cwd: tmpDir });
+        const nonAppFiles = templateFiles.filter(
           (item) => !item.startsWith("app/")
         );
-        expect(projectFiles).toEqual(expect.arrayContaining(nonAppFiles));
-        expect(projectFiles).toContain("app/root.tsx");
-        expect(projectFiles).toContain("app/entry.client.tsx");
-        expect(projectFiles).toContain("app/entry.server.tsx");
-        expect(projectFiles).not.toContain("app/components/Layout.tsx");
-        expect(projectFiles).not.toContain("app/routes/_index.tsx");
+        expect(resultFiles).toEqual(expect.arrayContaining(nonAppFiles));
+        expect(resultFiles).toContain("app/root.tsx");
+        expect(resultFiles).toContain("app/entry.client.tsx");
+        expect(resultFiles).toContain("app/entry.server.tsx");
+        expect(resultFiles).not.toContain("app/components/Layout.tsx");
+        expect(resultFiles).not.toContain("app/routes/_index.tsx");
         await expect(readFile(`${tmpDir}/package.json`)).resolves.toMatch(
           `"name": "hello-world"`
         );
@@ -150,6 +158,62 @@ describe("init", () => {
         );
       });
     });
+    it("applies diff for examples", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const exampleName = "third-party-queries-caching";
+        await runInit({
+          path: tmpDir,
+          git: false,
+          language: "ts",
+          template: exampleName
+        });
+        const templatePath = getSkeletonSourceDir();
+        const examplePath = templatePath.replace("templates", "examples").replace("skeleton", exampleName);
+        const ignore = ["**/node_modules/**", "**/dist/**"];
+        const resultFiles = await glob("**/*", { ignore, cwd: tmpDir });
+        const templateFiles = await glob("**/*", { ignore, cwd: templatePath });
+        const exampleFiles = await glob("**/*", { ignore, cwd: examplePath });
+        expect(resultFiles).toEqual(
+          expect.arrayContaining([
+            .../* @__PURE__ */ new Set([...templateFiles, ...exampleFiles])
+          ])
+        );
+        const templatePkgJson = await readAndParsePackageJson(
+          `${templatePath}/package.json`
+        );
+        const examplePkgJson = await readAndParsePackageJson(
+          `${examplePath}/package.json`
+        );
+        const resultPkgJson = await readAndParsePackageJson(
+          `${tmpDir}/package.json`
+        );
+        expect(resultPkgJson.name).toMatch(exampleName);
+        expect(resultPkgJson.scripts).toEqual(
+          expect.objectContaining(templatePkgJson.scripts)
+        );
+        expect(resultPkgJson.dependencies).toEqual(
+          expect.objectContaining({
+            ...templatePkgJson.dependencies,
+            ...examplePkgJson.dependencies
+          })
+        );
+        expect(resultPkgJson.devDependencies).toEqual(
+          expect.objectContaining({
+            ...templatePkgJson.devDependencies,
+            ...examplePkgJson.devDependencies
+          })
+        );
+        expect(resultPkgJson.peerDependencies).toEqual(
+          expect.objectContaining({
+            ...templatePkgJson.peerDependencies,
+            ...examplePkgJson.peerDependencies
+          })
+        );
+        expect(await readFile(joinPath(templatePath, "tsconfig.json"))).toEqual(
+          await readFile(joinPath(tmpDir, "tsconfig.json"))
+        );
+      });
+    });
     it("transpiles projects to JS", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         await runInit({
@@ -158,14 +222,14 @@ describe("init", () => {
           language: "js",
           template: "hello-world"
         });
-        const helloWorldFiles = await glob("**/*", {
+        const templateFiles = await glob("**/*", {
           cwd: getSkeletonSourceDir().replace("skeleton", "hello-world"),
           ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        const projectFiles = await glob("**/*", { cwd: tmpDir });
-        expect(projectFiles).toEqual(
+        const resultFiles = await glob("**/*", { cwd: tmpDir });
+        expect(resultFiles).toEqual(
           expect.arrayContaining(
-            helloWorldFiles.filter((item) => !item.endsWith(".d.ts")).map(
+            templateFiles.filter((item) => !item.endsWith(".d.ts")).map(
               (item) => item.replace(/\.ts(x)?$/, ".js$1").replace(/tsconfig\.json$/, "jsconfig.json")
             )
           )
@@ -189,20 +253,20 @@ describe("init", () => {
           language: "ts",
           mockShop: true
         });
-        const skeletonFiles = await glob("**/*", {
+        const templateFiles = await glob("**/*", {
           cwd: getSkeletonSourceDir(),
           ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        const projectFiles = await glob("**/*", { cwd: tmpDir });
-        const nonAppFiles = skeletonFiles.filter(
+        const resultFiles = await glob("**/*", { cwd: tmpDir });
+        const nonAppFiles = templateFiles.filter(
           (item) => !item.startsWith("app/")
         );
-        expect(projectFiles).toEqual(expect.arrayContaining(nonAppFiles));
-        expect(projectFiles).toContain("app/root.tsx");
-        expect(projectFiles).toContain("app/entry.client.tsx");
-        expect(projectFiles).toContain("app/entry.server.tsx");
-        expect(projectFiles).toContain("app/components/Layout.tsx");
-        expect(projectFiles).not.toContain("app/routes/_index.tsx");
+        expect(resultFiles).toEqual(expect.arrayContaining(nonAppFiles));
+        expect(resultFiles).toContain("app/root.tsx");
+        expect(resultFiles).toContain("app/entry.client.tsx");
+        expect(resultFiles).toContain("app/entry.server.tsx");
+        expect(resultFiles).toContain("app/components/Layout.tsx");
+        expect(resultFiles).not.toContain("app/routes/_index.tsx");
         await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
           await readFile(`${getSkeletonSourceDir()}/server.ts`)
         );
@@ -229,13 +293,13 @@ describe("init", () => {
     it("creates projects with route files", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         await runInit({ path: tmpDir, git: false, routes: true, language: "ts" });
-        const skeletonFiles = await glob("**/*", {
+        const templateFiles = await glob("**/*", {
           cwd: getSkeletonSourceDir(),
           ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        const projectFiles = await glob("**/*", { cwd: tmpDir });
-        expect(projectFiles).toEqual(expect.arrayContaining(skeletonFiles));
-        expect(projectFiles).toContain("app/routes/_index.tsx");
+        const resultFiles = await glob("**/*", { cwd: tmpDir });
+        expect(resultFiles).toEqual(expect.arrayContaining(templateFiles));
+        expect(resultFiles).toContain("app/routes/_index.tsx");
         await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
           await readFile(`${getSkeletonSourceDir()}/server.ts`)
         );
@@ -252,19 +316,19 @@ describe("init", () => {
     it("transpiles projects to JS", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         await runInit({ path: tmpDir, git: false, routes: true, language: "js" });
-        const skeletonFiles = await glob("**/*", {
+        const templateFiles = await glob("**/*", {
           cwd: getSkeletonSourceDir(),
           ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        const projectFiles = await glob("**/*", { cwd: tmpDir });
-        expect(projectFiles).toEqual(
+        const resultFiles = await glob("**/*", { cwd: tmpDir });
+        expect(resultFiles).toEqual(
           expect.arrayContaining(
-            skeletonFiles.filter((item) => !item.endsWith(".d.ts")).map(
+            templateFiles.filter((item) => !item.endsWith(".d.ts")).map(
               (item) => item.replace(/\.ts(x)?$/, ".js$1").replace(/tsconfig\.json$/, "jsconfig.json")
             )
           )
         );
-        expect(projectFiles).toContain("app/routes/_index.jsx");
+        expect(resultFiles).toContain("app/routes/_index.jsx");
         await expect(readFile(`${tmpDir}/server.js`)).resolves.toMatch(
           /export default {\n\s+\/\*\*.*?\*\/\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/s
         );
@@ -356,8 +420,8 @@ describe("init", () => {
             i18n: "domains",
             routes: true
           });
-          const projectFiles = await glob("**/*", { cwd: tmpDir });
-          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const resultFiles = await glob("**/*", { cwd: tmpDir });
+          expect(resultFiles).toContain("app/routes/_index.tsx");
           const serverFile = await readFile(`${tmpDir}/server.ts`);
           expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
           expect(serverFile).toMatch(/domain = url.hostname/);
@@ -376,8 +440,8 @@ describe("init", () => {
             i18n: "subdomains",
             routes: true
           });
-          const projectFiles = await glob("**/*", { cwd: tmpDir });
-          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const resultFiles = await glob("**/*", { cwd: tmpDir });
+          expect(resultFiles).toContain("app/routes/_index.tsx");
           const serverFile = await readFile(`${tmpDir}/server.ts`);
           expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
           expect(serverFile).toMatch(/firstSubdomain = url.hostname/);
@@ -396,8 +460,8 @@ describe("init", () => {
             i18n: "subfolders",
             routes: true
           });
-          const projectFiles = await glob("**/*", { cwd: tmpDir });
-          expect(projectFiles).toContain("app/routes/($locale)._index.tsx");
+          const resultFiles = await glob("**/*", { cwd: tmpDir });
+          expect(resultFiles).toContain("app/routes/($locale)._index.tsx");
           const serverFile = await readFile(`${tmpDir}/server.ts`);
           expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
           expect(serverFile).toMatch(/url.pathname/);
@@ -519,18 +583,56 @@ describe("init", () => {
           expect(output).toMatch("Complete analysis: file://");
           const clientAnalysisPath = "dist/worker/client-bundle-analyzer.html";
           const workerAnalysisPath = "dist/worker/worker-bundle-analyzer.html";
-          expect(
+          await expect(
             fileExists(joinPath(tmpDir, clientAnalysisPath))
           ).resolves.toBeTruthy();
-          expect(
+          await expect(
             fileExists(joinPath(tmpDir, workerAnalysisPath))
           ).resolves.toBeTruthy();
-          expect(await readFile(joinPath(tmpDir, clientAnalysisPath))).toMatch(
-            /globalThis\.METAFILE = '.+';/g
-          );
-          expect(await readFile(joinPath(tmpDir, workerAnalysisPath))).toMatch(
-            /globalThis\.METAFILE = '.+';/g
-          );
+          await expect(
+            readFile(joinPath(tmpDir, clientAnalysisPath))
+          ).resolves.toMatch(/globalThis\.METAFILE = '.+';/g);
+          await expect(
+            readFile(joinPath(tmpDir, workerAnalysisPath))
+          ).resolves.toMatch(/globalThis\.METAFILE = '.+';/g);
+        });
+      });
+      it("runs dev in the generated project", async () => {
+        await inTemporaryDirectory(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: true,
+            language: "ts",
+            styling: "postcss",
+            i18n: "subfolders",
+            routes: true,
+            installDeps: true
+          });
+          outputMock.clear();
+          const port = 1337;
+          const { close } = await runDev({
+            path: tmpDir,
+            port,
+            inspectorPort: 9e3,
+            disableVirtualRoutes: true,
+            disableVersionCheck: true
+          });
+          try {
+            await vi.waitFor(
+              () => expect(outputMock.output()).toMatch("success"),
+              { timeout: 5e3 }
+            );
+            expect(outputMock.output()).toMatch(/View Hydrogen app/i);
+            await expect(
+              fileExists(joinPath(tmpDir, "dist", "worker", "index.js"))
+            ).resolves.toBeTruthy();
+            const response = await fetch(`http://localhost:${port}`);
+            expect(response.status).toEqual(200);
+            expect(response.headers.get("content-type")).toEqual("text/html");
+            await expect(response.text()).resolves.toMatch("Mock.shop");
+          } finally {
+            await close();
+          }
         });
       });
     });

package/dist/commands/hydrogen/link.js

@@ -1,7 +1,7 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { basename } from '@shopify/cli-kit/node/path';
-import { renderSuccess, renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderTextPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
+import { renderSuccess, renderConfirmationPrompt, renderWarning, renderTextPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { commonFlags } from '../../lib/flags.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
@@ -11,6 +11,7 @@ import { waitForJob } from '../../lib/graphql/admin/fetch-job.js';
 import { titleize } from '../../lib/string.js';
 import { getCliCommand } from '../../lib/shell.js';
 import { login } from '../../lib/auth.js';
+import { handleStorefrontSelection } from '../../lib/onboarding/common.js';
 
 class Link extends Command {
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
@@ -93,29 +94,12 @@ async function linkStorefront(root, session, config, {
       return;
     }
   } else {
-    const choices = [
-      {
-        label: "Create a new storefront",
-        value: null
-      },
-      ...storefronts.map(({ id, title, productionUrl }) => ({
-        label: `${title} (${productionUrl})`,
-        value: id
-      }))
-    ];
-    const storefrontId = await renderSelectPrompt({
-      message: "Select a Hydrogen storefront to link",
-      choices
-    });
-    if (storefrontId) {
-      selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
-    } else {
+    selectedStorefront = await handleStorefrontSelection(storefronts);
+    if (!selectedStorefront) {
       selectedStorefront = await createNewStorefront(root, session);
     }
   }
-  if (selectedStorefront) {
-    await setStorefront(root, selectedStorefront);
-  }
+  await setStorefront(root, selectedStorefront);
   return selectedStorefront;
 }
 async function createNewStorefront(root, session) {

package/dist/commands/hydrogen/link.test.js

@@ -42,6 +42,8 @@ describe("link", () => {
     ...FULL_SHOPIFY_CONFIG,
     storefront: void 0
   };
+  const expectedStorefrontName = "New Storefront";
+  const expectedJobId = "gid://shopify/Job/1";
   beforeEach(async () => {
     vi.mocked(login).mockResolvedValue({
       session: ADMIN_SESSION,
@@ -55,6 +57,14 @@ describe("link", () => {
       }
     ]);
     vi.mocked(renderSelectPrompt).mockResolvedValue(FULL_SHOPIFY_CONFIG.shop);
+    vi.mocked(createStorefront).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/1",
+        title: expectedStorefrontName,
+        productionUrl: "https://example.com"
+      },
+      jobId: expectedJobId
+    });
   });
   afterEach(() => {
     vi.resetAllMocks();
@@ -100,18 +110,8 @@ describe("link", () => {
     });
   });
   describe("when you want to link a new Hydrogen storefront", () => {
-    const expectedStorefrontName = "New Storefront";
-    const expectedJobId = "gid://shopify/Job/1";
     beforeEach(async () => {
       vi.mocked(renderSelectPrompt).mockResolvedValue(null);
-      vi.mocked(createStorefront).mockResolvedValue({
-        storefront: {
-          id: "gid://shopify/HydrogenStorefront/1",
-          title: expectedStorefrontName,
-          productionUrl: "https://example.com"
-        },
-        jobId: expectedJobId
-      });
     });
     it("chooses to create a new storefront given the directory path", async () => {
       await runLink({ path: "my-path" });

package/dist/commands/hydrogen/preview.js

@@ -1,32 +1,37 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
+import { findPort } from '../../lib/find-port.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    ["worker-unstable"]: commonFlags.workerRuntime,
-    ["env-branch"]: commonFlags.envBranch
+    worker: deprecated("--worker", { isBoolean: true }),
+    "legacy-runtime": commonFlags.legacyRuntime,
+    "env-branch": commonFlags.envBranch,
+    "inspector-port": commonFlags.inspectorPort,
+    debug: commonFlags.debug
   };
   async run() {
     const { flags } = await this.parse(Preview);
     await runPreview({
-      ...flagsToCamelObject(flags),
-      workerRuntime: flags["worker-unstable"]
+      ...flagsToCamelObject(flags)
     });
   }
 }
 async function runPreview({
-  port = DEFAULT_PORT,
+  port: appPort,
   path: appPath,
-  workerRuntime = false,
-  envBranch
+  legacyRuntime = false,
+  envBranch,
+  inspectorPort,
+  debug
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "production";
@@ -35,15 +40,21 @@ async function runPreview({
   const { shop, storefront } = await getConfig(root);
   const fetchRemote = !!shop && !!storefront?.id;
   const env = await getAllEnvironmentVariables({ root, fetchRemote, envBranch });
+  appPort = legacyRuntime ? appPort : await findPort(appPort);
+  inspectorPort = debug ? await findPort(inspectorPort) : inspectorPort;
+  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
   const miniOxygen = await startMiniOxygen(
     {
       root,
-      port,
+      port: appPort,
+      assetsPort,
+      env,
       buildPathClient,
       buildPathWorkerFile,
-      env
+      inspectorPort,
+      debug
     },
-    workerRuntime
+    legacyRuntime
   );
   miniOxygen.showBanner({ mode: "preview" });
 }

package/dist/commands/hydrogen/setup.js

@@ -8,7 +8,6 @@ import { renderI18nPrompt, setupI18nStrategy } from '../../lib/setups/i18n/index
 import { getRemixConfig } from '../../lib/remix-config.js';
 import { handleRouteGeneration, generateProjectEntries, handleCliShortcut, renderProjectReady } from '../../lib/onboarding/common.js';
 import { getCliCommand } from '../../lib/shell.js';
-import { generateProjectFile } from '../../lib/setups/routes/generate.js';
 import { getTemplateAppFile } from '../../lib/build.js';
 
 class Setup extends Command {
@@ -57,9 +56,6 @@ async function runSetup(options) {
     const typescript = !!remixConfig.tsconfigPath;
     backgroundWorkPromise = backgroundWorkPromise.then(
       () => Promise.all([
-        // When starting from hello-world, the server entry point won't
-        // include all the cart logic from skeleton, so we need to copy it.
-        generateProjectFile("../server.ts", { ...remixConfig, typescript }),
         ...typescript ? [
           copyFile(
             getTemplateAppFile("../remix.env.d.ts"),

package/dist/commands/hydrogen/setup.test.js

@@ -56,7 +56,6 @@ describe("setup", () => {
       expect(output).toMatch(/Markets:\s*Subfolders/);
       expect(output).toMatch("Routes");
       expect(output).toMatch("Home (/ & /:catchAll)");
-      expect(output).toMatch("Account (/account/*)");
     });
   });
 });

package/dist/commands/hydrogen/shortcut.js

@@ -22,6 +22,7 @@ Restart your terminal session and run \`${ALIAS_NAME}\` from your local project.
       name: "error",
       type: 0,
       message: "No supported shell found.",
+      skipOclifErrorHandling: true,
       tryMessage: "Please create a shortcut manually."
     });
   }