support i18n resource pre compilation (#23)

* support i18n resource pre compilation

* update

* update docs

* bump up

* update

* updates

* support json

* update

Author: kazupon

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
     '@typescript-eslint/member-delimiter-style': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off'
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off'
   }
 }

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
 github: kazupon
-patreon: kazupon
+patreon: #
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

.gitignore

@@ -6,3 +6,4 @@ lib
 *.swp
 *~
 .vscode
+examples/**/dist

.prettierignore

@@ -1,3 +1,4 @@
 lib
 coverage
 tsconfig.json
+dist

README.md

@@ -3,7 +3,7 @@
 ![Test](https://github.com/intlify/vite-plugin-vue-i18n/workflows/Test/badge.svg)
 [![npm](https://img.shields.io/npm/v/@intlify/vite-plugin-vue-i18n.svg)](https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n)
 
-Vite plugin for custom blocks
+Vite plugin for i18n resource pre-compilation and custom blocks
 
 ## :cd: Installation
 
@@ -21,9 +21,39 @@ $ yarn add -D @intlify/vite-plugin-vue-i18n
 
 ## :rocket: Usages
 
+### i18n resource pre-compilation
+
+Since vue-i18n@v9.0, The locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.
+
+However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, vue-i18n@v9.0 and later offer a full version that includes compiler and runtime, and a runtime only version.
+
+If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as `.json`.
+
+#### Vite Config
+
+the below example that `examples/composition/vite.config.ts`:
+
+```ts
+import path from 'path'
+import { pluginI18n } from '@intlify/vite-plugin-vue-i18n'
+
+import type { UserConfig } from 'vite'
+
+const config: UserConfig = {
+  plugins: [
+    pluginI18n({
+      // you need to set i18n resource including paths !
+      include: path.resolve(__dirname, './path/to/src/locales/**')
+    })
+  ]
+}
+
+export default config
+```
+
 ### `i18n` custom block
 
-the below example that `examples/composable/App.vue` have `i18n` custom block:
+the below example that `examples/composition/App.vue` have `i18n` custom block:
 
 ```vue
 <template>
@@ -67,62 +97,47 @@ export default {
 
 ```
 
-### Vite Config
+### Locale Messages formatting
 
-the below example that `examples/composition/vite.config.ts`:
+You can be used by specifying the following format in the `lang` attribute:
 
-```ts
-import type { UserConfig } from 'vite'
-import { transformI18n } from '@intlify/vite-plugin-vue-i18n'
+- json (default)
+- yaml
+- json5
 
-const config: UserConfig = {
-  vueCustomBlockTransforms: {
-    i18n: transformI18n()
-  }
-}
+example `yaml` foramt:
 
-export default config
+```vue
+<i18n lang="yaml">
+en:
+  hello: "Hello World!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
 ```
 
-
 ### `forceStringify` options
 
 Whether pre-compile number and boolean values as message functions that return the string value, default `false`
 
 ```ts
+import path from 'path'
+import { pluginI18n } from '@intlify/vite-plugin-vue-i18n'
+
 import type { UserConfig } from 'vite'
-import { transformI18n } from '@intlify/vite-plugin-vue-i18n'
 
 const config: UserConfig = {
-  vueCustomBlockTransforms: {
-    i18n: transformI18n({
-     forceStringify: true
+  plugins: [
+    pluginI18n({
+      forceStringify: true,
+      include: path.resolve(__dirname, './path/to/src/locales/**')
     })
-  }
+  ]
 }
 
 export default config
 ```
 
-### Locale Messages formatting
-
-You can be used by specifying the following format in the `lang` attribute:
-
-- json (default)
-- yaml
-- json5
-
-example `yaml` foramt:
-
-```vue
-<i18n lang="yaml">
-en:
-  hello: "Hello World!"
-ja:
-  hello: "こんにちは、世界！"
-</i18n>
-```
-
 
 ## :scroll: Changelog
 Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/vite-plugin-vue-i18n/blob/master/CHANGELOG.md).

examples/composition/App.vue

@@ -7,17 +7,23 @@
     </select>
   </form>
   <p>{{ t('hello') }}</p>
+  <Banana />
 </template>
 
 <script>
 import { useI18n } from 'vue-i18n'
+import Banana from './Banana.vue'
+
 export default {
   name: 'App',
+  components: {
+    Banana
+  },
   setup() {
     const { t, locale } = useI18n({
-      inheritLocale: true
+      inheritLocale: true,
+      useScope: 'local'
     })
-
     return { t, locale }
   }
 }

examples/composition/Banana.vue

@@ -0,0 +1,26 @@
+<template>
+  <form id="fruits">
+    <label>{{ t('select') }}</label>
+    <select v-model.number="select">
+      <option value="0">0</option>
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+  </form>
+  <p>{{ t('fruits.banana', select, { n: select }) }}</p>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'Banana',
+  setup() {
+    const { t } = useI18n({ useScope: 'global' })
+    const select = ref(0)
+    return { t, select }
+  }
+}
+</script>

examples/composition/locales/en.yaml

@@ -0,0 +1,3 @@
+select: Do you want banana?
+fruits:
+  banana: 'no bananas | {n} banana | {n} bananas'

examples/composition/locales/ja.json5

@@ -0,0 +1,6 @@
+{
+  select: "バナナが欲しい？",
+  fruits: {
+    banana: "バナナがない | バナナ {n} 個"
+  }
+}

examples/composition/main.ts

@@ -2,10 +2,16 @@ import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 
+import ja from './locales/ja.json5'
+import en from './locales/en.yaml'
+
 const i18n = createI18n({
   legacy: false,
   locale: 'ja',
-  messages: {}
+  messages: {
+    en,
+    ja
+  }
 })
 
 const app = createApp(App)