doc(i18n): Update 4. i18n.md for deprecated i18next-xhr-backend (#490)

Replaced deprecated i18next-xhr-backend with i18next-http-backend. #i18n/357

Author: HIRANO-Satoshi

current/en-us/7. plugins/4. i18n.md

@@ -26,7 +26,7 @@ Aurelia-I18N is tested and optimized to support both JS and TS, as well as the f
 * Webpack
 
 Please continue with the section which suites your setup. In addition to this, you must
-pick your own backend service. For this guide we're going to leverage the [XHR backend plugin](https://github.com/i18next/i18next-xhr-backend),
+pick your own backend service. For this guide we're going to leverage the [HTTP backend plugin](https://github.com/i18next/i18next-http-backend),
 or a variation of this plugin — `aurelia-i18n-loader` — that uses the aurelia loader, which is bundled with the aurelia-i18n plugin.
 We'll discuss TypeScript specifics in a later section.
 
@@ -38,11 +38,11 @@ In order to install the Plugin with a CLI Project, first install the plugin via
 npm install aurelia-i18n
 ```
 
-Since Aurelia-I18N is backed by i18next, you should install it and a backend plugin of your choice. You can use the built-in backend that uses aurelia's loader or any of your choice.
-As an example we're going to leverage the i18next-xhr-backend:
+Since Aurelia-I18N is backed by i18next, you should install it and a backend plugin of your choice.
+As an example we're going to leverage the i18next-http-backend:
 
 ```Shell
-npm install i18next i18next-xhr-backend
+npm install i18next i18next-http-backend
 ```
 
 ### JSPM
@@ -56,7 +56,7 @@ jspm install aurelia-i18n
 And optionally install the backend service using:
 
 ```Shell
-jspm install npm:i18next-xhr-backend
+jspm install npm:i18next-http-backend
 ```
 
 > Info
@@ -76,16 +76,16 @@ or if you prefer yarn
 yarn add aurelia-i18n
 ```
 
-Also optionally install the `i18next-xhr-backend` plugin:
+Also optionally install the `i18next-http-backend` plugin:
 
 ```Shell
-npm install i18next-xhr-backend
+npm install i18next-http-backend
 ```
 
 or using yarn
 
 ```Shell
-yarn add i18next-xhr-backend
+yarn add i18next-http-backend
 ```
 
 > Info
@@ -137,50 +137,19 @@ Fourth, in those subfolders create a file named `translation.json` which contain
 }
 ```
 
-Fifth, create (if you haven't already) a file `main.js` in your `src` folder to configure the plugin. Depending on which backend you've chosen there might
-be slight differences. The following listings show the configuration for first the built-in aurelia loader, the second using i18next-xhr-backend.
+Fifth, create (if you haven't already) a file `main.js` in your `src` folder to configure the plugin. 
+We use i18next-http-backend here. Note that, since i18next-xhr-backend is deprecated, Backend in aurelia-i18n and Backend in i18next--backend are not valid options.
+
 
 > Info
 > Notice that Aurelia I18N makes use of a non-standard attributes option, which is used to define custom aliases besides the default ones, being `t` and `i18n`. Calling `TCustomAttribute.configureAliases` is currently necessary in order make sure that the aliases are defined before view templates are fully processed.
 
-```JavaScript Registering the Plugin - using the built-in aurelia loader backed
-import {I18N, Backend, TCustomAttribute} from 'aurelia-i18n';
-
-export function configure(aurelia) {
-  aurelia.use
-    .standardConfiguration()
-    .developmentLogging()
-    .plugin('aurelia-i18n', (instance) => {
-      let aliases = ['t', 'i18n'];
-      // add aliases for 't' attribute
-      TCustomAttribute.configureAliases(aliases);
-
-      // register backend plugin
-      instance.i18next.use(Backend.with(aurelia.loader));
-
-      // adapt options to your needs (see https://i18next.com/docs/options/)
-      // make sure to return the promise of the setup method, in order to guarantee proper loading
-      return instance.setup({
-        backend: {                                  // <-- configure backend settings
-          loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
-        },
-        attributes: aliases,
-        lng : 'de',
-        fallbackLng : 'en',
-        debug : false
-      });
-    });
-
-  aurelia.start().then(a => a.setRoot());
-}
-```
-
-```JavaScript Registering the Plugin - using the i18next-xhr-backend
+```JavaScript Registering the Plugin - using the i18next-http-backend
 import {I18N, TCustomAttribute} from 'aurelia-i18n';
-import Backend from 'i18next-xhr-backend'; // <-- your previously installed backend plugin
+import Backend from 'i18next-http-backend'; // <-- your previously installed backend plugin
 
 // if you use TypeScript and target ES5 you might need to import it like this instead
-// import * as Backend from 'i18next-xhr-backend';
+// import * as Backend from 'i18next-http-backend';
 // otherwise add "allowSyntheticDefaultImports": true, to your tsconfig
 
 export function configure(aurelia) {
@@ -199,7 +168,7 @@ export function configure(aurelia) {
       // make sure to return the promise of the setup method, in order to guarantee proper loading
       return instance.setup({
         backend: {                                  // <-- configure backend settings
-          loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
+          loadPath: './locales/{{lng}}/{{ns}}.json', // <-- HTTP settings for where to get the files from
         },
         attributes: aliases,
         lng : 'de',
@@ -212,9 +181,9 @@ export function configure(aurelia) {
 }
 ```
 
-To have `webpack` serving your translation files for `i18next-xhr-backend`, they need to be copied into the virtual (development) or actual (production) output directory. To copy them from `src/locales/` to `$outputDir$/locales/`, add the following entry under the plugins section of your `webpack.config.js`.
+To have `webpack` serving your translation files for `i18next-http-backend`, they need to be copied into the virtual (development) or actual (production) output directory. To copy them from `src/locales/` to `$outputDir$/locales/`, add the following entry under the plugins section of your `webpack.config.js`.
 
-```JavaScript Copy translation files for webpack and i18next-xhr-backend
+```JavaScript Copy translation files for webpack and i18next-http-backend
 plugins: [
   // ...
   new CopyWebpackPlugin([
@@ -252,7 +221,7 @@ If you are using [`reflect-metadata`](https://www.npmjs.com/package/reflect-meta
 
 In order to get proper support for autocompletion and typesafety you should install
 the necessary type definitions (d.ts) for the plugins dependencies.
-Here we show how you can do that for i18next and the i18next-xhr-backend, but this
+Here we show how you can do that for i18next and the i18next-http-backend, but this
 should be applicable to every other backend choice.
 
 The way to get hold of those is using using npm or perhaps Yarn as with other packages.
@@ -275,20 +244,20 @@ with a solution proposed to fix complications should they arise.
 > Info
 > Alternatively, you can find this file in the plugins repository doc folder: `doc/i18next.d.ts`
 
-As for the XHR-Backend you'll be using:
+As for the HTTP-Backend you'll be using:
 
 ```Shell
-npm install -D @types/i18next-xhr-backend
+npm install -D @types/i18next-http-backend
 ```
 
 or for yarn
 
 ```Shell
-yarn add -D @types/i18next-xhr-backend
+yarn add -D @types/i18next-http-backend
 ```
 
 > Info
-> Alternative, you can find this file in the plugins repository doc folder: `doc/i18next-xhr-backend.d.ts`
+> Alternative, you can find this file in the plugins repository doc folder: `doc/i18next-http-backend.d.ts`
 
 Note: if you decide to use the `doc/*.d.ts` files, you should copy them to another folder, e.g. `custom_typings`.
 
@@ -313,13 +282,13 @@ or if you are using TypeScript 2.0 or later, you can add them to the types secti
 
 ```JavaScript Configuring custom typings in tsconfig.json
 ... existing configuration code
-"types": [ "i18next", "i18next-xhr-backend" ]
+"types": [ "i18next", "i18next-http-backend" ]
   ],
 ... other existing configuration code
 ```
 
 > Warning
-> TypeScript will throw errors like `Module xxx not found` either for aurelia-i18n or one of the backends. This is due to the fact that TypeScript does not see proper ES6 exported defaults. So you can now either switch to alias imports `import * as Backend from 'i18next-xhr-backend'` or update your tsconfig with `"allowSyntheticDefaultImports": true` to maintain the same import style.
+> TypeScript will throw errors like `Module xxx not found` either for aurelia-i18n or one of the backends. This is due to the fact that TypeScript does not see proper ES6 exported defaults. So you can now either switch to alias imports `import * as Backend from 'i18next-http-backend'` or update your tsconfig with `"allowSyntheticDefaultImports": true` to maintain the same import style.
 
 ## Using the Plugin