@shopify/cli-hydrogen 8.0.3 → 8.0.4

package/dist/commands/hydrogen/build.js

@@ -1,38 +1,35 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, glob, readFile, writeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
+import { collectLog, outputWarn } from '@shopify/cli-kit/node/output';
+import { removeFile, fileSize } from '@shopify/cli-kit/node/fs';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
-import colors from '@shopify/cli-kit/node/colors';
-import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
+import { prepareDiffDirectory, copyDiffBuild } from '../../lib/template-diff.js';
+import { hasViteConfig, getViteConfig } from '../../lib/vite-config.js';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
-import { muteRemixLogs, createRemixLogger } from '../../lib/log.js';
+import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
 import { codegen } from '../../lib/codegen.js';
-import { buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { isCI } from '../../lib/is-ci.js';
-import { prepareDiffDirectory, copyDiffBuild } from '../../lib/template-diff.js';
-import { hasViteConfig } from '../../lib/vite-config.js';
 
-const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
-const WORKER_BUILD_SIZE_LIMIT = 5;
 class Build extends Command {
   static descriptionWithMarkdown = `Builds a Hydrogen storefront for production. The client and app worker files are compiled to a \`/dist\` folder in your Hydrogen project directory.`;
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
     ...commonFlags.path,
+    ...commonFlags.entry,
     ...commonFlags.sourcemap,
-    "bundle-stats": Flags.boolean({
-      description: "Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
-      default: true,
-      allowNo: true
-    }),
     ...commonFlags.lockfileCheck,
     ...commonFlags.disableRouteWarning,
     ...commonFlags.codegen,
-    ...commonFlags.diff
+    ...commonFlags.diff,
+    // For the classic compiler:
+    "bundle-stats": Flags.boolean({
+      description: "[Classic Remix Compiler] Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
+      default: true,
+      allowNo: true
+    })
   };
   async run() {
     const { flags } = await this.parse(Build);
@@ -46,11 +43,10 @@ class Build extends Command {
       useCodegen: flags.codegen,
       directory
     };
-    if (await hasViteConfig(directory ?? process.cwd())) {
-      const { runViteBuild } = await import('./build-vite.js');
-      await runViteBuild(buildParams);
-    } else {
+    if (await hasViteConfig(directory)) {
       await runBuild(buildParams);
+    } else {
+      await runClassicCompilerBuild(buildParams);
     }
     if (flags.diff) {
       await copyDiffBuild(directory, originalDirectory);
@@ -58,81 +54,83 @@ class Build extends Command {
     process.exit(0);
   }
 }
+const WORKER_BUILD_SIZE_LIMIT = 5;
 async function runBuild({
+  entry: ssrEntry,
   directory,
   useCodegen = false,
   codegenConfigPath,
   sourcemap = false,
   disableRouteWarning = false,
-  bundleStats = true,
   lockfileCheck = true,
-  assetPath
+  assetPath = "/"
 }) {
   if (!process.env.NODE_ENV) {
     process.env.NODE_ENV = "production";
   }
-  if (assetPath) {
-    process.env.HYDROGEN_ASSET_BASE_URL = assetPath;
-  }
-  const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(directory);
+  const root = directory ?? process.cwd();
   if (lockfileCheck) {
     await checkLockfileStatus(root, isCI());
   }
-  await muteRemixLogs();
-  console.time(LOG_WORKER_BUILT);
-  outputInfo(`
-\u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
-  const [remixConfig, [{ build }, { logThrown }, { createFileWatchCache }]] = await Promise.all([
-    getRemixConfig(root),
-    Promise.all([
-      import('@remix-run/dev/dist/compiler/build.js'),
-      import('@remix-run/dev/dist/compiler/utils/log.js'),
-      import('@remix-run/dev/dist/compiler/fileWatchCache.js')
-    ]).catch(handleRemixImportFail),
-    rmdir(buildPath, { force: true })
+  const [
+    vite,
+    { userViteConfig, remixConfig, clientOutDir, serverOutDir, serverOutFile }
+  ] = await Promise.all([
+    // Avoid static imports because this file is imported by `deploy` command,
+    // which must have a hard dependency on 'vite'.
+    import('vite'),
+    getViteConfig(root, ssrEntry)
   ]);
-  assertOxygenChecks(remixConfig);
+  const customLogger = vite.createLogger();
+  if (process.env.SHOPIFY_UNIT_TEST) {
+    customLogger.info = (msg) => collectLog("info", msg);
+    customLogger.warn = (msg) => collectLog("warn", msg);
+    customLogger.error = (msg) => collectLog("error", msg);
+  }
+  const serverMinify = userViteConfig.build?.minify ?? true;
+  const commonConfig = {
+    root,
+    mode: process.env.NODE_ENV,
+    base: assetPath,
+    customLogger
+  };
+  await vite.build({
+    ...commonConfig,
+    build: {
+      emptyOutDir: true,
+      copyPublicDir: true,
+      // Disable client sourcemaps in production
+      sourcemap: process.env.NODE_ENV !== "production" && sourcemap
+    }
+  });
+  console.log("");
+  await vite.build({
+    ...commonConfig,
+    build: {
+      sourcemap,
+      ssr: ssrEntry ?? true,
+      emptyOutDir: false,
+      copyPublicDir: false,
+      minify: serverMinify
+    }
+  });
   await Promise.all([
-    copyPublicFiles(publicPath, buildPathClient),
-    build({
-      config: remixConfig,
-      options: {
-        mode: process.env.NODE_ENV,
-        sourcemap
-      },
-      logger: createRemixLogger(),
-      fileWatchCache: createFileWatchCache()
-    }).catch((thrown) => {
-      logThrown(thrown);
-      if (process.env.SHOPIFY_UNIT_TEST) {
-        throw thrown;
-      } else {
-        process.exit(1);
-      }
-    }),
-    useCodegen && codegen({ ...remixConfig, configFilePath: codegenConfigPath })
+    removeFile(joinPath(clientOutDir, ".vite")),
+    removeFile(joinPath(serverOutDir, ".vite")),
+    removeFile(joinPath(serverOutDir, "assets"))
   ]);
+  if (useCodegen) {
+    await codegen({
+      rootDirectory: root,
+      appDirectory: remixConfig.appDirectory,
+      configFilePath: codegenConfigPath
+    });
+  }
   if (process.env.NODE_ENV !== "development") {
-    console.timeEnd(LOG_WORKER_BUILT);
-    const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
-    const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
-    const formattedSize = colors.yellow(sizeMB.toFixed(2) + " MB");
-    outputInfo(
-      outputContent`   ${colors.dim(
-        relativePath(root, buildPathWorkerFile)
-      )}  ${bundleAnalysisPath ? outputToken.link(formattedSize, bundleAnalysisPath) : formattedSize}\n`
-    );
-    if (bundleStats && bundleAnalysisPath) {
-      outputInfo(
-        outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
-          "Complete analysis: " + bundleAnalysisPath,
-          bundleAnalysisPath
-        )}\n\n`
-      );
-    }
+    const sizeMB = await fileSize(serverOutFile) / (1024 * 1024);
     if (sizeMB >= WORKER_BUILD_SIZE_LIMIT) {
       outputWarn(
-        `\u{1F6A8} Smaller worker bundles are faster to deploy and run.${remixConfig.serverMinify ? "" : "\n   Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+        `\u{1F6A8} Smaller worker bundles are faster to deploy and run.${serverMinify ? "" : "\n   Minify your bundle by adding `build.minify: true` to vite.config.js."}
    Learn more about optimizing your worker bundle file: https://h2o.fyi/debugging/bundle-size
 `
       );
@@ -151,27 +149,6 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
       );
     }
   }
-  if (process.env.NODE_ENV !== "development") {
-    await cleanClientSourcemaps(buildPathClient);
-  }
-}
-async function cleanClientSourcemaps(buildPathClient) {
-  const bundleFiles = await glob(joinPath(buildPathClient, "**/*.js"));
-  await Promise.all(
-    bundleFiles.map(async (filePath) => {
-      const file = await readFile(filePath);
-      return await writeFile(
-        filePath,
-        file.replace(/\/\/# sourceMappingURL=.+\.js\.map$/gm, "")
-      );
-    })
-  );
-}
-async function copyPublicFiles(publicPath, buildPathClient) {
-  if (!await fileExists(publicPath)) {
-    return;
-  }
-  return copyFile(publicPath, buildPathClient);
 }
 
-export { copyPublicFiles, Build as default, runBuild };
+export { Build as default, runBuild };

package/dist/commands/hydrogen/deploy.js

@@ -14,8 +14,8 @@ import { findEnvironmentOrThrow, findEnvironmentByBranchOrThrow, orderEnvironmen
 import { execAsync } from '../../lib/process.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
+import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
 import { runBuild } from './build.js';
-import { runViteBuild } from './build-vite.js';
 import { getViteConfig } from '../../lib/vite-config.js';
 import { prepareDiffDirectory } from '../../lib/template-diff.js';
 import { hasRemixConfigFile } from '../../lib/remix-config.js';
@@ -425,7 +425,7 @@ Continue?`.value
       outputInfo(
         outputContent`${colors.whiteBright("Building project...")}`.value
       );
-      const build = isClassicCompiler ? runBuild : runViteBuild;
+      const build = isClassicCompiler ? runClassicCompilerBuild : runBuild;
       await build({
         directory: root,
         assetPath,