114 lines
3.5 KiB
Markdown
114 lines
3.5 KiB
Markdown
[](https://www.npmjs.com/package/@lingui-solid/solid)
|
|
|
|
[](https://www.npmjs.com/package/@lingui-solid/babel-plugin-lingui-macro)
|
|
|
|
[](https://www.npmjs.com/package/@lingui-solid/babel-plugin-extract-messages)
|
|
|
|
[](https://www.npmjs.com/package/@lingui-solid/vite-plugin)
|
|
|
|
# Summary
|
|
|
|
This is fork of the [LinguiJS](https://lingui.dev/) with SolidJS support.
|
|
|
|
More details in PR: https://github.com/lingui/js-lingui/pull/2101
|
|
|
|
# Install
|
|
1. Install required packages
|
|
```sh
|
|
npm install @lingui-solid/solid
|
|
npm install --save-dev vite-plugin-babel-macros
|
|
npm install --save-dev @lingui/cli@5 @lingui/conf@5 @lingui/core@5 @lingui/macro@5
|
|
npm install --save-dev @lingui-solid/vite-plugin @lingui-solid/babel-plugin-lingui-macro @lingui-solid/babel-plugin-extract-messages
|
|
|
|
yarn add @lingui-solid/solid
|
|
yarn add -D vite-plugin-babel-macros
|
|
yarn add -D @lingui/cli@5 @lingui/conf@5 @lingui/core@5 @lingui/macro@5
|
|
yarn add -D @lingui-solid/vite-plugin @lingui-solid/babel-plugin-lingui-macro @lingui-solid/babel-plugin-extract-messages
|
|
|
|
pnpm add @lingui-solid/solid
|
|
pnpm add -D vite-plugin-babel-macros
|
|
pnpm add -D @lingui/cli@5 @lingui/conf@5 @lingui/core@5 @lingui/macro@5
|
|
pnpm add -D @lingui-solid/vite-plugin @lingui-solid/babel-plugin-lingui-macro @lingui-solid/babel-plugin-extract-messages
|
|
```
|
|
|
|
2. Modify `lingui.config.ts`
|
|
```ts
|
|
import { LinguiConfig } from '@lingui/conf';
|
|
import extractor from '@lingui-solid/babel-plugin-extract-messages/extractor';
|
|
|
|
const config: LinguiConfig = {
|
|
// .....
|
|
// This is required!
|
|
runtimeConfigModule: {
|
|
Trans: ["@lingui-solid/solid", "Trans"],
|
|
useLingui: ["@lingui-solid/solid", "useLingui"],
|
|
extractors: [extractor]
|
|
}
|
|
};
|
|
export default config;
|
|
```
|
|
3. Modify `vite.config.ts`
|
|
```ts
|
|
import { defineConfig } from 'vite';
|
|
import solidPlugin from 'vite-plugin-solid';
|
|
import babelMacrosPlugin from 'vite-plugin-babel-macros';
|
|
import { lingui as linguiSolidPlugin } from '@lingui-solid/vite-plugin';
|
|
|
|
export default defineConfig({
|
|
// .....
|
|
plugins: [
|
|
babelMacrosPlugin(), // this is required
|
|
linguiSolidPlugin(), // this is required
|
|
solidPlugin(),
|
|
// ....
|
|
],
|
|
// ....
|
|
});
|
|
```
|
|
# Usage
|
|
In general, usage is same with [@lingui/react](https://lingui.dev/ref/react).
|
|
|
|
Main component:
|
|
```ts
|
|
import { I18nProvider } from "@lingui-solid/solid";
|
|
import { i18n } from "@lingui/core";
|
|
import { messages as messagesEn } from "./locales/en/messages.js";
|
|
|
|
i18n.load({
|
|
en: messagesEn,
|
|
});
|
|
i18n.activate("en");
|
|
|
|
const App = () => {
|
|
return (
|
|
<I18nProvider i18n={i18n}>
|
|
// rest of the app
|
|
</I18nProvider>
|
|
);
|
|
};
|
|
```
|
|
|
|
Each other components:
|
|
```ts
|
|
import { createEffect } from "solid-js";
|
|
import { useLingui, Trans } from "@lingui-solid/solid/macro";
|
|
|
|
const CurrentLocale = () => {
|
|
const { t, i18n } = useLingui();
|
|
|
|
createEffect(() => console.log(`Language chnaged: ${i18n().locale}`));
|
|
|
|
return (
|
|
<span>
|
|
{t`Current locale`}: {i18n().locale}<br />
|
|
<Trans>
|
|
See for more info:
|
|
<a href="https://lingui.dev/introduction">official documentation</a>
|
|
</Trans>;
|
|
</span>
|
|
);
|
|
};
|
|
```
|
|
|
|
For more info: https://lingui.dev/introduction
|