SWC: Rust based compiler to replace babel

.changeset/little-trees-clap.md

@@ -0,0 +1,10 @@
+---
+'@graphcommerce/magento-cart-payment-method': patch
+'@graphcommerce/mollie-magento-payment': patch
+'@graphcommerce/react-hook-form': patch
+'@graphcommerce/eslint-config-pwa': patch
+'@graphcommerce/graphql-codegen-near-operation-file': patch
+'@graphcommerce/typescript-config-pwa': patch
+---
+
+Loosen node requirement

.changeset/ten-cameras-talk.md

@@ -0,0 +1,77 @@
+---
+'@graphcommerce/docs': patch
+'@graphcommerce/magento-graphcms': patch
+'@graphcommerce/ecommerce-ui': patch
+'@graphcommerce/framer-scroller': patch
+'@graphcommerce/lingui-next': patch
+'@graphcommerce/magento-cart': patch
+'@graphcommerce/magento-cart-billing-address': patch
+'@graphcommerce/magento-cart-checkout': patch
+'@graphcommerce/magento-cart-coupon': patch
+'@graphcommerce/magento-cart-email': patch
+'@graphcommerce/magento-cart-items': patch
+'@graphcommerce/magento-cart-payment-method': patch
+'@graphcommerce/magento-cart-pickup': patch
+'@graphcommerce/magento-cart-shipping-address': patch
+'@graphcommerce/magento-cart-shipping-method': patch
+'@graphcommerce/magento-category': patch
+'@graphcommerce/magento-cms': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-customer-account': patch
+'@graphcommerce/magento-customer-order': patch
+'@graphcommerce/magento-newsletter': patch
+'@graphcommerce/magento-pagebuilder': patch
+'@graphcommerce/magento-payment-braintree': patch
+'@graphcommerce/magento-payment-included': patch
+'@graphcommerce/magento-payment-klarna': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/magento-product-bundle': patch
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/magento-product-downloadable': patch
+'@graphcommerce/magento-product-grouped': patch
+'@graphcommerce/magento-product-simple': patch
+'@graphcommerce/magento-product-virtual': patch
+'@graphcommerce/magento-review': patch
+'@graphcommerce/magento-search': patch
+'@graphcommerce/magento-store': patch
+'@graphcommerce/magento-wishlist': patch
+'@graphcommerce/mollie-magento-payment': patch
+'@graphcommerce/next-ui': patch
+---
+
+Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+All occurences of `<Trans>` and `t` need to be replaced:
+
+```tsx
+import { Trans, t } from '@lingui/macro'
+
+function MyComponent() {
+ const foo = 'bar'
+ return (
+ <div aria-label={t`Account ${foo}`}>
+ <Trans>My Translation {foo}</Trans>
+ </div>
+ )
+}
+```
+
+Needs to be replaced with:
+
+```tsx
+import { Trans } from '@lingui/react'
+import { i18n } from '@lingui/core'
+
+function MyComponent() {
+ const foo = 'bar'
+ return (
+ <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+ <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+ </div>
+ )
+}
+```
+
+[More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)

.changeset/tricky-spiders-reflect.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-graphcms': minor
+---
+
+Switched to swc compiler, dev build times will be about 3 times faster!

docs/framework/translations.md

@@ -26,12 +26,12 @@ msgstr "cancelado"
 
 The msgid is the message being translated. In
 /node_modules/@graphcommerce/magento-cart/components/EmptyCart/EmptyCart.tsx,
-you can see a the first msgid is passed as a propped, wrapped in the `<Trans>`
+you can see that the first msgid is passed as a the id prop to the <Trans>
 component:
 
-```ts
+```tsx
 <FullPageMessage
- title={<Trans>Your cart is empty</Trans>}
+ title={<Trans id="Your cart is empty" />}
  ...
 >
 ```
@@ -57,20 +57,31 @@ Refresh to see your changes updated
 ## Adding translations to custom component
 
 If you're building a component, you can wrap the strings you want to translate
-in the `<Trans>` jsx macro:
+in the `<Trans>` component:
 
-```ts
+```tsx
 <Typography variant='h3'>
- <Trans>Call us now</Trans>
+ <Trans id='Call us now' />
 </Typography>
 ```
 
+To translate a string:
+
+```tsx
+<PageMeta title={i18n._(/* i18n */ `Blog`)} />
+```
+
+_The `/* i18n */` comment is required for `lingui extract` to work properly_
+
 Add Linqui to the component's imports:
 
-```ts
-import { t, Trans } from '@lingui/macro'
+```tsx
+import { Trans } from '@lingui/react'
+import { i18n } from '@lingui/core'
 ```
 
+## Generating translation files with all translations
+
 Run `yarn lingui`. All new (missing) translations will be added to translations
 files:
 
@@ -184,11 +195,12 @@ msgstr ""
 
 ```
 
-5. Add your translations ins the newly created .po file. Run the app and use the
+5. Add your translations in the newly created .po file. Run the app and use the
  store switcher to navigate to your new storeview.
- [Github copilot ↗](https://copilot.github.com/) provides very accurate
- suggestions in VS Code with the
- [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
+
+> Tip: [Github copilot ↗](https://copilot.github.com/) provides very accurate
+> suggestions in VS Code with the
+> [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
 
 ### Magento Locale codes
 

examples/magento-graphcms/components/Blog/BlogItem.tsx

@@ -2,7 +2,7 @@ import { Asset } from '@graphcommerce/graphcms-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { BlogListItem } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Typography, useTheme } from '@mui/material'
 import { BlogItemFragment } from './BlogItem.gql'
 
@@ -26,7 +26,7 @@ export function BlogItem(props: BlogItemProps) {
  />
  ) : (
  <Typography variant='body2'>
- <Trans>No Image</Trans>
+ <Trans id='No Image' />
  </Typography>
  )
  }

examples/magento-graphcms/components/Layout/Footer.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { StoreSwitcherButton } from '@graphcommerce/magento-store'
 import { Footer as FooterBase } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Button, IconButton, Link } from '@mui/material'
 import PageLink from 'next/link'
 import { FooterQueryFragment } from './FooterQueryFragment.gql'
@@ -38,7 +38,7 @@ export function Footer(props: FooterProps) {
  customerService={
  <PageLink href='/service' passHref>
  <Button variant='pill'>
- <Trans>Customer Service</Trans>
+ <Trans id='Customer Service' />
  </Button>
  </PageLink>
  }

examples/magento-graphcms/components/Layout/LayoutFull.tsx

@@ -17,7 +17,8 @@ import {
  MenuFabItem,
  DarkLightModeMenuSecondaryItem,
 } from '@graphcommerce/next-ui'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Fab } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -55,13 +56,13 @@ export function LayoutFull(props: LayoutFullProps) {
  )
  })}
  <DesktopNavItem href='/blog'>
- <Trans>Blog</Trans>
+ <Trans id='Blog' />
  </DesktopNavItem>
  </DesktopNavBar>
  <DesktopNavActions>
  {!router.pathname.startsWith('/search') && <SearchLink href='/search' />}
  <PageLink href='/service' passHref>
- <Fab aria-label={t`Account`} size='large' color='inherit'>
+ <Fab aria-label={i18n._(/* i18n */ `Account`)} size='large' color='inherit'>
  <IconSvg src={iconCustomerService} size='large' />
  </Fab>
  </PageLink>
@@ -78,28 +79,28 @@ export function LayoutFull(props: LayoutFullProps) {
  <MenuFab
  search={
  <SearchLink href='/search' sx={{ width: '100%' }}>
- <Trans>Search...</Trans>
+ <Trans id='Search...' />
  </SearchLink>
  }
  secondary={[
  <CustomerMenuFabItem key='account' guestHref='/account/signin' authHref='/account'>
- <Trans>Account</Trans>
+ <Trans id='Account' />
  </CustomerMenuFabItem>,
  <MenuFabSecondaryItem
  key='service'
  icon={<IconSvg src={iconCustomerService} size='medium' />}
  href='/service'
  >
- <Trans>Customer Service</Trans>
+ <Trans id='Customer Service' />
  </MenuFabSecondaryItem>,
  <WishlistMenuFabItem key='wishlist' icon={<IconSvg src={iconHeart} size='medium' />}>
- <Trans>Wishlist</Trans>
+ <Trans id='Wishlist' />
  </WishlistMenuFabItem>,
  <DarkLightModeMenuSecondaryItem key='darkmode' />,
  ]}
  >
  <MenuFabItem href='/'>
- <Trans>Home</Trans>
+ <Trans id='Home' />
  </MenuFabItem>
  {menuItemsIncludeInMenu?.map((item) => {
  const highLight = item?.name?.toLowerCase().includes('sale')
@@ -112,7 +113,7 @@ export function LayoutFull(props: LayoutFullProps) {
  )
  })}
  <MenuFabItem href='/blog'>
- <Trans>Blog</Trans>
+ <Trans id='Blog' />
  </MenuFabItem>
  </MenuFab>
  }

examples/magento-graphcms/locales/de.po

@@ -25,15 +25,18 @@ msgstr "Konto"
 msgid "Account Dashboard"
 msgstr "Kontoverwaltung"
 
+msgid "Add address"
+msgstr "Adresse hinzufügen"
+
 msgid "Add new address"
 msgstr "Neue Adresse hinzufügen"
 
-msgid "Add review"
-msgstr "Bewertung hinzufügen"
-
 msgid "Add to Cart"
 msgstr "In den Warenkorb"
 
+msgid "Add to wishlist"
+msgstr "Zu den Wunschlisten hinzufügen"
+
 msgid "Addition"
 msgstr "Zusatz"
 
@@ -49,8 +52,8 @@ msgstr "Alle Produkte"
 msgid "Apply"
 msgstr "Anwenden"
 
-msgid "As low as"
-msgstr "Niedrigstens"
+msgid "As low as <0/>"
+msgstr "Niedrig bis <0/>"
 
 msgid "As soon as the payment is completed, you will automatically return to the webshop."
 msgstr "Sobald die Zahlung abgeschlossen ist, werden Sie automatisch zum Webshop zurückgeleitet."
@@ -166,6 +169,9 @@ msgstr "Rabattcode"
 msgid "Discover our collection and add items to your cart!"
 msgstr "Entdecken Sie unsere Sammlung und fügen Sie Produkte zu Ihrem Warenkorb hinzu!"
 
+msgid "Discover our collection and add items to your wishlist!"
+msgstr "Entdecken Sie unsere Sammlung und fügen Sie Produkte zu Ihrer Wunschliste hinzu!"
+
 msgid "Discover our collection and place your first order!"
 msgstr "Entdecken Sie unsere Sammlung und führen Sie Ihre erste Bestellung aus!"
 
@@ -295,6 +301,9 @@ msgstr "Noch kein Konto?"
 msgid "No orders found"
 msgstr "Keine Bestellungen gefunden"
 
+msgid "No payment information"
+msgstr "Keine Zahlungsinformationen"
+
 msgid "No worries! Enter your email address and we will send an email with instructions to reset your password."
 msgstr "Keine Sorge! Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen eine E-Mail mit Anweisungen zum Zurücksetzen Ihres Passworts."
 
@@ -313,9 +322,6 @@ msgstr "Oder folgen Sie diesen Links, um Sie wieder auf den Weg zu bringen!"
 msgid "Order #{orderId}"
 msgstr "Bestellung #{orderId}"
 
-msgid "Order detail page for order #{orderId}"
-msgstr "Bestellungsseite für Bestellung #{orderId}"
-
 msgid "Order not found"
 msgstr "Bestellung nicht gefunden"
 
@@ -328,9 +334,6 @@ msgstr "Bestellstatus"
 msgid "Order summary"
 msgstr "Bestellübersicht"
 
-msgid "Order view #{orderId}"
-msgstr "Bestellansicht #{orderId}"
-
 msgid "Ordered items"
 msgstr "Bestellte Produkte"
 
@@ -400,6 +403,9 @@ msgstr "Region"
 msgid "Remove Product"
 msgstr "Produkt entfernen"
 
+msgid "Remove from wishlist"
+msgstr "Aus Wunschliste entfernen"
+
 msgid "Reset Cart and Return to home"
 msgstr "Warenkorb zurücksetzen und zurück zur Startseite"
 
@@ -523,9 +529,6 @@ msgstr "Alle Artikel anzeigen"
 msgid "View all your addresses"
 msgstr "Alle Ihre Adressen anzeigen"
 
-msgid "View all your reviews"
-msgstr "Alle Ihre Bewertungen anzeigen"
-
 msgid "View less items"
 msgstr "Weniger Artikel anzeigen"
 
@@ -556,11 +559,14 @@ msgstr "Welche Größe ist richtig?"
 msgid "Whoops our bad..."
 msgstr "Ups, unsere Schuld..."
 
+msgid "Wishlist"
+msgstr "Wunschliste"
+
 msgid "Write a review"
 msgstr "Eine Bewertung schreiben"
 
-msgid "Written by"
-msgstr "Geschrieben von"
+msgid "Written by {nickname}"
+msgstr "Geschrieben von {nickname}"
 
 msgid "Written {0} reviews"
 msgstr "Bewertungen geschrieben: {0}"
@@ -604,6 +610,9 @@ msgstr "Ihr Warenkorb ist leer"
 msgid "Your session is expired"
 msgstr "Ihre Sitzung ist abgelaufen"
 
+msgid "Your wishlist is empty"
+msgstr "Ihre Wunschliste ist leer"
+
 msgid "canceled"
 msgstr "abgebrochen"