Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
svelte-i18n
Advanced tools
Internationalization for Svelte.
svelte-i18n
utilizes svelte stores
for keeping track of the current locale, dictionary of messages and the main format function. This way, we keep everything neat, in sync and easy to use on your svelte files.
The locale
store defines what is the current locale.
import { locale, dictionary, getClientLocale } from 'svelte-i18n'
// Set the current locale to en-US
locale.set('en-US')
// This is a store, so we can subscribe to its changes
locale.subscribe(() => {
console.log('locale change')
})
// svelte-i18n exports a method to help getting the current client locale
locale.set(
getClientLocale({
// the fallback locale, if didn't find any
fallback: 'en-US',
// set to 'true' to check the 'window.navigator.language'
navigator: true,
// set the key name to look for a locale on 'window.location.search'
// 'example.com?locale=en-US'
search: 'lang',
// set the key name to look for a locale on 'window.location.hash'
// 'example.com#locale=en-US'
hash: 'locale',
}),
)
If a locale with the format xx-YY
is not found, svelte-i18n
looks for the locale xx
as well.
The dictionary
store defines the dictionary of messages of all locales.
import { locale, dictionary } from 'svelte-i18n'
// Define a locale dictionary
dictionary.set({
pt: {
message: 'Mensagem',
'switch.lang': 'Trocar idioma',
greeting: {
ask: 'Por favor, digite seu nome',
message: 'Olá {name}, como vai?',
},
photos:
'Você {n, plural, =0 {não tem fotos.} =1 {tem uma foto.} other {tem # fotos.}}',
cats: 'Tenho {n, number} {n,plural,=0{gatos}one{gato}other{gatos}}',
},
en: {
message: 'Message',
'switch.lang': 'Switch language',
greeting: {
ask: 'Please type your name',
message: 'Hello {name}, how are you?',
},
photos:
'You have {n, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}',
cats: 'I have {n, number} {n,plural,one{cat}other{cats}}',
},
})
// It's also possible to merge the current dictionary
// with other objets
dictionary.update(dict => {
dict.fr = {
// ...french messages
}
return dict
})
Each language message dictionary can be as deep as you want. Messages can also be looked up by a string represetation of it's path on the dictionary (i.e greeting.message
).
The _
/format
store is the actual formatter method. To use it, it's simple as any other svelte store.
<script>
// locale is en
import { _ } from 'svelte-i18n'
</script>
<input placeholder="{$_('greeting.ask')}" />
svelte-i18n
uses formatjs
behind the scenes, which means it supports the ICU message format for interpolation, pluralization and much more.
<div>
{$_('greeting.message', { name: 'John' })}
<!-- Hello John, how are you? -->
{$_('photos', { n: 0 })}
<!-- You have no photos. -->
{$_('photos', { n: 12 })}
<!-- You have 12 photos. -->
</div>
_
/ format
function(messageId: string, locale:? string): string
function(messageId: string, interpolations?: object, locale:? string): string
Main formatting method that formats a localized message by its id.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_('greeting.ask')}</div>
<!-- Please type your name -->
_.upper
Transforms a localized message into uppercase.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.upper('greeting.ask')}</div>
<!-- PLEASE TYPE YOUR NAME -->
_.lower
Transforms a localized message into lowercase.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.lower('greeting.ask')}</div>
<!-- PLEASE TYPE YOUR NAME -->
_.capital
Capitalize a localized message.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.capital('greeting.ask')}</div>
<!-- Please type your name -->
_.title
Transform the message into title case.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.capital('greeting.ask')}</div>
<!-- Please Type Your Name -->
_.time
function(time: Date, format?: string, locale?: string)
Formats a date object into a time string with the specified format (short
, medium
, long
, full
). Please refer to the ICU message format documentation for all available. formats
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.time(new Date(2019, 3, 24, 23, 45))}</div>
<!-- 11:45 PM -->
<div>{$_.time(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
<!-- 11:45:00 PM -->
_.date
function(date: Date, format?: string, locale?: string)
Formats a date object into a string with the specified format (short
, medium
, long
, full
). Please refer to the ICU message format documentation for all available. formats
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.date(new Date(2019, 3, 24, 23, 45))}</div>
<!-- 4/24/19 -->
<div>{$_.date(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
<!-- Apr 24, 2019 -->
_.number
function(number: Number, locale?: string)
Formats a number with the specified locale
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.number(100000000)}</div>
<!-- 100,000,000 -->
<div>{$_.number(100000000, 'pt')}</div>
<!-- 100.000.000 -->
FAQs
Internationalization library for Svelte
The npm package svelte-i18n receives a total of 38,523 weekly downloads. As such, svelte-i18n popularity was classified as popular.
We found that svelte-i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.