examples: migrate examples to v4 (#1674)

Author: timofei-iatsenko

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 (
     <div className="App">
       <header className="App-header">
-        <img className="App-logo" src="https://avatars3.githubusercontent.com/u/11225539?s=200&v=4" /> 
-        <h3 data-testid="h3-title"><Trans>Language switcher example: </Trans></h3>
+        <img
+          className="App-logo"
+          src="https://avatars3.githubusercontent.com/u/11225539?s=200&v=4"
+        />
+        <h3 data-testid="h3-title">
+          <Trans>Language switcher example: </Trans>
+        </h3>
         <div className="lang-container">
           {Object.values(locales).map((locale, index) => (
-            <button type="button" onClick={() => dynamicActivate(Object.keys(locales)[index])} key={locale}>
+            <button
+              type="button"
+              onClick={() => dynamicActivate(Object.keys(locales)[index])}
+              key={locale}
+            >
               {locale}
             </button>
           ))}
         </div>
-        <h3><Trans>Plurals example: </Trans></h3>
+        <h3>
+          <Trans>Plurals example: </Trans>
+        </h3>
         <div className="lang-container">
-          <button type="button" onClick={() => setCount(state => state + 1)}>
+          <button type="button" onClick={() => setCount((state) => state + 1)}>
             <Trans>Increment</Trans>
           </button>
-          <button type="button" onClick={() => setCount(state => state - 1)}>
+          <button type="button" onClick={() => setCount((state) => state - 1)}>
             <Trans>Decrement</Trans>
           </button>
         </div>
@@ -34,21 +46,24 @@ function App() {
           one={"There's one book"}
           other={"There are # books"}
         />
-        <h3><Trans>Date formatter example:</Trans></h3>
+        <h3>
+          <Trans>Date formatter example:</Trans>
+        </h3>
         <div>
-          <Trans>
-          Today is {i18n.date(new Date(), {})}
-          </Trans>
+          <Trans>Today is {i18n.date(new Date(), {})}</Trans>
         </div>
-        <h3><Trans>Number formatter example:</Trans></h3>
+        <h3>
+          <Trans>Number formatter example:</Trans>
+        </h3>
         <div>
           <Trans>
-          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" })}
           </Trans>
         </div>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

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:

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"
   },

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() {
           <option value={'2'}>2</option>
         </select>
         <p>
-          {plural(selected, {
-            one: 'Developer',
-            other: `Developers`
-          })}
+          <Plural value={selected} one={'Developer'} other={`Developers`} />
         </p>
       </div>
     </div>

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!</0>"
 msgstr "Welcome to <0>Next.js!</0>"
-
-#: 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}}"

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!</0>"
 msgstr "Bienvenido a <0>Next.js!</0>"
-
-#: 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}}"

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!</0>"
 msgstr ""
-
-#: src/components/AboutText.tsx:6
-msgid "next-explanation"
-msgstr ""
-
-#: src/components/Developers.tsx:20
-msgid "{selected, plural, one {Developer} other {Developers}}"
-msgstr ""

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!</0>"
 msgstr "Добродошли у <0>Нект.јс!</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 {Програмера}}"

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 (
     <div className={styles.container}>
       <Head>
+        {/*
+         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>{t`Translation Demo`}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>