auto-i18n-translation-plugins

The auto-i18n-translation-plugins is a frontend auto-translation plugin designed to provide multi-language support without requiring manual source code modifications. It works by detecting text that needs translation and using translation services to automate the process.

Key Capabilities:

• Zero Code Changes: Achieve multi-language support without modifying your existing source code.
• Framework Agnostic: Supports all JavaScript-based frontend frameworks, including Vue 2, Vue 3, and React.
• Build Tool Compatibility: Works with Webpack, Vite, Rsbuild, and Rollup.
• Multiple Translation Engines: Includes default support for Google and Youdao translation services, with the ability to implement custom translators.

The languageJsonMode option allows you to choose between:

• 'merged': All languages are combined into a single index.json.
• 'split': Each language is stored in its own separate JSON file.

Warning: When switching between these modes, you should set rewriteConfig: true to ensure the plugin regenerates the configuration files correctly and avoids conflicts between old and new file structures.

The translateType parameter determines how the plugin identifies text to translate:

• full-auto (Default): The plugin automatically scans strings and template strings for text that needs translation.
• semi-auto: The plugin only translates text that is explicitly wrapped in the translation function (e.g., $t('text')). This is useful when you want total control over what gets translated.

// semi-auto usage example
const HelloWorld = ({ name }) => {
    return (
        <div>
            <h1>{$t('Hello,')} {name}!</h1>
            <p>{$t('Welcome to our application')}</p>
        </div>
    )
}

By default, if a template string contains any target language text, the plugin includes the entire string for translation. Enabling deepScan: true allows the plugin to split and reconstruct template strings, translating only the specific matching text segments.

To use this, wrap your template strings with the $deepScan function. This tells the plugin at compile time that the string needs granular scanning.

Note: $deepScan only returns the original value at runtime; its primary purpose is for the build-time plugin.

// 1. Set deepScan: true in your plugin config
// 2. Use $deepScan in your code
const template = $deepScan(`
    <div class="container">
        <h1>Welcome</h1>
    </div>
`)

// The plugin converts this to:
// const template = `<div class="container"><h1>${$t('Welcome')}</h1></div>`

The translateType option determines how the plugin identifies text for translation:

• full-auto (Default): The plugin automatically scans the codebase. The source language support is limited to 中 (Chinese), 日 (Japanese), 韩 (Korean), and 俄 (Russian).
• semi-auto: Supports all source languages. In this mode, you must explicitly wrap the target text using the function name specified in translateKey (e.g., $t('text')). This ensures the plugin knows exactly which strings to translate.

// Example of semi-auto usage
const HelloWorld = ({ name = 'World' }) => {
    return (
        <div className="hello-world">
            <h1>{$t('Hello,')} {name}!</h1>
            <p>{$t('Welcome to our application')}</p>
        </div>
    )
}

Use the following commands to manage the development and production lifecycle of the Rsbuild React example:

• Development: Start the dev server to view the app at http://localhost:3000.
• Production Build: Build the application for production.
• Preview: Locally preview the production build.

# Start the dev server
pnpm dev

# Build the app for production
pnpm build

# Preview the production build locally
pnpm preview

To compile and minify the project for production deployment, use the build command.

yarn run build

To compile the project and enable hot-reloading for development, use the serve command.

yarn run serve

Use the following commands to maintain code quality:

• Run tests: yarn run test
• Lint and fix files: yarn run lint