Skip to content

Commit cbb4de3

Browse files
antfuantfu
committed
feat(lingui): minimal support for lingui, close #513 
1 parent 29e4668 commit cbb4de3

26 files changed

+621
-1
lines changed

‎examples/by-frameworks/lingui-nextjs/.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"next/babel"
4+
],
5+
"plugins": ["macros"]
6+
}

‎examples/by-frameworks/lingui-nextjs/.vscode/settings.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"i18n-ally.localesPaths": [
3+
"locale"
4+
]
5+
}

‎examples/by-frameworks/lingui-nextjs/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Ported from https://github.com/lingui/js-lingui/tree/main/examples/next-js

‎examples/by-frameworks/lingui-nextjs/lingui-example/components/Layout.module.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.container {
2+
min-height: 100vh;
3+
max-width: 960px;
4+
width: 100%;
5+
padding: 0 0.5rem;
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
12+
.main {
13+
flex: 1;
14+
}
15+
16+
.footer {
17+
width: 100%;
18+
height: 100px;
19+
border-top: 1px solid #eaeaea;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.footer img {
26+
margin-left: 0.5rem;
27+
}
28+
29+
.footer a {
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
35+
.logo {
36+
height: 1em;
37+
}
38+
39+
.link {
40+
border: none;
41+
background: none;
42+
cursor: pointer;
43+
font-size: inherit;
44+
}

‎examples/by-frameworks/lingui-nextjs/lingui-example/components/Layout.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Head from "next/head"
2+
import classnames from "classnames"
3+
4+
import { t, Trans } from "@lingui/macro"
5+
6+
import { activate } from "lingui-example/i18n"
7+
import styles from "./Layout.module.css"
8+
9+
export function Layout({ title = null, className = "", children }) {
10+
// Default props can't be translated at module level because active locale
11+
// isn't known when module is imported, but rather when component
12+
// is rendered.
13+
if (title == null) {
14+
title = t`Example project using LinguiJS`
15+
}
16+
17+
return (
18+
<div className={styles.container}>
19+
<Head>
20+
<title>{title}</title>
21+
<link rel="icon" href="/favicon.ico" />
22+
</Head>
23+
24+
<main className={classnames(styles.main, className)}>{children}</main>
25+
26+
<footer className={styles.footer}>
27+
<a
28+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
<Trans>
33+
Powered by{" "}
34+
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
35+
</Trans>
36+
</a>
37+
&nbsp;{" | "}
38+
<button className={styles.link} onClick={() => activate("en")}>
39+
English
40+
</button>
41+
{" | "}
42+
<button className={styles.link} onClick={() => activate("cs")}>
43+
Česky
44+
</button>
45+
</footer>
46+
</div>
47+
)
48+
}

‎examples/by-frameworks/lingui-nextjs/lingui-example/components/PluralExample.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react"
2+
3+
export function PluralExample({ initialValue = 1, render }) {
4+
const [value, setValue] = React.useState(initialValue)
5+
6+
return (
7+
<div>
8+
<div>{render({ value })}</div>
9+
<div>
10+
<input
11+
value={value}
12+
onChange={(e) => setValue(e.target.value as any)}
13+
/>
14+
</div>
15+
</div>
16+
)
17+
}

‎examples/by-frameworks/lingui-nextjs/lingui-example/i18n.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { i18n } from "@lingui/core"
2+
import { en, cs } from "make-plural/plurals"
3+
4+
i18n.loadLocaleData("en", { plurals: en })
5+
i18n.loadLocaleData("cs", { plurals: cs })
6+
7+
/**
8+
* Load messages for requested locale and activate it.
9+
* This function isn't part of the LinguiJS library because there are
10+
* many ways how to load messages — from REST API, from file, from cache, etc.
11+
*/
12+
export async function activate(locale: string) {
13+
const { messages } = await import(`../locale/${locale}/messages.po`)
14+
i18n.load(locale, messages)
15+
i18n.activate(locale)
16+
}

‎examples/by-frameworks/lingui-nextjs/lingui-example/styles.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7+
}
8+
9+
a {
10+
color: inherit;
11+
text-decoration: none;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}

‎examples/by-frameworks/lingui-nextjs/lingui.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
locales: ["en", "cs"],
3+
sourceLocale: "en",
4+
catalogs: [
5+
{
6+
path: "<rootDir>/locale/{locale}/messages",
7+
include: ["<rootDir>/"],
8+
exclude: ["**/node_modules/**"],
9+
},
10+
],
11+
}

‎examples/by-frameworks/lingui-nextjs/locale/cs/messages.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/by-frameworks/lingui-nextjs/locale/cs/messages.po

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
msgid ""
2+
msgstr ""
3+
"POT-Creation-Date: 2020-04-04 12:09+0200\n"
4+
"Mime-Version: 1.0\n"
5+
"Content-Type: text/plain; charset=utf-8\n"
6+
"Content-Transfer-Encoding: 8bit\n"
7+
"X-Generator: @lingui/cli\n"
8+
"Language: cs\n"
9+
"Project-Id-Version: \n"
10+
"Report-Msgid-Bugs-To: \n"
11+
"PO-Revision-Date: \n"
12+
"Last-Translator: \n"
13+
"Language-Team: \n"
14+
"Plural-Forms: \n"
15+
16+
#: pages/index.tsx:36
17+
msgid "Checkout LinguiJS examples and usecases."
18+
msgstr "Podívej se na ukázky a příklady LinguiJS"
19+
20+
#: pages/index.tsx:21
21+
msgid "Documentation →"
22+
msgstr "Dokumentace →"
23+
24+
#: lingui-example/components/Layout.tsx:11
25+
msgid "Example project using LinguiJS"
26+
msgstr "Ukázkový projekt s LinguiJS"
27+
28+
#: pages/examples.tsx:7
29+
msgid "Examples"
30+
msgstr "Ukázky"
31+
32+
#: pages/index.tsx:33
33+
msgid "Examples →"
34+
msgstr "Ukázky →"
35+
36+
#: pages/index.tsx:24
37+
msgid "Find in-depth information about LinguiJS features and API."
38+
msgstr "Vyhledej podrobné informace o funkcích LinguiJS"
39+
40+
#: pages/index.tsx:13
41+
msgid "Get started by editing <0>locale/en/messages.po</0>"
42+
msgstr "Začni úpravou <0>locale/cs/messages.po</0>"
43+
44+
#: pages/examples.tsx:11
45+
msgid "Plurals"
46+
msgstr "Množné číslo"
47+
48+
#: lingui-example/components/Layout.tsx:23
49+
msgid "Powered by <0/>"
50+
msgstr "Používá <0/>"
51+
52+
#: pages/index.tsx:8
53+
msgid "Welcome to <0>LinguiJS!</0>"
54+
msgstr "Vítá tě <0>LinguiJS!</0>"
55+
56+
#: pages/examples.tsx:15
57+
#: pages/examples.tsx:19
58+
msgid "{value, plural, one {There's one book} other {There are # books}}"
59+
msgstr "{value, plural, one {Je tam jedna kniha} few {Jsou tam # knihy} other {Je tam # knih}}"

‎examples/by-frameworks/lingui-nextjs/locale/en/messages.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/by-frameworks/lingui-nextjs/locale/en/messages.po

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
msgid ""
2+
msgstr ""
3+
"POT-Creation-Date: 2020-04-04 13:38+0200\n"
4+
"Mime-Version: 1.0\n"
5+
"Content-Type: text/plain; charset=utf-8\n"
6+
"Content-Transfer-Encoding: 8bit\n"
7+
"X-Generator: @lingui/cli\n"
8+
"Language: en\n"
9+
"Project-Id-Version: \n"
10+
"Report-Msgid-Bugs-To: \n"
11+
"PO-Revision-Date: \n"
12+
"Last-Translator: \n"
13+
"Language-Team: \n"
14+
"Plural-Forms: \n"
15+
16+
#: pages/index.tsx:36
17+
msgid "Checkout LinguiJS examples and usecases."
18+
msgstr "Checkout LinguiJS examples and usecases."
19+
20+
#: pages/index.tsx:21
21+
msgid "Documentation →"
22+
msgstr "Documentation →"
23+
24+
#: lingui-example/components/Layout.tsx:11
25+
msgid "Example project using LinguiJS"
26+
msgstr "Example project using LinguiJS"
27+
28+
#: pages/examples.tsx:7
29+
msgid "Examples"
30+
msgstr "Examples"
31+
32+
#: pages/index.tsx:33
33+
msgid "Examples →"
34+
msgstr "Examples →"
35+
36+
#: pages/index.tsx:24
37+
msgid "Find in-depth information about LinguiJS features and API."
38+
msgstr "Find in-depth information about LinguiJS features and API."
39+
40+
#: pages/index.tsx:13
41+
msgid "Get started by editing <0>locale/en/messages.po</0>"
42+
msgstr "Get started by editing <0>locale/en/messages.po</0>"
43+
44+
#: pages/examples.tsx:11
45+
msgid "Plurals"
46+
msgstr "Plurals"
47+
48+
#: lingui-example/components/Layout.tsx:23
49+
msgid "Powered by <0/>"
50+
msgstr "Powered by <0/>"
51+
52+
#: pages/index.tsx:8
53+
msgid "Welcome to <0>LinguiJS!</0>"
54+
msgstr "Welcome to <0>LinguiJS!</0>"
55+
56+
#: pages/examples.tsx:15
57+
#: pages/examples.tsx:19
58+
msgid "{value, plural, one {There's one book} other {There are # books}}"
59+
msgstr "{value, plural, one {There's one book} other {There are # books}}"

‎examples/by-frameworks/lingui-nextjs/next.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
webpack: (config, { isServer }) => {
3+
config.module.rules = [
4+
...config.module.rules,
5+
{
6+
test: /\.po/,
7+
use: [
8+
{
9+
loader: "@lingui/loader",
10+
},
11+
],
12+
},
13+
];
14+
15+
return config;
16+
},
17+
future: {
18+
webpack5: true,
19+
},
20+
}

‎examples/by-frameworks/lingui-nextjs/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "next-js-ng",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"extract": "lingui extract",
7+
"compile": "lingui compile",
8+
"dev": "next dev",
9+
"build": "next build",
10+
"start": "next start"
11+
},
12+
"dependencies": {
13+
"@lingui/core": "^3.8.9",
14+
"@lingui/react": "^3.8.9",
15+
"classnames": "^2.3.1",
16+
"next": "10.1.3",
17+
"react": "17.0.2",
18+
"react-dom": "17.0.2"
19+
},
20+
"devDependencies": {
21+
"@lingui/cli": "^3.8.9",
22+
"@lingui/loader": "^3.8.9",
23+
"@lingui/macro": "^3.8.9",
24+
"@types/react": "^17.0.3",
25+
"babel-plugin-macros": "^3.0.1",
26+
"typescript": "^4.2.4",
27+
"webpack": "^5.0.0"
28+
}
29+
}

‎examples/by-frameworks/lingui-nextjs/pages/_app.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useEffect } from "react"
2+
3+
import { I18nProvider } from "@lingui/react"
4+
import { i18n } from "@lingui/core"
5+
6+
import { activate } from "lingui-example/i18n"
7+
import "lingui-example/styles.css"
8+
9+
export default function Page({ Component, pageProps }) {
10+
useEffect(() => {
11+
// Activate the default locale on page load
12+
activate("en")
13+
}, [])
14+
15+
return (
16+
<I18nProvider i18n={i18n}>
17+
<Component {...pageProps} />
18+
</I18nProvider>
19+
)
20+
}

‎examples/by-frameworks/lingui-nextjs/pages/api/hello.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
3+
export default (req, res) => {
4+
res.statusCode = 200
5+
res.json({ name: 'John Doe' })
6+
}

0 commit comments

Comments
 (0)