{"id":16519403,"url":"https://github.com/felixmosh/i18next-hmr","last_synced_at":"2025-04-06T07:14:05.112Z","repository":{"id":36467838,"uuid":"226033590","full_name":"felixmosh/i18next-hmr","owner":"felixmosh","description":"I18Next HMR🔥 webpack / vite plugin that allows reload translation resources instantly on the client \u0026 the server.","archived":false,"fork":false,"pushed_at":"2024-09-27T15:28:59.000Z","size":4980,"stargazers_count":107,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T16:46:30.639Z","etag":null,"topics":["i18next","vite-plugin","webpack-plugin"],"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/felixmosh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["felixmosh"]}},"created_at":"2019-12-05T06:37:37.000Z","updated_at":"2024-09-27T15:29:00.000Z","dependencies_parsed_at":"2023-02-18T10:45:23.270Z","dependency_job_id":"12e7e336-04d8-4d7c-8f62-a60f5b329ee8","html_url":"https://github.com/felixmosh/i18next-hmr","commit_stats":{"total_commits":259,"total_committers":2,"mean_commits":129.5,"dds":0.4092664092664092,"last_synced_commit":"72762065e0a601dee542dfc32bc16088d7b00e9c"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixmosh%2Fi18next-hmr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixmosh%2Fi18next-hmr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixmosh%2Fi18next-hmr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felixmosh%2Fi18next-hmr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felixmosh","download_url":"https://codeload.github.com/felixmosh/i18next-hmr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445672,"owners_count":20939960,"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":["i18next","vite-plugin","webpack-plugin"],"created_at":"2024-10-11T16:46:39.815Z","updated_at":"2025-04-06T07:14:05.095Z","avatar_url":"https://github.com/felixmosh.png","language":"JavaScript","funding_links":["https://github.com/sponsors/felixmosh"],"categories":[],"sub_categories":[],"readme":"# i18next-hmr\n\n[![npm](https://img.shields.io/npm/v/i18next-hmr.svg)](https://www.npmjs.com/package/i18next-hmr)\n![CI](https://github.com/felixmosh/i18next-hmr/workflows/CI/badge.svg)\n\nI18Next HMR🔥 webpack / vite plugin that allows reload translation resources instantly on the client \u0026amp; the server.\n\n## Requirements\n\n- Node.js v10 or above\n- Webpack v4.x - v5.x\n- Vite v3\n\n\n## Installation\n\n```sh\n$ npm install --save-dev i18next-hmr\n```\n\n## Usage\n\nAdd the plugin to your webpack config (or next.config.js).\n\n\u003c!-- prettier-ignore-start --\u003e\n\n```js\n// webpack.config.js\nconst { I18NextHMRPlugin } = require('i18next-hmr/webpack');\n\nmodule.exports = {\n  ...\n  plugins: [\n    new I18NextHMRPlugin({\n      localesDir: path.resolve(__dirname, 'static/locales'), \n      localesDirs: [\n         // use this property for multiple locales directories   \n      ]\n    })\n  ]\n};\n```\n\n\u003c!-- prettier-ignore-start --\u003e\n\n```js\n// i18next.config.js\nconst Backend = require('i18next-http-backend');\nconst i18next = require('i18next');\nconst { HMRPlugin } = require('i18next-hmr/plugin');\n\nconst instance = i18next.use(Backend); // http-backend is required for client side reloading\n\nif (process.env.NODE_ENV !== 'production') {\n   instance.use(new HMRPlugin({\n      webpack: {\n         client: typeof window !== 'undefined', // enables client side HMR in webpack\n         server: typeof window === 'undefined'  // enables server side HMR in webpack\n      },\n      vite: {\n         client: typeof window !== 'undefined', // enables client side HMR in Vite\n      }\n   }));\n}\n\ninstance.init(options, callback);\n\nmodule.exports = instance;\n```\n\n\n\n\nStart the app with `NODE_ENV=development`\n\n### Server side\n\nThis lib will trigger [`i18n.reloadResources([lang], [ns])`](https://www.i18next.com/overview/api#reloadresources) on the server side with `lang` \u0026 `namespace` extracted from the translation filename that was changed.\n\n⚠️ If your server side is bundled using Webpack, the lib will use the native HMR (if enabled), for it to work properly the lib must be **bundled**, therefore, you should specify the lib as not [external](https://webpack.js.org/configuration/externals/).\nThere are 2 ways to do that:\n\n1. If you are using [webpack-node-externals](https://github.com/liady/webpack-node-externals) specify `i18next-hmr` in the [`whitelist`](https://github.com/liady/webpack-node-externals#optionswhitelist-).\n2. (deprecated method) use a relative path to `node_modules`, something like:\n   ```js\n   // server.entry.js\n   if (process.env.NODE_ENV !== 'production') {\n     const { applyServerHMR } = require('../node_modules/i18next-hmr/server');\n     applyServerHMR(i18n);\n   }\n   ```\n\n### Client side\n\nThe lib will invoke Webpack's / Vite HMR to update client side, that will re-fetch (with cache killer) the updated translation files and trigger [`i18n.changelanguage(lang)`](https://www.i18next.com/overview/api#changelanguage) to trigger listeners (which in React apps it will update the UI).\n\n## Example\n\nWorking examples can be found in the [`examples`](https://github.com/felixmosh/i18next-hmr/tree/master/examples) folder.\n\n#### [`nextjs`](https://github.com/zeit/next.js) with [`next-i18next`](https://github.com/isaachinman/next-i18next)\n\n![screenshot](https://user-images.githubusercontent.com/9304194/71188474-b1f97100-2289-11ea-9363-257f8a2124b1.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixmosh%2Fi18next-hmr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelixmosh%2Fi18next-hmr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixmosh%2Fi18next-hmr/lists"}