diff --git a/examples/create-react-app/src/App.tsx b/examples/create-react-app/src/App.tsx index 2597598ef..509c746d1 100644 --- a/examples/create-react-app/src/App.tsx +++ b/examples/create-react-app/src/App.tsx @@ -1,30 +1,42 @@ -import './App.css'; -import React, { useState } from 'react'; -import { Trans, Plural } from "@lingui/macro"; -import { i18n } from "@lingui/core"; +import "./App.css" +import React, { useState } from "react" +import { Trans, Plural } from "@lingui/macro" -import { locales, dynamicActivate } from './i18n'; +import { locales, dynamicActivate } from "./i18n" +import { useLingui } from "@lingui/react" function App() { - const [count, setCount] = useState(0); + const [count, setCount] = useState(0) + const { i18n } = useLingui() return (
- -

Language switcher example:

+ +

+ Language switcher example: +

{Object.values(locales).map((locale, index) => ( - ))}
-

Plurals example:

+

+ Plurals example: +

- -
@@ -34,21 +46,24 @@ function App() { one={"There's one book"} other={"There are # books"} /> -

Date formatter example:

+

+ Date formatter example: +

- - Today is {i18n.date(new Date(), {})} - + Today is {i18n.date(new Date(), {})}
-

Number formatter example:

+

+ Number formatter example: +

- I have a balance of {i18n.number(1_000_000, { style: "currency", currency: "EUR" })} + I have a balance of{" "} + {i18n.number(1_000_000, { style: "currency", currency: "EUR" })}
- ); + ) } -export default App; +export default App diff --git a/examples/nextjs-swc/README.md b/examples/nextjs-swc/README.md index 0eeda00f1..54d0e7c33 100644 --- a/examples/nextjs-swc/README.md +++ b/examples/nextjs-swc/README.md @@ -2,6 +2,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +## SWC Compatibility +SWC Plugin support is still experimental. Semver backwards compatibility between different `next-swc` versions is not guaranteed. + +Therefore, you need to select an appropriate version of the Lingui plugin to match compatible `NextJs` version. + +For more information on compatibility, please refer to the [Compatibility section](https://github.com/lingui/swc-plugin#compatibility). + ## Getting Started First, run the development server: diff --git a/examples/nextjs-swc/package.json b/examples/nextjs-swc/package.json index 7294480a9..ad383211e 100644 --- a/examples/nextjs-swc/package.json +++ b/examples/nextjs-swc/package.json @@ -7,13 +7,13 @@ "debug": "NODE_OPTIONS='--inspect' next dev", "build": "yarn lang:extract && next build", "start": "next start", - "lang:extract": "lingui extract --clean", + "lingui:extract": "lingui extract --clean", "test": "yarn build" }, "dependencies": { "@lingui/core": "^4.1.2", "@lingui/react": "^4.1.2", - "next": "13.2.3", + "next": "13.3.1", "react": "18.2.0", "react-dom": "18.2.0" }, diff --git a/examples/nextjs-swc/src/components/Developers.tsx b/examples/nextjs-swc/src/components/Developers.tsx index 17c24e2e4..027f5bf4d 100644 --- a/examples/nextjs-swc/src/components/Developers.tsx +++ b/examples/nextjs-swc/src/components/Developers.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { Trans, plural } from '@lingui/macro' +import { Trans, Plural } from '@lingui/macro' export default function Developers() { const [selected, setSelected] = useState('1') @@ -17,10 +17,7 @@ export default function Developers() {

- {plural(selected, { - one: 'Developer', - other: `Developers` - })} +

diff --git a/examples/nextjs-swc/src/locales/en.po b/examples/nextjs-swc/src/locales/en.po index ecaddcb52..8cf61f511 100644 --- a/examples/nextjs-swc/src/locales/en.po +++ b/examples/nextjs-swc/src/locales/en.po @@ -13,34 +13,35 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/components/Switcher.tsx:14 +#: src/components/Developers.tsx:20 +msgid "{selected, plural, one {Developer} other {Developers}}" +msgstr "{selected, plural, one {Developer} other {Developers}}" + +#: src/components/Switcher.tsx:10 msgid "English" msgstr "English" +#. js-lingui-explicit-id +#: src/components/AboutText.tsx:6 +msgid "next-explanation" +msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies." + #: src/components/Developers.tsx:9 msgid "Plural Test: How many developers?" msgstr "Plural Test: How many developers?" -#: src/components/Switcher.tsx:15 +#: src/components/Switcher.tsx:11 msgid "Serbian" msgstr "Serbian" -#: src/components/Switcher.tsx:16 +#: src/components/Switcher.tsx:12 msgid "Spanish" msgstr "Spanish" -#: src/pages/index.tsx:25 +#: src/pages/index.tsx:28 msgid "Translation Demo" msgstr "Translation Demo" -#: src/pages/index.tsx:32 +#: src/pages/index.tsx:35 msgid "Welcome to <0>Next.js!" msgstr "Welcome to <0>Next.js!" - -#: src/components/AboutText.tsx:6 -msgid "next-explanation" -msgstr "Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications. It is a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies." - -#: src/components/Developers.tsx:20 -msgid "{selected, plural, one {Developer} other {Developers}}" -msgstr "{selected, plural, one {Developer} other {Developers}}" diff --git a/examples/nextjs-swc/src/locales/es.po b/examples/nextjs-swc/src/locales/es.po index c63b92f21..663b3ddd0 100644 --- a/examples/nextjs-swc/src/locales/es.po +++ b/examples/nextjs-swc/src/locales/es.po @@ -13,34 +13,35 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/components/Switcher.tsx:14 +#: src/components/Developers.tsx:20 +msgid "{selected, plural, one {Developer} other {Developers}}" +msgstr "{selected, plural, one {Programador} other {Programadores}}" + +#: src/components/Switcher.tsx:10 msgid "English" msgstr "Inglés" +#. js-lingui-explicit-id +#: src/components/AboutText.tsx:6 +msgid "next-explanation" +msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas." + #: src/components/Developers.tsx:9 msgid "Plural Test: How many developers?" msgstr "Prueba Plural: Cuantos programadores?" -#: src/components/Switcher.tsx:15 +#: src/components/Switcher.tsx:11 msgid "Serbian" msgstr "Serbio" -#: src/components/Switcher.tsx:16 +#: src/components/Switcher.tsx:12 msgid "Spanish" msgstr "Español" -#: src/pages/index.tsx:25 +#: src/pages/index.tsx:28 msgid "Translation Demo" msgstr "Demostración de Traducción" -#: src/pages/index.tsx:32 +#: src/pages/index.tsx:35 msgid "Welcome to <0>Next.js!" msgstr "Bienvenido a <0>Next.js!" - -#: src/components/AboutText.tsx:6 -msgid "next-explanation" -msgstr "Next.js es un marco de trabajo web de desarrollo front-end de React de código abierto que permite funciones como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios web JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas." - -#: src/components/Developers.tsx:20 -msgid "{selected, plural, one {Developer} other {Developers}}" -msgstr "{selected, plural, one {Programador} other {Programadores}}" diff --git a/examples/nextjs-swc/src/locales/pseudo.po b/examples/nextjs-swc/src/locales/pseudo.po index 334742b49..c2158ba7a 100644 --- a/examples/nextjs-swc/src/locales/pseudo.po +++ b/examples/nextjs-swc/src/locales/pseudo.po @@ -13,34 +13,35 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/components/Switcher.tsx:14 +#: src/components/Developers.tsx:20 +msgid "{selected, plural, one {Developer} other {Developers}}" +msgstr "" + +#: src/components/Switcher.tsx:10 msgid "English" msgstr "" +#. js-lingui-explicit-id +#: src/components/AboutText.tsx:6 +msgid "next-explanation" +msgstr "" + #: src/components/Developers.tsx:9 msgid "Plural Test: How many developers?" msgstr "" -#: src/components/Switcher.tsx:15 +#: src/components/Switcher.tsx:11 msgid "Serbian" msgstr "" -#: src/components/Switcher.tsx:16 +#: src/components/Switcher.tsx:12 msgid "Spanish" msgstr "" -#: src/pages/index.tsx:25 +#: src/pages/index.tsx:28 msgid "Translation Demo" msgstr "" -#: src/pages/index.tsx:32 +#: src/pages/index.tsx:35 msgid "Welcome to <0>Next.js!" msgstr "" - -#: src/components/AboutText.tsx:6 -msgid "next-explanation" -msgstr "" - -#: src/components/Developers.tsx:20 -msgid "{selected, plural, one {Developer} other {Developers}}" -msgstr "" diff --git a/examples/nextjs-swc/src/locales/sr.po b/examples/nextjs-swc/src/locales/sr.po index 3eb565a48..748509afa 100644 --- a/examples/nextjs-swc/src/locales/sr.po +++ b/examples/nextjs-swc/src/locales/sr.po @@ -13,34 +13,35 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/components/Switcher.tsx:14 +#: src/components/Developers.tsx:20 +msgid "{selected, plural, one {Developer} other {Developers}}" +msgstr "{selected, plural, one {Програмер} other {Програмера}}" + +#: src/components/Switcher.tsx:10 msgid "English" msgstr "Енглески" +#. js-lingui-explicit-id +#: src/components/AboutText.tsx:6 +msgid "next-explanation" +msgstr "Некст.јс је отворени изворни Реацт-ов развојни вебоквир који омогућава функционалност као што је приказивање на страни сервера и генерисање статичких веблокација за веб апликације засноване на Реацт-у." + #: src/components/Developers.tsx:9 msgid "Plural Test: How many developers?" msgstr "Тест за Множину: Колико програмера?" -#: src/components/Switcher.tsx:15 +#: src/components/Switcher.tsx:11 msgid "Serbian" msgstr "Српски" -#: src/components/Switcher.tsx:16 +#: src/components/Switcher.tsx:12 msgid "Spanish" msgstr "Шпански" -#: src/pages/index.tsx:25 +#: src/pages/index.tsx:28 msgid "Translation Demo" msgstr "Демо Превод" -#: src/pages/index.tsx:32 +#: src/pages/index.tsx:35 msgid "Welcome to <0>Next.js!" msgstr "Добродошли у <0>Нект.јс!" - -#: src/components/AboutText.tsx:6 -msgid "next-explanation" -msgstr "Некст.јс је отворени изворни Реацт-ов развојни вебоквир који омогућава функционалност као што је приказивање на страни сервера и генерисање статичких веблокација за веб апликације засноване на Реацт-у." - -#: src/components/Developers.tsx:20 -msgid "{selected, plural, one {Developer} other {Developers}}" -msgstr "{selected, plural, one {Програмер} other {Програмера}}" diff --git a/examples/nextjs-swc/src/pages/index.tsx b/examples/nextjs-swc/src/pages/index.tsx index 9ead1d52b..21c3cc420 100644 --- a/examples/nextjs-swc/src/pages/index.tsx +++ b/examples/nextjs-swc/src/pages/index.tsx @@ -6,6 +6,7 @@ import Developers from '../components/Developers' import { Switcher } from '../components/Switcher' import styles from '../styles/Index.module.css' import { loadCatalog } from '../utils' +import { useLingui } from '@lingui/react' export const getStaticProps: GetStaticProps = async (ctx) => { const translation = await loadCatalog(ctx.locale!) @@ -17,9 +18,20 @@ 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() + return (
+ {/* + 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 . + That means we cannot use the component here and instead have to use `t` macro. + */} {t`Translation Demo`} diff --git a/examples/nextjs-swc/yarn.lock b/examples/nextjs-swc/yarn.lock index 9535b20e2..32ed5660a 100644 --- a/examples/nextjs-swc/yarn.lock +++ b/examples/nextjs-swc/yarn.lock @@ -761,10 +761,10 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.2.3": - version: 13.2.3 - resolution: "@next/env@npm:13.2.3" - checksum: e3d59b888c0e57ead895ec0c96ce92b6929684a1af8b3435e0142d21e6af21b1193f421f9d6b9b36ce7711a0379fb85033e25670fef3ba9c923cc77752be6c10 +"@next/env@npm:13.3.1": + version: 13.3.1 + resolution: "@next/env@npm:13.3.1" + checksum: 3bf01e62b7de1de9de0cf7a5904364a2e807ad4f0a6cabfbb288225696a0750163bee23669bd45bfbec17dcf1fe66512212bdfa5be0a341ad187270a3cc27943 languageName: node linkType: hard @@ -777,93 +777,65 @@ __metadata: languageName: node linkType: hard -"@next/swc-android-arm-eabi@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-android-arm-eabi@npm:13.2.3" - conditions: os=android & cpu=arm - languageName: node - linkType: hard - -"@next/swc-android-arm64@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-android-arm64@npm:13.2.3" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - -"@next/swc-darwin-arm64@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-darwin-arm64@npm:13.2.3" +"@next/swc-darwin-arm64@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-darwin-arm64@npm:13.3.1" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-darwin-x64@npm:13.2.3" +"@next/swc-darwin-x64@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-darwin-x64@npm:13.3.1" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-freebsd-x64@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-freebsd-x64@npm:13.2.3" - conditions: os=freebsd & cpu=x64 - languageName: node - linkType: hard - -"@next/swc-linux-arm-gnueabihf@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-linux-arm-gnueabihf@npm:13.2.3" - conditions: os=linux & cpu=arm - languageName: node - linkType: hard - -"@next/swc-linux-arm64-gnu@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-linux-arm64-gnu@npm:13.2.3" +"@next/swc-linux-arm64-gnu@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-linux-arm64-gnu@npm:13.3.1" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-linux-arm64-musl@npm:13.2.3" +"@next/swc-linux-arm64-musl@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-linux-arm64-musl@npm:13.3.1" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-linux-x64-gnu@npm:13.2.3" +"@next/swc-linux-x64-gnu@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-linux-x64-gnu@npm:13.3.1" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-linux-x64-musl@npm:13.2.3" +"@next/swc-linux-x64-musl@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-linux-x64-musl@npm:13.3.1" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-win32-arm64-msvc@npm:13.2.3" +"@next/swc-win32-arm64-msvc@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-win32-arm64-msvc@npm:13.3.1" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-win32-ia32-msvc@npm:13.2.3" +"@next/swc-win32-ia32-msvc@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-win32-ia32-msvc@npm:13.3.1" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.2.3": - version: 13.2.3 - resolution: "@next/swc-win32-x64-msvc@npm:13.2.3" +"@next/swc-win32-x64-msvc@npm:13.3.1": + version: 13.3.1 + resolution: "@next/swc-win32-x64-msvc@npm:13.3.1" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -929,12 +901,12 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.4.14": - version: 0.4.14 - resolution: "@swc/helpers@npm:0.4.14" +"@swc/helpers@npm:0.5.0": + version: 0.5.0 + resolution: "@swc/helpers@npm:0.5.0" dependencies: tslib: ^2.4.0 - checksum: 273fd3f3fc461a92f3790cc551ea054745c6d6959afbe1232e6d7aa1c722bbc114d308aab96bef5c78fc0303c85c7b472ef00e2253251cc89737f3b1af56e5a5 + checksum: 61c9c7dddb707deb58b85328cfe9d211887145f1311ae6a6e6c0fa9f781fb29916a8669a7d479e46e26a32a89d6ef4f293a22dee4925e009c84051e9dd10e8b7 languageName: node linkType: hard @@ -1438,6 +1410,15 @@ __metadata: languageName: node linkType: hard +"busboy@npm:1.6.0": + version: 1.6.0 + resolution: "busboy@npm:1.6.0" + dependencies: + streamsearch: ^1.1.0 + checksum: 32801e2c0164e12106bf236291a00795c3c4e4b709ae02132883fe8478ba2ae23743b11c5735a0aae8afe65ac4b6ca4568b91f0d9fed1fdbc32ede824a73746e + languageName: node + linkType: hard + "cacache@npm:^16.1.0": version: 16.1.3 resolution: "cacache@npm:16.1.3" @@ -3757,48 +3738,37 @@ __metadata: languageName: node linkType: hard -"next@npm:13.2.3": - version: 13.2.3 - resolution: "next@npm:13.2.3" - dependencies: - "@next/env": 13.2.3 - "@next/swc-android-arm-eabi": 13.2.3 - "@next/swc-android-arm64": 13.2.3 - "@next/swc-darwin-arm64": 13.2.3 - "@next/swc-darwin-x64": 13.2.3 - "@next/swc-freebsd-x64": 13.2.3 - "@next/swc-linux-arm-gnueabihf": 13.2.3 - "@next/swc-linux-arm64-gnu": 13.2.3 - "@next/swc-linux-arm64-musl": 13.2.3 - "@next/swc-linux-x64-gnu": 13.2.3 - "@next/swc-linux-x64-musl": 13.2.3 - "@next/swc-win32-arm64-msvc": 13.2.3 - "@next/swc-win32-ia32-msvc": 13.2.3 - "@next/swc-win32-x64-msvc": 13.2.3 - "@swc/helpers": 0.4.14 +"next@npm:13.3.1": + version: 13.3.1 + resolution: "next@npm:13.3.1" + dependencies: + "@next/env": 13.3.1 + "@next/swc-darwin-arm64": 13.3.1 + "@next/swc-darwin-x64": 13.3.1 + "@next/swc-linux-arm64-gnu": 13.3.1 + "@next/swc-linux-arm64-musl": 13.3.1 + "@next/swc-linux-x64-gnu": 13.3.1 + "@next/swc-linux-x64-musl": 13.3.1 + "@next/swc-win32-arm64-msvc": 13.3.1 + "@next/swc-win32-ia32-msvc": 13.3.1 + "@next/swc-win32-x64-msvc": 13.3.1 + "@swc/helpers": 0.5.0 + busboy: 1.6.0 caniuse-lite: ^1.0.30001406 postcss: 8.4.14 styled-jsx: 5.1.1 peerDependencies: - "@opentelemetry/api": ^1.4.0 + "@opentelemetry/api": ^1.1.0 fibers: ">= 3.1.0" node-sass: ^6.0.0 || ^7.0.0 react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 dependenciesMeta: - "@next/swc-android-arm-eabi": - optional: true - "@next/swc-android-arm64": - optional: true "@next/swc-darwin-arm64": optional: true "@next/swc-darwin-x64": optional: true - "@next/swc-freebsd-x64": - optional: true - "@next/swc-linux-arm-gnueabihf": - optional: true "@next/swc-linux-arm64-gnu": optional: true "@next/swc-linux-arm64-musl": @@ -3824,7 +3794,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 5147078cebf6156acd1dc54208b02852d23c50fe9fae9de444d9982090b63ac1975284d6e8d1647b78c98508c6d4be90a2debc3a12e383db423188724d38e6a9 + checksum: a685abbcfe028940f8e3c86f6712fadcba1ca92c68b4dddfd1192d93a4ebac2d0947cd62d8cecf530afbd8163b2ef6dfe338b1fe7b699d78bc7123624a7622db languageName: node linkType: hard @@ -3841,7 +3811,7 @@ __metadata: "@types/react": ^18.0.14 eslint: 8.35.0 eslint-config-next: 12.3.4 - next: 13.2.3 + next: 13.3.1 react: 18.2.0 react-dom: 18.2.0 typescript: ^4.7.4 @@ -4722,6 +4692,13 @@ __metadata: languageName: node linkType: hard +"streamsearch@npm:^1.1.0": + version: 1.1.0 + resolution: "streamsearch@npm:1.1.0" + checksum: 1cce16cea8405d7a233d32ca5e00a00169cc0e19fbc02aa839959985f267335d435c07f96e5e0edd0eadc6d39c98d5435fb5bbbdefc62c41834eadc5622ad942 + languageName: node + linkType: hard + "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.2.3": version: 4.2.3 resolution: "string-width@npm:4.2.3"