1.0.7 • Published 10 months ago

lingui-solid v1.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

NPM Version NPM Version NPM Version

Summary

This is fork of the @lingui/react with SolidJS support.

More details: https://github.com/lingui/js-lingui/pull/2101

Install

  1. Install required packages
npm i lingui-solid
npm i -D babel-plugin-lingui-macro-solid babel-plugin-lingui-extract-messages-solid
  1. Modify lingui.config.ts
import { LinguiConfig } from '@lingui/conf';
import extractor from 'babel-plugin-lingui-extract-messages-solid';

const config: LinguiConfig = {
  // .....
  // This is required!
  runtimeConfigModule: {
    Trans: ["lingui-solid", "Trans"],
    useLingui: ["lingui-solid", "useLingui"],
    extractors: [extractor]
  }
};
export default config;
  1. Modify vite.config.ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import { lingui } from "@lingui/vite-plugin";

export default defineConfig({
  // .....
  plugins: [
    lingui(), // this is required
    solidPlugin({
      babel: {
        plugins: ["babel-plugin-lingui-macro-solid"], // this is also required!
      }
    }),
    // ....
   ],
  // ....
});

Usage

In general, usage is same with @lingui/react.

Main component:

import { I18nProvider } from "lingui-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:

import { createEffect } from "lingui-solid";
import { useLingui, Trans } from "lingui-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

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago