diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index bfcdda720..25a613907 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -202,6 +202,10 @@ function sidebarGuide() { text: 'Migrations', collapsible: true, items: [ + { + text: 'Breaking Changes in v12', + link: '/guide/migration/breaking12' + }, { text: 'Breaking Changes in v11', link: '/guide/migration/breaking11' diff --git a/docs/guide/migration/breaking12.md b/docs/guide/migration/breaking12.md new file mode 100644 index 000000000..0417af232 --- /dev/null +++ b/docs/guide/migration/breaking12.md @@ -0,0 +1,5 @@ +# Breaking Changes in v12 + +## Drop Custom Directive `v-t` + +**Reason**: This custom directive had already deprecated in warning about being dropped in v12. docs says, https://vue-i18n.intlify.dev/guide/migration/breaking11.html#deprecate-custom-directive-v-t diff --git a/e2e/directive/basic.spec.ts b/e2e/directive/basic.spec.ts deleted file mode 100644 index c6efad4bb..000000000 --- a/e2e/directive/basic.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { getText, url } from '../helper' -;['composition', 'legacy'].forEach(pattern => { - describe(`${pattern}`, () => { - beforeAll(async () => { - await page.goto(url(`/examples/${pattern}/directive/basic.html`)) - }) - - test('initial rendering', async () => { - expect(await getText(page, 'label')).toMatch('言語') - expect(await getText(page, 'p')).toMatch('こんにちは、世界！') - }) - - test('change locale', async () => { - await page.selectOption('#app select', 'en') - expect(await getText(page, 'label')).toMatch('Language') - expect(await getText(page, 'p')).toMatch('hello world!') - }) - }) -}) diff --git a/e2e/directive/object.spec.ts b/e2e/directive/object.spec.ts deleted file mode 100644 index 529e70b4b..000000000 --- a/e2e/directive/object.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getText, url } from '../helper' -;['composition', 'legacy'].forEach(pattern => { - describe(`${pattern}`, () => { - beforeAll(async () => { - await page.goto(url(`/examples/${pattern}/directive/object.html`)) - }) - - test('rendering', async () => { - expect(await getText(page, '#app p.p1')).toMatch('こんにちは、 kazupon！') - expect(await getText(page, '#app p.p2')).toMatch('good bye!') - }) - }) -}) diff --git a/e2e/directive/plural.spec.ts b/e2e/directive/plural.spec.ts deleted file mode 100644 index 837cb777f..000000000 --- a/e2e/directive/plural.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { getText, url } from '../helper' -;['composition', 'legacy'].forEach(pattern => { - describe(`${pattern}`, () => { - beforeAll(async () => { - await page.goto(url(`/examples/${pattern}/directive/plural.html`)) - }) - - test('rendering', async () => { - expect(await getText(page, '#app p')).toMatch('2 bananas') - }) - }) -}) diff --git a/e2e/directive/preserve.spec.ts b/e2e/directive/preserve.spec.ts deleted file mode 100644 index 1d05275ee..000000000 --- a/e2e/directive/preserve.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { getText, sleep, url } from '../helper' -;['composition', 'legacy'].forEach(pattern => { - describe(`${pattern}`, () => { - beforeAll(async () => { - await page.goto(url(`/examples/${pattern}/directive/preserve.html`)) - }) - - test('initial rendering', async () => { - expect(await getText(page, '#app p')).toMatch('hi there!') - }) - - test('trigger transition', async () => { - await page.click('#app button') - expect(await getText(page, '#app p')).toMatch('hi there!') - await sleep(1000) - await page.click('#app button') - expect(await getText(page, '#app p')).toMatch('hi there!') - }) - }) -}) diff --git a/examples/composition/directive/basic.html b/examples/composition/directive/basic.html deleted file mode 100644 index b4b992c85..000000000 --- a/examples/composition/directive/basic.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - v-t directive basic usage - - - - -
-
- - - -
- -

-
- - - diff --git a/examples/composition/directive/object.html b/examples/composition/directive/object.html deleted file mode 100644 index e6bf3d69d..000000000 --- a/examples/composition/directive/object.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - v-t directive object value usage - - - - -
-

-

-
- - - diff --git a/examples/composition/directive/plural.html b/examples/composition/directive/plural.html deleted file mode 100644 index 956ad4929..000000000 --- a/examples/composition/directive/plural.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - v-t directive plural usage - - - - -
-

-
- - - diff --git a/examples/composition/directive/preserve.html b/examples/composition/directive/preserve.html deleted file mode 100644 index 7423c16dc..000000000 --- a/examples/composition/directive/preserve.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - v-t directive preserve content usage - - - - - -
- -

- - -
- - - diff --git a/examples/legacy/directive/basic.html b/examples/legacy/directive/basic.html deleted file mode 100644 index f6a485d67..000000000 --- a/examples/legacy/directive/basic.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - v-t directive basic usage - - - - -
-
- - - -
- -

-
- - - diff --git a/examples/legacy/directive/object.html b/examples/legacy/directive/object.html deleted file mode 100644 index ce0350992..000000000 --- a/examples/legacy/directive/object.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - v-t directive object value usage - - - - -
-

-

-
- - - diff --git a/examples/legacy/directive/plural.html b/examples/legacy/directive/plural.html deleted file mode 100644 index b436578f7..000000000 --- a/examples/legacy/directive/plural.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - v-t directive plural usage - - - - -
-

-
- - - diff --git a/examples/legacy/directive/preserve.html b/examples/legacy/directive/preserve.html deleted file mode 100644 index 3001f577d..000000000 --- a/examples/legacy/directive/preserve.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - v-t directive preserve content usage - - - - - -
- -

- - -
- - - diff --git a/packages/devtools-types/src/index.ts b/packages/devtools-types/src/index.ts index 888841241..b7703558a 100644 --- a/packages/devtools-types/src/index.ts +++ b/packages/devtools-types/src/index.ts @@ -1,12 +1,12 @@ -import type { Emittable } from '@intlify/shared' import type { - Path, - PathValue, + CoreMissingType, Locale, MessageFunction, - ResourceNode, - CoreMissingType + Path, + PathValue, + ResourceNode } from '@intlify/core-base' +import type { Emittable } from '@intlify/shared' export interface IntlifyRecord { id: number diff --git a/packages/vue-i18n-core/src/directive.ts b/packages/vue-i18n-core/src/directive.ts deleted file mode 100644 index f6e22eab8..000000000 --- a/packages/vue-i18n-core/src/directive.ts +++ /dev/null @@ -1,195 +0,0 @@ -import { - inBrowser, - isNumber, - isPlainObject, - isString, - warnOnce -} from '@intlify/shared' -import { watch } from 'vue' -import { createI18nError, I18nErrorCodes } from './errors' -import { getWarnMessage, I18nWarnCodes } from './warnings' - -import type { Locale, NamedValue, TranslateOptions } from '@intlify/core-base' -import type { - ComponentInternalInstance, - DirectiveBinding, - ObjectDirective, - WatchStopHandle -} from 'vue' -import type { Composer } from './composer' -import type { I18n, I18nInternal } from './i18n' -import type { VueI18nInternal } from './legacy' - -export type VTDirectiveValue = { - path: string - locale?: Locale - args?: NamedValue - choice?: number - plural?: number -} - -declare global { - interface HTMLElement { - __i18nWatcher?: WatchStopHandle - __composer?: Composer - } -} - -function getComposer( - i18n: I18n, - instance: ComponentInternalInstance -): Composer { - const i18nInternal = i18n as unknown as I18nInternal - if (i18n.mode === 'composition') { - return (i18nInternal.__getInstance(instance) || i18n.global) as Composer - } else { - const vueI18n = i18nInternal.__getInstance(instance) - return vueI18n != null - ? (vueI18n as unknown as VueI18nInternal).__composer - : (i18n.global as unknown as VueI18nInternal).__composer - } -} - -/** - * Translation Directive (`v-t`) - * - * @remarks - * Update the element `textContent` that localized with locale messages. - * - * You can use string syntax or object syntax. - * - * String syntax can be specified as a keypath of locale messages. - * - * If you can be used object syntax, you need to specify as the object key the following params - * - * ``` - * - path: required, key of locale messages - * - locale: optional, locale - * - args: optional, for list or named formatting - * ``` - * - * @example - * ```html - * - *

- * - * - *

- * - * - *

- * - * - *

- * ``` - * - * @deprecated will be removed at vue-i18n v12 - * - * @VueI18nDirective - */ -export type TranslationDirective = ObjectDirective - -/** - * @deprecated will be removed at vue-i18n v12 - */ -export function vTDirective(i18n: I18n): TranslationDirective { - const _process = (binding: DirectiveBinding): [string, Composer] => { - if (__DEV__) { - warnOnce( - getWarnMessage(I18nWarnCodes.DEPRECATE_TRANSLATE_CUSTOME_DIRECTIVE) - ) - } - - const { instance, value } = binding - /* istanbul ignore if */ - if (!instance || !instance.$) { - throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR) - } - - const composer = getComposer(i18n, instance.$) - - const parsedValue = parseValue(value) - return [ - Reflect.apply(composer.t, composer, [...makeParams(parsedValue)]), - composer - ] - } - - const register = (el: HTMLElement, binding: DirectiveBinding): void => { - const [textContent, composer] = _process(binding) - if (inBrowser && i18n.global === composer) { - // global scope only - el.__i18nWatcher = watch(composer.locale, () => { - binding.instance && binding.instance.$forceUpdate() - }) - } - el.__composer = composer - el.textContent = textContent - } - - const unregister = (el: HTMLElement): void => { - if (inBrowser && el.__i18nWatcher) { - el.__i18nWatcher() - el.__i18nWatcher = undefined - delete el.__i18nWatcher - } - if (el.__composer) { - el.__composer = undefined - delete el.__composer - } - } - - const update = (el: HTMLElement, { value }: DirectiveBinding): void => { - if (el.__composer) { - const composer = el.__composer - const parsedValue = parseValue(value) - el.textContent = Reflect.apply(composer.t, composer, [ - ...makeParams(parsedValue) - ]) - } - } - const getSSRProps = (binding: DirectiveBinding) => { - const [textContent] = _process(binding) - return { textContent } - } - - return { - created: register, - unmounted: unregister, - beforeUpdate: update, - getSSRProps - } as TranslationDirective -} - -function parseValue(value: unknown): VTDirectiveValue { - if (isString(value)) { - return { path: value } - } else if (isPlainObject(value)) { - if (!('path' in value)) { - throw createI18nError(I18nErrorCodes.REQUIRED_VALUE, 'path') - } - return value as VTDirectiveValue - } else { - throw createI18nError(I18nErrorCodes.INVALID_VALUE) - } -} - -function makeParams(value: VTDirectiveValue): unknown[] { - const { path, locale, args, choice, plural } = value - const options = {} as TranslateOptions - const named: NamedValue = args || {} - - if (isString(locale)) { - options.locale = locale - } - - if (isNumber(choice)) { - options.plural = choice - } - - if (isNumber(plural)) { - options.plural = plural - } - - return [path, named, options] -} diff --git a/packages/vue-i18n-core/src/i18n.ts b/packages/vue-i18n-core/src/i18n.ts index 696fe66df..d4f2f4649 100644 --- a/packages/vue-i18n-core/src/i18n.ts +++ b/packages/vue-i18n-core/src/i18n.ts @@ -553,7 +553,7 @@ export function createI18n(options: any = {}): any { // install built-in components and directive if (!__LITE__ && __FEATURE_FULL_INSTALL__) { - applyPlugin(app, i18n as I18n, ...options) + applyPlugin(app, ...options) } // setup mixin for Legacy API diff --git a/packages/vue-i18n-core/src/index.ts b/packages/vue-i18n-core/src/index.ts index 65f3c72d2..0543dc82a 100644 --- a/packages/vue-i18n-core/src/index.ts +++ b/packages/vue-i18n-core/src/index.ts @@ -69,11 +69,6 @@ export { MissingHandler, VueMessageType } from './composer' -export { - TranslationDirective, - vTDirective, - VTDirectiveValue -} from './directive' export { ComposerAdditionalOptions, ComposerExtender, diff --git a/packages/vue-i18n-core/src/plugin.ts b/packages/vue-i18n-core/src/plugin.ts index 5ccb1f12f..70a6b02a2 100644 --- a/packages/vue-i18n-core/src/plugin.ts +++ b/packages/vue-i18n-core/src/plugin.ts @@ -1,11 +1,9 @@ -import { Translation } from './components/Translation' -import { NumberFormat } from './components/NumberFormat' +import { isBoolean, isPlainObject } from '@intlify/shared' import { DatetimeFormat } from './components/DatetimeFormat' -import { vTDirective } from './directive' -import { isPlainObject, isBoolean } from '@intlify/shared' +import { NumberFormat } from './components/NumberFormat' +import { Translation } from './components/Translation' import type { App } from 'vue' -import type { I18n } from './i18n' /** * Vue I18n plugin options @@ -29,7 +27,7 @@ export interface I18nPluginOptions { globalInstall?: boolean } -export function apply(app: App, i18n: I18n, ...options: unknown[]): void { +export function apply(app: App, ...options: unknown[]): void { const pluginOptions = isPlainObject(options[0]) ? (options[0] as I18nPluginOptions) : {} @@ -43,9 +41,4 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void { app.component(NumberFormat.name, NumberFormat) app.component(DatetimeFormat.name, DatetimeFormat) } - - // install directive - if (!__LITE__) { - app.directive('t', vTDirective(i18n)) - } } diff --git a/packages/vue-i18n-core/src/plugin/next.ts b/packages/vue-i18n-core/src/plugin/next.ts index 94fcde630..0021c30de 100644 --- a/packages/vue-i18n-core/src/plugin/next.ts +++ b/packages/vue-i18n-core/src/plugin/next.ts @@ -1,14 +1,12 @@ -import { Translation } from '../components/Translation' -import { NumberFormat } from '../components/NumberFormat' +import { isBoolean, isPlainObject } from '@intlify/shared' import { DatetimeFormat } from '../components/DatetimeFormat' -import { vTDirective } from '../directive' -import { isPlainObject, isBoolean } from '@intlify/shared' +import { NumberFormat } from '../components/NumberFormat' +import { Translation } from '../components/Translation' import type { App } from 'vue' -import type { I18n } from '../i18n' import type { I18nPluginOptions } from './types' -export function apply(app: App, i18n: I18n, ...options: unknown[]): void { +export function apply(app: App, ...options: unknown[]): void { const pluginOptions = isPlainObject(options[0]) ? (options[0] as I18nPluginOptions) : {} @@ -28,9 +26,4 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void { app.component(name, DatetimeFormat) ) } - - // install directive - if (!__LITE__) { - app.directive('t', vTDirective(i18n)) - } } diff --git a/packages/vue-i18n-core/test/directive.test.ts b/packages/vue-i18n-core/test/directive.test.ts deleted file mode 100644 index f62080887..000000000 --- a/packages/vue-i18n-core/test/directive.test.ts +++ /dev/null @@ -1,292 +0,0 @@ -/** - * @vitest-environment jsdom - */ -/* eslint-disable @typescript-eslint/no-explicit-any */ -// allow any in error -/* eslint-disable @typescript-eslint/no-empty-function */ - -// utils -import * as shared from '@intlify/shared' -vi.mock('@intlify/shared', async () => { - const actual = await vi.importActual('@intlify/shared') - return { - ...actual, - warn: vi.fn(), - warnOnce: vi.fn() - } -}) - -import { - compile, - fallbackWithLocaleChain, - registerLocaleFallbacker, - registerMessageCompiler, - registerMessageResolver, - resolveValue -} from '@intlify/core-base' -import { format } from '@intlify/shared' -import { defineComponent, h, ref, resolveDirective, withDirectives } from 'vue' -import { errorMessages, I18nErrorCodes } from '../src/errors' -import { createI18n } from '../src/index' -import { mount } from './helper' - -beforeAll(() => { - registerMessageCompiler(compile) - registerMessageResolver(resolveValue) - registerLocaleFallbacker(fallbackWithLocaleChain) -}) - -describe('basic', () => { - test('literal', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, 'hello']]) - } - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

hello!

') - }) - - test('binding', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const msg = ref('hello') - const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, msg.value]]) - } - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

hello!

') - }) -}) - -test('object literal', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello, {name}!' - }, - ja: { - hello: 'こんにちは、{name}！' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const name = ref('kazupon') - const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [ - [t!, { path: 'hello', locale: 'ja', args: { name: name.value } }] - ]) - } - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

こんにちは、kazupon！

') -}) - -test('plural', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - banana: 'no bananas | {n} banana | {n} bananas' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, { path: 'banana', choice: 2 }]]) - } - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

2 bananas

') -}) - -test('legacy mode', async () => { - const mockWarn = vi.spyOn(shared, 'warnOnce') - // eslint-disable-next-line @typescript-eslint/no-empty-function - mockWarn.mockImplementation(() => {}) - - const i18n = createI18n({ - legacy: true, - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, 'hello']]) - } - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

hello!

') -}) - -test('fallback to global scope', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const Child = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, 'hello']]) - } - } - }) - - const App = defineComponent({ - setup() { - return () => h('div', [h(Child)]) - } - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

hello!

') -}) - -test('using in template', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - template: `

` - }) - const wrapper = await mount(App, i18n) - - expect(wrapper.html()).toEqual('

hello!

') -}) - -describe('errors', () => { - let org: any // eslint-disable-line @typescript-eslint/no-explicit-any - let spy: any // eslint-disable-line @typescript-eslint/no-explicit-any - beforeEach(() => { - org = console.warn - spy = vi.fn() - console.warn = spy - }) - afterEach(() => { - console.warn = org - }) - - test(errorMessages[I18nErrorCodes.REQUIRED_VALUE], async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, { locale: 'ja' }]]) - } - } - }) - - let error: Error | null = null - try { - await mount(App, i18n) - } catch (e: any) { - error = e - } - expect(error!.message).toEqual( - format(errorMessages[I18nErrorCodes.REQUIRED_VALUE], 'path') - ) - }) - - test(errorMessages[I18nErrorCodes.INVALID_VALUE], async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => withDirectives(h('p'), [[t!, 1]]) - } - }) - - let error: Error | null = null - try { - await mount(App, i18n) - } catch (e: any) { - error = e - } - expect(error!.message).toEqual(errorMessages[I18nErrorCodes.INVALID_VALUE]) - }) -}) - -/* eslint-enable @typescript-eslint/no-empty-function */ diff --git a/packages/vue-i18n-core/test/issues.test.ts b/packages/vue-i18n-core/test/issues.test.ts index 8ca2c22d1..09c060c87 100644 --- a/packages/vue-i18n-core/test/issues.test.ts +++ b/packages/vue-i18n-core/test/issues.test.ts @@ -21,15 +21,7 @@ import { resolveValue, setDevToolsHook } from '@intlify/core-base' -import { - defineComponent, - getCurrentInstance, - h, - nextTick, - ref, - resolveDirective, - withDirectives -} from 'vue' +import { defineComponent, getCurrentInstance, nextTick, ref } from 'vue' import { createI18n, useI18n } from '../src/i18n' import { mount } from './helper' @@ -781,24 +773,11 @@ test('issue #1083', async () => {
` }) - const HelloWorld = defineComponent({ - setup() { - const t = resolveDirective('t') - return () => { - return withDirectives(h('h1', { id: 'v-t' }), [ - [t!, { path: 'hello_world' }] - ]) - } - } - }) - const App = defineComponent({ components: { - LanguageSelector, - HelloWorld + LanguageSelector }, template: ` - ` }) @@ -807,16 +786,12 @@ test('issue #1083', async () => { const enEl = wrapper.rootEl.querySelector('#en') const jaEl = wrapper.rootEl.querySelector('#ja') - const dirEl = wrapper.rootEl.querySelector('#v-t') - expect(dirEl!.textContent).toEqual('Hello World!') jaEl!.dispatchEvent(new Event('click')) await nextTick() - expect(dirEl!.textContent).toEqual('こんにちは世界！') enEl!.dispatchEvent(new Event('click')) await nextTick() - expect(dirEl!.textContent).toEqual('Hello World!') }) test('issue #1123', async () => { diff --git a/packages/vue-i18n-core/test/plugin.test.ts b/packages/vue-i18n-core/test/plugin.test.ts index 8ee5faea3..f8df4de01 100644 --- a/packages/vue-i18n-core/test/plugin.test.ts +++ b/packages/vue-i18n-core/test/plugin.test.ts @@ -4,25 +4,22 @@ vitest.mock('../src/directive') import { createApp } from 'vue' -import { I18n, I18nInternal } from '../src/i18n' import { apply } from '../src/plugin/next' describe('globalInstall option', () => { test('default', () => { const app = createApp({}) - const i18n = {} as I18n & I18nInternal const spy = vi.spyOn(app, 'component') - apply(app, i18n) + apply(app) expect(spy).toHaveBeenCalled() }) test('false', () => { const app = createApp({}) - const i18n = {} as I18n & I18nInternal const spy = vi.spyOn(app, 'component') - apply(app, i18n, { globalInstall: false }) + apply(app, { globalInstall: false }) expect(spy).not.toHaveBeenCalled() }) }) diff --git a/packages/vue-i18n-core/test/ssr.test.ts b/packages/vue-i18n-core/test/ssr.test.ts index 77f9f3d02..0df8e4477 100644 --- a/packages/vue-i18n-core/test/ssr.test.ts +++ b/packages/vue-i18n-core/test/ssr.test.ts @@ -7,15 +7,7 @@ import { resolveValue } from '@intlify/core-base' import { renderToString } from '@vue/server-renderer' -import { - createSSRApp, - defineComponent, - h, - ref, - resolveComponent, - resolveDirective, - withDirectives -} from 'vue' +import { createSSRApp, defineComponent, h, resolveComponent } from 'vue' import { createI18n, useI18n } from '../src/index' // utils @@ -107,113 +99,3 @@ test('component: i18n-t', async () => { expect(await renderToString(app)).toMatch(`

こんにちは！

`) }) - -describe('custom directive: v-t', () => { - test('basic', async () => { - const i18n = createI18n({ - legacy: false, - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, 'hello']]) - } - } - }) - const app = createSSRApp(App) - app.use(i18n) - - expect(await renderToString(app)).toEqual('

hello!

') - }) - - test('binding', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello!' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const msg = ref('hello') - const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, msg.value]]) - } - } - }) - const app = createSSRApp(App) - app.use(i18n) - - expect(await renderToString(app)).toEqual('

hello!

') - }) - - test('object literal', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - hello: 'hello, {name}!' - }, - ja: { - hello: 'こんにちは、{name}！' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const name = ref('kazupon') - const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [ - [t!, { path: 'hello', locale: 'ja', args: { name: name.value } }] - ]) - } - } - }) - const app = createSSRApp(App) - app.use(i18n) - - expect(await renderToString(app)).toEqual('

こんにちは、kazupon！

') - }) - - test('plural', async () => { - const i18n = createI18n({ - locale: 'en', - messages: { - en: { - banana: 'no bananas | {n} banana | {n} bananas' - } - } - }) - - const App = defineComponent({ - setup() { - //

- const t = resolveDirective('t') - return () => { - return withDirectives(h('p'), [[t!, { path: 'banana', choice: 2 }]]) - } - } - }) - const app = createSSRApp(App) - app.use(i18n) - - expect(await renderToString(app)).toEqual('

2 bananas

') - }) -}) diff --git a/packages/vue-i18n/src/index.ts b/packages/vue-i18n/src/index.ts index c9b97463c..a614a9d44 100644 --- a/packages/vue-i18n/src/index.ts +++ b/packages/vue-i18n/src/index.ts @@ -88,11 +88,6 @@ export { MissingHandler, VueMessageType } from '../../vue-i18n-core/src/composer' -export { - TranslationDirective, - vTDirective, - VTDirectiveValue -} from '../../vue-i18n-core/src/directive' export { ComposerAdditionalOptions, ComposerExtender, diff --git a/packages/vue-i18n/src/runtime.ts b/packages/vue-i18n/src/runtime.ts index b3b0bfeb5..16df9e3f6 100644 --- a/packages/vue-i18n/src/runtime.ts +++ b/packages/vue-i18n/src/runtime.ts @@ -87,11 +87,6 @@ export { MissingHandler, VueMessageType } from '../../vue-i18n-core/src/composer' -export { - TranslationDirective, - vTDirective, - VTDirectiveValue -} from '../../vue-i18n-core/src/directive' export { ComposerAdditionalOptions, ComposerExtender,