fix: resove with caml-case for components (#1418)

closes #1373
intlify · Jun 2, 2023 · 9961aa8 · 9961aa8
1 parent b37ed0c
commit 9961aa8
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 6 deletions.
diff --git a/packages/vue-i18n-core/src/plugin/next.ts b/packages/vue-i18n-core/src/plugin/next.ts
@@ -28,12 +28,15 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void {
 
  if (!(__LITE__ || __BRIDGE__) && globalInstall) {
  // install components
- app.component(
- !useI18nComponentName ? Translation.name : 'i18n',
- Translation
+ ;[!useI18nComponentName ? Translation.name : 'i18n', 'I18nT'].forEach(
+ name => app.component(name, Translation)
+ )
+ ;[NumberFormat.name, 'I18nN'].forEach(name =>
+ app.component(name, NumberFormat)
+ )
+ ;[DatetimeFormat.name, 'I18nD'].forEach(name =>
+ app.component(name, DatetimeFormat)
  )
- app.component(NumberFormat.name, NumberFormat)
- app.component(DatetimeFormat.name, DatetimeFormat)
  }
 
  // install directive

diff --git a/packages/vue-i18n-core/test/__snapshots__/issues.test.ts.snap b/packages/vue-i18n-core/test/__snapshots__/issues.test.ts.snap
@@ -7,3 +7,5 @@ exports[`issue #1014 1`] = `"<span>Add</span>"`;
 exports[`issue #1054, #1053 1`] = `"<p>+$123,456.79</p><span>+$123,456.79</span>"`;
 
 exports[`issue #1055 1`] = `"<p>John opened issue 123</p>"`;
+
+exports[`issue #1373 1`] = `"<p class=\\"name\\">hello, <span>kazupon</span>!</p><p>6/2/2023</p><p>$100.00</p>"`;
diff --git a/packages/vue-i18n-core/test/issues.test.ts b/packages/vue-i18n-core/test/issues.test.ts
@@ -34,6 +34,7 @@ import { createI18n, useI18n } from '../src/i18n'
 import { mount } from './helper'
 
 import type { ComponentOptions } from 'vue'
+import type { IntlDateTimeFormats } from '../src/index'
 
 const container = document.createElement('div')
 document.body.appendChild(container)
@@ -76,6 +77,65 @@ const messages = {
  named: 'こんにちは、{name}！',
  linked: '@:message.named ごきげんいかが？'
  }
+ },
+ 'en-US': {
+ named: 'hello, {name}!'
+ }
+}
+
+const datetimeFormats: IntlDateTimeFormats = {
+ 'en-US': {
+ long: {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ }
+ },
+ 'ja-JP-u-ca-japanese': {
+ long: {
+ era: 'long',
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ second: 'numeric',
+ weekday: 'long',
+ hour12: true,
+ timeZoneName: 'long'
+ }
+ }
+}
+
+const numberFormats = {
+ 'en-US': {
+ currency: {
+ style: 'currency',
+ currency: 'USD',
+ currencyDisplay: 'symbol'
+ },
+ decimal: {
+ style: 'decimal',
+ useGrouping: false
+ }
+ },
+ 'ja-JP': {
+ currency: {
+ style: 'currency',
+ currency: 'JPY',
+ currencyDisplay: 'symbol'
+ },
+ numeric: {
+ style: 'decimal',
+ useGrouping: false
+ },
+ percent: {
+ style: 'percent',
+ useGrouping: false
+ }
  }
 }
 
@@ -812,6 +872,30 @@ test('issue #1123', async () => {
  )
 })
 
+test('issue #1373', async () => {
+ const i18n = createI18n({
+ locale: 'en-US',
+ messages,
+ datetimeFormats,
+ numberFormats
+ })
+
+ const App = defineComponent({
+ template: `
+<I18nT tag="p" class="name" keypath="message.named">
+ <template #name>
+ <span>kazupon</span>
+ </template>
+</I18nT>
+<I18nD tag="p" :value="new Date()"></I18nD>
+<I18nN tag="p" :value="100" format="currency"></I18nN>
+`
+ })
+ const wrapper = await mount(App, i18n)
+
+ expect(wrapper.html()).toMatchSnapshot()
+})
+
 test('issue #1392', async () => {
  const i18n = createI18n({
  legacy: false,

diff --git a/packages/vue-i18n-core/test/plugin.test.ts b/packages/vue-i18n-core/test/plugin.test.ts
@@ -54,7 +54,7 @@ describe('globalInstall option', () => {
  const spy = vi.spyOn(app, 'component')
 
  apply(app, i18n)
- expect(spy).toHaveBeenCalledTimes(3)
+ expect(spy).toHaveBeenCalled()
  })
 
  test('false', () => {