0.0.3 ā¢ Published 2 years ago
@neiwad/svelte-i18n-slots v0.0.3
Svelte-i18n-slots
A simple Svelte component that transform i18n variables into Slots.
Installation
pnpm install @neiwad/svelte-i18n-slots
Requirements
š svelte-i18n installed
Example
I18n Configuration
{ "string": "This is example of how to use {slot1} as i18n {slot2}.", "slot1Text": "slot", "slort2Text": "variable" }
Svelte Component
import { I18nSlots } from "@neiwad/svelte-i18n-slots"
<p> <I18nSlots key="string"> <a data-i18n-key="slot1" href="http://github.com/neiwad"> {$_('slot1Text')} </a> <a data-i18n-key="slot2" href="http://github.com/neiwad"> {$_('slort2Text')} </a> </I18nSlots> </p>
Result
<p> This is example of how to use <a href="http://github.com/neiwad">slot</a> as i18n <a href="http://github.com/neiwad">variable</a> </p>
Known issues
Cannot read properties of null (reading 'removeChild')
Appears when is wrapped directly inside an if statement.
{#if !$user.isAuthenticated} <I18nSlots key="string"> ... </I18nSlots> {/if}
To fix that issue, put your inside another tag as a or a
{#if !$user.isAuthenticated} <span> <I18nSlots key="string"> ... </I18nSlots> </span> {/if}