@shopify/cli-hydrogen 0.0.0-next-744c490-20230315110711

package/dist/commands/hydrogen/generate/routes.d.ts

@@ -0,0 +1,16 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class GenerateRoutes extends Command {
+    static description: string;
+    static hidden: true;
+    static flags: {
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        typescript: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    };
+    run(): Promise<void>;
+}
+
+export { GenerateRoutes as default };

package/dist/commands/hydrogen/generate/routes.js

@@ -0,0 +1,22 @@
+import GenerateRoute from './route.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+class GenerateRoutes extends Command {
+  static description = "Generates all supported standard shopify routes.";
+  static hidden;
+  static flags = GenerateRoute.flags;
+  async run() {
+    const { flags } = await this.parse(GenerateRoutes);
+    await GenerateRoute.run([
+      "all",
+      ...Object.entries(flags).map(([name, value]) => {
+        if (value === true) {
+          return `--${name}`;
+        }
+        return `--${name}=${value}`;
+      })
+    ]);
+  }
+}
+
+export { GenerateRoutes as default };

package/dist/commands/hydrogen/init.d.ts

@@ -0,0 +1,24 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Init extends Command {
+    static description: string;
+    static flags: {
+        force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    run(): Promise<void>;
+}
+declare function runInit(options?: {
+    path?: string;
+    template?: string;
+    language?: string;
+    token?: string;
+    force?: boolean;
+    installDeps?: boolean;
+}): Promise<void>;
+
+export { Init as default, runInit };

package/dist/commands/hydrogen/init.js

@@ -0,0 +1,199 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { renderFatalError } from '@shopify/cli-kit/node/ui';
+import Flags from '@oclif/core/lib/flags.js';
+import { output, path } from '@shopify/cli-kit';
+import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../utils/flags.js';
+import { transpileProject } from '../../utils/transpile-ts.js';
+import { getLatestTemplates } from '../../utils/template-downloader.js';
+import { checkHydrogenVersion } from '../../utils/check-version.js';
+import { readdir } from 'fs/promises';
+import { fileURLToPath } from 'url';
+
+const STARTER_TEMPLATES = ["hello-world", "demo-store"];
+const FLAG_MAP = { f: "force" };
+class Init extends Command {
+  static description = "Creates a new Hydrogen storefront.";
+  static flags = {
+    force: commonFlags.force,
+    path: Flags.string({
+      description: "The path to the directory of the new Hydrogen storefront.",
+      env: "SHOPIFY_HYDROGEN_FLAG_PATH"
+    }),
+    language: Flags.string({
+      description: "Sets the template language to use. One of `js` or `ts`.",
+      choices: ["js", "ts"],
+      env: "SHOPIFY_HYDROGEN_FLAG_LANGUAGE"
+    }),
+    template: Flags.string({
+      description: "Sets the template to use. One of `demo-store` or `hello-world`.",
+      choices: STARTER_TEMPLATES,
+      env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE"
+    }),
+    "install-deps": Flags.boolean({
+      description: "Auto install dependencies using the active package manager",
+      env: "SHOPIFY_HYDROGEN_FLAG_INSTALL_DEPS",
+      allowNo: true
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Init);
+    await runInit(flagsToCamelObject(flags));
+  }
+}
+async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
+  supressNodeExperimentalWarnings();
+  const showUpgrade = await checkHydrogenVersion(
+    fileURLToPath(new URL("../../../package.json", import.meta.url)),
+    "cli"
+  );
+  if (showUpgrade) {
+    const packageManager2 = await packageManagerUsedForCreating();
+    showUpgrade(
+      packageManager2 === "unknown" ? "" : `Please use the latest version with \`${packageManager2} create @shopify/hydrogen@latest\``
+    );
+  }
+  const templatesPromise = getLatestTemplates().catch((error) => {
+    output.info("\n\n\n");
+    renderFatalError(error);
+    process.exit(1);
+  });
+  const { ui, file } = await import('@shopify/cli-kit');
+  const { renderSuccess, renderInfo } = await import('@shopify/cli-kit/node/ui');
+  const prompts = [];
+  if (!options.template) {
+    prompts.push({
+      type: "select",
+      name: "template",
+      message: "Choose a template",
+      choices: STARTER_TEMPLATES.map((value) => ({
+        name: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+        value
+      }))
+    });
+  }
+  if (!options.language) {
+    prompts.push({
+      type: "select",
+      name: "language",
+      message: "Choose a language",
+      choices: [
+        { name: "JavaScript", value: "js" },
+        { name: "TypeScript", value: "ts" }
+      ],
+      default: "js"
+    });
+  }
+  if (!options.path) {
+    prompts.push({
+      type: "input",
+      name: "path",
+      message: "Where would you like to create your app?",
+      default: "hydrogen-storefront"
+    });
+  }
+  const {
+    path: location = options.path,
+    template: appTemplate = options.template,
+    language = options.language ?? "js"
+  } = prompts.length > 0 ? await ui.prompt(prompts) : options;
+  const projectName = path.basename(location);
+  const projectDir = path.resolve(process.cwd(), location);
+  if (await projectExists(projectDir)) {
+    if (!options.force) {
+      const { deleteFiles } = await ui.prompt([
+        {
+          type: "select",
+          name: "deleteFiles",
+          message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
+          choices: [
+            { name: "Yes, delete the files", value: "true" },
+            { name: "No, do not delete the files", value: "false" }
+          ],
+          default: "false"
+        }
+      ]);
+      if (deleteFiles === "false") {
+        renderInfo({
+          headline: `Destination path ${location} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`
+        });
+        return;
+      }
+    }
+    await file.rmdir(projectDir, { force: true });
+  }
+  let downloaded = false;
+  setTimeout(
+    () => !downloaded && output.info("\n\u{1F4E5} Downloading templates..."),
+    150
+  );
+  const { templatesDir } = await templatesPromise;
+  downloaded = true;
+  await file.copy(path.join(templatesDir, appTemplate), projectDir);
+  if (language === "js") {
+    try {
+      await transpileProject(projectDir);
+    } catch (error) {
+      await file.rmdir(projectDir, { force: true });
+      throw error;
+    }
+  }
+  let depsInstalled = false;
+  let packageManager = await packageManagerUsedForCreating();
+  if (packageManager !== "unknown") {
+    const installDeps = options.installDeps ?? (await ui.prompt([
+      {
+        type: "select",
+        name: "installDeps",
+        message: `Install dependencies with ${packageManager}?`,
+        choices: [
+          { name: "Yes", value: "true" },
+          { name: "No", value: "false" }
+        ],
+        default: "true"
+      }
+    ])).installDeps === "true";
+    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: [
+      `Run \`cd ${location}\`${depsInstalled ? "" : `, \`${packageManager} install\`,`} and \`${packageManager + (packageManager === "npm" ? " run" : "")} dev\` to start your local development server and start building.`
+    ],
+    reference: [
+      "Building with Hydrogen: https://shopify.dev/custom-storefronts/hydrogen"
+    ]
+  });
+  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) {
+  const { file } = await import('@shopify/cli-kit');
+  return await file.exists(projectDir) && await file.isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
+}
+function supressNodeExperimentalWarnings() {
+  const warningListener = process.listeners("warning")[0];
+  if (warningListener) {
+    process.removeAllListeners("warning");
+    process.prependListener("warning", (warning) => {
+      if (warning.name != "ExperimentalWarning") {
+        warningListener(warning);
+      }
+    });
+  }
+}
+
+export { Init as default, runInit };

package/dist/commands/hydrogen/init.test.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,79 @@
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { temporaryDirectoryTask } from 'tempy';
+import { runInit } from './init.js';
+import { ui } from '@shopify/cli-kit';
+import { installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+
+describe("init", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock("@shopify/cli-kit");
+    vi.mock("../../utils/transpile-ts.js");
+    vi.mock("../../utils/template-downloader.js", async () => ({
+      getLatestTemplates: () => Promise.resolve({})
+    }));
+    vi.mock("@shopify/cli-kit/node/node-package-manager");
+    vi.mocked(ui.prompt).mockImplementation(
+      () => Promise.resolve({ installDeps: "false" })
+    );
+  });
+  const defaultOptions = (stubs) => ({
+    template: "hello-world",
+    language: "js",
+    path: "path/to/project",
+    ...stubs
+  });
+  describe.each([
+    { flag: "template", value: "hello-world" },
+    { flag: "installDeps", value: true },
+    { flag: "language", value: "ts" },
+    { flag: "path", value: "./my-app" }
+  ])("flag $flag", ({ flag, value }) => {
+    it(`does not prompt the user for ${flag} when a value is passed in options`, async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const options = defaultOptions({
+          path: tmpDir,
+          [flag]: value
+        });
+        await runInit(options);
+        expect(ui.prompt).not.toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: flag
+            })
+          ])
+        );
+      });
+    });
+    it(`prompts the user for ${flag} when no value is passed in options`, async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const options = defaultOptions({
+          path: tmpDir,
+          [flag]: void 0
+        });
+        await runInit(options);
+        expect(ui.prompt).toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: flag
+            })
+          ])
+        );
+      });
+    });
+  });
+  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("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();
+    });
+  });
+});

package/dist/commands/hydrogen/preview.d.ts

@@ -0,0 +1,17 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Preview extends Command {
+    static description: string;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+    };
+    run(): Promise<void>;
+}
+declare function runPreview({ port, path: appPath, }: {
+    port?: number;
+    path?: string;
+}): Promise<void>;
+
+export { Preview as default, runPreview };

package/dist/commands/hydrogen/preview.js

@@ -0,0 +1,34 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { muteDevLogs } from '../../utils/log.js';
+import { getProjectPaths } from '../../utils/config.js';
+import { commonFlags } from '../../utils/flags.js';
+import { startMiniOxygen } from '../../utils/mini-oxygen.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
+  };
+  async run() {
+    const { flags } = await this.parse(Preview);
+    await runPreview({ ...flags });
+  }
+}
+async function runPreview({
+  port,
+  path: appPath
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "production";
+  muteDevLogs({ workerReload: false });
+  const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
+  await startMiniOxygen({
+    root,
+    port,
+    buildPathClient,
+    buildPathWorkerFile
+  });
+}
+
+export { Preview as default, runPreview };

package/dist/create-app.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/create-app.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { runInit } from './commands/hydrogen/init.js';
+
+runInit();

package/dist/generator-templates/routes/[robots.txt].tsx

@@ -0,0 +1,41 @@
+import {type LoaderArgs} from '@shopify/remix-oxygen';
+
+export const loader = ({request}: LoaderArgs) => {
+  const url = new URL(request.url);
+
+  return new Response(robotsTxtData({url: url.origin}), {
+    status: 200,
+    headers: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'content-type': 'text/plain',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'cache-control': `max-age=${60 * 60 * 24}`,
+    },
+  });
+};
+
+function robotsTxtData({url}: {url: string}) {
+  const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
+
+  return `
+User-agent: *
+Disallow: /admin
+Disallow: /cart
+Disallow: /orders
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /account
+${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
+
+# Google adsbot ignores robots.txt unless specifically named!
+User-agent: adsbot-google
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /orders
+
+User-agent: Pinterest
+Crawl-delay: 1
+`.trim();
+}

package/dist/generator-templates/routes/[sitemap.xml].tsx

@@ -0,0 +1,204 @@
+import {flattenConnection} from '@shopify/hydrogen';
+import type {LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  CollectionConnection,
+  PageConnection,
+  ProductConnection,
+} from '@shopify/hydrogen/storefront-api-types';
+
+const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time
+
+interface SitemapQueryData {
+  products: ProductConnection;
+  collections: CollectionConnection;
+  pages: PageConnection;
+}
+
+interface ProductEntry {
+  url: string;
+  lastMod: string;
+  changeFreq: string;
+  image?: {
+    url: string;
+    title?: string;
+    caption?: string;
+  };
+}
+
+export async function loader({request, context: {storefront}}: LoaderArgs) {
+  const data = await storefront.query<SitemapQueryData>(SITEMAP_QUERY, {
+    variables: {
+      urlLimits: MAX_URLS,
+      language: storefront.i18n.language,
+    },
+  });
+
+  if (!data) {
+    throw new Response(null, {status: 404});
+  }
+
+  return new Response(
+    shopSitemap({data, baseUrl: new URL(request.url).origin}),
+    {
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'content-type': 'application/xml',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'cache-control': `max-age=${60 * 60 * 24}`,
+      },
+    },
+  );
+}
+
+function xmlEncode(string: string) {
+  return string.replace(/[&<>'"]/g, (char) => `&#${char.charCodeAt(0)};`);
+}
+
+function shopSitemap({
+  data,
+  baseUrl,
+}: {
+  data: SitemapQueryData;
+  baseUrl: string;
+}) {
+  const productsData = flattenConnection(data.products)
+    .filter((product) => product.onlineStoreUrl)
+    .map((product) => {
+      const url = `${baseUrl}/products/${xmlEncode(product.handle)}`;
+
+      const finalObject: ProductEntry = {
+        url,
+        lastMod: product.updatedAt,
+        changeFreq: 'daily',
+      };
+
+      if (product.featuredImage?.url) {
+        finalObject.image = {
+          url: xmlEncode(product.featuredImage.url),
+        };
+
+        if (product.title) {
+          finalObject.image.title = xmlEncode(product.title);
+        }
+
+        if (product.featuredImage.altText) {
+          finalObject.image.caption = xmlEncode(product.featuredImage.altText);
+        }
+      }
+
+      return finalObject;
+    });
+
+  const collectionsData = flattenConnection(data.collections)
+    .filter((collection) => collection.onlineStoreUrl)
+    .map((collection) => {
+      const url = `${baseUrl}/collections/${collection.handle}`;
+
+      return {
+        url,
+        lastMod: collection.updatedAt,
+        changeFreq: 'daily',
+      };
+    });
+
+  const pagesData = flattenConnection(data.pages)
+    .filter((page) => page.onlineStoreUrl)
+    .map((page) => {
+      const url = `${baseUrl}/pages/${page.handle}`;
+
+      return {
+        url,
+        lastMod: page.updatedAt,
+        changeFreq: 'weekly',
+      };
+    });
+
+  const urlsDatas = [...productsData, ...collectionsData, ...pagesData];
+
+  return `
+    <urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+    >
+      ${urlsDatas.map((url) => renderUrlTag(url)).join('')}
+    </urlset>`;
+}
+
+function renderUrlTag({
+  url,
+  lastMod,
+  changeFreq,
+  image,
+}: {
+  url: string;
+  lastMod?: string;
+  changeFreq?: string;
+  image?: {
+    url: string;
+    title?: string;
+    caption?: string;
+  };
+}) {
+  return `
+    <url>
+      <loc>${url}</loc>
+      <lastmod>${lastMod}</lastmod>
+      <changefreq>${changeFreq}</changefreq>
+      ${
+        image
+          ? `
+        <image:image>
+          <image:loc>${image.url}</image:loc>
+          <image:title>${image.title ?? ''}</image:title>
+          <image:caption>${image.caption ?? ''}</image:caption>
+        </image:image>`
+          : ''
+      }
+
+    </url>
+  `;
+}
+
+const SITEMAP_QUERY = `#graphql
+  query sitemaps($urlLimits: Int, $language: LanguageCode)
+  @inContext(language: $language) {
+    products(
+      first: $urlLimits
+      query: "published_status:'online_store:visible'"
+    ) {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+          title
+          featuredImage {
+            url
+            altText
+          }
+        }
+      }
+    }
+    collections(
+      first: $urlLimits
+      query: "published_status:'online_store:visible'"
+    ) {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+        }
+      }
+    }
+    pages(first: $urlLimits, query: "published_status:'published'") {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+        }
+      }
+    }
+  }
+`;