chore: refactor

.eslintignore

@@ -3,3 +3,5 @@ node_modules
 bin
 *.d.ts
 dist
+/customer-accountapi.generated.d.ts
+/storefrontapi.generated.d.ts

.eslintrc.js

@@ -1,6 +1,3 @@
-/**
- * @type {import("@types/eslint").Linter.BaseConfig}
- */
 module.exports = {
   extends: ['@remix-run/eslint-config'],
   rules: {
@@ -10,8 +7,6 @@ module.exports = {
     'no-useless-escape': 'off',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'no-case-declarations': 'off',
-    // TODO: Remove jest plugin from hydrogen/eslint-plugin
-    'jest/no-deprecated-functions': 'off',
     'eslint-comments/disable-enable-pair': 'off',
     'prefer-const': 'off',
     'no-console': 'off',

CHANGELOG.md

@@ -1,5 +1,13 @@
 # @weaverse/pilot
 
+## 2.5.3
+
+### Patch Changes
+
+- 3a975da: Adding url input type
+- Updated dependencies [3a975da]
+  - @weaverse/hydrogen@3.1.1
+
 ## 2.5.2
 
 ### Patch Changes

app/components/CountrySelector.tsx

@@ -1,4 +1,4 @@
-import {useFetcher, useLocation, useMatches} from '@remix-run/react';
+import {useFetcher, useLocation} from '@remix-run/react';
 import {useCallback, useEffect, useRef} from 'react';
 import {useInView} from 'react-intersection-observer';
 import clsx from 'clsx';

app/components/FeaturedCollections.tsx

@@ -11,12 +11,15 @@ type FeaturedCollectionsProps = HomepageFeaturedCollectionsQuery & {
 export function FeaturedCollections({
   collections,
   title = 'Collections',
+  count,
   ...props
 }: FeaturedCollectionsProps) {
   const haveCollections = collections?.nodes?.length > 0;
   if (!haveCollections) return null;
 
-  const collectionsWithImage = collections.nodes.filter((item) => item.image);
+  const collectionsWithImage = collections.nodes
+    .filter((item) => item.image)
+    .slice(0, count);
 
   return (
     <Section {...props} heading={title}>

app/components/FeaturedSection.tsx

@@ -13,6 +13,7 @@ export function FeaturedSection() {
 
   useEffect(() => {
     load(path);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [path]);
 
   if (!data) return null;

app/components/Link.tsx

@@ -1,12 +1,13 @@
 import {
   Link as RemixLink,
   NavLink as RemixNavLink,
-  type NavLinkProps as RemixNavLinkProps,
   type LinkProps as RemixLinkProps,
+  type NavLinkProps as RemixNavLinkProps,
 } from '@remix-run/react';
 
-import {useRootLoaderData} from '~/root';
 import {useThemeSettings} from '@weaverse/hydrogen';
+import {forwardRef} from 'react';
+import {useRootLoaderData} from '~/root';
 
 type LinkProps = Omit<RemixLinkProps, 'className'> & {
   className?: RemixNavLinkProps['className'] | RemixLinkProps['className'];
@@ -27,33 +28,41 @@ type LinkProps = Omit<RemixLinkProps, 'className'> & {
  *
  * Ultimately, it is up to you to decide how to implement this behavior.
  */
-export function Link(props: LinkProps) {
-  const {to, className, ...resOfProps} = props;
-  const rootData = useRootLoaderData();
-  let {enableViewTransition} = useThemeSettings();
-  const selectedLocale = rootData?.selectedLocale;
+export let Link = forwardRef(
+  (props: LinkProps, ref: React.Ref<HTMLAnchorElement>) => {
+    let {to, className, ...resOfProps} = props;
+    let rootData = useRootLoaderData();
+    let {enableViewTransition} = useThemeSettings();
+    let selectedLocale = rootData?.selectedLocale;
 
-  let toWithLocale = to;
+    let toWithLocale = to;
 
-  if (typeof toWithLocale === 'string' && selectedLocale?.pathPrefix) {
-    if (!toWithLocale.toLowerCase().startsWith(selectedLocale.pathPrefix)) {
-      toWithLocale = `${selectedLocale.pathPrefix}${to}`;
+    if (typeof toWithLocale === 'string' && selectedLocale?.pathPrefix) {
+      if (!toWithLocale.toLowerCase().startsWith(selectedLocale.pathPrefix)) {
+        toWithLocale = `${selectedLocale.pathPrefix}${to}`;
+      }
+    }
+
+    if (typeof className === 'function') {
+      return (
+        <RemixNavLink
+          ref={ref}
+          unstable_viewTransition={enableViewTransition}
+          to={toWithLocale}
+          className={className}
+          {...resOfProps}
+        />
+      );
     }
-  }
 
-  if (typeof className === 'function') {
     return (
-      <RemixNavLink
+      <RemixLink
+        ref={ref}
         unstable_viewTransition={enableViewTransition}
         to={toWithLocale}
         className={className}
-        {...resOfProps} />
+        {...resOfProps}
+      />
     );
-  }
-
-  return <RemixLink
-    unstable_viewTransition={enableViewTransition}
-    to={toWithLocale}
-    className={className}
-    {...resOfProps} />;
-}
+  },
+);

app/components/product-form/product-media.tsx

@@ -1,7 +1,7 @@
 import {Image} from '@shopify/hydrogen';
 import clsx from 'clsx';
 import {useKeenSlider} from 'keen-slider/react';
-import {useCallback, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import type {MediaFragment} from 'storefrontapi.generated';
 
 interface ProductMediaProps {
@@ -39,12 +39,12 @@ export function ProductMedia(props: ProductMediaProps) {
     },
   };
 
-  let [activeInd, setAcitveInd] = useState(0);
-  const [sliderRef, instanceRef] = useKeenSlider({
+  let [activeInd, setActiveInd] = useState(0);
+  let [sliderRef, instanceRef] = useKeenSlider({
     ...slideOptions,
-    slideChanged(slider) {
+    slideChanged: (slider) => {
       let pos = slider.track.details.rel;
-      setAcitveInd(pos);
+      setActiveInd(pos);
       let maxThumbnailIndex =
         thumbnailInstance.current?.track.details.maxIdx || 0;
       let thumbnailNext = Math.min(
@@ -54,19 +54,18 @@ export function ProductMedia(props: ProductMediaProps) {
       thumbnailInstance.current?.moveToIdx(thumbnailNext);
     },
   });
-  let moveToIdx = useCallback(
-    (idx: number) => {
-      setAcitveInd(idx);
-      if (instanceRef.current) {
-        instanceRef.current.moveToIdx(idx);
-      }
-    },
-    [instanceRef],
-  );
-  const [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
-  let handleClickThumbnail = (idx: number) => {
+
+  function moveToIdx(idx: number) {
+    setActiveInd(idx);
+    if (instanceRef.current) {
+      instanceRef.current.moveToIdx(idx);
+    }
+  }
+
+  let [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
+  function handleClickThumbnail(idx: number) {
     moveToIdx(idx);
-  };
+  }
 
   useEffect(() => {
     // instanceRef.current?.update(slideOptions);
@@ -77,14 +76,10 @@ export function ProductMedia(props: ProductMediaProps) {
     });
     moveToIdx(selectedInd);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedVariant?.id, moveToIdx]);
+  }, [selectedVariant?.id]);
+
   return (
-    <div
-      className="grid vt-product-image"
-      style={{
-        gap: spacing,
-      }}
-    >
+    <div className="grid vt-product-image" style={{gap: spacing}}>
       <div ref={sliderRef} className="keen-slider">
         {media.map((med, i) => {
           let image =

app/lib/utils.ts

@@ -1,4 +1,4 @@
-import {useLocation, useMatches} from '@remix-run/react';
+import {useLocation} from '@remix-run/react';
 import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
 import type {FulfillmentStatus} from '@shopify/hydrogen/customer-account-api-types';
 import typographicBase from 'typographic-base';

app/root.tsx

@@ -151,7 +151,6 @@ function App() {
 export default withWeaverse(App);
 
 const ErrorBoundaryComponent = ({error}: {error: Error}) => {
-  const nonce = useNonce();
   const routeError = useRouteError();
   const rootData = useRootLoaderData();
   const locale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
@@ -175,25 +174,25 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => {
         <Links />
       </head>
       <body className="font-sans">
-      {isRouteError ? (
-        <>
-          {routeError.status === 404 ? (
-            <NotFound type={pageType} />
-          ) : (
-            <GenericError
-              error={{message: `${routeError.status} ${routeError.data}`}}
-            />
-          )}
-        </>
-      ) : (
-        <GenericError
-          error={
-            error instanceof Error
-              ? error
-              : (routeError as Error) || undefined
-          }
-        />
-      )}
+        {isRouteError ? (
+          <>
+            {routeError.status === 404 ? (
+              <NotFound type={pageType} />
+            ) : (
+              <GenericError
+                error={{message: `${routeError.status} ${routeError.data}`}}
+              />
+            )}
+          </>
+        ) : (
+          <GenericError
+            error={
+              error instanceof Error
+                ? error
+                : (routeError as Error) || undefined
+            }
+          />
+        )}
         {/*<Layout*/}
         {/*  layout={rootData?.layout}*/}
         {/*  key={`${locale.language}-${locale.country}`}*/}

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

@@ -1,18 +1,18 @@
-import {WeaverseContent} from '~/weaverse';
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import type {LoadPageParams} from '@weaverse/hydrogen';
+import { WeaverseContent } from '~/weaverse';
+import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';
 
-export async function loader({context}: LoaderFunctionArgs) {
+export async function loader({ context }: LoaderFunctionArgs) {
   let weaverseData = await context.weaverse.loadPage({
     type: 'CUSTOM',
   });
+
   if (weaverseData?.page?.id && !weaverseData.page.id.includes('fallback')) {
     return {
       weaverseData,
     };
   }
   // If Weaverse Data not found, return 404
-  throw new Response(null, {status: 404});
+  throw new Response(null, { status: 404 });
 }
 
 export default function Component() {

app/routes/($locale)._index.tsx

@@ -1,31 +1,33 @@
-import {AnalyticsPageType} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {routeHeaders} from '~/data/cache';
-import {SHOP_QUERY} from '~/data/queries';
-import {seoPayload} from '~/lib/seo.server';
-import {WeaverseContent} from '~/weaverse';
-import type {LoadPageParams} from '@weaverse/hydrogen';
+import { AnalyticsPageType } from '@shopify/hydrogen';
+import { defer, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import { routeHeaders } from '~/data/cache';
+import { SHOP_QUERY } from '~/data/queries';
+import { seoPayload } from '~/lib/seo.server';
+import { WeaverseContent } from '~/weaverse';
+import type { PageType } from '@weaverse/hydrogen';
 export const headers = routeHeaders;
 
 export async function loader(args: LoaderFunctionArgs) {
-  let {params, context} = args;
-  let {pathPrefix} = context.storefront.i18n;
+  let { params, context } = args;
+  let { pathPrefix } = context.storefront.i18n;
   let locale = pathPrefix.slice(1);
-  let weaverseQuery: LoadPageParams = {
-    type: 'INDEX',
-  };
+  let type: PageType = 'INDEX';
 
   if (params.locale && params.locale.toLowerCase() !== locale) {
     // Update for Weaverse: if it not locale, it probably is a custom page handle
-    weaverseQuery.type = 'CUSTOM';
+    type = 'CUSTOM';
+  }
+  let weaverseData = await context.weaverse.loadPage({ type })
+  if (!weaverseData?.page?.id || weaverseData.page.id.includes('fallback')) {
+    throw new Response(null, { status: 404 });
   }
 
-  let {shop} = await context.storefront.query(SHOP_QUERY);
+  let { shop } = await context.storefront.query(SHOP_QUERY);
   let seo = seoPayload.home();
 
   return defer({
     shop,
-    weaverseData: await context.weaverse.loadPage(weaverseQuery),
+    weaverseData,
     analytics: {
       pageType: AnalyticsPageType.home,
     },

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

@@ -1,15 +1,10 @@
-import {
-  json,
-  redirect,
-  type ActionFunction,
-  type AppLoadContext,
-} from '@shopify/remix-oxygen';
+import {type ActionFunction, json, redirect} from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
+  useNavigation,
   useOutletContext,
   useParams,
-  useNavigation,
 } from '@remix-run/react';
 import {flattenConnection} from '@shopify/hydrogen';
 import type {CustomerAddressInput} from '@shopify/hydrogen/customer-account-api-types';
@@ -18,9 +13,9 @@ import invariant from 'tiny-invariant';
 import {Button, Text} from '~/components';
 import {getInputStyleClasses} from '~/lib/utils';
 import {
-  UPDATE_ADDRESS_MUTATION,
-  DELETE_ADDRESS_MUTATION,
   CREATE_ADDRESS_MUTATION,
+  DELETE_ADDRESS_MUTATION,
+  UPDATE_ADDRESS_MUTATION,
 } from '~/graphql/customer-account/CustomerAddressMutations';
 
 import {doLogout} from './($locale).account_.logout';