@shopify/create-hydrogen 5.0.23 → 5.0.25

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerUpdateMutation.ts

@@ -1,8 +1,9 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerUpdate
 export const CUSTOMER_UPDATE_MUTATION = `#graphql
-  # https://shopify.dev/docs/api/customer/latest/mutations/customerUpdate
   mutation customerUpdate(
     $customer: CustomerUpdateInput!
-  ){
+    $language: LanguageCode
+  ) @inContext(language: $language) {
     customerUpdate(input: $customer) {
       customer {
         firstName

package/dist/assets/hydrogen/starter/app/lib/context.ts

@@ -2,11 +2,27 @@ import {createHydrogenContext} from '@shopify/hydrogen';
 import {AppSession} from '~/lib/session';
 import {CART_QUERY_FRAGMENT} from '~/lib/fragments';
 
+// Define the additional context object
+const additionalContext = {
+  // Additional context for custom properties, CMS clients, 3P SDKs, etc.
+  // These will be available as both context.propertyName and context.get(propertyContext)
+  // Example of complex objects that could be added:
+  // cms: await createCMSClient(env),
+  // reviews: await createReviewsClient(env),
+} as const;
+
+// Automatically augment HydrogenAdditionalContext with the additional context type
+type AdditionalContextType = typeof additionalContext;
+
+declare global {
+  interface HydrogenAdditionalContext extends AdditionalContextType {}
+}
+
 /**
- * The context implementation is separate from server.ts
- * so that type can be extracted for AppLoadContext
+ * Creates Hydrogen context for React Router 7.9.x
+ * Returns HydrogenRouterContextProvider with hybrid access patterns
  * */
-export async function createAppLoadContext(
+export async function createHydrogenRouterContext(
   request: Request,
   env: Env,
   executionContext: ExecutionContext,
@@ -24,20 +40,21 @@ export async function createAppLoadContext(
     AppSession.init(request, [env.SESSION_SECRET]),
   ]);
 
-  const hydrogenContext = createHydrogenContext({
-    env,
-    request,
-    cache,
-    waitUntil,
-    session,
-    i18n: {language: 'EN', country: 'US'},
-    cart: {
-      queryFragment: CART_QUERY_FRAGMENT,
+  const hydrogenContext = createHydrogenContext(
+    {
+      env,
+      request,
+      cache,
+      waitUntil,
+      session,
+      // Or detect from URL path based on locale subpath, cookies, or any other strategy
+      i18n: {language: 'EN', country: 'US'},
+      cart: {
+        queryFragment: CART_QUERY_FRAGMENT,
+      },
     },
-  });
+    additionalContext,
+  );
 
-  return {
-    ...hydrogenContext,
-    // declare additional Remix loader context
-  };
+  return hydrogenContext;
 }

package/dist/assets/hydrogen/starter/app/lib/fragments.ts

@@ -109,6 +109,7 @@ export const CART_QUERY_FRAGMENT = `#graphql
     updatedAt
     id
     appliedGiftCards {
+      id
       lastCharacters
       amountUsed {
         ...Money

package/dist/assets/hydrogen/starter/app/lib/orderFilters.ts

@@ -0,0 +1,90 @@
+/**
+ * Field name constants for order filtering
+ */
+export const ORDER_FILTER_FIELDS = {
+  NAME: 'name',
+  CONFIRMATION_NUMBER: 'confirmation_number',
+} as const;
+
+/**
+ * Parameters for filtering customer orders, see: https://shopify.dev/docs/api/customer/latest/queries/customer#returns-Customer.fields.orders.arguments.query
+ */
+export interface OrderFilterParams {
+  /** Order name or number (e.g., "#1001" or "1001") */
+  name?: string;
+  /** Order confirmation number */
+  confirmationNumber?: string;
+}
+
+/**
+ * Sanitizes a filter value to prevent injection attacks or malformed queries.
+ * Allows only alphanumeric characters, underscore, and dash.
+ * @param value - The input string to sanitize
+ * @returns The sanitized string
+ */
+function sanitizeFilterValue(value: string): string {
+  // Only allow alphanumeric, underscore, and dash
+  // Remove anything else to prevent injection
+  return value.replace(/[^a-zA-Z0-9_\-]/g, '');
+}
+
+/**
+ * Builds a query string for filtering customer orders using the Customer Account API
+ * @param filters - The filter parameters
+ * @returns A formatted query string for the GraphQL query parameter, or undefined if no filters
+ * @example
+ * buildOrderSearchQuery(\{ name: '1001' \}) // returns "name:1001"
+ * buildOrderSearchQuery(\{ name: '1001', confirmationNumber: 'ABC123' \}) // returns "name:1001 AND confirmation_number:ABC123"
+ */
+export function buildOrderSearchQuery(
+  filters: OrderFilterParams,
+): string | undefined {
+  const queryParts: string[] = [];
+
+  if (filters.name) {
+    // Remove # if present and trim
+    const cleanName = filters.name.replace(/^#/, '').trim();
+    const sanitizedName = sanitizeFilterValue(cleanName);
+    if (sanitizedName) {
+      queryParts.push(`name:${sanitizedName}`);
+    }
+  }
+
+  if (filters.confirmationNumber) {
+    const cleanConfirmation = filters.confirmationNumber.trim();
+    const sanitizedConfirmation = sanitizeFilterValue(cleanConfirmation);
+    if (sanitizedConfirmation) {
+      queryParts.push(`confirmation_number:${sanitizedConfirmation}`);
+    }
+  }
+
+  return queryParts.length > 0 ? queryParts.join(' AND ') : undefined;
+}
+
+/**
+ * Parses order filter parameters from URLSearchParams
+ * @param searchParams - The URL search parameters
+ * @returns Parsed filter parameters
+ * @example
+ * const url = new URL('https://example.com/orders?name=1001&confirmation_number=ABC123');
+ * parseOrderFilters(url.searchParams) // returns \{ name: '1001', confirmationNumber: 'ABC123' \}
+ */
+export function parseOrderFilters(
+  searchParams: URLSearchParams,
+): OrderFilterParams {
+  const filters: OrderFilterParams = {};
+
+  const name = searchParams.get(ORDER_FILTER_FIELDS.NAME);
+  if (name) {
+    filters.name = name;
+  }
+
+  const confirmationNumber = searchParams.get(
+    ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER,
+  );
+  if (confirmationNumber) {
+    filters.confirmationNumber = confirmationNumber;
+  }
+
+  return filters;
+}

package/dist/assets/hydrogen/starter/app/lib/redirect.ts

@@ -1,4 +1,4 @@
-import {redirect} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
 
 export function redirectIfHandleIsLocalized(
   request: Request,

package/dist/assets/hydrogen/starter/app/lib/session.ts

@@ -3,7 +3,7 @@ import {
   createCookieSessionStorage,
   type SessionStorage,
   type Session,
-} from '@shopify/remix-oxygen';
+} from 'react-router';
 
 /**
  * This is a custom session implementation for your Hydrogen shop.

package/dist/assets/hydrogen/starter/app/lib/variants.ts

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router';
+import {useLocation} from 'react-router';
 import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
 import {useMemo} from 'react';
 

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -1,5 +1,4 @@
 import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Outlet,
   useRouteError,
@@ -11,6 +10,7 @@ import {
   ScrollRestoration,
   useRouteLoaderData,
 } from 'react-router';
+import type {Route} from './+types/root';
 import favicon from '~/assets/favicon.svg';
 import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
 import resetStyles from '~/styles/reset.css?url';
@@ -65,7 +65,7 @@ export function links() {
   ];
 }
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -97,7 +97,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context}: LoaderFunctionArgs) {
+async function loadCriticalData({context}: Route.LoaderArgs) {
   const {storefront} = context;
 
   const [header] = await Promise.all([
@@ -118,7 +118,7 @@ async function loadCriticalData({context}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   const {storefront, customerAccount, cart} = context;
 
   // defer the footer query (below the fold)
@@ -129,7 +129,7 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
         footerMenuHandle: 'footer', // Adjust to your footer menu handle
       },
     })
-    .catch((error) => {
+    .catch((error: Error) => {
       // Log query errors, but don't throw them so the page can still render
       console.error(error);
       return null;
@@ -143,7 +143,6 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
 
 export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
-  const data = useRouteLoaderData<RootLoader>('root');
 
   return (
     <html lang="en">
@@ -156,17 +155,7 @@ export function Layout({children}: {children?: React.ReactNode}) {
         <Links />
       </head>
       <body>
-        {data ? (
-          <Analytics.Provider
-            cart={data.cart}
-            shop={data.shop}
-            consent={data.consent}
-          >
-            <PageLayout {...data}>{children}</PageLayout>
-          </Analytics.Provider>
-        ) : (
-          children
-        )}
+        {children}
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
       </body>
@@ -175,7 +164,23 @@ export function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return <Outlet />;
+  const data = useRouteLoaderData<RootLoader>('root');
+
+  if (!data) {
+    return <Outlet />;
+  }
+
+  return (
+    <Analytics.Provider
+      cart={data.cart}
+      shop={data.shop}
+      consent={data.consent}
+    >
+      <PageLayout {...data}>
+        <Outlet />
+      </PageLayout>
+    </Analytics.Provider>
+  );
 }
 
 export function ErrorBoundary() {

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

@@ -1,6 +1,6 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/$';
 
-export async function loader({request}: LoaderFunctionArgs) {
+export async function loader({request}: Route.LoaderArgs) {
   throw new Response(`${new URL(request.url).pathname} not found`, {
     status: 404,
   });

package/dist/assets/hydrogen/starter/app/routes/[robots.txt].tsx

@@ -1,7 +1,7 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/[robots.txt]';
 import {parseGid} from '@shopify/hydrogen';
 
-export async function loader({request, context}: LoaderFunctionArgs) {
+export async function loader({request, context}: Route.LoaderArgs) {
   const url = new URL(request.url);
 
   const {shop} = await context.storefront.query(ROBOTS_QUERY);

package/dist/assets/hydrogen/starter/app/routes/[sitemap.xml].tsx

@@ -1,10 +1,10 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/[sitemap.xml]';
 import {getSitemapIndex} from '@shopify/hydrogen';
 
 export async function loader({
   request,
   context: {storefront},
-}: LoaderFunctionArgs) {
+}: Route.LoaderArgs) {
   const response = await getSitemapIndex({
     storefront,
     request,
@@ -14,4 +14,3 @@ export async function loader({
 
   return response;
 }
-

package/dist/assets/hydrogen/starter/app/routes/_index.tsx

@@ -1,18 +1,22 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { Await, useLoaderData, Link, type MetaFunction } from 'react-router';
+import {
+  Await,
+  useLoaderData,
+  Link,
+} from 'react-router';
+import type {Route} from './+types/_index';
 import {Suspense} from 'react';
-import {Image, Money} from '@shopify/hydrogen';
+import {Image} from '@shopify/hydrogen';
 import type {
   FeaturedCollectionFragment,
   RecommendedProductsQuery,
 } from 'storefrontapi.generated';
 import {ProductItem} from '~/components/ProductItem';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -26,7 +30,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context}: LoaderFunctionArgs) {
+async function loadCriticalData({context}: Route.LoaderArgs) {
   const [{collections}] = await Promise.all([
     context.storefront.query(FEATURED_COLLECTION_QUERY),
     // Add other queries here, so that they are loaded in parallel
@@ -42,10 +46,10 @@ async function loadCriticalData({context}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   const recommendedProducts = context.storefront
     .query(RECOMMENDED_PRODUCTS_QUERY)
-    .catch((error) => {
+    .catch((error: Error) => {
       // Log query errors, but don't throw them so the page can still render
       console.error(error);
       return null;

package/dist/assets/hydrogen/starter/app/routes/account.$.tsx

@@ -1,8 +1,9 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
+import type {Route} from './+types/account.$';
 
 // fallback wild card for all unauthenticated routes in account section
-export async function loader({context}: LoaderFunctionArgs) {
-  await context.customerAccount.handleAuthStatus();
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
 
   return redirect('/account');
 }

package/dist/assets/hydrogen/starter/app/routes/account._index.tsx

@@ -1,4 +1,4 @@
-import {redirect} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
 
 export async function loader() {
   return redirect('/account/orders');

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -5,17 +5,13 @@ import type {
 } from 'customer-accountapi.generated';
 import {
   data,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
-  type MetaFunction,
   type Fetcher,
 } from 'react-router';
+import type {Route} from './+types/account.addresses';
 import {
   UPDATE_ADDRESS_MUTATION,
   DELETE_ADDRESS_MUTATION,
@@ -31,17 +27,17 @@ export type ActionResponse = {
   updatedAddress?: AddressFragment;
 };
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: 'Addresses'}];
 };
 
-export async function loader({context}: LoaderFunctionArgs) {
-  await context.customerAccount.handleAuthStatus();
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
 
   return {};
 }
 
-export async function action({request, context}: ActionFunctionArgs) {
+export async function action({request, context}: Route.ActionArgs) {
   const {customerAccount} = context;
 
   try {
@@ -96,7 +92,11 @@ export async function action({request, context}: ActionFunctionArgs) {
           const {data, errors} = await customerAccount.mutate(
             CREATE_ADDRESS_MUTATION,
             {
-              variables: {address, defaultAddress},
+              variables: {
+                address,
+                defaultAddress,
+                language: customerAccount.i18n.language,
+              },
             },
           );
 
@@ -145,6 +145,7 @@ export async function action({request, context}: ActionFunctionArgs) {
                 address,
                 addressId: decodeURIComponent(addressId),
                 defaultAddress,
+                language: customerAccount.i18n.language,
               },
             },
           );
@@ -190,7 +191,10 @@ export async function action({request, context}: ActionFunctionArgs) {
           const {data, errors} = await customerAccount.mutate(
             DELETE_ADDRESS_MUTATION,
             {
-              variables: {addressId: decodeURIComponent(addressId)},
+              variables: {
+                addressId: decodeURIComponent(addressId),
+                language: customerAccount.i18n.language,
+              },
             },
           );
 

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -1,25 +1,30 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { useLoaderData, type MetaFunction } from 'react-router';
-import {Money, Image, flattenConnection} from '@shopify/hydrogen';
-import type {OrderLineItemFullFragment} from 'customer-accountapi.generated';
+import {redirect, useLoaderData} from 'react-router';
+import type {Route} from './+types/account.orders.$id';
+import {Money, Image} from '@shopify/hydrogen';
+import type {
+  OrderLineItemFullFragment,
+  OrderQuery,
+} from 'customer-accountapi.generated';
 import {CUSTOMER_ORDER_QUERY} from '~/graphql/customer-account/CustomerOrderQuery';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Order ${data?.order?.name}`}];
 };
 
-export async function loader({params, context}: LoaderFunctionArgs) {
+export async function loader({params, context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
   if (!params.id) {
     return redirect('/account/orders');
   }
 
   const orderId = atob(params.id);
-  const {data, errors} = await context.customerAccount.query(
-    CUSTOMER_ORDER_QUERY,
-    {
-      variables: {orderId},
-    },
-  );
+  const {data, errors}: {data: OrderQuery; errors?: Array<{message: string}>} =
+    await customerAccount.query(CUSTOMER_ORDER_QUERY, {
+      variables: {
+        orderId,
+        language: customerAccount.i18n.language,
+      },
+    });
 
   if (errors?.length || !data?.order) {
     throw new Error('Order not found');
@@ -27,20 +32,37 @@ export async function loader({params, context}: LoaderFunctionArgs) {
 
   const {order} = data;
 
-  const lineItems = flattenConnection(order.lineItems);
-  const discountApplications = flattenConnection(order.discountApplications);
+  // Extract line items directly from nodes array
+  const lineItems = order.lineItems.nodes;
+
+  // Extract discount applications directly from nodes array
+  const discountApplications = order.discountApplications.nodes;
 
-  const fulfillmentStatus =
-    flattenConnection(order.fulfillments)[0]?.status ?? 'N/A';
+  // Get fulfillment status from first fulfillment node
+  const fulfillmentStatus = order.fulfillments.nodes[0]?.status ?? 'N/A';
 
+  // Get first discount value with proper type checking
   const firstDiscount = discountApplications[0]?.value;
 
+  // Type guard for MoneyV2 discount
   const discountValue =
-    firstDiscount?.__typename === 'MoneyV2' && firstDiscount;
+    firstDiscount?.__typename === 'MoneyV2'
+      ? (firstDiscount as Extract<
+          typeof firstDiscount,
+          {__typename: 'MoneyV2'}
+        >)
+      : null;
 
+  // Type guard for percentage discount
   const discountPercentage =
-    firstDiscount?.__typename === 'PricingPercentageValue' &&
-    firstDiscount?.percentage;
+    firstDiscount?.__typename === 'PricingPercentageValue'
+      ? (
+          firstDiscount as Extract<
+            typeof firstDiscount,
+            {__typename: 'PricingPercentageValue'}
+          >
+        ).percentage
+      : null;
 
   return {
     order,
@@ -60,9 +82,12 @@ export default function OrderRoute() {
     fulfillmentStatus,
   } = useLoaderData<typeof loader>();
   return (
-    (<div className="account-order">
+    <div className="account-order">
       <h2>Order {order.name}</h2>
       <p>Placed on {new Date(order.processedAt!).toDateString()}</p>
+      {order.confirmationNumber && (
+        <p>Confirmation: {order.confirmationNumber}</p>
+      )}
       <br />
       <div>
         <table>
@@ -77,7 +102,7 @@ export default function OrderRoute() {
           <tbody>
             {lineItems.map((lineItem, lineItemIndex) => (
               // eslint-disable-next-line react/no-array-index-key
-              (<OrderLineRow key={lineItemIndex} lineItem={lineItem} />)
+              <OrderLineRow key={lineItemIndex} lineItem={lineItem} />
             ))}
           </tbody>
           <tfoot>
@@ -165,7 +190,7 @@ export default function OrderRoute() {
           View Order Status →
         </a>
       </p>
-    </div>)
+    </div>
   );
 }