chore: update to latest packages

Weaverse · Oct 7, 2023 · c4c5f22 · c4c5f22
1 parent a9fb162
commit c4c5f22
Show file tree

Hide file tree

Showing 26 changed files with 26,622 additions and 141 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,5 @@
 /**
- * @type {import("@types/eslint").Linter.BaseConfig}
+ * @type {import('@types/eslint').Linter.BaseConfig}
  */
 module.exports = {
   extends: [
@@ -16,6 +16,33 @@ module.exports = {
     'no-case-declarations': 'off',
     // TODO: Remove jest plugin from hydrogen/eslint-plugin
     'jest/no-deprecated-functions': 'off',
+    'import/order': [
+      'error',
+      {
+        /**
+         * @description
+         *
+         * This keeps imports separate from one another, ensuring that imports are separated
+         * by their relative groups. As you move through the groups, imports become closer
+         * to the current file.
+         *
+         * @example
+         * ```
+         * import fs from 'fs';
+         *
+         * import package from 'npm-package';
+         *
+         * import xyz from '~/project-file';
+         *
+         * import index from '../';
+         *
+         * import sibling from './foo';
+         * ```
+         */
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+        'newlines-between': 'always',
+      },
+    ],
     'eslint-comments/disable-enable-pair': 'off',
     'prefer-const': 'off',
     'no-console': 'off',

diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,6 @@ node_modules
 /public/build
 /.mf
 .env
-.shopify
 .vscode
+.shopify
 .turbo
diff --git a/README.md b/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.2-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.2.3-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>
@@ -53,7 +53,7 @@ Follow these steps to get started with Pilot and begin crafting your Hydrogen-dr
 
 ### Fetching page data inside route's loader
 
-Fetching page data inside route's loader is a common pattern in Hydrogen. Weaverse provides a convenient way to do that by using `context.weaverse.loadPage` function. It accepts `RouteLoaderArgs` as an argument and returns a promise with the page data.
+Fetching page data inside route's loader is a common pattern in **Hydrogen**. **Weaverse** provides a convenient way to do that by using `context.weaverse.loadPage` function.
 
 ```ts:routes/($locale)/_index.tsx
 import {defer} from '@shopify/remix-oxygen';
@@ -63,8 +63,8 @@ export async function loader(args: RouteLoaderArgs) {
   let {params, context} = args;
 
   return defer({
-    weaverseData: await context.weaverse.loadPage(args),
-    // Other data...
+    weaverseData: await context.weaverse.loadPage(),
+    // More route's loader data...
   });
 }
 ```

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -1,7 +1,14 @@
 import clsx from 'clsx';
 import {useRef} from 'react';
 import {useScroll} from 'react-use';
-import {flattenConnection, CartForm, Image, Money} from '@shopify/hydrogen';
+import {
+  flattenConnection,
+  CartForm,
+  Image,
+  Money,
+  useOptimisticData,
+  OptimisticInput,
+} from '@shopify/hydrogen';
 import type {
   Cart as CartType,
   CartCost,
@@ -229,15 +236,30 @@ function CartSummary({
   );
 }
 
+type OptimisticData = {
+  action?: string;
+  quantity?: number;
+};
+
 function CartLineItem({line}: {line: CartLine}) {
+  const optimisticData = useOptimisticData<OptimisticData>(line?.id);
+
   if (!line?.id) return null;
 
   const {id, quantity, merchandise} = line;
 
   if (typeof quantity === 'undefined' || !merchandise?.product) return null;
 
   return (
-    <li key={id} className="flex gap-4">
+    <li
+      key={id}
+      className="flex gap-4"
+      style={{
+        // Hide the line item if the optimistic data action is remove
+        // Do not remove the form from the DOM
+        display: optimisticData?.action === 'remove' ? 'none' : 'flex',
+      }}
+    >
       <div className="flex-shrink">
         {merchandise.image && (
           <Image
@@ -274,7 +296,7 @@ function CartLineItem({line}: {line: CartLine}) {
             <div className="flex justify-start text-copy">
               <CartLineQuantityAdjust line={line} />
             </div>
-            <ItemRemoveButton lineIds={[id]} />
+            <ItemRemoveButton lineId={id} />
           </div>
         </div>
         <Text>
@@ -285,13 +307,13 @@ function CartLineItem({line}: {line: CartLine}) {
   );
 }
 
-function ItemRemoveButton({lineIds}: {lineIds: CartLine['id'][]}) {
+function ItemRemoveButton({lineId}: {lineId: CartLine['id']}) {
   return (
     <CartForm
       route="/cart"
       action={CartForm.ACTIONS.LinesRemove}
       inputs={{
-        lineIds,
+        lineIds: [lineId],
       }}
     >
       <button
@@ -301,20 +323,27 @@ function ItemRemoveButton({lineIds}: {lineIds: CartLine['id'][]}) {
         <span className="sr-only">Remove</span>
         <IconRemove aria-hidden="true" />
       </button>
+      <OptimisticInput id={lineId} data={{action: 'remove'}} />
     </CartForm>
   );
 }
 
 function CartLineQuantityAdjust({line}: {line: CartLine}) {
+  const optimisticId = line?.id;
+  const optimisticData = useOptimisticData<OptimisticData>(optimisticId);
+
   if (!line || typeof line?.quantity === 'undefined') return null;
-  const {id: lineId, quantity} = line;
-  const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
-  const nextQuantity = Number((quantity + 1).toFixed(0));
+
+  const optimisticQuantity = optimisticData?.quantity || line.quantity;
+
+  const {id: lineId} = line;
+  const prevQuantity = Number(Math.max(0, optimisticQuantity - 1).toFixed(0));
+  const nextQuantity = Number((optimisticQuantity + 1).toFixed(0));
 
   return (
     <>
       <label htmlFor={`quantity-${lineId}`} className="sr-only">
-        Quantity, {quantity}
+        Quantity, {optimisticQuantity}
       </label>
       <div className="flex items-center border rounded">
         <UpdateCartButton lines={[{id: lineId, quantity: prevQuantity}]}>
@@ -323,14 +352,18 @@ function CartLineQuantityAdjust({line}: {line: CartLine}) {
             aria-label="Decrease quantity"
             className="w-10 h-10 transition text-primary/50 hover:text-primary disabled:text-primary/10"
             value={prevQuantity}
-            disabled={quantity <= 1}
+            disabled={optimisticQuantity <= 1}
           >
             <span>&#8722;</span>
+            <OptimisticInput
+              id={optimisticId}
+              data={{quantity: prevQuantity}}
+            />
           </button>
         </UpdateCartButton>
 
         <div className="px-2 text-center" data-test="item-quantity">
-          {quantity}
+          {optimisticQuantity}
         </div>
 
         <UpdateCartButton lines={[{id: lineId, quantity: nextQuantity}]}>
@@ -341,6 +374,10 @@ function CartLineQuantityAdjust({line}: {line: CartLine}) {
             aria-label="Increase quantity"
           >
             <span>&#43;</span>
+            <OptimisticInput
+              id={optimisticId}
+              data={{quantity: nextQuantity}}
+            />
           </button>
         </UpdateCartButton>
       </div>

diff --git a/app/data/fragments.ts b/app/data/fragments.ts
@@ -37,7 +37,7 @@ export const MEDIA_FRAGMENT = `#graphql
   }
 `;
 
-export let PRODUCT_CARD_FRAGMENT = `#graphql
+export const PRODUCT_CARD_FRAGMENT = `#graphql
   fragment ProductCard on Product {
     id
     title

diff --git a/app/data/queries.ts b/app/data/queries.ts
@@ -423,21 +423,6 @@ export let ARTICLE_QUERY = `#graphql
   }
 `;
 
-export const PAGE_QUERY = `#graphql
-  query PageDetails($language: LanguageCode, $handle: String!)
-  @inContext(language: $language) {
-    page(handle: $handle) {
-      id
-      title
-      body
-      seo {
-        description
-        title
-      }
-    }
-  }
-`;
-
 export let ALL_PRODUCTS_QUERY = `#graphql
   query AllProducts(
     $country: CountryCode

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,35 +1,36 @@
 import {
+  defer,
+  type LinksFunction,
+  type LoaderArgs,
+  type AppLoadContext,
+} from '@shopify/remix-oxygen';
+import {
+  isRouteErrorResponse,
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
+  LiveReload,
   ScrollRestoration,
-  isRouteErrorResponse,
   useLoaderData,
   useMatches,
   useRouteError,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import {Seo, ShopifySalesChannel, useNonce} from '@shopify/hydrogen';
-import {
-  defer,
-  type AppLoadContext,
-  type LinksFunction,
-} from '@shopify/remix-oxygen';
+import {ShopifySalesChannel, Seo, useNonce} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 
 import {Layout} from '~/components';
 import {seoPayload} from '~/lib/seo.server';
 
 import favicon from '../public/favicon.svg';
 
-import {RouteLoaderArgs, withWeaverse} from '@weaverse/hydrogen';
+import {withWeaverse} from '@weaverse/hydrogen';
 import {GenericError} from './components/GenericError';
 import {NotFound} from './components/NotFound';
-import {useAnalytics} from './hooks/useAnalytics';
-import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import styles from './styles/app.css';
+import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
+import {useAnalytics} from './hooks/useAnalytics';
 import {GlobalStyle} from './weaverse/style';
 
 // This is important to avoid re-fetching root queries on sub-navigations
@@ -66,7 +67,7 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export async function loader({request, context}: RouteLoaderArgs) {
+export async function loader({request, context}: LoaderArgs) {
   const {session, storefront, cart} = context;
   const [customerAccessToken, layout] = await Promise.all([
     session.get('customerAccessToken'),
@@ -121,6 +122,7 @@ function App() {
     </html>
   );
 }
+
 export default withWeaverse(App);
 
 export function ErrorBoundary({error}: {error: Error}) {

diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -26,7 +26,7 @@ export async function loader(args: RouteLoaderArgs) {
 
   return defer({
     shop,
-    weaverseData: await context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(),
     analytics: {
       pageType: AnalyticsPageType.home,
     },

diff --git a/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx b/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx
@@ -37,8 +37,9 @@ export async function loader(args: RouteLoaderArgs) {
   }
 
   const article = blog.articleByHandle;
-  const relatedArticles = blog.articles.nodes
-  .filter(art => art?.handle !== params?.articleHandle);
+  const relatedArticles = blog.articles.nodes.filter(
+    (art) => art?.handle !== params?.articleHandle,
+  );
 
   const formattedDate = new Intl.DateTimeFormat(`${language}-${country}`, {
     year: 'numeric',
@@ -56,7 +57,7 @@ export async function loader(args: RouteLoaderArgs) {
     relatedArticles,
     formattedDate,
     seo,
-    weaverseData: await context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(),
   });
 }
 

diff --git a/app/routes/($locale).blogs.$blogHandle._index.tsx b/app/routes/($locale).blogs.$blogHandle._index.tsx
@@ -47,7 +47,7 @@ export const loader = async (args: RouteLoaderArgs) => {
     blog,
     articles,
     seo,
-    weaverseData: await context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(),
   });
 };
 

diff --git a/app/routes/($locale).collections.$collectionHandle.tsx b/app/routes/($locale).collections.$collectionHandle.tsx
@@ -119,7 +119,7 @@ export async function loader(args: RouteLoaderArgs) {
       resourceId: collection.id,
     },
     seo,
-    weaverseData: await context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(),
   });
 }
 

diff --git a/app/routes/($locale).collections._index.tsx b/app/routes/($locale).collections._index.tsx
@@ -1,6 +1,5 @@
 import {getPaginationVariables} from '@shopify/hydrogen';
-import {json} from '@shopify/remix-oxygen';
-import {RouteLoaderArgs} from '@weaverse/hydrogen';
+import {json, LoaderArgs} from '@shopify/remix-oxygen';
 import {routeHeaders} from '~/data/cache';
 import {COLLECTIONS_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
@@ -10,7 +9,7 @@ const PAGINATION_SIZE = 4;
 
 export const headers = routeHeaders;
 
-export const loader = async (args: RouteLoaderArgs) => {
+export const loader = async (args: LoaderArgs) => {
   let {
     request,
     context: {storefront, weaverse},
@@ -32,7 +31,7 @@ export const loader = async (args: RouteLoaderArgs) => {
   return json({
     collections,
     seo,
-    weaverseData: await weaverse.loadPage(args),
+    weaverseData: await weaverse.loadPage(),
   });
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ export const MEDIA_FRAGMENT = `#graphql @@
       }
     `;
-    export let PRODUCT_CARD_FRAGMENT = `#graphql
+    export const PRODUCT_CARD_FRAGMENT = `#graphql
       fragment ProductCard on Product {
         id
         title
@@ Expand Down @@