https://github.com/cristovao-trevisan/svelte-intl

Tiny internationalization for your Svelte 3 apps using format-message and Intl object
https://github.com/cristovao-trevisan/svelte-intl

i18n internationalization svelte svelte3

Last synced: about 1 month ago
JSON representation

Tiny internationalization for your Svelte 3 apps using format-message and Intl object

• Host: GitHub
• URL: https://github.com/cristovao-trevisan/svelte-intl
• Owner: cristovao-trevisan
• License: mit
• Fork: true (Panya/svelte-intl)
• Created: 2019-06-03T16:33:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-12T19:10:34.000Z (over 5 years ago)
• Last Synced: 2024-04-25T18:43:02.647Z (7 months ago)
• Topics: i18n, internationalization, svelte, svelte3
• Language: TypeScript
• Homepage:
• Size: 804 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# *MERGED | DEPRECATED*

This package has been merged into [svelte-intl](https://github.com/Panya/svelte-intl)

# svelte-3-intl

[![NPM Version](https://img.shields.io/npm/v/svelte-3-intl.svg)](https://npm.im/svelte-3-intl)

Sizes (svelte-3-intl and format-message): 

[![Package Size](https://badgen.net/bundlephobia/minzip/svelte-3-intl)](https://bundlephobia.com/result?p=svelte-3-intl@latest)

[![Package Size](https://badgen.net/bundlephobia/minzip/format-message)](https://bundlephobia.com/result?p=format-message@latest)

Internationalize your Svelte 3 apps using [format-message](https://github.com/format-message/format-message).

## Installation

```sh

npm i svelte-3-intl format-message # format message is a peer dependency

```

## Usage

```html

  import { locale, translations, getBrowserLocale } from 'svelte-3-intl';

  // If you want to split your bundle, you can call this multiple times,

  // the dictionaries will be merged.

  translations.update({

    en: {

      hello: 'Hello, {name}',

    },

    pt: {

      hello: 'Olá, {name}',

    },

  })

  locale.set(getBrowserLocale('en')) // try to use window.navigator.language

  // use _ or translate

  import { _ } from 'svelte-3-intl'

  export let name = 'John'

 {$_('hello', { name })} 

```


## API

## `translate` (or "`_`")

> Translation store

- Type: `svelte.Readable`

### Example

```html

  import { get } from 'svelte/store'

  import { translate } from 'svelte-3-intl'

  const title = get(translate)('title')

 Title: {title} 

 Reactive Title: {$translate('title')} 

```


## `translations`

> Available translations

- Type: Object

  - `set(translations) => void` : Replace translations (avoid this)

  - `update(translations) => void` : Add more translations

  -  `subscribe` : Store subscription, avoid using this directly

## `locale`

> Current locale

- Type: like `svelte.Readable`, but with safe update and set (logs error if locale is not found)

- Note: Set and update return a `boolean` indicating if the locale was found

## `locales`

> Available locales, derived from translation

- Type: `svelte.Readable`

### Usage

```html

  import { locale, locales } from 'svelte-3-intl'

	const setLocale = e => locale.set(e.target.value)

  {#each $locales as l}

     {l} 

  {/each}

```

## options

> See [format-message options](https://github.com/format-message/format-message/tree/master/packages/format-message#formatmessagesetupoptions) \

  Just call `options.set({  })` :)

- Type: `svelte.Readable` (but update merges with current config)

## `getBrowserLocale`

> Tries to match the `window.navigator.language` to the available dictionaries

- Params:

  - defaultLocale {string}: If no match is found, returns this