Merge pull request #12 from FriendsOfECMAScript/feature/string-array-…

…as-path

Added support for using string-arrays as path values

CHANGELOG.md

@@ -2,26 +2,28 @@
 
 This changelog references the relevant changes done between versions.
 
-To get the diff for a specific change, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/commit/XXX where XXX is the change hash 
+To get the diff for a specific change, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/commit/XXX where XXX is the change hash
 To get the diff between two versions, go to https://github.com/FriendsOfECMAScript/ReactI18nRouting/compare/v0.4.0...v0.5.0
 
-* 0.6.0
-    * Removed deprecated `react-router-redux` dependency. Updated the `ConnectedRouter` for the `connected-react-router` provided one. 
-* 0.5.2
-    * Fixed unprefixed strategy when URL starts with another locale.
-* 0.5.1
-    * Fixed PropType reference in the basic usage chapter from documentation.
-    * Fixed wrong PropType in the BrowserIntlProvider.
-* 0.5.0
-    * Added documentation basic structure and written some chapters.
-    * Implemented HOC to avoid Boilerplate bootstrapping the Redux browser intl provider.
-* 0.4.0
-    * Added `FormattedRedirect` and `FormattedNavLink` components.
-* 0.3.0
-    * Added License, Travis and other useful files to make the library more compliant with OSS.
-    * Decoupled `BrowserIntlProvider` from Redux, allowing other implementations like `LocalStorage` or `InMemory`.
-    * Refactored the `renderTranslatedRoutes` implementation to allow deeply nested routes configuration object.
-* 0.2.0
-    * Published two kinds of distributions: `esm` and `commonjs`.
-* 0.1.0
-    * Initial commit.
+- 0.7.0
+  - Added support for using an string-array as the path property as `react-router` does.
+- 0.6.0
+  - Removed deprecated `react-router-redux` dependency. Updated the `ConnectedRouter` for the `connected-react-router` provided one.
+- 0.5.2
+  - Fixed unprefixed strategy when URL starts with another locale.
+- 0.5.1
+  - Fixed PropType reference in the basic usage chapter from documentation.
+  - Fixed wrong PropType in the BrowserIntlProvider.
+- 0.5.0
+  - Added documentation basic structure and written some chapters.
+  - Implemented HOC to avoid Boilerplate bootstrapping the Redux browser intl provider.
+- 0.4.0
+  - Added `FormattedRedirect` and `FormattedNavLink` components.
+- 0.3.0
+  - Added License, Travis and other useful files to make the library more compliant with OSS.
+  - Decoupled `BrowserIntlProvider` from Redux, allowing other implementations like `LocalStorage` or `InMemory`.
+  - Refactored the `renderTranslatedRoutes` implementation to allow deeply nested routes configuration object.
+- 0.2.0
+  - Published two kinds of distributions: `esm` and `commonjs`.
+- 0.1.0
+  - Initial commit.

docs/basic_usage.md

@@ -5,12 +5,14 @@ in your application. In other chapters you can check more info about BrowserIntl
 to keep this tutorial simple we are going to use **ReduxBrowserIntlProvider** and **defaultUnprefixed**.
 
 First of all, we have to define our routes with their translations:
+
 ```javascript
 // src/routing/routes.js
 
 export const HOME = 'home';
 export const PAGE = 'page';
 export const POST = 'post';
+export const ARRAY_PATH_ROUTE = 'array-path-route';
 
 export default {
   [HOME]: '/',
@@ -26,12 +28,19 @@ export default {
     eu: '/orrialdea/**',
     fr: '/page/**',
   },
+  [ARRAY_PATH_ROUTE]: {
+    en: ['/page', '/news'],
+    es: ['/pagina', '/noticia'],
+    eu: ['/orrialdea', '/albistea'],
+    fr: ['/page', '/nouvelles'],
+  },
 };
 ```
+
 After that, we are ready to configure our application's i18n preferences. We need to configure our language strategy.
-The following code represents the minimum required code to make work the *defaultUnPrefixed* strategy.
-In this case we are also configuring the *react-intl* locales. This file exposes some useful methods to use in your
-application bootstrapping.  
+The following code represents the minimum required code to make work the _defaultUnPrefixed_ strategy.
+In this case we are also configuring the _react-intl_ locales. This file exposes some useful methods to use in your
+application bootstrapping.
 
 ```javascript
 // src/i18n/index.js
@@ -64,8 +73,9 @@ export default {
   renderRoutes: config => languageStrategy.renderRoutes(getLocale())(config),
 };
 ```
+
 It has been built on top of **react-router-config**, and each language strategy provides a helper to transform
-the intl routing to valid react-router-config routing. 
+the intl routing to valid react-router-config routing.
 
 ```javascript
 // src/routing/config.js
@@ -93,6 +103,7 @@ export default [
   },
 ];
 ```
+
 The following file is the entry point of your React app.
 
 ```javascript
@@ -124,7 +135,7 @@ renderMethod(
       {renderRoutes(i18n.renderRoutes(routes))}
     </ReduxBrowserIntlProvider>
   </Provider>,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foes/react-i18n-routing",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "description": "Provides components and functions to make i18n routing React apps with ease.",
   "keywords": [

src/languageStrategy/defaultUnprefixed.js

@@ -50,6 +50,14 @@ const pathFromRoute = (paths, locale, defaultLocale) => {
     return `${localePrefix(defaultLocale)(locale)}${paths}`;
   }
 
+  const translatedPath = paths[locale];
+
+  if (Array.isArray(translatedPath)) {
+    return translatedPath.map(
+      path => `${localePrefix(defaultLocale)(locale)}${path}`,
+    );
+  }
+
   return `${localePrefix(defaultLocale)(locale)}${paths[locale]}`;
 };
 

tests/languageStrategy/defaultUnprefixed.js

@@ -402,3 +402,97 @@ test('Generates valid react-router-config complex nested tree', () => {
     },
   ]);
 });
+
+test('Generates valid react-router-config complex nested tree, supporting arrays as path', () => {
+  expect(
+    languageStrategy.renderRoutes('en')([
+      {
+        path: '/',
+        routes: [
+          {
+            paths: '/',
+            routes: [
+              {
+                paths: {
+                  en: '/en-test',
+                  es: '/es-test',
+                  eu: '/eu-test',
+                },
+              },
+            ],
+          },
+          {
+            paths: {
+              en: '/cart',
+              es: '/carrito',
+              eu: '/saskia',
+            },
+          },
+          {
+            paths: '/login',
+          },
+          {
+            paths: {
+              en: '/product/:slug',
+              es: '/producto/:slug',
+              eu: '/produktua/:slug',
+            },
+          },
+          {
+            paths: {
+              en: ['/product/:slug', '/products/:category'],
+              es: ['/producto/:slug', '/productos/:category'],
+              eu: ['/produktua/:slug', '/produktuak/:category'],
+            },
+          },
+          {path: '/checkout/:step?'},
+          {path: '*'},
+        ],
+      },
+    ]),
+  ).toEqual([
+    {
+      path: '/',
+      routes: [
+        {
+          path: '/',
+          routes: [
+            {
+              path: '/en-test',
+            },
+          ],
+        },
+        {
+          path: '/es/',
+          routes: [
+            {
+              path: '/es/es-test',
+            },
+          ],
+        },
+        {
+          path: '/eu/',
+          routes: [
+            {
+              path: '/eu/eu-test',
+            },
+          ],
+        },
+        {path: '/cart'},
+        {path: '/es/carrito'},
+        {path: '/eu/saskia'},
+        {path: '/login'},
+        {path: '/es/login'},
+        {path: '/eu/login'},
+        {path: '/product/:slug'},
+        {path: '/es/producto/:slug'},
+        {path: '/eu/produktua/:slug'},
+        {path: ['/product/:slug', '/products/:category']},
+        {path: ['/es/producto/:slug', '/es/productos/:category']},
+        {path: ['/eu/produktua/:slug', '/eu/produktuak/:category']},
+        {path: '/checkout/:step?'},
+        {path: '*'},
+      ],
+    },
+  ]);
+});

tests/languageStrategy/subdomainBased.js

@@ -128,6 +128,15 @@ test('Generates valid react-router-config complex nested tree', () => {
         routes: [
           {
             paths: '/',
+            routes: [
+              {
+                paths: {
+                  en: '/en-test',
+                  es: '/es-test',
+                  eu: '/eu-test',
+                },
+              },
+            ],
           },
           {
             paths: {
@@ -159,7 +168,7 @@ test('Generates valid react-router-config complex nested tree', () => {
     {
       path: '/',
       routes: [
-        {path: '/'},
+        {path: '/', routes: [{path: '/en-test'}]},
         {path: '/cart'},
         {path: '/login'},
         {path: '/product/:slug'},
@@ -169,3 +178,69 @@ test('Generates valid react-router-config complex nested tree', () => {
     },
   ]);
 });
+
+test('Generates valid react-router-config complex nested tree, supporting arrays as path', () => {
+  expect(
+    languageStrategy.renderRoutes('en')([
+      {
+        path: '/',
+        routes: [
+          {
+            paths: '/',
+            routes: [
+              {
+                paths: {
+                  en: '/en-test',
+                  es: '/es-test',
+                  eu: '/eu-test',
+                },
+              },
+            ],
+          },
+          {
+            paths: {
+              en: '/cart',
+              es: '/carrito',
+              eu: '/saskia',
+            },
+          },
+          {
+            paths: '/login',
+          },
+          {
+            paths: {
+              en: '/product/:slug',
+              es: '/producto/:slug',
+              eu: '/produktua/:slug',
+            },
+          },
+          {
+            paths: {
+              en: ['/product/:slug', '/products/:category'],
+              es: ['/producto/:slug', '/productos/:category'],
+              eu: ['/produktua/:slug', '/produktuak/:category'],
+            },
+          },
+          {path: '/checkout/:step?'},
+          {path: '*'},
+        ],
+      },
+    ]),
+  ).toEqual([
+    {
+      path: '/',
+      routes: [
+        {
+          path: '/',
+          routes: [{path: '/en-test'}],
+        },
+        {path: '/cart'},
+        {path: '/login'},
+        {path: '/product/:slug'},
+        {path: ['/product/:slug', '/products/:category']},
+        {path: '/checkout/:step?'},
+        {path: '*'},
+      ],
+    },
+  ]);
+});