This plugin exists to help simplify the migration to using the i18next selector API for TypeScript users.

What it does

@i18next-selector/vite-plugin exists for users with large translation sets who want to use i18next's enableSelector option in "optimize" mode.

With enableSelector: "optimize", you reduce the number of allocations the TypeScript compiler needs to create by ~1,700x.

That means you will never have to worry about IDE sluggishness or running into OOM issues in your CI/CD pipeline again.

But if you're using i18next to handle pluralization for you, with "optimize", you'll still need to manually choose the appropriate pluralization.

This is annoying and error prone, so @i18next-selector/vite-plugin takes care of generating the appropriate pluralization keys for you.

Caveats

Note that currently the plugin does not support "spread syntax".

See this issue to track progress on this feature.

Example

const ns1 = {/* translations */} as const
const ns2 = {/* translations */} as const

const translation = {
  // ↓↓ these nodes are not currently handled:
  ...ns1,
  ...ns2
  // ↑↑ these nodes are not currently handled:
}

export default translation

Demo

• .ts files

• .json files

• .yaml files

Installation

npm users:

$ npm i -D @i18next-selector/vite-plugin

yarn users:

$ yarn add -D @i18next-selector/vite-plugin

pnpm users:

$ pnpm add -D @i18next-selector/vite-plugin

Usage

In your vite config file, import the i18nextVitePlugin from @i18next-selector/vite-plugin.

Add a new entry to your config.plugins array, and call i18nextVitePlugin with your configuration. The plugin will automatically read your locales from sourceDir, and generate the corresponding .d.ts files in the same directory.

The plugin works with hot module reloading, so you can edit your translations and see them update in real-time, without having to reload your browser tab.

Example Configuration

// vite.config.ts
import type { UserConfig } from 'vite'
import * as path from 'node:path'
import { i18nextVitePlugin } from '@i18next-selector/vite-plugin'

export default {
  plugins: [
    i18nextVitePlugin({
      // required:
      sourceDir: path.join(path.resolve(), 'public', 'assets', 'locales'),
      // optional:
      formatCmd: 'yarn format:write',
      silent: true, // default: false
    })
  ]
} satisfies UserConfig