Skip to content

Commit 959f271

Browse files
kazuponkazupon
authored
feat!: deprecate v-t custom directive (#2045)
* feat!: deprecate `v-t` custom directive * fix: e2e
1 parent 404831b commit 959f271

File tree

13 files changed

+93
-19
lines changed

13 files changed

+93
-19
lines changed

Diff for: ‎docs/.vitepress/config.mts

+4-4
Original file line numberDiff line numberDiff line change
@@ -195,16 +195,16 @@ function sidebarGuide() {
195195
collapsible: true,
196196
items: [
197197
{
198-
text: 'Breaking Changes in v9',
199-
link: '/guide/migration/breaking'
198+
text: 'Breaking Changes in v11',
199+
link: '/guide/migration/breaking11'
200200
},
201201
{
202202
text: 'Breaking Changes in v10',
203203
link: '/guide/migration/breaking10'
204204
},
205205
{
206-
text: 'Breaking Changes in v11',
207-
link: '/guide/migration/breaking11'
206+
text: 'Breaking Changes in v9',
207+
link: '/guide/migration/breaking'
208208
},
209209
{
210210
text: 'New Features in v9',

Diff for: ‎docs/guide/advanced/directive.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Custom Directive
22

3+
:::danger NOTE
4+
`v-t` will be deprecated at v11, and will be dropped at v12. This section is for those who are still using v10.
5+
:::
6+
37
You can translate not only with `$t`, but also with the `v-t` custom directive.
48

59
## String syntax

Diff for: ‎docs/guide/migration/breaking11.md

+19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Breaking Changes in v11
22

3+
:::warning NOTICE
4+
Vue I18n v11 is still beta
5+
:::
6+
37
## Deprecate Legacy API mode
48

59
### Reason
@@ -13,6 +17,21 @@ Legacy API mode will be deprecated in v11, as previous vue-i18n releases have al
1317

1418
For compatibility, Legacy API mode still works in v11, but will be removed entirely in v12, so Legacy API mode will not work after that version.
1519

20+
## Deprecate Custom Directive `v-t`
21+
22+
### Reason
23+
24+
The advantage of `v-t` was that it could optimize performance using the vue compiler transform and the pre-translation of `vue-i18n-extension`.
25+
26+
This feature was supported from Vue 2.
27+
About details see the blog article: https://medium.com/@kazu_pon/performance-optimization-of-vue-i18n-83099eb45c2d
28+
29+
In Vue 3, due to the Composition API, the pre-translation of `vue-i18n-extension` is now limited only for global scope.
30+
31+
In addition, Vue 3 Virtual DOM optimization has been introduced, and the optimization provided by `vue-i18n-extension` is no longer very effective. We need to require settings for SSR, the benefits of using `v-t` have disappeared. And DX of templates using `v-t` is not good. Custom directives do not work with key completion in editors (e.g. vscode).
32+
33+
For compatibility, `v-t` mode still works in v11, but will be removed entirely in v12, so `v-t` will not work after that version.
34+
1635
## Drop `tc` and `$tc` for Legacy API mode
1736

1837
**Reason**: These APIs had already deprecated in warning about being dropped in v11. docs says, https://vue-i18n.intlify.dev/guide/migration/breaking10.html#deprecate-tc-and-tc-for-legacy-api-mode

Diff for: ‎e2e/fallback/basic.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/fallback/default-format.spec.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import { getText, url } from '../helper'
55
beforeAll(async () => {
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
8-
warnings.push(msg.text())
8+
const text = msg.text()
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
13+
warnings.push(msg.text())
14+
}
915
}
1016
})
1117
await page.goto(url(`/examples/${pattern}/fallback/default-format.html`))

Diff for: ‎e2e/fallback/format.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/fallback/option.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/fallback/suppress.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/missing/handler.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/missing/option.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎e2e/missing/suppress.spec.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { getText, url } from '../helper'
66
page.on('console', msg => {
77
if (msg.type() === 'warning') {
88
const text = msg.text()
9-
if (!text.match(/^\[intlify\] Legacy API mode has been/)) {
9+
if (
10+
!text.match(/^\[intlify\] Legacy API mode has been/) &&
11+
!text.match(/^\[intlify\] 'v-t' has been deprecated in v11/)
12+
) {
1013
warnings.push(msg.text())
1114
}
1215
}

Diff for: ‎packages/vue-i18n-core/src/directive.ts

+21-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
1+
import {
2+
inBrowser,
3+
isNumber,
4+
isPlainObject,
5+
isString,
6+
warnOnce
7+
} from '@intlify/shared'
18
import { watch } from 'vue'
29
import { createI18nError, I18nErrorCodes } from './errors'
3-
import { isString, isPlainObject, isNumber, inBrowser } from '@intlify/shared'
10+
import { getWarnMessage, I18nWarnCodes } from './warnings'
411

12+
import type { Locale, NamedValue, TranslateOptions } from '@intlify/core-base'
513
import type {
14+
ComponentInternalInstance,
615
DirectiveBinding,
716
ObjectDirective,
8-
WatchStopHandle,
9-
ComponentInternalInstance
17+
WatchStopHandle
1018
} from 'vue'
19+
import type { Composer } from './composer'
1120
import type { I18n, I18nInternal } from './i18n'
1221
import type { VueI18nInternal } from './legacy'
13-
import type { Composer } from './composer'
14-
import type { Locale, TranslateOptions, NamedValue } from '@intlify/core-base'
1522

1623
export type VTDirectiveValue = {
1724
path: string
@@ -80,7 +87,16 @@ function getComposer(
8087
*/
8188
export type TranslationDirective<T = HTMLElement> = ObjectDirective<T>
8289

90+
/**
91+
* @deprecated will be removed at vue-i18n v12
92+
*/
8393
export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
94+
if (__DEV__) {
95+
warnOnce(
96+
getWarnMessage(I18nWarnCodes.DEPRECATE_TRANSLATE_CUSTOME_DIRECTIVE)
97+
)
98+
}
99+
84100
const _process = (binding: DirectiveBinding): [string, Composer] => {
85101
const { instance, value } = binding
86102
/* istanbul ignore if */

Diff for: ‎packages/vue-i18n-core/src/warnings.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ export const I18nWarnCodes = {
88
/**
99
* @deprecated will be removed at vue-i18n v12
1010
*/
11-
DEPRECATE_LEGACY_MODE: 11
11+
DEPRECATE_LEGACY_MODE: 11,
12+
/**
13+
* @deprecated will be removed at vue-i18n v12
14+
*/
15+
DEPRECATE_TRANSLATE_CUSTOME_DIRECTIVE: 12
1216
} as const
1317

1418
type I18nWarnCodes = (typeof I18nWarnCodes)[keyof typeof I18nWarnCodes]
@@ -20,7 +24,11 @@ export const warnMessages: { [code: number]: string } = {
2024
/**
2125
* @deprecated will be removed at vue-i18n v12
2226
*/
23-
[I18nWarnCodes.DEPRECATE_LEGACY_MODE]: `Legacy API mode has been deprecated in v11. Use Composition API mode instead.\nAbout how to use the Composition API mode, see https://vue-i18n.intlify.dev/guide/advanced/composition.html`
27+
[I18nWarnCodes.DEPRECATE_LEGACY_MODE]: `Legacy API mode has been deprecated in v11. Use Composition API mode instead.\nAbout how to use the Composition API mode, see https://vue-i18n.intlify.dev/guide/advanced/composition.html`,
28+
/**
29+
* @deprecated will be removed at vue-i18n v12
30+
*/
31+
[I18nWarnCodes.DEPRECATE_TRANSLATE_CUSTOME_DIRECTIVE]: `'v-t' has been deprecated in v11. Use translate APIs ('t' or '$t') instead.`
2432
}
2533

2634
export function getWarnMessage(

0 commit comments

Comments
 (0)