Internationalization Provider @astryx-svelte/core v0.3.0 · i18n
Usage
Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use shipped Astryx locale catalogs from @astryx-svelte/core when one exists for your target locale. |
| Do | Use a same-shape local catalog only when Astryx has not shipped that locale yet or you are testing in-progress translations. |
| Do | Use real BCP 47 tags such as fr, pt-BR, or ar; regional locales fall back to their base language before English. |
| Do | Set the dir attribute on <html> (or a wrapping element) yourself — the provider does not set it. Astryx components mirror layout and directional icons from the DOM dir, so an RTL locale won't visually mirror without it. Use getLocaleDirection(locale) to derive the value for both the provider and the DOM. |
| Don't | Cast custom catalog maps to any; the i18n package exports MessagesByLocale and Catalog for local catalog typing. |
Examples
Common configurations, variations, and states.InternationalizationProvider — Shipped Locale
Load a locale catalog shipped by Astryx and re-render InternationalizationProvider with a new locale to update Astryx strings live.
InternationalizationProvider — Overrides
Override a small number of Astryx strings without providing a full locale catalog.
InternationalizationProvider — RTL Direction
Toggle text direction with the
dir prop and watch Astryx components mirror. Pagination flips its prev/next chevrons under RTL. The dir prop is passed to both InternationalizationProvider (so Astryx components pick it up) and the VStack (so the DOM subtree mirrors); both channels stay in sync with no extra wrapper.