Skip to content

Commit dcb020b

Browse files
longlholonglho
authored
docs: new Crowdin updates (formatjs#1997)
1 parent bf0cbff commit dcb020b

File tree

6 files changed

+114
-270
lines changed

6 files changed

+114
-270
lines changed

‎translated/es-ES/website/docs/react-intl.md‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,25 @@ title: Overview
99

1010
## Runtime Requirements
1111

12-
**We support IE11 & 2 most recent versions of Edge, Chrome & Firefox.**
12+
**We support IE11 & 2 most recent versions of Edge, Chrome, Firefox & Safari.**
1313

1414
React Intl relies on these `Intl` APIs:
1515

1616
- [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat): Available on IE11+
1717
- [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat): Available on IE11+
1818
- [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules): This can be polyfilled using [this package](polyfills/intl-pluralrules.md).
1919
- [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat): This can be polyfilled using [this package](polyfills/intl-relativetimeformat.md).
20-
- (Optional) [Intl.DisplayNames][displaynames-spec]: Required if you use [`formatDisplayName`](react-intl/api.md#formatdisplayname) or [`FormattedDisplayName`](react-intl/components.md#formatteddisplayname). This can be polyfilled using [this package][displaynames-polyfill].
20+
- (Optional) [Intl.DisplayNames](https://tc39.es/proposal-intl-displaynames/): Required if you use [`formatDisplayName`](react-intl/api.md#formatdisplayname) or [`FormattedDisplayName`](react-intl/components.md#formatteddisplayname). This can be polyfilled using [this package](polyfills/intl-displaynames.md).
2121

2222
If you need to support older browsers, we recommend you do the following:
2323

2424
1. Polyfill `Intl.NumberFormat` with [`@formatjs/intl-numberformat`](polyfills/intl-numberformat.md).
2525
2. Polyfill `Intl.DateTimeFormat` with [`@formatjs/intl-datetimeformat`](polyfills/intl-datetimeformat.md)
2626
3. If you're supporting browsers that do not have [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules) (e.g IE11 & Safari 12-), include this [polyfill](polyfills/intl-pluralrules.md) in your build.
2727

28-
```tsx
29-
if (!Intl.PluralRules) {
30-
require('@formatjs/intl-pluralrules/polyfill');
31-
require('@formatjs/intl-pluralrules/locale-data/de'); // Add locale data for de
32-
}
33-
```
34-
3528
4. If you're supporting browsers that do not have [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat) (e.g IE11, Edge, Safari 12-), include this [polyfill](polyfills/intl-relativetimeformat.md) in your build along with individual CLDR data for each locale you support.
3629

37-
```tsx
38-
if (!Intl.RelativeTimeFormat) {
39-
require('@formatjs/intl-relativetimeformat/polyfill');
40-
require('@formatjs/intl-relativetimeformat/locale-data/de'); // Add locale data for de
41-
}
42-
```
43-
44-
5. If you need `Intl.DisplayNames`, include this [polyfill][displaynames-polyfill] in your build along with individual CLDR data for each locale you support.
45-
46-
```tsx
47-
if (!Intl.DisplayNames) {
48-
require('@formatjs/intl-displaynames/polyfill');
49-
require('@formatjs/intl-displaynames/locale-data/de'); // Add locale data for de
50-
}
51-
```
30+
5. If you need `Intl.DisplayNames`, include this [polyfill](polyfills/intl-displaynames.md) in your build along with individual CLDR data for each locale you support.
5231

5332
### Browser
5433

@@ -86,7 +65,7 @@ If you cannot use the Intl variant of JSC (e.g on iOS), follow the instructions
8665
FormatJS also provides types & polyfill for the following Intl API proposals:
8766

8867
- NumberFormat: [polyfill](polyfills/intl-numberformat.md) & [spec](https://tc39.es/ecma402/)
89-
- DisplayNames: [polyfill][displaynames-polyfill] & [spec][displaynames-spec]
68+
- DisplayNames: [polyfill](polyfills/intl-displaynames.md) & [spec](https://tc39.es/proposal-intl-displaynames/)
9069

9170
## The `react-intl` Package
9271

@@ -145,7 +124,7 @@ ReactDOM.render(
145124
<App />
146125
</IntlProvider>,
147126
document.getElementById('container')
148-
);
127+
)
149128
```
150129

151130
**See:** The [**`<IntlProvider>` docs**](react-intl/components.md#intlprovider) for more details.
@@ -234,12 +213,14 @@ If you're using `babel-loader`, or `ts-loader`, you can do 1 of the following:
234213

235214
1. Add those libraries in `include`:
236215

237-
```tsx
238-
include: [
239-
path.join(__dirname, "node_modules/react-intl"),
240-
path.join(__dirname, "node_modules/intl-messageformat"),
241-
path.join(__dirname, "node_modules/intl-messageformat-parser"),
242-
],
216+
```ts
217+
{
218+
include: [
219+
path.join(__dirname, 'node_modules/react-intl'),
220+
path.join(__dirname, 'node_modules/intl-messageformat'),
221+
path.join(__dirname, 'node_modules/intl-messageformat-parser'),
222+
]
223+
}
243224
```
244225

245226
OR
@@ -289,41 +270,34 @@ Our [Advanced Usage](guides/advanced-usage.md) has further guides for production
289270
We've built [@formatjs/cli](tooling/cli.md) that helps you extract messages from a list of files. It uses [babel-plugin-react-intl](tooling/babel-plugin.md) under the hood and should be able to extract messages if you're declaring using 1 of the mechanisms below:
290271

291272
```tsx
292-
import {defineMessages} from 'react-intl';
273+
import {defineMessages} from 'react-intl'
293274

294275
defineMessages({
295276
foo: {
296277
id: 'foo',
297278
defaultMessage: 'foo',
298279
description: 'bar',
299280
},
300-
});
281+
})
301282
```
302283

303284
```tsx
304-
import {FormattedMessage} from 'react-intl';
305-
306-
<FormattedMessage id="foo" defaultMessage="foo" description="bar" />;
285+
import {FormattedMessage} from 'react-intl'
286+
;<FormattedMessage id="foo" defaultMessage="foo" description="bar" />
307287
```
308288

309289
```tsx
310290
function Comp(props) {
311-
const {intl} = props;
291+
const {intl} = props
312292
return intl.formatMessage({
313293
// The whole `intl.formatMessage` is required so we can extract
314294
id: 'foo',
315295
defaultMessage: 'foo',
316296
description: 'bar',
317-
});
297+
})
318298
}
319299
```
320300

321301
## ESLint Plugin
322302

323303
We've also built [eslint-plugin-formatjs](tooling/linter.md) that helps enforcing specific rules on your messages if your translation vendor has restrictions.
324-
325-
[displaynames-spec]: https://tc39.es/proposal-intl-displaynames/
326-
327-
[displaynames-spec]: https://tc39.es/proposal-intl-displaynames/
328-
[displaynames-polyfill]: polyfills/intl-displaynames.md
329-
[displaynames-polyfill]: polyfills/intl-displaynames.md

‎translated/fr-FR/website/docs/react-intl.md‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,25 @@ title: Overview
99

1010
## Runtime Requirements
1111

12-
**We support IE11 & 2 most recent versions of Edge, Chrome & Firefox.**
12+
**We support IE11 & 2 most recent versions of Edge, Chrome, Firefox & Safari.**
1313

1414
React Intl relies on these `Intl` APIs:
1515

1616
- [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat): Available on IE11+
1717
- [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat): Available on IE11+
1818
- [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules): This can be polyfilled using [this package](polyfills/intl-pluralrules.md).
1919
- [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat): This can be polyfilled using [this package](polyfills/intl-relativetimeformat.md).
20-
- (Optional) [Intl.DisplayNames][displaynames-spec]: Required if you use [`formatDisplayName`](react-intl/api.md#formatdisplayname) or [`FormattedDisplayName`](react-intl/components.md#formatteddisplayname). This can be polyfilled using [this package][displaynames-polyfill].
20+
- (Optional) [Intl.DisplayNames](https://tc39.es/proposal-intl-displaynames/): Required if you use [`formatDisplayName`](react-intl/api.md#formatdisplayname) or [`FormattedDisplayName`](react-intl/components.md#formatteddisplayname). This can be polyfilled using [this package](polyfills/intl-displaynames.md).
2121

2222
If you need to support older browsers, we recommend you do the following:
2323

2424
1. Polyfill `Intl.NumberFormat` with [`@formatjs/intl-numberformat`](polyfills/intl-numberformat.md).
2525
2. Polyfill `Intl.DateTimeFormat` with [`@formatjs/intl-datetimeformat`](polyfills/intl-datetimeformat.md)
2626
3. If you're supporting browsers that do not have [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules) (e.g IE11 & Safari 12-), include this [polyfill](polyfills/intl-pluralrules.md) in your build.
2727

28-
```tsx
29-
if (!Intl.PluralRules) {
30-
require('@formatjs/intl-pluralrules/polyfill');
31-
require('@formatjs/intl-pluralrules/locale-data/de'); // Add locale data for de
32-
}
33-
```
34-
3528
4. If you're supporting browsers that do not have [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat) (e.g IE11, Edge, Safari 12-), include this [polyfill](polyfills/intl-relativetimeformat.md) in your build along with individual CLDR data for each locale you support.
3629

37-
```tsx
38-
if (!Intl.RelativeTimeFormat) {
39-
require('@formatjs/intl-relativetimeformat/polyfill');
40-
require('@formatjs/intl-relativetimeformat/locale-data/de'); // Add locale data for de
41-
}
42-
```
43-
44-
5. If you need `Intl.DisplayNames`, include this [polyfill][displaynames-polyfill] in your build along with individual CLDR data for each locale you support.
45-
46-
```tsx
47-
if (!Intl.DisplayNames) {
48-
require('@formatjs/intl-displaynames/polyfill');
49-
require('@formatjs/intl-displaynames/locale-data/de'); // Add locale data for de
50-
}
51-
```
30+
5. If you need `Intl.DisplayNames`, include this [polyfill](polyfills/intl-displaynames.md) in your build along with individual CLDR data for each locale you support.
5231

5332
### Browser
5433

@@ -86,7 +65,7 @@ If you cannot use the Intl variant of JSC (e.g on iOS), follow the instructions
8665
FormatJS also provides types & polyfill for the following Intl API proposals:
8766

8867
- NumberFormat: [polyfill](polyfills/intl-numberformat.md) & [spec](https://tc39.es/ecma402/)
89-
- DisplayNames: [polyfill][displaynames-polyfill] & [spec][displaynames-spec]
68+
- DisplayNames: [polyfill](polyfills/intl-displaynames.md) & [spec](https://tc39.es/proposal-intl-displaynames/)
9069

9170
## The `react-intl` Package
9271

@@ -145,7 +124,7 @@ ReactDOM.render(
145124
<App />
146125
</IntlProvider>,
147126
document.getElementById('container')
148-
);
127+
)
149128
```
150129

151130
**See:** The [**`<IntlProvider>` docs**](react-intl/components.md#intlprovider) for more details.
@@ -234,12 +213,14 @@ If you're using `babel-loader`, or `ts-loader`, you can do 1 of the following:
234213

235214
1. Add those libraries in `include`:
236215

237-
```tsx
238-
include: [
239-
path.join(__dirname, "node_modules/react-intl"),
240-
path.join(__dirname, "node_modules/intl-messageformat"),
241-
path.join(__dirname, "node_modules/intl-messageformat-parser"),
242-
],
216+
```ts
217+
{
218+
include: [
219+
path.join(__dirname, 'node_modules/react-intl'),
220+
path.join(__dirname, 'node_modules/intl-messageformat'),
221+
path.join(__dirname, 'node_modules/intl-messageformat-parser'),
222+
]
223+
}
243224
```
244225

245226
OR
@@ -289,41 +270,34 @@ Our [Advanced Usage](guides/advanced-usage.md) has further guides for production
289270
We've built [@formatjs/cli](tooling/cli.md) that helps you extract messages from a list of files. It uses [babel-plugin-react-intl](tooling/babel-plugin.md) under the hood and should be able to extract messages if you're declaring using 1 of the mechanisms below:
290271

291272
```tsx
292-
import {defineMessages} from 'react-intl';
273+
import {defineMessages} from 'react-intl'
293274

294275
defineMessages({
295276
foo: {
296277
id: 'foo',
297278
defaultMessage: 'foo',
298279
description: 'bar',
299280
},
300-
});
281+
})
301282
```
302283

303284
```tsx
304-
import {FormattedMessage} from 'react-intl';
305-
306-
<FormattedMessage id="foo" defaultMessage="foo" description="bar" />;
285+
import {FormattedMessage} from 'react-intl'
286+
;<FormattedMessage id="foo" defaultMessage="foo" description="bar" />
307287
```
308288

309289
```tsx
310290
function Comp(props) {
311-
const {intl} = props;
291+
const {intl} = props
312292
return intl.formatMessage({
313293
// The whole `intl.formatMessage` is required so we can extract
314294
id: 'foo',
315295
defaultMessage: 'foo',
316296
description: 'bar',
317-
});
297+
})
318298
}
319299
```
320300

321301
## ESLint Plugin
322302

323303
We've also built [eslint-plugin-formatjs](tooling/linter.md) that helps enforcing specific rules on your messages if your translation vendor has restrictions.
324-
325-
[displaynames-spec]: https://tc39.es/proposal-intl-displaynames/
326-
327-
[displaynames-spec]: https://tc39.es/proposal-intl-displaynames/
328-
[displaynames-polyfill]: polyfills/intl-displaynames.md
329-
[displaynames-polyfill]: polyfills/intl-displaynames.md

0 commit comments

Comments
 (0)