Skip to content

Commit b9c13fc

Browse files
kazuponkazupon
authored
feat: global attribute (#138)
* feat: global attribute * add fixtures
1 parent 3bb0c42 commit b9c13fc

File tree

11 files changed

+162
-7
lines changed

11 files changed

+162
-7
lines changed

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,19 @@ You can define locale messages for each locale with `locale` attribute in single
120120

121121
The above defines two locales, which are merged at target single-file components.
122122

123+
### Locale of i18n resource definition for global scope
124+
125+
You can define locale messages for global scope with `global` attribute:
126+
127+
```vue
128+
<i18n global>
129+
{
130+
"en": {
131+
"hello": "hello world!"
132+
}
133+
}
134+
</i18n>
135+
```
123136

124137
### i18n resource formatting
125138

‎e2e/example.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
;['composable', 'legacy'].forEach(pattern => {
1+
;['composable', 'legacy', 'global'].forEach(pattern => {
22
describe(`${pattern}`, () => {
33
beforeAll(async () => {
44
await page.goto(`http://localhost:8080/${pattern}/`)

‎example/global/App.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<form>
3+
<label>{{ t('language') }}</label>
4+
<select v-model="locale">
5+
<option value="en">en</option>
6+
<option value="ja">ja</option>
7+
</select>
8+
</form>
9+
<p>{{ t('hello') }}</p>
10+
</template>
11+
12+
<script>
13+
import { useI18n } from 'vue-i18n'
14+
15+
export default {
16+
name: 'App',
17+
setup() {
18+
const { t, locale, messages } = useI18n({
19+
useScope: 'global',
20+
locale: 'ja'
21+
})
22+
23+
console.log('global locale messages', messages.value)
24+
25+
return { t, locale }
26+
}
27+
}
28+
</script>
29+
30+
<i18n global>
31+
{
32+
"en": {
33+
"language": "Language",
34+
"hello": "hello, world!"
35+
},
36+
"ja": {
37+
"language": "言語",
38+
"hello": "こんにちは、世界！"
39+
}
40+
}
41+
</i18n>

‎example/global/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>vue-i18n-loader global example</title>
6+
</head>
7+
<body>
8+
<div id="app">
9+
<App />
10+
</div>
11+
<script src="/dist/global.js"></script>
12+
</body>
13+
</html>

‎example/global/main.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { createApp } from 'vue'
2+
import { createI18n } from 'vue-i18n'
3+
import App from './App.vue'
4+
5+
const i18n = createI18n({
6+
legacy: false,
7+
locale: 'ja',
8+
messages: {
9+
en: {
10+
foo: 'foo'
11+
}
12+
}
13+
})
14+
15+
const app = createApp(App)
16+
17+
app.use(i18n)
18+
app.mount('#app')

‎example/webpack.config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ module.exports = {
55
mode: 'development',
66
entry: {
77
composable: path.resolve(__dirname, './composable/main.js'),
8-
legacy: path.resolve(__dirname, './legacy/main.js')
8+
legacy: path.resolve(__dirname, './legacy/main.js'),
9+
global: path.resolve(__dirname, './global/main.js')
910
},
1011
output: {
1112
path: path.resolve(__dirname, 'dist'),
@@ -42,7 +43,7 @@ module.exports = {
4243
{
4344
loader: path.resolve(__dirname, '../lib/index.js'),
4445
options: {
45-
preCompile: true
46+
// preCompile: true
4647
}
4748
}
4849
]

‎src/gen.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,21 @@ export function generateCode(
2727
const preCompile = !!options.preCompile
2828

2929
if (preCompile) {
30-
code += generateCompiledCode(value as LocaleMessages)
31-
code += `export default function (Component) {
30+
if (query.global) {
31+
console.warn(
32+
'[vue-i18n-loader] cannot support global scope for pre-compilation'
33+
)
34+
} else {
35+
code += generateCompiledCode(value as LocaleMessages)
36+
code += `export default function (Component) {
3237
Component.__i18n = Component.__i18n || _getResource
3338
}\n`
39+
}
3440
} else {
41+
const variableName = query.global ? '__i18nGlobal' : '__i18n'
3542
code += `export default function (Component) {
36-
Component.__i18n = Component.__i18n || []
37-
Component.__i18n.push(${stringify(value)})
43+
Component.${variableName} = Component.${variableName} || []
44+
Component.${variableName}.push(${stringify(value)})
3845
}\n`
3946
}
4047

‎test/__snapshots__/index.test.ts.snap‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,36 @@ Array [
1010
]
1111
`;
1212

13+
exports[`global 1`] = `
14+
Array [
15+
Object {
16+
"en": Object {
17+
"hello": "hello global!",
18+
},
19+
},
20+
]
21+
`;
22+
23+
exports[`global and local 1`] = `
24+
Array [
25+
Object {
26+
"ja": Object {
27+
"hello": "hello local!",
28+
},
29+
},
30+
]
31+
`;
32+
33+
exports[`global and local 2`] = `
34+
Array [
35+
Object {
36+
"en": Object {
37+
"hello": "hello global!",
38+
},
39+
},
40+
]
41+
`;
42+
1343
exports[`import 1`] = `
1444
Array [
1545
Object {

‎test/fixtures/global-mix.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<i18n global>
2+
{
3+
"en": {
4+
"hello": "hello global!"
5+
}
6+
}
7+
</i18n>
8+
9+
<i18n locale="ja">
10+
{
11+
"hello": "hello local!"
12+
}
13+
</i18n>

‎test/fixtures/global.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<i18n global>
2+
{
3+
"en": {
4+
"hello": "hello global!"
5+
}
6+
}
7+
</i18n>

0 commit comments

Comments
 (0)