From 02edf4990f3c18ac97c4be03a30c8d5bffd096ae Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:57:28 -0500 Subject: [PATCH 01/18] docs: new translation vue-intl.md (French) [ci skip] --- translated/fr-FR/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/fr-FR/website/docs/vue-intl.md b/translated/fr-FR/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/fr-FR/website/docs/vue-intl.md +++ b/translated/fr-FR/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From 9c57f3aff13ad06b45e44402507683d18fba1fa2 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:57:29 -0500 Subject: [PATCH 02/18] docs: new translation vue-intl.md (Spanish) [ci skip] --- translated/es-ES/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/es-ES/website/docs/vue-intl.md b/translated/es-ES/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/es-ES/website/docs/vue-intl.md +++ b/translated/es-ES/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From eaf31a9c63bc57f60dbd2c635a595db73f009369 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:57:31 -0500 Subject: [PATCH 03/18] docs: new translation vue-intl.md (Japanese) [ci skip] --- translated/ja-JP/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/ja-JP/website/docs/vue-intl.md b/translated/ja-JP/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/ja-JP/website/docs/vue-intl.md +++ b/translated/ja-JP/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From 313fa2b12e4ca1ba6778ed9b7f3638af88505080 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:57:33 -0500 Subject: [PATCH 04/18] docs: new translation vue-intl.md (Portuguese) [ci skip] --- translated/pt-PT/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/pt-PT/website/docs/vue-intl.md b/translated/pt-PT/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/pt-PT/website/docs/vue-intl.md +++ b/translated/pt-PT/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From 54caa8515c76acbab8d9c94517b82044d8d8aecf Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:57:35 -0500 Subject: [PATCH 05/18] docs: new translation vue-intl.md (Chinese Simplified) [ci skip] --- translated/zh-CN/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/zh-CN/website/docs/vue-intl.md b/translated/zh-CN/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/zh-CN/website/docs/vue-intl.md +++ b/translated/zh-CN/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From a16476dfcf0aa1d2a75b90ad7a7caf212480e11a Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 20:59:10 -0500 Subject: [PATCH 06/18] docs: new translation vue-intl.md (Chinese Traditional) [ci skip] --- translated/zh-TW/website/docs/vue-intl.md | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/translated/zh-TW/website/docs/vue-intl.md b/translated/zh-TW/website/docs/vue-intl.md index 36c85a5686..5025fbd012 100644 --- a/translated/zh-TW/website/docs/vue-intl.md +++ b/translated/zh-TW/website/docs/vue-intl.md @@ -55,6 +55,47 @@ From there you can use our APIs in 2 ways: By specifying `inject: ['intl']`, you can use the full `IntlFormatters` API documented in [@formatjs/intl](./intl.md#IntlShape). +### Composition API + +We also support Vue's [Composition API](https://composition-api.vuejs.org/) with `provideIntl` & `useIntl`. + +```ts +import {createIntl} from '@formatjs/intl' +import {provideIntl, useIntl} from '@formatjs/vue-intl' + +const Ancestor = { + setup() { + provideIntl( + createIntl({ + locale: 'en', + defaultLocale: 'en', + messages: { + foo: 'Composed', + }, + }) + ) + }, + render() { + return h(Descendant) + }, +} + +const Descendant = { + setup() { + const intl = useIntl() + return () => + h( + 'p', + {}, + intl.formatMessage({ + id: 'foo', + defaultMessage: 'Hello', + }) + ) + }, +} +``` + ### Methods You can also use our formatters in Vue template by prepending `$` like below: From d412319d7cd716f06de9eda73776783c2bce7a6d Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 22:16:06 -0500 Subject: [PATCH 07/18] docs: new translation linter.md (Japanese) [ci skip] --- .../ja-JP/website/docs/tooling/linter.md | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/translated/ja-JP/website/docs/tooling/linter.md b/translated/ja-JP/website/docs/tooling/linter.md index 85ea4cac4a..303d1673bb 100644 --- a/translated/ja-JP/website/docs/tooling/linter.md +++ b/translated/ja-JP/website/docs/tooling/linter.md @@ -3,7 +3,7 @@ id: linter title: eslint-plugin-formatjs --- -This eslint plugin allows you to enforce certain rules in your ICU message. This is currently under development +This eslint plugin allows you to enforce certain rules in your ICU message. ## Usage @@ -43,6 +43,8 @@ Then in your eslint config: } ``` +### React + Currently this uses `intl.formatMessage`, `defineMessage`, `defineMessages`, `` from `react-intl` as hooks to verify the message. Therefore, in your code use 1 of the following mechanisms: ```tsx @@ -73,6 +75,22 @@ function foo() { } ``` +### Vue + +This will check against `intl.formatMessage`, `$formatMessage` function calls in both your JS/TS & your SFC `.vue` files. For example: + +```vue + +``` + ## Available Rules ### `blacklist-elements` From 1e247a64285fcb70b3f739330bca48732f9305e2 Mon Sep 17 00:00:00 2001 From: Long Ho Date: Fri, 1 Jan 2021 22:16:26 -0500 Subject: [PATCH 08/18] docs: new translation vue-intl.md (French) [ci skip] --- translated/fr-FR/website/docs/vue-intl.md | 36 +++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/translated/fr-FR/website/docs/vue-intl.md b/translated/fr-FR/website/docs/vue-intl.md index 5025fbd012..846701b2da 100644 --- a/translated/fr-FR/website/docs/vue-intl.md +++ b/translated/fr-FR/website/docs/vue-intl.md @@ -115,3 +115,39 @@ We currently support: - `$formatTimeRange` - `$formatDisplayName` - `$formatList` + +## Tooling + +We're actively working on adding `vue` support for formatjs toolchain. Currently the following tools are supported: + +- [eslint-plugin-formatjs](./tooling/linter.md): This fully supports `.vue` and JS/TS. + +## Caveats + +### Using ICU in Vue SFC + +Since `}}` & `{{` are special tokens in `.vue` `