fix:using the better Fragment detection(#1122) (#1177)

Co-authored-by: 双面胶 <[email protected]>

Author: littleboarx

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

@@ -1,22 +1,20 @@
-import { Fragment } from 'vue'
-import { isArray } from '@intlify/shared'
+import { Fragment, VNode } from 'vue'
 
 import type { NamedValue } from '@intlify/core-base'
-
 export function getInterpolateArg(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { slots }: any, // SetupContext,
   keys: string[]
 ): NamedValue | unknown[] {
   if (keys.length === 1 && keys[0] === 'default') {
     // default slot with list
-    const ret = slots.default ? slots.default() : []
+    const ret: VNode[] = slots.default ? slots.default() : []
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return ret.reduce((slot: any[], current: any) => {
-      return (slot = [
+    return ret.reduce((slot: (VNode | typeof Fragment)[], current: any) => {
+      return [
         ...slot,
-        ...(isArray(current.children) ? current.children : [current])
-      ])
+        ...(current.type === Fragment ? current.children : [current])
+      ]
     }, [])
   } else {
     // named slots

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

@@ -96,9 +96,9 @@ test('issue #708', async () => {
 	    <strong>{{ $t("world") }}</strong>
 	  </template>
 	</i18n-t>
-      
+
 	<br />
-      
+
 	<C2>
 	  <div>{{ $t("hello", { world: $t("world") }) }}</div>
 	  <i18n-t keypath="hello" tag="div">
@@ -685,3 +685,34 @@ test('issue #1083', async () => {
   await nextTick()
   expect(dirEl!.textContent).toEqual('Hello World!')
 })
+
+test('issue #1123', async () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages
+  })
+
+  const App = defineComponent({
+    setup() {
+      useI18n()
+      const values = ref(['kazupon', 'oranges'])
+      return { values }
+    },
+    template: `
+      <i18n-t keypath="message.list_multi" locale="en">
+      <span>Hello</span>
+      <a
+      >
+        <strong>Vue </strong>
+        I18n
+      </a>
+      </i18n-t>
+      `
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(
+    `hello, <span>Hello</span>! Do you like <a><strong>Vue </strong> I18n </a>?`
+  )
+})