@shopify/cli-hydrogen 4.0.0-alpha.8 → 4.0.0

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

@@ -0,0 +1,20 @@
+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 Build extends Command {
+    static description: string;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        sourcemap: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        "disable-route-warning": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    run(): Promise<void>;
+}
+declare function runBuild({ path: appPath, sourcemap, disableRouteWarning, }: {
+    path?: string;
+    sourcemap?: boolean;
+    disableRouteWarning?: boolean;
+}): Promise<void>;
+declare function copyPublicFiles(publicPath: string, buildPathClient: string): Promise<void>;
+
+export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/build.js

@@ -1,74 +1,68 @@
 import path from 'path';
-import { output } from '@shopify/cli-kit';
+import { file, output } from '@shopify/cli-kit';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
-import { commonFlags } from '../../utils/flags.js';
+import { commonFlags, flagsToCamelObject } from '../../utils/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import Flags from '@oclif/core/lib/flags.js';
+import { checkLockfileStatus } from '../../utils/check-lockfile.js';
+import { findMissingRoutes } from '../../utils/missing-routes.js';
+import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 class Build extends Command {
-  static description = "Builds a Hydrogen storefront for production";
+  static description = "Builds a Hydrogen storefront for production.";
   static flags = {
-    ...commonFlags,
+    path: commonFlags.path,
     sourcemap: Flags.boolean({
-      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP"
-    }),
-    entry: Flags.string({
+      description: "Generate sourcemaps for the build.",
       env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
-      required: true
+      default: true
     }),
-    minify: Flags.boolean({
-      description: "Minify the build output",
-      env: "SHOPIFY_HYDROGEN_FLAG_MINIFY"
+    ["disable-route-warning"]: Flags.boolean({
+      description: "Disable warning about missing standard routes.",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     })
   };
   async run() {
     const { flags } = await this.parse(Build);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    await runBuild({ ...flags, path: directory });
+    await runBuild({ ...flagsToCamelObject(flags), path: directory });
   }
 }
 async function runBuild({
-  entry,
+  path: appPath,
   sourcemap = true,
-  path: appPath
+  disableRouteWarning = false
 }) {
   if (!process.env.NODE_ENV) {
     process.env.NODE_ENV = "production";
   }
-  const {
-    root,
-    entryFile,
-    buildPath,
-    buildPathClient,
-    buildPathWorkerFile,
-    publicPath
-  } = getProjectPaths(appPath, entry);
+  const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(appPath);
+  await checkLockfileStatus(root);
   console.time(LOG_WORKER_BUILT);
-  const { default: fsExtra } = await import('fs-extra');
   const [remixConfig] = await Promise.all([
-    getRemixConfig(root, entryFile, publicPath),
-    fsExtra.rm(buildPath, { force: true, recursive: true })
+    getRemixConfig(root),
+    file.rmdir(buildPath, { force: true })
   ]);
   output.info(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
-  const remix = await import('@remix-run/dev/dist/compiler.js');
+  const { build } = await import('@remix-run/dev/dist/compiler/build.js');
+  const { logCompileFailure } = await import('@remix-run/dev/dist/compiler/onCompileFailure.js');
   await Promise.all([
     copyPublicFiles(publicPath, buildPathClient),
-    remix.build(remixConfig, {
+    build(remixConfig, {
       mode: process.env.NODE_ENV,
       sourcemap,
-      onBuildFailure: (failure) => {
-        remix.formatBuildFailure(failure);
+      onCompileFailure: (failure) => {
+        logCompileFailure(failure);
         throw Error();
       }
     })
   ]);
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
-    const { size } = await fsExtra.stat(buildPathWorkerFile);
-    const sizeMB = size / (1024 * 1024);
+    const sizeMB = await file.size(buildPathWorkerFile) / (1024 * 1024);
     output.info(
       output.content`   ${colors.dim(
         path.relative(root, buildPathWorkerFile)
@@ -76,17 +70,28 @@ async function runBuild({
     );
     if (sizeMB >= 1) {
       output.warn(
-        "\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.\n"
+        `\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+`
+      );
+    }
+  }
+  if (!disableRouteWarning) {
+    const missingRoutes = findMissingRoutes(remixConfig);
+    if (missingRoutes.length) {
+      const packageManager = await getPackageManager(root);
+      const exec = packageManager === "npm" ? "npx" : packageManager;
+      output.warn(
+        `Heads up: Shopify stores have a number of standard routes that aren\u2019t set up yet.
+Some functionality and backlinks might not work as expected until these are created or redirects are set up.
+This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ? "s" : ""}. For more details, run \`${exec} shopify hydrogen check routes\`.
+`
       );
     }
   }
+  process.exit(0);
 }
 async function copyPublicFiles(publicPath, buildPathClient) {
-  const { default: fsExtra } = await import('fs-extra');
-  return fsExtra.copy(publicPath, buildPathClient, {
-    recursive: true,
-    overwrite: true
-  });
+  return file.copy(publicPath, buildPathClient);
 }
 
 export { copyPublicFiles, Build as default, runBuild };

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

@@ -0,0 +1,18 @@
+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 GenerateRoute extends Command {
+    static description: string;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    };
+    static args: {
+        name: string;
+        description: string;
+        required: boolean;
+        options: string[];
+    }[];
+    run(): Promise<void>;
+}
+
+export { GenerateRoute as default };

package/dist/commands/hydrogen/check.js

@@ -0,0 +1,35 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { path } from '@shopify/cli-kit';
+import { commonFlags } from '../../utils/flags.js';
+import { getRemixConfig } from '../../utils/config.js';
+import { logMissingRoutes, findMissingRoutes } from '../../utils/missing-routes.js';
+
+class GenerateRoute extends Command {
+  static description = "Returns diagnostic information about a Hydrogen storefront.";
+  static flags = {
+    path: commonFlags.path
+  };
+  static args = [
+    {
+      name: "resource",
+      description: `The resource to check. Currently only 'routes' is supported.`,
+      required: true,
+      options: ["routes"]
+    }
+  ];
+  async run() {
+    const { flags, args } = await this.parse(GenerateRoute);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    if (args.resource === "routes") {
+      await runCheckRoutes({ directory });
+    } else {
+      throw new Error("Invalid command argument.");
+    }
+  }
+}
+async function runCheckRoutes({ directory }) {
+  const remixConfig = await getRemixConfig(directory);
+  logMissingRoutes(findMissingRoutes(remixConfig));
+}
+
+export { GenerateRoute as default };

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

@@ -0,0 +1,14 @@
+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 Dev 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>;
+        "disable-virtual-routes": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    run(): Promise<void>;
+}
+
+export { Dev as default };

package/dist/commands/hydrogen/dev.js

@@ -4,99 +4,99 @@ import { output } from '@shopify/cli-kit';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
 import { muteDevLogs } from '../../utils/log.js';
-import { commonFlags } from '../../utils/flags.js';
+import { commonFlags, flagsToCamelObject } from '../../utils/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import Flags from '@oclif/core/lib/flags.js';
 import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+import { checkHydrogenVersion } from '../../utils/check-version.js';
+import { addVirtualRoutes } from '../../utils/virtual-routes.js';
 
 const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
 const LOG_REBUILT = "\u{1F680} Rebuilt";
 class Dev extends Command {
-  static description = "Runs Hydrogen storefront in a MiniOxygen worker in development";
+  static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
   static flags = {
-    ...commonFlags,
-    port: Flags.integer({
-      description: "Port to run the preview server on",
-      env: "SHOPIFY_HYDROGEN_FLAG_PORT",
-      default: 3e3
-    }),
-    entry: Flags.string({
-      env: "SHOPIFY_HYDROGEN_FLAG_ENTRY",
-      required: true
+    path: commonFlags.path,
+    port: commonFlags.port,
+    ["disable-virtual-routes"]: Flags.boolean({
+      description: "Disable rendering fallback routes when a route file doesn't exist",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
+      default: false
     })
   };
   async run() {
     const { flags } = await this.parse(Dev);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    await runDev({ ...flags, path: directory });
+    await runDev({ ...flagsToCamelObject(flags), path: directory });
   }
 }
 async function runDev({
-  entry,
   port,
-  path: appPath
+  path: appPath,
+  disableVirtualRoutes
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "development";
   muteDevLogs();
-  await compileAndWatch(getProjectPaths(appPath, entry), { port });
-}
-async function compileAndWatch(projectPaths, options = {}, isInit = true) {
-  isInit && console.time(LOG_INITIAL_BUILD);
-  const { root, entryFile, publicPath, buildPathClient, buildPathWorkerFile } = projectPaths;
-  const shouldReloadRemixApp = (file) => file.startsWith(path.resolve(root, "remix.config."));
-  const remixConfig = await getRemixConfig(
-    root,
-    entryFile,
-    publicPath,
-    options.cacheBust
-  );
+  console.time(LOG_INITIAL_BUILD);
+  const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
+  const checkingHydrogenVersion = checkHydrogenVersion(root);
   const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
-  const remix = await import('@remix-run/dev/dist/compiler.js');
-  const stopCompileWatcher = await remix.watch(remixConfig, {
+  const reloadConfig = async () => {
+    const config = await getRemixConfig(root);
+    return disableVirtualRoutes ? config : addVirtualRoutes(config);
+  };
+  const getFilePaths = (file) => {
+    const fileRelative = path.relative(root, file);
+    return [fileRelative, path.resolve(root, fileRelative)];
+  };
+  const { watch } = await import('@remix-run/dev/dist/compiler/watch.js');
+  await watch(await reloadConfig(), {
+    reloadConfig,
     mode: process.env.NODE_ENV,
     async onInitialBuild() {
       await copyingFiles;
-      if (isInit) {
-        console.timeEnd(LOG_INITIAL_BUILD);
-        await startMiniOxygen({
-          root,
-          port: options.port,
-          watch: true,
-          buildPathWorkerFile,
-          buildPathClient
-        });
-      }
+      console.timeEnd(LOG_INITIAL_BUILD);
+      await startMiniOxygen({
+        root,
+        port,
+        watch: true,
+        buildPathWorkerFile,
+        buildPathClient
+      });
+      const showUpgrade = await checkingHydrogenVersion;
+      if (showUpgrade)
+        showUpgrade();
     },
     async onFileCreated(file) {
+      const [relative, absolute] = getFilePaths(file);
       output.info(`
-\u{1F4C4} File created: ${path.relative(root, file)}`);
-      if (file.startsWith(publicPath)) {
-        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
-      }
-      if (shouldReloadRemixApp(file)) {
-        await reloadRemixApp(file);
+\u{1F4C4} File created: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await copyPublicFiles(
+          absolute,
+          absolute.replace(publicPath, buildPathClient)
+        );
       }
     },
     async onFileChanged(file) {
+      const [relative, absolute] = getFilePaths(file);
       output.info(`
-\u{1F4C4} File changed: ${path.relative(root, file)}`);
-      if (file.startsWith(publicPath)) {
-        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
-      }
-      if (shouldReloadRemixApp(file)) {
-        await reloadRemixApp(file);
+\u{1F4C4} File changed: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await copyPublicFiles(
+          absolute,
+          absolute.replace(publicPath, buildPathClient)
+        );
       }
     },
     async onFileDeleted(file) {
+      const [relative, absolute] = getFilePaths(file);
       output.info(`
-\u{1F4C4} File deleted: ${path.relative(root, file)}`);
-      if (file.startsWith(publicPath)) {
-        await fs.unlink(file.replace(publicPath, buildPathClient));
-      }
-      if (shouldReloadRemixApp(file)) {
-        await reloadRemixApp(file);
+\u{1F4C4} File deleted: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await fs.unlink(absolute.replace(publicPath, buildPathClient));
       }
     },
     onRebuildStart() {
@@ -107,10 +107,6 @@ async function compileAndWatch(projectPaths, options = {}, isInit = true) {
       console.timeEnd(LOG_REBUILT);
     }
   });
-  async function reloadRemixApp(cacheBust) {
-    await stopCompileWatcher();
-    compileAndWatch(projectPaths, { ...options, cacheBust }, false);
-  }
 }
 
-export { Dev as default, runDev };
+export { Dev as default };

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

@@ -0,0 +1,34 @@
+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 const GENERATOR_TEMPLATES_DIR = "generator-templates";
+interface Result {
+    operation: 'generated' | 'skipped' | 'overwritten';
+}
+declare class GenerateRoute extends Command {
+    static description: string;
+    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>;
+    };
+    static hidden: true;
+    static args: {
+        name: string;
+        description: string;
+        required: boolean;
+        options: string[];
+        env: string;
+    }[];
+    run(): Promise<void>;
+}
+declare function runGenerate(route: string, { directory, typescript, force, adapter, templatesRoot, }: {
+    directory: string;
+    typescript?: boolean;
+    force?: boolean;
+    adapter?: string;
+    templatesRoot?: string;
+}): Promise<Result>;
+
+export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

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

@@ -0,0 +1,165 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { path, file, ui } from '@shopify/cli-kit';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { commonFlags } from '../../../utils/flags.js';
+import Flags from '@oclif/core/lib/flags.js';
+import { transpileFile, format, resolveFormatConfig } from '../../../utils/transpile-ts.js';
+
+const GENERATOR_TEMPLATES_DIR = "generator-templates";
+const ROUTE_MAP = {
+  home: "/index",
+  page: "/pages/$pageHandle",
+  cart: "/cart",
+  products: "/products/$productHandle",
+  collections: "/collections/$collectionHandle",
+  policies: ["/policies/index", "/policies/$policyHandle"],
+  robots: "/[robots.txt]",
+  sitemap: "/[sitemap.xml]",
+  account: ["/account/login", "/account/register"]
+};
+const ROUTES = [...Object.keys(ROUTE_MAP), "all"];
+class GenerateRoute extends Command {
+  static description = "Generates a standard Shopify route.";
+  static flags = {
+    adapter: Flags.string({
+      description: "Remix adapter used in the route. The default is `@shopify/remix-oxygen`.",
+      env: "SHOPIFY_HYDROGEN_FLAG_ADAPTER"
+    }),
+    typescript: Flags.boolean({
+      description: "Generate TypeScript files",
+      env: "SHOPIFY_HYDROGEN_FLAG_TYPESCRIPT"
+    }),
+    force: commonFlags.force,
+    path: commonFlags.path
+  };
+  static hidden;
+  static args = [
+    {
+      name: "route",
+      description: `The route to generate. One of ${ROUTES.join()}.`,
+      required: true,
+      options: ROUTES,
+      env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
+    }
+  ];
+  async run() {
+    const result = /* @__PURE__ */ new Map();
+    const { flags, args } = await this.parse(GenerateRoute);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    const { route } = args;
+    const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
+    if (!routePath) {
+      throw new AbortError(
+        `No route found for ${route}. Try one of ${ROUTES.join()}.`
+      );
+    }
+    const isTypescript = flags.typescript || await file.exists(path.join(directory, "tsconfig.json"));
+    const routesArray = Array.isArray(routePath) ? routePath : [routePath];
+    try {
+      for (const item of routesArray) {
+        result.set(
+          item,
+          await runGenerate(item, {
+            directory,
+            typescript: isTypescript,
+            force: flags.force,
+            adapter: flags.adapter
+          })
+        );
+      }
+    } catch (err) {
+      throw new AbortError(err.message);
+    }
+    const extension = isTypescript ? ".tsx" : ".jsx";
+    const success = Array.from(result.values()).filter(
+      (result2) => result2.operation !== "skipped"
+    );
+    renderSuccess({
+      headline: `${success.length} of ${result.size} route${result.size > 1 ? "s" : ""} generated`,
+      body: {
+        list: {
+          items: Array.from(result.entries()).map(
+            ([path2, { operation }]) => `[${operation}] app/routes${path2}${extension}`
+          )
+        }
+      }
+    });
+  }
+}
+async function runGenerate(route, {
+  directory,
+  typescript,
+  force,
+  adapter,
+  templatesRoot = new URL("../../../", import.meta.url).pathname
+}) {
+  let operation;
+  const extension = typescript ? ".tsx" : ".jsx";
+  const templatePath = path.join(
+    templatesRoot,
+    GENERATOR_TEMPLATES_DIR,
+    "routes",
+    `${route}.tsx`
+  );
+  const destinationPath = path.join(
+    directory,
+    "app",
+    "routes",
+    `${route}${extension}`
+  );
+  const relativeDestinationPath = path.relative(directory, destinationPath);
+  if (!force && await file.exists(destinationPath)) {
+    const options = [
+      { name: "No", value: "skip" },
+      { name: `Yes`, value: "overwrite" }
+    ];
+    const choice = await ui.prompt([
+      {
+        type: "select",
+        name: "value",
+        message: `The file ${path.relativize(
+          relativeDestinationPath
+        )} already exists. Do you want to overwrite it?`,
+        choices: options
+      }
+    ]);
+    operation = choice.value === "skip" ? "skipped" : "overwritten";
+    if (operation === "skipped") {
+      return { operation };
+    }
+  } else {
+    operation = "generated";
+  }
+  let templateContent = await file.read(templatePath);
+  if (!typescript) {
+    const jsConfigPath = path.join(directory, "jsconfig.json");
+    const config = await file.exists(jsConfigPath) ? JSON.parse(
+      (await file.read(jsConfigPath, { encoding: "utf8" })).replace(
+        /^\s*\/\/.*$/gm,
+        ""
+      )
+    ) : void 0;
+    templateContent = transpileFile(templateContent, config?.compilerOptions);
+  }
+  if (adapter) {
+    templateContent = templateContent.replace(
+      /@shopify\/remix-oxygen/g,
+      adapter
+    );
+  }
+  templateContent = format(
+    templateContent,
+    await resolveFormatConfig(destinationPath),
+    destinationPath
+  );
+  if (!await file.exists(path.dirname(destinationPath))) {
+    await file.mkdir(path.dirname(destinationPath));
+  }
+  await file.write(destinationPath, templateContent);
+  return {
+    operation
+  };
+}
+
+export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

package/dist/commands/hydrogen/generate/route.test.d.ts

@@ -0,0 +1 @@
+