@graphcommerce/docs 4.6.3 → 4.6.4

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Change Log
 
+## 4.6.4
+
+### Patch Changes
+
+- [#1443](https://github.com/graphcommerce-org/graphcommerce/pull/1443) [`c4c86df1e`](https://github.com/graphcommerce-org/graphcommerce/commit/c4c86df1e8c74956b2ae76ab1a88c496fced4790) Thanks [@timhofman](https://github.com/timhofman)! - Missing or outdated resolutions results in build errors
+
+* [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - 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)
+
 ## 4.6.3
 
 ### Patch Changes

package/feature-list.md

@@ -218,7 +218,7 @@ Black checkbox is a feature unaffected by GraphCommerce
       average order value.
 - [ ] Show pricing tiers. — [Todo]
 - [x] Present product ratings and reviews.
-- [ ] Provide an option to add products to a wish list. — [Todo]
+- [x] Provide an option to add products to a wish list.
 - [ ] Add Facebook, Twitter, and email links to share products. — [Todo]
 
 ### Checkout

package/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
 

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "4.6.3",
+  "version": "4.6.4",
   "sideEffects": true,
   "devDependencies": {
-    "@graphcommerce/prettier-config-pwa": "^4.0.5"
+    "@graphcommerce/prettier-config-pwa": "^4.0.6"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/roadmap.md

@@ -10,7 +10,6 @@ The following overview contains the status of items on the GraphCommerce roadmap
 ## In progress
 
 - [ ] Adyen payment service (Braintree, Mollie, already implemented)
-- [ ] Wishlist
 - [ ] PageBuilder support
 - [ ] Fetch Magento image sizes (probe-image-size)
 

package/upgrading.md

@@ -74,7 +74,8 @@ Compare your local /package.json with the example's
    [remove PSP's](./getting-started/create.md#remove-unused-psps) your backend
    doesn't support.
 2. Replace your local `devDependencies` with the example's `devDependencies`
-3. Replace your local `scripts` with the example's `scripts_local`
+3. Replace your local `resolutions` with the example's `resolutions`
+4. Replace your local `scripts` with the example's `scripts_local`
 
 After updating the package.json file, run the following to install the latest
 packages: