docs: new Crowdin updates (#2466)

translated/es-ES/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`, `<FormattedMessage>` 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
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage: 'today is {now, date}',
+      })
+    }}
+  </p>
+</template>
+```
+
 ## Available Rules
 
 ### `blacklist-elements`

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:
@@ -74,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` `<template>`, this can cause potential conflict with ICU MessageFormat syntax, e.g:
+
+```html {4}
+<template>
+  <p>
+    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}
+    other {# more}}', }) }}
+  </p>
+</template>
+```
+
+Notice the `{# more}}` where it ends with `}}`. This will cause parsing issue in your `vue` template. In order to work around this issue, we recommend using space to turn `}}` into `} }`.
+
+```vue {6}
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage:
+          '{count, selectordinal, offset:1 one {#} other {# more} }',
+      })
+    }}
+  </p>
+</template>
+```

translated/fr-FR/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`, `<FormattedMessage>` 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
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage: 'today is {now, date}',
+      })
+    }}
+  </p>
+</template>
+```
+
 ## Available Rules
 
 ### `blacklist-elements`

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:
@@ -74,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` `<template>`, this can cause potential conflict with ICU MessageFormat syntax, e.g:
+
+```html {4}
+<template>
+  <p>
+    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}
+    other {# more}}', }) }}
+  </p>
+</template>
+```
+
+Notice the `{# more}}` where it ends with `}}`. This will cause parsing issue in your `vue` template. In order to work around this issue, we recommend using space to turn `}}` into `} }`.
+
+```vue {6}
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage:
+          '{count, selectordinal, offset:1 one {#} other {# more} }',
+      })
+    }}
+  </p>
+</template>
+```

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`, `<FormattedMessage>` 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
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage: 'today is {now, date}',
+      })
+    }}
+  </p>
+</template>
+```
+
 ## Available Rules
 
 ### `blacklist-elements`

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:
@@ -74,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` `<template>`, this can cause potential conflict with ICU MessageFormat syntax, e.g:
+
+```html {4}
+<template>
+  <p>
+    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}
+    other {# more}}', }) }}
+  </p>
+</template>
+```
+
+Notice the `{# more}}` where it ends with `}}`. This will cause parsing issue in your `vue` template. In order to work around this issue, we recommend using space to turn `}}` into `} }`.
+
+```vue {6}
+<template>
+  <p>
+    {{
+      $formatMessage({
+        defaultMessage:
+          '{count, selectordinal, offset:1 one {#} other {# more} }',
+      })
+    }}
+  </p>
+</template>
+```