Add support for flat json separated with dot('.') (#294)

* add function `handleFlatJson` and its test to `message-resolver`

function `handleFlatJson` is use to transform flat json to normal json.

* add support for flat json in i18n messages

Author: PeterAlfredLee

packages/message-resolver/src/index.ts

@@ -321,3 +321,50 @@ export function resolveValue(obj: unknown, path: Path): PathValue {
 
   return last
 }
+
+/**
+ * Transform flat json in obj to normal json in obj
+ */
+export function handleFlatJson(obj: unknown): unknown {
+  // check obj
+  if (!isObject(obj)) {
+    return obj
+  }
+
+  for (const key in obj as object) {
+    // check key
+    if (!obj.hasOwnProperty(key)) {
+      continue
+    }
+
+    // handle for normal json
+    if (!key.includes(PathCharTypes.DOT)) {
+      // recursive process value if value is also a object
+      if (typeof obj[key] === 'object') {
+        handleFlatJson(obj[key])
+      }
+    }
+    // handle for flat json, transform to normal json
+    else {
+      // go to the last object
+      const subKeys = key.split(PathCharTypes.DOT)
+      const lastIndex = subKeys.length - 1
+      let currentObj = obj
+      for (let i = 0; i < lastIndex; i++) {
+        if (!(subKeys[i] in currentObj)) {
+          currentObj[subKeys[i]] = {}
+        }
+        currentObj = currentObj[subKeys[i]]
+      }
+      // update last object value, delete old property
+      currentObj[subKeys[lastIndex]] = obj[key]
+      delete obj[key]
+      // recursive process value if value is also a object
+      if (typeof currentObj[subKeys[lastIndex]] === 'object') {
+        handleFlatJson(currentObj[subKeys[lastIndex]])
+      }
+    }
+  }
+
+  return obj
+}

packages/message-resolver/test/index.test.ts

@@ -1,4 +1,4 @@
-import { parse, resolveValue } from '../src/index'
+import { parse, resolveValue, handleFlatJson } from '../src/index'
 
 test('parse', () => {
   expect(parse('a')).toEqual(['a'])
@@ -121,3 +121,29 @@ test('resolveValue', () => {
   // blanket middle
   expect(resolveValue({}, 'a.b.c[]d')).toEqual(null)
 })
+
+test('handleFlatJson', () => {
+  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' }
+    }
+  }
+
+  handleFlatJson(obj)
+
+  expect(obj['a']['a1'] === 'a1.value').toEqual(true)
+  // @ts-ignore
+  expect(obj['a']['a2'] === 'a.a2.value').toEqual(true)
+  // @ts-ignore
+  expect(obj['b']['x']['b1']['x'] === 'b1.x.value').toEqual(true)
+  // @ts-ignore
+  expect(obj['b']['x']['b2']['x'][0] === 'b2.x.value0').toEqual(true)
+  // @ts-ignore
+  expect(obj['b']['x']['b2']['x'][1] === 'b2.x.value1').toEqual(true)
+  // @ts-ignore
+  expect(obj['b']['x']['b3']['x']['b3']['x'] === 'b3.x.value').toEqual(true)
+})

packages/vue-i18n/src/composer.ts

@@ -32,7 +32,8 @@ import {
   parseNumberArgs,
   clearNumberFormat,
   NOT_REOSLVED,
-  DevToolsTimelineEvents
+  DevToolsTimelineEvents,
+  handleFlatJson
 } from '@intlify/core-base'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { I18nErrorCodes, createI18nError } from './errors'
@@ -959,6 +960,13 @@ export function getLocaleMessages<Message = VueMessageType>(
     })
   }
 
+  // handle messages for flat json
+  for (const key in ret) {
+    if (ret.hasOwnProperty(key)) {
+      handleFlatJson(ret[key])
+    }
+  }
+
   return ret
 }
 

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

@@ -27,6 +27,29 @@ describe('createI18n', () => {
 
     expect(i18n.mode).toEqual('composition')
   })
+
+  test('flat json message in legacy mode', () => {
+    const i18n = createI18n({
+      messages: {
+        en: { 'mainMenu.buttonStart': 'Start!' }
+      }
+    })
+    const messages = i18n.global.messages
+    // @ts-ignore
+    expect(messages['en']['mainMenu']['buttonStart'] === 'Start!').toEqual(true)
+  })
+
+  test('flat json message in composition mode', () => {
+    const i18n = createI18n({
+      legacy: false,
+      messages: {
+        en: { 'mainMenu.buttonStart': 'Start!' }
+      }
+    })
+    const messages = i18n.global.messages.value
+    // @ts-ignore
+    expect(messages['en']['mainMenu']['buttonStart'] === 'Start!').toEqual(true)
+  })
 })
 
 describe('useI18n', () => {