Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 299f412

Browse files
tengmaoqingtengmaoqing
authored
Merge branch 'canary' into fix_finally_polyfill
2 parents 5d01678 + 20a4928 commit 299f412

31 files changed

+378
-378
lines changed

‎docs/basic-features/typescript.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Next.js will automatically configure this file with default values. Providing yo
2323

2424
> Next.js uses Babel to handle TypeScript, which has some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats), and some [compiler options are handled differently](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options).
2525
26-
Then, run `next` (normally `npm run dev`) and Next.js will guide you through the installation of the required packages to finish the setup:
26+
Then, run `next` (normally `npm run dev` or `yarn dev`) and Next.js will guide you through the installation of the required packages to finish the setup:
2727

2828
```bash
2929
npm run dev

‎docs/getting-started.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ Install `next`, `react` and `react-dom` in your project:
3737

3838
```bash
3939
npm install next react react-dom
40+
# or
41+
yarn add next react react-dom
4042
```
4143

4244
Open `package.json` and add the following `scripts`:
@@ -71,7 +73,7 @@ function HomePage() {
7173
export default HomePage
7274
```
7375

74-
To start developing your application run `npm run dev`. This starts the development server on `http://localhost:3000`.
76+
To start developing your application run `npm run dev` or `yarn dev`. This starts the development server on `http://localhost:3000`.
7577

7678
Visit `http://localhost:3000` to view your application.
7779

‎examples/with-react-intl/.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": ["next/babel"],
3+
"plugins": [
4+
["babel-plugin-react-intl", {
5+
"ast": true,
6+
"idInterpolationPattern": "[sha512:contenthash:base64:6]",
7+
"extractFromFormatMessageCall": true
8+
}]
9+
]
10+
}

‎examples/with-react-intl/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,4 @@ yarn-error.log*
3333

3434
# vercel
3535
.vercel
36+
compiled-lang

‎examples/with-react-intl/.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

‎examples/with-react-intl/README.md

+6-43
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
# Example app with [React Intl][]
22

3-
This example app shows how to integrate [React Intl][] with Next.
3+
This example app shows how to integrate [React Intl][] with Next.js.
44

55
## How to use
66

7-
### Using `create-next-app`
8-
97
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
108

119
```bash
@@ -14,39 +12,21 @@ npx create-next-app --example with-react-intl with-react-intl-app
1412
yarn create next-app --example with-react-intl with-react-intl-app
1513
```
1614

17-
### Download manually
18-
19-
Download the example:
20-
21-
```bash
22-
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-intl
23-
cd with-react-intl
24-
```
25-
26-
Install it and run:
27-
28-
```bash
29-
npm install
30-
npm run dev
31-
# or
32-
yarn
33-
yarn dev
34-
```
35-
3615
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
3716

38-
### Features of this example app
17+
## Features of this example app
3918

4019
- Server-side language negotiation
4120
- React Intl locale data loading via `pages/_document.js` customization
4221
- React Intl integration with [custom App](https://github.com/vercel/next.js#custom-app) component
4322
- `<IntlProvider>` creation with `locale`, `messages` props
44-
- Default message extraction via `babel-plugin-react-intl` integration
23+
- Default message extraction via `@formatjs/cli` integration
24+
- Pre-compile messages into AST with `babel-plugin-react-intl` for performance
4525
- Translation management via build script and customized Next server
4626

4727
### Translation Management
4828

49-
This app stores translations and default strings in the `lang/` dir. This dir has `.messages/` subdir which is where React Intl's Babel plugin outputs the default messages it extracts from the source code. The default messages (`en.json` in this example app) is also generated by the build script. This file can then be sent to a translation service to perform localization for the other locales the app should support.
29+
This app stores translations and default strings in the `lang/` dir. The default messages (`en.json` in this example app) is also generated by the build script. This file can then be sent to a translation service to perform localization for the other locales the app should support.
5030

5131
The translated messages files that exist at `lang/*.json` are only used during production, and are automatically provided to the `<IntlProvider>`. During development the `defaultMessage`s defined in the source code are used. To prepare the example app for localization and production run the build script and start the server in production mode:
5232

@@ -57,21 +37,4 @@ $ npm start
5737

5838
You can then switch your browser's language preferences to French and refresh the page to see the UI update accordingly.
5939

60-
### FormattedHTMLMessage support (react-intl pre-v4)
61-
62-
Out of the box, this example does not support the use of the `FormattedHTMLMessage` component on the server due to `DOMParser` not being present in a Node environment.
63-
This functionality is deprecated and has been removed as of react-intl 4.0
64-
If you still want to enable this feature, you should install a `DOMParser` implementation (e.g. `xmldom` or `jsdom`) and enable the polyfill in `server.js`:
65-
66-
```js
67-
// Polyfill Node with `DOMParser` required by formatjs.
68-
// See: https://github.com/vercel/next.js/issues/10533
69-
const { DOMParser } = require('xmldom')
70-
global.DOMParser = DOMParser
71-
```
72-
73-
[react intl]: https://github.com/yahoo/react-intl
74-
75-
### Transpile react-intl
76-
77-
According to [react-intl docs](https://github.com/formatjs/react-intl/blob/53f2c826c7b1e50ad37215ce46b5e1c6f5d142cc/docs/Getting-Started.md#esm-build), react-intl and its underlying libraries must be transpiled to support older browsers (eg IE11). This is done by [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) in next.config.js.
40+
[react intl]: https://formatjs.io

‎examples/with-react-intl/components/Layout.js

-29
This file was deleted.

‎examples/with-react-intl/components/Layout.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import {useIntl} from 'react-intl';
3+
import Head from 'next/head';
4+
import Nav from './Nav';
5+
6+
export default function Layout({title, children}) {
7+
const intl = useIntl();
8+
9+
return (
10+
<div>
11+
<Head>
12+
<meta name="viewport" content="width=device-width, initial-scale=1" />
13+
<title>
14+
{title ||
15+
intl.formatMessage({
16+
defaultMessage: 'React Intl Next.js Example',
17+
})}
18+
</title>
19+
</Head>
20+
21+
<header>
22+
<Nav />
23+
</header>
24+
25+
{children}
26+
</div>
27+
);
28+
}

‎examples/with-react-intl/components/Nav.js renamed to ‎examples/with-react-intl/components/Nav.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { FormattedMessage } from 'react-intl'
2-
import Link from 'next/link'
1+
import * as React from 'react';
2+
import {FormattedMessage} from 'react-intl';
3+
import Link from 'next/link';
34

45
export default function Nav() {
56
return (
67
<nav>
78
<li>
89
<Link href="/">
910
<a>
10-
<FormattedMessage id="nav.home" defaultMessage="Home" />
11+
<FormattedMessage defaultMessage="Home" />
1112
</a>
1213
</Link>
1314
</li>
1415
<li>
1516
<Link href="/about">
1617
<a>
17-
<FormattedMessage id="nav.about" defaultMessage="About" />
18+
<FormattedMessage defaultMessage="About" />
1819
</a>
1920
</Link>
2021
</li>
@@ -29,5 +30,5 @@ export default function Nav() {
2930
}
3031
`}</style>
3132
</nav>
32-
)
33+
);
3334
}

‎examples/with-react-intl/lang/en.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"title": "React Intl Next.js Example",
3-
"nav.home": "Home",
4-
"nav.about": "About",
5-
"description": "An example app integrating React Intl with Next.js",
6-
"greeting": "Hello, World!"
2+
"11754": "An example app integrating React Intl with Next.js",
3+
"65a8e": "Hello, World!",
4+
"8cf04": "Home",
5+
"8f7f4": "About",
6+
"9c817": "React Intl Next.js Example"
77
}

‎examples/with-react-intl/lang/fr.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"title": "React Intl Next.js Exemple",
3-
"nav.home": "Accueil",
4-
"nav.about": "À propos de nous",
5-
"description": "Un exemple d'application intégrant React Intl avec Next.js",
6-
"greeting": "Bonjour le monde!"
2+
"11754": "Un exemple d'application intégrant React Intl avec Next.js",
3+
"65a8e": "Bonjour le monde!",
4+
"8cf04": "Accueil",
5+
"8f7f4": "À propos de nous",
6+
"9c817": "React Intl Next.js Exemple"
77
}

‎examples/with-react-intl/next-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎examples/with-react-intl/next.config.js

-10
This file was deleted.

‎examples/with-react-intl/package.json

+24-11
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,41 @@
22
"name": "with-react-intl",
33
"version": "1.0.0",
44
"scripts": {
5-
"dev": "node --icu-data-dir=node_modules/full-icu server.js",
6-
"build": "next build && npm run extract",
7-
"extract": "node ./scripts/extract '{pages,components}/*.{js,ts,tsx}'",
8-
"start": "NODE_ENV=production node --icu-data-dir=node_modules/full-icu server.js"
5+
"dev": "NODE_ICU_DATA=node_modules/full-icu ts-node --project tsconfig.server.json server.ts",
6+
"build": "npm run extract:i18n && npm run compile:i18n && next build && tsc -p tsconfig.server.json",
7+
"extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --out-file lang/en.json",
8+
"compile:i18n": "formatjs compile-folder --ast --format simple lang/ compiled-lang/",
9+
"start": "NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server"
910
},
1011
"dependencies": {
11-
"@formatjs/cli": "1.1.12",
12-
"@formatjs/intl-relativetimeformat": "^2.8.2",
13-
"@formatjs/intl-utils": "^0.6.1",
12+
"@formatjs/cli": "^2.7.3",
13+
"@formatjs/intl-datetimeformat": "^2.4.3",
14+
"@formatjs/intl-getcanonicallocales": "^1.3.2",
15+
"@formatjs/intl-numberformat": "^5.4.1",
16+
"@formatjs/intl-pluralrules": "^3.4.0",
17+
"@formatjs/intl-relativetimeformat": "^7.1.1",
1418
"accepts": "^1.3.7",
19+
"babel-plugin-react-intl": "^8.1.1",
1520
"full-icu": "^1.3.0",
1621
"glob": "^7.1.4",
17-
"intl": "^1.2.5",
18-
"intl-locales-supported": "1.8.4",
1922
"next": "latest",
2023
"react": "^16.9.0",
2124
"react-dom": "^16.9.0",
22-
"react-intl": "^3.1.12"
25+
"react-intl": "^5.6.3"
2326
},
2427
"license": "ISC",
2528
"devDependencies": {
29+
"@types/accepts": "^1.3.5",
2630
"cross-spawn": "7.0.3",
27-
"next-transpile-modules": "^4.0.2"
31+
"prettier": "2.0.5",
32+
"ts-node": "8.0.0",
33+
"typescript": "3.9.7"
34+
},
35+
"prettier": {
36+
"singleQuote": true,
37+
"trailingComma": "es5",
38+
"bracketSpacing": false,
39+
"endOfLine": "lf",
40+
"arrowParens": "avoid"
2841
}
2942
}

‎examples/with-react-intl/pages/_app.js

-36
This file was deleted.

‎examples/with-react-intl/pages/_app.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import * as React from 'react';
2+
import {IntlProvider} from 'react-intl';
3+
import {polyfill} from '../polyfills';
4+
import App from 'next/app';
5+
6+
function MyApp({Component, pageProps, locale, messages}) {
7+
return (
8+
<IntlProvider locale={locale} messages={messages}>
9+
<Component {...pageProps} />
10+
</IntlProvider>
11+
);
12+
}
13+
14+
// We need to load and expose the translations on the request for the user's
15+
// locale. These will only be used in production, in dev the `defaultMessage` in
16+
// each message description in the source code will be used.
17+
const getMessages = (locale: string = 'en') => {
18+
switch (locale) {
19+
default:
20+
return import('../compiled-lang/en.json');
21+
case 'fr':
22+
return import('../compiled-lang/fr.json');
23+
}
24+
};
25+
26+
const getInitialProps: typeof App.getInitialProps = async appContext => {
27+
const {
28+
ctx: {req},
29+
} = appContext;
30+
const locale = (req as any)?.locale ?? 'en';
31+
32+
const [appProps, messages] = await Promise.all([
33+
polyfill(locale),
34+
getMessages(locale),
35+
App.getInitialProps(appContext),
36+
]);
37+
38+
return {...(appProps as any), locale, messages};
39+
};
40+
41+
MyApp.getInitialProps = getInitialProps;
42+
43+
export default MyApp;

0 commit comments

Comments
 (0)