docs(examples): update examples (#1550)

.eslintignore

@@ -3,6 +3,7 @@
 **/fixtures/*
 **/locale/*
 website/*
+examples/*
 README.md
 **/npm/*
 /packages/*/build/**

examples/create-react-app/lingui.config.js

@@ -1,9 +1,10 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
 module.exports = {
   locales: ["en", "cs"],
   sourceLocale: "en",
   catalogs: [
     {
-      path: "<rootDir>/src/locales/{locale}/messages",
+      path: "<rootDir>/src/locales/{locale}",
       include: ["<rootDir>"],
       exclude: ["**/node_modules/**"],
     },

examples/create-react-app/package.json

@@ -3,19 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@lingui/core": "^3.13.2",
-    "@lingui/react": "^3.13.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@lingui/core": "^4.0.0-next.3",
+    "@lingui/react": "^4.0.0-next.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "scripts": {
-    "start": "yarn extract && yarn compile && react-scripts start",
-    "build": "yarn extract && yarn compile && react-scripts build",
+    "start": "yarn extract && react-scripts start",
+    "build": "yarn extract && react-scripts build",
     "test": "react-scripts test",
-    "test:ci": "yarn extract && yarn compile && react-scripts test --watchAll=false",
+    "test:ci": "yarn extract && react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
-    "extract": "lingui extract",
-    "compile": "lingui compile"
+    "extract": "lingui extract"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -33,18 +32,17 @@
     ]
   },
   "devDependencies": {
-    "@lingui/cli": "^3.13.2",
-    "@lingui/loader": "^3.13.2",
-    "@lingui/macro": "^3.13.2",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.6",
-    "@types/react": "^16.9.55",
-    "@types/react-dom": "^16.9.9",
-    "react-scripts": "4.0.0",
-    "typescript": "^4.0.5"
-  },
-  "packageManager": "yarn@1.22.19"
+    "@lingui/cli": "^4.0.0-next.3",
+    "@lingui/loader": "^4.0.0-next.3",
+    "@lingui/macro": "^4.0.0-next.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^16.18.18",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5"
+  }
 }

examples/create-react-app/src/App.test.tsx

@@ -3,13 +3,15 @@ import { getByText, render, act } from "@testing-library/react"
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
 
-import { messages } from "./locales/en/messages"
-import { messages as csMessages } from "./locales/cs/messages"
 import App from "./App"
 
 i18n.load({
-  en: messages,
-  cs: csMessages,
+  en: {
+    ZXBDaP: "Language switcher example:",
+  },
+  cs: {
+    ZXBDaP: "Příklad přepínače jazyků:",
+  },
 })
 
 const TestingProvider = ({ children }: any) => (

examples/create-react-app/src/i18n.ts

@@ -1,21 +1,41 @@
-import { i18n } from "@lingui/core"
+import { i18n, Messages } from "@lingui/core"
 
 export const locales = {
   en: "English",
   cs: "Česky",
 }
 export const defaultLocale = "en"
 
+// CRA mark all resources which are not JS as 'asset/resource'
+// Since we don't have access to the webpack config here is a dirty
+// way to avoid this limitation.
+// https://github.com/webpack/webpack/pull/10097#issuecomment-567116011
+
+// Unfortunately this workaround dosent work with dynamic loading
+// so we have to explicitly enumerate all catalogs here.
+const catalogs: Record<string, () => Promise<Messages>> = {
+  en: async () => {
+    const { messages } = await import(
+      // @ts-ignore
+      `./file.js!=!@lingui/loader!./locales/en.po`
+    )
+    return messages
+  },
+  cs: async () => {
+    const { messages } = await import(
+      // @ts-ignore
+      `./file.js!=!@lingui/loader!./locales/cs.po`
+    )
+    return messages
+  },
+}
 /**
  * We do a dynamic import of just the catalog that we need
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string) {
-  const { messages } = await import(
-    `@lingui/loader!./locales/${locale}/messages.po`
-  )
-  i18n.load(locale, messages)
-  i18n.activate(locale)
+  const messages = await catalogs[locale as any]()
+  i18n.loadAndActivate(locale, messages)
 }
 
 // If not we can just load all the catalogs and do a simple i18n.active(localeToActive)

examples/create-react-app/src/index.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React, { useEffect } from "react"
+import "./index.css"
+import App from "./App"
+import * as serviceWorker from "./serviceWorker"
 
-import { i18n } from "@lingui/core";
-import { I18nProvider } from '@lingui/react'
-import { defaultLocale, dynamicActivate } from './i18n';
+import { i18n } from "@lingui/core"
+import { I18nProvider } from "@lingui/react"
+import { defaultLocale, dynamicActivate } from "./i18n"
+import * as ReactDOMClient from "react-dom/client"
 
 const I18nApp = () => {
   useEffect(() => {
@@ -16,19 +16,18 @@ const I18nApp = () => {
 
   return (
     <I18nProvider i18n={i18n}>
-      <App  />
+      <App />
     </I18nProvider>
   )
 }
 
-ReactDOM.render(
+ReactDOMClient.createRoot(document.getElementById("root") as Element).render(
   <React.StrictMode>
     <I18nApp />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+  </React.StrictMode>
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()

examples/create-react-app/src/locales/cs/messages.po → examples/create-react-app/src/locales/cs.po

@@ -11,6 +11,10 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: src/App.tsx:31
+msgid "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"
+msgstr "{count, plural, zero {Nejsou žádné knihy} one {Je tu jedna kniha} other {Existuje # knih}}"
+
 #: src/App.tsx:37
 msgid "Date formatter example:"
 msgstr "Příklad formátovače data:"
@@ -42,7 +46,3 @@ msgstr "Příklad množného čísla:"
 #: src/App.tsx:39
 msgid "Today is {0}"
 msgstr "Dnes je {0}"
-
-#: src/App.tsx:31
-msgid "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"
-msgstr "{count, plural, zero {Nejsou žádné knihy} one {Je tu jedna kniha} other {Existuje # knih}}"

examples/create-react-app/src/locales/en/messages.po → examples/create-react-app/src/locales/en.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/App.tsx:31
+msgid "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"
+msgstr "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"
+
 #: src/App.tsx:37
 msgid "Date formatter example:"
 msgstr "Date formatter example:"
@@ -44,7 +48,3 @@ msgstr "Plurals example:"
 #: src/App.tsx:39
 msgid "Today is {0}"
 msgstr "Today is {0}"
-
-#: src/App.tsx:31
-msgid "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"
-msgstr "{count, plural, zero {There are no books} one {There's one book} other {There are # books}}"