Merge pull request #2470 from graphcommerce-org/fix/typescript-perfor…

…mance Fix/typescript performance
graphcommerce-org · Jan 6, 2025 · ab85369 · ab85369
2 parents 28dc784 + 318e019
commit ab85369
Show file tree

Hide file tree

Showing 513 changed files with 2,805 additions and 9,354 deletions.
diff --git a/.changeset/gorgeous-baboons-learn.md b/.changeset/gorgeous-baboons-learn.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Modify the type that is exposed for createTheme, should be faster for TypeScript to check.
diff --git a/.changeset/heavy-guests-mix.md b/.changeset/heavy-guests-mix.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/demo-magento-graphcommerce': patch
+---
+
+Moved all test routes files to the demo package so they are out of the example directory.
diff --git a/.changeset/quiet-bees-exist.md b/.changeset/quiet-bees-exist.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/ecommerce-ui': patch
+---
+
+Refactor the FormComponents for better TypeScript checking performance.
diff --git a/.changeset/six-cheetahs-repeat.md b/.changeset/six-cheetahs-repeat.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/eslint-config-pwa': patch
+---
+
+Components must have Theme parameter to avoid significant compiler slowdown.
diff --git a/RELEASE-9.0.0.md b/RELEASE-9.0.0.md
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -2,14 +2,6 @@
 
 ## 9.0.4-canary.0
 
-## 9.0.3
-
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
-
 ## 9.0.1
 
 ### Patch Changes
@@ -18,18 +10,6 @@
 
 - [#2454](https://github.com/graphcommerce-org/graphcommerce/pull/2454) [`0f5267b`](https://github.com/graphcommerce-org/graphcommerce/commit/0f5267b92d8561e20164fe2f078097cb52220726) - Update VSCode guide reference ([@emmanuel-ferdman](https://github.com/emmanuel-ferdman))
 
-## 9.0.1-canary.1
-
-### Patch Changes
-
-- [#2461](https://github.com/graphcommerce-org/graphcommerce/pull/2461) [`7017b60`](https://github.com/graphcommerce-org/graphcommerce/commit/7017b608eb61097c881103c40701ab4a41197d7a) - Solve issue with documentation parsing markdown files as mdx ([@paales](https://github.com/paales))
-
-## 9.0.1-canary.0
-
-### Patch Changes
-
-- [#2454](https://github.com/graphcommerce-org/graphcommerce/pull/2454) [`0f5267b`](https://github.com/graphcommerce-org/graphcommerce/commit/0f5267b92d8561e20164fe2f078097cb52220726) - Update VSCode guide reference ([@emmanuel-ferdman](https://github.com/emmanuel-ferdman))
-
 ## 9.0.0
 
 ### Major Changes

diff --git a/docs/roadmap.md b/docs/roadmap.md
@@ -24,6 +24,7 @@ roadmap.
       configurations that can be made to get a good starting point for your
       project.
 - [ ] Material UI 6 support with CSS variables.
+- [ ] GraphCommerce Pro: Pagebuilder support
 - [ ] GraphCommerce Pro: Login as Customer functionality Magento module +
       GraphCommerce integration.
 - [ ] GraphCommerce Pro: Cache Notifier module + GraphCommerce Integration to
@@ -33,9 +34,6 @@ roadmap.
 
 - [ ] Mui 6 support with [pigment-css](https://github.com/mui/pigment-css)
 - [ ] Upgrade to React 19 + Next.js app router support.
-
-- [ ] GraphCommerce Pro: Pagebuilder support
-      [depends on ↗](https://github.com/magento/magento2/issues/37768)
 - [ ] Adobe Commerce: Reward points functionality
 - [ ] Adobe Commerce: Gift wrapping functionality
 - [ ] Adobe Commerce: Gift card functionality

diff --git a/docs/upgrading/graphcommerce-8-to-9.md b/docs/upgrading/graphcommerce-8-to-9.md
@@ -24,7 +24,7 @@ const MyPlugin: ReactPlugin<typeof OriginalComponent> = (props) => {
 export const Plugin = MyPlugin
 ```
 
-Now becomes:
+With:
 
 ```tsx
 const MyPlugin = (props: PluginProps<OriginalComponentProps>) => {
@@ -37,8 +37,7 @@ export const Plugin = MyPlugin
 There is a new plugin configuration method by using
 `export config: PluginConfig = {}`.
 
-2. linguiLocale now requires an explicit configuration where they differ from
-   the locale
+## 2. `linguiLocale` now requires an explicit configuration where they differ from the locale
 
 > linguiLocale: Custom locale used to load the .po files. Must be a valid
 > locale, also used for Intl functions.
@@ -56,15 +55,15 @@ const config = {
 }
 ```
 
-3. `@graphcommerce/graphcms-ui` is now `@graphcommerce/hygraph-ui`
+## 3. `@graphcommerce/graphcms-ui` is now `@graphcommerce/hygraph-ui`
 
 Replace all `@graphcommerce/graphcms-ui` with `@graphcommerce/hygraph-ui`.
 
-4. `@ducanh2912/next-pwa` replaced by `serwist`
+## 4. `@ducanh2912/next-pwa` replaced by `serwist`
 
 Any customizations made to the service worker should
 
-5. `next-sitemap` replaced by custom implementation.
+## 5. `next-sitemap` replaced by custom implementation.
 
 - pages/robots.txt.tsx
 - pages/sitemap/categories.xml.tsx

diff --git a/examples/magento-graphcms/.gitignore b/examples/magento-graphcms/.gitignore
@@ -33,4 +33,14 @@ yarn-error.log*
 
 # managed by: graphcommerce
 pages/.well-known/assetlinks.json.tsx
+pages/test/\[\[...url\]\].tsx
+pages/test/buttons.tsx
+pages/test/form-elements.tsx
+pages/test/icons.tsx
+pages/test/minimal-page-shell/\[\[...url\]\].tsx
+pages/test/number-inputs.tsx
+pages/test/sheet.tsx
+pages/test/slider.tsx
+pages/test/typography.tsx
+pages/test/usebacklink/\[\[...url\]\].tsx
 # end managed by: graphcommerce
diff --git a/examples/magento-graphcms/CHANGELOG.md b/examples/magento-graphcms/CHANGELOG.md
@@ -2,14 +2,6 @@
 
 ## 9.0.4-canary.0
 
-## 9.0.3
-
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
-
 ## 9.0.1
 
 ### Patch Changes
@@ -18,14 +10,6 @@
 
 - [#2463](https://github.com/graphcommerce-org/graphcommerce/pull/2463) [`db3e142`](https://github.com/graphcommerce-org/graphcommerce/commit/db3e142d6f8b09a0f6b67a06e664b23946a71173) - Fix issue where layout title would be left aligned ([@FrankHarland](https://github.com/FrankHarland))
 
-## 9.0.1-canary.1
-
-### Patch Changes
-
-- [#2460](https://github.com/graphcommerce-org/graphcommerce/pull/2460) [`d8ec6a8`](https://github.com/graphcommerce-org/graphcommerce/commit/d8ec6a8cd4add4f578c6f4983c054957679a589a) - Respect breadcrumbs config on blog pages ([@bramvanderholst](https://github.com/bramvanderholst))
-
-- [#2463](https://github.com/graphcommerce-org/graphcommerce/pull/2463) [`db3e142`](https://github.com/graphcommerce-org/graphcommerce/commit/db3e142d6f8b09a0f6b67a06e664b23946a71173) - Fix issue where layout title would be left aligned ([@FrankHarland](https://github.com/FrankHarland))
-
 ## 9.0.0
 
 ### Major Changes

diff --git a/examples/magento-graphcms/components/theme.ts b/examples/magento-graphcms/components/theme.ts
@@ -2,6 +2,7 @@
 
 import {
   breakpointVal,
+  createTheme,
   MuiButtonInline,
   MuiButtonPill,
   MuiButtonResponsive,
@@ -13,7 +14,7 @@ import {
   responsiveVal,
   themeBaseDefaults,
 } from '@graphcommerce/next-ui'
-import { alpha, createTheme, LinkProps, Theme } from '@mui/material'
+import { alpha, LinkProps, Theme } from '@mui/material'
 import { Components, PaletteOptions } from '@mui/material/styles'
 
 const lightPalette: PaletteOptions = {
@@ -392,7 +393,7 @@ const createOverrides = (theme: Theme): Components<Theme> => ({
 })
 
 export const lightTheme = createThemeWithPalette(lightPalette)
-lightTheme.components = createOverrides(lightTheme) as Components
+lightTheme.components = createOverrides(lightTheme) as never
 
 export const darkTheme = createThemeWithPalette(darkPalette)
-darkTheme.components = createOverrides(darkTheme) as Components
+darkTheme.components = createOverrides(darkTheme) as never
diff --git a/examples/magento-graphcms/package.json b/examples/magento-graphcms/package.json
@@ -21,7 +21,7 @@
     "create-patch": "patch-package --exclude 'package.json$|gql.ts$|interceptor.tsx$'"
   },
   "dependencies": {
-    "@apollo/client": "~3.12.3",
+    "@apollo/client": "3.11.10",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "11.12.0",
     "@emotion/server": "^11.11.0",
@@ -108,7 +108,7 @@
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.8",
     "@mui/utils": "^5.16.8",
-    "@next/env": "15.1.0",
+    "@next/env": "15.1.3",
     "@parcel/watcher": "^2.5.0",
     "@serwist/next": "^9.0.11",
     "@unts/patch-package": "^8.0.0",
@@ -117,7 +117,7 @@
     "dotenv": "16.4.7",
     "framer-motion": "11.15.0",
     "graphql": "^16.10.0",
-    "next": "15.1.0",
+    "next": "15.1.3",
     "next-sitemap": "4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/examples/magento-open-source/CHANGELOG.md b/examples/magento-open-source/CHANGELOG.md
@@ -1,15 +1,3 @@
 # Change Log
 
 ## 9.0.4-canary.0
-
-## 9.0.3
-
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
-
-## 9.0.1
-
-## 9.0.1-canary.1
diff --git a/examples/magento-open-source/components/Layout/Footer.tsx b/examples/magento-open-source/components/Layout/Footer.tsx
@@ -1,10 +1,9 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { Image } from '@graphcommerce/image'
 import { useCheckoutGuestEnabled } from '@graphcommerce/magento-cart'
 import { StoreConfigDocument, StoreSwitcherButton } from '@graphcommerce/magento-store'
 import { DateFormat, Footer as FooterBase } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Button, IconButton, Link } from '@mui/material'
+import { Button, Link } from '@mui/material'
 
 export function Footer() {
   const cartEnabled = useCheckoutGuestEnabled()
@@ -15,7 +14,7 @@ export function Footer() {
 
   return (
     <FooterBase
-      socialLinks={<></>}
+      socialLinks={<div />}
       storeSwitcher={<StoreSwitcherButton />}
       customerService={
         <Button href='/service' variant='pill'>

diff --git a/examples/magento-open-source/components/ProductListItems/ProductListItems.tsx b/examples/magento-open-source/components/ProductListItems/ProductListItems.tsx
@@ -1,4 +1,5 @@
-import { ProductListItemsBase, ProductItemsGridProps } from '@graphcommerce/magento-product'
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { ProductListItemsBase } from '@graphcommerce/magento-product'
 import { productListRenderer } from './productListRenderer'
 
 export type ProductListItemsProps = Omit<ProductItemsGridProps, 'renderers'>

diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutClassic.tsx
@@ -13,7 +13,7 @@ import {
 } from '@graphcommerce/magento-product'
 import { Container, LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcommerce/next-ui'
 import { ProductListItems } from '../ProductListItems'
-import { ProductListLayoutProps } from './types'
+import type { ProductListLayoutProps } from './types'
 
 export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) => {
   const { filters, filterTypes, params, products, title, category } = props

diff --git a/examples/magento-open-source/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-open-source/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -21,7 +21,8 @@ import { Container, LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcomme
 import { Trans } from '@lingui/macro'
 import { Typography } from '@mui/material'
 import { ProductListItems } from '../ProductListItems'
-import { ProductListLayoutProps, useLayoutConfiguration } from './types'
+import type { ProductListLayoutProps } from './types'
+import { useLayoutConfiguration } from './types'
 
 export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps) => {
   const { id, filters, filterTypes, params, products, title, category, handleSubmit } = props

diff --git a/examples/magento-open-source/components/ProductView/Reviews.tsx b/examples/magento-open-source/components/ProductView/Reviews.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { ProductReviews, ProductReviewsProps } from '@graphcommerce/magento-review'
+import type { ProductReviewsProps } from '@graphcommerce/magento-review'
+import { ProductReviews } from '@graphcommerce/magento-review'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Row } from '@graphcommerce/next-ui'
 import { Box, Typography } from '@mui/material'

diff --git a/examples/magento-open-source/components/theme.ts b/examples/magento-open-source/components/theme.ts
@@ -1,6 +1,7 @@
 /// <reference types="@graphcommerce/next-ui/types" />
 import {
   breakpointVal,
+  createTheme,
   MuiButtonInline,
   MuiButtonPill,
   MuiButtonResponsive,
@@ -13,7 +14,7 @@ import {
   themeBaseDefaults,
 } from '@graphcommerce/next-ui'
 import type { LinkProps, Theme } from '@mui/material'
-import { alpha, createTheme } from '@mui/material'
+import { alpha } from '@mui/material'
 import type { Components, PaletteOptions } from '@mui/material/styles'
 
 const lightPalette: PaletteOptions = {
@@ -392,7 +393,7 @@ const createOverrides = (theme: Theme): Components<Theme> => ({
 })
 
 export const lightTheme = createThemeWithPalette(lightPalette)
-lightTheme.components = createOverrides(lightTheme) as Components
+lightTheme.components = createOverrides(lightTheme) as never
 
 export const darkTheme = createThemeWithPalette(darkPalette)
-darkTheme.components = createOverrides(darkTheme) as Components
+darkTheme.components = createOverrides(darkTheme) as never
diff --git a/examples/magento-open-source/package.json b/examples/magento-open-source/package.json
@@ -21,7 +21,7 @@
     "create-patch": "patch-package --exclude 'package.json$|gql.ts$|interceptor.tsx$'"
   },
   "dependencies": {
-    "@apollo/client": "~3.12.3",
+    "@apollo/client": "3.11.10",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "11.12.0",
     "@emotion/server": "^11.11.0",
@@ -104,7 +104,7 @@
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.8",
     "@mui/utils": "^5.16.8",
-    "@next/env": "15.1.0",
+    "@next/env": "15.1.3",
     "@parcel/watcher": "^2.5.0",
     "@serwist/next": "^9.0.11",
     "@unts/patch-package": "^8.0.0",
@@ -113,7 +113,7 @@
     "dotenv": "16.4.7",
     "framer-motion": "11.15.0",
     "graphql": "^16.10.0",
-    "next": "15.1.0",
+    "next": "15.1.3",
     "next-sitemap": "4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/examples/magento-open-source/pages/404.tsx b/examples/magento-open-source/pages/404.tsx
@@ -4,7 +4,7 @@ import { useCustomerAccountCanSignIn } from '@graphcommerce/magento-customer'
 import { SearchLink } from '@graphcommerce/magento-search'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
-import { IconSvg, Separator, icon404 } from '@graphcommerce/next-ui'
+import { icon404, IconSvg, Separator } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Container, Link, Typography } from '@mui/material'

diff --git a/examples/magento-open-source/pages/account/addresses/add.tsx b/examples/magento-open-source/pages/account/addresses/add.tsx
@@ -3,17 +3,17 @@ import type { AccountDashboardAddressesQuery } from '@graphcommerce/magento-cust
 import {
   CreateCustomerAddressForm,
   CustomerDocument,
-  WaitForCustomer,
   getCustomerAccountIsDisabled,
   useCustomerQuery,
+  WaitForCustomer,
 } from '@graphcommerce/magento-customer'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
 import {
+  iconAddresses,
   LayoutOverlayHeader,
   LayoutTitle,
   SectionContainer,
-  iconAddresses,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'

diff --git a/examples/magento-open-source/pages/account/addresses/edit.tsx b/examples/magento-open-source/pages/account/addresses/edit.tsx
@@ -2,18 +2,18 @@ import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import {
   AccountDashboardAddressesDocument,
   EditAddressForm,
-  WaitForCustomer,
   getCustomerAccountIsDisabled,
   useCustomerQuery,
+  WaitForCustomer,
 } from '@graphcommerce/magento-customer'
 import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { GetStaticProps } from '@graphcommerce/next-ui'
 import {
+  iconAddresses,
   IconHeader,
   LayoutOverlayHeader,
   LayoutTitle,
   SectionContainer,
-  iconAddresses,
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'