Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(examples): update examples with useLingui macro #1875

Merged
merged 1 commit into from
Mar 6, 2024
Merged

docs(examples): update examples with useLingui macro #1875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/create-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@
]
},
"devDependencies": {
"@lingui/cli": "^4.1.2",
"@lingui/loader": "^4.1.2",
"@lingui/macro": "^4.1.2",
"@lingui/cli": "^4.8.0-next.0",
"@lingui/loader": "^4.8.0-next.0",
"@lingui/macro": "^4.8.0-next.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
Expand Down
10 changes: 5 additions & 5 deletions examples/nextjs-babel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
"start": "next start"
},
"dependencies": {
"@lingui/core": "^4.1.2",
"@lingui/react": "^4.1.2",
"@lingui/core": "^4.8.0-next.0",
"@lingui/react": "^4.8.0-next.0",
"classnames": "^2.3.1",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@lingui/cli": "^4.1.2",
"@lingui/loader": "^4.1.2",
"@lingui/macro": "^4.1.2",
"@lingui/cli": "^4.8.0-next.0",
"@lingui/loader": "^4.8.0-next.0",
"@lingui/macro": "^4.8.0-next.0",
"@types/react": "^18.0.28",
"babel-plugin-macros": "^3.1.0",
"typescript": "^4.9.5",
Expand Down
23 changes: 10 additions & 13 deletions examples/nextjs-babel/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
import Head from "next/head"
import classnames from "classnames"

import { t, Trans } from "@lingui/macro"
import { t, Trans, useLingui } from "@lingui/macro"

import styles from "./Layout.module.css"
import { useLingui } from "@lingui/react"
import { useRouter } from "next/router"

export function Layout({ title = null, className = "", children }) {
/**
* This hook is needed to subscribe your
* component for changes if you use t`` macro
* This macro hook is needed to get `t` which
* is bound to i18n from React.Context
*/
useLingui()
const { t } = useLingui()
const router = useRouter()
const { pathname, asPath, query } = router

// Default props can't be translated at module level because active locale
// isn't known when module is imported, but rather when component
// is rendered.
if (title == null) {
title = t`Example project using LinguiJS`
}

return (
<div className={styles.container}>
<Head>
<title>{title}</title>
{/*
The Next Head component is not being rendered in the React
component tree and React Context is not being passed down to the components placed in the <Head>.
That means we cannot use the <Trans> component here and instead have to use `t` macro.
*/}
<title>{title || t`Example project using LinguiJS`}</title>
<link rel="icon" href="/favicon.ico" />
</Head>

Expand Down
141 changes: 75 additions & 66 deletions examples/nextjs-babel/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,27 +544,27 @@ __metadata:
languageName: node
linkType: hard

"@lingui/babel-plugin-extract-messages@npm:4.1.2":
version: 4.1.2
resolution: "@lingui/babel-plugin-extract-messages@npm:4.1.2"
checksum: 61cae1343e55073ae4cd7bbaf3e77362e71799af4be4e6cfc759e4d33eef6bca0f6a312bb43654ebc0abf8717e2c77c2b421420c47dfa2f0c3cc0f96dcf67015
"@lingui/babel-plugin-extract-messages@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/babel-plugin-extract-messages@npm:4.8.0-next.0"
checksum: 8c05283106ab1d545f06cbe4bd54c2fa53772cf6cb7671be91109849ab690e04b6e8e68cd2069b63c59b30fbcbd0359bad8139ce927120d7a31fe12e6e5f72ac
languageName: node
linkType: hard

"@lingui/cli@npm:4.1.2, @lingui/cli@npm:^4.1.2":
version: 4.1.2
resolution: "@lingui/cli@npm:4.1.2"
"@lingui/cli@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/cli@npm:4.8.0-next.0"
dependencies:
"@babel/core": ^7.21.0
"@babel/generator": ^7.21.1
"@babel/parser": ^7.21.2
"@babel/runtime": ^7.21.0
"@babel/types": ^7.21.2
"@lingui/babel-plugin-extract-messages": 4.1.2
"@lingui/conf": 4.1.2
"@lingui/core": 4.1.2
"@lingui/format-po": 4.1.2
"@lingui/message-utils": 4.1.2
"@lingui/babel-plugin-extract-messages": ^4.8.0-next.0
"@lingui/conf": ^4.8.0-next.0
"@lingui/core": ^4.8.0-next.0
"@lingui/format-po": ^4.8.0-next.0
"@lingui/message-utils": ^4.8.0-next.0
babel-plugin-macros: ^3.0.1
chalk: ^4.1.0
chokidar: 3.5.1
Expand All @@ -586,93 +586,95 @@ __metadata:
source-map: ^0.8.0-beta.0
bin:
lingui: dist/lingui.js
checksum: 3dd985af16702f2e6fc91c6e263fbfe93cbbdcaea01e54dd5a710a583fa40a48b070f4efdd872eb6518b960d431910b9e8a07cea2000a44e634285e953fdd7c6
checksum: 008d3db77a7d64d78bb910f768c1adfca4149ed32f54cea3f4fd14642bb73e758a85cbb4400e07efa23206f6289bab62e137d0a5bf27332ff2dcd04aa788d2bc
languageName: node
linkType: hard

"@lingui/conf@npm:4.1.2":
version: 4.1.2
resolution: "@lingui/conf@npm:4.1.2"
"@lingui/conf@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/conf@npm:4.8.0-next.0"
dependencies:
"@babel/runtime": ^7.20.13
chalk: ^4.1.0
cosmiconfig: ^8.0.0
jest-validate: ^29.4.3
jiti: ^1.17.1
lodash.get: ^4.4.2
checksum: 2fbeeaf0c2e7b895c3128b7e5e7e72a43d21bfd2b8f5bff6d0ec46ee8ae22d1c9af54540d7d070a21639b652ff1b9482b33504db79787801d0db693763508fe0
checksum: faee54058e2d71d4fa4c60739c800eaf92d28484ff16281b7b4c96833eaca46458e332fafcf9fe25dadf4c54b78e26ffbeb06d0b5ad990a06cbb8f94e9ce9680
languageName: node
linkType: hard

"@lingui/core@npm:4.1.2, @lingui/core@npm:^4.1.2":
version: 4.1.2
resolution: "@lingui/core@npm:4.1.2"
"@lingui/core@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/core@npm:4.8.0-next.0"
dependencies:
"@babel/runtime": ^7.20.13
"@lingui/message-utils": 4.1.2
checksum: 480d13a13b855944d36d4145934fb18a0e8cb0625004114c540b9a7e5dce83206944a91d8daa55395ea3b11958bedaeb1731fd3e4224f7817f47fb1825450e6f
"@lingui/message-utils": ^4.8.0-next.0
unraw: ^3.0.0
checksum: 8a48db4648a435ffdbe57a8c53dd4ec86ac80e320d5923df76ddc3e3219625683cf6709b82441aad6ce9f2ff906adeccac7eb7fdaa97b669e723674deade6b7f
languageName: node
linkType: hard

"@lingui/format-po@npm:4.1.2":
version: 4.1.2
resolution: "@lingui/format-po@npm:4.1.2"
"@lingui/format-po@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/format-po@npm:4.8.0-next.0"
dependencies:
"@lingui/conf": 4.1.2
"@lingui/message-utils": 4.1.2
"@lingui/conf": ^4.8.0-next.0
"@lingui/message-utils": ^4.8.0-next.0
date-fns: ^2.29.3
pofile: ^1.1.4
checksum: 205afaea64d59c70d876610d4480195c20a5649bc64a7618b69ba6adf702886de723517b0526129e0fccca01a4d2185c02746d7d77fc47cfc4e01cc65ee540ad
checksum: fa5a134198a05cc8857654340c171e107a480db0383455af23b06191d14fca8655fd88c9c777a7be13b5802be001d155ddaebb1ff943f8a99701e91de8e20390
languageName: node
linkType: hard

"@lingui/loader@npm:^4.1.2":
version: 4.1.2
resolution: "@lingui/loader@npm:4.1.2"
"@lingui/loader@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/loader@npm:4.8.0-next.0"
dependencies:
"@babel/runtime": ^7.20.13
"@lingui/cli": 4.1.2
"@lingui/conf": 4.1.2
"@lingui/cli": ^4.8.0-next.0
"@lingui/conf": ^4.8.0-next.0
peerDependencies:
webpack: ^5.0.0
checksum: 7c2d00a0de024a4f5dab3651c3d7e15b03e92e5b91c1070cbc8975f3c9c2dcb5647f460ec7b88e151e73714229549a1ac87e842ebf40e1924b5c0dace3a89767
checksum: 42ee9034299e804a500ac634783622c50885bd77056b0700b6f52330ea5ca061f2017e2a9067bd21dabdae491c2d30f88af1a40a9b0b9fd10271c288145db694
languageName: node
linkType: hard

"@lingui/macro@npm:^4.1.2":
version: 4.1.2
resolution: "@lingui/macro@npm:4.1.2"
"@lingui/macro@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/macro@npm:4.8.0-next.0"
dependencies:
"@babel/runtime": ^7.20.13
"@babel/types": ^7.20.7
"@lingui/conf": 4.1.2
"@lingui/core": 4.1.2
"@lingui/message-utils": 4.1.2
"@lingui/conf": ^4.8.0-next.0
"@lingui/core": ^4.8.0-next.0
"@lingui/message-utils": ^4.8.0-next.0
peerDependencies:
"@lingui/react": ^4.0.0
babel-plugin-macros: 2 || 3
checksum: bfe69b093a0724f54fc5bccee42787c0ef8f98479524226d5a34c4d5129878138e74be429e423da99633e02da6aa82026ad39dfe01ea8334bab4a39fdf282a89
checksum: 281fbc7dc739b6cf9f0997d86cf3903fac3b9084729b04077f5d5329f18333360b94707c109d9bcbfdc851d711f4f837ede2afb6890d5f789c04b119c5077b04
languageName: node
linkType: hard

"@lingui/message-utils@npm:4.1.2":
version: 4.1.2
resolution: "@lingui/message-utils@npm:4.1.2"
"@lingui/message-utils@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/message-utils@npm:4.8.0-next.0"
dependencies:
"@messageformat/parser": ^5.0.0
checksum: a0a78959f22b866a298da342931a3eee474cdd486b9bdedf50ecdb7caa479dac773bc21b10a2d39c1d4363d5b7a236ccd853d9e4f46bcf0c1741becc7c078382
js-sha256: ^0.10.1
checksum: 643f3ce29b3489f01ab1073fb7ce601339acd3b0cbfa90c3190b8d001e0362162b69c38c092a18aebe329b2a23dd5def06277af90b0a9e35e1ecce63e9eb1fa5
languageName: node
linkType: hard

"@lingui/react@npm:^4.1.2":
version: 4.1.2
resolution: "@lingui/react@npm:4.1.2"
"@lingui/react@npm:^4.8.0-next.0":
version: 4.8.0-next.0
resolution: "@lingui/react@npm:4.8.0-next.0"
dependencies:
"@babel/runtime": ^7.20.13
"@lingui/core": 4.1.2
"@lingui/core": ^4.8.0-next.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 887a4341c1afa45abab4bf9e753c74329a2bb3e5a6d941968c91c2540e7506e54c00def50f75744e6c704a38772ccaaff04f1e622f114e0ba542136ad4f6227e
checksum: 7cad7dff7774defadef8a167e6a2f29c1d30d9d63d9e629079f800e197b3e40b5f07535b42fb46f8943584edda78866bf4782c1b6d7bebb685436895df8e60a1
languageName: node
linkType: hard

Expand Down Expand Up @@ -1395,17 +1397,10 @@ __metadata:
languageName: node
linkType: hard

"caniuse-lite@npm:^1.0.30001406":
version: 1.0.30001469
resolution: "caniuse-lite@npm:1.0.30001469"
checksum: 8e496509d7e9ff189c72205675b5db0c5f1b6a09917027441e835efae0848a468a8c4e7d2b409ffc202438fcd23ae53e017f976a03c22c04d12d3c0e1e33e5de
languageName: node
linkType: hard

"caniuse-lite@npm:^1.0.30001449":
version: 1.0.30001460
resolution: "caniuse-lite@npm:1.0.30001460"
checksum: dad91eb82aa65aecf33ad6a04ad620b9df6f0152020dc6c1874224e8c6f4aa50695f585201b3dfcd2760b3c43326a86c9505cc03af856698fbef67b267ef786f
"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001449":
version: 1.0.30001594
resolution: "caniuse-lite@npm:1.0.30001594"
checksum: 59e52b2213f34fa9317813037fbab4f9b163f9bfeaeeb53035a57046ee2366b69eafc257997eab22982dc061d0576d1f4ef97c29425e1989f6589a7b1d8ed2d5
languageName: node
linkType: hard

Expand Down Expand Up @@ -2368,6 +2363,13 @@ __metadata:
languageName: node
linkType: hard

"js-sha256@npm:^0.10.1":
version: 0.10.1
resolution: "js-sha256@npm:0.10.1"
checksum: 6eb5c9f95aa902cec1930f036deb3bc664024b75fede456c0ac74b855797776c18620f47efec36787077a56ba2f3b8d6aacc7733ff8a2b5bb9ce6b655a35c5e6
languageName: node
linkType: hard

"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
version: 4.0.0
resolution: "js-tokens@npm:4.0.0"
Expand Down Expand Up @@ -2747,11 +2749,11 @@ __metadata:
version: 0.0.0-use.local
resolution: "next-js-babel@workspace:."
dependencies:
"@lingui/cli": ^4.1.2
"@lingui/core": ^4.1.2
"@lingui/loader": ^4.1.2
"@lingui/macro": ^4.1.2
"@lingui/react": ^4.1.2
"@lingui/cli": ^4.8.0-next.0
"@lingui/core": ^4.8.0-next.0
"@lingui/loader": ^4.8.0-next.0
"@lingui/macro": ^4.8.0-next.0
"@lingui/react": ^4.8.0-next.0
"@types/react": ^18.0.28
babel-plugin-macros: ^3.1.0
classnames: ^2.3.1
Expand Down Expand Up @@ -3661,6 +3663,13 @@ __metadata:
languageName: node
linkType: hard

"unraw@npm:^3.0.0":
version: 3.0.0
resolution: "unraw@npm:3.0.0"
checksum: 19eee0bc500ce197d262b79723a2c8c81c1d716baaa2a62c48a4d0d6b9e1fd9d350c5df86262e51343d591ab9c8a47ed150317d0b867b2b65795cdc17ef69873
languageName: node
linkType: hard

"update-browserslist-db@npm:^1.0.10":
version: 1.0.10
resolution: "update-browserslist-db@npm:1.0.10"
Expand Down
12 changes: 6 additions & 6 deletions examples/nextjs-swc/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@
"test": "yarn build"
},
"dependencies": {
"@lingui/core": "^4.1.2",
"@lingui/react": "^4.1.2",
"@lingui/core": "^4.8.0-next.0",
"@lingui/react": "^4.8.0-next.0",
"next": "13.5.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@lingui/cli": "^4.1.2",
"@lingui/loader": "^4.1.2",
"@lingui/macro": "^4.1.2",
"@lingui/swc-plugin": "4.0.5",
"@lingui/cli": "^4.8.0-next.0",
"@lingui/loader": "^4.8.0-next.0",
"@lingui/macro": "^4.8.0-next.0",
"@lingui/swc-plugin": "4.0.6",
"@types/react": "^18.0.14",
"eslint": "8.35.0",
"eslint-config-next": "12.3.4",
Expand Down
10 changes: 3 additions & 7 deletions examples/nextjs-swc/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { t, Trans } from '@lingui/macro'
import { msg, Trans } from '@lingui/macro'
import { GetStaticProps, NextPage } from 'next'
import Head from 'next/head'
import { AboutText } from '../components/AboutText'
Expand All @@ -18,11 +18,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
}

const Index: NextPage = () => {
/**
* This hook is needed to subscribe your
* component for changes if you use t`` macro
*/
useLingui()
const i18n = useLingui()

andrii-bodnar marked this conversation as resolved.
Show resolved Hide resolved
return (
<div className={styles.container}>
Expand All @@ -32,7 +28,7 @@ const Index: NextPage = () => {
component tree and React Context is not being passed down to the components placed in the <Head>.
That means we cannot use the <Trans> component here and instead have to use `t` macro.
*/}
<title>{t`Translation Demo`}</title>
<title>{i18n._(msg`Translation Demo`)}</title>
<link rel="icon" href="/favicon.ico" />
</Head>

Expand Down
Loading
Loading