Merge branch 'main' into next

README.md

@@ -41,8 +41,8 @@ Lingui is an easy yet powerful internationalization framework for global project
   message keys as well as auto-generated messages. Translations are stored either in
   JSON or standard PO files, which are supported in almost all translation tools.
 
-- **Lightweight and optimized** - Core library is only [1.9 kB gzipped][BundleCore],
-  React components are an additional [3.1 kBs gzipped][BundleReact]. That's less than Redux
+- **Lightweight and optimized** - Core library is only [1.7 kB gzipped][BundleCore],
+  React components are an additional [1.6 kBs gzipped][BundleReact]. That's less than Redux
   for a full-featured intl library.
 
 - **Active community** - Join us on [Discord][Discord] to discuss the latest development.

packages/cli/src/lingui-extract.ts

@@ -160,9 +160,14 @@ if (require.main === module) {
 
   const changedPaths = new Set<string>()
   let debounceTimer: NodeJS.Timer
+  let previousExtract = Promise.resolve(true)
   const dispatchExtract = (filePath?: string[]) => {
-    // Skip debouncing if not enabled
-    if (!options.debounce) return extract(filePath)
+    // Skip debouncing if not enabled but still chain them so no racing issue
+    // on deleting the tmp folder.
+    if (!program.debounce) {
+      previousExtract = previousExtract.then(() => extract(filePath))
+      return previousExtract
+    }
 
     filePath?.forEach((path) => changedPaths.add(path))
 

packages/core/src/i18n.ts

@@ -53,12 +53,16 @@ export type MissingMessageEvent = {
   context?: string
 }
 
+type MissingHandler =
+  | string
+  | ((locale: string, id: string, context: string) => string)
+
 type setupI18nProps = {
   locale?: Locale
   locales?: Locales
   messages?: AllMessages
   localeData?: AllLocaleData
-  missing?: string | ((message: string, id: string, context: string) => string)
+  missing?: MissingHandler
 }
 
 type Events = {
@@ -71,7 +75,7 @@ export class I18n extends EventEmitter<Events> {
   private _locales: Locales
   private _localeData: AllLocaleData
   private _messages: AllMessages
-  private _missing: string | ((message, id, context) => string)
+  private _missing: MissingHandler
 
   constructor(params: setupI18nProps) {
     super()

website/docs/guides/optimized-components.md

@@ -48,7 +48,7 @@ import { t, Trans } from '@lingui/macro'
 
 class HeaderLink extends React.PureComponent {
    render () {
-      return <a title={i18n._(t`Title`)}><Trans>Header</Trans></a>
+      return <a title={t`Title`}><Trans>Header</Trans></a>
    }
 }
 

website/docs/introduction.md

@@ -36,7 +36,7 @@ Integrate Lingui into your existing workflow. It supports message keys as well a
 
 ### Lightweight and optimized
 
-Core library is only [3.4 kB gzipped](https://bundlephobia.com/result?p=@lingui/core), React components are additional [2.9 kB gzipped](https://bundlephobia.com/result?p=@lingui/react). That's less than Redux for a full-featured intl library.
+Core library is only [1.7 kB gzipped](https://bundlephobia.com/result?p=@lingui/core), React components are additional [1.6 kB gzipped](https://bundlephobia.com/result?p=@lingui/react). That's less than Redux for a full-featured intl library.
 
 ### Active community
 

website/docs/ref/core.md

@@ -289,13 +289,13 @@ const i18n = setupI18n({ missing: "🚨" })
 i18n._('missing translation') === "🚨"
 ```
 
-This might be also a function which is called with active language and message ID:
+This might be also a function which is called with active locale and message ID:
 
 ``` jsx
 import { setupI18n } from "@lingui/core"
 
-function missing(language, id) {
-   alert(`Translation in ${language} for ${id} is missing!`)
+function missing(locale, id) {
+   alert(`Translation in ${locale} for ${id} is missing!`)
    return id
 }
 

website/docs/ref/macro.md

@@ -792,18 +792,22 @@ import { SelectOrdinal } from "@lingui/macro"
 
  > MessageFormat: `{arg, select, ...forms}`
 
+:::note
+The select cases except `other` should be prefixed with underscore: `_male` or `_female`.
+:::
+
 Props of `Select` macro are transformed into [`select`](/docs/ref/message-format.md) format:
 
 ``` jsx
 import { Select } from "@lingui/macro"
 
 // gender == "female"      -> Her book
 // gender == "male"        -> His book
-// gender == "unspecified" -> Their book
+// gender == "non-binary"  -> Their book
 <Select
     value={gender}
-    male="His book"
-    female="Her book"
+    _male="His book"
+    _female="Her book"
     other="Their book"
 />
 ```

website/docs/ref/swc-plugin.md

@@ -21,18 +21,22 @@ Add the following configuration to your [`.swcrc`](https://swc.rs/docs/configura
   "$schema": "https://json.schemastore.org/swcrc",
   "jsc": {
     "experimental": {
-      "plugins": ["@lingui/swc-plugin", {
-
-        // Optional
-        // Unlike the JS version this option must be passed as object only.
-        // Docs https://lingui.js.org/ref/conf.html#std-config-runtimeConfigModule
-        // "runtimeModules": {
-        //   "i18n": ["@lingui/core", "i18n"],
-        //   "trans": ["@lingui/react", "Trans"]
-        // }
-      }]
-    }
-  }
+      "plugins": [
+        [
+          "@lingui/swc-plugin",
+          {
+            // Optional
+            // Unlike the JS version this option must be passed as object only.
+            // Docs https://lingui.dev/ref/conf#runtimeconfigmodule
+            // "runtimeModules": {
+            //   "i18n": ["@lingui/core", "i18n"],
+            //   "trans": ["@lingui/react", "Trans"]
+            // }
+          },
+        ],
+      ],
+    },
+  },
 }
 ```
 

website/docs/tools/introduction.md

@@ -37,16 +37,18 @@ Instead of manually sending and receiving many emails and fixing the inconsisten
 
 ## Configure your project
 
-To synchronize your current application with an online tool, you just have to add these lines at the end of your `.linguirc` configuration file:
+To synchronize your current application with an online tool, you just have to add these lines at the end of your `lingui.config.js` configuration file:
 
-```js title=".linguirc"
-{
+```js title="lingui.config.js"
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
   [...]
-  "service": {
-    "name": "ToolName",
-    "apiKey": "abcdefghijklmnopqrstuvwxyz012345"
+  service: {
+    name: "ToolName",
+    apiKey: "abcdefghijklmnopqrstuvwxyz012345"
   }
 }
+
 ```
 
 The synchronization will then be part of the [`extract`](/docs/ref/cli.md#extract) command.

website/docs/tutorials/react.md

@@ -156,14 +156,15 @@ No locales defined!
 Add 'locales' to your configuration. See https://lingui.dev/ref/conf#locales
 ```
 
-We need here to fix the configuration. Create a `.linguirc` file:
-
-```json title=".linguirc"
-{
-  "locales": ["cs", "en"],
-  "catalogs": [{
-    "path": "src/locales/{locale}/messages",
-    "include": ["src"]
+We need here to fix the configuration. Create a `lingui.config.js` file:
+
+```js title="lingui.config.js"
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+  locales: ["cs", "en"],
+  catalogs: [{
+    path: "src/locales/{locale}/messages",
+    include: ["src"]
   }]
 }
 ```

website/docs/tutorials/setup-cra.md

@@ -25,17 +25,18 @@
     npm install --save @lingui/macro @lingui/react
     ```
 
-3.  Create `.linguirc` file with LinguiJS configuration in root of your project (next to `package.json`):
-
-    ``` json title=".linguirc"
-    {
-       "locales": ["en", "cs", "fr"],
-       "sourceLocale": "en",
-       "catalogs": [{
-          "path": "src/locales/{locale}/messages",
-          "include": ["src"]
+3.  Create `lingui.config.js` file with LinguiJS configuration in root of your project (next to `package.json`):
+
+    ```js title="lingui.config.js"
+    /** @type {import('@lingui/conf').LinguiConfig} */
+    module.exports = {
+       locales: ["en", "cs", "fr"],
+       sourceLocale: "en",
+       catalogs: [{
+          path: "src/locales/{locale}/messages",
+          include: ["src"]
        }],
-       "format": "po"
+       format: "po"
     }
     ```
 

website/docs/tutorials/setup-react.md

@@ -38,16 +38,17 @@ This setup guide is for any project which uses React.
     If you use any preset, check first if it contains `macros` plugin. These presets already includes `macros` plugin: `react-scripts`
     :::
 
-3.  Create `.linguirc` file with LinguiJS configuration in root of your project (next to `package.json`). Replace `src` with a directory name where you have source files:
-
-    ```json title=".linguirc"
-    {
-       "locales": ["en", "cs", "fr"],
-       "catalogs": [{
-          "path": "src/locales/{locale}/messages",
-          "include": ["src"]
+3.  Create `lingui.config.js` file with LinguiJS configuration in root of your project (next to `package.json`). Replace `src` with a directory name where you have source files:
+
+    ```js title="lingui.config.js"
+    /** @type {import('@lingui/conf').LinguiConfig} */
+    module.exports = {
+       locales: ["en", "cs", "fr"],
+       catalogs: [{
+          path: "src/locales/{locale}/messages",
+          include: ["src"]
        }],
-       "format": "po"
+       format: "po"
     }
     ```
 

website/package.json

@@ -15,9 +15,9 @@
     "fixFormat": "prettier --write ."
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.2.0",
+    "@docusaurus/core": "2.3.1",
+    "@docusaurus/preset-classic": "2.3.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.3.1",
     "@mdx-js/react": "1.6.22",
     "clsx": "1.2.1",
     "docusaurus-plugin-sass": "^0.2.3",
@@ -31,9 +31,9 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "2.2.0",
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@docusaurus/utils": "2.2.0",
+    "@docusaurus/eslint-plugin": "2.3.1",
+    "@docusaurus/module-type-aliases": "2.3.1",
+    "@docusaurus/utils": "2.3.1",
     "@tsconfig/docusaurus": "1.0.6",
     "@types/react": "17.0.0",
     "@types/react-helmet": "6.1.6",

website/src/components/Code.module.scss

@@ -0,0 +1,8 @@
+.code {
+  margin-top: 80px;
+  margin-bottom: 40px;
+}
+
+.linkExamples {
+  text-align: center;
+}

website/src/components/Code.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+import CodeBlock from '@theme/CodeBlock';
+import Button from './Button';
+
+import styles from './Code.module.scss';
+
+const Code = (): React.ReactElement => {
+  const { withBaseUrl } = useBaseUrlUtils();
+
+  const codeSample = `
+import { Trans } from "@lingui/macro"
+
+function App() {
+  return (
+    <Trans id="msg.docs">
+      Read the <a href="https://lingui.dev">documentation</a>
+      for more info.
+    </Trans>
+  )
+}
+`;
+
+  return (
+    <section className={clsx(styles.code, 'col col--6 col--offset-3')}>
+      <div className="container">
+        <h2 className={'text--center margin-bottom--lg'}>Integrating Lingui into Your Project is Easy!</h2>
+        <CodeBlock className="language-jsx">{codeSample.trim()}</CodeBlock>
+      </div>
+
+      <div className={styles.linkExamples}>
+        <Button href={withBaseUrl('/tutorials/react')} isOutline={true}>
+          More Examples
+        </Button>
+      </div>
+    </section>
+  );
+};
+
+export default Code;

website/src/components/Features.module.scss

@@ -48,7 +48,6 @@
 }
 
 .linkFeatures {
-  margin-top: 2rem;
   text-align: center;
 }
 

website/src/components/Header.module.scss

@@ -60,6 +60,12 @@
   font-weight: 700;
 }
 
+@media only screen and (max-width: 600px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+}
+
 .heroBannerLogo {
   max-width: 170px;
   max-height: 170px;

website/src/pages/index.tsx

@@ -4,6 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Features from '../components/Features';
 import Header from '../components/Header';
 import Users from '../components/Users';
+import Code from '../components/Code';
 
 function Home() {
   const { siteConfig } = useDocusaurusContext();
@@ -13,6 +14,7 @@ function Home() {
       <Header />
       <main className={'main-page-content'}>
         <Features />
+        <Code />
         <Users />
       </main>
     </Layout>