@shopify/cli-hydrogen 8.1.0 → 8.2.0

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -1,32 +1,17 @@
 import {Suspense} from 'react';
 import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
+import type {ProductFragment} from 'storefrontapi.generated';
 import {
-  Await,
-  Link,
-  useLoaderData,
-  type MetaFunction,
-  type FetcherWithComponents,
-} from '@remix-run/react';
-import type {
-  ProductFragment,
-  ProductVariantsQuery,
-  ProductVariantFragment,
-} from 'storefrontapi.generated';
-import {
-  Image,
-  Money,
-  VariantSelector,
-  type VariantOption,
   getSelectedProductOptions,
-  CartForm,
-  type OptimisticCartLine,
   Analytics,
-  type CartViewPayload,
-  useAnalytics,
+  useOptimisticVariant,
 } from '@shopify/hydrogen';
 import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/lib/variants';
-import {useAside} from '~/components/Aside';
+import {ProductPrice} from '~/components/ProductPrice';
+import {ProductImage} from '~/components/ProductImage';
+import {ProductForm} from '~/components/ProductForm';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
@@ -143,15 +128,54 @@ function redirectToFirstVariant({
 
 export default function Product() {
   const {product, variants} = useLoaderData<typeof loader>();
-  const {selectedVariant} = product;
+  const selectedVariant = useOptimisticVariant(
+    product.selectedVariant,
+    variants,
+  );
+
+  const {title, descriptionHtml} = product;
+
   return (
     <div className="product">
       <ProductImage image={selectedVariant?.image} />
-      <ProductMain
-        selectedVariant={selectedVariant}
-        product={product}
-        variants={variants}
-      />
+      <div className="product-main">
+        <h1>{title}</h1>
+        <ProductPrice
+          price={selectedVariant?.price}
+          compareAtPrice={selectedVariant?.compareAtPrice}
+        />
+        <br />
+        <Suspense
+          fallback={
+            <ProductForm
+              product={product}
+              selectedVariant={selectedVariant}
+              variants={[]}
+            />
+          }
+        >
+          <Await
+            errorElement="There was a problem loading product variants"
+            resolve={variants}
+          >
+            {(data) => (
+              <ProductForm
+                product={product}
+                selectedVariant={selectedVariant}
+                variants={data?.product?.variants.nodes || []}
+              />
+            )}
+          </Await>
+        </Suspense>
+        <br />
+        <br />
+        <p>
+          <strong>Description</strong>
+        </p>
+        <br />
+        <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
+        <br />
+      </div>
       <Analytics.ProductView
         data={{
           products: [
@@ -171,211 +195,6 @@ export default function Product() {
   );
 }
 
-function ProductImage({image}: {image: ProductVariantFragment['image']}) {
-  if (!image) {
-    return <div className="product-image" />;
-  }
-  return (
-    <div className="product-image">
-      <Image
-        alt={image.altText || 'Product Image'}
-        aspectRatio="1/1"
-        data={image}
-        key={image.id}
-        sizes="(min-width: 45em) 50vw, 100vw"
-      />
-    </div>
-  );
-}
-
-function ProductMain({
-  selectedVariant,
-  product,
-  variants,
-}: {
-  product: ProductFragment;
-  selectedVariant: ProductFragment['selectedVariant'];
-  variants: Promise<ProductVariantsQuery | null>;
-}) {
-  const {title, descriptionHtml} = product;
-  return (
-    <div className="product-main">
-      <h1>{title}</h1>
-      <ProductPrice selectedVariant={selectedVariant} />
-      <br />
-      <Suspense
-        fallback={
-          <ProductForm
-            product={product}
-            selectedVariant={selectedVariant}
-            variants={[]}
-          />
-        }
-      >
-        <Await
-          errorElement="There was a problem loading product variants"
-          resolve={variants}
-        >
-          {(data) => (
-            <ProductForm
-              product={product}
-              selectedVariant={selectedVariant}
-              variants={data?.product?.variants.nodes || []}
-            />
-          )}
-        </Await>
-      </Suspense>
-      <br />
-      <br />
-      <p>
-        <strong>Description</strong>
-      </p>
-      <br />
-      <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
-      <br />
-    </div>
-  );
-}
-
-function ProductPrice({
-  selectedVariant,
-}: {
-  selectedVariant: ProductFragment['selectedVariant'];
-}) {
-  return (
-    <div className="product-price">
-      {selectedVariant?.compareAtPrice ? (
-        <>
-          <p>Sale</p>
-          <br />
-          <div className="product-price-on-sale">
-            {selectedVariant ? <Money data={selectedVariant.price} /> : null}
-            <s>
-              <Money data={selectedVariant.compareAtPrice} />
-            </s>
-          </div>
-        </>
-      ) : (
-        selectedVariant?.price && <Money data={selectedVariant?.price} />
-      )}
-    </div>
-  );
-}
-
-function ProductForm({
-  product,
-  selectedVariant,
-  variants,
-}: {
-  product: ProductFragment;
-  selectedVariant: ProductFragment['selectedVariant'];
-  variants: Array<ProductVariantFragment>;
-}) {
-  const {open} = useAside();
-  const {publish, shop, cart, prevCart} = useAnalytics();
-  return (
-    <div className="product-form">
-      <VariantSelector
-        handle={product.handle}
-        options={product.options}
-        variants={variants}
-      >
-        {({option}) => <ProductOptions key={option.name} option={option} />}
-      </VariantSelector>
-      <br />
-      <AddToCartButton
-        disabled={!selectedVariant || !selectedVariant.availableForSale}
-        onClick={() => {
-          open('cart');
-          publish('cart_viewed', {
-            cart,
-            prevCart,
-            shop,
-            url: window.location.href || '',
-          } as CartViewPayload);
-        }}
-        lines={
-          selectedVariant
-            ? [
-                {
-                  merchandiseId: selectedVariant.id,
-                  quantity: 1,
-                  selectedVariant,
-                },
-              ]
-            : []
-        }
-      >
-        {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
-      </AddToCartButton>
-    </div>
-  );
-}
-
-function ProductOptions({option}: {option: VariantOption}) {
-  return (
-    <div className="product-options" key={option.name}>
-      <h5>{option.name}</h5>
-      <div className="product-options-grid">
-        {option.values.map(({value, isAvailable, isActive, to}) => {
-          return (
-            <Link
-              className="product-options-item"
-              key={option.name + value}
-              prefetch="intent"
-              preventScrollReset
-              replace
-              to={to}
-              style={{
-                border: isActive ? '1px solid black' : '1px solid transparent',
-                opacity: isAvailable ? 1 : 0.3,
-              }}
-            >
-              {value}
-            </Link>
-          );
-        })}
-      </div>
-      <br />
-    </div>
-  );
-}
-
-function AddToCartButton({
-  analytics,
-  children,
-  disabled,
-  lines,
-  onClick,
-}: {
-  analytics?: unknown;
-  children: React.ReactNode;
-  disabled?: boolean;
-  lines: Array<OptimisticCartLine>;
-  onClick?: () => void;
-}) {
-  return (
-    <CartForm route="/cart" inputs={{lines}} action={CartForm.ACTIONS.LinesAdd}>
-      {(fetcher: FetcherWithComponents<any>) => (
-        <>
-          <input
-            name="analytics"
-            type="hidden"
-            value={JSON.stringify(analytics)}
-          />
-          <button
-            type="submit"
-            onClick={onClick}
-            disabled={disabled ?? fetcher.state !== 'idle'}
-          >
-            {children}
-          </button>
-        </>
-      )}
-    </CartForm>
-  );
-}
-
 const PRODUCT_VARIANT_FRAGMENT = `#graphql
   fragment ProductVariant on ProductVariant {
     availableForSale

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2024.4.5",
+  "version": "2024.7.1",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,12 +14,10 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.9.2",
-    "@remix-run/server-runtime": "^2.9.2",
-    "@shopify/cli": "3.60.0",
-    "@shopify/cli-hydrogen": "^8.1.0",
-    "@shopify/hydrogen": "2024.4.3",
-    "@shopify/remix-oxygen": "^2.0.4",
+    "@remix-run/react": "^2.10.1",
+    "@remix-run/server-runtime": "^2.10.1",
+    "@shopify/hydrogen": "2024.7.1",
+    "@shopify/remix-oxygen": "^2.0.5",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
@@ -28,11 +26,12 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
-    "@remix-run/dev": "^2.9.2",
-    "@remix-run/eslint-config": "^2.9.2",
+    "@remix-run/dev": "^2.10.1",
+    "@remix-run/eslint-config": "^2.10.1",
+    "@shopify/cli": "^3.63.2",
     "@shopify/hydrogen-codegen": "^0.3.1",
-    "@shopify/mini-oxygen": "^3.0.3",
-    "@shopify/oxygen-workers-types": "^4.0.0",
+    "@shopify/mini-oxygen": "^3.0.4",
+    "@shopify/oxygen-workers-types": "^4.1.2",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",

package/dist/assets/hydrogen/starter/server.ts

@@ -96,6 +96,10 @@ export default {
 
       const response = await handleRequest(request);
 
+      if (session.isPending) {
+        response.headers.set('Set-Cookie', await session.commit());
+      }
+
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.

package/dist/assets/hydrogen/tailwind/package.json

@@ -3,11 +3,6 @@
     "defaults"
   ],
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "postcss": "^8.4.21",
-    "postcss-import": "^15.1.0",
-    "postcss-preset-env": "^8.2.0",
-    "tailwindcss": "^3.3.0"
+    "@tailwindcss/vite": "4.0.0-alpha.17"
   }
 }

package/dist/assets/hydrogen/tailwind/tailwind.css

@@ -1,3 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/**
+ * Configure Tailwind v4 in this file using CSS variables and directives:
+ * https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration 
+ */
+
+@import 'tailwindcss';

package/dist/assets/hydrogen/vanilla-extract/package.json

@@ -1,9 +1,8 @@
 {
-  "comment": "Remix version is automatically updated by the CLI",
   "dependencies": {
-    "@remix-run/css-bundle": "^1"
+    "@vanilla-extract/css": "^1.15.2"
   },
   "devDependencies": {
-    "@vanilla-extract/css": "^1.11.0"
+    "@vanilla-extract/vite-plugin": "^4.0.10"
   }
 }

package/dist/assets/hydrogen/virtual-routes/components/{Layout.jsx → PageLayout.jsx}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-function Layout(props) {
+function PageLayout(props) {
   return /* @__PURE__ */ jsx("div", { className: "hydrogen-virtual-route", children: props.children });
 }
 export {
-  Layout
+  PageLayout
 };

package/dist/assets/hydrogen/virtual-routes/components/RequestDetails.jsx

@@ -34,8 +34,7 @@ function RequestDetails({
         className: `tab${activeTabClass(key)}`,
         onClick: () => setActiveTab(key),
         onKeyUp: (event) => {
-          if (event.code === "Space")
-            setActiveTab(key);
+          if (event.code === "Space") setActiveTab(key);
         },
         children: TABS[key]
       }

package/dist/assets/hydrogen/virtual-routes/components/RequestTable.jsx

@@ -61,8 +61,7 @@ function RequestTable({
         className: `grid-row${activeEventId === row.id ? " active" : ""}${row.status >= 400 ? " error" : ""}`,
         onClick: () => setActiveEventId(row.id),
         onKeyUp: (event) => {
-          if (event.code === "Space")
-            setActiveEventId(row.id);
+          if (event.code === "Space") setActiveEventId(row.id);
         },
         children: [
           /* @__PURE__ */ jsx("div", { className: "grid-cell", children: row.url }),

package/dist/assets/hydrogen/virtual-routes/routes/index.jsx

@@ -47,8 +47,7 @@ function Index() {
   } = useLoaderData();
   let { name: shopName, id: shopId } = shop;
   const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
-  if (isMockShop || !shopName)
-    shopName = "Hydrogen";
+  if (isMockShop || !shopName) shopName = "Hydrogen";
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName, children: [
     configDone ? /* @__PURE__ */ jsx(HydrogenLogoBaseColor, {}) : /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
     /* @__PURE__ */ jsxs("h1", { children: [

package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx

@@ -2,14 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Links,
   Meta,
-  Outlet,
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError
 } from "@remix-run/react";
 import favicon from "./assets/favicon.svg";
-import { Layout } from "./components/Layout.jsx";
+import { PageLayout } from "./components/PageLayout.jsx";
 import { useNonce } from "@shopify/hydrogen";
 import styles from "./assets/styles.css?url";
 const links = () => {
@@ -18,7 +17,7 @@ const links = () => {
     { rel: "icon", type: "image/svg+xml", href: favicon }
   ];
 };
-function App() {
+function Layout({ children }) {
   const nonce = useNonce();
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
     /* @__PURE__ */ jsxs("head", { children: [
@@ -36,14 +35,13 @@ function App() {
       /* @__PURE__ */ jsx(Links, {})
     ] }),
     /* @__PURE__ */ jsxs("body", { children: [
-      /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
+      /* @__PURE__ */ jsx(PageLayout, { children }),
       /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
       /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }
 function ErrorBoundary() {
-  const nonce = useNonce();
   const error = useRouteError();
   let errorMessage = "Unknown error";
   let errorStatus = 500;
@@ -53,34 +51,14 @@ function ErrorBoundary() {
   } else if (error instanceof Error) {
     errorMessage = error.message;
   }
-  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs("head", { children: [
-      /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx("title", { children: "Hydrogen" }),
-      /* @__PURE__ */ jsx(
-        "meta",
-        {
-          name: "description",
-          content: "A custom storefront powered by Hydrogen"
-        }
-      ),
-      /* @__PURE__ */ jsx(Meta, {}),
-      /* @__PURE__ */ jsx(Links, {})
-    ] }),
-    /* @__PURE__ */ jsxs("body", { children: [
-      /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
-        /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
-        /* @__PURE__ */ jsx("h2", { children: errorStatus }),
-        errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
-      /* @__PURE__ */ jsx(Scripts, { nonce })
-    ] })
+  return /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
+    /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
+    /* @__PURE__ */ jsx("h2", { children: errorStatus }),
+    errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
   ] });
 }
 export {
   ErrorBoundary,
-  App as default,
+  Layout,
   links
 };

package/dist/commands/hydrogen/build.js

@@ -1,7 +1,7 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
-import { collectLog, outputWarn } from '@shopify/cli-kit/node/output';
+import { collectLog, outputInfo, outputContent, outputToken, 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 { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
@@ -10,6 +10,8 @@ import { hasViteConfig, getViteConfig } from '../../lib/vite-config.js';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
+import { hydrogenBundleAnalyzer } from '../../lib/bundle/vite-plugin.js';
+import { BUNDLE_ANALYZER_HTML_FILE, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { spawnCodegenProcess, codegen } from '../../lib/codegen.js';
 import { isCI } from '../../lib/is-ci.js';
 import { importVite } from '../../lib/import-utils.js';
@@ -33,8 +35,7 @@ class Build extends Command {
     }),
     // 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,
+      description: "Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
       allowNo: true
     })
   };
@@ -78,6 +79,7 @@ async function runBuild({
   disableRouteWarning = false,
   lockfileCheck = true,
   assetPath = "/",
+  bundleStats = !isCI(),
   watch = false,
   onServerBuildStart,
   onServerBuildFinish
@@ -129,8 +131,7 @@ async function runBuild({
           clientBuildStatus = deferPromise();
         },
         buildEnd(error) {
-          if (error)
-            clientBuildStatus.reject(error);
+          if (error) clientBuildStatus.reject(error);
         },
         writeBundle() {
           clientBuildStatus.resolve();
@@ -172,7 +173,22 @@ async function runBuild({
         closeWatcher() {
           this.error(new Error("Process exited before server build finished."));
         }
-      }
+      },
+      ...bundleStats ? [
+        hydrogenBundleAnalyzer({
+          minify: serverMinify ? (code, filepath) => vite.transformWithEsbuild(code, filepath, {
+            minify: true,
+            minifyWhitespace: true,
+            minifySyntax: true,
+            minifyIdentifiers: true,
+            sourcemap: false,
+            treeShaking: false,
+            // Tree-shaking would drop most exports in routes
+            legalComments: "none",
+            target: "esnext"
+          }).then((result) => result.code) : void 0
+        })
+      ] : []
     ]
   });
   if (!watch) {
@@ -189,6 +205,15 @@ async function runBuild({
   };
   const codegenProcess = useCodegen ? watch ? spawnCodegenProcess(codegenOptions) : await codegen(codegenOptions).then(() => void 0) : void 0;
   if (!watch && process.env.NODE_ENV !== "development") {
+    if (bundleStats) {
+      const bundleAnalysisPath = "file://" + joinPath(serverOutDir, BUNDLE_ANALYZER_HTML_FILE);
+      outputInfo(
+        outputContent`${await getBundleAnalysisSummary(serverOutDir) || "\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(
@@ -216,10 +241,8 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
       codegenProcess?.removeAllListeners("close");
       codegenProcess?.kill("SIGINT");
       const promises = [];
-      if ("close" in clientBuild)
-        promises.push(clientBuild.close());
-      if ("close" in serverBuild)
-        promises.push(serverBuild.close());
+      if ("close" in clientBuild) promises.push(clientBuild.close());
+      if ("close" in serverBuild) promises.push(serverBuild.close());
       await Promise.allSettled(promises);
       if (clientBuildStatus?.state === "pending" || serverBuildStatus?.state === "pending") {
         clientBuildStatus?.promise.catch(() => {

package/dist/commands/hydrogen/customer-account/push.js

@@ -134,8 +134,7 @@ async function runCustomerAccountPush({
   }
 }
 async function cleanupCustomerApplicationUrls(session, storefrontId, customerAccountConfig = {}) {
-  if (!Object.values(customerAccountConfig).some(Boolean))
-    return;
+  if (!Object.values(customerAccountConfig).some(Boolean)) return;
   outputDebug(
     `Cleaning up Customer Application url "${customerAccountConfig.redirectUri}"`
   );
@@ -151,11 +150,9 @@ ${error?.message}`
   });
 }
 async function getStorefrontId(root, storefrontIdFromFlag) {
-  if (storefrontIdFromFlag)
-    return storefrontIdFromFlag;
+  if (storefrontIdFromFlag) return storefrontIdFromFlag;
   const { session, config } = await login(root);
-  if (config.storefront?.id)
-    return config.storefront.id;
+  if (config.storefront?.id) return config.storefront.id;
   const cliCommand = await getCliCommand();
   const linkedStore = await linkStorefront(root, session, config, {
     cliCommand

package/dist/commands/hydrogen/debug/cpu.js

@@ -34,7 +34,7 @@ class DebugCpu extends Command {
   async run() {
     const { flags } = await this.parse(DebugCpu);
     const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd();
-    const diff = flags.build && flags.diff ? await prepareDiffDirectory(originalDirectory, true) : void 0;
+    const diff = flags.diff ? await prepareDiffDirectory(originalDirectory, true) : void 0;
     const { close } = await runDebugCpu({
       ...flagsToCamelObject(flags),
       directory: diff?.targetDirectory ?? originalDirectory,
@@ -47,8 +47,7 @@ class DebugCpu extends Command {
   }
 }
 async function runDebugCpu({ directory, entry, output }) {
-  if (!process.env.NODE_ENV)
-    process.env.NODE_ENV = "production";
+  if (!process.env.NODE_ENV) process.env.NODE_ENV = "production";
   muteDevLogs({ workerReload: false });
   let { buildPath, buildPathWorkerFile } = getProjectPaths(directory);
   const isClassicProject = await hasRemixConfigFile(directory);
@@ -99,6 +98,7 @@ Waiting for changes...`);
     sourcemap: true,
     disableRouteWarning: true,
     lockfileCheck: false,
+    bundleStats: false,
     ...hooks,
     onServerBuildStart() {
       if (times === 0) {