breaking: drop translation component v8.x compatibility (#1844)

Author: kazupon

packages/vue-i18n-core/src/plugin.ts

@@ -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'
@@ -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
    *
@@ -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)
   }

packages/vue-i18n-core/src/plugin/next.ts

@@ -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'
@@ -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)

packages/vue-i18n-core/src/plugin/types.ts

@@ -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
    *

packages/vue-i18n-core/src/warnings.ts

@@ -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.`,

packages/vue-i18n-core/test/helper.ts

@@ -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

packages/vue-i18n-core/test/plugin.test.ts

@@ -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', () => {

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)
 })