lingui / lingui/js-lingui

Proposal: Unify bundler plugins using unplugin

Open
#2,406 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.9k
Forks
457
Avg merge
1d 23h
Merged PRs (30d)
16

Description

### Problem Description

Lingui maintains separate packages for different bundlers:

- `@lingui/vite-plugin` - Vite plugin
- `@lingui/loader` - Webpack loader

Both use shared logic from `@lingui/cli/api`, but require separate packages and documentation. Adding support for new bundlers (esbuild, etc.) would mean creating and maintaining more packages. Tests are also duplicated for each bundler.

### Proposed Solution

Use [unplugin](https://github.com/unjs/unplugin) to create a unified plugin that works across multiple bundlers from a single codebase.

### Package structure

New package: `@lingui/plugin`

```
@lingui/plugin
├── /vite - Vite plugin
├── /webpack - Webpack plugin
├── /esbuild - esbuild plugin
└── /rspack - Rspack plugin
```

Usage:
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { lingui } from '@lingui/plugin/vite'

export default defineConfig({
plugins: [lingui()],
})
```

```ts
// webpack.config.ts
import { lingui } from '@lingui/plugin/webpack'

export default {
plugins: [lingui()],

// No need to setup loader manually, the plugin does it for you
// module: {
// rules: [
// {
// test: /\.po$/,
// use: '@lingui/loader',
// },
// ],
// },
}
```

### Reference

TanStack Router uses this approach:
- Package: `@tanstack/router-plugin`
- Source: https://github.com/TanStack/router/tree/main/packages/router-plugin

### Migration path

1. Create `@lingui/plugin` package
2. Deprecate `@lingui/vite-plugin` and `@lingui/loader`
3. Remove old packages in a future major version

### Notes

- Metro (React Native) is not supported by unplugin yet, so `@lingui/metro-transformer` remains separate

### Alternatives Considered

Keep `@lingui/vite-plugin` and `@lingui/loader` as separate packages, adding new packages for each bundler.

**Drawbacks:**
- More packages to maintain
- Duplicated boilerplate code
- Harder to ensure consistent behavior across bundlers

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the existing @lingui/vite-plugin and @lingui/loader packages, their shared @lingui/cli/api logic, and the TanStack Router plugin reference. Define the @lingui/plugin package entry points for Vite, Webpack, esbuild, and Rspack, while keeping @lingui/metro-transformer separate. Done means the migration path, deprecations, and unified plugin behavior are established.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite, webpack
Domain
build-system, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.