From 8bf079654471aa8b08918fdcaffe32a1c581b980 Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 18:01:57 -0600 Subject: [PATCH 1/7] update tsconfig for ES2022, remove circular deps --- .eslintrc.cjs | 3 + app/components/AccountAddressBook.tsx | 6 +- app/components/AddToCartButton.tsx | 4 +- app/components/Button.tsx | 2 +- app/components/Cart.tsx | 24 ++++---- app/components/CountrySelector.tsx | 10 ++-- app/components/Drawer.tsx | 6 +- app/components/FeaturedCollections.tsx | 4 +- app/components/FeaturedProducts.tsx | 8 ++- app/components/FeaturedSection.tsx | 2 +- app/components/Footer.tsx | 4 +- app/components/Header.tsx | 2 +- app/components/Hero.tsx | 9 +-- app/components/Layout.tsx | 19 ------- app/components/Modal.tsx | 3 +- app/components/ModuleDetails.tsx | 6 +- app/components/ModuleLegendPanel.tsx | 2 +- app/components/OrderCard.tsx | 3 +- app/components/Pagination.tsx | 4 +- app/components/ProductCard.tsx | 12 ++-- app/components/ProductGrid.tsx | 9 ++- app/components/ProductSwimlane.tsx | 3 +- app/components/SortFilter.tsx | 10 ++-- app/components/index.ts | 27 --------- app/controllers/get_all_dealers.ts | 2 +- app/controllers/get_all_modules.ts | 8 +-- app/controllers/get_all_patches.ts | 14 ++--- app/controllers/get_module_details.ts | 18 +++--- app/entry.server.tsx | 2 +- app/lib/markdown.ts | 2 +- app/lib/session.server.ts | 2 +- app/lib/utils.ts | 4 +- app/root.tsx | 30 +++++----- ...ng).$shopid.orders.$token.authenticate.tsx | 3 +- app/routes/($lang)._index.tsx | 24 ++++---- ....account.activate.$id.$activationToken.tsx | 4 +- app/routes/($lang).account.address.$id.tsx | 7 ++- app/routes/($lang).account.edit.tsx | 7 ++- app/routes/($lang).account.login.tsx | 16 +++--- app/routes/($lang).account.logout.ts | 4 +- app/routes/($lang).account.orders.$id.tsx | 20 +++---- app/routes/($lang).account.recover.tsx | 6 +- app/routes/($lang).account.register.tsx | 8 +-- .../($lang).account.reset.$id.$resetToken.tsx | 4 +- app/routes/($lang).account.tsx | 27 ++++----- app/routes/($lang).api.products.tsx | 2 +- app/routes/($lang).cart.tsx | 21 +++---- .../($lang).collections.$collectionHandle.tsx | 21 +++---- app/routes/($lang).collections._index.tsx | 25 ++++----- app/routes/($lang).dealers.tsx | 8 +-- app/routes/($lang).discount.$code.tsx | 2 +- app/routes/($lang).featured-products.tsx | 2 +- app/routes/($lang).journal.$journalHandle.tsx | 12 ++-- app/routes/($lang).journal._index.tsx | 8 ++- app/routes/($lang).modules.tsx | 8 +-- app/routes/($lang).pages.$pageHandle.tsx | 10 ++-- app/routes/($lang).patches._index.tsx | 8 +-- app/routes/($lang).policies.$policyHandle.tsx | 17 +++--- app/routes/($lang).policies._index.tsx | 11 ++-- .../($lang).products.$productHandle.tsx | 56 ++++++------------- app/routes/($lang).products._index.tsx | 28 ++++------ app/routes/($lang).search.tsx | 29 ++++------ app/routes/[sitemap.xml].tsx | 2 +- app/views/module.ts | 4 +- app/views/patch.ts | 2 +- package.json | 1 + server.ts | 6 +- tsconfig.json | 3 +- vite.config.ts | 5 +- yarn.lock | 3 +- 70 files changed, 310 insertions(+), 378 deletions(-) delete mode 100644 app/components/index.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ea01235..1e32a5f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -6,6 +6,7 @@ module.exports = { '@remix-run/eslint-config', 'plugin:hydrogen/recommended', 'plugin:hydrogen/typescript', + 'plugin:import/recommended', ], rules: { '@typescript-eslint/ban-ts-comment': 'off', @@ -15,5 +16,7 @@ module.exports = { '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', 'no-case-declarations': 'off', 'no-console': ['warn', {allow: ['warn', 'error']}], + 'import/order': ['warn', {alphabetize: {order: 'asc'}}], + 'no-unused-vars': 'warn', }, }; diff --git a/app/components/AccountAddressBook.tsx b/app/components/AccountAddressBook.tsx index 4d07b4b..6c05a6c 100644 --- a/app/components/AccountAddressBook.tsx +++ b/app/components/AccountAddressBook.tsx @@ -3,7 +3,9 @@ import type { Customer, MailingAddress, } from '@shopify/hydrogen/storefront-api-types'; -import {Button, Link, Text} from '~/components'; +import {Link} from './Link'; +import {Button} from '~/components/Button'; +import {Text} from '~/components/Text'; export function AccountAddressBook({ customer, @@ -18,7 +20,7 @@ export function AccountAddressBook({

Address Book

{!addresses?.length && ( - + You haven't saved any addresses yet. )} diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx index 12fface..72b582c 100644 --- a/app/components/AddToCartButton.tsx +++ b/app/components/AddToCartButton.tsx @@ -1,6 +1,6 @@ -import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types'; import {useFetcher, useMatches, useNavigation} from '@remix-run/react'; -import {Button} from '~/components'; +import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types'; +import {Button} from '~/components/Button'; import {CartAction} from '~/lib/type'; export function AddToCartButton({ diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 6c3311e..e1a8402 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -1,5 +1,5 @@ -import {forwardRef} from 'react'; import {Link} from '@remix-run/react'; +import {forwardRef} from 'react'; export const Button = forwardRef( ( diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx index 843d986..dc9a117 100644 --- a/app/components/Cart.tsx +++ b/app/components/Cart.tsx @@ -1,24 +1,22 @@ -import clsx from 'clsx'; -import {useRef} from 'react'; -import {useScroll} from 'react-use'; +import {useFetcher} from '@remix-run/react'; import {flattenConnection, Image, Money} from '@shopify/hydrogen'; -import { - Button, - Heading, - IconRemove, - Text, - Link, - FeaturedProducts, -} from '~/components'; -import {getInputStyleClasses} from '~/lib/utils'; import type { Cart as CartType, CartCost, CartLine, CartLineUpdateInput, } from '@shopify/hydrogen/storefront-api-types'; -import {useFetcher} from '@remix-run/react'; +import clsx from 'clsx'; +import {useRef} from 'react'; +import {useScroll} from 'react-use'; +import {Button} from '~/components/Button'; +import {FeaturedProducts} from '~/components/FeaturedProducts'; +import {IconRemove} from '~/components/Icon'; +import {Link} from '~/components/Link'; +import {Heading, Text} from '~/components/Text'; + import {CartAction} from '~/lib/type'; +import {getInputStyleClasses} from '~/lib/utils'; type Layouts = 'page' | 'drawer'; diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx index d1321de..ef2d8f7 100644 --- a/app/components/CountrySelector.tsx +++ b/app/components/CountrySelector.tsx @@ -1,13 +1,15 @@ import {useFetcher, useLocation, useMatches} from '@remix-run/react'; -import {Heading, Button, IconCheck, Text} from '~/components'; +import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types'; +import clsx from 'clsx'; import {useCallback, useEffect, useRef} from 'react'; import {useInView} from 'react-intersection-observer'; +import {Button} from '~/components/Button'; +import {IconCheck} from '~/components/Icon'; +import IconPolicy from '~/components/IconPolicy'; +import {Text} from '~/components/Text'; import type {Localizations, Locale} from '~/lib/type'; import {CartAction} from '~/lib/type'; import {DEFAULT_LOCALE} from '~/lib/utils'; -import clsx from 'clsx'; -import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types'; -import IconPolicy from '~/components/IconPolicy'; export function CountrySelector() { const [root] = useMatches(); diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx index 57fbfaa..e982a80 100644 --- a/app/components/Drawer.tsx +++ b/app/components/Drawer.tsx @@ -1,7 +1,7 @@ -import {Fragment, useState} from 'react'; import {Dialog, Transition} from '@headlessui/react'; - -import {Heading, IconClose} from '~/components'; +import {Fragment, useState} from 'react'; +import {IconClose} from '~/components/Icon'; +import {Heading} from '~/components/Text'; /** * Drawer component that opens on user click. diff --git a/app/components/FeaturedCollections.tsx b/app/components/FeaturedCollections.tsx index 8e71a66..b783e85 100644 --- a/app/components/FeaturedCollections.tsx +++ b/app/components/FeaturedCollections.tsx @@ -1,6 +1,8 @@ import {Image} from '@shopify/hydrogen'; import type {Collection} from '@shopify/hydrogen/storefront-api-types'; -import {Heading, Section, Grid, Link} from '~/components'; +import {Grid} from '~/components/Grid'; +import {Link} from '~/components/Link'; +import {Heading, Section} from '~/components/Text'; export function FeaturedCollections({ collections, diff --git a/app/components/FeaturedProducts.tsx b/app/components/FeaturedProducts.tsx index 9d082f4..1ae5557 100644 --- a/app/components/FeaturedProducts.tsx +++ b/app/components/FeaturedProducts.tsx @@ -1,11 +1,13 @@ -import clsx from 'clsx'; -import {useEffect, useId, useMemo} from 'react'; import {useFetcher} from '@remix-run/react'; -import {Heading, ProductCard, Skeleton, Text} from '~/components'; import type { Product, ProductSortKeys, } from '@shopify/hydrogen/storefront-api-types'; +import clsx from 'clsx'; +import {useEffect, useId, useMemo} from 'react'; +import {ProductCard} from '~/components/ProductCard'; +import {Skeleton} from '~/components/Skeleton'; +import {Heading, Text} from '~/components/Text'; import {usePrefixPathWithLocale} from '~/lib/utils'; interface FeaturedProductsProps { diff --git a/app/components/FeaturedSection.tsx b/app/components/FeaturedSection.tsx index 814753d..5a889b8 100644 --- a/app/components/FeaturedSection.tsx +++ b/app/components/FeaturedSection.tsx @@ -1,6 +1,6 @@ -import {useEffect} from 'react'; import {useFetcher} from '@remix-run/react'; import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types'; +import {useEffect} from 'react'; import {FeaturedCollections} from './FeaturedCollections'; import {ProductSwimlane} from './ProductSwimlane'; import {usePrefixPathWithLocale} from '~/lib/utils'; diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 2bbfe8f..38b7fdb 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -1,4 +1,3 @@ -import Logo from './Logo'; import { FaInstagram, FaDiscord, @@ -6,8 +5,9 @@ import { FaYoutube, FaFacebook, } from 'react-icons/fa'; -import {CountrySelector} from './CountrySelector'; import MailchimpSubscribe from 'react-mailchimp-subscribe'; +import {CountrySelector} from './CountrySelector'; +import Logo from './Logo'; export function Footer() { const iconSize = 24; diff --git a/app/components/Header.tsx b/app/components/Header.tsx index ff79ecd..fcb9f8c 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,4 +1,3 @@ -import Logo from './Logo'; import { FaList, FaShoppingCart, @@ -11,6 +10,7 @@ import { FaFacebook, } from 'react-icons/fa'; import {MdForum} from 'react-icons/md'; +import Logo from './Logo'; export function Header({ cartCount = 13, diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 14440e6..a01a1dc 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -1,5 +1,3 @@ -import clsx from 'clsx'; -import type {SerializeFrom} from '@shopify/remix-oxygen'; import {MediaFile} from '@shopify/hydrogen'; import type { MediaImage, @@ -7,7 +5,10 @@ import type { Metafield, Video as MediaVideo, } from '@shopify/hydrogen/storefront-api-types'; -import {Heading, Text, Link} from '~/components'; +import type {SerializeFrom} from '@shopify/remix-oxygen'; +import clsx from 'clsx'; +import {Link} from '~/components/Link'; +import {Heading, Text} from '~/components/Text'; export interface CollectionHero { byline: Metafield; @@ -34,7 +35,7 @@ export function Hero({ spread, spreadSecondary, top, -}: CollectionHero) { +}: SerializeFrom) { return (
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx index da951f8..d0f7d45 100644 --- a/app/components/Layout.tsx +++ b/app/components/Layout.tsx @@ -3,30 +3,11 @@ // type EnhancedMenuItem, // useIsHomePath, // } from '~/lib/utils'; -import { - // Drawer, - // useDrawer, - // Text, - // Input, - // IconLogin, - // IconAccount, - // IconBag, - // IconSearch, - // Heading, - // IconMenu, - // IconCaret, - // Section, - // CountrySelector, - Cart, - CartLoading, - // Link, -} from '~/components'; import {useParams, Form, Await, useMatches} from '@remix-run/react'; // import { useWindowScroll } from 'react-use'; // import { Disclosure } from '@headlessui/react'; import {Suspense, useEffect, useMemo} from 'react'; // import { useIsHydrated } from '~/hooks/useIsHydrated'; -import {useCartFetchers} from '~/hooks/useCartFetchers'; // import logo from '../../public/logo.svg'; // Tell webpack this JS file uses this image // import logodark from '../../public/logo-dark.svg'; // Tell webpack this JS file uses this image // import FooterMenu from './FooterMenu' diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index 85f50e3..48e8425 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -1,4 +1,5 @@ -import {IconClose, Link} from '~/components'; +import {IconClose} from '~/components/Icon'; +import {Link} from '~/components/Link'; export function Modal({ children, diff --git a/app/components/ModuleDetails.tsx b/app/components/ModuleDetails.tsx index a2e9c60..9e7e198 100644 --- a/app/components/ModuleDetails.tsx +++ b/app/components/ModuleDetails.tsx @@ -1,15 +1,15 @@ import {useState} from 'react'; -import type {ModuleView} from '~/views/module'; -import {ModuleLegendPanel} from './ModuleLegendPanel'; -import {FaArrowRight} from 'react-icons/fa'; import {BsFillArrowRightSquareFill} from 'react-icons/bs'; +import {FaArrowRight} from 'react-icons/fa'; import { TbRectangleFilled, TbTriangleFilled, TbTriangleInvertedFilled, TbCircleFilled, } from 'react-icons/tb'; +import {ModuleLegendPanel} from './ModuleLegendPanel'; import {AddToCartButton} from '.'; +import type {ModuleView} from '~/views/module'; export function ModuleDetails({ children, diff --git a/app/components/ModuleLegendPanel.tsx b/app/components/ModuleLegendPanel.tsx index b835eb8..c4015a4 100644 --- a/app/components/ModuleLegendPanel.tsx +++ b/app/components/ModuleLegendPanel.tsx @@ -1,5 +1,5 @@ -import type {ModuleView} from '~/views/module'; import {LegendRefDes} from './LegendRefDes'; +import type {ModuleView} from '~/views/module'; export function ModuleLegendPanel({ moduleData, diff --git a/app/components/OrderCard.tsx b/app/components/OrderCard.tsx index cdac0a5..d880c1f 100644 --- a/app/components/OrderCard.tsx +++ b/app/components/OrderCard.tsx @@ -1,6 +1,7 @@ import {flattenConnection, Image} from '@shopify/hydrogen'; import type {Order} from '@shopify/hydrogen/storefront-api-types'; -import {Heading, Text, Link} from '~/components'; +import {Link} from '~/components/Link'; +import {Heading, Text} from '~/components/Text'; import {statusMessage} from '~/lib/utils'; export function OrderCard({order}: {order: Order}) { diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx index 75341fb..ee5685f 100644 --- a/app/components/Pagination.tsx +++ b/app/components/Pagination.tsx @@ -1,12 +1,12 @@ -import {useEffect, useMemo, useState} from 'react'; +import {useNavigation, useLocation, useNavigate} from '@remix-run/react'; import type { Maybe, PageInfo, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; +import {useEffect, useMemo, useState} from 'react'; import {useInView, type IntersectionOptions} from 'react-intersection-observer'; -import {useNavigation, useLocation, useNavigate} from '@remix-run/react'; type Connection = { nodes: ProductConnection['nodes'] | any[]; diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx index 284492c..46b74be 100644 --- a/app/components/ProductCard.tsx +++ b/app/components/ProductCard.tsx @@ -1,11 +1,13 @@ -import {useState} from 'react'; -import clsx from 'clsx'; import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen'; import {flattenConnection, useMoney} from '@shopify/hydrogen'; -import {Text, Link, AddToCartButton} from '~/components'; -import {isDiscounted, isNewArrival} from '~/lib/utils'; -import {getProductPlaceholder} from '~/lib/placeholders'; import type {MoneyV2, Product} from '@shopify/hydrogen/storefront-api-types'; +import clsx from 'clsx'; +import {useState} from 'react'; +import {AddToCartButton} from '~/components/AddToCartButton'; +import {Link} from '~/components/Link'; +import {Text} from '~/components/Text'; +import {getProductPlaceholder} from '~/lib/placeholders'; +import {isDiscounted, isNewArrival} from '~/lib/utils'; export function ProductCardBackgroundSVG() { return ( diff --git a/app/components/ProductGrid.tsx b/app/components/ProductGrid.tsx index b9b2f7d..fc2f72a 100644 --- a/app/components/ProductGrid.tsx +++ b/app/components/ProductGrid.tsx @@ -1,8 +1,11 @@ -import {Button, Grid, ProductCard, Link} from '~/components'; -import {getImageLoadingPriority} from '~/lib/const'; -import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types'; import {useFetcher} from '@remix-run/react'; +import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types'; import {useEffect, useState} from 'react'; +import {Button} from '~/components/Button'; +import {Grid} from '~/components/Grid'; +import {Link} from '~/components/Link'; +import {ProductCard} from '~/components/ProductCard'; +import {getImageLoadingPriority} from '~/lib/const'; export function ProductGrid({ url, diff --git a/app/components/ProductSwimlane.tsx b/app/components/ProductSwimlane.tsx index bd295dd..f406a91 100644 --- a/app/components/ProductSwimlane.tsx +++ b/app/components/ProductSwimlane.tsx @@ -1,5 +1,6 @@ import type {Product} from '@shopify/hydrogen/storefront-api-types'; -import {ProductCard, Section} from '~/components'; +import {ProductCard} from '~/components/ProductCard'; +import {Section} from '~/components/Text'; const mockProducts = new Array(12).fill(''); diff --git a/app/components/SortFilter.tsx b/app/components/SortFilter.tsx index af6c4a3..3cb76d1 100644 --- a/app/components/SortFilter.tsx +++ b/app/components/SortFilter.tsx @@ -1,8 +1,4 @@ -import type {SyntheticEvent} from 'react'; -import {useMemo, useState} from 'react'; import {Menu, Disclosure} from '@headlessui/react'; - -import {Heading, IconFilters, IconCaret, IconXMark, Text} from '~/components'; import type {Location} from '@remix-run/react'; import { Link, @@ -10,13 +6,17 @@ import { useSearchParams, useNavigate, } from '@remix-run/react'; -import {useDebounce} from 'react-use'; import type { FilterType, Filter, Collection, } from '@shopify/hydrogen/storefront-api-types'; +import {useMemo, useState} from 'react'; +import type {SyntheticEvent} from 'react'; +import {useDebounce} from 'react-use'; +import {IconFilters, IconCaret, IconXMark} from '~/components/Icon'; +import {Heading, Text} from '~/components/Text'; export type AppliedFilter = { label: string; diff --git a/app/components/index.ts b/app/components/index.ts deleted file mode 100644 index 8a24f9c..0000000 --- a/app/components/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -export {Layout} from './Layout'; -export {Drawer, useDrawer} from './Drawer'; -export {Heading, Section, Text, PageHeader} from './Text'; -export {Input} from './Input'; -export {ProductGallery} from './ProductGallery'; -export {ProductCard} from './ProductCard'; -export {ProductSwimlane} from './ProductSwimlane'; -export {ProductGrid} from './ProductGrid'; -export {Skeleton} from './Skeleton'; -export {Button} from './Button'; -export {CountrySelector} from './CountrySelector'; -export {Cart} from './Cart'; -export {CartLoading} from './CartLoading'; -export {OrderCard} from './OrderCard'; -export {AccountDetails} from './AccountDetails'; -export {AccountAddressBook} from './AccountAddressBook'; -export {Modal} from './Modal'; -export {Link} from './Link'; -export {FeaturedCollections} from './FeaturedCollections'; -export {Hero} from './Hero'; -export {SortFilter} from './SortFilter'; -export {Grid} from './Grid'; -export {FeaturedProducts} from './FeaturedProducts'; -export {Pagination, getPaginationVariables, usePagination} from './Pagination'; -export {AddToCartButton} from './AddToCartButton'; -// Sue me -export * from './Icon'; diff --git a/app/controllers/get_all_dealers.ts b/app/controllers/get_all_dealers.ts index c0fa4ca..89ec821 100644 --- a/app/controllers/get_all_dealers.ts +++ b/app/controllers/get_all_dealers.ts @@ -1,5 +1,5 @@ -import {getDataCollection} from '~/lib/db.server'; import type {AppLoadContext} from '@shopify/remix-oxygen'; +import {getDataCollection} from '~/lib/db.server'; import type {DealerInterface} from '~/models/dealer'; import type {DealerView} from '~/views/dealer'; diff --git a/app/controllers/get_all_modules.ts b/app/controllers/get_all_modules.ts index 4581579..7ab5b8c 100644 --- a/app/controllers/get_all_modules.ts +++ b/app/controllers/get_all_modules.ts @@ -1,8 +1,8 @@ -import type {ModuleView} from '~/views/module'; -import type {ModuleInterface} from '~/models/module'; -import type {CompanyInterface} from '~/models/company'; -import {getDataCollection} from '~/lib/db.server'; import type {AppLoadContext} from '@shopify/remix-oxygen'; +import {getDataCollection} from '~/lib/db.server'; +import type {CompanyInterface} from '~/models/company'; +import type {ModuleInterface} from '~/models/module'; +import type {ModuleView} from '~/views/module'; export async function getAllModules(context: AppLoadContext) { const module_datas = (await getDataCollection(context, 'Module', [ diff --git a/app/controllers/get_all_patches.ts b/app/controllers/get_all_patches.ts index a3bc624..ce77ee2 100644 --- a/app/controllers/get_all_patches.ts +++ b/app/controllers/get_all_patches.ts @@ -1,12 +1,12 @@ -import type {PatchView} from '~/views/patch'; -import type {PatchInterface} from '~/models/patch'; -import type {ArtistInterface} from '~/models/artist'; -import {getDataCollection} from '~/lib/db.server'; import type {AppLoadContext} from '@shopify/remix-oxygen'; -import type {VideoInterface} from '~/models/video'; -import type {PatchVideoInterface} from '~/models/patch_video'; -import type {PatchModuleInterface} from '~/models/patch_module'; +import {getDataCollection} from '~/lib/db.server'; +import type {ArtistInterface} from '~/models/artist'; import type {ModuleInterface} from '~/models/module'; +import type {PatchInterface} from '~/models/patch'; +import type {PatchModuleInterface} from '~/models/patch_module'; +import type {PatchVideoInterface} from '~/models/patch_video'; +import type {VideoInterface} from '~/models/video'; +import type {PatchView} from '~/views/patch'; export async function getAllPatches(context: AppLoadContext) { const patch_datas = (await getDataCollection( diff --git a/app/controllers/get_module_details.ts b/app/controllers/get_module_details.ts index eceb34d..5595388 100644 --- a/app/controllers/get_module_details.ts +++ b/app/controllers/get_module_details.ts @@ -1,17 +1,17 @@ -import type {ModuleView} from '~/views/module'; +import type {AppLoadContext} from '@shopify/remix-oxygen'; +import {getDataCollection, getDataDocument} from '~/lib/db.server'; +import type {AssetInterface} from '~/models/asset'; +import type {CompanyInterface} from '~/models/company'; import type {ModuleInterface} from '~/models/module'; -import type {ModuleControlInterface} from '~/models/module_control'; +import type {ModuleAssetInterface} from '~/models/module_asset'; import type {ModuleConnectorInterface} from '~/models/module_connector'; +import type {ModuleControlInterface} from '~/models/module_control'; import type {ModuleFeatureInterface} from '~/models/module_feature'; -import type {CompanyInterface} from '~/models/company'; -import type {PartInterface} from '~/models/part'; -import {getDataCollection, getDataDocument} from '~/lib/db.server'; -import type {AppLoadContext} from '@shopify/remix-oxygen'; -import type {ModulePartView} from '~/views/module_part'; import type {ModuleVideoInterface} from '~/models/module_video'; -import type {ModuleAssetInterface} from '~/models/module_asset'; +import type {PartInterface} from '~/models/part'; import type {VideoInterface} from '~/models/video'; -import type {AssetInterface} from '~/models/asset'; +import type {ModuleView} from '~/views/module'; +import type {ModulePartView} from '~/views/module_part'; export async function getModuleDetails(context: AppLoadContext, id: string) { const filters = {id}; diff --git a/app/entry.server.tsx b/app/entry.server.tsx index 8387968..fe2e315 100644 --- a/app/entry.server.tsx +++ b/app/entry.server.tsx @@ -1,5 +1,5 @@ -import type {EntryContext} from '@shopify/remix-oxygen'; import {RemixServer} from '@remix-run/react'; +import type {EntryContext} from '@shopify/remix-oxygen'; import isbot from 'isbot'; import {renderToReadableStream} from 'react-dom/server'; diff --git a/app/lib/markdown.ts b/app/lib/markdown.ts index 2423c56..b424528 100644 --- a/app/lib/markdown.ts +++ b/app/lib/markdown.ts @@ -1,5 +1,5 @@ -import {Remarkable} from 'remarkable'; import {useEffect, useState} from 'react'; +import {Remarkable} from 'remarkable'; export function useGetMarkdownURLToHTML(url: string) { const [markdownString, setMarkdownString] = useState(''); diff --git a/app/lib/session.server.ts b/app/lib/session.server.ts index d020a86..2f5ba72 100644 --- a/app/lib/session.server.ts +++ b/app/lib/session.server.ts @@ -1,9 +1,9 @@ +import {type HydrogenSession} from '@shopify/hydrogen'; import { createCookieSessionStorage, type SessionStorage, type Session, } from '@shopify/remix-oxygen'; -import {type HydrogenSession} from '@shopify/hydrogen'; /** * This is a custom session implementation for your Hydrogen shop. diff --git a/app/lib/utils.ts b/app/lib/utils.ts index 10e27cb..53ac3e6 100644 --- a/app/lib/utils.ts +++ b/app/lib/utils.ts @@ -1,5 +1,4 @@ import {useLocation, useMatches} from '@remix-run/react'; -import {parse as parseCookie} from 'worktop/cookie'; import type { MenuItem, Menu, @@ -8,9 +7,10 @@ import type { // @ts-expect-error types not available import typographicBase from 'typographic-base'; -import {countries} from '~/data/countries'; +import {parse as parseCookie} from 'worktop/cookie'; import type {I18nLocale} from './type'; import {Locale} from './type'; +import {countries} from '~/data/countries'; export interface EnhancedMenuItem extends MenuItem { to: string; diff --git a/app/root.tsx b/app/root.tsx index 160c8d8..11d758e 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,10 +1,3 @@ -import {defer} from '@shopify/remix-oxygen'; -import type { - MetaArgs, - type LinksFunction, - type LoaderFunctionArgs, - type AppLoadContext, -} from '@shopify/remix-oxygen'; import { isRouteErrorResponse, Links, @@ -16,28 +9,35 @@ import { useMatches, useRouteError, } from '@remix-run/react'; +import type {MetaFunction} from '@remix-run/react'; import { ShopifySalesChannel, Seo, getSeoMeta, SeoConfig, } from '@shopify/hydrogen'; -import {Layout} from '~/components'; +import type {Shop, Cart} from '@shopify/hydrogen/storefront-api-types'; +import {defer} from '@shopify/remix-oxygen'; +import type { + MetaArgs, + type LinksFunction, + type LoaderFunctionArgs, + type AppLoadContext, +} from '@shopify/remix-oxygen'; +import invariant from 'tiny-invariant'; import {GenericError} from './components/GenericError'; import {NotFound} from './components/NotFound'; -import styles from './styles/app.css?url'; -import favicon from '~/assets/favicon.svg'; -import {seoPayload} from '~/lib/seo.server'; +import {useAnalytics} from './hooks/useAnalytics'; import { DEFAULT_LOCALE, parseMenu, getCartId, type EnhancedMenu, } from './lib/utils'; -import invariant from 'tiny-invariant'; -import type {Shop, Cart} from '@shopify/hydrogen/storefront-api-types'; -import {useAnalytics} from './hooks/useAnalytics'; -import type {MetaFunction} from '@remix-run/react'; +import styles from './styles/app.css?url'; +import favicon from '~/assets/favicon.svg'; +import {Layout} from '~/components/Layout'; +import {seoPayload} from '~/lib/seo.server'; export const links: LinksFunction = () => { return [ {rel: 'stylesheet', href: styles}, diff --git a/app/routes/($lang).$shopid.orders.$token.authenticate.tsx b/app/routes/($lang).$shopid.orders.$token.authenticate.tsx index 411aea7..fac8080 100644 --- a/app/routes/($lang).$shopid.orders.$token.authenticate.tsx +++ b/app/routes/($lang).$shopid.orders.$token.authenticate.tsx @@ -1,7 +1,8 @@ import type {Shop} from '@shopify/hydrogen/storefront-api-types'; import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {Button, PageHeader} from '~/components'; +import {Button} from '~/components/Button'; +import {PageHeader} from '~/components/Text'; /* If your online store had active orders before you launched your Hydrogen storefront, diff --git a/app/routes/($lang)._index.tsx b/app/routes/($lang)._index.tsx index e732890..8a22f37 100644 --- a/app/routes/($lang)._index.tsx +++ b/app/routes/($lang)._index.tsx @@ -1,26 +1,26 @@ -import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; -import type { - Collection as CollectionType, - CollectionConnection, - Filter, -} from '@shopify/hydrogen/storefront-api-types'; import type {SeoConfig} from '@shopify/hydrogen'; import { flattenConnection, AnalyticsPageType, getSeoMeta, } from '@shopify/hydrogen'; +import type { + Collection as CollectionType, + CollectionConnection, + Filter, +} from '@shopify/hydrogen/storefront-api-types'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {PageHeader, Section, Text, SortFilter, Hero} from '~/components'; +import {Hero} from '~/components/Hero'; import {ProductGrid} from '~/components/ProductGrid'; +import {SortFilter} from '~/components/SortFilter'; +import type {AppliedFilter, SortParam} from '~/components/SortFilter'; +import {Section} from '~/components/Text'; +import {CACHE_LONG} from '~/data/cache'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; -import {CACHE_LONG, routeHeaders} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; -import type {AppliedFilter, SortParam} from '~/components/SortFilter'; - -export const headers = routeHeaders; const PAGINATION_SIZE = 48; diff --git a/app/routes/($lang).account.activate.$id.$activationToken.tsx b/app/routes/($lang).account.activate.$id.$activationToken.tsx index 019b104..30f73ff 100644 --- a/app/routes/($lang).account.activate.$id.$activationToken.tsx +++ b/app/routes/($lang).account.activate.$id.$activationToken.tsx @@ -1,8 +1,8 @@ -import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import type {CustomerActivatePayload} from '@shopify/hydrogen/storefront-api-types'; +import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {useRef, useState} from 'react'; import {getInputStyleClasses} from '~/lib/utils'; -import type {CustomerActivatePayload} from '@shopify/hydrogen/storefront-api-types'; type ActionData = { formError?: string; diff --git a/app/routes/($lang).account.address.$id.tsx b/app/routes/($lang).account.address.$id.tsx index 513a27e..c554cad 100644 --- a/app/routes/($lang).account.address.$id.tsx +++ b/app/routes/($lang).account.address.$id.tsx @@ -1,4 +1,3 @@ -import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import { Form, useActionData, @@ -14,10 +13,12 @@ import type { CustomerDefaultAddressUpdatePayload, CustomerAddressCreatePayload, } from '@shopify/hydrogen/storefront-api-types'; +import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {Button, Text} from '~/components'; -import {assertApiErrors, getInputStyleClasses} from '~/lib/utils'; import type {AccountOutletContext} from './($lang).account.edit'; +import {Button} from '~/components/Button'; +import {Text} from '~/components/Text'; +import {assertApiErrors, getInputStyleClasses} from '~/lib/utils'; interface ActionData { formError?: string; diff --git a/app/routes/($lang).account.edit.tsx b/app/routes/($lang).account.edit.tsx index 4e75974..f4bf65a 100644 --- a/app/routes/($lang).account.edit.tsx +++ b/app/routes/($lang).account.edit.tsx @@ -1,4 +1,3 @@ -import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import { useActionData, Form, @@ -10,11 +9,13 @@ import type { CustomerUpdateInput, CustomerUpdatePayload, } from '@shopify/hydrogen/storefront-api-types'; +import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import clsx from 'clsx'; import invariant from 'tiny-invariant'; -import {Button, Text} from '~/components'; -import {getInputStyleClasses, assertApiErrors} from '~/lib/utils'; import {getCustomer} from './($lang).account'; +import {Button} from '~/components/Button'; +import {Text} from '~/components/Text'; +import {getInputStyleClasses, assertApiErrors} from '~/lib/utils'; export interface AccountOutletContext { customer: Customer; diff --git a/app/routes/($lang).account.login.tsx b/app/routes/($lang).account.login.tsx index 8ea2dab..b827ad3 100644 --- a/app/routes/($lang).account.login.tsx +++ b/app/routes/($lang).account.login.tsx @@ -1,3 +1,10 @@ +import { + Form, + useActionData, + useLoaderData, + type V2_MetaFunction, +} from '@remix-run/react'; +import type {CustomerAccessTokenCreatePayload} from '@shopify/hydrogen/storefront-api-types'; import { json, redirect, @@ -5,16 +12,9 @@ import { type AppLoadContext, type LoaderFunctionArgs, } from '@shopify/remix-oxygen'; -import { - Form, - useActionData, - useLoaderData, - type V2_MetaFunction, -} from '@remix-run/react'; import {useState} from 'react'; +import {Link} from '~/components/Link'; import {getInputStyleClasses} from '~/lib/utils'; -import {Link} from '~/components'; -import type {CustomerAccessTokenCreatePayload} from '@shopify/hydrogen/storefront-api-types'; export const handle = { isPublic: true, diff --git a/app/routes/($lang).account.logout.ts b/app/routes/($lang).account.logout.ts index 6e8debe..58d3e5a 100644 --- a/app/routes/($lang).account.logout.ts +++ b/app/routes/($lang).account.logout.ts @@ -1,9 +1,9 @@ import { redirect, type ActionFunction, + type ActionFunctionArgs, type AppLoadContext, type LoaderFunctionArgs, - type ActionArgs, } from '@shopify/remix-oxygen'; export async function doLogout(context: AppLoadContext) { @@ -22,6 +22,6 @@ 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); }; diff --git a/app/routes/($lang).account.orders.$id.tsx b/app/routes/($lang).account.orders.$id.tsx index 0273e96..d2fb9a4 100644 --- a/app/routes/($lang).account.orders.$id.tsx +++ b/app/routes/($lang).account.orders.$id.tsx @@ -1,18 +1,18 @@ -import invariant from 'tiny-invariant'; -import clsx from 'clsx'; -import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import {useLoaderData, type V2_MetaFunction} from '@remix-run/react'; -import {Money, Image, flattenConnection} from '@shopify/hydrogen'; -import {statusMessage} from '~/lib/utils'; -import {MoneyV2} from '@shopify/hydrogen/storefront-api-types'; +import {useLoaderData, type MetaFunction} from '@remix-run/react'; +import {Image, Money, flattenConnection} from '@shopify/hydrogen'; import type { + DiscountApplicationConnection, Order, OrderLineItem, - DiscountApplicationConnection, } from '@shopify/hydrogen/storefront-api-types'; -import {Link, Heading, PageHeader, Text} from '~/components'; +import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import clsx from 'clsx'; +import invariant from 'tiny-invariant'; +import {Link} from '~/components/Link'; +import {Heading, PageHeader, Text} from '~/components/Text'; +import {statusMessage} from '~/lib/utils'; -export const meta: V2_MetaFunction = ({data}) => { +export const meta: MetaFunction = ({data}) => { return [{title: `Order ${data?.order?.name}`}]; }; diff --git a/app/routes/($lang).account.recover.tsx b/app/routes/($lang).account.recover.tsx index d6c8c65..b747449 100644 --- a/app/routes/($lang).account.recover.tsx +++ b/app/routes/($lang).account.recover.tsx @@ -1,14 +1,14 @@ +import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import type {CustomerRecoverPayload} from '@shopify/hydrogen/storefront-api-types'; import { json, redirect, type ActionFunction, type LoaderFunctionArgs, } from '@shopify/remix-oxygen'; -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useState} from 'react'; -import {Link} from '~/components'; +import {Link} from '~/components/Link'; import {getInputStyleClasses} from '~/lib/utils'; -import type {CustomerRecoverPayload} from '@shopify/hydrogen/storefront-api-types'; export async function loader({context, params}: LoaderFunctionArgs) { const customerAccessToken = await context.session.get('customerAccessToken'); diff --git a/app/routes/($lang).account.register.tsx b/app/routes/($lang).account.register.tsx index 903e29d..8040839 100644 --- a/app/routes/($lang).account.register.tsx +++ b/app/routes/($lang).account.register.tsx @@ -1,15 +1,15 @@ +import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import type {CustomerCreatePayload} from '@shopify/hydrogen/storefront-api-types'; import { redirect, json, type ActionFunction, type LoaderFunctionArgs, } from '@shopify/remix-oxygen'; -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useState} from 'react'; -import {getInputStyleClasses} from '~/lib/utils'; import {doLogin} from './($lang).account.login'; -import type {CustomerCreatePayload} from '@shopify/hydrogen/storefront-api-types'; -import {Link} from '~/components'; +import {Link} from '~/components/Link'; +import {getInputStyleClasses} from '~/lib/utils'; export async function loader({context, params}: LoaderFunctionArgs) { const customerAccessToken = await context.session.get('customerAccessToken'); diff --git a/app/routes/($lang).account.reset.$id.$resetToken.tsx b/app/routes/($lang).account.reset.$id.$resetToken.tsx index d99f819..b258a33 100644 --- a/app/routes/($lang).account.reset.$id.$resetToken.tsx +++ b/app/routes/($lang).account.reset.$id.$resetToken.tsx @@ -1,8 +1,8 @@ -import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import type {CustomerResetPayload} from '@shopify/hydrogen/storefront-api-types'; +import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {useRef, useState} from 'react'; import {getInputStyleClasses} from '~/lib/utils'; -import type {CustomerResetPayload} from '@shopify/hydrogen/storefront-api-types'; type ActionData = { formError?: string; diff --git a/app/routes/($lang).account.tsx b/app/routes/($lang).account.tsx index 04d0da9..756a26a 100644 --- a/app/routes/($lang).account.tsx +++ b/app/routes/($lang).account.tsx @@ -6,24 +6,13 @@ import { useMatches, useOutlet, } from '@remix-run/react'; +import {flattenConnection} from '@shopify/hydrogen'; import type { Collection, Customer, MailingAddress, Order, } from '@shopify/hydrogen/storefront-api-types'; -import {Suspense} from 'react'; -import { - Button, - OrderCard, - PageHeader, - Text, - AccountDetails, - AccountAddressBook, - Modal, - ProductSwimlane, -} from '~/components'; -import {FeaturedCollections} from '~/components/FeaturedCollections'; import { json, defer, @@ -31,11 +20,19 @@ import { type LoaderFunctionArgs, type AppLoadContext, } from '@shopify/remix-oxygen'; -import {flattenConnection} from '@shopify/hydrogen'; -import {getFeaturedData} from './($lang).featured-products'; +import {Suspense} from 'react'; import {doLogout} from './($lang).account.logout'; -import {usePrefixPathWithLocale} from '~/lib/utils'; +import {getFeaturedData} from './($lang).featured-products'; +import {AccountAddressBook} from '~/components/AccountAddressBook'; +import {AccountDetails} from '~/components/AccountDetails'; +import {Button} from '~/components/Button'; +import {FeaturedCollections} from '~/components/FeaturedCollections'; +import {Modal} from '~/components/Modal'; +import {OrderCard} from '~/components/OrderCard'; +import {ProductSwimlane} from '~/components/ProductSwimlane'; +import {Text, PageHeader} from '~/components/Text'; import {CACHE_NONE, routeHeaders} from '~/data/cache'; +import {usePrefixPathWithLocale} from '~/lib/utils'; // Combining json + Response + defer in a loader breaks the // types returned by useLoaderData. This is a temporary fix. diff --git a/app/routes/($lang).api.products.tsx b/app/routes/($lang).api.products.tsx index 612a205..5c5ebff 100644 --- a/app/routes/($lang).api.products.tsx +++ b/app/routes/($lang).api.products.tsx @@ -1,6 +1,6 @@ -import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {flattenConnection} from '@shopify/hydrogen'; import type {ProductConnection} from '@shopify/hydrogen/storefront-api-types'; +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; diff --git a/app/routes/($lang).cart.tsx b/app/routes/($lang).cart.tsx index ae8b3a3..f9dcdf6 100644 --- a/app/routes/($lang).cart.tsx +++ b/app/routes/($lang).cart.tsx @@ -1,12 +1,4 @@ -import {CartLoading, Cart} from '~/components'; import {Await, useMatches} from '@remix-run/react'; -import {Suspense} from 'react'; -import invariant from 'tiny-invariant'; -import { - json, - type ActionArgs, - type AppLoadContext, -} from '@shopify/remix-oxygen'; import type { Cart as CartType, CartInput, @@ -16,10 +8,19 @@ import type { UserError, CartBuyerIdentityInput, } from '@shopify/hydrogen/storefront-api-types'; -import {isLocalPath, getCartId} from '~/lib/utils'; +import { + json, + type ActionFunctionArgs, + type AppLoadContext, +} from '@shopify/remix-oxygen'; +import {Suspense} from 'react'; +import invariant from 'tiny-invariant'; +import {Cart} from '~/components/Cart'; +import {CartLoading} from '~/components/CartLoading'; import {CartAction, type CartActions} from '~/lib/type'; +import {isLocalPath, getCartId} from '~/lib/utils'; -export async function action({request, context}: ActionArgs) { +export async function action({request, context}: ActionFunctionArgs) { const {session, storefront} = context; const headers = new Headers(); let cartId = getCartId(request); diff --git a/app/routes/($lang).collections.$collectionHandle.tsx b/app/routes/($lang).collections.$collectionHandle.tsx index 517e75a..2ef07d8 100644 --- a/app/routes/($lang).collections.$collectionHandle.tsx +++ b/app/routes/($lang).collections.$collectionHandle.tsx @@ -1,24 +1,25 @@ -import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; -import type { - Collection as CollectionType, - CollectionConnection, - Filter, -} from '@shopify/hydrogen/storefront-api-types'; import type {SeoConfig} from '@shopify/hydrogen'; import { flattenConnection, AnalyticsPageType, getSeoMeta, } from '@shopify/hydrogen'; +import type { + Collection as CollectionType, + CollectionConnection, + Filter, +} from '@shopify/hydrogen/storefront-api-types'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {PageHeader, Section, Text, SortFilter} from '~/components'; import {ProductGrid} from '~/components/ProductGrid'; -import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; +import {SortFilter} from '~/components/SortFilter'; +import type {AppliedFilter, SortParam} from '~/components/SortFilter'; +import {PageHeader, Section, Text} from '~/components/Text'; import {CACHE_LONG, routeHeaders} from '~/data/cache'; +import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; import {seoPayload} from '~/lib/seo.server'; -import type {AppliedFilter, SortParam} from '~/components/SortFilter'; export const headers = routeHeaders; diff --git a/app/routes/($lang).collections._index.tsx b/app/routes/($lang).collections._index.tsx index 8846712..9b516ef 100644 --- a/app/routes/($lang).collections._index.tsx +++ b/app/routes/($lang).collections._index.tsx @@ -1,25 +1,20 @@ -import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {Image, getSeoMeta} from '@shopify/hydrogen'; import type { Collection, CollectionConnection, } from '@shopify/hydrogen/storefront-api-types'; -import { - Grid, - Heading, - PageHeader, - Section, - Link, - Pagination, - getPaginationVariables, - Button, -} from '~/components'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {Button} from '~/components/Button'; +import {Grid} from '~/components/Grid'; +import {Link} from '~/components/Link'; +import {Pagination, getPaginationVariables} from '~/components/Pagination'; +import {Heading, PageHeader, Section} from '~/components/Text'; +import {CACHE_LONG, routeHeaders} from '~/data/cache'; import {getImageLoadingPriority} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; -import {CACHE_LONG, routeHeaders} from '~/data/cache'; -import type {SeoConfig} from '@shopify/hydrogen'; -import {Image, getSeoMeta} from '@shopify/hydrogen'; const PAGINATION_SIZE = 8; diff --git a/app/routes/($lang).dealers.tsx b/app/routes/($lang).dealers.tsx index f6f4b54..1468526 100644 --- a/app/routes/($lang).dealers.tsx +++ b/app/routes/($lang).dealers.tsx @@ -1,10 +1,6 @@ -import ModalImage from 'react-modal-image'; -import {Section, Grid, Text, Link} from '~/components'; -import {getAllDealers} from '~/controllers/get_all_dealers'; -import {DealerView} from '~/views/dealer'; -import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; -import Article from './($lang).journal.$journalHandle'; +import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {getAllDealers} from '~/controllers/get_all_dealers'; export async function loader({params, request, context}: LoaderFunctionArgs) { const dealerData = await getAllDealers(context); diff --git a/app/routes/($lang).discount.$code.tsx b/app/routes/($lang).discount.$code.tsx index 1a2826f..a67bbd6 100644 --- a/app/routes/($lang).discount.$code.tsx +++ b/app/routes/($lang).discount.$code.tsx @@ -1,6 +1,6 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import {getCartId} from '~/lib/utils'; import {cartCreate, cartDiscountCodesUpdate} from './($lang).cart'; +import {getCartId} from '~/lib/utils'; /** * Automatically applies a discount found on the url diff --git a/app/routes/($lang).featured-products.tsx b/app/routes/($lang).featured-products.tsx index 2bcf6f4..a5d4112 100644 --- a/app/routes/($lang).featured-products.tsx +++ b/app/routes/($lang).featured-products.tsx @@ -1,9 +1,9 @@ -import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {flattenConnection} from '@shopify/hydrogen'; import type { CollectionConnection, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; diff --git a/app/routes/($lang).journal.$journalHandle.tsx b/app/routes/($lang).journal.$journalHandle.tsx index 4d0518f..06a9785 100644 --- a/app/routes/($lang).journal.$journalHandle.tsx +++ b/app/routes/($lang).journal.$journalHandle.tsx @@ -1,18 +1,14 @@ -import {json} from '@shopify/remix-oxygen'; -import type { - MetaArgs, - type LinksFunction, - type LoaderFunctionArgs, -} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; import type {SeoConfig} from '@shopify/hydrogen'; import {getSeoMeta, Image} from '@shopify/hydrogen'; import type {Blog} from '@shopify/hydrogen/storefront-api-types'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {json} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {PageHeader, Section} from '~/components'; -import {seoPayload} from '~/lib/seo.server'; +import {PageHeader, Section} from '~/components/Text'; // import styles from '../styles/custom-font.css'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; +import {seoPayload} from '~/lib/seo.server'; const BLOG_HANDLE = 'Journal'; diff --git a/app/routes/($lang).journal._index.tsx b/app/routes/($lang).journal._index.tsx index 141762b..2adabbc 100644 --- a/app/routes/($lang).journal._index.tsx +++ b/app/routes/($lang).journal._index.tsx @@ -1,11 +1,13 @@ -import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; import {flattenConnection, Image} from '@shopify/hydrogen'; import type {Article, Blog} from '@shopify/hydrogen/storefront-api-types'; -import {Grid, PageHeader, Section, Link} from '~/components'; +import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import {Grid} from '~/components/Grid'; +import {Link} from '~/components/Link'; +import {Section, PageHeader} from '~/components/Text'; +import {CACHE_LONG, routeHeaders} from '~/data/cache'; import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; -import {CACHE_LONG, routeHeaders} from '~/data/cache'; const BLOG_HANDLE = 'Journal'; diff --git a/app/routes/($lang).modules.tsx b/app/routes/($lang).modules.tsx index b6bcd76..99e78a3 100644 --- a/app/routes/($lang).modules.tsx +++ b/app/routes/($lang).modules.tsx @@ -1,11 +1,11 @@ import {useLoaderData, Link} from '@remix-run/react'; import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import {getAllModules} from '~/controllers/get_all_modules'; -import {ModuleView} from '~/views/module'; -import {Section} from '~/components/Text'; +import {BsCheckSquareFill} from 'react-icons/bs'; import IconLink from '~/components/IconLink'; +import {Section} from '~/components/Text'; +import {getAllModules} from '~/controllers/get_all_modules'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; -import {BsCheckSquareFill} from 'react-icons/bs'; +import {ModuleView} from '~/views/module'; export const headers = routeHeaders; export async function loader({params, request, context}: LoaderFunctionArgs) { diff --git a/app/routes/($lang).pages.$pageHandle.tsx b/app/routes/($lang).pages.$pageHandle.tsx index 4ce025f..472372b 100644 --- a/app/routes/($lang).pages.$pageHandle.tsx +++ b/app/routes/($lang).pages.$pageHandle.tsx @@ -1,13 +1,13 @@ +import {useLoaderData} from '@remix-run/react'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {getSeoMeta} from '@shopify/hydrogen'; +import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types'; -import {useLoaderData} from '@remix-run/react'; import invariant from 'tiny-invariant'; -import {PageHeader} from '~/components'; +import {PageHeader} from '~/components/Text'; import {CACHE_LONG, routeHeaders} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; -import type {SeoConfig} from '@shopify/hydrogen'; -import {getSeoMeta} from '@shopify/hydrogen'; export const headers = routeHeaders; diff --git a/app/routes/($lang).patches._index.tsx b/app/routes/($lang).patches._index.tsx index b24378c..16a5ebf 100644 --- a/app/routes/($lang).patches._index.tsx +++ b/app/routes/($lang).patches._index.tsx @@ -1,9 +1,9 @@ +import {useLoaderData} from '@remix-run/react'; +import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; import ModalImage from 'react-modal-image'; -import {Section, Grid, Text, Link} from '~/components'; +import {Grid} from '~/components/Grid'; +import {Section, Text} from '~/components/Text'; import {getAllPatches} from '~/controllers/get_all_patches'; -import {PatchView} from '~/views/patch'; -import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import {useLoaderData} from '@remix-run/react'; export async function loader({params, request, context}: LoaderFunctionArgs) { const patchData = await getAllPatches(context); diff --git a/app/routes/($lang).policies.$policyHandle.tsx b/app/routes/($lang).policies.$policyHandle.tsx index 3409d8e..8448ab7 100644 --- a/app/routes/($lang).policies.$policyHandle.tsx +++ b/app/routes/($lang).policies.$policyHandle.tsx @@ -1,17 +1,14 @@ -import {json} from '@shopify/remix-oxygen'; -import type { - MetaArgs, - type MetaFunction, - type LoaderFunctionArgs, -} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; -import {PageHeader, Section, Button} from '~/components'; -import invariant from 'tiny-invariant'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {getSeoMeta} from '@shopify/hydrogen'; import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import invariant from 'tiny-invariant'; +import {Button} from '~/components/Button'; +import {Section, PageHeader} from '~/components/Text'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; -import type {SeoConfig} from '@shopify/hydrogen'; -import {getSeoMeta} from '@shopify/hydrogen'; export const headers = routeHeaders; diff --git a/app/routes/($lang).policies._index.tsx b/app/routes/($lang).policies._index.tsx index 1debcb6..db876b1 100644 --- a/app/routes/($lang).policies._index.tsx +++ b/app/routes/($lang).policies._index.tsx @@ -1,13 +1,14 @@ -import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {getSeoMeta} from '@shopify/hydrogen'; import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import {PageHeader, Section, Heading, Link} from '~/components'; +import {Link} from '~/components/Link'; +import {Heading, Section, PageHeader} from '~/components/Text'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; -import type {SeoConfig} from '@shopify/hydrogen'; -import {getSeoMeta} from '@shopify/hydrogen'; export const headers = routeHeaders; diff --git a/app/routes/($lang).products.$productHandle.tsx b/app/routes/($lang).products.$productHandle.tsx index 6b3a8cd..e937c63 100644 --- a/app/routes/($lang).products.$productHandle.tsx +++ b/app/routes/($lang).products.$productHandle.tsx @@ -1,54 +1,34 @@ -import {type ReactNode, useRef, Suspense, useMemo} from 'react'; -import {Disclosure, Listbox} from '@headlessui/react'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; -import {json, defer} from '@shopify/remix-oxygen'; +import {Listbox} from '@headlessui/react'; import { useLoaderData, - Await, - useSearchParams, useLocation, useNavigation, + useSearchParams, } from '@remix-run/react'; - import type {SeoConfig, ShopifyAnalyticsProduct} from '@shopify/hydrogen'; -import { - AnalyticsPageType, - getSeoMeta, - Money, - ShopPayButton, -} from '@shopify/hydrogen'; -import { - Heading, - IconCaret, - IconCheck, - IconClose, - ProductGallery, - ProductSwimlane, - Section, - Skeleton, - Text, - Link, - AddToCartButton, - Button, -} from '~/components'; -import {getExcerpt} from '~/lib/utils'; -import {seoPayload} from '~/lib/seo.server'; -import invariant from 'tiny-invariant'; -import clsx from 'clsx'; +import {AnalyticsPageType, getSeoMeta, Money} from '@shopify/hydrogen'; import type { + ProductConnection, + Product as ProductType, ProductVariant, SelectedOptionInput, - Product as ProductType, Shop, - ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; -import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; -import type {Storefront} from '~/lib/type'; -import type {Product} from 'schema-dts'; +import type {LoaderFunctionArgs, MetaArgs} from '@shopify/remix-oxygen'; +import {defer} from '@shopify/remix-oxygen'; +import clsx from 'clsx'; +import {type ReactNode, useRef} from 'react'; +import invariant from 'tiny-invariant'; +import {AddToCartButton} from '~/components/AddToCartButton'; +import {Button} from '~/components/Button'; +import {IconCaret, IconCheck} from '~/components/Icon'; +import {Link} from '~/components/Link'; import {ModuleDetails} from '~/components/ModuleDetails'; -import type {ModuleView} from '~/views/module'; +import {Heading, Text} from '~/components/Text'; import {getModuleDetails} from '~/controllers/get_module_details'; -import {ModuleGallery} from '~/components/ModuleGallery'; +import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; +import {seoPayload} from '~/lib/seo.server.js'; +import type {ModuleView} from '~/views/module.js'; export async function loader({params, request, context}: LoaderFunctionArgs) { const {productHandle} = params; diff --git a/app/routes/($lang).products._index.tsx b/app/routes/($lang).products._index.tsx index 9982a8c..5a0cb71 100644 --- a/app/routes/($lang).products._index.tsx +++ b/app/routes/($lang).products._index.tsx @@ -1,30 +1,22 @@ -import {json} from '@shopify/remix-oxygen'; -import type { - MetaArgs, - ActionFunctionArgs, - type LoaderFunctionArgs, -} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {getSeoMeta} from '@shopify/hydrogen'; import type { ProductConnection, Collection, } from '@shopify/hydrogen/storefront-api-types'; +import {json} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; -import { - PageHeader, - Section, - ProductCard, - Grid, - Pagination, - getPaginationVariables, - Button, -} from '~/components'; +import {Button} from '~/components/Button'; +import {Grid} from '~/components/Grid'; +import {Pagination, getPaginationVariables} from '~/components/Pagination'; +import {ProductCard} from '~/components/ProductCard'; +import {Section, PageHeader} from '~/components/Text'; +import {routeHeaders, CACHE_LONG} from '~/data/cache'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; import {getImageLoadingPriority} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; -import {routeHeaders, CACHE_LONG} from '~/data/cache'; -import type {SeoConfig} from '@shopify/hydrogen'; -import {getSeoMeta} from '@shopify/hydrogen'; const PAGE_BY = 8; diff --git a/app/routes/($lang).search.tsx b/app/routes/($lang).search.tsx index 8c76f8a..4e4c330 100644 --- a/app/routes/($lang).search.tsx +++ b/app/routes/($lang).search.tsx @@ -1,30 +1,25 @@ -import {defer} from '@shopify/remix-oxygen'; -import type { - MetaArgs, - type LoaderFunctionArgs, - type SerializeFrom, -} from '@shopify/remix-oxygen'; +import {Await, Form, useLoaderData} from '@remix-run/react'; import type {SeoConfig} from '@shopify/hydrogen'; import {flattenConnection, getSeoMeta} from '@shopify/hydrogen'; -import {Await, Form, useLoaderData} from '@remix-run/react'; import type { Collection, CollectionConnection, Product, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; +import {defer} from '@shopify/remix-oxygen'; +import type { + MetaArgs, + type LoaderFunctionArgs, + type SerializeFrom, +} from '@shopify/remix-oxygen'; import {Suspense} from 'react'; import invariant from 'tiny-invariant'; -import { - Heading, - Input, - PageHeader, - ProductGrid, - ProductSwimlane, - FeaturedCollections, - Section, - Text, -} from '~/components'; +import {FeaturedCollections} from '~/components/FeaturedCollections'; +import {Input} from '~/components/Input'; +import {ProductGrid} from '~/components/ProductGrid'; +import {ProductSwimlane} from '~/components/ProductSwimlane'; +import {Heading, Section, Text, PageHeader} from '~/components/Text'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; import {PAGINATION_SIZE} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; diff --git a/app/routes/[sitemap.xml].tsx b/app/routes/[sitemap.xml].tsx index 54ba856..7390c21 100644 --- a/app/routes/[sitemap.xml].tsx +++ b/app/routes/[sitemap.xml].tsx @@ -1,10 +1,10 @@ import {flattenConnection} from '@shopify/hydrogen'; -import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; import type { CollectionConnection, PageConnection, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; +import type {LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time diff --git a/app/views/module.ts b/app/views/module.ts index 3d7dc02..8ad4ca5 100644 --- a/app/views/module.ts +++ b/app/views/module.ts @@ -1,9 +1,9 @@ +import type {CompanyView} from './company'; +import type {ModuleAssetView} from './module_asset'; import type {ModuleConnectorView} from './module_connector'; import type {ModuleControlView} from './module_control'; import type {ModuleFeatureView} from './module_feature'; -import type {CompanyView} from './company'; import type {ModuleVideoView} from './module_video'; -import type {ModuleAssetView} from './module_asset'; export type ModuleView = { id: string; diff --git a/app/views/patch.ts b/app/views/patch.ts index 5cc8ffa..52606e6 100644 --- a/app/views/patch.ts +++ b/app/views/patch.ts @@ -1,6 +1,6 @@ import type {ArtistView} from './artist'; -import type {PatchVideoView} from './patch_video'; import type {PatchModuleView} from './patch_module'; +import type {PatchVideoView} from './patch_video'; export type PatchView = { notes: string; diff --git a/package.json b/package.json index c294044..47bd8d6 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@types/remarkable": "^2.0.3", "eslint": "^8.20.0", "eslint-plugin-hydrogen": "0.12.2", + "eslint-plugin-import": "^2.31.0", "postcss": "^8.4.21", "postcss-preset-env": "^10.1.3", "prettier": "^2.8.4", diff --git a/server.ts b/server.ts index a936958..ec9c9b5 100644 --- a/server.ts +++ b/server.ts @@ -1,14 +1,14 @@ // @ts-ignore // Virtual entry point for the app -import * as remixBuild from 'virtual:remix/server-build'; +import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen'; import { createRequestHandler, getStorefrontHeaders, } from '@shopify/remix-oxygen'; -import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen'; +import * as remixBuild from 'virtual:remix/server-build'; +import {CACHE_SHORT} from '~/data/cache'; import {AppSession} from '~/lib/session.server'; import {getLocaleFromRequest} from '~/lib/utils'; -import {CACHE_SHORT} from '~/data/cache'; /** * Export a fetch handler in module format. diff --git a/tsconfig.json b/tsconfig.json index 90e7fb0..68a0375 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,8 +5,9 @@ "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "moduleResolution": "node", + "moduleResolution": "Bundler", "resolveJsonModule": true, + "module": "ES2022", "target": "ES2022", "strict": true, "allowJs": true, diff --git a/vite.config.ts b/vite.config.ts index 2f6a6cc..a831c7b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ -import {defineConfig} from 'vite'; +import {vitePlugin as remix} from '@remix-run/dev'; import {hydrogen} from '@shopify/hydrogen/vite'; import {oxygen} from '@shopify/mini-oxygen/vite'; -import {vitePlugin as remix} from '@remix-run/dev'; +import {defineConfig} from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ @@ -37,6 +37,7 @@ export default defineConfig({ * @see https://vitejs.dev/config/dep-optimization-options */ include: [ + '@remix-run/dev/server-build', 'ts-easing', 'fast-shallow-equal', 'screenfull', diff --git a/yarn.lock b/yarn.lock index 759c2c3..b12b6a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8663,7 +8663,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-import@npm:^2.27.5": +"eslint-plugin-import@npm:^2.27.5, eslint-plugin-import@npm:^2.31.0": version: 2.31.0 resolution: "eslint-plugin-import@npm:2.31.0" dependencies: @@ -11802,6 +11802,7 @@ __metadata: daisyui: "npm:^2.51.6" eslint: "npm:^8.20.0" eslint-plugin-hydrogen: "npm:0.12.2" + eslint-plugin-import: "npm:^2.31.0" graphql: "npm:^16.6.0" isbot: "npm:^3.8.0" less: "npm:^4.2.1" From f7547cae62db8a8e277e998f91c074e922d0bf39 Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 18:07:24 -0600 Subject: [PATCH 2/7] fix one remainting import issue --- app/components/ModuleDetails.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/app/components/ModuleDetails.tsx b/app/components/ModuleDetails.tsx index 9e7e198..a6babe2 100644 --- a/app/components/ModuleDetails.tsx +++ b/app/components/ModuleDetails.tsx @@ -1,14 +1,6 @@ import {useState} from 'react'; -import {BsFillArrowRightSquareFill} from 'react-icons/bs'; -import {FaArrowRight} from 'react-icons/fa'; -import { - TbRectangleFilled, - TbTriangleFilled, - TbTriangleInvertedFilled, - TbCircleFilled, -} from 'react-icons/tb'; +import {TbRectangleFilled} from 'react-icons/tb'; import {ModuleLegendPanel} from './ModuleLegendPanel'; -import {AddToCartButton} from '.'; import type {ModuleView} from '~/views/module'; export function ModuleDetails({ From 2b914d24bd3ac5af685b976037b5e11db942af7f Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 18:32:19 -0600 Subject: [PATCH 3/7] disable lint error for virtual import --- server.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/server.ts b/server.ts index ec9c9b5..32d04ac 100644 --- a/server.ts +++ b/server.ts @@ -1,10 +1,11 @@ -// @ts-ignore -// Virtual entry point for the app import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen'; import { createRequestHandler, getStorefrontHeaders, } from '@shopify/remix-oxygen'; +// @ts-ignore +// Virtual entry point for the app +// eslint-disable-next-line import/no-unresolved import * as remixBuild from 'virtual:remix/server-build'; import {CACHE_SHORT} from '~/data/cache'; import {AppSession} from '~/lib/session.server'; From f57139591835a6ab96f8839738e5f68f11f4d85d Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 19:00:21 -0600 Subject: [PATCH 4/7] fix most ide-detected problems in routes --- CHANGELOG.md | 10 +++++----- app/routes/($lang)._index.tsx | 2 +- ...($lang).account.activate.$id.$activationToken.tsx | 6 +++--- app/routes/($lang).account.login.tsx | 4 ++-- app/routes/($lang).account.recover.tsx | 4 ++-- app/routes/($lang).account.register.tsx | 4 ++-- app/routes/($lang).account.reset.$id.$resetToken.tsx | 4 ++-- app/routes/($lang).collections.$collectionHandle.tsx | 2 +- app/routes/($lang).collections._index.tsx | 2 +- app/routes/($lang).journal._index.tsx | 4 +++- app/routes/($lang).pages.$pageHandle.tsx | 2 +- app/routes/($lang).policies._index.tsx | 2 +- app/routes/($lang).products.$productHandle.tsx | 12 +++++++++--- 13 files changed, 33 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index adfd9e5..0770e57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,24 +22,24 @@ ### `v2_meta` migration steps - 1. For any routes that you used `meta` route export, convert it to the `V2_MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`: + 1. For any routes that you used `meta` route export, convert it to the `MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`: ```diff - import {type MetaFunction} from '@shopify/remix-oxygen'; - + import {type V2_MetaFunction} from '@remix-run/react'; + + import {type MetaFunction} from '@remix-run/react'; - export const meta: MetaFunction = () => { - + export const meta: V2_MetaFunction = () => { + + export const meta: MetaFunction = () => { - return {title: 'Login'}; + return [{title: 'Login'}]; }; ``` - 2. If you are using data from loaders, pass the loader type to the `V2_MetaFunction` generic: + 2. If you are using data from loaders, pass the loader type to the `MetaFunction` generic: ```diff - export const meta: MetaFunction = ({data}) => { - + export const meta: V2_MetaFunction = ({data}) => { + + export const meta: MetaFunction = ({data}) => { - return {title: `Order ${data?.order?.name}`}; + return [{title: `Order ${data?.order?.name}`}]; }; diff --git a/app/routes/($lang)._index.tsx b/app/routes/($lang)._index.tsx index 8a22f37..de9628d 100644 --- a/app/routes/($lang)._index.tsx +++ b/app/routes/($lang)._index.tsx @@ -11,7 +11,7 @@ import type { Filter, } from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {Hero} from '~/components/Hero'; import {ProductGrid} from '~/components/ProductGrid'; diff --git a/app/routes/($lang).account.activate.$id.$activationToken.tsx b/app/routes/($lang).account.activate.$id.$activationToken.tsx index 30f73ff..d9d4980 100644 --- a/app/routes/($lang).account.activate.$id.$activationToken.tsx +++ b/app/routes/($lang).account.activate.$id.$activationToken.tsx @@ -1,4 +1,4 @@ -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import {Form, useActionData, type MetaFunction} from '@remix-run/react'; import type {CustomerActivatePayload} from '@shopify/hydrogen/storefront-api-types'; import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {useRef, useState} from 'react'; @@ -79,7 +79,7 @@ export const action: ActionFunction = async ({ }, }); } catch (error: any) { - if (storefront.isApiError(error)) { + if (error?.message?.includes('GraphQL error')) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); @@ -95,7 +95,7 @@ export const action: ActionFunction = async ({ } }; -export const meta: V2_MetaFunction = () => { +export const meta: MetaFunction = () => { return [{title: 'Activate Account'}]; }; diff --git a/app/routes/($lang).account.login.tsx b/app/routes/($lang).account.login.tsx index b827ad3..b4c6f22 100644 --- a/app/routes/($lang).account.login.tsx +++ b/app/routes/($lang).account.login.tsx @@ -2,7 +2,7 @@ import { Form, useActionData, useLoaderData, - type V2_MetaFunction, + type MetaFunction, } from '@remix-run/react'; import type {CustomerAccessTokenCreatePayload} from '@shopify/hydrogen/storefront-api-types'; import { @@ -83,7 +83,7 @@ export const action: ActionFunction = async ({request, context, params}) => { } }; -export const meta: V2_MetaFunction = () => { +export const meta: MetaFunction = () => { return [{title: 'Login'}]; }; diff --git a/app/routes/($lang).account.recover.tsx b/app/routes/($lang).account.recover.tsx index b747449..2882a53 100644 --- a/app/routes/($lang).account.recover.tsx +++ b/app/routes/($lang).account.recover.tsx @@ -1,4 +1,4 @@ -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import {Form, useActionData, type MetaFunction} from '@remix-run/react'; import type {CustomerRecoverPayload} from '@shopify/hydrogen/storefront-api-types'; import { json, @@ -52,7 +52,7 @@ export const action: ActionFunction = async ({request, context}) => { } }; -export const meta: V2_MetaFunction = () => { +export const meta: MetaFunction = () => { return [{title: 'Recover Password'}]; }; diff --git a/app/routes/($lang).account.register.tsx b/app/routes/($lang).account.register.tsx index 8040839..2a8e60a 100644 --- a/app/routes/($lang).account.register.tsx +++ b/app/routes/($lang).account.register.tsx @@ -1,4 +1,4 @@ -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import {Form, useActionData, type MetaFunction} from '@remix-run/react'; import type {CustomerCreatePayload} from '@shopify/hydrogen/storefront-api-types'; import { redirect, @@ -87,7 +87,7 @@ export const action: ActionFunction = async ({request, context, params}) => { } }; -export const meta: V2_MetaFunction = () => { +export const meta: MetaFunction = () => { return [{title: 'Register'}]; }; diff --git a/app/routes/($lang).account.reset.$id.$resetToken.tsx b/app/routes/($lang).account.reset.$id.$resetToken.tsx index b258a33..61647b6 100644 --- a/app/routes/($lang).account.reset.$id.$resetToken.tsx +++ b/app/routes/($lang).account.reset.$id.$resetToken.tsx @@ -1,4 +1,4 @@ -import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; +import {Form, useActionData, type MetaFunction} from '@remix-run/react'; import type {CustomerResetPayload} from '@shopify/hydrogen/storefront-api-types'; import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {useRef, useState} from 'react'; @@ -92,7 +92,7 @@ export const action: ActionFunction = async ({ } }; -export const meta: V2_MetaFunction = () => { +export const meta: MetaFunction = () => { return [{title: 'Reset Password'}]; }; diff --git a/app/routes/($lang).collections.$collectionHandle.tsx b/app/routes/($lang).collections.$collectionHandle.tsx index 2ef07d8..7d55a99 100644 --- a/app/routes/($lang).collections.$collectionHandle.tsx +++ b/app/routes/($lang).collections.$collectionHandle.tsx @@ -11,7 +11,7 @@ import type { Filter, } from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {ProductGrid} from '~/components/ProductGrid'; import {SortFilter} from '~/components/SortFilter'; diff --git a/app/routes/($lang).collections._index.tsx b/app/routes/($lang).collections._index.tsx index 9b516ef..2953558 100644 --- a/app/routes/($lang).collections._index.tsx +++ b/app/routes/($lang).collections._index.tsx @@ -6,7 +6,7 @@ import type { CollectionConnection, } from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {Button} from '~/components/Button'; import {Grid} from '~/components/Grid'; import {Link} from '~/components/Link'; diff --git a/app/routes/($lang).journal._index.tsx b/app/routes/($lang).journal._index.tsx index 2adabbc..c3641f4 100644 --- a/app/routes/($lang).journal._index.tsx +++ b/app/routes/($lang).journal._index.tsx @@ -1,5 +1,7 @@ +import type {MetaArgs} from '@remix-run/react'; import {useLoaderData} from '@remix-run/react'; -import {flattenConnection, Image} from '@shopify/hydrogen'; +import type {SeoConfig} from '@shopify/hydrogen'; +import {flattenConnection, getSeoMeta, Image} from '@shopify/hydrogen'; import type {Article, Blog} from '@shopify/hydrogen/storefront-api-types'; import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; import {Grid} from '~/components/Grid'; diff --git a/app/routes/($lang).pages.$pageHandle.tsx b/app/routes/($lang).pages.$pageHandle.tsx index 472372b..2371775 100644 --- a/app/routes/($lang).pages.$pageHandle.tsx +++ b/app/routes/($lang).pages.$pageHandle.tsx @@ -3,7 +3,7 @@ import type {SeoConfig} from '@shopify/hydrogen'; import {getSeoMeta} from '@shopify/hydrogen'; import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {PageHeader} from '~/components/Text'; import {CACHE_LONG, routeHeaders} from '~/data/cache'; diff --git a/app/routes/($lang).policies._index.tsx b/app/routes/($lang).policies._index.tsx index db876b1..ce24fde 100644 --- a/app/routes/($lang).policies._index.tsx +++ b/app/routes/($lang).policies._index.tsx @@ -3,7 +3,7 @@ import type {SeoConfig} from '@shopify/hydrogen'; import {getSeoMeta} from '@shopify/hydrogen'; import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; import {json} from '@shopify/remix-oxygen'; -import type {MetaArgs, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; +import type {MetaArgs, LoaderFunctionArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; import {Link} from '~/components/Link'; import {Heading, Section, PageHeader} from '~/components/Text'; diff --git a/app/routes/($lang).products.$productHandle.tsx b/app/routes/($lang).products.$productHandle.tsx index e937c63..fb63d43 100644 --- a/app/routes/($lang).products.$productHandle.tsx +++ b/app/routes/($lang).products.$productHandle.tsx @@ -5,7 +5,11 @@ import { useNavigation, useSearchParams, } from '@remix-run/react'; -import type {SeoConfig, ShopifyAnalyticsProduct} from '@shopify/hydrogen'; +import type { + SeoConfig, + ShopifyAnalyticsProduct, + Storefront, +} from '@shopify/hydrogen'; import {AnalyticsPageType, getSeoMeta, Money} from '@shopify/hydrogen'; import type { ProductConnection, @@ -17,7 +21,7 @@ import type { import type {LoaderFunctionArgs, MetaArgs} from '@shopify/remix-oxygen'; import {defer} from '@shopify/remix-oxygen'; import clsx from 'clsx'; -import {type ReactNode, useRef} from 'react'; +import {type ReactNode, useMemo, useRef} from 'react'; import invariant from 'tiny-invariant'; import {AddToCartButton} from '~/components/AddToCartButton'; import {Button} from '~/components/Button'; @@ -220,7 +224,9 @@ export function ProductForm() { const isOutOfStock = !selectedVariant?.availableForSale; const isPreorder = product.id == 'gid://shopify/Product/4319674761239'; const isBackorder = - selectedVariant?.quantityAvailable <= 0 && !isPreorder ? true : false; + (selectedVariant?.quantityAvailable ?? 0) <= 0 && !isPreorder + ? true + : false; const productQty = selectedVariant?.quantityAvailable; const isOnSale = selectedVariant?.price?.amount && From 22ec5b4c199c7f1d10c2849b50c50b9f43f942c0 Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 19:19:16 -0600 Subject: [PATCH 5/7] fix lint error in expression in cart route --- app/routes/($lang).cart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/routes/($lang).cart.tsx b/app/routes/($lang).cart.tsx index f9dcdf6..06b391f 100644 --- a/app/routes/($lang).cart.tsx +++ b/app/routes/($lang).cart.tsx @@ -105,7 +105,9 @@ export async function action({request, context}: ActionFunctionArgs) { invariant(cartId, 'Missing cartId'); const formDiscountCode = formData.get('discountCode'); - const discountCodes = ([formDiscountCode] || ['']) as string[]; + const discountCodes = formDiscountCode + ? [String(formDiscountCode)] + : ([''] as string[]); result = await cartDiscountCodesUpdate({ cartId, From 1e3c4e29740d7e803e4657534ee7f6671e808747 Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 20:16:16 -0600 Subject: [PATCH 6/7] check storefront api's errors array to check if error is user error, since isApiError is deprecated --- app/routes/($lang).account.login.tsx | 2 +- app/routes/($lang).account.register.tsx | 2 +- app/routes/($lang).account.reset.$id.$resetToken.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/routes/($lang).account.login.tsx b/app/routes/($lang).account.login.tsx index b4c6f22..d1428db 100644 --- a/app/routes/($lang).account.login.tsx +++ b/app/routes/($lang).account.login.tsx @@ -66,7 +66,7 @@ export const action: ActionFunction = async ({request, context, params}) => { }, }); } catch (error: any) { - if (storefront.isApiError(error)) { + if (error.errors) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); diff --git a/app/routes/($lang).account.register.tsx b/app/routes/($lang).account.register.tsx index 2a8e60a..f269480 100644 --- a/app/routes/($lang).account.register.tsx +++ b/app/routes/($lang).account.register.tsx @@ -70,7 +70,7 @@ export const action: ActionFunction = async ({request, context, params}) => { }, }); } catch (error: any) { - if (storefront.isApiError(error)) { + if (error.errors) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); diff --git a/app/routes/($lang).account.reset.$id.$resetToken.tsx b/app/routes/($lang).account.reset.$id.$resetToken.tsx index 61647b6..b4031b0 100644 --- a/app/routes/($lang).account.reset.$id.$resetToken.tsx +++ b/app/routes/($lang).account.reset.$id.$resetToken.tsx @@ -76,7 +76,7 @@ export const action: ActionFunction = async ({ }, }); } catch (error: any) { - if (storefront.isApiError(error)) { + if (error.errors) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); From 0f9376767592767e0c2357183e98e189958d5562 Mon Sep 17 00:00:00 2001 From: Gary Tyler Date: Sun, 29 Dec 2024 20:17:33 -0600 Subject: [PATCH 7/7] also check error.extensions to consider GraphQL errors --- app/routes/($lang).account.login.tsx | 2 +- app/routes/($lang).account.register.tsx | 2 +- app/routes/($lang).account.reset.$id.$resetToken.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/routes/($lang).account.login.tsx b/app/routes/($lang).account.login.tsx index d1428db..ed6516f 100644 --- a/app/routes/($lang).account.login.tsx +++ b/app/routes/($lang).account.login.tsx @@ -66,7 +66,7 @@ export const action: ActionFunction = async ({request, context, params}) => { }, }); } catch (error: any) { - if (error.errors) { + if (error.errors || error.extensions) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); diff --git a/app/routes/($lang).account.register.tsx b/app/routes/($lang).account.register.tsx index f269480..7d99bb3 100644 --- a/app/routes/($lang).account.register.tsx +++ b/app/routes/($lang).account.register.tsx @@ -70,7 +70,7 @@ export const action: ActionFunction = async ({request, context, params}) => { }, }); } catch (error: any) { - if (error.errors) { + if (error.errors || error.extensions) { return badRequest({ formError: 'Something went wrong. Please try again later.', }); diff --git a/app/routes/($lang).account.reset.$id.$resetToken.tsx b/app/routes/($lang).account.reset.$id.$resetToken.tsx index b4031b0..34aa2bf 100644 --- a/app/routes/($lang).account.reset.$id.$resetToken.tsx +++ b/app/routes/($lang).account.reset.$id.$resetToken.tsx @@ -76,7 +76,7 @@ export const action: ActionFunction = async ({ }, }); } catch (error: any) { - if (error.errors) { + if (error.errors || error.extensions) { return badRequest({ formError: 'Something went wrong. Please try again later.', });