Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

breaking: drop fully preserve modifier codes on v-t directive #1828

Merged
merged 1 commit into from Apr 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/guide/migration/breaking.md
Expand Up @@ -314,7 +314,6 @@ console.log(VueI18n.availability)

> [!CAUTION]
> `preserveDirectiveContent` option implementation code is be going to fully remove in v10.
> As an alternative.

The `v-t` directive for Vue 3 now preserves the default content. Therefore, this option and its properties have been removed from the VueI18n instance.

Expand Down Expand Up @@ -420,6 +419,9 @@ const messages = {

### Remove `preserve` modifier

> [!CAUTION]
> `preserve` modifier implementation code is be going to fully remove in v10.

Similar to *[Remove `preserveDirectiveContent` option](#remove-preservedirectivecontent-option)*, the `v-t` directive for Vue 3 now preserves the default content. Therefore, `preserve` modifier and it’s have been removed from `v-t` directive.

Vue I18n v8.x:
Expand Down
14 changes: 2 additions & 12 deletions packages/vue-i18n-core/src/directive.ts
@@ -1,13 +1,6 @@
import { watch } from 'vue'
import { I18nWarnCodes, getWarnMessage } from './warnings'
import { createI18nError, I18nErrorCodes } from './errors'
import {
isString,
isPlainObject,
isNumber,
warn,
inBrowser
} from '@intlify/shared'
import { isString, isPlainObject, isNumber, inBrowser } from '@intlify/shared'

import type {
DirectiveBinding,
Expand Down Expand Up @@ -89,16 +82,13 @@ export type TranslationDirective<T = HTMLElement> = ObjectDirective<T>

export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
const _process = (binding: DirectiveBinding): [string, Composer] => {
const { instance, modifiers, value } = binding
const { instance, value } = binding
/* istanbul ignore if */
if (!instance || !instance.$) {
throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
}

const composer = getComposer(i18n, instance.$)
if (__DEV__ && modifiers.preserve) {
warn(getWarnMessage(I18nWarnCodes.NOT_SUPPORTED_PRESERVE))
}

const parsedValue = parseValue(value)
return [
Expand Down
12 changes: 5 additions & 7 deletions packages/vue-i18n-core/src/warnings.ts
Expand Up @@ -6,19 +6,17 @@ const inc = incrementer(code)

export const I18nWarnCodes = {
FALLBACK_TO_ROOT: code, // 8
NOT_SUPPORTED_PRESERVE: inc(), // 9
NOT_SUPPORTED_GET_CHOICE_INDEX: inc(), // 10
COMPONENT_NAME_LEGACY_COMPATIBLE: inc(), // 11
NOT_FOUND_PARENT_SCOPE: inc(), // 12
IGNORE_OBJ_FLATTEN: inc(), // 13
NOTICE_DROP_TRANSLATE_EXIST_COMPATIBLE_FLAG: inc() // 14
NOT_SUPPORTED_GET_CHOICE_INDEX: inc(), // 9
COMPONENT_NAME_LEGACY_COMPATIBLE: inc(), // 10
NOT_FOUND_PARENT_SCOPE: inc(), // 11
IGNORE_OBJ_FLATTEN: inc(), // 12
NOTICE_DROP_TRANSLATE_EXIST_COMPATIBLE_FLAG: inc() // 13
} as const

type I18nWarnCodes = (typeof I18nWarnCodes)[keyof typeof I18nWarnCodes]

export const warnMessages: { [code: number]: string } = {
[I18nWarnCodes.FALLBACK_TO_ROOT]: `Fall back to {type} '{key}' with root locale.`,
[I18nWarnCodes.NOT_SUPPORTED_PRESERVE]: `Not supported 'preserve'.`,
[I18nWarnCodes.NOT_SUPPORTED_GET_CHOICE_INDEX]: `Not supported 'getChoiceIndex'.`,
[I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE]: `Component name legacy compatible: '{name}' -> 'i18n'`,
[I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`,
Expand Down
30 changes: 0 additions & 30 deletions packages/vue-i18n-core/test/diretive.test.ts
Expand Up @@ -141,36 +141,6 @@ test('plural', async () => {
expect(wrapper.html()).toEqual('<p>2 bananas</p>')
})

test('preserve modifier', async () => {
const mockWarn = vi.spyOn(shared, 'warn')
mockWarn.mockImplementation(() => {})

const i18n = createI18n({
locale: 'en',
messages: {
en: {
hello: 'hello!'
}
}
})

const App = defineComponent({
setup() {
// <p v-t.preserve="'hello'"></p>
const t = resolveDirective('t')
return () => {
return withDirectives(h('p'), [[t!, 'hello', '', { preserve: true }]])
}
}
})
await mount(App, i18n)

expect(mockWarn).toHaveBeenCalledTimes(1)
expect(mockWarn.mock.calls[0][0]).toEqual(
getWarnMessage(I18nWarnCodes.NOT_SUPPORTED_PRESERVE)
)
})

test('legacy mode', async () => {
const i18n = createI18n({
legacy: true,
Expand Down