@shopify/cli-hydrogen 5.0.1 → 5.1.0

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

@@ -1,126 +1,378 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { vi, describe, beforeEach, it, expect } from 'vitest';
 import { temporaryDirectoryTask } from 'tempy';
 import { runInit } from './init.js';
-import { renderSelectPrompt, renderConfirmationPrompt, renderTextPrompt, renderInfo } from '@shopify/cli-kit/node/ui';
-import { outputContent } from '@shopify/cli-kit/node/output';
-import { installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { exec } from '@shopify/cli-kit/node/system';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { readFile, writeFile, isDirectory } from '@shopify/cli-kit/node/fs';
+import { basename, joinPath } 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 { execAsync } from '../../lib/process.js';
+import { rmdir, symlink } from 'fs-extra';
 
+vi.mock("../../lib/template-downloader.js", async () => ({
+  getLatestTemplates: () => Promise.resolve({})
+}));
+vi.mock(
+  "@shopify/cli-kit/node/node-package-manager",
+  async (importOriginal) => {
+    const original = await importOriginal();
+    return {
+      ...original,
+      installNodeModules: vi.fn(),
+      getPackageManager: () => Promise.resolve("npm"),
+      packageManagerUsedForCreating: () => Promise.resolve("npm")
+    };
+  }
+);
+vi.mock("../../lib/check-version.js");
+const { renderTasksHook } = vi.hoisted(() => {
+  return {
+    renderTasksHook: vi.fn()
+  };
+});
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn(),
+    renderSelectPrompt: vi.fn(),
+    renderTextPrompt: vi.fn(),
+    renderInfo: vi.fn(),
+    renderTasks: vi.fn(async (args) => {
+      await original.renderTasks(args);
+      renderTasksHook();
+    })
+  };
+});
+vi.mock("../../lib/onboarding/common.js", async (importOriginal) => {
+  const original = await importOriginal();
+  return Object.keys(original).reduce((acc, item) => {
+    const key = item;
+    const value = original[key];
+    if (typeof value === "function") {
+      acc[key] = vi.fn(value);
+    } else {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+});
 describe("init", () => {
+  const outputMock = mockAndCaptureOutput();
   beforeEach(() => {
-    vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit/node/output");
-    vi.mock("../../lib/transpile-ts.js");
-    vi.mock("../../lib/template-downloader.js", async () => ({
-      getLatestTemplates: () => Promise.resolve({})
-    }));
-    vi.mock("@shopify/cli-kit/node/node-package-manager");
-    vi.mocked(outputContent).mockImplementation(() => ({
-      value: ""
-    }));
-    vi.mock("@shopify/cli-kit/node/ui");
-    vi.mock("@shopify/cli-kit/node/fs");
+    vi.clearAllMocks();
+    outputMock.clear();
   });
-  const defaultOptions = (stubs) => ({
-    template: "hello-world",
-    language: "js",
-    path: "path/to/project",
-    ...stubs
+  it("checks Hydrogen version", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const showUpgradeMock = vi.fn((param) => ({
+        currentVersion: "1.0.0",
+        newVersion: "1.0.1"
+      }));
+      vi.mocked(checkHydrogenVersion).mockResolvedValueOnce(showUpgradeMock);
+      vi.mocked(handleProjectLocation).mockResolvedValueOnce(void 0);
+      const project = await runInit({ path: tmpDir, git: false });
+      expect(project).toBeFalsy();
+      expect(checkHydrogenVersion).toHaveBeenCalledOnce();
+      expect(showUpgradeMock).toHaveBeenCalledWith(
+        expect.stringContaining("npm create @shopify/hydrogen@latest")
+      );
+    });
   });
-  describe.each([
-    {
-      flag: "template",
-      value: "hello-world",
-      condition: { fn: renderSelectPrompt, match: /template/i }
-    },
-    {
-      flag: "installDeps",
-      value: true,
-      condition: { fn: renderConfirmationPrompt, match: /install dependencies/i }
-    },
-    {
-      flag: "language",
-      value: "ts",
-      condition: { fn: renderSelectPrompt, match: /language/i }
-    },
-    {
-      flag: "path",
-      value: "./my-app",
-      condition: { fn: renderTextPrompt, match: /where/i }
-    }
-  ])("flag $flag", ({ flag, value, condition }) => {
-    it(`does not prompt the user for ${flag} when a value is passed in options`, async () => {
+  describe("local templates", () => {
+    it("creates basic projects", async () => {
       await temporaryDirectoryTask(async (tmpDir) => {
-        const options = defaultOptions({
+        await runInit({
           path: tmpDir,
-          [flag]: value
+          git: false,
+          language: "ts",
+          mockShop: true
+        });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        await runInit(options);
-        expect(condition.fn).not.toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: expect.stringMatching(condition.match)
-          })
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        const nonAppFiles = skeletonFiles.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");
+        await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
+          await readFile(`${getSkeletonSourceDir()}/server.ts`)
+        );
+        await expect(readFile(`${tmpDir}/package.json`)).resolves.toMatch(
+          `"name": "${basename(tmpDir)}"`
+        );
+        await expect(readFile(`${tmpDir}/.env`)).resolves.toMatch(
+          `PUBLIC_STORE_DOMAIN="mock.shop"`
+        );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).not.toMatch("Routes");
+        expect(output).toMatch(/Language:\s*TypeScript/);
+        expect(output).toMatch("Help");
+        expect(output).toMatch("Next steps");
+        expect(output).toMatch(
+          /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });
     });
-    it(`prompts the user for ${flag} when no value is passed in options`, async () => {
+    it("creates projects with route files", async () => {
       await temporaryDirectoryTask(async (tmpDir) => {
-        const options = defaultOptions({
-          path: tmpDir,
-          [flag]: void 0
+        await runInit({ path: tmpDir, git: false, routes: true, language: "ts" });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
         });
-        await runInit(options);
-        expect(condition.fn).toHaveBeenCalledWith(
-          expect.objectContaining({
-            message: expect.stringMatching(condition.match)
-          })
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        expect(projectFiles).toEqual(expect.arrayContaining(skeletonFiles));
+        expect(projectFiles).toContain("app/routes/_index.tsx");
+        await expect(readFile(`${tmpDir}/server.ts`)).resolves.toEqual(
+          await readFile(`${getSkeletonSourceDir()}/server.ts`)
         );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).toMatch(/Language:\s*TypeScript/);
+        expect(output).toMatch("Routes");
+        expect(output).toMatch("Home (/ & /:catchAll)");
+        expect(output).toMatch("Account (/account/*)");
       });
     });
-  });
-  it("installs dependencies when installDeps is true", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({ installDeps: true, path: tmpDir });
-      await runInit(options);
-      expect(installNodeModules).toHaveBeenCalled();
+    it("transpiles projects to JS", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        await runInit({ path: tmpDir, git: false, routes: true, language: "js" });
+        const skeletonFiles = await glob("**/*", {
+          cwd: getSkeletonSourceDir(),
+          ignore: ["**/node_modules/**", "**/dist/**"]
+        });
+        const projectFiles = await glob("**/*", { cwd: tmpDir });
+        expect(projectFiles).toEqual(
+          expect.arrayContaining(
+            skeletonFiles.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");
+        await expect(readFile(`${tmpDir}/server.js`)).resolves.toMatch(
+          /export default {\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/
+        );
+        const output = outputMock.info();
+        expect(output).toMatch("success");
+        expect(output).not.toMatch("warning");
+        expect(output).toMatch(basename(tmpDir));
+        expect(output).toMatch(/Language:\s*JavaScript/);
+        expect(output).toMatch("Routes");
+        expect(output).toMatch("Home (/ & /:catchAll)");
+        expect(output).toMatch("Account (/account/*)");
+      });
     });
-  });
-  it("does not install dependencies when installDeps is false", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({ installDeps: false, path: tmpDir });
-      await runInit(options);
-      expect(installNodeModules).not.toHaveBeenCalled();
+    describe("styling libraries", () => {
+      it("scaffolds Tailwind CSS", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "tailwind"
+          });
+          await expect(readFile(`${tmpDir}/remix.config.js`)).resolves.toMatch(
+            /tailwind: true,\n\s*postcss: true,\n\s*future:/
+          );
+          await expect(
+            readFile(`${tmpDir}/app/styles/tailwind.css`)
+          ).resolves.toMatch(/@tailwind base;/);
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import tailwindCss from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: tailwindCss\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*Tailwind/);
+        });
+      });
+      it("scaffolds CSS Modules", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "css-modules"
+          });
+          await expect(readFile(`${tmpDir}/package.json`)).resolves.toMatch(
+            `"@remix-run/css-bundle": "`
+          );
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import {cssBundleHref} from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: cssBundleHref\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*CSS Modules/);
+        });
+      });
+      it("scaffolds Vanilla Extract", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            styling: "vanilla-extract"
+          });
+          const packageJson = await readFile(`${tmpDir}/package.json`);
+          expect(packageJson).toMatch(/"@remix-run\/css-bundle": "/);
+          expect(packageJson).toMatch(/"@vanilla-extract\/css": "/);
+          const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
+          await expect(rootFile).toMatch(/import {cssBundleHref} from/);
+          await expect(rootFile).toMatch(
+            /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: cssBundleHref\}/ims
+          );
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Styling:\s*Vanilla Extract/);
+        });
+      });
     });
-  });
-  it("displays inventory information when using the demo-store template", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({
-        installDeps: false,
-        path: tmpDir,
-        template: "demo-store"
+    describe("i18n strategies", () => {
+      it("scaffolds i18n with domains strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "domains",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/domain = url.hostname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Top-level domains/);
+        });
+      });
+      it("scaffolds i18n with subdomains strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "subdomains",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/_index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/firstSubdomain = url.hostname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Subdomains/);
+        });
+      });
+      it("scaffolds i18n with subfolders strategy", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          await runInit({
+            path: tmpDir,
+            git: false,
+            language: "ts",
+            i18n: "subfolders",
+            routes: true
+          });
+          const projectFiles = await glob("**/*", { cwd: tmpDir });
+          expect(projectFiles).toContain("app/routes/($locale)._index.tsx");
+          const serverFile = await readFile(`${tmpDir}/server.ts`);
+          expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+          expect(serverFile).toMatch(/url.pathname/);
+          const output = outputMock.info();
+          expect(output).toMatch("success");
+          expect(output).not.toMatch("warning");
+          expect(output).toMatch(/Markets:\s*Subfolders/);
+        });
       });
-      await runInit(options);
-      expect(renderInfo).toHaveBeenCalledTimes(1);
-      expect(renderInfo).toHaveBeenCalledWith(
-        expect.objectContaining({
-          body: expect.stringContaining(
-            "To connect this project to your Shopify store\u2019s inventory"
-          ),
-          headline: expect.stringContaining(
-            "Your project will display inventory from the Hydrogen Demo Store"
-          )
-        })
-      );
     });
-  });
-  it("does not display inventory information when using non-demo-store templates", async () => {
-    await temporaryDirectoryTask(async (tmpDir) => {
-      const options = defaultOptions({
-        installDeps: false,
-        path: tmpDir,
-        template: "pizza-store"
+    describe("git", () => {
+      it("initializes a git repository and creates initial commits", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          renderTasksHook.mockImplementationOnce(async () => {
+            await writeFile(`${tmpDir}/package-lock.json`, "{}");
+          });
+          await runInit({
+            path: tmpDir,
+            git: true,
+            language: "js",
+            styling: "tailwind",
+            i18n: "domains",
+            routes: true,
+            installDeps: true
+          });
+          expect(isDirectory(`${tmpDir}/.git`)).resolves.toBeTruthy();
+          const { stdout: gitLog } = await execAsync(`git log --oneline`, {
+            cwd: tmpDir
+          });
+          expect(gitLog.split("\n")).toEqual(
+            expect.arrayContaining([
+              expect.stringContaining("Lockfile"),
+              expect.stringContaining("Generate routes for core functionality"),
+              expect.stringContaining("Setup Tailwind"),
+              expect.stringContaining("Scaffold Storefront")
+            ])
+          );
+        });
+      });
+    });
+    describe("project validity", () => {
+      it("typechecks the project", async () => {
+        await temporaryDirectoryTask(async (tmpDir) => {
+          renderTasksHook.mockImplementationOnce(async () => {
+            await writeFile(`${tmpDir}/package-lock.json`, "{}");
+          });
+          await runInit({
+            path: tmpDir,
+            git: true,
+            language: "ts",
+            styling: "tailwind",
+            i18n: "subfolders",
+            routes: true,
+            installDeps: true
+          });
+          await rmdir(joinPath(tmpDir, "node_modules")).catch(() => {
+          });
+          await symlink(
+            fileURLToPath(
+              new URL("../../../../../node_modules", import.meta.url)
+            ),
+            joinPath(tmpDir, "node_modules")
+          );
+          await expect(
+            exec("npm", ["run", "typecheck"], {
+              cwd: tmpDir
+            })
+          ).resolves.not.toThrow();
+        });
       });
-      await runInit(options);
-      expect(renderInfo).toHaveBeenCalledTimes(0);
     });
   });
 });

package/dist/commands/hydrogen/link.js

@@ -1,19 +1,22 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { basename } from '@shopify/cli-kit/node/path';
+import { renderSuccess, renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderTextPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { commonFlags } from '../../lib/flags.js';
-import { getHydrogenShop } from '../../lib/shop.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
-import { getConfig, setStorefront } from '../../lib/shopify-config.js';
-import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
+import { setStorefront } from '../../lib/shopify-config.js';
+import { createStorefront } from '../../lib/graphql/admin/create-storefront.js';
+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';
 
 class Link extends Command {
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
   static flags = {
     force: commonFlags.force,
     path: commonFlags.path,
-    shop: commonFlags.shop,
     storefront: Flags.string({
       description: `The name of a Hydrogen Storefront (e.g. "Jane's Apparel")`,
       env: "SHOPIFY_HYDROGEN_STOREFRONT"
@@ -21,33 +24,54 @@ class Link extends Command {
   };
   async run() {
     const { flags } = await this.parse(Link);
-    await linkStorefront(flags);
+    await runLink(flags);
   }
 }
-async function linkStorefront({
+async function runLink({
   force,
-  path,
-  shop: flagShop,
-  storefront: flagStorefront,
-  silent = false
+  path: root = process.cwd(),
+  storefront: flagStorefront
 }) {
-  const shop = await getHydrogenShop({ path, shop: flagShop });
-  const { storefront: configStorefront } = await getConfig(path ?? process.cwd());
-  if (configStorefront && !force) {
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(root),
+    getCliCommand()
+  ]);
+  const linkedStore = await linkStorefront(root, session, config, {
+    force,
+    flagStorefront,
+    cliCommand
+  });
+  if (!linkedStore)
+    return;
+  renderSuccess({
+    body: [{ userInput: linkedStore.title }, "is now linked"],
+    nextSteps: [
+      [
+        "Run",
+        { command: `${cliCommand} dev` },
+        "to start your local development server and start building"
+      ]
+    ]
+  });
+}
+async function linkStorefront(root, session, config, {
+  force = false,
+  flagStorefront,
+  cliCommand
+}) {
+  if (!config.shop) {
+    throw new AbortError("No shop found in local config, login first.");
+  }
+  if (config.storefront?.id && !force) {
     const overwriteLink = await renderConfirmationPrompt({
-      message: `Your project is currently linked to ${configStorefront.title}. Do you want to link to a different Hydrogen storefront on Shopify?`
+      message: `Your project is currently linked to ${config.storefront.title}. Do you want to link to a different Hydrogen storefront on Shopify?`
     });
     if (!overwriteLink) {
       return;
     }
   }
-  const { storefronts, adminSession } = await getStorefronts(shop);
-  if (storefronts.length === 0) {
-    logMissingStorefronts(adminSession);
-    return;
-  }
+  const storefronts = await getStorefronts(session);
   let selectedStorefront;
-  const cliCommand = await getCliCommand();
   if (flagStorefront) {
     selectedStorefront = storefronts.find(
       ({ title }) => title === flagStorefront
@@ -59,7 +83,7 @@ async function linkStorefront({
           "There's no storefront matching",
           { userInput: flagStorefront },
           "on your",
-          { userInput: shop },
+          { userInput: config.shop },
           "shop. To see all available Hydrogen storefronts, run",
           {
             command: `${cliCommand} list`
@@ -69,32 +93,66 @@ async function linkStorefront({
       return;
     }
   } else {
-    const choices = storefronts.map(({ id, title, productionUrl }) => ({
-      value: id,
-      label: `${title} (${productionUrl})`
-    }));
+    const choices = [
+      {
+        label: "Create a new storefront",
+        value: null
+      },
+      ...storefronts.map(({ id, title, productionUrl }) => ({
+        label: `${title} (${productionUrl})`,
+        value: id
+      }))
+    ];
     const storefrontId = await renderSelectPrompt({
-      message: "Choose a Hydrogen storefront to link",
+      message: "Select a Hydrogen storefront to link",
       choices
     });
-    selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
+    if (storefrontId) {
+      selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
+    } else {
+      selectedStorefront = await createNewStorefront(root, session);
+    }
   }
-  if (!selectedStorefront) {
-    return;
+  if (selectedStorefront) {
+    await setStorefront(root, selectedStorefront);
   }
-  await setStorefront(path ?? process.cwd(), selectedStorefront);
-  if (!silent) {
-    renderSuccess({
-      body: [{ userInput: selectedStorefront.title }, "is now linked"],
-      nextSteps: [
-        [
-          "Run",
-          { command: `${cliCommand} dev` },
-          "to start your local development server and start building"
-        ]
-      ]
-    });
+  return selectedStorefront;
+}
+async function createNewStorefront(root, session) {
+  const projectDirectory = basename(root);
+  const projectName = await renderTextPrompt({
+    message: "New storefront name",
+    defaultValue: titleize(projectDirectory)
+  });
+  let storefront;
+  let jobId;
+  await renderTasks([
+    {
+      title: "Creating storefront",
+      task: async () => {
+        const result = await createStorefront(session, projectName);
+        storefront = result.storefront;
+        jobId = result.jobId;
+      }
+    },
+    {
+      title: "Creating API tokens",
+      task: async () => {
+        try {
+          await waitForJob(session, jobId);
+        } catch (_err) {
+          storefront = void 0;
+        }
+      },
+      skip: () => !jobId
+    }
+  ]);
+  if (!storefront) {
+    throw new AbortError(
+      "Unknown error ocurred. Please try again or contact support if the error persists."
+    );
   }
+  return storefront;
 }
 
-export { Link as default, linkStorefront };
+export { Link as default, linkStorefront, runLink };