feat: global attribute (#16)

kazupon · web-flow · commit 88646ee6827f · 2020-12-04T19:31:24.000+09:00
diff --git a/README.md b/README.md
@@ -39,12 +39,15 @@ the below example that `examples/composable/App.vue` have `i18n` custom block:
 
 <script>
 import { useI18n } from 'vue-i18n'
+
 export default {
   name: 'App',
   setup() {
-    return { ...useI18n({
+    const { locale, t } = useI18n({
       inheritLocale: true
-    }) }
+    })
+
+    return { locale, t }
   }
 }
 </script>
diff --git a/examples/composable/App.vue b/examples/composable/App.vue
@@ -14,9 +14,11 @@ import { useI18n } from 'vue-i18n'
 export default {
   name: 'App',
   setup() {
-    return { ...useI18n({
+    const { t, locale } = useI18n({
       inheritLocale: true
-    }) }
+    })
+
+    return { t, locale }
   }
 }
 </script>
diff --git a/examples/composable/main.ts b/examples/composable/main.ts
@@ -3,6 +3,7 @@ import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 
 const i18n = createI18n({
+  legacy: false,
   locale: 'ja',
   messages: {}
 })
diff --git a/examples/global/App.vue b/examples/global/App.vue
@@ -0,0 +1,38 @@
+<template>
+  <form>
+    <label>{{ t('language') }}</label>
+    <select v-model="locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+  </form>
+  <p>{{ t('hello') }}</p>
+</template>
+
+<script>
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'App',
+  setup() {
+    const { t, locale } = useI18n({
+      useScope: 'global'
+    })
+
+    return { t, locale }
+  }
+}
+</script>
+
+<i18n global>
+{
+  "en": {
+    "language": "Language",
+    "hello": "hello, world!"
+  },
+  "ja": {
+    "language": "言語",
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
diff --git a/examples/global/index.html b/examples/global/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>vite-plugin-vue-i18n global example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/examples/global/main.ts b/examples/global/main.ts
@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import App from './App.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'ja'
+})
+
+const app = createApp(App)
+
+app.use(i18n)
+app.mount('#app')
diff --git a/examples/global/vite.config.ts b/examples/global/vite.config.ts
@@ -0,0 +1,10 @@
+import type { UserConfig } from 'vite'
+import i18n from '../../lib/index'
+
+const config: UserConfig = {
+  vueCustomBlockTransforms: {
+    i18n
+  }
+}
+
+export default config
diff --git a/examples/legacy/main.ts b/examples/legacy/main.ts
@@ -3,7 +3,6 @@ import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 
 const i18n = createI18n({
-  legacy: true,
   locale: 'ja',
   messages: {}
 })
diff --git a/package.json b/package.json
@@ -26,38 +26,38 @@
   "dependencies": {
     "js-yaml": "^3.14.0",
     "json5": "^2.1.3",
-    "vue-i18n": "^9.0.0-beta.6"
+    "vue-i18n": "^9.0.0-beta.10"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.1",
     "@types/debug": "^4.1.5",
-    "@types/jest": "^26.0.8",
-    "@types/js-yaml": "^3.12.4",
-    "@types/jsdom": "^16.2.3",
+    "@types/jest": "^26.0.16",
+    "@types/js-yaml": "^3.12.5",
+    "@types/jsdom": "^16.2.5",
     "@types/json5": "^0.0.30",
-    "@types/node": "^14.11.0",
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.4.0",
+    "@types/node": "^14.14.10",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/parser": "^4.9.0",
     "debug": "^4.1.1",
-    "eslint": "^7.11.0",
+    "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.1.0",
     "eslint-plugin-vue-libs": "^4.0.0",
-    "jest": "^26.5.0",
+    "jest": "^26.6.3",
     "jest-puppeteer": "^4.4.0",
     "jest-watch-typeahead": "^0.6.1",
     "jsdom": "^16.4.0",
     "lerna-changelog": "^1.0.1",
     "npm-run-all": "^4.1.5",
-    "opener": "^1.5.1",
+    "opener": "^1.5.2",
     "puppeteer": "^3.3.0",
     "serve": "^11.3.2",
-    "shipjs": "^0.22.0",
+    "shipjs": "^0.23.0",
     "ts-jest": "^26.4.0",
-    "typescript": "^4.0.3",
-    "typescript-eslint-language-service": "^4.0.1",
-    "vite": "1.0.0-rc.4"
+    "typescript": "^4.1.2",
+    "typescript-eslint-language-service": "^4.1.2",
+    "vite": "1.0.0-rc.13"
   },
   "engines": {
     "node": ">= 10"
@@ -81,13 +81,15 @@
   "scripts": {
     "build": "tsc -p .",
     "build:example": "yarn build && npm-run-all --parallel build:example:*",
-    "build:example:legacy": "vite build -c ./examples/legacy/vite.config.ts --outDir ./examples/legacy",
-    "build:example:composable": "vite build -c ./examples/composable/vite.config.ts --outDir ./examples/composable",
+    "build:example:legacy": "npx vite build --config ./examples/legacy/vite.config.ts --outDir ./examples/legacy",
+    "build:example:composable": "npx vite build --config ./examples/composable/vite.config.ts --outDir ./examples/composable",
+    "build:example:global": "npx vite build --config ./examples/global/vite.config.ts --outDir ./examples/global",
     "clean": "npm-run-all clean:*",
     "clean:lib": "rm -rf ./lib/index.js",
     "clean:example": "npm-run-all clean:example:*",
     "clean:example:legacy": "rm -rf ./examples/legacy/index.js",
     "clean:example:composable": "rm -rf ./examples/composable/index.js",
+    "clean:example:global": "rm -rf ./examples/global/index.js",
     "clean:cache:jest": "jest --clearCache",
     "clean:coverage": "rm -rf ./coverage",
     "coverage": "opener coverage/lcov-report/index.html",
diff --git a/src/index.ts b/src/index.ts
@@ -13,9 +13,10 @@ const i18n: TransformFn = function ({ code, query }) {
   debug('vueSFCTransform: query', JSON.stringify(query))
 
   return new Promise<string>(resolve => {
+    const variableName = query.global ? '__i18nGlobal' : '__i18n'
     const result = `export default Comp => {
-  Comp.__i18n = Comp.__i18n || []
-  Comp.__i18n.push(${stringify(parse(code.trim(), query), query)})
+  Comp.${variableName} = Comp.${variableName} || []
+  Comp.${variableName}.push(${stringify(parse(code.trim(), query), query)})
 }`.trim()
     resolve(result)
   })
diff --git a/test/fixtures/global-mix.vue b/test/fixtures/global-mix.vue
@@ -0,0 +1,13 @@
+<i18n global>
+{
+  "en": {
+    "hello": "hello global!"
+  }
+}
+</i18n>
+
+<i18n locale="ja">
+{
+  "hello": "hello local!"
+}
+</i18n>
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -108,3 +108,21 @@ test('special characters', async () => {
     }
   ])
 })
+
+test('global', async () => {
+  const { module } = await bundleAndRun('global-mix.vue')
+  expect(module.__i18nGlobal).toMatchObject([
+    {
+      en: {
+        hello: 'hello global!'
+      }
+    }
+  ])
+  expect(module.__i18n).toMatchObject([
+    {
+      ja: {
+        hello: 'hello local!'
+      }
+    }
+  ])
+})
diff --git a/test/utils.ts b/test/utils.ts
@@ -6,7 +6,7 @@ import i18n from '../src/index'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function bundle(fixture: string, options: Record<string, unknown> = {}) {
-  const { assets } = await build({
+  const results = await build({
     emitAssets: false,
     emitIndex: false,
     write: false,
@@ -26,7 +26,7 @@ async function bundle(fixture: string, options: Record<string, unknown> = {}) {
       i18n
     }
   })
-  return { code: assets[0].code }
+  return { code: results[0].assets[0].code }
 }
 
 export async function bundleAndRun(
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,11 @@ import { useI18n } from 'vue-i18n'`
`14`	`14`	`export default {`
`15`	`15`	`name: 'App',`
`16`	`16`	`setup() {`
`17`		`- return { ...useI18n({`
	`17`	`+ const { t, locale } = useI18n({`
`18`	`18`	`inheritLocale: true`
`19`		`- }) }`
	`19`	`+ })`
	`20`	`+`
	`21`	`+ return { t, locale }`
`20`	`22`	`}`
`21`	`23`	`}`
`22`	`24`	`</script>`