{"id":15251090,"url":"https://github.com/sherbyelements/sherby-localize","last_synced_at":"2025-07-30T20:08:20.089Z","repository":{"id":25808446,"uuid":"106612382","full_name":"SherbyElements/sherby-localize","owner":"SherbyElements","description":"Mixin to localize Polymer components","archived":false,"fork":false,"pushed_at":"2023-01-26T03:39:18.000Z","size":159,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-05T04:04:27.643Z","etag":null,"topics":["i18n","l10n","language","localisation","localize","polymer","sherby","translation","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SherbyElements.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-11T21:39:44.000Z","updated_at":"2022-09-07T02:43:54.000Z","dependencies_parsed_at":"2023-02-14T14:02:12.487Z","dependency_job_id":null,"html_url":"https://github.com/SherbyElements/sherby-localize","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/SherbyElements/sherby-localize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-localize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-localize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-localize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-localize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SherbyElements","download_url":"https://codeload.github.com/SherbyElements/sherby-localize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-localize/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267931062,"owners_count":24167562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","l10n","language","localisation","localize","polymer","sherby","translation","webcomponents"],"created_at":"2024-09-29T17:06:09.494Z","updated_at":"2025-07-30T20:08:20.035Z","avatar_url":"https://github.com/SherbyElements.png","language":"JavaScript","readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/SherbyElements/sherby-localize)\n[![Build status](https://travis-ci.org/SherbyElements/sherby-localize.svg?branch=master)](https://travis-ci.org/SherbyElements/sherby-localize)\n\n# Sherby.LocalizeMixin\nIf you want to **translate**, to **localize** your application or simply only \n**regroup** all static texts, the `Sherby.LocalizeMixin` can help you.\n\nThe mixin internally use a [fork][2] of [AppLocalizeBehavior][3] to wraps the\n[Format.js][4] library with [Chrome.i18n][5] translation files. The \n*Chrome.i18n* format allow to add an optional `description` associated with \nthe translation (`message`), to give an additional context to translators.\n\nBy exemple, a *locales/en-CA.json* file:\n```json\n{\n  \"meat-toppings\": {\n    \"description\": \"A pizza is nothing without meat.\",\n    \"message\": \"Meat Toppings\",\n  }\n}\n```\n\nIf you want to have **nested** localization files, as below, you simply need\nto provide all keys of the nested object, separate by **.** (delimiter by \ndefault). By exemple, the key `meat-toppings.bacon-pieces` will provide the \ncorrect translation (Bacon Pieces) for the following json file:\n\n```json\n{\n  \"meat-toppings\": {\n    \"bacon-pieces\": {\n      \"description\": \"Bacon is life!\",\n      \"message\": \"Bacon Pieces\"\n    }\n  }\n}\n```\n\nAlso, as this mixin use the *[UdeS.LanguageMixin][1]*, the localized file \nassociated with the current language is dynamically loaded and the localised \ntexts are automatically translated when the current language change.\n\n## Usage\n- Add the `@sherby/sherby-localize` dependency to your projet:\n  ```bash\n  npm install @sherby/sherby-localize\n  ```\n\n- Create the locales directory near the component you want localized\n  and add the localize files:\n\n  *locales/en-CA.json*\n  ```json\n  {\n    \"bacon-pieces\": {\n      \"description\": \"Bacon is life!\",\n      \"message\": \"Bacon Pieces\"\n    }\n  }\n  ```\n\n  *locales/fr.json*\n  ```json\n  {\n    \"bacon-pieces\": {\n      \"description\": \"Bacon is life!\",\n      \"message\": \"Morceaux de bacon\"\n    }\n  }\n  ```\n\n- Use it\n    ```javascript\n    // Import the `SherbyLocalizeMixin` inside the component you want localized\n    import { SherbyLocalizeMixin } from '@sherby/sherby-localize/sherby-localize-mixin.js';\n    import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';\n\n    /* eslint-disable no-unused-vars */\n\n    // Apply the mixin to your element class\n    /**\n     * @customElement\n     * @polymer\n     * @extends {PolymerElement}\n     * @appliesMixin SherbyLocalizeMixin\n     */\n    class MyElement extends SherbyLocalizeMixin(PolymerElement) {\n      static get template() {\n        // Use the `localize` function to translate all texts\n        return html`\n          \u003ch2\u003e[[localize('meat-toppings')]]\u003c/h2\u003e\n        `;\n      }\n\n      /**\n       * Get the localized bacon pieces string.\n       * @param {Function} localize Localize function.\n       * @return {String} Localized bacon pieces.\n       */\n      getLocalizedBaconPieces(localize) {\n        return localize('meat-toppings.bacon-pieces') || '';\n      }\n    }\n    ```\n\n## Demo\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003clink rel=\"import\" href=\"demo/sherby-localize-demo.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003csherby-localize-demo\u003e\u003c/sherby-localize-demo\u003e\n```\n\n## Language aware with UdeS.LanguageMixin\nIf you want your component to be aware of the current language only,\nyou should take a look on *[UdeSLanguageMixin][1]*, a mixin used by \n`SherbyLocalizeMixin`.\n\n## Thanks\nSpecial thanks to the [Collaborne team](https://github.com/Collaborne) for his [app-localize-chrome-i18n-mixin](https://github.com/Collaborne/app-localize-chrome-i18n-mixin) mixin that inspired me for this mixin.\n\n[1]: https://www.webcomponents.org/element/UdeSElements/udes-language-mixin \"UdeSLanguageMixin\"\n[2]: https://github.com/Collaborne/app-localize-behavior#fix/103 \"Fix made by Collaborne team\"\n[3]: https://github.com/PolymerElements/app-localize-behavior \"Polymer.AppLocalizeBehavior\"\n[4]: https://formatjs.io/ \"Format.js\"\n[5]: https://developer.chrome.com/apps/i18n \"chrome.i18n\"\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherbyelements%2Fsherby-localize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsherbyelements%2Fsherby-localize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherbyelements%2Fsherby-localize/lists"}