refactor(macro): add tests for lingui#1797 issue

packages/cli/test/extractor-experimental-1797/expected/locales/_app.page/en.po

@@ -0,0 +1,8 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-15 10:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"

packages/cli/test/extractor-experimental-1797/expected/locales/_app.page/pl.po

@@ -0,0 +1,8 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-15 10:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: pl\n"

packages/cli/test/extractor-experimental-1797/expected/locales/index.page/en.po

@@ -0,0 +1,67 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-15 10:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+
+#: fixtures/pages/index.page.tsx:83
+#: fixtures/pages/index.page.tsx:85
+msgid "{0, plural, one {# Person} other {# Persons}}"
+msgstr "{0, plural, one {# Person} other {# Persons}}"
+
+#: fixtures/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr "{selected, plural, one {Developer} other {Developers}}"
+
+#: fixtures/pages/index.page.tsx:62
+msgid "<0>Next.js</0>say hi."
+msgstr "<0>Next.js</0>say hi."
+
+#: fixtures/components/Switcher.tsx:10
+msgid "English"
+msgstr "English"
+
+#: fixtures/components/AboutText.tsx:6
+msgid "Hello, world"
+msgstr "Hello, world"
+
+#. js-lingui-explicit-id
+#: fixtures/components/AboutText.tsx:8
+msgid "message.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."
+
+#: fixtures/pages/index.page.tsx:58
+#: fixtures/pages/index.page.tsx:60
+msgid "Plain text"
+msgstr "Plain text"
+
+#: fixtures/components/Developers.tsx:9
+msgid "Plural Test: How many developers?"
+msgstr "Plural Test: How many developers?"
+
+#: fixtures/components/Switcher.tsx:11
+msgid "Serbian"
+msgstr "Serbian"
+
+#: fixtures/components/Switcher.tsx:12
+msgid "Spanish"
+msgstr "Spanish"
+
+#: fixtures/pages/index.page.tsx:46
+msgid "Translation Demo"
+msgstr "Translation Demo"
+
+#: fixtures/pages/index.page.tsx:53
+msgid "Welcome to <0>Next.js!</0>"
+msgstr "Welcome to <0>Next.js!</0>"
+
+#: fixtures/pages/index.page.tsx:67
+msgid "Wonderful framework <0>Next.js</0>say hi."
+msgstr "Wonderful framework <0>Next.js</0>say hi."
+
+#: fixtures/pages/index.page.tsx:72
+msgid "Wonderful framework <0>Next.js</0>say hi. And <1>Next.js</1>say hi."
+msgstr "Wonderful framework <0>Next.js</0>say hi. And <1>Next.js</1>say hi."

packages/cli/test/extractor-experimental-1797/expected/locales/index.page/pl.po

@@ -0,0 +1,67 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-03-15 10:00+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: pl\n"
+
+#: fixtures/pages/index.page.tsx:83
+#: fixtures/pages/index.page.tsx:85
+msgid "{0, plural, one {# Person} other {# Persons}}"
+msgstr ""
+
+#: fixtures/components/Developers.tsx:20
+msgid "{selected, plural, one {Developer} other {Developers}}"
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:62
+msgid "<0>Next.js</0>say hi."
+msgstr ""
+
+#: fixtures/components/Switcher.tsx:10
+msgid "English"
+msgstr ""
+
+#: fixtures/components/AboutText.tsx:6
+msgid "Hello, world"
+msgstr ""
+
+#. js-lingui-explicit-id
+#: fixtures/components/AboutText.tsx:8
+msgid "message.next-explanation"
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:58
+#: fixtures/pages/index.page.tsx:60
+msgid "Plain text"
+msgstr ""
+
+#: fixtures/components/Developers.tsx:9
+msgid "Plural Test: How many developers?"
+msgstr ""
+
+#: fixtures/components/Switcher.tsx:11
+msgid "Serbian"
+msgstr ""
+
+#: fixtures/components/Switcher.tsx:12
+msgid "Spanish"
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:46
+msgid "Translation Demo"
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:53
+msgid "Welcome to <0>Next.js!</0>"
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:67
+msgid "Wonderful framework <0>Next.js</0>say hi."
+msgstr ""
+
+#: fixtures/pages/index.page.tsx:72
+msgid "Wonderful framework <0>Next.js</0>say hi. And <1>Next.js</1>say hi."
+msgstr ""

packages/cli/test/extractor-experimental-1797/fixtures/components/AboutText.tsx

@@ -0,0 +1,18 @@
+import { Trans } from '@lingui/macro'
+
+export function AboutText() {
+  return (
+    <p>
+      <Trans>Hello, world</Trans>
+      <br />
+      <Trans id="message.next-explanation">
+        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.
+      </Trans>
+    </p>
+  )
+}

packages/cli/test/extractor-experimental-1797/fixtures/components/Developers.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { Trans, Plural } from '@lingui/macro'
+
+export default function Developers() {
+  const [selected, setSelected] = useState('1')
+  return (
+    <div>
+      <p>
+        <Trans>Plural Test: How many developers?</Trans>
+      </p>
+      <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+        <select
+          value={selected}
+          onChange={(evt) => setSelected(evt.target.value)}
+        >
+          <option value={'1'}>1</option>
+          <option value={'2'}>2</option>
+        </select>
+        <p>
+          <Plural value={selected} one={'Developer'} other={`Developers`} />
+        </p>
+      </div>
+    </div>
+  )
+}

packages/cli/test/extractor-experimental-1797/fixtures/components/Switcher.tsx

@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { t, msg } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { MessageDescriptor } from '@lingui/core'
+
+type LOCALES = 'en' | 'sr' | 'es' | 'pseudo'
+
+const languages: { [key: string]: MessageDescriptor } = {
+  en: msg`English`,
+  sr: msg`Serbian`,
+  es: msg`Spanish`
+}
+
+export function Switcher() {
+  const router = useRouter()
+  const { i18n } = useLingui()
+
+  const [locale, setLocale] = useState<LOCALES>(
+    router.locale!.split('-')[0] as LOCALES
+  )
+
+  // disabled for DEMO - so we can demonstrate the 'pseudo' locale functionality
+  // if (process.env.NEXT_PUBLIC_NODE_ENV !== 'production') {
+  //   languages['pseudo'] = t`Pseudo`
+  // }
+
+  function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
+    const locale = event.target.value as LOCALES
+
+    setLocale(locale)
+    router.push(router.pathname, router.pathname, { locale })
+  }
+
+  return (
+    <select value={locale} onChange={handleChange}>
+      {Object.keys(languages).map((locale) => {
+        return (
+          <option value={locale} key={locale}>
+            {i18n._(languages[locale as unknown as LOCALES])}
+          </option>
+        )
+      })}
+    </select>
+  )
+}

packages/cli/test/extractor-experimental-1797/fixtures/pages/_app.page.tsx

@@ -0,0 +1,19 @@
+import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+import { useLinguiInit } from '../utils'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  useLinguiInit(pageProps.translation)
+
+  return (
+    <>
+      <I18nProvider i18n={i18n}>
+        <Component {...pageProps} />
+      </I18nProvider>
+    </>
+  )
+}
+
+export default MyApp

packages/cli/test/extractor-experimental-1797/fixtures/pages/index.page.tsx

@@ -0,0 +1,92 @@
+import { Plural, t, Trans } from '@lingui/macro'
+
+import path from 'path'
+import { GetStaticProps, NextPage } from 'next'
+import Head from 'next/head'
+import { AboutText } from '../components/AboutText'
+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 fileName = __filename
+  const cwd = process.cwd()
+  const { locale } = ctx
+
+  const pathname = path
+    .relative(cwd, fileName)
+    .replace('.next/server/pages/', '')
+    .replace('.js', '')
+
+  const translation = await loadCatalog(locale || 'en', pathname)
+  return {
+    props: {
+      translation
+    }
+  }
+}
+
+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>
+
+      <main className={styles.main}>
+        <Switcher />
+        <h1 className={styles.title}>
+          <Trans>
+            Welcome to <a href="https://nextjs.org">Next.js!</a>
+          </Trans>
+        </h1>
+        <h2>
+          <Trans>Plain text</Trans>
+        </h2>
+        <h2>{t`Plain text`}</h2>
+        <h2>
+          <Trans>
+            <a href="https://nextjs.org">Next.js</a> say hi.
+          </Trans>
+        </h2>
+        <h2>
+          <Trans>
+            Wonderful framework <a href="https://nextjs.org">Next.js</a> say hi.
+          </Trans>
+        </h2>
+        <h2>
+          <Trans>
+            Wonderful framework <a href="https://nextjs.org">Next.js</a> say hi.
+            And <a href="https://nextjs.org">Next.js</a> say hi.
+          </Trans>
+        </h2>
+        <div className={styles.description}>
+          <AboutText />
+        </div>
+        <Developers />
+
+        <div>
+          <Plural value={1} one={'# Person'} other={`# Persons`} />
+          <br />
+          <Plural value={2} one={'# Person'} other={`# Persons`} />
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default Index