port i18n or i18n-d component tag props

src/components/Translation.ts

@@ -1,9 +1,17 @@
-import { h, Fragment, defineComponent, SetupContext, VNodeChild } from 'vue'
+import {
+  h,
+  Component,
+  ComponentOptions,
+  Fragment,
+  defineComponent,
+  SetupContext,
+  VNodeChild
+} from 'vue'
 import { Composer, ComposerInternal } from '../composer'
 import { useI18n } from '../i18n'
 import { TranslateOptions } from '../core'
 import { NamedValue } from '../message/runtime'
-import { isNumber, isString } from '../utils'
+import { isNumber, isString, isObject } from '../utils'
 import { baseFormatProps, BaseFormatProps } from './base'
 
 export interface TranslationProps extends BaseFormatProps {
@@ -43,9 +51,12 @@ export const Translation = defineComponent({
       }
       const arg = getInterpolateArg(context, keys)
       const children = i18n.__transrateVNode(props.keypath, arg, options)
-      return props.tag
+      // prettier-ignore
+      return isString(props.tag)
         ? h(props.tag, { ...attrs }, children)
-        : h(Fragment, { ...attrs }, children)
+        : isObject(props.tag)
+          ? h(props.tag as Component | ComponentOptions, { ...attrs }, children)
+          : h(Fragment, { ...attrs }, children)
     }
   }
 })

src/components/base.ts

@@ -5,14 +5,14 @@ import { I18nScope } from '../i18n'
 export type ComponetI18nScope = Exclude<I18nScope, 'local'>
 
 export interface BaseFormatProps {
-  tag?: string
+  tag?: string | object
   locale?: Locale
   scope?: ComponetI18nScope
 }
 
 export const baseFormatProps = {
   tag: {
-    type: String
+    type: [String, Object]
   },
   locale: {
     type: String

src/components/formatRenderer.ts

@@ -1,13 +1,15 @@
 import {
   h,
+  Component,
+  ComponentOptions,
   RenderFunction,
   Fragment,
   SetupContext,
   VNodeChild,
   VNodeArrayChildren
 } from 'vue'
 import { NumberOptions, DateTimeOptions } from '../core'
-import { isString, isPlainObject, isArray } from '../utils'
+import { isString, isObject, isArray } from '../utils'
 import { BaseFormatProps } from './base'
 
 export interface FormattableProps<Value, Format> extends BaseFormatProps {
@@ -45,7 +47,7 @@ export function renderFormatter<
 
     if (isString(props.format)) {
       options.key = props.format
-    } else if (isPlainObject(props.format)) {
+    } else if (isObject(props.format)) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if (isString((props.format as any).key)) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,8 +74,11 @@ export function renderFormatter<
       children = [parts]
     }
 
-    return props.tag
+    // prettier-ignore
+    return isString(props.tag)
       ? h(props.tag, { ...attrs }, children)
-      : h(Fragment, { ...attrs }, children)
+      : isObject(props.tag)
+        ? h(props.tag as Component | ComponentOptions, { ...attrs }, children)
+        : h(Fragment, { ...attrs }, children)
   }
 }

test/components/DatetimeFormat.test.ts

@@ -3,7 +3,7 @@
  */
 
 import { mount } from '../helper'
-import { defineComponent } from 'vue'
+import { defineComponent, SetupContext, VNodeChild, h } from 'vue'
 import { createI18n } from '../../src/i18n'
 
 const datetimeFormats = {
@@ -100,3 +100,33 @@ test('slots', async () => {
     /([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (協定世界時|グリニッジ標準時)/
   )
 })
+
+test('component', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    datetimeFormats
+  })
+
+  const MyComponent = defineComponent({
+    setup(props, context: SetupContext) {
+      return (): VNodeChild => h('span', context.slots.default())
+    }
+  })
+
+  const App = defineComponent({
+    data: () => ({ MyComponent }),
+    template: `
+<i18n-d :tag="MyComponent" :value="new Date()"></i18n-d>
+<i18n-d :tag="MyComponent" :value="new Date()" format="long"></i18n-d>
+<i18n-d
+  :tag="MyComponent"
+  :value="new Date()"
+  format="long"
+  locale="ja-JP-u-ca-japanese"
+></i18n-d>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html().includes('span')).toBeTruthy()
+})

test/components/NumberFormat.test.ts

@@ -3,7 +3,7 @@
  */
 
 import { mount } from '../helper'
-import { defineComponent } from 'vue'
+import { defineComponent, SetupContext, VNodeChild, h } from 'vue'
 import { createI18n } from '../../src/i18n'
 
 const numberFormats = {
@@ -93,3 +93,30 @@ test('slots', async () => {
     `<span style=\"color: green;\">€</span><span style=\"font-weight: bold;\">1</span><span style=\"font-weight: bold;\">,</span><span style=\"font-weight: bold;\">234</span>.<span style=\"font-size: small;\">00</span>`
   )
 })
+
+test('component', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    numberFormats
+  })
+
+  const MyComponent = defineComponent({
+    setup(props, context: SetupContext) {
+      return (): VNodeChild => h('span', context.slots.default())
+    }
+  })
+
+  const App = defineComponent({
+    data: () => ({ MyComponent }),
+    template: `
+<i18n-n :tag="MyComponent" :value="100"></i18n-n>
+<i18n-n :tag="MyComponent" :value="100" format="currency"></i18n-n>
+<i18n-n :tag="MyComponent" :value="100" format="currency" locale="ja-JP"></i18n-n>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(
+    `<span>100</span><span>$100.00</span><span>￥100</span>`
+  )
+})

test/components/Translation.test.ts

@@ -3,7 +3,7 @@
  */
 
 import { mount } from '../helper'
-import { defineComponent, ref } from 'vue'
+import { h, defineComponent, SetupContext, VNodeChild, ref } from 'vue'
 import { createI18n, useI18n } from '../../src/i18n'
 
 const messages = {
@@ -182,3 +182,32 @@ test('scope', async () => {
 
   expect(wrapper.html()).toEqual(`this is rootthis is global`)
 })
+
+test('component', async () => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages
+  })
+
+  const MyComponent = defineComponent({
+    setup(props, context: SetupContext) {
+      return (): VNodeChild => h('p', context.slots.default())
+    }
+  })
+
+  const App = defineComponent({
+    data: () => ({ MyComponent }),
+    template: `
+<i18n-t :tag="MyComponent" class="name" keypath="message.named">
+  <template #name>
+    <span>kazupon</span>
+  </template>
+</i18n-t>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(
+    `<p class="name">hello, <span>kazupon</span>!</p>`
+  )
+})