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

@sveltekit-i18n/parser-default

v1.1.1

Published

Default parser for sveltekit-i18n library.

Downloads

36,572

Readme

npm version Tests Netlify Status

@sveltekit-i18n/parser-default

This parser is ment be used together with @sveltekit-i18n/base, but can be used with other libraries as well. In fact, it does not require Svelte or SvelteKit.

Preview

You can see this parser in action on Netlify.

Options

modifierDefaults?: Modifier.Defaults

You can specify default values for built-in modifiers using this prop. Configuration is available for these modifiers:

number?: Intl.NumberFormatOptions
date?: Intl.DateTimeFormatOptions
ago?: Intl.RelativeTimeFormatOptions & { format?: Intl.RelativeTimeFormatUnit | 'auto' } currency?: Intl.NumberFormatOptions & { ratio?: number }

customModifiers?: Record<string, Modifier.T>

You can use this property to include your own set of modifiers.

For example custom modifier eqAbs...

const customModifiers = {
  eqAbs: ({ value, options, defaultValue, locale }) => options.find(({ key }) => Math.abs(+key) === Math.abs(value))?.value || defaultValue
}

...can be used in the definitions like this:

{{placeholder:eqAbs; 10:Value is absolutely equal to ten.; default:Value is not absolutely equal to ten.;}}

Read more about Modifiers.

Syntax

Every placeholder or modifier starts with {{ and ends with }} and can be included in your translations like this:

{
  "simple_prop": "Some value",
  "module": {
    "placeholder": "Title with {{placeholder}}.",
    "placeholder_with_default_value": "{{placeholder; default:Default value;}}.",
    "modifier": "{{gender; female:She; male:He;}} has a dog.",
    "combined": "You have {{number:gt; 0:{{number}} new {{number; 1:message; default:messages;}}!; default:no messages.;}}"
  }
} 

Placeholders

Placeholders work as a connection between static translations and dynamic content. They are usually replaced by dynamic values, which are the same for all language mutations.

Placeholder notation looks like this:

{{placeholder}}

<!-- or: -->
{{placeholder;}}

You can also use default value. This value is used in case there is no appropriate value in translation payload.

{{placeholder; default:This is a default value;}}

The default value can be also set dynamically using the translation payload in your .svelte file. For example:

$t(`error.${code}`, { default: $t('error.default') });

This value is used in case no default value is defined within the placeholder definition itself. For more, see Dynamic default section in parser-default example app.

Modifiers

Modifiers don't represent the payload value directly, but they can use it for further calculations. Currently, these modifiers are in place:

eq – input value is equal to the value in your definition (string comparison, case insensitive).
ne – input value is not equal to the value in your definition (string comparison, case insensitive).
lt – input value is lower than the value in your definition.
lte – input value is lower than or equal to the value in your definition.
gt – input value is greater than the value in your definition.
gte – input value is greater than or equal to the value in your definition.
number – input value is converted to locale formatted number string.
date – input value is converted to locale date string.
ago – input value is converted to locale relative date string.
currency – input value is converted to locale relative currency string.

Each modifier returns a string value based on these input properties:

value: any – interpolated placeholder value
options: {key: string; value: string;}[] – parsed interpolation options from the definition
props?: any – modifier properties
defaultValue?: string – default value
locale?: string – current locale

When placeholder value is not matched and you don't specify the default value, modifier returns an empty string.

Modifier notation looks like this:

{{placeholder:modifier; placeholderVal1:Interpolation value 1; placeholderVal2:Interpolation value 2; ... ; default:Default value;}}

In case you don't specify the modifier, but interpolation options are set, eq modifier is used by default:

{{placeholder; placeholder_value:Interpolation value;}}

For example this definition...

// `content` translation definition
{
  "modifier_date": "{{value:date;}}"
}

...you can execute like this:

// svelte file

$t('content.modifier_date', { value: Date.now() }, { timeStyle: 'full' });

// $t(`key`, ...params: [payload, props]);

You are allowed to use nested placeholders and modifiers within your modifier definition or include your own modifiers in Options! See parser-default example.

Note that ;, :, { and } characters are used as placeholder identifiers and separators, so you shouldn't use them within your definition keys and values. You should use their escaped form insead (\\;, \\:, \\{ or \\}).

More info

Examples
Changelog

Issues

If you are facing issues with this parser, create a ticket here.