feat: static bundle importing (#50)

Author: kazupon

README.md

@@ -125,6 +125,56 @@ ja:
 </i18n>
 ```
 
+### Static bundle importing
+
+vite-plugin-vue-i18n allows you to statically bundle i18n resources such as `json` or `yaml` specified by the [`include` option](#include) of the plugin described below as locale messages with the `import` syntax.
+
+In this case, only one i18n resource can be statically bundled at a time with `import` syntax, so the these code will be redundant for multiple locales.
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+/*
+ * The i18n resources in the path specified in the plugin `include` option can be read
+ * as vue-i18n optimized locale messages using the import syntax
+ */
+import en from './src/locales/en.json'
+import ja from './src/locales/ja.yaml'
+import fr from './src/locales/fr.json5'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages: {
+    en,
+    ja,
+    fr
+  }
+})
+
+const app = createApp()
+app.use(i18n).mount('#app)
+```
+
+vite-plugin-vue-i18n can use the vite (rollup) mechanism to import all locales at once, using the special identifier `@intlify/vite-plugin-vue-i18n/messages`, as the bellow:
+
+```js
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+/*
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/vite-plugin-vue-i18n/messages'
+
+const i18n = createI18n({
+  locale: 'en',
+  messages
+})
+
+const app = createApp()
+app.use(i18n).mount('#app)
+```
+
 ### Bundle optimizations
 
 vite-plugin-vue-i18n allows you to support bundle size optimization provided by vue-i18n.

examples/composition/main.ts

@@ -1,17 +1,12 @@
 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'
+import messages from '@intlify/vite-plugin-vue-i18n/messages'
 
 const i18n = createI18n({
   legacy: false,
   locale: 'ja',
-  messages: {
-    en,
-    ja
-  }
+  messages
 })
 
 const app = createApp(App)

examples/legacy/main.ts

@@ -1,17 +1,12 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import App from './App.vue'
-
-import ja from './locales/ja.json'
-import en from './locales/en.yaml'
+import messages from '@intlify/vite-plugin-vue-i18n/messages'
 
 const i18n = createI18n({
   legacy: true,
   locale: 'ja',
-  messages: {
-    en,
-    ja
-  }
+  messages
 })
 
 const app = createApp(App)

package.json

@@ -24,7 +24,7 @@
     }
   },
   "dependencies": {
-    "@intlify/cli": "^0.1.2",
+    "@intlify/cli": "^0.2.0",
     "@intlify/shared": "^9.0.0-beta.16",
     "@rollup/pluginutils": "^4.1.0"
   },
@@ -43,6 +43,7 @@
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-vue": "^7.3.0",
     "eslint-plugin-vue-libs": "^4.0.0",
+    "fast-glob": "^3.2.5",
     "jest": "^26.6.3",
     "jest-puppeteer": "^4.4.0",
     "jest-watch-typeahead": "^0.6.1",

src/index.ts

@@ -13,6 +13,7 @@ import path from 'path'
 import { isArray, isBoolean, isEmptyObject, isString } from '@intlify/shared'
 import { createFilter } from '@rollup/pluginutils'
 import { generateJSON, generateYAML } from '@intlify/cli'
+import fg from 'fast-glob'
 import { debug as Debug } from 'debug'
 import { parseVueRequest } from './query'
 import { normalizePath } from 'vite'
@@ -23,6 +24,8 @@ import type { VitePluginVueI18nOptions } from './options'
 
 const debug = Debug('vite-plugin-vue-i18n')
 
+const INTLIFY_BUNDLE_IMPORT_ID = '@intlify/vite-plugin-vue-i18n/messages'
+
 function pluginI18n(
   options: VitePluginVueI18nOptions = { forceStringify: false }
 ): Plugin {
@@ -100,6 +103,30 @@ function pluginI18n(
       }
     },
 
+    resolveId(id: string) {
+      if (id === INTLIFY_BUNDLE_IMPORT_ID) {
+        return id
+      }
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async load(id: string, ssr: boolean) {
+      if (id === INTLIFY_BUNDLE_IMPORT_ID && include) {
+        let resourcePaths = [] as string[]
+        const includePaths = isArray(include) ? include : [include]
+        for (const inc of includePaths) {
+          resourcePaths = [...(await fg(inc))]
+        }
+        // TODO: source-map
+        const code = await generateBundleResources(
+          resourcePaths,
+          config != null ? config.isProduction : false,
+          options.forceStringify!
+        )
+        return Promise.resolve(code)
+      }
+    },
+
     async transform(code: string, id: string) {
       const { filename, query } = parseVueRequest(id)
       debug('transform', id, JSON.stringify(query))
@@ -120,7 +147,7 @@ function pluginI18n(
           // `.json` is handled default in vite, and it's transformed to JS object.
           let _source = code
           if (langInfo === '.json') {
-            _source = await getRawJSON(id)
+            _source = await getRaw(id)
           }
           const generate = /\.?json5?/.test(langInfo)
             ? generateJSON
@@ -159,7 +186,7 @@ function pluginI18n(
   }
 }
 
-async function getRawJSON(path: string): Promise<string> {
+async function getRaw(path: string): Promise<string> {
   return fs.readFile(path, { encoding: 'utf-8' })
 }
 
@@ -208,6 +235,35 @@ function getOptions(
   }
 }
 
+async function generateBundleResources(
+  resources: string[],
+  isProduction: boolean,
+  forceStringify: boolean
+) {
+  const codes = []
+  for (const res of resources) {
+    debug(`${res} bundle loading ...`)
+    if (/\.(json5?|ya?ml)$/.test(res)) {
+      const { ext, name } = path.parse(res)
+      const source = await getRaw(res)
+      const generate = /json5?/.test(ext) ? generateJSON : generateYAML
+      const parseOptions = getOptions(
+        res,
+        isProduction,
+        {},
+        forceStringify
+      ) as CodeGenOptions
+      parseOptions.type = 'bare'
+      const { code } = generate(source, parseOptions)
+      debug('generated code', code)
+      codes.push(`${JSON.stringify(name)}: ${code}`)
+    }
+  }
+  return `export default {
+  ${codes.join(`,\n`)}
+}`
+}
+
 // overwrite for cjs require('...')() usage
 export default pluginI18n
 export const vueI18n = pluginI18n

test/bundle-import.test.ts

@@ -0,0 +1,19 @@
+import path from 'path'
+import { bundleAndRun } from './utils'
+import { createMessageContext } from '@intlify/runtime'
+
+const options = {
+  input: './fixtures/bundle.ts',
+  include: [path.resolve(__dirname, './fixtures/locales/**')]
+}
+
+test('import', async () => {
+  const { exports: messages } = await bundleAndRun(
+    '@intlify/vite-plugin-vue-i18n/messages',
+    options
+  )
+  ;['en', 'fr', 'ja', 'ko'].forEach(locale => {
+    const fn = messages[locale].message
+    expect(fn(createMessageContext({ named: { n: 3 } }))).toEqual(`3 apples`)
+  })
+})

test/fixtures/bundle.ts

@@ -0,0 +1,6 @@
+import messages from '@intlify/vite-plugin-vue-i18n/messages'
+
+if (typeof window !== 'undefined') {
+  window.module = messages
+  window.exports = messages
+}

test/utils.ts

@@ -16,12 +16,17 @@ async function bundle(fixture: string, options: Record<string, unknown> = {}) {
       ? 'info'
       : 'silent'
     : 'silent'
+
+  const alias: Record<string, string> = {
+    vue: 'vue/dist/vue.runtime.esm-browser.js'
+  }
+  if (!fixture.startsWith('@')) {
+    alias['~target'] = path.resolve(__dirname, target, fixture)
+  }
+
   const result = await build({
     logLevel: silent,
-    alias: {
-      '~target': path.resolve(__dirname, target, fixture),
-      vue: 'vue/dist/vue.runtime.esm-browser.js'
-    },
+    alias,
     plugins: [vue(), vueI18n({ include })],
     build: {
       write: false,

yarn.lock

@@ -333,10 +333,10 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@intlify/cli@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@intlify/cli/-/cli-0.1.2.tgz#28097f12451491ec8797d2c09390293000c9eddb"
-  integrity sha512-MMi/wUEoTE0oBtTkaospJ2TGPMl0TPKmuN4L6KFhLkBM9Yw0tCN0pDHknlX78tyiI55wYbutddbxkEVHZT1RIw==
+"@intlify/cli@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@intlify/cli/-/cli-0.2.0.tgz#631f4ab2e97cfe2848e2e96aa38e6681316265ed"
+  integrity sha512-KIB6KggamrUoQJXa2CZad9D0dIH6FijPpRv020VtXvPFphprJKipG19GHndPgKRPK70t6Aj7zsJEqt5GvljKXg==
   dependencies:
     "@intlify/core" "^9.0.0-beta.16"
     "@intlify/core-base" "^9.0.0-beta.16"
@@ -2796,6 +2796,18 @@ fast-glob@^3.0.3, fast-glob@^3.1.1:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-glob@^3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
+  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 [email protected], fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"