@shopify/cli-hydrogen 5.1.2 → 5.2.1

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 { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, glob, removeFile, copyFile } from '@shopify/cli-kit/node/fs';
+import { rmdir, fileSize, glob, removeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
@@ -130,6 +130,9 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
   }
 }
 async function copyPublicFiles(publicPath, buildPathClient) {
+  if (!await fileExists(publicPath)) {
+    return;
+  }
   return copyFile(publicPath, buildPathClient);
 }
 

package/dist/commands/hydrogen/dev.js

@@ -6,8 +6,8 @@ import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, assertOxygenChecks, getRemixConfig } from '../../lib/remix-config.js';
-import { muteDevLogs, muteRemixLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
+import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
+import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
@@ -16,6 +16,7 @@ import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
+import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
 
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
@@ -56,7 +57,7 @@ class Dev extends Command {
   }
 }
 async function runDev({
-  port,
+  port: portFlag = DEFAULT_PORT,
   path: appPath,
   useCodegen = false,
   codegenConfigPath,
@@ -68,7 +69,6 @@ async function runDev({
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "development";
   muteDevLogs();
-  await muteRemixLogs();
   if (debug)
     (await import('node:inspector')).open();
   const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
@@ -102,14 +102,15 @@ async function runDev({
   let isInitialBuild = true;
   let initialBuildDurationMs = 0;
   let initialBuildStartTimeMs = Date.now();
+  const liveReload = remixConfig.future.v2_dev ? await setupLiveReload(remixConfig.devServerPort) : void 0;
   let miniOxygen;
   async function safeStartMiniOxygen() {
     if (miniOxygen)
       return;
     miniOxygen = await startMiniOxygen({
       root,
-      port,
-      watch: true,
+      port: portFlag,
+      watch: !liveReload,
       buildPathWorkerFile,
       buildPathClient,
       env: await envPromise
@@ -145,13 +146,15 @@ View GraphiQL API browser: ${graphiqlUrl}`)]
     },
     {
       reloadConfig,
-      onBuildStart() {
+      onBuildStart(ctx) {
         if (!isInitialBuild && !skipRebuildLogs) {
           outputInfo(LOG_REBUILDING);
           console.time(LOG_REBUILT);
         }
+        liveReload?.onBuildStart(ctx);
       },
-      async onBuildFinish() {
+      onBuildManifest: liveReload?.onBuildManifest,
+      async onBuildFinish(context, duration, succeeded) {
         if (isInitialBuild) {
           await copyingFiles;
           initialBuildDurationMs = Date.now() - initialBuildStartTimeMs;
@@ -162,16 +165,21 @@ View GraphiQL API browser: ${graphiqlUrl}`)]
           if (!miniOxygen)
             console.log("");
         }
-        if (!miniOxygen) {
-          if (!await serverBundleExists()) {
-            return renderFatalError({
-              name: "BuildError",
-              type: 0,
-              message: "MiniOxygen cannot start because the server bundle has not been generated.",
-              tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
-            });
+        if (!miniOxygen && !await serverBundleExists()) {
+          return renderFatalError({
+            name: "BuildError",
+            type: 0,
+            message: "MiniOxygen cannot start because the server bundle has not been generated.",
+            tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
+          });
+        }
+        if (succeeded) {
+          if (!miniOxygen) {
+            await safeStartMiniOxygen();
+          } else if (liveReload) {
+            await miniOxygen.reload({ worker: true });
           }
-          await safeStartMiniOxygen();
+          liveReload?.onAppReady(context);
         }
       },
       async onFileCreated(file) {

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

@@ -16,7 +16,6 @@ describe("runGenerate", () => {
   it("calls route generation and renders the result", async () => {
     vi.mocked(generateRoutes).mockResolvedValue({
       isTypescript: true,
-      transpilerOptions: {},
       formatOptions: {},
       v2Flags: {},
       routeGroups: {},

package/dist/commands/hydrogen/init.js

@@ -6,7 +6,7 @@ import { AbortError } from '@shopify/cli-kit/node/error';
 import { AbortController } from '@shopify/cli-kit/node/abort';
 import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
-import { SETUP_CSS_STRATEGIES } from './../../lib/setups/css/index.js';
+import { STYLING_CHOICES } from './../../lib/setups/css/index.js';
 import { I18N_CHOICES } from '../../lib/setups/i18n/index.js';
 import { supressNodeExperimentalWarnings } from '../../lib/process.js';
 import { setupRemoteTemplate, setupLocalStarterTemplate } from '../../lib/onboarding/index.js';
@@ -58,9 +58,9 @@ class Init extends Command {
         `Invalid URL structure strategy: ${flags.markets}. Must be one of ${I18N_CHOICES.join(", ")}`
       );
     }
-    if (flags.styling && !SETUP_CSS_STRATEGIES.includes(flags.styling)) {
+    if (flags.styling && !STYLING_CHOICES.includes(flags.styling)) {
       throw new AbortError(
-        `Invalid styling strategy: ${flags.styling}. Must be one of ${SETUP_CSS_STRATEGIES.join(", ")}`
+        `Invalid styling strategy: ${flags.styling}. Must be one of ${STYLING_CHOICES.join(", ")}`
       );
     }
     await runInit(flagsToCamelObject(flags));
@@ -70,6 +70,9 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   supressNodeExperimentalWarnings();
   options.git ??= true;
   const showUpgrade = await checkHydrogenVersion(
+    // Resolving the CLI package from a local directory might fail because
+    // this code could be run from a global dependency (e.g. on `npm create`).
+    // Therefore, pass the known path to the package.json directly from here:
     fileURLToPath(new URL("../../../package.json", import.meta.url)),
     "cli"
   );

package/dist/commands/hydrogen/init.test.js

@@ -145,6 +145,7 @@ describe("init", () => {
         expect(output).toMatch("Help");
         expect(output).toMatch("Next steps");
         expect(output).toMatch(
+          // Output contains banner characters. USe [^\w]*? to match them.
           /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });
@@ -220,6 +221,7 @@ describe("init", () => {
         expect(output).toMatch("Help");
         expect(output).toMatch("Next steps");
         expect(output).toMatch(
+          // Output contains banner characters. USe [^\w]*? to match them.
           /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });

package/dist/commands/hydrogen/preview.js

@@ -1,7 +1,7 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags } from '../../lib/flags.js';
+import { commonFlags, DEFAULT_PORT } from '../../lib/flags.js';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
 
 class Preview extends Command {
@@ -16,7 +16,7 @@ class Preview extends Command {
   }
 }
 async function runPreview({
-  port,
+  port = DEFAULT_PORT,
   path: appPath
 }) {
   if (!process.env.NODE_ENV)

package/dist/commands/hydrogen/setup.js

@@ -57,6 +57,8 @@ async function runSetup(options) {
     const typescript = !!remixConfig.tsconfigPath;
     backgroundWorkPromise = backgroundWorkPromise.then(
       () => Promise.all([
+        // When starting from hello-world, the server entry point won't
+        // include all the cart logic from skeleton, so we need to copy it.
         generateProjectFile("../server.ts", { ...remixConfig, typescript }),
         ...typescript ? [
           copyFile(
@@ -71,6 +73,7 @@ async function runSetup(options) {
             )
           )
         ] : [],
+        // Copy app entries
         generateProjectEntries({
           rootDirectory: remixConfig.rootDirectory,
           appDirectory: remixConfig.appDirectory,

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -93,7 +93,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'white',
   };
 }

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -172,7 +172,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'black',
   };
 }

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -1,13 +1,13 @@
 import {
-  useParams,
-  useFetcher,
   Link,
   Form,
+  useParams,
+  useFetcher,
+  useFetchers,
   type FormProps,
 } from '@remix-run/react';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
-import {useFetchers} from '@remix-run/react';
 
 import type {
   PredictiveProductFragment,

package/dist/generator-templates/starter/app/entry.server.tsx

@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,14 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +32,8 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,

package/dist/generator-templates/starter/app/root.tsx

@@ -1,3 +1,4 @@
+import {useNonce} from '@shopify/hydrogen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
 import {
   Links,
@@ -5,19 +6,40 @@ import {
   Outlet,
   Scripts,
   useCatch,
+  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import type {CustomerAccessToken} from '@shopify/hydrogen-react/storefront-api-types';
+import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from '../server';
 import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export function links() {
   return [
     {rel: 'stylesheet', href: resetStyles},
@@ -77,6 +99,7 @@ export async function loader({context}: LoaderArgs) {
 }
 
 export default function App() {
+  const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
 
   return (
@@ -91,8 +114,9 @@ export default function App() {
         <Layout {...data}>
           <Outlet />
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -101,6 +125,7 @@ export default function App() {
 export function ErrorBoundary() {
   const error = useRouteError();
   const [root] = useMatches();
+  const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
@@ -131,8 +156,9 @@ export function ErrorBoundary() {
             )}
           </div>
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

package/dist/generator-templates/starter/app/routes/$.tsx

@@ -5,3 +5,7 @@ export async function loader({request}: LoaderArgs) {
     status: 404,
   });
 }
+
+export default function CatchAllPage() {
+  return null;
+}

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -1,6 +1,10 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, Link} from '@remix-run/react';
+import {
+  Await,
+  useLoaderData,
+  Link,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
 import type {

package/dist/generator-templates/starter/app/routes/account.$.tsx

@@ -1,5 +1,4 @@
-import type {LoaderArgs} from '@shopify/remix-oxygen';
-import {redirect} from '@shopify/remix-oxygen';
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 
 export async function loader({context}: LoaderArgs) {
   if (await context.session.get('customerAccessToken')) {

package/dist/generator-templates/starter/app/routes/account.addresses.tsx

@@ -5,13 +5,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.orders._index.tsx

@@ -1,11 +1,6 @@
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Money, Pagination, getPaginationVariables} from '@shopify/hydrogen';
-import {
-  json,
-  redirect,
-  type LoaderArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 import type {
   CustomerOrdersFragment,
   OrderItemFragment,

package/dist/generator-templates/starter/app/routes/account.profile.tsx

@@ -1,12 +1,17 @@
 import type {CustomerFragment} from 'storefrontapi.generated';
 import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types';
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect, type V2_MetaFunction} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.tsx

@@ -109,13 +109,13 @@ function AccountLayout({
     <div className="account">
       <h1>{heading}</h1>
       <br />
-      <AcccountMenu />
+      <AccountMenu />
       {children}
     </div>
   );
 }
 
-function AcccountMenu() {
+function AccountMenu() {
   function isActiveStyle({
     isActive,
     isPending,
@@ -124,10 +124,11 @@ function AcccountMenu() {
     isPending: boolean;
   }) {
     return {
-      fontWeight: isActive ? 'bold' : '',
+      fontWeight: isActive ? 'bold' : undefined,
       color: isPending ? 'grey' : 'black',
     };
   }
+
   return (
     <nav role="navigation">
       <NavLink to="/account/orders" style={isActiveStyle}>

package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx

@@ -1,5 +1,9 @@
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
 
 type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account_.login.tsx

@@ -3,9 +3,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
-import {Form, Link, useActionData} from '@remix-run/react';
+import {
+  Form,
+  Link,
+  useActionData,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 
 type ActionResponse = {
   error: string | null;

package/dist/generator-templates/starter/app/routes/account_.logout.tsx

@@ -1,9 +1,5 @@
-import {
-  json,
-  redirect,
-  type ActionArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type ActionArgs} from '@shopify/remix-oxygen';
+import {type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = () => {
   return [{title: 'Logout'}];

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = ({data}) => {

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 

package/dist/generator-templates/starter/app/routes/blogs._index.tsx

@@ -1,10 +1,9 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = () => {
-  return [{title: `Hydrogen | Logs`}];
+  return [{title: `Hydrogen | Blogs`}];
 };
 
 export const loader = async ({request, context: {storefront}}: LoaderArgs) => {

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -1,8 +1,7 @@
-import {Await, useMatches} from '@remix-run/react';
+import {Await, useMatches, type V2_MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {CartQueryData} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {type ActionArgs, json} from '@shopify/remix-oxygen';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '~/components/Cart';

package/dist/generator-templates/starter/app/routes/collections.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link, type V2_MetaFunction} from '@remix-run/react';
 import {
   Pagination,
   getPaginationVariables,

package/dist/generator-templates/starter/app/routes/pages.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data.page.title}`}];

package/dist/generator-templates/starter/app/routes/policies.$handle.tsx

@@ -1,7 +1,6 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
-import {type Shop} from '@shopify/hydrogen-react/storefront-api-types';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
 type SelectedPolicies = keyof Pick<
   Shop,