Skip to content

Commit 0f549d8

Browse files
kazuponkazupon
authored
breaking: v-t directive (#39)
* breaking: v-t directive * fix: pupeteer 3 installed failed * fix: puppeteer downgrade
1 parent 8991d9e commit 0f549d8

File tree

19 files changed

+625
-116
lines changed

19 files changed

+625
-116
lines changed

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,9 @@ The examples are offered that use the following two API styles:
9393
- For production mode, HTML message detect is not check due to performance.
9494
- Legacy API `sync` option:
9595
- default: change to `false` from `true`
96+
- `v-t` directive
97+
- `preserve` modifier deprecated, keep Element content
98+
- Legacy API `preserveDirectiveContent` option, and property deprecated
9699
- `VueI18n.version` -> `import { VERSION } from 'vue-i18n'`
97100
- `VueI18n.availabilities` -> `import { availabilities } from 'vue-i18n'`
98101
- See the details [here](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.md)
@@ -112,8 +115,6 @@ The examples are offered that use the following two API styles:
112115

113116
### :hammer: Missing features
114117

115-
- `v-t` directive
116-
- `preserveDirectiveContent` option (depend on `v-t`)
117118
- SSR
118119
- Custom formatting
119120
- Tooling
@@ -145,7 +146,6 @@ yarn add vue-i18n@next
145146
- [x] vue-i18n message format
146147
- [ ] sourcemap
147148
- [x] HTML format handling
148-
- [x] error handling
149149
- [ ] more unit (fuzzing) tests
150150
- [ ] performance tests (benchmark)
151151
- Intlify core runtime
@@ -157,6 +157,7 @@ yarn add vue-i18n@next
157157
- [ ] improve locale messages typing: `LocaleMessages` / `LocaleMessage` / `LocaleMessageDictiory`
158158
- [x] postTranslation context option
159159
- Composable API: I18n Composer
160+
- [ ] error handlings
160161
- properties
161162
- [x] locale
162163
- [x] fallbackLocale
@@ -204,7 +205,7 @@ yarn add vue-i18n@next
204205
- [x] silentTranslationWarn
205206
- [x] silentFallbackWarn
206207
- [x] formatFallbackMessages
207-
- [ ] preserveDirectiveContent
208+
- [x] preserveDirectiveContent
208209
- [x] warnHtmlInMessage
209210
- [x] postTranslation
210211
- [x] t
@@ -243,7 +244,7 @@ yarn add vue-i18n@next
243244
- [x] NumberFormat `<i18n-n>`
244245
- [x] DatetimeFormat `<i18n-d>`
245246
- Directive
246-
- [ ] `v-t`
247+
- [x] `v-t`
247248
- Tool Chains
248249
- [ ] intlify devtools
249250
- [ ] vue-i18n-extensions
@@ -255,6 +256,9 @@ yarn add vue-i18n@next
255256
- [ ] documentation
256257
- [x] fallback localization (bubble up)
257258
- [ ] SSR
259+
- General tasks
260+
- [ ] error handlings
261+
- [ ] unit testings with @vue/test-utils@next
258262

259263
</details>
260264

‎e2e/directive/basic.test.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
;['composable', 'legacy'].forEach(pattern => {
2+
describe(`${pattern}`, () => {
3+
beforeAll(async () => {
4+
await page.goto(
5+
`http://localhost:8080/examples/${pattern}/directive/basic.html`
6+
)
7+
})
8+
9+
test('initial rendering', async () => {
10+
await expect(page).toMatch('言語')
11+
await expect(page).toMatch('こんにちは、世界！')
12+
})
13+
14+
test('change locale', async () => {
15+
await page.select('#app select', 'en')
16+
await expect(page).toMatch('Language')
17+
await expect(page).toMatch('hello world!')
18+
})
19+
})
20+
})

‎e2e/directive/object.test.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
;['composable', 'legacy'].forEach(pattern => {
2+
describe(`${pattern}`, () => {
3+
beforeAll(async () => {
4+
await page.goto(
5+
`http://localhost:8080/examples/${pattern}/directive/object.html`
6+
)
7+
})
8+
9+
test('rendering', async () => {
10+
await expect(page).toMatch('こんにちは、 kazupon！')
11+
await expect(page).toMatch('good bye!')
12+
})
13+
})
14+
})

‎e2e/directive/plural.test.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
;['composable', 'legacy'].forEach(pattern => {
2+
describe(`${pattern}`, () => {
3+
beforeAll(async () => {
4+
await page.goto(
5+
`http://localhost:8080/examples/${pattern}/directive/plural.html`
6+
)
7+
})
8+
9+
test('rendering', async () => {
10+
await expect(page).toMatch('2 bananas')
11+
})
12+
})
13+
})

‎e2e/directive/preserve.test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const { sleep } = require('../helper') // eslint-disable-line
2+
3+
;['composable', 'legacy'].forEach(pattern => {
4+
describe(`${pattern}`, () => {
5+
beforeAll(async () => {
6+
await page.goto(
7+
`http://localhost:8080/examples/${pattern}/directive/preserve.html`
8+
)
9+
})
10+
11+
test('initial rendering', async () => {
12+
await expect(page).toMatch('hi there!')
13+
})
14+
15+
test('trigger transition', async () => {
16+
await expect(page).toClick('#app button')
17+
await expect(page).toMatchElement('#app p', { text: 'hi there!' })
18+
await sleep(1000)
19+
await expect(page).toClick('#app button')
20+
await expect(page).toMatch('hi there!')
21+
})
22+
})
23+
})

‎e2e/helper.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ const setupWarningConsole = (page, messages) => {
77
})
88
}
99

10+
async function sleep(delay) {
11+
return new Promise(resolve => setTimeout(resolve, delay))
12+
}
13+
1014
module.exports = {
11-
setupWarningConsole
15+
setupWarningConsole,
16+
sleep
1217
}

‎examples/composable/directive/basic.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>v-t directive basic usage</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<form>
12+
<!-- e.g. string lieteral -->
13+
<label v-t="'message.language'"></label>
14+
<select v-model="locale">
15+
<option value="en">en</option>
16+
<option value="ja">ja</option>
17+
</select>
18+
</form>
19+
<!-- e.g. use render context -->
20+
<p v-t="target"></p>
21+
</div>
22+
<script>
23+
const { createApp, ref } = Vue
24+
const { createI18n, useI18n } = VueI18n
25+
26+
const i18n = createI18n({
27+
locale: 'ja',
28+
messages: {
29+
en: {
30+
message: {
31+
language: 'Language',
32+
hello: 'hello world!'
33+
}
34+
},
35+
ja: {
36+
message: {
37+
language: '言語',
38+
hello: 'こんにちは、世界！'
39+
}
40+
}
41+
}
42+
})
43+
44+
const app = createApp({
45+
setup() {
46+
const target = ref('message.hello')
47+
return { target, ...useI18n() }
48+
}
49+
})
50+
app.use(i18n)
51+
app.mount('#app')
52+
</script>
53+
</body>
54+
</html>

‎examples/composable/directive/object.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>v-t directive object value usage</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
12+
<p v-t="{ path: byePath, locale: 'en' }"></p>
13+
</div>
14+
<script>
15+
const { createApp, ref } = Vue
16+
const { createI18n, useI18n } = VueI18n
17+
18+
const i18n = createI18n({
19+
locale: 'ja',
20+
messages: {
21+
en: {
22+
message: {
23+
hi: 'Hi, {name}!',
24+
bye: 'good bye!'
25+
}
26+
},
27+
ja: {
28+
message: {
29+
hi: 'こんにちは、 {name}！',
30+
bye: 'さようなら！'
31+
}
32+
}
33+
}
34+
})
35+
36+
const app = createApp({
37+
setup() {
38+
const byePath = ref('message.bye')
39+
return { byePath, ...useI18n() }
40+
}
41+
})
42+
app.use(i18n)
43+
app.mount('#app')
44+
</script>
45+
</body>
46+
</html>

‎examples/composable/directive/plural.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>v-t directive plural usage</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<p v-t="{ path: 'banana', choice: 2 }"></p>
12+
</div>
13+
<script>
14+
const { createApp } = Vue
15+
const { createI18n, useI18n } = VueI18n
16+
17+
const i18n = createI18n({
18+
locale: 'en',
19+
messages: {
20+
en: {
21+
banana: 'no bananas | {n} banana | {n} bananas'
22+
}
23+
}
24+
})
25+
26+
const app = createApp({
27+
setup() {
28+
return useI18n()
29+
}
30+
})
31+
app.use(i18n)
32+
app.mount('#app')
33+
</script>
34+
</body>
35+
</html>

‎examples/composable/directive/preserve.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>v-t directive preserve content usage</title>
6+
<script src="../../../node_modules/vue/dist/vue.global.js"></script>
7+
<script src="../../../dist/vue-i18n.global.js"></script>
8+
<style>
9+
.fade-enter-active,
10+
.fade-leave-active {
11+
transition: opacity 0.5s;
12+
}
13+
.fade-enter,
14+
.fade-leave-to {
15+
opacity: 0;
16+
transition: ease all 1s;
17+
}
18+
.red-bg {
19+
background-color: red;
20+
padding: 5px;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="app">
26+
<transition name="fade">
27+
<p v-if="toggle" v-t="'hello'" class="red-bg"></p>
28+
</transition>
29+
<button @click="toggle = !toggle">click me</button>
30+
</div>
31+
<script>
32+
const { createApp, ref } = Vue
33+
const { createI18n, useI18n } = VueI18n
34+
35+
const i18n = createI18n({
36+
locale: 'en',
37+
messages: {
38+
en: { hello: 'hi there!' },
39+
ja: { hello: 'こんにちは！' }
40+
}
41+
})
42+
43+
const app = createApp({
44+
setup() {
45+
const toggle = ref(true)
46+
return { toggle, ...useI18n() }
47+
}
48+
})
49+
app.use(i18n)
50+
app.mount('#app')
51+
</script>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)