@shopify/cli 3.85.3 → 3.85.5

package/dist/assets/hydrogen/starter/app/entry.client.tsx

@@ -1,13 +1,21 @@
-import { HydratedRouter } from 'react-router/dom';
+import {HydratedRouter} from 'react-router/dom';
 import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
+import {NonceProvider} from '@shopify/hydrogen';
 
 if (!window.location.origin.includes('webcache.googleusercontent.com')) {
   startTransition(() => {
+    // Extract nonce from existing script tags
+    const existingNonce = document
+      .querySelector<HTMLScriptElement>('script[nonce]')
+      ?.nonce;
+
     hydrateRoot(
       document,
       <StrictMode>
-        <HydratedRouter />
+        <NonceProvider value={existingNonce}>
+          <HydratedRouter />
+        </NonceProvider>
       </StrictMode>,
     );
   });

package/dist/assets/hydrogen/starter/app/entry.server.tsx

@@ -1,8 +1,10 @@
-import type {AppLoadContext} from '@shopify/remix-oxygen';
 import {ServerRouter} from 'react-router';
 import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
-import {createContentSecurityPolicy} from '@shopify/hydrogen';
+import {
+  createContentSecurityPolicy,
+  type HydrogenRouterContextProvider,
+} from '@shopify/hydrogen';
 import type {EntryContext} from 'react-router';
 
 export default async function handleRequest(
@@ -10,7 +12,7 @@ export default async function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   reactRouterContext: EntryContext,
-  context: AppLoadContext,
+  context: HydrogenRouterContextProvider,
 ) {
   const {nonce, header, NonceProvider} = createContentSecurityPolicy({
     shop: {

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

@@ -4,7 +4,8 @@ export const UPDATE_ADDRESS_MUTATION = `#graphql
     $address: CustomerAddressInput!
     $addressId: ID!
     $defaultAddress: Boolean
- ) {
+    $language: LanguageCode
+ ) @inContext(language: $language) {
     customerAddressUpdate(
       address: $address
       addressId: $addressId
@@ -25,8 +26,9 @@ export const UPDATE_ADDRESS_MUTATION = `#graphql
 // NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressDelete
 export const DELETE_ADDRESS_MUTATION = `#graphql
   mutation customerAddressDelete(
-    $addressId: ID!,
-  ) {
+    $addressId: ID!
+    $language: LanguageCode
+  ) @inContext(language: $language) {
     customerAddressDelete(addressId: $addressId) {
       deletedAddressId
       userErrors {
@@ -43,7 +45,8 @@ export const CREATE_ADDRESS_MUTATION = `#graphql
   mutation customerAddressCreate(
     $address: CustomerAddressInput!
     $defaultAddress: Boolean
-  ) {
+    $language: LanguageCode
+  ) @inContext(language: $language) {
     customerAddressCreate(
       address: $address
       defaultAddress: $defaultAddress

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

@@ -31,7 +31,7 @@ export const CUSTOMER_FRAGMENT = `#graphql
 
 // NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
 export const CUSTOMER_DETAILS_QUERY = `#graphql
-  query CustomerDetails {
+  query CustomerDetails($language: LanguageCode) @inContext(language: $language) {
     customer {
       ...Customer
     }

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

@@ -45,7 +45,9 @@ export const CUSTOMER_ORDER_QUERY = `#graphql
   fragment Order on Order {
     id
     name
+    confirmationNumber
     statusPageUrl
+    fulfillmentStatus
     processedAt
     fulfillments(first: 1) {
       nodes {
@@ -77,7 +79,8 @@ export const CUSTOMER_ORDER_QUERY = `#graphql
       }
     }
   }
-  query Order($orderId: ID!) {
+  query Order($orderId: ID!, $language: LanguageCode)
+    @inContext(language: $language) {
     order(id: $orderId) {
       ... on Order {
         ...Order

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

@@ -1,4 +1,4 @@
-// https://shopify.dev/docs/api/customer/latest/objects/Order
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Order
 export const ORDER_ITEM_FRAGMENT = `#graphql
   fragment OrderItem on Order {
     totalPrice {
@@ -6,6 +6,7 @@ export const ORDER_ITEM_FRAGMENT = `#graphql
       currencyCode
     }
     financialStatus
+    fulfillmentStatus
     fulfillments(first: 1) {
       nodes {
         status
@@ -13,11 +14,12 @@ export const ORDER_ITEM_FRAGMENT = `#graphql
     }
     id
     number
+    confirmationNumber
     processedAt
   }
 ` as const;
 
-// https://shopify.dev/docs/api/customer/latest/objects/Customer
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
 export const CUSTOMER_ORDERS_FRAGMENT = `#graphql
   fragment CustomerOrders on Customer {
     orders(
@@ -26,7 +28,8 @@ export const CUSTOMER_ORDERS_FRAGMENT = `#graphql
       first: $first,
       last: $last,
       before: $startCursor,
-      after: $endCursor
+      after: $endCursor,
+      query: $query
     ) {
       nodes {
         ...OrderItem
@@ -42,7 +45,7 @@ export const CUSTOMER_ORDERS_FRAGMENT = `#graphql
   ${ORDER_ITEM_FRAGMENT}
 ` as const;
 
-// https://shopify.dev/docs/api/customer/latest/queries/customer
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
 export const CUSTOMER_ORDERS_QUERY = `#graphql
   ${CUSTOMER_ORDERS_FRAGMENT}
   query CustomerOrders(
@@ -50,7 +53,9 @@ export const CUSTOMER_ORDERS_QUERY = `#graphql
     $first: Int
     $last: Int
     $startCursor: String
-  ) {
+    $query: String
+    $language: LanguageCode
+  ) @inContext(language: $language) {
     customer {
       ...CustomerOrders
     }

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,
+              },
             },
           );