web-packages / web_localization

An ideally implemented simple web user-language localization example in a service worker environment.

Web Localization

Version	v1.0.0-dev

Ideally Implemented simple web user-language localization example.

Warning

The example doesn't work in the local environment, And i'll be renewing
this package for the better soon.

You can use server-side rendering and service worker to resolve lazy load issues.

Usage

The following describes how to define the contents of the json files within the localizations folder,
And this example json file is korean.json provided by default.

How to define parameters is by inserting {index} to content json value.

{
    "undefined": "정의되지 않음",
    "hello": "안녕하세요",
    "amount": "{0}개"
}

And next, it describes how to output localized sentences and words defined in the json content by declaring html elements.

<!-- Sentences and words -->
<localization-element key="hello"></localization-element>

<!-- Use place holder, (flexible localizable way) -->
<localization-element key="amount" parms="123"></localization-element>

How to define language you want

Declares a global and statically variable called language

The value defined must be the name of the json file.

// This value is the current language name(json name) to be applied.
const language = 'korean';

Reason

This is basically because it always refers to a variable called language.

How to customizing

The following describes how to redefine custom-element name.

- must be included in element name.

// Define the first argument of customElements.define with the name you want.
customElements.define('localization-element', LocalizationElement);