npm package: @jill64/svelte-i18n
Description: 🌍 i18n toolkit for SvelteKit
Author: jill64
Latest version: 2.2.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!----- BEGIN GHOST DOCS HEADER ----->

# @jill64/svelte-i18n

<!----- BEGIN GHOST DOCS BADGES ----->

<a href="https://npmjs.com/package/@jill64/svelte-i18n"><img src="https://img.shields.io/npm/v/@jill64/svelte-i18n" alt="npm-version" /></a> <a href="https://npmjs.com/package/@jill64/svelte-i18n"><img src="https://img.shields.io/npm/l/@jill64/svelte-i18n" alt="npm-license" /></a> <a href="https://npmjs.com/package/@jill64/svelte-i18n"><img src="https://img.shields.io/npm/dm/@jill64/svelte-i18n" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/@jill64/svelte-i18n"><img src="https://img.shields.io/bundlephobia/min/@jill64/svelte-i18n" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-i18n/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-i18n/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a> <a href="https://svelte-i18n.jill64.dev"><img src="https://img.shields.io/website?up_message=working&down_message=down&url=https%3A%2F%2Fsvelte-i18n.jill64.dev" alt="website" /></a>

<!----- END GHOST DOCS BADGES ----->

🌍 i18n toolkit for SvelteKit

## [Demo](https://svelte-i18n.jill64.dev)

<!----- END GHOST DOCS HEADER ----->

## Install

```sh
npm i @jill64/svelte-i18n
```

## Quick Example

Use a function to translate from the specified locales based on the current route parameters.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

export const i = init({
  locales: ['en', 'ja'],
  slug: '[locale]',
  defaultLocale: 'en'
})
```

```svelte
<!-- src/routes/[locale]/+page.svelte -->
<script>
  import { i } from '$lib/i18n'

  // src/routes/en => 'en'
  // src/routes/ja => 'ja'
  // src/routes/invalid-param => 'en' (defaultLocale)
  console.log(i.locale)
</script>

<h1>
  <!-- src/routes/en => English -->
  <!-- src/routes/ja => 日本語 -->
  {i.translate({
    en: 'English',
    ja: '日本語'
  })}
</h1>
```

## Bind html lang attribute

Each time a locale change is detected on the client side, it is reflected in the `lang` attribute of the `html`

```svelte
<!-- src/routes/+layouts.svelte -->
<script>
  import { LanguageManager } from '@jill64/svelte-i18n'
</script>

<LanguageManager />
```

↓

```html
<!-- locale = 'en' | 'ja' -->
<html lang="{locale}">
  <!-- ... -->
</html>
```

## Attach html lang attribute

SSR uses the `attach` handler to add the lang attribute to html tags.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const { i } = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})
```

```js:src/hooks.server.js
// src/hooks.server.js
import { i as handle } from '$lib/i18n'
export const handle = i.attach
```

To use with any handle hook, use the `sequence` function.

```js:src/hooks.server.js
// src/hooks.server.js
import { i } from '$lib/i18n'
import { sequence } from '@sveltejs/kit/hooks'

export const handle = sequence(i.attach, () => {
  // ... Your Handler Function
})
```

## Route param matcher

Use param matcher to add type checking for route parameters.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const i = init({
  locales: ['en', 'ja'],
  slug: '[locale=locale]',
  defaultLocale: 'en'
})
```

```js:src/params/locale.js
// src/params/locale.js
import { i } from '$lib/i18n'
export const match = i.match
```

## Switch Language

Quickly create links to different language versions of the current page.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const i = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})
```

```svelte
<!-- src/routes/[locale](en)/foo/bar/+page.svelte -->
<script>
  import { i } from '$lib/i18n'
</script>

<!-- href="/ja/foo/bar" -->
<a href={i.altered('ja')}> Jump to Japanese Version </a>
```

## Locale Alternates

Create a link tag in the head element to another language based on the Locales to improve SEO.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n'

const {
  /* ... */
} = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})
```

```svelte
<!-- src/routes/+layout.svelte -->
<script>
  import { LocaleAlternates } from '@jill64/svelte-i18n'
</script>

<LocaleAlternates xDefaultHref="default-language-href(optional)" />
```

For example, if you are in `/[locale(en)]/foo/bar`, create the following tag in the `head` element

```html
<link rel="alternate" hreflang="ja" href="/ja/foo/bar" />
<link
  rel="alternate"
  hreflang="x-default"
  href="default-language-href(optional)"
/>
```

## RTL

If RTL is required, a Svelte component can be created as follows

```svelte
<script>
  import { i } from '$lib/i18n'
</script>

<p dir={i.locale === 'ar' ? 'rtl' : 'ltr'}>
  {i.translate({
    en: 'English',
    ar: 'عربي'
  })}
</p>
```

## Web App Mode

Web applications may not want to include language as a parameter to keep URLs clean.
In app mode, language settings are stored using cookies and localStorage.

```js:src/lib/i18n.js
// src/lib/i18n.js
import { init } from '@jill64/svelte-i18n/app'

// { locale, translate, attach, setting }
export const i = init({
  locales: ['en', 'ja'],
  defaultLocale: 'en'
})
```

The following features are not available in this mode

- route based language switching
- route matcher
- `match`
- `altered`
- `LocaleAlternates`

## Set Locale

In app mode, language settings can be changed by setting values in the `i.setting` store.

```svelte
<script>
  import { i } from '$lib/i18n'

  const changeToJP = () => {
    i.setting = 'ja'
  }
  const changeToEN = () => {
    i.setting = 'en'
  }
</script>

<button onclick={changeToJP}> Change to Japanese </button>
<button onclick={changeToEN}> Change to English </button>
```

<!----- BEGIN GHOST DOCS FOOTER ----->

## License

[MIT](LICENSE)

<!----- END GHOST DOCS FOOTER ----->