Polymer mixin for localization of D2L components
npm install @brightspace-ui/localize-behavior> Building Lit components? Use BrightspaceUI/core instead.
Polymer mixin for localization of text, dates, times, numbers and file sizes. Also supports automatic language resolution, timezone and locale overrides.
Install from NPM:
``shell`
npm install @brightspace-ui/localize-behavior
`javascript
import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
class MyElement extends mixinBehaviors([
D2L.PolymerBehaviors.LocalizeBehavior
], PolymerElement) {
static get template() {
return html
[[localize('hello')]]
;
} localizeConfig: {
importFunc: async lang => (await import(
./lang/${lang}.js)).default
}
}
`$3
Store localization resources in their own directory with nothing else in it. There should be one JavaScript file for each supported locale.
`javascript
// lang/en.js
export default {
hello: Hello, {firstName}!
};
`
`javascript
// lang/fr.js
export default {
hello: Bonjour, {firstName}!
};
`* Always provide files for base languages (e.g. "en", "fr", "pt") so that if the user is using an unsupported regional language (e.g. "en-au", "fr-ca", "pt-br") it can fall back to the base language.
* If there's no entry for a particular language, and no base language, the value of
data-lang-default on the element will be used.
* If no data-lang-default is specified, "en" will be used as a last resort.$3
The
localize() method is used to localize a piece of text in the component's template.If the localized string contains arguments, pass them as additional parameters to
localize:`javascript
static get template() {
return html[[localize('hello', 'firstName', 'Mary')]]
;
}
`$3
While
localize-behavior does support formatting and parsing numbers, dates and times, instead please use the https://github.com/BrightspaceUI/intl/ library directly.Developing
After cloning the repo, run
npm install to install dependencies.$3
To start a @web/dev-server that hosts the demo page and tests:
`shell
npm start
`$3
To run the full suite of tests:
`shell
npm test
`Alternatively, tests can be selectively run:
`shell
eslint
npm run lint:eslintunit tests
npm run test:unit
`$3
This repo is configured to use
semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main`.To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.