fix(components): strictly slot rendering (#972)

* fix(components): strictly slot rendering

related #968

* updates

Author: kazupon

packages/vue-i18n-core/src/components/formatRenderer.ts

@@ -5,6 +5,7 @@ import { isString, isObject, isArray, assign } from '@intlify/shared'
 import type {
   RenderFunction,
   SetupContext,
+  VNode,
   VNodeChild,
   VNodeArrayChildren
 } from 'vue'
@@ -40,6 +41,10 @@ type FormatOverrideOptions =
   | Intl.NumberFormatOptions
   | Intl.DateTimeFormatOptions
 
+function isVNode(target: unknown): target is VNode[] {
+  return isArray(target) && !isString(target[0])
+}
+
 export function renderFormatter<
   Props extends FormattableProps<Value, Format>,
   Value,
@@ -83,9 +88,13 @@ export function renderFormatter<
     if (isArray(parts)) {
       children = parts.map((part, index) => {
         const slot = slots[part.type]
-        return slot
+        const node = slot
           ? slot({ [part.type]: part.value, index, parts })
           : [part.value]
+        if (isVNode(node)) {
+          node[0].key = `${part.type}-${index}`
+        }
+        return node
       })
     } else if (isString(parts)) {
       children = [parts]

packages/vue-i18n-core/test/__snapshots__/issues.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue #968 1`] = `"<div class=\\"col-auto text-h6\\">£</div><div class=\\"col-auto text-h3\\">1</div><div class=\\"col-auto text-subtitle1 self-end text-amber\\">,</div><div class=\\"col-auto text-h3\\">150</div><div class=\\"col-auto text-subtitle1 self-end text-amber\\">,</div><div class=\\"col-auto text-h3\\">001</div><div class=\\"col-auto text-subtitle2 self-end text-primary\\">.</div><div class=\\"col-auto text-subtitle1 self-end text-red\\">20</div>"`;

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

@@ -491,3 +491,52 @@ test('issue #964', async () => {
   expect(defaultMsg).toEqual('foo')
   expect(t('bar', defaultMsg)).toEqual('foo')
 })
+
+test('issue #968', async () => {
+  const i18n = createI18n({
+    locale: 'en-GB',
+    numberFormats: {
+      'en-GB': {
+        currency: {
+          style: 'currency',
+          currency: 'GBP',
+          notation: 'standard',
+          useGrouping: true
+        }
+      }
+    }
+  })
+
+  const App = defineComponent({
+    data() {
+      return { amountFloat: parseFloat('115000120') / 100 }
+    },
+    template: `
+  <i18n-n :value="amountFloat" format="currency">
+    <template #currency="slotProps">
+      <div class="col-auto text-h6">{{ slotProps.currency }}</div>
+    </template>
+    <template #group="slotProps">
+      <div class="col-auto text-subtitle1 self-end text-amber">
+        {{ slotProps.group }}
+      </div>
+    </template>
+    <template #integer="slotProps">
+      <div class="col-auto text-h3">{{ slotProps.integer }}</div>
+    </template>
+    <template #fraction="slotProps">
+      <div class="col-auto text-subtitle1 self-end text-red">
+        {{ slotProps.fraction }}
+      </div>
+    </template>
+    <template #decimal="slotProps">
+      <div class="col-auto text-subtitle2 self-end text-primary">
+        {{ slotProps.decimal }}
+      </div>
+    </template>
+  </i18n-n>
+`
+  })
+  const wrapper = await mount(App, i18n)
+  expect(wrapper.html()).toMatchSnapshot()
+})