{"id":16384025,"url":"https://github.com/lttb/module-i18n","last_synced_at":"2025-03-23T03:33:32.920Z","repository":{"id":57300693,"uuid":"79061683","full_name":"lttb/module-i18n","owner":"lttb","description":"Modular static and runtime i18n","archived":false,"fork":false,"pushed_at":"2024-03-25T21:05:42.000Z","size":406,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T17:24:55.775Z","etag":null,"topics":["dictionaries","i18n","inline-pluralisation","inline-translation","language","loader","module","react","webpack"],"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/lttb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-15T21:47:21.000Z","updated_at":"2023-11-30T05:18:29.000Z","dependencies_parsed_at":"2024-02-26T21:29:19.776Z","dependency_job_id":"922769dd-0c25-43a6-bc84-dc7aca9a4e84","html_url":"https://github.com/lttb/module-i18n","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.1578947368421053,"last_synced_commit":"da8f8d41cbfbc33e6c97749b776ff04bbdb563f3"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fmodule-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fmodule-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fmodule-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lttb%2Fmodule-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lttb","download_url":"https://codeload.github.com/lttb/module-i18n/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245052645,"owners_count":20553162,"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","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":["dictionaries","i18n","inline-pluralisation","inline-translation","language","loader","module","react","webpack"],"created_at":"2024-10-11T04:10:19.917Z","updated_at":"2025-03-23T03:33:32.549Z","avatar_url":"https://github.com/lttb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module i18n\n\n[![Travis branch](https://img.shields.io/travis/lttb/module-i18n/master.svg?style=flat)](https://travis-ci.org/lttb/module-i18n)\n[![Coverage Status branch](https://img.shields.io/coveralls/lttb/module-i18n/master.svg?style=flat)](https://img.shields.io/coveralls/lttb/module-i18n/master.svg?branch=master)\n[![npm version](https://img.shields.io/npm/v/module-i18n.svg?style=flat)](https://www.npmjs.com/package/module-i18n)\n[![npm license](https://img.shields.io/npm/l/prejss.svg?style=flat)](https://www.npmjs.com/package/prejss)\n\n## Features\n* use **local** dictionaries for each module\n* pluralisation\n* concise syntax\n* inline translation for language support - so you don't need to load a dictionary on the client, it's done in the bundle. As a bonus - no runtime functions, minimum costs\n* runtime and static inlined translation with common syntax and dictionaries (useful for isomorphic code/server render for example)\n* supports global dictionary\n* fallback to global dictionary or default language\n* translation combinations\n* independent of the technology stack (not only as webpack-loader)\n* YAML / JSON\n\nI think that it's useful to build a separate bundle for language. There are some advantages, in my opinion:\n- Your bundle has nothing extra dependencies for i18n, only translated text and plural expressions\n- You can also use some language-specific functions in the separate bundle (I'll detail below)\n- Efficient, no runtime function/components creation\n- You have an availability to upgrade only certain language bundle, and other language bundles will continue to be stored in cache \n\n\u003e Note, that this project has unstable experimental status, so I'll be glad for feedback.\n\n## Usage\n\n### Installation\n\n```sh\n$ npm i -S module-i18n\n```\n\n### Syntax\n\n- Inline text: \n```js\ni18n`Translate me please`\n```\n- Inline text with variable (*syntax for only static loader*)\n```js\ni18n`Translate me please ${userName}`\n```\n- Inline text with variable for **runtime and static usage**\n```js\ni18n`Translate me please ${{ userName }}`\n```\n- Inline pluralisation, where `'man || men'` - is a key in a dictionary:\n```js\ni18n(value, 'man || men')\n```\n- Inline pluralisation shorthand:\n```js\ni18n(value, 'замок || замка || замков', 'ru')\n```\n- Inline text with inline pluralisation (combo):\n```js\n// so the variable for pluralization will be matched with variable in sentence by name\ni18n`Translate me please ${'times, \"time || times\"'} ${{ times }}`\n\n// you can also pass a custom variable for pluralization\ni18n`Translate me please ${`${realTimes}, 'time || times'`} ${{ times }}`\n```\n- Custom method for language (i.e. that exports from module's ru.js)\n```js\ni18m.customMethod()\n```\n- Custom key for language (i.e. that exports from module's ru.js)\n```js\ni18m.customKey\n```\n\n### Example\n\nYou can check a [counter example with server side rendering](https://github.com/lttb/module-i18n/tree/master/examples/counter) or [tests](https://github.com/lttb/module-i18n/tree/master/src/tests) for more details.\n\nImagine we have this file structure:\n* src\n    - components\n        + MessagesText\n            * index.jsx\n\nAnd a component we want for russian i18n:\n\n```jsx\nconst MessagesText = ({ name, count }) =\u003e (\n    \u003cp\u003e{'Hello ${name}, you have ${count} new messages'}\u003c/p\u003e\n)\n```\n\nWith **module i18n loader** it became as:\n* MessagesText\n    - index.jsx\n    - i18n\n        + ru.yaml\n\n\n**Component**:\n```jsx\nconst MessagesText = ({ name, count }) =\u003e (\n    \u003cp\u003e\n        {i18n`Hello ${name}, you have ${count} new ${'count, \"message || messages\")'}`}\n    \u003c/p\u003e\n)\n```\n\n**components/MessagesText/i18n/ru.yaml**\n```yaml\n# shorthand example\n\nHello ${name}, you have ${count} new ${'count, \"message || messages\")'}:\n    Привет, ${name}, у тебя есть ${count} ${i18n(count, 'новое сообщение || новых сообщения || новых сообщений', 'ru')}\n```\n\n```yaml\n# full example, with plural keys\n\nHello ${name}, you have ${count} new ${'count, \"message || messages\")'}:\n  Привет, ${name}, у тебя есть ${count} ${i18n(count, 'new message || new messages')}\n\nnew message || new messages:\n  - новое сообщение\n  - новых сообщения\n  - новых сообщений\n```    \n\nAnd that's all :) After loader that string becomes something like:\n```js\n`Привет, ${name}, у тебя есть ${count} ${(count%10==1 \u0026\u0026 count%100!=11 ? 'новое сообщение' : count%10\u003e=2 \u0026\u0026 count%10\u003c=4 \u0026\u0026 (count%100\u003c10 || count%100\u003e=20) ? 'новых сообщения' : 'новых сообщений')}`\n```\n\n### Tips\n#### webpack\nLanguages building example (*webpack.config.js*):\n```js\nmodule.exports = ['ru', 'en'].map(lang =\u003e ({\n    ...\n    module: {\n        rules: [\n            {\n                test: /(\\.js|\\.jsx)$/,\n                include: [\n                  PATHS.app,\n                ],\n                use: [\n                    {\n                        /* use module i18n loader for inline translations */\n                        loader: 'module-i18n/lib/loader/webpack',\n                        query: {\n                            lang,\n                            namespace: 'i18n',\n                            defaultLang: 'en',\n                        }\n                    },\n                ],\n            },\n        ],\n    }\n}))\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flttb%2Fmodule-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flttb%2Fmodule-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flttb%2Fmodule-i18n/lists"}