From 462c8d038a5056ed4d2cf95b9733739c80b7ef40 Mon Sep 17 00:00:00 2001 From: Tom Smith Date: Thu, 14 Dec 2023 17:29:17 +0000 Subject: [PATCH] Chore/update hydrogen (#109) * chore: update packages * chore: move meta to function * chore: update remix 2 types * chore: update hydrogen-sanity preview implementation * chore: update to useRootLoaderData * chore: add live reload * chore: add csp * docs: update readme * chore: add Layout type * chore: remove nonce file * chore: update analytics * chore: update deps * fix: cart footer. fixes #91 * chore: update node version * fix: csp --- README.md | 15 +- app/components/Link.tsx | 5 +- app/components/cart/Cart.tsx | 6 +- app/components/cart/CartDrawer.tsx | 2 +- app/components/global/CountrySelector.tsx | 4 +- app/components/global/Footer.tsx | 6 +- app/components/global/Header.tsx | 6 +- app/components/global/HeaderActions.tsx | 19 +- app/components/global/NotFound.tsx | 2 +- .../media/ImageWithProductHotspots.tsx | 6 +- app/components/modules/CallToAction.tsx | 5 +- app/components/modules/Image.tsx | 5 +- app/components/portableText/blocks/Grid.tsx | 5 +- .../product/buttons/AddToCartButton.tsx | 87 +- app/entry.server.tsx | 57 +- app/hooks/useAnalytics.tsx | 191 +- app/hooks/usePageAnalytics.tsx | 33 + app/lib/nonce.ts | 18 - app/lib/sanity/types.ts | 10 + app/lib/utils.ts | 15 +- app/root.tsx | 46 +- ...ng).$shopid.orders.$token.authenticate.tsx | 7 +- app/routes/($lang)._index.tsx | 4 +- app/routes/($lang).account.login.tsx | 4 +- app/routes/($lang).account.logout.ts | 8 +- app/routes/($lang).account.orders.$id.tsx | 4 +- app/routes/($lang).account.recover.tsx | 4 +- app/routes/($lang).account.register.tsx | 4 +- app/routes/($lang).account.tsx | 4 +- .../($lang).api.collections.$handle.tsx | 4 +- app/routes/($lang).cart.$lines.tsx | 4 +- app/routes/($lang).cart.tsx | 29 +- app/routes/($lang).collections.$handle.tsx | 4 +- app/routes/($lang).pages.$handle.tsx | 4 +- app/routes/($lang).products.$handle.tsx | 4 +- app/routes/[robots.txt].tsx | 4 +- app/routes/[sitemap.xml].tsx | 4 +- app/routes/_store.($lang).api.fetchgids.tsx | 4 +- package-lock.json | 27173 ++++++++++------ package.json | 27 +- remix.config.js | 7 - server.ts | 33 +- 42 files changed, 16979 insertions(+), 10904 deletions(-) create mode 100644 app/hooks/usePageAnalytics.tsx delete mode 100644 app/lib/nonce.ts diff --git a/README.md b/README.md index af896beb..f84addcb 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # AKVA - An example storefront powered by Sanity + Hydrogen -This demo is compatible with `@shopify/hydrogen >= 2023.1.0` built on Remix. +This demo is compatible with `@shopify/hydrogen >= 2023.10.0` built on Remix. +> For a more complex reference example, please see our [demo-ecommerce repo](https://github.com/sanity-io/demo-ecommerce) which features a monorepo with an embedded Sanity Studio, full live preview, more content models and added internationalisation. > For the legacy Hydrogen v1 template, please refer to the [hydrogen-v1 branch](https://github.com/sanity-io/hydrogen-sanity-demo/tree/hydrogen-v1). @@ -31,12 +32,12 @@ In addition to this, we've created a `query` utility, which uses [Hydrogen's cac It's possible to make calls to the Sanity API either with `query`: ```tsx -import {json, type LoaderArgs} from '@shopify/remix-oxygen'; +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import type {SanityProductPage} from '~/lib/sanity'; const QUERY = `*[_type == 'product' && slug.current == $slug]`; -export async function loader({params, context}: LoaderArgs) { +export async function loader({params, context}: LoaderFunctionArgs) { const cache = context.storefront.CacheLong(); const sanityContent = await context.sanity.query({ @@ -56,12 +57,12 @@ or directly with the Sanity client: ```tsx // /app/routes/($lang).products.$handle.tsx import {useLoaderData} from '@remix-run/react'; -import {json, type LoaderArgs} from '@shopify/remix-oxygen'; +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import type {SanityProductPage} from '~/lib/sanity'; const QUERY = `*[_type == 'product' && slug.current == $slug]`; -export async function loader({params, context}: LoaderArgs) { +export async function loader({params, context}: LoaderFunctionArgs) { const sanityContent = await context.sanity.client.fetch( QUERY, { @@ -86,13 +87,13 @@ You can also use the [`defer` and `Await` utilities](https://remix.run/docs/en/1 // /app/routes/($lang).products.$handle.tsx import {Suspense} from 'react'; import {Await, useLoaderData} from '@remix-run/react'; -import {defer, type LoaderArgs} from '@shopify/remix-oxygen'; +import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import type {SanityProductPage, LessImportant} from '~/lib/sanity'; const QUERY = `*[_type == 'product' && slug.current == $slug]`; const ANOTHER_QUERY = `*[references($id)]`; -export async function loader({params, context}: LoaderArgs) { +export async function loader({params, context}: LoaderFunctionArgs) { /* Await the important content here */ const sanityContent = await context.sanity.query({ query: QUERY, diff --git a/app/components/Link.tsx b/app/components/Link.tsx index 0c3c0f50..ef238963 100644 --- a/app/components/Link.tsx +++ b/app/components/Link.tsx @@ -3,9 +3,9 @@ import { type LinkProps as RemixLinkProps, NavLink as RemixNavLink, type NavLinkProps as RemixNavLinkProps, - useMatches, } from '@remix-run/react'; import {forwardRef} from 'react'; +import {useRootLoaderData} from '~/root'; type LinkProps = Omit & { className?: RemixNavLinkProps['className'] | RemixLinkProps['className']; @@ -30,8 +30,7 @@ const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i; */ export const Link = forwardRef((props, ref) => { const {to, className, ...resOfProps} = props; - const [root] = useMatches(); - const selectedLocale = root.data?.selectedLocale; + const {selectedLocale} = useRootLoaderData(); let toWithLocale = to; diff --git a/app/components/cart/Cart.tsx b/app/components/cart/Cart.tsx index 03c06db3..a710326c 100644 --- a/app/components/cart/Cart.tsx +++ b/app/components/cart/Cart.tsx @@ -1,4 +1,3 @@ -import {useMatches} from '@remix-run/react'; import {CartForm} from '@shopify/hydrogen'; import type { Cart, @@ -22,6 +21,7 @@ import RemoveIcon from '~/components/icons/Remove'; import SpinnerIcon from '~/components/icons/Spinner'; import {Link} from '~/components/Link'; import {useCartFetchers} from '~/hooks/useCartFetchers'; +import {useRootLoaderData} from '~/root'; export function CartLineItems({ linesObj, @@ -264,12 +264,10 @@ export function CartSummary({cost}: {cost: CartCost}) { } export function CartActions({cart}: {cart: Cart}) { - const [root] = useMatches(); + const {storeDomain} = useRootLoaderData(); if (!cart || !cart.checkoutUrl) return null; - const storeDomain = root?.data?.storeDomain; - const shopPayLineItems = flattenConnection(cart.lines).map((line) => ({ id: line.merchandise.id, quantity: line.quantity, diff --git a/app/components/cart/CartDrawer.tsx b/app/components/cart/CartDrawer.tsx index 2cdb44a2..b3eae5cb 100644 --- a/app/components/cart/CartDrawer.tsx +++ b/app/components/cart/CartDrawer.tsx @@ -131,7 +131,7 @@ function CartHeader({ function CartFooter({cart}: {cart: Cart}) { return ( -