diff --git a/README.md b/README.md index d779376..cd64b2b 100644 --- a/README.md +++ b/README.md @@ -19,13 +19,13 @@ $ npm install --save-dev i18next-hmr ## Usage -Add the plugin to your webpack config (or nextjs). +Add the plugin to your webpack config (or next.config.js). ```js // webpack.config.js -const { I18NextHMRPlugin } = require('i18next-hmr/plugin'); +const { I18NextHMRPlugin } = require('i18next-hmr/webpack'); module.exports = { ... @@ -44,12 +44,22 @@ module.exports = { ```js // i18next.config.js +const Backend = require('i18next-http-backend'); const i18next = require('i18next'); -i18next.init(options, callback); +const { HMRPlugin } = require('i18next-hmr/plugin'); + +const instance = i18next.use(Backend); // http-backend is required for client side reloading + if (process.env.NODE_ENV !== 'production') { - const { applyClientHMR } = require('i18next-hmr/client'); - applyClientHMR(i18next); + instance.use(new HMRPlugin({ + client: typeof window !== 'undefined', // enabled client side HMR + server: typeof window === 'undefined' // enabled server side HMR + })); } + +instance.init(options, callback); + +module.exports = instance; ``` @@ -58,13 +68,6 @@ if (process.env.NODE_ENV !== 'production') { // server.js const express = require('express'); -const i18n = require('./i18n'); - -if (process.env.NODE_ENV !== 'production') { - const { applyServerHMR } = require('i18next-hmr/server'); - applyServerHMR(i18n); -} - const port = process.env.PORT || 3000; (async () => { @@ -85,8 +88,8 @@ The lib will trigger [`i18n.reloadResources([lang], [ns])`](https://www.i18next. ⚠️ 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/). There are 2 ways to do that: -1. 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-). -2. use a relative path to `node_modules`, something like: +1. 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-). +2. (deprecated method) use a relative path to `node_modules`, something like: ```js // server.entry.js if (process.env.NODE_ENV !== 'production') { diff --git a/__tests__/loader.spec.js b/__tests__/loader.spec.js index f9b75bb..8ac8ae3 100644 --- a/__tests__/loader.spec.js +++ b/__tests__/loader.spec.js @@ -1,4 +1,4 @@ -const loader = require('../lib/loader'); +const loader = require('../lib/webpack/loader'); describe('loader', () => { let context; diff --git a/__tests__/server-hmr.spec.js b/__tests__/server-hmr.spec.js index 53ea356..174d5ab 100644 --- a/__tests__/server-hmr.spec.js +++ b/__tests__/server-hmr.spec.js @@ -4,7 +4,7 @@ jest.mock('../lib/trigger.js', () => { return changedData; }); const applyServerHMR = require('../lib/server-hmr'); -const plugin = require('../lib/plugin'); +const plugin = require('../lib/webpack/plugin'); const applyClientHMR = require('../lib/client-hmr'); function whenNativeHMRTriggeredWith(changedFiles) { diff --git a/examples/next-with-next-i18next-v11/pages/_app.js b/examples/next-with-next-i18next-v11/pages/_app.js deleted file mode 100644 index 110172f..0000000 --- a/examples/next-with-next-i18next-v11/pages/_app.js +++ /dev/null @@ -1,17 +0,0 @@ -import { appWithTranslation, i18n } from 'next-i18next'; -import nextI18NextConfig from '../next-i18next.config'; - -if (process.env.NODE_ENV !== 'production') { - if (typeof window !== 'undefined') { - const { applyClientHMR } = require('i18next-hmr/client'); - applyClientHMR(() => i18n); - } else { - const { applyServerHMR } = require('i18next-hmr/server'); - applyServerHMR(() => i18n); - } -} - -const MyApp = ({ Component, pageProps }) => ; - -// https://github.com/i18next/next-i18next#unserialisable-configs -export default appWithTranslation(MyApp, nextI18NextConfig); diff --git a/examples/next-with-next-i18next-v11/pages/index.js b/examples/next-with-next-i18next-v11/pages/index.js deleted file mode 100644 index 4e68b9f..0000000 --- a/examples/next-with-next-i18next-v11/pages/index.js +++ /dev/null @@ -1,73 +0,0 @@ -import Link from 'next/link' -import { useRouter } from 'next/router' - -import { useTranslation, Trans } from 'next-i18next' -import { serverSideTranslations } from 'next-i18next/serverSideTranslations' - -import { Header } from '../components/Header' -import { Footer } from '../components/Footer' - -const Homepage = () => { - - const router = useRouter() - const { t } = useTranslation('common') - - return ( - <> -
-
-
-
-

{t('blog.optimized.question')}

-

- - Then you may have a look at this blog post. - -

- - - -
-
-

{t('blog.ssg.question')}

-

- - Then you may have a look at this blog post. - -

- - - -
-
-
-
- - - - - - -
-
-