@shopify/cli-hydrogen 4.0.0-alpha.10 → 4.0.0-alpha.12

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

@@ -0,0 +1,23 @@
+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: {
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        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({ entry, path: appPath, sourcemap, disableRouteWarning, }: {
+    entry: string;
+    path?: string;
+    sourcemap?: boolean;
+    disableRouteWarning?: boolean;
+}): Promise<void>;
+declare function copyPublicFiles(publicPath: string, buildPathClient: string): Promise<void>;
+declare function assertEntryFileExists(filePath: string): Promise<void>;
+
+export { assertEntryFileExists, copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/build.js

@@ -1,8 +1,9 @@
 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 { renderFatalError } from '@shopify/cli-kit/node/ui';
 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';
@@ -10,25 +11,24 @@ import { findMissingRoutes } from '../../utils/missing-routes.js';
 
 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,
+    entry: commonFlags.entry,
+    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
     }),
-    disableRouteWarning: Flags.boolean({
-      description: "Disable warning about missing standard routes",
+    ["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({
@@ -48,12 +48,12 @@ async function runBuild({
     buildPathWorkerFile,
     publicPath
   } = getProjectPaths(appPath, entry);
+  await assertEntryFileExists(entryFile);
   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 })
+    file.rmdir(buildPath, { force: true })
   ]);
   output.info(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
@@ -72,8 +72,7 @@ async function runBuild({
   ]);
   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)
@@ -96,11 +95,29 @@ async function runBuild({
   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);
+}
+async function assertEntryFileExists(filePath) {
+  const exists = await file.exists(filePath);
+  if (!exists) {
+    if (!path.extname(filePath)) {
+      const { readdir } = await import('fs/promises');
+      const files = await readdir(path.dirname(filePath));
+      const exists2 = files.some((file2) => {
+        const { name, ext } = path.parse(file2);
+        return name === path.basename(filePath) && /^\.[jt]s$/.test(ext);
+      });
+      if (exists2)
+        return;
+    }
+    renderFatalError({
+      name: "FileNotFound",
+      type: 0,
+      message: "Entry file not found",
+      tryMessage: "Ensure the file exists and pass the correct path with the --entry flag"
+    });
+    process.exit(1);
+  }
 }
 
-export { copyPublicFiles, Build as default, runBuild };
+export { assertEntryFileExists, 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

@@ -5,6 +5,7 @@ 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
   };

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

@@ -0,0 +1,21 @@
+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: {
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        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>;
+}
+declare function runDev({ entry, port, path: appPath, disableVirtualRoutes, }: {
+    entry: string;
+    port?: number;
+    path?: string;
+    disableVirtualRoutes?: boolean;
+}): Promise<void>;
+
+export { Dev as default, runDev };

package/dist/commands/hydrogen/dev.js

@@ -1,10 +1,10 @@
 import path from 'path';
 import fs from 'fs/promises';
 import { output } from '@shopify/cli-kit';
-import { copyPublicFiles } from './build.js';
+import { assertEntryFileExists, 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';
@@ -15,19 +15,13 @@ 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
-    }),
-    disableVirtualRoutes: Flags.boolean({
+    entry: commonFlags.entry,
+    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
     })
@@ -35,7 +29,7 @@ class Dev extends Command {
   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({
@@ -52,6 +46,7 @@ async function runDev({
 async function compileAndWatch(entry, appPath, port, disableVirtualRoutes = false) {
   console.time(LOG_INITIAL_BUILD);
   const { root, entryFile, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath, entry);
+  await assertEntryFileExists(entryFile);
   const checkingHydrogenVersion = checkHydrogenVersion(root);
   const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
   const reloadConfig = async () => {

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

@@ -0,0 +1,33 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+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 { GenerateRoute as default, runGenerate };

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

@@ -1,10 +1,10 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { path, error, file, ui } from '@shopify/cli-kit';
+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 ts from 'typescript';
-import prettier from 'prettier';
+import { transpileFile, format, resolveFormatConfig } from '../../../utils/transpile-ts.js';
 
 const ROUTE_MAP = {
   page: "/pages/$pageHandle",
@@ -18,22 +18,24 @@ const ROUTE_MAP = {
 };
 const ROUTES = [...Object.keys(ROUTE_MAP), "all"];
 class GenerateRoute extends Command {
+  static description = "Generates a standard Shopify route.";
   static flags = {
-    path: commonFlags.path,
     adapter: Flags.string({
-      description: "The Remix adapter for imports in the template (default: @shopify/remix-oxygen)",
+      description: "Remix adapter used in the route. The default is `@shopify/remix-oxygen`.",
       env: "SHOPIFY_HYDROGEN_FLAG_ADAPTER"
     }),
-    force: Flags.boolean({
-      char: "f",
-      description: "Overwrite existing files",
-      env: "SHOPIFY_HYDROGEN_FLAG_FORCE"
-    })
+    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 a route for.`,
+      description: `The route to generate. One of ${ROUTES.join()}.`,
       required: true,
       options: ROUTES,
       env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
@@ -46,13 +48,11 @@ class GenerateRoute extends Command {
     const { route } = args;
     const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
     if (!routePath) {
-      throw new error.Abort(
-        `No template generator found for ${route}. Try one of ${ROUTES.join()}`
+      throw new AbortError(
+        `No route found for ${route}. Try one of ${ROUTES.join()}.`
       );
     }
-    const isTypescript = await file.exists(
-      path.join(directory, "tsconfig.json")
-    );
+    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) {
@@ -67,7 +67,7 @@ class GenerateRoute extends Command {
         );
       }
     } catch (err) {
-      throw new error.Abort(err.message);
+      throw new AbortError(err.message);
     }
     const extension = isTypescript ? ".tsx" : ".jsx";
     const success = Array.from(result.values()).filter(
@@ -75,10 +75,13 @@ class GenerateRoute extends Command {
     );
     renderSuccess({
       headline: `${success.length} of ${result.size} route${result.size > 1 ? "s" : ""} generated`,
-      body: Array.from(result.entries()).map(([path2, result2]) => {
-        const { operation } = result2;
-        return `\u2022 [${operation}] app/routes${path2}${extension}`;
-      }).join("\n")
+      body: {
+        list: {
+          items: Array.from(result.entries()).map(
+            ([path2, { operation }]) => `[${operation}] app/routes${path2}${extension}`
+          )
+        }
+      }
     });
   }
 }
@@ -89,8 +92,14 @@ async function runGenerate(route, {
   adapter,
   templatesRoot = new URL("../../../", import.meta.url).pathname
 }) {
+  let operation;
   const extension = typescript ? ".tsx" : ".jsx";
-  const templatePath = path.join(templatesRoot, "templates", `${route}.tsx`);
+  const templatePath = path.join(
+    templatesRoot,
+    "generator-templates",
+    "routes",
+    `${route}.tsx`
+  );
   const destinationPath = path.join(
     directory,
     "app",
@@ -113,26 +122,23 @@ async function runGenerate(route, {
         choices: options
       }
     ]);
-    return {
-      operation: choice.value === "skip" ? "skipped" : "overwritten"
-    };
+    operation = choice.value === "skip" ? "skipped" : "overwritten";
+    if (operation === "skipped") {
+      return { operation };
+    }
+  } else {
+    operation = "generated";
   }
   let templateContent = await file.read(templatePath);
   if (!typescript) {
-    const config = await file.exists(path.join(directory, "jsconfig.json")) ? await import(path.join(directory, "jsconfig.json")) : {
-      lib: ["DOM", "DOM.Iterable", "ES2022"],
-      isolatedModules: true,
-      esModuleInterop: true,
-      resolveJsonModule: true,
-      target: "ES2022",
-      strict: true,
-      allowJs: true,
-      forceConsistentCasingInFileNames: true,
-      skipLibCheck: true
-    };
-    const withArtificialNewLines = escapeNewLines(templateContent);
-    const compiled = compile(withArtificialNewLines, config);
-    templateContent = restoreNewLines(compiled.outputText);
+    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(
@@ -140,35 +146,18 @@ async function runGenerate(route, {
       adapter
     );
   }
-  templateContent = await format(templateContent, destinationPath);
+  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: "generated"
+    operation
   };
 }
-const escapeNewLines = (code) => code.replace(/\n\n/g, "\n/* :newline: */");
-const restoreNewLines = (code) => code.replace(/\/\* :newline: \*\//g, "\n");
-function compile(code, options = {}) {
-  return ts.transpileModule(code, {
-    reportDiagnostics: false,
-    compilerOptions: {
-      ...options,
-      jsx: 1,
-      removeComments: false
-    }
-  });
-}
-async function format(content, filePath) {
-  const config = await prettier.resolveConfig(filePath) || {};
-  const ext = path.extname(filePath);
-  const formattedContent = await prettier.format(content, {
-    parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
-    ...config
-  });
-  return formattedContent;
-}
 
 export { GenerateRoute as default, runGenerate };

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

@@ -0,0 +1 @@
+

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,22 @@
+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: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    };
+    run(): Promise<void>;
+}
+declare function runInit(options?: {
+    path?: string;
+    template?: string;
+    language?: string;
+    token?: string;
+    force?: boolean;
+}): Promise<void>;
+
+export { Init as default, runInit };