AppLoc for Svelte

Seamless localization management for your Svelte projects.

Installation

npm install @apploc/svelte

Initialization

1. Initialize the project using AppLoc CLI:

   npm install @apploc/cli --save-dev
   npx apploc init --path "/src/routes/localization.json"
   npx apploc update

   You can read more about the CLI here.

2. Load localization.json in the /src/routes/+layout.svelte:

   <script>
       import { loadLocalizations } from '@apploc/svelte';
       import localizations from './localization.json';
   
       // Load the localization data into the application
       loadLocalizations(localizations);
   </script>
   
   <slot />

Usage

Displaying Localized Text

Use the LocalizedText component to display text in the current language:

<script>
    import { LocalizedText } from '@apploc/svelte';
</script>

<h1>
    <h1>
        <LocalizedText key="new_key" />
    </h1>
</h1>

Switching Localizations

You can use the setLocalization function to dynamically switch between languages. This allows users to choose their preferred language at runtime:

<script>
    import { setLocalization, LocalizedText } from '@apploc/svelte';
</script>

<div>
    <h1>
        <LocalizedText key="new_key" />
    </h1>
    <br />
    <button
        on:click={() => {
            setLocalization('EN'); // Switch to English
        }}
    >
        <LocalizedText key="english" />
    </button>
    <button
        on:click={() => {
            setLocalization('UK'); // Switch to Ukrainian
        }}
    >
        <LocalizedText key="ukrainian" />
    </button>
</div>

License

This project is licensed under the Apache-2.0 license. See the LICENSE.md file for details.