Can I get compiled message functions as raw string from getLocaleMessage()?

[kuanyui]

I need to merge multiple message JSON files via i18n.global.mergeLocaleMessage():

import enObj1 from '../../i18n/dist/en-US/main.json'
import enObj2 from '../../i18n/dist/en-US/enum.json'
import enObj3 from '../../uilib/i18n/en-US.json'
export const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'en-US', // set locale
  fallbackLocale: 'en-US',
  messages: { 'en-US': enObj1 },
})
i18n.global.mergeLocaleMessage('en-US', enObj2)
i18n.global.mergeLocaleMessage('en-US', enObj3)

However, when I want to access the merged locale message via i18n.global.getLocaleMessage('en-US'), it gives me a proxied object, whose each message are functions with an undocumented ctx as parameter:

I don't know how to get the translated message as string from these function, and the official documentation doesn't mention this. I also checked the tests (i18n.test.ts, composer.test.ts), but I still don't know why it can get raw JSON like that...

[kuanyui]

At last I wrote a fake ctx to feed these functions with the fake ctx...

  const fakeCtx = {
    normalize: (x: any[] | string) => isArr(x) ? x.join('') : x,
    interpolate: () => '',
    list: () => '',
    plural: (x: any[]) => x.join(''),
  }

Shameful but it works. 恥ずだが役に立つ。

[kazupon]

Unfortunately, we don't provide an API to get the raw string from the message functions.
I'm curious about the use case why you would want to get the raw string from the locale message retrieved with getLocaleMessage.

I don't know how to get the translated message as string from these function, and the official documentation doesn't mention this. I also checked the tests (i18n.test.ts, composer.test.ts), but I still don't know why it can get raw JSON like that...

This is because we are not using bundler in unit tests.

[kuanyui]

Unfortunately, we don't provide an API to get the raw string from the message functions.
I'm curious about the use case why you would want to get the raw string from the locale message retrieved with getLocaleMessage.

Because I'm writing a filter, which is i18n-awareness, to let user search across massive pages with keyword in English and current translation. A little similar to this:

I want it can search across the pages via keyword in English and/or in current language. For example, user can input process or プロセス to let Performance → Process (パフォーマンス→プロセス) show up.

My JSON file is formed in a patterned hierarchy, may looks like this:

{
  preference: {
    font: {
      title: "Fonts and Colors",
      defaultFont: "Default font",
    },
    performance: {
      title: "Performance",
      useRecommended: "Use recommended performance settings",
      useRecommendedDesc: "These settings are tailored to your computer's hardware and operating system"
    }
  }
}

{
  preference: {
    font: {
      title: "フォントと配色",
      defaultFont: "既定のフォント",
    },
    performance: {
      title: "パフォーマンス",
      useRecommended: "推奨のパフォーマンス設定を使用する",
      useRecommendedDesc: "これらの設定はコンピューターのハードウェアとオペレーティングシステムに合わせて調整されます。"
    }
  }
}

I intended to recursively search preference.* in both JSON structures , so I can match preference.performance with user inputted keyword perform or パフォーマンス.

I don't know how to get the translated message as string from these function, and the official documentation doesn't mention this. I also checked the tests (i18n.test.ts, composer.test.ts), but I still don't know why it can get raw JSON like that...

This is because we are not using bundler in unit tests.

Yes, I found the message functions are generated by vue-i18n-loader after asking this question. Sorry I've totally forgotten this at all because I've not modified webpack.config.js for a long long time.....

[kazupon]

It's interesting.
Thanks!