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.

Introduction

Use i18n keys for notifications, plugin errors, and system messages to keep UI text centralized.

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')
// => 'text'

// 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	See zh translation.
`devServer.reconnected`	Dev Server Reconnected	See zh translation.
`devServer.connectionLost`	Dev Server connection lost	See zh translation.
`devServer.checkServer`	Check if Dev Server is running...	See zh translation.

FlowTransferKeys

Key	English	Chinese
`flowTransfer.shareComplete`	Share Complete	See zh translation.
`flowTransfer.shareFailed`	Share Failed	See zh translation.
`flowTransfer.copiedToClipboard`	Copied to Clipboard	See zh translation.

PluginKeys

Key	English	Chinese
`plugin.loadFailed`	Plugin Load Failed	See zh translation.
`plugin.manifestInvalid`	Invalid Manifest	See zh translation.

SystemKeys

Key	English	Chinese
`system.networkError`	Network Error	See zh translation.
`system.timeout`	Request Timeout	See zh translation.

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": "Text",
    "error": "Text"
  }
}

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: 'Text'
  }
})

Best Practices

Define keys in message-keys.ts to avoid drift.
Send keys via i18nMsg or i18nMsgWithParams.
Update locale files without touching business logic.

Technical Notes

$i18n: prefixes mark resolvable messages; the resolver maps them by locale.
Runtime injection is supported for plugin-provided messages.

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