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

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: {
+        sourcemap: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        disableRouteWarning: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+    };
+    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>;
+
+export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/check.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 GenerateRoute extends Command {
+    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/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: {
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        disableVirtualRoutes: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    };
+    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/generate/route.d.ts

@@ -0,0 +1,30 @@
+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 flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    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, resolvePrettierConfig } from '../../../utils/transpile-ts.js';
 
 const ROUTE_MAP = {
   page: "/pages/$pageHandle",
@@ -46,7 +46,7 @@ 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(
+      throw new AbortError(
         `No template generator found for ${route}. Try one of ${ROUTES.join()}`
       );
     }
@@ -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(
@@ -90,7 +90,12 @@ async function runGenerate(route, {
   templatesRoot = new URL("../../../", import.meta.url).pathname
 }) {
   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",
@@ -119,20 +124,11 @@ async function runGenerate(route, {
   }
   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 (await file.read(jsConfigPath, { encoding: "utf8" })).replace(/^\s*\/\/.*$/gm, "")
+    ) : void 0;
+    templateContent = transpileFile(templateContent, config?.compilerOptions);
   }
   if (adapter) {
     templateContent = templateContent.replace(
@@ -140,7 +136,11 @@ async function runGenerate(route, {
       adapter
     );
   }
-  templateContent = await format(templateContent, destinationPath);
+  templateContent = format(
+    templateContent,
+    await resolvePrettierConfig(destinationPath),
+    destinationPath
+  );
   if (!await file.exists(path.dirname(destinationPath))) {
     await file.mkdir(path.dirname(destinationPath));
   }
@@ -149,26 +149,5 @@ async function runGenerate(route, {
     operation: "generated"
   };
 }
-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/init.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 Init extends Command {
+    static description: string;
+    static flags: {
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        token: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        force: _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;
+}): Promise<void>;
+
+export { Init as default, runInit };

package/dist/commands/hydrogen/init.js

@@ -1,21 +1,37 @@
 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 fs from 'fs-extra';
+import { transpileProject } from '../../utils/transpile-ts.js';
+import { getLatestTemplates } from '../../utils/template-downloader.js';
 
 class Init extends Command {
   static description = "Creates a new Hydrogen storefront project";
   static flags = {
-    typescript: Flags.boolean({
-      description: "Use TypeScript",
-      env: "SHOPIFY_HYDROGEN_FLAG_TYPESCRIPT"
+    language: Flags.string({
+      description: "Language to use for the project",
+      choices: ["js", "ts"],
+      default: "js",
+      env: "SHOPIFY_HYDROGEN_FLAG_LANGUAGE"
+    }),
+    path: Flags.string({
+      description: "The path to create the project in",
+      env: "SHOPIFY_HYDROGEN_FLAG_PATH"
     }),
     template: Flags.string({
       description: "The template to use",
-      env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE",
-      default: "../../templates/demo-store",
-      required: true
+      env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE"
     }),
     token: Flags.string({
-      description: "A GitHub token used to access access private repository templates"
+      description: "A GitHub token used to access access private repository templates",
+      env: "SHOPIFY_HYDROGEN_FLAG_TOKEN"
+    }),
+    force: Flags.boolean({
+      description: "Overwrite the destination directory if it already exists",
+      env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
+      char: "f"
     })
   };
   async run() {
@@ -23,20 +39,157 @@ class Init extends Command {
     await runInit({ ...flags });
   }
 }
-async function runInit({
-  template,
-  typescript,
-  token
-}) {
-  const defaults = [
-    "--template",
-    template,
-    "--install",
-    typescript ? "--typescript" : "--no-typescript",
-    token ? `--token ${token}` : ""
-  ];
-  const { cli } = await import('@remix-run/dev');
-  cli.run(["create", ...defaults]);
+async function runInit(options = getProcessFlags()) {
+  supressNodeExperimentalWarnings();
+  const templatesPromise = getLatestTemplates().catch((error) => {
+    output.info("\n\n\n");
+    renderFatalError(error);
+    process.exit(1);
+  });
+  const { ui } = 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: ["hello-world", "demo-store"].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 fs.remove(projectDir);
+  }
+  let downloaded = false;
+  setTimeout(
+    () => !downloaded && output.info("\n\u{1F4E5} Downloading templates..."),
+    150
+  );
+  const { templatesDir } = await templatesPromise;
+  downloaded = true;
+  await fs.copy(path.join(templatesDir, appTemplate), projectDir);
+  if (language === "js") {
+    try {
+      await transpileProject(projectDir);
+    } catch (error) {
+      await fs.rmdir(projectDir);
+      throw error;
+    }
+  }
+  let depsInstalled = false;
+  let packageManager = await packageManagerUsedForCreating();
+  if (packageManager !== "unknown") {
+    const { installDeps } = await ui.prompt([
+      {
+        type: "select",
+        name: "installDeps",
+        message: `Do you want to install dependencies with ${packageManager} for ${projectName}?`,
+        choices: [
+          { name: "Yes, install the dependencies", value: "true" },
+          { name: "No, I'll do it myself", value: "false" }
+        ],
+        default: "true"
+      }
+    ]);
+    if (installDeps === "true") {
+      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) {
+  return await fs.pathExists(projectDir) && (await fs.stat(projectDir)).isDirectory() && (await fs.readdir(projectDir)).length > 0;
+}
+function getProcessFlags() {
+  const flagMap = { f: "force" };
+  const [, , ...flags] = process.argv;
+  return flags.reduce((acc, flag) => {
+    const [key, value = true] = flag.replace(/^\-+/, "").split("=");
+    const mappedKey = flagMap[key] || key;
+    return { ...acc, [mappedKey]: value };
+  }, {});
+}
+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/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: {
+        paths: _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/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/hooks/init.d.ts

@@ -0,0 +1,5 @@
+import { Hook } from '@oclif/core';
+
+declare const hook: Hook<'init'>;
+
+export { hook as default };

package/dist/utils/check-lockfile.d.ts

@@ -0,0 +1,3 @@
+declare function checkLockfileStatus(directory: string): Promise<void>;
+
+export { checkLockfileStatus };

package/dist/utils/check-version.d.ts

@@ -0,0 +1,3 @@
+declare function checkHydrogenVersion(directory: string): Promise<(() => void) | undefined>;
+
+export { checkHydrogenVersion };

package/dist/utils/config.d.ts

@@ -0,0 +1,14 @@
+import * as _remix_run_dev_dist_config_js from '@remix-run/dev/dist/config.js';
+import { ServerMode } from '@remix-run/dev/dist/config/serverModes.js';
+
+declare function getProjectPaths(appPath?: string, entry?: string): {
+    root: string;
+    entryFile: string;
+    buildPath: string;
+    buildPathClient: string;
+    buildPathWorkerFile: string;
+    publicPath: string;
+};
+declare function getRemixConfig(root: string, entryFile: string, publicPath: string, mode?: ServerMode): Promise<_remix_run_dev_dist_config_js.RemixConfig>;
+
+export { getProjectPaths, getRemixConfig };

package/dist/utils/flags.d.ts

@@ -0,0 +1,8 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+
+declare const commonFlags: {
+    path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+};
+
+export { commonFlags };

package/dist/utils/log.d.ts

@@ -0,0 +1,5 @@
+declare function muteDevLogs({ workerReload }?: {
+    workerReload?: boolean;
+}): void;
+
+export { muteDevLogs };

package/dist/utils/mini-oxygen.d.ts

@@ -0,0 +1,11 @@
+type MiniOxygenOptions = {
+    root: string;
+    port?: number;
+    watch?: boolean;
+    buildPathClient: string;
+    buildPathWorkerFile: string;
+};
+declare function startMiniOxygen({ root, port, watch, buildPathWorkerFile, buildPathClient, }: MiniOxygenOptions): Promise<void>;
+declare function logResponse(request: Request, response: Response): void;
+
+export { logResponse, startMiniOxygen };

package/dist/utils/mini-oxygen.js

@@ -24,7 +24,10 @@ async function startMiniOxygen({
     log: () => {
     },
     buildWatchPaths: watch ? [path.resolve(root, buildPathWorkerFile)] : void 0,
-    onResponse: (request, response) => logResponse(request, response)
+    onResponse: (request, response) => logResponse(
+      request,
+      response
+    )
   });
   const listeningAt = `http://localhost:${actualPort}`;
   output.info(

package/dist/utils/missing-routes.d.ts

@@ -0,0 +1,6 @@
+import { RemixConfig } from '@remix-run/dev/dist/config.js';
+
+declare function findMissingRoutes(config: RemixConfig): string[];
+declare function logMissingRoutes(routes: string[]): void;
+
+export { findMissingRoutes, logMissingRoutes };

package/dist/utils/template-downloader.d.ts

@@ -0,0 +1,11 @@
+declare function getLatestReleaseDownloadUrl(): Promise<{
+    version: string;
+    url: string;
+}>;
+declare function downloadTarball(url: string, storageDir: string): Promise<void>;
+declare function getLatestTemplates(): Promise<{
+    version: string;
+    templatesDir: string;
+}>;
+
+export { downloadTarball, getLatestReleaseDownloadUrl, getLatestTemplates };

package/dist/utils/template-downloader.js

@@ -0,0 +1,63 @@
+import fs from 'fs';
+import path from 'path';
+import { Readable } from 'stream';
+import { pipeline } from 'stream/promises';
+import gunzipMaybe from 'gunzip-maybe';
+import { extract } from 'tar-fs';
+
+const REPO_RELEASES_URL = `https://api.github.com/repos/shopify/h2/releases/latest`;
+async function getLatestReleaseDownloadUrl() {
+  const response = await fetch(REPO_RELEASES_URL);
+  if (!response.ok || response.status >= 400) {
+    throw new Error(
+      `Failed to fetch the latest release information. Status ${response.status} ${response.statusText}}`
+    );
+  }
+  const release = await response.json();
+  return {
+    version: release.name.split("/").pop() ?? release.name,
+    url: release.tarball_url
+  };
+}
+async function downloadTarball(url, storageDir) {
+  const response = await fetch(url);
+  if (!response.ok || response.status >= 400) {
+    throw new Error(
+      `Failed to download the latest release files. Status ${response.status} ${response.statusText}}`
+    );
+  }
+  await pipeline(
+    Readable.fromWeb(response.body),
+    gunzipMaybe(),
+    extract(storageDir, {
+      strip: 1,
+      filter: (name, header) => !name.replace(storageDir, "").startsWith("/templates/")
+    })
+  );
+}
+async function getLatestTemplates() {
+  try {
+    const { version, url } = await getLatestReleaseDownloadUrl();
+    const templateStoragePath = new URL("../starter-templates", import.meta.url).pathname;
+    if (!fs.existsSync(templateStoragePath)) {
+      fs.mkdirSync(templateStoragePath);
+    }
+    const templateStorageVersionPath = path.join(templateStoragePath, version);
+    if (!fs.existsSync(templateStorageVersionPath)) {
+      await downloadTarball(url, templateStorageVersionPath);
+    }
+    return {
+      version,
+      templatesDir: path.join(templateStorageVersionPath, "templates")
+    };
+  } catch (e) {
+    const error = e;
+    error.message = `Could not download Hydrogen templates from GitHub.
+Please check your internet connection and the following error:
+
+` + error.message;
+    throw error;
+  }
+}
+
+export { downloadTarball, getLatestReleaseDownloadUrl, getLatestTemplates };