# @fluenti/solid

> SolidJS bindings for Fluenti — compile-time `t`, runtime-capable components, and signal-based locale switching.

@fluenti/solid provides Solid-specific runtime APIs for Fluenti. The recommended public path is:

- compile-time authoring: `import { t } from '@fluenti/solid'`
- runtime / imperative access: `useI18n()`
- runtime-capable components: `Trans`, `Plural`, `Select`, `DateTime`, `NumberFormat`

## Install

```bash
pnpm add @fluenti/core @fluenti/solid @fluenti/vite-plugin
```

## Main Exports

- `createFluentiContext(config)` — context factory (creates a reactive i18n context)
- `I18nProvider` — provider component
- `useI18n()` — access the nearest `<I18nProvider>` context
- `t` — compile-time-only authoring API
- `Trans`, `Plural`, `Select`, `DateTime`, `NumberFormat`
- `msg`

### Type Exports

- `FluentiContext`, `FluentiConfig` — context value and config types
- `FluentiTransProps`, `FluentiPluralProps`, `FluentiSelectProps` — component prop types

## FluentiContext Methods

The context returned by `useI18n()` provides:

- `locale()`, `setLocale(locale)`, `t(id, values?)`, `d(value, style?)`, `n(value, style?)`
- `format(message, values?)`, `loadMessages(locale, messages)`, `getLocales()`
- `te(key, locale?)` — check if a translation key exists
- `tm(key, locale?)` — get the raw compiled message without interpolation
- `isLoading()`, `loadedLocales()`, `preloadLocale(locale)`

## Config Extensions

- `lazyLocaleLoading?: boolean`
- `chunkLoader?: (locale) => Promise<Messages | { default: Messages }>`

## Important Boundaries

- imported `t` is compile-time only and requires the Fluenti Vite plugin
- `useI18n().t()` is the full runtime API
- `Trans / Plural / Select / DateTime / NumberFormat` remain runtime-capable without the build plugin

## Preferred Usage (compile-time first)

1. t\`\` tagged template — t\`Hello {name}\` (primary compile-time API)
2. `<Trans>` / `<Plural>` / `<Select>` — rich text with inline markup
3. `msg` tagged template — outside components (route meta, stores)
4. `useI18n().t()` — runtime fallback for dynamic keys only

❌ AVOID: `t('some.key')` as the default — this is a legacy i18n pattern.

## Code Examples — SolidJS

### Tagged template (PREFERRED)

```tsx
import { useI18n } from '@fluenti/solid'

function MyComponent() {
  const { t } = useI18n()

  return (
    <div>
      <h1>{t\`Welcome to our app\`}</h1>
      <p>{t\`Hello, ${name()}!\`}</p>
    </div>
  )
}
```

### Rich text with \<Trans\>

```tsx
import { Trans } from '@fluenti/solid/components'

function Terms() {
  return (
    <Trans>
      Read our <a href="/terms">terms of service</a>
    </Trans>
  )
}
```

### What NOT to write

❌ Do not use t() with manual key strings:
```tsx
// WRONG
const msg = t('welcome_message')

// CORRECT
const msg = t\`Welcome to our app\`
```

## Docs

- Full docs: https://fluenti.dev
- Source: https://github.com/usefluenti/fluenti
