{"id":17481320,"url":"https://github.com/klis87/i18next-ts-loader","last_synced_at":"2025-04-22T13:42:22.311Z","repository":{"id":57686788,"uuid":"494895193","full_name":"klis87/i18next-ts-loader","owner":"klis87","description":"Webpack loader for i18next with the best developer experience","archived":false,"fork":false,"pushed_at":"2023-07-14T21:21:05.000Z","size":307,"stargazers_count":20,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T20:38:40.446Z","etag":null,"topics":["i18n","i18next","internationalization","localization","translation","translations","webpack-loader"],"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/klis87.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":"2022-05-21T21:07:42.000Z","updated_at":"2025-02-24T07:17:07.000Z","dependencies_parsed_at":"2024-10-03T16:34:20.533Z","dependency_job_id":"74484e50-820a-48f4-9086-079318d2d462","html_url":"https://github.com/klis87/i18next-ts-loader","commit_stats":{"total_commits":23,"total_committers":3,"mean_commits":7.666666666666667,"dds":"0.13043478260869568","last_synced_commit":"e2efe6ddb54ad9385ae533ab7c30af695424cb73"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klis87%2Fi18next-ts-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klis87%2Fi18next-ts-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klis87%2Fi18next-ts-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klis87%2Fi18next-ts-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klis87","download_url":"https://codeload.github.com/klis87/i18next-ts-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250250627,"owners_count":21399675,"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":["i18n","i18next","internationalization","localization","translation","translations","webpack-loader"],"created_at":"2024-10-18T22:09:26.047Z","updated_at":"2025-04-22T13:42:22.271Z","avatar_url":"https://github.com/klis87.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# i18next-ts-loader\n\n[![npm version](https://badge.fury.io/js/i18next-ts-loader.svg)](https://badge.fury.io/js/i18next-ts-loader)\n\nWebpack loader for i18next with the best developer experience\n\n![i18next-ts-loader showcase](https://raw.githubusercontent.com/klis87/i18next-ts-loader/master/images/showcase.png)\n\n## Motivation\n\n`i18next` in my opinion is by far the best translation library, at least for React. The big problem with it though is\nthat it is hard to keep translation files in sync with the places they are used. There are some methods to simplify\nthis, like some extraction tools, but none of them gives all the features which `i18next-ts-loader` does:\n\n- importing json files with translations with standard ES6 modules, which can be located anywhere, especially next to components which need them\n- creating autogenerated Typescript types, which gives you autocompletion in your text editor (if you use just `javascript`), or even type safety (if you use `typescript`)\n- copying locale files to chosen place required by `i18next`\n- compatibility with webpack HMR - when you update a locale file, you will see the translation updated without page reload\n- content based hashing support - optionally copied locale files for `i18next` can contain content based hash, so that you could cache your locales forever, like you usually do for `js` and `css` files\n\n## Installation\n\nTo install the loader, just run:\n\n```bash\nnpm install --dev i18next-ts-loader\n```\n\n## Basic usage\n\nFirst, add the loader to your rules, for example:\n\n```js\nrules: [\n  ...otherRules,\n  {\n    test: /\\.i18n$/,\n    exclude: /node_modules/,\n    loader: 'i18next-ts-loader',\n    options: {\n      localeFilesPattern: '/locales/{{lng}}/{{ns}}.json',\n    },\n  },\n];\n```\n\nThen, let's say you have a place with a translation, for example below React component:\n\n```jsx\nimport * as React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nconst SomeComponent = () =\u003e {\n  const { t } = useTranslation('common');\n\n  return \u003cdiv\u003e{t(common.myKey)}\u003c/div\u003e;\n};\n```\n\nLet's assume, that we support two languages - English and Polish. With the help of this loader, you can refactor the code in the following way. First, create a file `common.i18n`\nwith translations, for example:\n\n```json\n{\n  \"en\": {\n    \"myKey\": \"my key\"\n  },\n  \"pl\": {\n    \"myKey\": \"mój klucz\"\n  }\n}\n```\n\nNotice, that we define all languages in one file. Then, you can import it to your component, like so:\n\n```jsx\nimport * as React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport locale, { namespace } from './common.i18n';\n\nconst SomeComponent = () =\u003e {\n  const { t } = useTranslation(namespace);\n\n  return \u003cdiv\u003e{t(locale.myKey)}\u003c/div\u003e;\n};\n```\n\nAs you can see, we can just import locales with the help of `import`, like you usually do for JS files.\nSo, despite the fact that `i18next` has its own way of loading locales, we can do it using ES6 modules,\nand this loader will do its job to make `i18next` happy.\n\nYou can then use imported `locale` to get your locale keys to pass them to `t` function instead of manually writing\nkeys. Thanks to autogenerated `i18n.d.ts` files, you get nice autocomplete features, so no unsynchronized keys anymore!\nAdditionally, if you use `Typescript`, `ts` compiler will warn you, if you use any not existent key.\n\nBased on the above example, using `locale.myKey` in `t`, apart from autocomplete or type safety has other benefits. To start with,\nthe translation is always bound to a proper namespace for you, in our case, to `common`. This is especially important, because\nwith this plugin, `namespace` is nothing else than a path to your locale file, including the file name. Moreover, if want to use\ncontent based hashing feature, it will be also appended to the `namespace` name. So, wherever you need to pass a namespace name,\nlike in `useTranslation`, you should always use imported `namespace` variable.\n\n## Nested keys\n\nThis loader supports nested keys in locale files, for example if you have below translation:\n\n```json\n{\n  \"en\": {\n    \"nested\": {\n      \"myKey\": \"my key\"\n    }\n  },\n  \"pl\": {\n    \"nested\": {\n      \"myKey\": \"mój klucz\"\n    }\n  }\n}\n```\n\nyou could then refer to those nested keys as `locale.nested.myKey`\n\n## Plurals\n\nThis plugin is compatible with plural keys - for examples keys like `key_0`. It will strip plural suffixes from your keys,\nso generated types will be still correct.\n\n## Loader options\n\nThe loader has the following configuration options available, all of which are optional.\n\n### localeFilesPattern\n\n`'/locales/{{lng}}/{{ns}}.json'` by default. It is the place, into which you want your locale files to be copied for `i18next`.\nThis is the pattern you pass as `loadPath` to `i18next.init`. For example:\n\n```js\nrules: [\n  ...otherRules,\n  {\n    test: /\\.i18n$/,\n    exclude: /node_modules/,\n    loader: 'i18next-ts-loader',\n    options: {\n      localeFilesPattern: '/translations/{{lng}}/{{ns}}.json',\n    },\n  },\n];\n```\n\n### basePath\n\nIn order to prevent namespaces collision, a created namespace is just a file path of each imported locale file.\nFor example, if you import a `src/components/component/some-locale.j18n`, its namespace will be\n`src_components_component_some-locale`. However, it could happen that all your locale files are located in `src/components`\ndirectory. Then you might consider doing the following:\n\n```js\nrules: [\n  ...otherRules,\n  {\n    test: /\\.i18n$/,\n    exclude: /node_modules/,\n    loader: 'i18next-ts-loader',\n    options: {\n      basePath: 'src/components/',\n    },\n  },\n];\n```\n\nThen, `src_components_component_some-locale` namespace will become `component_some-locale`\n\n### addContentHash\n\nIt adds content based hash to namespaces to allow caching locale files in browsers forever safely, in the same way\nlike we usually do for js and css files.\n\n`false` for development mode and `true` for production mode by default. For example to disable this feature for production,\nyou could:\n\n```js\nrules: [\n  ...otherRules,\n  {\n    test: /\\.i18n$/,\n    exclude: /node_modules/,\n    loader: 'i18next-ts-loader',\n    options: {\n      addContentHash: false,\n    },\n  },\n];\n```\n\n## Examples\n\nThere are following examples currently:\n\n- [basic](https://github.com/klis87/i18next-ts-loader/tree/master/examples/basic)\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklis87%2Fi18next-ts-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklis87%2Fi18next-ts-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklis87%2Fi18next-ts-loader/lists"}