fix: crash of the app when we mix flat json keys

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

@@ -4,10 +4,12 @@ import {
   isObject,
   hasOwn,
   isPlainObject,
-  isString
+  isString,
+  warn
 } from '@intlify/shared'
 import { Text, createVNode } from 'vue'
 import { I18nErrorCodes, createI18nError } from './errors'
+import { I18nWarnCodes, getWarnMessage } from './warnings'
 
 import type { Locale, MessageResolver } from '@intlify/core-base'
 import type {
@@ -72,15 +74,28 @@ export function handleFlatJson(obj: unknown): unknown {
       const subKeys = key.split('.')
       const lastIndex = subKeys.length - 1
       let currentObj = obj
+      let hasStringValue = false
       for (let i = 0; i < lastIndex; i++) {
         if (!(subKeys[i] in currentObj)) {
           currentObj[subKeys[i]] = {}
         }
+        if (!isObject(currentObj[subKeys[i]])) {
+          __DEV__ &&
+            warn(
+              getWarnMessage(I18nWarnCodes.IGNORE_OBJ_FLATTEN, {
+                key: subKeys[i]
+              })
+            )
+          hasStringValue = true
+          break
+        }
         currentObj = currentObj[subKeys[i]]
       }
       // update last object value, delete old property
-      currentObj[subKeys[lastIndex]] = obj[key]
-      delete obj[key]
+      if (!hasStringValue) {
+        currentObj[subKeys[lastIndex]] = obj[key]
+        delete obj[key]
+      }
       // recursive process value if value is also a object
       if (isObject(currentObj[subKeys[lastIndex]])) {
         handleFlatJson(currentObj[subKeys[lastIndex]])

packages/vue-i18n-core/src/warnings.ts

@@ -11,7 +11,8 @@ export const I18nWarnCodes = {
   NOT_SUPPORTED_PRESERVE_DIRECTIVE: inc(), // 10
   NOT_SUPPORTED_GET_CHOICE_INDEX: inc(), // 11
   COMPONENT_NAME_LEGACY_COMPATIBLE: inc(), // 12
-  NOT_FOUND_PARENT_SCOPE: inc() // 13
+  NOT_FOUND_PARENT_SCOPE: inc(), // 13
+  IGNORE_OBJ_FLATTEN: inc() // 14
 } as const
 
 type I18nWarnCodes = (typeof I18nWarnCodes)[keyof typeof I18nWarnCodes]
@@ -23,7 +24,8 @@ export const warnMessages: { [code: number]: string } = {
   [I18nWarnCodes.NOT_SUPPORTED_PRESERVE_DIRECTIVE]: `Not supported 'preserveDirectiveContent'.`,
   [I18nWarnCodes.NOT_SUPPORTED_GET_CHOICE_INDEX]: `Not supported 'getChoiceIndex'.`,
   [I18nWarnCodes.COMPONENT_NAME_LEGACY_COMPATIBLE]: `Component name legacy compatible: '{name}' -> 'i18n'`,
-  [I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`
+  [I18nWarnCodes.NOT_FOUND_PARENT_SCOPE]: `Not found parent scope. use the global scope.`,
+  [I18nWarnCodes.IGNORE_OBJ_FLATTEN]: `Ignore object flatten: '{key}' key has an string value`
 }
 
 export function getWarnMessage(

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

@@ -8,4 +8,6 @@ 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>"`;
+exports[`issue #1365 1`] = `"<p>Animal</p>"`;
+
+exports[`issue #1373 1`] = `"<p class=\\"name\\">hello, <span>kazupon</span>!</p><p>6/5/2023</p><p>$100.00</p>"`;

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

@@ -872,6 +872,29 @@ test('issue #1123', async () => {
   )
 })
 
+test('issue #1365', async () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    flatJson: true,
+    messages: {
+      en: {
+        'animal.dog': 'Dog',
+        animal: 'Animal'
+      }
+    }
+  })
+  const App = defineComponent({
+    template: `
+    <p>{{ $t('animal') }}</p>
+    `
+  })
+
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
 test('issue #1373', async () => {
   const i18n = createI18n({
     locale: 'en-US',
@@ -887,7 +910,7 @@ test('issue #1373', async () => {
     <span>kazupon</span>
   </template>
 </I18nT>
-<I18nD tag="p" :value="new Date()"></I18nD>
+<I18nD tag="p" :value="new Date(1685951676578)"></I18nD>
 <I18nN tag="p" :value="100" format="currency"></I18nN>
 `
   })

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

@@ -1,13 +1,35 @@
+// utils
+import * as shared from '@intlify/shared'
+vi.mock('@intlify/shared', async () => {
+  const actual = await vi.importActual<object>('@intlify/shared')
+  return {
+    ...actual,
+    warn: vi.fn()
+  }
+})
 import { handleFlatJson } from '../src/utils'
+import { I18nWarnCodes, getWarnMessage } from '../src/warnings'
 
 test('handleFlatJson', () => {
+  const mockWarn = vi.spyOn(shared, 'warn')
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  mockWarn.mockImplementation(() => {})
+
   const obj = {
     a: { a1: 'a1.value' },
     'a.a2': 'a.a2.value',
     'b.x': {
       'b1.x': 'b1.x.value',
       'b2.x': ['b2.x.value0', 'b2.x.value1'],
       'b3.x': { 'b3.x': 'b3.x.value' }
+    },
+    c: {
+      'animal.dog': 'Dog',
+      animal: 'Animal'
+    },
+    d: {
+      'animal.dog': 'Dog',
+      animal: {}
     }
   }
   const expectObj = {
@@ -21,7 +43,23 @@ test('handleFlatJson', () => {
         b2: { x: ['b2.x.value0', 'b2.x.value1'] },
         b3: { x: { b3: { x: 'b3.x.value' } } }
       }
+    },
+    c: {
+      'animal.dog': 'Dog',
+      animal: 'Animal'
+    },
+    d: {
+      animal: {
+        dog: 'Dog'
+      }
     }
   }
+
   expect(handleFlatJson(obj)).toEqual(expectObj)
+  expect(mockWarn).toHaveBeenCalled()
+  expect(mockWarn.mock.calls[0][0]).toEqual(
+    getWarnMessage(I18nWarnCodes.IGNORE_OBJ_FLATTEN, {
+      key: 'animal'
+    })
+  )
 })