npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kainstar/svelte-i18next

v1.0.1

Published

i18next's framework adapter for svelte, better internationalization UX

Downloads

6

Readme

@kainstar/svelte-i18next

npm package Build Status Downloads Issues Commitizen Friendly Semantic Release

@kainstar/svelte-i18next is a Svelte library for internationalization using i18next. It referenced partial features provided by react-i18next and do some simplification.

Why not svelte-i18next or svelte-i18n?

svelte-i18n is based on intl-messageformat rather than i18next which I am more familiar with, and it's a singleton architecture that is not easy to expand.

svelte-i18next is a very simple wrapper for i18next and no any options to customize behaviors.

And most important, both svelte-i18next and svelte-i18n are not provide powerful features like Trans in react-i18next, that's why I making this library.

Features

  • Context-based multi-instance by setI18nContext
  • Basic t function
  • Advanced Trans Component

Install

npm install @kainstar/svelte-i18next

Usage

i18n.ts:

import i18next from 'i18next';

i18next.init({
  debug: true,
  lng: 'zh-CN',
  resources: {
    // ...
  },
});

export default i18next;

App.svelte:

<script lang="ts">
import { setI18nContext } from '@kainstar/svelte-i18next';
import i18nInstance from './i18n';

setI18nContext(i18nInstance);
</script>

Child.svelte:

<script lang="ts">
import { getTranslation, Trans } from '@kainstar/svelte-i18next';

const { t } = getTranslation();
</script>

<!-- use $t function or Trans component to translate -->
<p>{$t('i18nKey')}</p>
<Trans i18nKey="i18nKey">

Advanced Trans Component

Trans component can enables you nest any svelte components and native html tag to be translated as one cohesive string.

Let's say you have a translation like this:

@kainstar/svelte-i18next is a powerful internationalization library. Here to see

Before:

<p>
  <code>@kainstar/svelte-i18next</code> is a <strong>powerful</strong> internationalization library. <Link href="https://github.com/kainstar/svelte-i18next">Here to see</Link>
</p>

After:

message: <code>@kainstar/svelte-i18next</code>is a <strong>powerful</strong> internationalization library. <Link href="https://github.com/kainstar/svelte-i18next">Here to see</Link>
<p>
  <Trans
    i18nKey="message"
    components={{
      Link
    }}
  />
</p>

What different with {@html} ?

{@html} is a svelte directive that can render raw html string, but it can't render you custom components.

Can I attach props to components?

Yes, you can pass a [comp, props] tuple as component value like:

<Trans i18nKey="message" components={{
  Link: [Link, { target: '_blank' }]
}}>

Is Trans treat component children as defaultValue?

No, svelte can't check or modify slot content, so Trans will ignore children and only use i18nKey.

I18next extends options

@kainstar/svelte-i18next extends some options for i18next.init:

interface SvelteI18nextOptions {
  /**
   * Set which events trigger a re-render, can be set to false or string of events
   * @default 'languageChanged'
   */
  bindI18n?: string | false;
  /**
   * Set which events on store trigger a re-render, can be set to false or string of events
   * @default false
   */
  bindI18nStore?: string | false;
  /**
   * Which tag will be treated as native HTML tag Trans component.
   * If a tag is not custom component and native HTML tag, it will be render as string.
   * `true` will keep all tags
   * @default true
   */
  transKeepTags?: readonly string[] | true;
}

i18next.init({
  svelte: {
    // ...custom options here
  },
});