I18n Message System

The i18n message system enables seamless internationalization between main process and renderer process using a simple $i18n:key format.

Overview

Backend sends messages with i18n keys ($i18n:devServer.disconnected), and frontend resolves them to localized strings based on the user's language preference.

Backend Usage (Main Process)

import { i18nMsg, DevServerKeys, FlowTransferKeys } from '@talex-touch/utils/i18n'

// Basic usage - send i18n key
win.webContents.send('notification', {
  title: i18nMsg(DevServerKeys.DISCONNECTED),
  message: i18nMsg(DevServerKeys.CONNECTION_LOST)
})

// With parameters (for interpolation)
import { i18nMsgWithParams } from '@talex-touch/utils/i18n'

win.webContents.send('error', {
  message: i18nMsgWithParams('plugin.loadFailed', { name: 'my-plugin' })
})

Frontend Usage (Renderer)

import { resolveI18nMessage, i18nResolver, useI18nResolver } from '@talex-touch/utils/i18n'

// Set locale (typically on app init)
i18nResolver.setLocale('zh')

// Resolve message
const text = resolveI18nMessage('$i18n:devServer.disconnected')
// => '开发服务器已断开'

// Non-i18n strings pass through unchanged
const plain = resolveI18nMessage('Hello World')
// => 'Hello World'

// Vue composable
const { resolve, setLocale } = useI18nResolver()
const message = resolve(receivedMessage)

Message Keys

DevServerKeys

Key	English	Chinese
`devServer.disconnected`	Dev Server Disconnected	开发服务器已断开
`devServer.reconnected`	Dev Server Reconnected	开发服务器已重连
`devServer.connectionLost`	Dev Server connection lost	开发服务器连接已断开
`devServer.checkServer`	Check if Dev Server is running...	请检查开发服务器是否正常运行...

FlowTransferKeys

Key	English	Chinese
`flowTransfer.shareComplete`	Share Complete	分享完成
`flowTransfer.shareFailed`	Share Failed	分享失败
`flowTransfer.copiedToClipboard`	Copied to Clipboard	已复制到剪贴板

PluginKeys

Key	English	Chinese
`plugin.loadFailed`	Plugin Load Failed	插件加载失败
`plugin.manifestInvalid`	Invalid Manifest	清单文件无效

SystemKeys

Key	English	Chinese
`system.networkError`	Network Error	网络错误
`system.timeout`	Request Timeout	请求超时

Adding New Messages

1. Add Message Key

// packages/utils/i18n/message-keys.ts
export const MyModuleKeys = {
  SUCCESS: 'myModule.success',
  ERROR: 'myModule.error',
} as const

2. Add Translations

// packages/utils/i18n/locales/en.json
{
  "myModule": {
    "success": "Operation Successful",
    "error": "Operation Failed"
  }
}

// packages/utils/i18n/locales/zh.json
{
  "myModule": {
    "success": "操作成功",
    "error": "操作失败"
  }
}

3. Export Key

// packages/utils/i18n/message-keys.ts
export const MessageKeys = {
  // ... existing keys
  myModule: MyModuleKeys,
} as const

Custom Messages (Plugin Use)

Plugins can add their own messages:

import { i18nResolver } from '@talex-touch/utils/i18n'

// Add custom messages
i18nResolver.addMessages('en', {
  myPlugin: {
    hello: 'Hello from plugin'
  }
})

i18nResolver.addMessages('zh', {
  myPlugin: {
    hello: '插件问好'
  }
})

File Structure

packages/utils/i18n/
├── index.ts           # Unified exports
├── message-keys.ts    # Key definitions + utilities
├── resolver.ts        # Frontend resolver
└── locales/
    ├── en.json       # English translations
    └── zh.json       # Chinese translations