Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/crimx/val-i18n-svelte

Svelte goodies for val-i18n
https://github.com/crimx/val-i18n-svelte

gettext globalization i18n internationalization l10n localization svelte sveltejs translation

Last synced: 9 days ago
JSON representation

Svelte goodies for val-i18n

Host: GitHub
URL: https://github.com/crimx/val-i18n-svelte
Owner: crimx
Created: 2023-01-24T17:25:08.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-02-22T08:57:12.000Z (10 months ago)
Last Synced: 2024-10-20T05:49:49.559Z (2 months ago)
Topics: gettext, globalization, i18n, internationalization, l10n, localization, svelte, sveltejs, translation
Language: TypeScript
Homepage:
Size: 340 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        # [val-i18n-svelte](https://github.com/crimx/val-i18n-svelte)



  



[![Build Status](https://github.com/crimx/val-i18n-svelte/actions/workflows/build.yml/badge.svg)](https://github.com/crimx/val-i18n-svelte/actions/workflows/build.yml)

[![npm-version](https://img.shields.io/npm/v/val-i18n-svelte.svg)](https://www.npmjs.com/package/val-i18n-svelte)

[![Coverage Status](https://img.shields.io/coveralls/github/crimx/val-i18n-svelte/master)](https://coveralls.io/github/crimx/val-i18n-svelte?branch=master)

[![minified-size](https://img.shields.io/bundlephobia/minzip/val-i18n-svelte)](https://bundlephobia.com/package/val-i18n-svelte)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000)](http://commitizen.github.io/cz-cli/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-brightgreen.svg?maxAge=2592000)](https://conventionalcommits.org)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

Svelte goodies for [val-i18n](https://github.com/crimx/val-i18n).

## Install

```bash

npm add val-i18n-svelte val-i18n value-enhancer

```

## API

- `` to set i18n context automatically (supports async loading).

- `setI18n` to set i18n context manually.

- `useTranslate` to get updated `i18n.t$` observable.

- `useLang` to get updated `i18n.lang$` observable.

- `useI18n` to get `i18n$` observable.

- `` component to insert Svelte element into the translation message.

You can run the example in this repo by `pnpm dev`.

## Usage

See live example on [Svelte REPL](https://svelte.dev/repl/99f393b7a8a04914a6a369c774aa436b).

### With static locales:

Set `i18n` context in root component:

```svelte

  import { setI18n, useTranslate } from "val-i18n-svelte";

  import { I18n } from "val-i18n";

  const locales = { en: { apple: "apple" } };

  const i18n = new I18n("en", locales);

  setI18n(i18n);

....

```

Access i18n in descendent components (any level):

```svelte

  import { useTranslate, useLang, useI18n } from "val-i18n-svelte";

  const t = useTranslate();

  const lang = useLang();

  const i18n = useI18n();

{$t("apple")}

 $i18n.switchLang("zh")}>{$lang}

```

### With dynamic locales:

Set `i18n` context in root component:

```svelte

  import { I18nProvider } from "val-i18n-svelte";

  import { I18n } from "val-i18n";

  const loader = I18n.preload("en", (lang) => import(`../locales/${lang}.json`));

.....

```

Access i18n in descendent components (any level):

```svelte

  import { useTranslate, useLang, useI18n } from "val-i18n-svelte";

  const t = useTranslate();

  const lang = useLang();

  const i18n = useI18n();

{$t("apple")}

 $i18n.switchLang("zh")}>{$lang}

```

If you need to access i18n in root component:

```svelte

  
{t("apple")}

   i18n.switchLang("zh")}>{lang}

```

### Trans Component

To insert Svelte elements into the translation message:

```svelte

  import { useTranslate, Trans } from "val-i18n-svelte";

  /*

    with locale:

    {

      visit: "Visit this address {{fruit}}.",

    }

  */

  const t = useTranslate();

  val-i18n-svelte

```

↓Outputs:

```html

Visit this address val-i18n-svelte.

```

To inset multiple Svelte elements into the translate message, due to the limitation of Svelte ([without dynamic slot name support](https://github.com/sveltejs/svelte/issues/3480)), you need to use `let:key` to access the key of the placeholder. The `key` is the name of the placeholder in the translation message.

```svelte

  import { useTranslate, Trans } from "val-i18n-svelte";

  /*

    with locale:

    {

      author: "CRIMX",

      fruit: "apple",

      eat: "{{name}} eats {{fruit}}.",

    }

  */

  const t = useTranslate();

  {#if key === "name"}

    {$t("author")}

  {:else if key === "fruit"}

    {$t("fruit")}

  {/if}

```

↓Outputs:

```html

CRIMX eats apple.

```

### Sub-context With Nested I18n

You can add extra `setI18n` or `` in descendent components to override the context. Only the descendent components of the new context will be affected.

## Developing

This project is created by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash

npm run dev

# or start the server and open the app in a new browser tab

npm run dev -- --open

```

## Building

To create a production version of your app:

```bash

npm run build

```

You can preview the production build with `npm run preview`.