sync v2

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
   <p style="text-align: center;">
-    <img alt="Version" src="https://img.shields.io/badge/version-2.2.4-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.3.0-blue.svg?cacheSeconds=2592000" />
     <a href="#" target="_blank">
       <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
     </a>
@@ -46,7 +46,7 @@ Follow these steps to get started with Pilot and begin crafting your Hydrogen-dr
 1. Install [Weaverse Hydrogen Customizer](https://apps.shopify.com/weaverse) from Shopify App Store.
 2. Create new Hydrogen storefront inside Weaverse.
 3. Initialize the project and start a local dev server with `@weaverse/cli` tool as instructed in the Weaverse editor.
-   ![Init Weaverse Storefront](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/init-project_4882deaa-c661-47cc-a7bf-38b2704e6a0b.png?v=1695816089)
+   ![Init Weaverse Storefront](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/New_storefront.png?v=1699244454)
 4. Open the Weaverse editor to start customizing and tailoring your storefront according to your preferences.
 
 ## Features overview
@@ -270,7 +270,7 @@ And then you can use the data in your component with `Component.props.loaderData
 
 Weaverse provides a convenient way to customize your theme inside the **Weaverse editor**. You can add new sections, customize existing ones, and change the theme settings.
 
-![Weaverse Editor](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Live_demo_-_Weaverse_Hydrogen_2023-09-27_18-58-23.png?v=1695826457)
+![Weaverse Editor](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/playground.jpg?v=1699244445)
 
 ## References
 

app/components/CountrySelector.tsx

@@ -8,12 +8,13 @@ import {CartForm} from '@shopify/hydrogen';
 import {Heading, Button, IconCheck} from '~/components';
 import type {Localizations, Locale} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
+import {useRootLoaderData} from '~/root';
 
 export function CountrySelector() {
-  const [root] = useMatches();
   const fetcher = useFetcher();
   const closeRef = useRef<HTMLDetailsElement>(null);
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
   const {pathname, search} = useLocation();
   const pathWithoutLocale = `${pathname.replace(
     selectedLocale.pathPrefix,

app/components/FeaturedProducts.tsx

@@ -26,8 +26,8 @@ interface FeaturedProductsProps {
  * @param query a filtering query
  * @param reverse wether to reverse the product results
  * @param sortKey Sort the underlying list by the given key.
- * @see query https://shopify.dev/api/storefront/2023-07/queries/products
- * @see filters https://shopify.dev/api/storefront/2023-07/queries/products#argument-products-query
+ * @see query https://shopify.dev/api/storefront/current/queries/products
+ * @see filters https://shopify.dev/api/storefront/current/queries/products#argument-products-query
  */
 export function FeaturedProducts({
   count = 4,
@@ -38,7 +38,7 @@ export function FeaturedProducts({
   reverse,
   sortKey = 'BEST_SELLING',
 }: FeaturedProductsProps) {
-  const {load, data} = useFetcher();
+  const {load, data} = useFetcher<{products: Product[]}>();
   const queryString = useMemo(
     () =>
       Object.entries({count, sortKey, query, reverse})
@@ -69,7 +69,7 @@ export function FeaturedProducts({
         <FeatureProductsContent
           count={count}
           onClick={onClose}
-          products={data?.products as Product[]}
+          products={data?.products}
         />
       </div>
     </>

app/components/Layout.tsx

@@ -1,4 +1,4 @@
-import {useParams, Form, Await, useMatches} from '@remix-run/react';
+import {useParams, Form, Await} from '@remix-run/react';
 import {useWindowScroll} from 'react-use';
 import {Disclosure} from '@headlessui/react';
 import {Suspense, useEffect, useMemo} from 'react';
@@ -32,6 +32,7 @@ import {useIsHydrated} from '~/hooks/useIsHydrated';
 import {useCartFetchers} from '~/hooks/useCartFetchers';
 import {Logo} from './Logo';
 import clsx from 'clsx';
+import {useRootLoaderData} from '~/root';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -107,13 +108,13 @@ function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
 }
 
 function CartDrawer({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
-  const [root] = useMatches();
+  const rootData = useRootLoaderData();
 
   return (
     <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
       <div className="grid">
         <Suspense fallback={<CartLoading />}>
-          <Await resolve={root.data?.cart}>
+          <Await resolve={rootData?.cart}>
             {(cart) => <Cart layout="drawer" onClose={onClose} cart={cart} />}
           </Await>
         </Suspense>
@@ -295,8 +296,8 @@ function DesktopHeader({
 }
 
 function AccountLink({className}: {className?: string}) {
-  const [root] = useMatches();
-  const isLoggedIn = root.data?.isLoggedIn;
+  const rootData = useRootLoaderData();
+  const isLoggedIn = rootData?.isLoggedIn;
   return isLoggedIn ? (
     <Link to="/account" className={className}>
       <IconAccount />
@@ -315,11 +316,11 @@ function CartCount({
   isHome: boolean;
   openCart: () => void;
 }) {
-  const [root] = useMatches();
+  const rootData = useRootLoaderData();
 
   return (
     <Suspense fallback={<Badge count={0} dark={isHome} openCart={openCart} />}>
-      <Await resolve={root.data?.cart}>
+      <Await resolve={rootData?.cart}>
         {(cart) => (
           <Badge
             dark={isHome}

app/components/Link.tsx

@@ -3,8 +3,8 @@ import {
   NavLink as RemixNavLink,
   type NavLinkProps as RemixNavLinkProps,
   type LinkProps as RemixLinkProps,
-  useMatches,
 } from '@remix-run/react';
+import {useRootLoaderData} from '~/root';
 
 type LinkProps = Omit<RemixLinkProps, 'className'> & {
   className?: RemixNavLinkProps['className'] | RemixLinkProps['className'];
@@ -27,8 +27,8 @@ type LinkProps = Omit<RemixLinkProps, 'className'> & {
  */
 export function Link(props: LinkProps) {
   const {to, className, ...resOfProps} = props;
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale;
 
   let toWithLocale = to;
 

app/data/queries.ts

@@ -29,7 +29,7 @@ export let HOMEPAGE_SEO_QUERY = `#graphql
   ${COLLECTION_CONTENT_FRAGMENT}
 ` as const;
 
-// @see: https://shopify.dev/api/storefront/2023-04/queries/products
+// @see: https://shopify.dev/api/storefront/current/queries/products
 export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
@@ -42,7 +42,7 @@ export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   ${PRODUCT_CARD_FRAGMENT}
 `;
 
-// @see: https://shopify.dev/api/storefront/2023-04/queries/collections
+// @see: https://shopify.dev/api/storefront/current/queries/collections
 export let FEATURED_COLLECTIONS_QUERY = `#graphql
   query homepageFeaturedCollections($country: CountryCode, $language: LanguageCode)
   @inContext(country: $country, language: $language) {
@@ -235,7 +235,6 @@ export let COLLECTION_QUERY = `#graphql
         pageInfo {
           hasPreviousPage
           hasNextPage
-          hasNextPage
           endCursor
           startCursor
         }

app/hooks/useCartFetchers.tsx

@@ -6,9 +6,8 @@ export function useCartFetchers(actionName: string) {
   const cartFetchers = [];
 
   for (const fetcher of fetchers) {
-    const formData = fetcher.submission?.formData;
-    if (formData) {
-      const formInputs = CartForm.getFormInput(formData);
+    if (fetcher.formData) {
+      const formInputs = CartForm.getFormInput(fetcher.formData);
       if (formInputs.action === actionName) {
         cartFetchers.push(fetcher);
       }

app/hooks/usePageAnalytics.tsx

@@ -11,11 +11,13 @@ export function usePageAnalytics({hasUserConsent}: {hasUserConsent: boolean}) {
     const data: Record<string, unknown> = {};
 
     matches.forEach((event) => {
-      const eventData = event?.data;
+      const eventData = event?.data as Record<string, unknown>;
       if (eventData) {
         eventData['analytics'] && Object.assign(data, eventData['analytics']);
 
-        const selectedLocale = eventData['selectedLocale'] || DEFAULT_LOCALE;
+        const selectedLocale =
+          (eventData['selectedLocale'] as typeof DEFAULT_LOCALE) ||
+          DEFAULT_LOCALE;
         Object.assign(data, {
           currency: selectedLocale.currency,
           acceptedLanguage: selectedLocale.language,

app/lib/utils.ts

@@ -8,6 +8,7 @@ import type {
   ParentMenuItemFragment,
 } from 'storefrontapi.generated';
 import {countries} from '~/data/countries';
+import {useRootLoaderData} from '~/root';
 
 import type {I18nLocale} from './type';
 
@@ -296,8 +297,8 @@ export function getLocaleFromRequest(request: Request): I18nLocale {
 }
 
 export function usePrefixPathWithLocale(path: string) {
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
 
   return `${selectedLocale.pathPrefix}${
     path.startsWith('/') ? path : '/' + path
@@ -306,8 +307,8 @@ export function usePrefixPathWithLocale(path: string) {
 
 export function useIsHomePath() {
   const {pathname} = useLocation();
-  const [root] = useMatches();
-  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const rootData = useRootLoaderData();
+  const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
   const strippedPathname = pathname.replace(selectedLocale.pathPrefix, '');
   return strippedPathname === '/';
 }

app/root.tsx

@@ -1,8 +1,8 @@
 import {
   defer,
-  type LinksFunction,
-  type LoaderArgs,
+  type LoaderFunctionArgs,
   type AppLoadContext,
+  type SerializeFrom,
 } from '@shopify/remix-oxygen';
 import {
   isRouteErrorResponse,
@@ -67,7 +67,12 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export async function loader({request, context}: LoaderArgs) {
+export const useRootLoaderData = () => {
+  const [root] = useMatches();
+  return root?.data as SerializeFrom<typeof loader>;
+};
+
+export async function loader({request, context}: LoaderFunctionArgs) {
   const {session, storefront, cart} = context;
   const [customerAccessToken, layout] = await Promise.all([
     session.get('customerAccessToken'),
@@ -127,9 +132,9 @@ export default withWeaverse(App);
 
 const ErrorBoundaryComponent = ({error}: {error: Error}) => {
   const nonce = useNonce();
-  const [root] = useMatches();
-  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
   const routeError = useRouteError();
+  const rootData = useRootLoaderData();
+  const locale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
   const isRouteError = isRouteErrorResponse(routeError);
 
   let title = 'Error';
@@ -151,7 +156,7 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => {
       </head>
       <body>
         <Layout
-          layout={root?.data?.layout}
+          layout={rootData?.layout}
           key={`${locale.language}-${locale.country}`}
         >
           {isRouteError ? (

app/routes/($locale).$shopid.orders.$token.authenticate.tsx

@@ -1,4 +1,4 @@
-import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
 
 import {Button, PageHeader} from '~/components';
@@ -10,7 +10,7 @@ import {Button, PageHeader} from '~/components';
  that are routing to your Hydrogen storefront. To prevent this, ensure that you redirect
  those requests back to Shopify.
 */
-export async function loader({request, context: {storefront}}: LoaderArgs) {
+export async function loader({request, context: {storefront}}: LoaderFunctionArgs) {
   const {origin} = new URL(request.url);
   const {shop} = await storefront.query(
     `#graphql

app/routes/($locale).account.activate.$id.$activationToken.tsx

@@ -1,5 +1,5 @@
 import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';
-import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
+import {Form, useActionData, type MetaFunction} from '@remix-run/react';
 import {useRef, useState} from 'react';
 
 import {getInputStyleClasses} from '~/lib/utils';
@@ -93,7 +93,7 @@ export const action: ActionFunction = async ({
   }
 };
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{title: 'Activate Account'}];
 };
 

app/routes/($locale).account.login.tsx

@@ -3,13 +3,13 @@ import {
   redirect,
   type ActionFunction,
   type AppLoadContext,
-  type LoaderArgs,
+  type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useLoaderData,
-  type V2_MetaFunction,
+  type MetaFunction,
 } from '@remix-run/react';
 import {MouseEvent, useState} from 'react';
 
@@ -20,7 +20,7 @@ export const handle = {
   isPublic: true,
 };
 
-export async function loader({context, params}: LoaderArgs) {
+export async function loader({context, params}: LoaderFunctionArgs) {
   const customerAccessToken = await context.session.get('customerAccessToken');
 
   if (customerAccessToken) {
@@ -89,7 +89,7 @@ export const action: ActionFunction = async ({request, context, params}) => {
   }
 };
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{title: 'Login'}];
 };
 

app/routes/($locale).account.logout.ts

@@ -2,8 +2,8 @@ import {
   redirect,
   type ActionFunction,
   type AppLoadContext,
-  type LoaderArgs,
-  type ActionArgs,
+  type LoaderFunctionArgs,
+  type ActionFunctionArgs,
 } from '@shopify/remix-oxygen';
 
 export async function doLogout(context: AppLoadContext) {
@@ -18,10 +18,10 @@ export async function doLogout(context: AppLoadContext) {
   });
 }
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   return redirect(context.storefront.i18n.pathPrefix);
 }
 
-export const action: ActionFunction = async ({context}: ActionArgs) => {
+export const action: ActionFunction = async ({context}: ActionFunctionArgs) => {
   return doLogout(context);
 };

app/routes/($locale).account.orders.$id.tsx

@@ -1,17 +1,17 @@
 import invariant from 'tiny-invariant';
 import clsx from 'clsx';
-import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Money, Image, flattenConnection} from '@shopify/hydrogen';
 
 import {statusMessage} from '~/lib/utils';
 import {Link, Heading, PageHeader, Text} from '~/components';
 
-export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Order ${data?.order?.name}`}];
 };
 
-export async function loader({request, context, params}: LoaderArgs) {
+export async function loader({request, context, params}: LoaderFunctionArgs) {
   if (!params.id) {
     return redirect(params?.locale ? `${params.locale}/account` : '/account');
   }