Skip to content

Commit

Permalink
breaking: drop translation component v8.x compatibility (#1844)
Browse files Browse the repository at this point in the history
  • Loading branch information
kazupon committed May 8, 2024
1 parent 5ff1b1d commit 17bfe78
Show file tree
Hide file tree
Showing 7 changed files with 12 additions and 103 deletions.
28 changes: 2 additions & 26 deletions packages/vue-i18n-core/src/plugin.ts
Expand Up @@ -2,8 +2,7 @@ import { Translation } from './components/Translation'
import { NumberFormat } from './components/NumberFormat'
import { DatetimeFormat } from './components/DatetimeFormat'
import { vTDirective } from './directive'
import { I18nWarnCodes, getWarnMessage } from './warnings'
import { isPlainObject, warn, isBoolean } from '@intlify/shared'
import { isPlainObject, isBoolean } from '@intlify/shared'

import type { App } from 'vue'
import type { I18n } from './i18n'
Expand All @@ -17,17 +16,6 @@ import type { I18n } from './i18n'
* @VueI18nGeneral
*/
export interface I18nPluginOptions {
/**
* Whether to use the tag name `i18n` for Translation Component
*
* @remarks
* This option is used for compatibility with Vue I18n v8.x.
*
* If you can't migrate right away, you can temporarily enable this option, and you can work Translation Component.
*
* @defaultValue `false`
*/
useI18nComponentName?: boolean
/**
* Whether to globally install the components that is offered by Vue I18n
*
Expand All @@ -45,25 +33,13 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void {
const pluginOptions = isPlainObject(options[0])
? (options[0] as I18nPluginOptions)
: {}
const useI18nComponentName = !!pluginOptions.useI18nComponentName
const globalInstall = isBoolean(pluginOptions.globalInstall)
? pluginOptions.globalInstall
: true

if (__DEV__ && globalInstall && useI18nComponentName) {
warn(
getWarnMessage(I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE, {
name: Translation.name
})
)
}

if (!__LITE__ && globalInstall) {
// install components
app.component(
!useI18nComponentName ? Translation.name : 'i18n',
Translation
)
app.component(Translation.name, Translation)
app.component(NumberFormat.name, NumberFormat)
app.component(DatetimeFormat.name, DatetimeFormat)
}
Expand Down
16 changes: 3 additions & 13 deletions packages/vue-i18n-core/src/plugin/next.ts
Expand Up @@ -2,8 +2,7 @@ import { Translation } from '../components/Translation'
import { NumberFormat } from '../components/NumberFormat'
import { DatetimeFormat } from '../components/DatetimeFormat'
import { vTDirective } from '../directive'
import { I18nWarnCodes, getWarnMessage } from '../warnings'
import { isPlainObject, warn, isBoolean } from '@intlify/shared'
import { isPlainObject, isBoolean } from '@intlify/shared'

import type { App } from 'vue'
import type { I18n } from '../i18n'
Expand All @@ -13,23 +12,14 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void {
const pluginOptions = isPlainObject(options[0])
? (options[0] as I18nPluginOptions)
: {}
const useI18nComponentName = !!pluginOptions.useI18nComponentName
const globalInstall = isBoolean(pluginOptions.globalInstall)
? pluginOptions.globalInstall
: true

if (__DEV__ && globalInstall && useI18nComponentName) {
warn(
getWarnMessage(I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE, {
name: Translation.name
})
)
}

if (!__LITE__ && globalInstall) {
// install components
;[!useI18nComponentName ? Translation.name : 'i18n', 'I18nT'].forEach(
name => app.component(name, Translation)
;[Translation.name, 'I18nT'].forEach(name =>
app.component(name, Translation)
)
;[NumberFormat.name, 'I18nN'].forEach(name =>
app.component(name, NumberFormat)
Expand Down
11 changes: 0 additions & 11 deletions packages/vue-i18n-core/src/plugin/types.ts
Expand Up @@ -7,17 +7,6 @@
* @VueI18nGeneral
*/
export interface I18nPluginOptions {
/**
* Whether to use the tag name `i18n` for Translation Component
*
* @remarks
* This option is used for compatibility with Vue I18n v8.x.
*
* If you can't migrate right away, you can temporarily enable this option, and you can work Translation Component.
*
* @defaultValue `false`
*/
useI18nComponentName?: boolean
/**
* Whether to globally install the components that is offered by Vue I18n
*
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
COMPONENT_NAME_LEGACY_COMPATIBLE: inc(), // 9
NOT_FOUND_PARENT_SCOPE: inc(), // 10
IGNORE_OBJ_FLATTEN: inc(), // 11
NOTICE_DROP_TRANSLATE_EXIST_COMPATIBLE_FLAG: inc(), // 12
DEPRECATE_TC: inc(), // 13
__EXTEND_POINT__: inc() // 14
NOT_FOUND_PARENT_SCOPE: inc(), // 9
IGNORE_OBJ_FLATTEN: inc(), // 10
NOTICE_DROP_TRANSLATE_EXIST_COMPATIBLE_FLAG: inc(), // 11
DEPRECATE_TC: inc(), // 12
__EXTEND_POINT__: 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.COMPONENT_NAME_LEGACY_COMPATIBLE]: `Component name legacy compatible: '{name}' -> 'i18n'`,
[I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`,
[I18nWarnCodes.IGNORE_OBJ_FLATTEN]: `Ignore object flatten: '{key}' key has an string value`,
[I18nWarnCodes.NOTICE_DROP_TRANSLATE_EXIST_COMPATIBLE_FLAG]: `'translateExistCompatible' option will be dropped in the next major version.`,
Expand Down
6 changes: 1 addition & 5 deletions packages/vue-i18n-core/test/helper.ts
Expand Up @@ -96,15 +96,11 @@ export function mount<
const pluginOptions: I18nPluginOptions = isPlainObject(options.pluginOptions)
? options.pluginOptions
: {
globalInstall: true,
useI18nComponentName: false
globalInstall: true
}
if (pluginOptions.globalInstall == null) {
pluginOptions.globalInstall = true
}
if (pluginOptions.useI18nComponentName == null) {
pluginOptions.useI18nComponentName = false
}

return new Promise((resolve, reject) => {
// NOTE: only supports props as an object
Expand Down
40 changes: 0 additions & 40 deletions packages/vue-i18n-core/test/plugin.test.ts
Expand Up @@ -3,49 +3,9 @@
// directive
vitest.mock('../src/directive')

// utils
import * as shared from '@intlify/shared'
vi.mock('@intlify/shared', async () => {
const actual = await vi.importActual<object>('@intlify/shared')
return {
...actual,
warn: vi.fn()
}
})

import { createApp } from 'vue'
import { I18n, I18nInternal } from '../src/i18n'
import { apply } from '../src/plugin/next'
import { getWarnMessage, I18nWarnCodes } from '../src/warnings'

describe('useI18nComponentName option', () => {
test('default', () => {
const mockWarn = vi.spyOn(shared, 'warn')
mockWarn.mockImplementation(() => {})

const app = createApp({})
const i18n = {} as I18n & I18nInternal

apply(app, i18n)
expect(mockWarn).not.toHaveBeenCalled()
})

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

const app = createApp({})
const i18n = {} as I18n & I18nInternal

apply(app, i18n, { useI18nComponentName: true })
expect(mockWarn).toHaveBeenCalled()
expect(mockWarn.mock.calls[0][0]).toEqual(
getWarnMessage(I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE, {
name: 'i18n-t'
})
)
})
})

describe('globalInstall option', () => {
test('default', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-i18n-core/test/warnings.test.ts
@@ -1,5 +1,5 @@
import { I18nWarnCodes } from '../src/warnings'

test('I18nWarnCodes', () => {
expect(I18nWarnCodes.__EXTEND_POINT__).toBe(14)
expect(I18nWarnCodes.__EXTEND_POINT__).toBe(13)
})

0 comments on commit 17bfe78

Please sign in to comment.