|
1 | 1 | # Lingo.dev compiler |
2 | 2 |
|
3 | | -### Development |
| 3 | +Lingo.dev compiler with automatic translation support for React applications. |
| 4 | + |
| 5 | +This package provides plugins for multiple bundlers (Vite, Webpack) and Next.js that |
| 6 | +automatically transforms React components to inject translation calls. |
| 7 | + |
| 8 | +## Features |
| 9 | + |
| 10 | +- **Automatic JSX text transformation** - Automatically detects and transforms translatable text in JSX |
| 11 | +- **Opt-in or automatic** - Configure whether to require `'use i18n'` directive or transform all files |
| 12 | +- **Multi-bundler support** - Works with Vite, Webpack and Next.js (both Webpack and Turbopack builds) |
| 13 | +- **Translation server** - On-demand translation generation during development |
| 14 | +- **AI-powered translations** - Support for multiple LLM providers and Lingo.dev Engine |
| 15 | + |
| 16 | +## Getting started |
| 17 | + |
| 18 | +Install the package - `pnpm install @lingo.dev/compiler` |
| 19 | + |
| 20 | +### Vite |
| 21 | + |
| 22 | +- Configure the plugin in your vite config. |
| 23 | + |
| 24 | + ```ts |
| 25 | + import { defineConfig } from "vite"; |
| 26 | + import { lingoCompilerPlugin } from "@lingo.dev/compiler/vite"; |
| 27 | + |
| 28 | + export default defineConfig({ |
| 29 | + plugins: [ |
| 30 | + lingoCompilerPlugin({ |
| 31 | + sourceRoot: "src", |
| 32 | + sourceLocale: "en", |
| 33 | + targetLocales: ["es", "de", "fr"], |
| 34 | + models: "lingo.dev", |
| 35 | + dev: { |
| 36 | + usePseudotranslator: true, |
| 37 | + }, |
| 38 | + }), // ...other plugins |
| 39 | + ], |
| 40 | + }); |
| 41 | + ``` |
| 42 | + |
| 43 | +- Wrap your app with `LingoProvider`. It should be used as early as possible in your app. |
| 44 | + e.g. in vite example with tanstack-router `LingoProvider` should be above `RouterProvider`, otherwise code-splitting breaks contexts. |
| 45 | + ```tsx |
| 46 | + // Imports and other tanstack router setup |
| 47 | + if (rootElement && !rootElement.innerHTML) { |
| 48 | + const root = ReactDOM.createRoot(rootElement); |
| 49 | + root.render( |
| 50 | + <StrictMode> |
| 51 | + <LingoProvider> |
| 52 | + <RouterProvider router={router} /> |
| 53 | + </LingoProvider> |
| 54 | + </StrictMode>, |
| 55 | + ); |
| 56 | + } |
| 57 | + ``` |
| 58 | + |
| 59 | +See `demo/vite-react-spa` for the working example |
| 60 | + |
| 61 | +### Next.js |
| 62 | + |
| 63 | +- Use `withLingo` function to wrap your existing next config. You will have to make your config async. |
| 64 | + |
| 65 | + ```ts |
| 66 | + import type { NextConfig } from "next"; |
| 67 | + import { withLingo } from "@lingo.dev/compiler/next"; |
| 68 | + |
| 69 | + const nextConfig: NextConfig = {}; |
| 70 | + |
| 71 | + export default async function (): Promise<NextConfig> { |
| 72 | + return await withLingo(nextConfig, { |
| 73 | + sourceRoot: "./app", |
| 74 | + sourceLocale: "en", |
| 75 | + targetLocales: ["es", "de", "ru"], |
| 76 | + models: "lingo.dev", |
| 77 | + dev: { |
| 78 | + usePseudotranslator: true, |
| 79 | + }, |
| 80 | + buildMode: "cache-only", |
| 81 | + }); |
| 82 | + } |
| 83 | + ``` |
| 84 | + |
| 85 | +- Wrap your app with `LingoProvider`. It should be used as early as possible in your app, root `Layout` is a good place. |
| 86 | + ```tsx |
| 87 | + export default function RootLayout({ |
| 88 | + children, |
| 89 | + }: Readonly<{ children: React.ReactNode }>) { |
| 90 | + return ( |
| 91 | + <LingoProvider> |
| 92 | + <html> |
| 93 | + <body className="antialiased">{children}</body> |
| 94 | + </html> |
| 95 | + </LingoProvider> |
| 96 | + ); |
| 97 | + } |
| 98 | + ``` |
| 99 | + |
| 100 | +## Development |
4 | 101 |
|
5 | 102 | `pnpm install` from project root |
6 | 103 | `pnpm turbo dev --filter=@lingo.dev/compile` to compile and watch for compiler changes |
|
0 commit comments