next-i18next 5.0.0-beta.1 → 5.0.0

package/.eslintignore

@@ -1,2 +1,3 @@
 **/node_modules
-**/out
+**/out
+src/create-client/package.json

package/.eslintrc

@@ -13,9 +13,15 @@
     "browser": true
   },
   "rules": {
-    "@typescript-eslint/indent": ["error", 2],
+    "@typescript-eslint/indent": [
+      "error",
+      2
+    ],
     "semi": "off",
-    "@typescript-eslint/semi": ["error", "never"],
+    "@typescript-eslint/semi": [
+      "error",
+      "never"
+    ],
     "@typescript-eslint/no-var-requires": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
@@ -33,11 +39,17 @@
     "react/display-name": 0,
     "react/jsx-filename-extension": 0,
     "react/prefer-stateless-function": 0,
+    "react/react-in-jsx-scope": 0,
     "no-restricted-syntax": 0,
     "no-useless-escape": 0,
-    "no-eval": 0,
-    "no-console": ["error", {
-      "allow": ["warn", "error"]
-    }]
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ]
   }
 }

package/README.md

@@ -1,7 +1,6 @@
 # next-i18next
 [![npm version](https://badge.fury.io/js/next-i18next.svg)](https://badge.fury.io/js/next-i18next)
 [![CircleCI](https://circleci.com/gh/isaachinman/next-i18next.svg?style=shield)](https://circleci.com/gh/isaachinman/next-i18next)
-[![dependencies Status](https://david-dm.org/isaachinman/next-i18next/status.svg)](https://david-dm.org/isaachinman/next-i18next)
 [![Package Quality](https://npm.packagequality.com/shield/next-i18next.svg)](https://packagequality.com/#?package=next-i18next)
 
 **The easiest way to translate your NextJs apps.**
@@ -14,7 +13,7 @@ If you are using next-i18next in production, please consider [sponsoring the pac
 
 While `next-i18next` uses [i18next](https://www.i18next.com/) and [react-i18next](https://github.com/i18next/react-i18next) under the hood, users of `next-i18next` simply need to include their translation content as JSON files and don't have to worry about much else.
 
-A live demo is [available here](http://next-i18next.com/). Please be aware this is hosted on a free Heroku dyno and therefore may go to sleep during periods of inactivity. This demo app is the [simple example](./examples/simple/) - nothing more, nothing less.
+A live demo is [available here](http://next-i18next.com/). This demo app is the [simple example](./examples/simple/) - nothing more, nothing less.
 
 ## Setup
 
@@ -44,29 +43,24 @@ This structure can also be seen in the [simple example](./examples/simple).
 
 If you want to structure your translations/namespaces in a custom way, you will need to pass modified `localePath` and `localeStructure` values into the initialisation config.
 
-If translations are not found in `config.localePath` or `public/static/locales` an attempt will be made to find the locales in `static/locales`, if found a deprecation warning will be logged.
-
 ### 3. Project setup
 
 The default export of `next-i18next` is a class constructor, into which you pass your config options. The resulting class has all the methods you will need to translate your app:
 
 ```jsx
-import NextI18Next from 'next-i18next'
-
-const NextI18NextInstance = new NextI18Next({
-  defaultLanguage: 'en',
-  otherLanguages: ['de']
+const NextI18Next = require('next-i18next').default
+const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
+const path = require('path')
+
+module.exports = new NextI18Next({
+  otherLanguages: ['de'],
+  localeSubpaths,
+  localePath: path.resolve('./public/static/locales')
 })
-
-export default NextI18NextInstance
-
-/* Optionally, export class methods as named exports */
-export const {
-  appWithTranslation,
-  withTranslation,
-} = NextI18NextInstance
 ```
 
+Note that `localePath` is required, and must be an absolute path.
+
 [A full list of options can be seen here](#options).
 
 It's recommended to export this `NextI18Next` instance from a single file in your project, where you can continually import it from to use the class methods as needed. You can see this approach in the [examples/simple/i18n.js](./examples/simple/i18n.js) file.
@@ -82,18 +76,16 @@ Note: You can pass `shallowRender: true` into config options to avoid triggering
 That's it! Your app is ready to go. You can now use the `NextI18Next.withTranslation` HOC to make your components or pages translatable, based on namespaces:
 
 ```jsx
-import React from 'react'
-
 // This is our initialised `NextI18Next` instance
 import { withTranslation } from '../i18n'
 
-class Footer extends React.Component {
-  render() {
-    return (
-      <footer>{this.props.t('description')}</footer>
-    )
-  }
-}
+const Footer = ({ t }) => (
+  <footer>
+    <p>
+      {t('description')}
+    </p>
+  </footer>
+)
 
 export default withTranslation('footer')(Footer)
 ```
@@ -162,8 +154,6 @@ With this link, we would expect someone whose language is set to French to autom
 To do that, we must import `Link` from your `NextI18Next` instance, **not next/router**:
 
 ```jsx
-import React from 'react'
-
 // This is our initialised `NextI18Next` instance
 import { Link } from '../i18n'
 
@@ -177,8 +167,6 @@ const SomeLink = () => (
 We can also navigate imperatively with locale subpaths by importing `Router` from your `NextI18Next` instance. The exported Router shares the same API as the native Next Router. The push, replace, and prefetch functions will automatically prepend locale subpaths.
 
 ```jsx
-import React from 'react'
-
 // This is our initialised `NextI18Next` instance
 import { Router } from '../i18n'
 
@@ -191,25 +179,6 @@ const SomeButton = () => (
 )
 ```
 
-## Custom Routing
-
-Custom routing can be achieved via the `app.render` method:
-
-```jsx
-/* First, use middleware */
-server.use(nextI18NextMiddleware(nextI18next))
-
-/* Second, declare custom routes */
-server.get('/products/:id', (req, res) => {
-  const { query, params } = req
-
-  return app.render(req, res, '/product-page', { ...query, id: params.id })
-})
-
-/* Third, add catch-all GET for non-custom routes */
-server.get('*', (req, res) => handle(req, res))
-```
-
 ## Accessing the Current Language
 
 In many cases, you'll need to know the currently active language. Most of the time, to accomplish this, you should use the `withTranslation` HOC, which will pass an `i18n` prop to the wrapped component and further asserts your component will get re-rendered on language change or changes to the translation catalog itself (loaded translations). More info can be found [here](https://react.i18next.com/latest/withtranslation-hoc).
@@ -235,7 +204,7 @@ MyPage.getInitialProps = async({ req }) => {
 | `ignoreRoutes`  | `['/_next/', '/static/', '/public/', '/api/']`  |
 | `otherLanguages` (required) | `[]`  |
 | `localeExtension` | `'json'`  |
-| `localePath` | `'public/static/locales'`  |
+| `localePath` (required) | `'/public/static/locales'`  |
 | `localeStructure` | `'{{lng}}/{{ns}}'`  |
 | `localeSubpaths` | `{}`  |
 | `serverLanguageDetection` | `true`  |

package/{.babelrc → babel.config.json}

@@ -12,7 +12,9 @@
             }
           }
         ],
-        ["@babel/preset-react"]
+        [
+          "@babel/preset-react"
+        ]
       ]
     },
     "cjs": {
@@ -23,19 +25,19 @@
           {
             "useBuiltIns": "usage",
             "corejs": {
-              "version": 2
+              "version": 3
             }
           }
         ],
         [
-          "next/babel", 
+          "next/babel",
           {
             "transform-runtime": {
               "corejs": false,
               "helpers": true,
               "regenerator": true,
               "useESModules": false
-            },
+            }
           }
         ]
       ],
@@ -61,7 +63,9 @@
             "modules": "commonjs"
           }
         ],
-        ["@babel/preset-react"]
+        [
+          "@babel/preset-react"
+        ]
       ],
       "plugins": [
         "@babel/proposal-class-properties",
@@ -72,6 +76,6 @@
           }
         ]
       ]
-    },
+    }
   }
 }

package/dist/commonjs/components/Link.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require("core-js/modules/es6.object.define-property");
+require("core-js/modules/es.object.assign");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -25,8 +25,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-require("core-js/modules/es6.object.assign");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -67,9 +65,7 @@ var removeWithTranslationProps = function removeWithTranslationProps(props) {
   return strippedProps;
 };
 
-var Link =
-/*#__PURE__*/
-function (_React$Component) {
+var Link = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Link, _React$Component);
 
   function Link() {

package/dist/commonjs/components/NextStaticProvider.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require("core-js/modules/es6.object.define-property");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,9 +25,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactI18next = require("react-i18next");
 
-var NextStaticProvider =
-/*#__PURE__*/
-function (_React$Component) {
+var NextStaticProvider = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(NextStaticProvider, _React$Component);
 
   function NextStaticProvider() {

package/dist/commonjs/components/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require("core-js/modules/es6.object.define-property");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/commonjs/config/create-config.js

@@ -2,26 +2,30 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require("core-js/modules/es6.object.define-property");
+require("core-js/modules/es.array.concat");
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createConfig = void 0;
+require("core-js/modules/es.array.filter");
 
-require("core-js/modules/es6.array.for-each");
+require("core-js/modules/es.array.for-each");
 
-require("core-js/modules/es6.string.starts-with");
+require("core-js/modules/es.array.index-of");
 
-require("core-js/modules/es6.regexp.replace");
+require("core-js/modules/es.array.join");
 
-require("core-js/modules/es6.array.map");
+require("core-js/modules/es.array.map");
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+require("core-js/modules/es.regexp.exec");
+
+require("core-js/modules/es.string.replace");
 
-require("core-js/modules/es6.array.index-of");
+require("core-js/modules/es.string.starts-with");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createConfig = void 0;
 
-require("core-js/modules/es6.array.filter");
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
 
 var _defaultConfig = require("./default-config");
 
@@ -72,7 +76,7 @@ var createConfig = function createConfig(userConfig) {
 
     if (typeof combinedConfig.defaultNS === 'string') {
       var defaultFile = "/".concat(defaultLanguage, "/").concat(combinedConfig.defaultNS, ".").concat(localeExtension);
-      var defaultNSPath = path.join(process.cwd(), localePath, defaultFile);
+      var defaultNSPath = path.join(localePath, defaultFile);
       var defaultNSExists = fs.existsSync(defaultNSPath);
 
       if (!defaultNSExists) {
@@ -80,7 +84,7 @@ var createConfig = function createConfig(userConfig) {
           If defaultNS doesn't exist, try to fall back to the deprecated static folder
           https://github.com/isaachinman/next-i18next/issues/523
         */
-        var staticDirPath = path.join(process.cwd(), STATIC_LOCALE_PATH, defaultFile);
+        var staticDirPath = path.resolve(process.cwd(), STATIC_LOCALE_PATH, defaultFile);
         var staticDirExists = fs.existsSync(staticDirPath);
 
         if (staticDirExists) {
@@ -97,13 +101,13 @@ var createConfig = function createConfig(userConfig) {
 
 
     combinedConfig.backend = {
-      loadPath: path.join(process.cwd(), "".concat(serverLocalePath, "/").concat(localeStructure, ".").concat(localeExtension)),
-      addPath: path.join(process.cwd(), "".concat(serverLocalePath, "/").concat(localeStructure, ".missing.").concat(localeExtension))
-      /*
-        Set server side preload (languages and namespaces)
-      */
-
+      loadPath: path.resolve(process.cwd(), "".concat(serverLocalePath, "/").concat(localeStructure, ".").concat(localeExtension)),
+      addPath: path.resolve(process.cwd(), "".concat(serverLocalePath, "/").concat(localeStructure, ".missing.").concat(localeExtension))
     };
+    /*
+      Set server side preload (languages and namespaces)
+    */
+
     combinedConfig.preload = allLanguages;
 
     if (!combinedConfig.ns) {
@@ -113,7 +117,7 @@ var createConfig = function createConfig(userConfig) {
         });
       };
 
-      combinedConfig.ns = getAllNamespaces(path.join(process.cwd(), "".concat(serverLocalePath, "/").concat(defaultLanguage)));
+      combinedConfig.ns = getAllNamespaces(path.resolve(process.cwd(), "".concat(serverLocalePath, "/").concat(defaultLanguage)));
     }
   } else {
     var clientLocalePath = localePath;
@@ -121,8 +125,8 @@ var createConfig = function createConfig(userConfig) {
       Remove public prefix from client site config
     */
 
-    if (localePath.startsWith('public/')) {
-      clientLocalePath = localePath.replace(/^public\//, '');
+    if (localePath.startsWith('/public/')) {
+      clientLocalePath = localePath.replace(/^\/public/, '');
     }
     /*
       Set client side backend
@@ -130,8 +134,8 @@ var createConfig = function createConfig(userConfig) {
 
 
     combinedConfig.backend = {
-      loadPath: "/".concat(clientLocalePath, "/").concat(localeStructure, ".").concat(localeExtension),
-      addPath: "/".concat(clientLocalePath, "/").concat(localeStructure, ".missing.").concat(localeExtension)
+      loadPath: "".concat(clientLocalePath, "/").concat(localeStructure, ".").concat(localeExtension),
+      addPath: "".concat(clientLocalePath, "/").concat(localeStructure, ".missing.").concat(localeExtension)
     };
     combinedConfig.ns = [combinedConfig.defaultNS];
   }

package/dist/commonjs/config/default-config.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es6.object.define-property");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,7 +10,7 @@ var _utils = require("../utils");
 var DEFAULT_LANGUAGE = 'en';
 var OTHER_LANGUAGES = [];
 var DEFAULT_NAMESPACE = 'common';
-var LOCALE_PATH = 'public/static/locales';
+var LOCALE_PATH = '/public/static/locales';
 var LOCALE_STRUCTURE = '{{lng}}/{{ns}}';
 var LOCALE_EXTENSION = 'json';
 var defaultConfig = {

package/dist/commonjs/create-client/browser.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.for-each");
+
+require("core-js/modules/web.dom-collections.for-each");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _i18next = _interopRequireDefault(require("i18next"));
+
+var _cjs = _interopRequireDefault(require("i18next-http-backend/cjs"));
+
+var _i18nextBrowserLanguagedetector = _interopRequireDefault(require("i18next-browser-languagedetector"));
+
+var _default = function _default(config) {
+  var initPromise;
+
+  if (!_i18next["default"].isInitialized) {
+    _i18next["default"].use(_cjs["default"]);
+
+    if (config.browserLanguageDetection) {
+      var browserDetectors = new _i18nextBrowserLanguagedetector["default"]();
+      config.customDetectors.forEach(function (detector) {
+        return browserDetectors.addDetector(detector);
+      });
+
+      _i18next["default"].use(browserDetectors);
+    }
+
+    config.use.forEach(function (x) {
+      return _i18next["default"].use(x);
+    });
+    initPromise = _i18next["default"].init(config);
+  }
+
+  return {
+    i18n: _i18next["default"],
+    initPromise: initPromise
+  };
+};
+
+exports["default"] = _default;

package/dist/commonjs/create-client/node.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.for-each");
+
+require("core-js/modules/web.dom-collections.for-each");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _i18next = _interopRequireDefault(require("i18next"));
+
+var _cjs = _interopRequireDefault(require("i18next-fs-backend/cjs"));
+
+var _cjs2 = _interopRequireDefault(require("i18next-http-middleware/cjs"));
+
+var _default = function _default(config) {
+  var initPromise;
+
+  if (!_i18next["default"].isInitialized) {
+    _i18next["default"].use(_cjs["default"]);
+
+    if (config.serverLanguageDetection) {
+      var serverDetectors = new _cjs2["default"].LanguageDetector();
+      config.customDetectors.forEach(function (detector) {
+        return serverDetectors.addDetector(detector);
+      });
+
+      _i18next["default"].use(serverDetectors);
+    }
+
+    config.use.forEach(function (x) {
+      return _i18next["default"].use(x);
+    });
+    initPromise = _i18next["default"].init(config);
+  }
+
+  return {
+    i18n: _i18next["default"],
+    initPromise: initPromise
+  };
+};
+
+exports["default"] = _default;

package/dist/commonjs/create-client/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "next-i18next-create-client",
+  "browser": "./browser.js",
+  "main": "./node.js"
+}