Merge JSX component classes with normal classes

README.md

@@ -11,8 +11,8 @@ Found uses [Redux](http://redux.js.org/) for state management and [Farce](https:
 ## Usage
 
 ```js
-import { createBrowserRouter, HttpError } from 'found';
-import { makeRouteConfig, Redirect, Route } from 'found/lib/jsx';
+import { createBrowserRouter, HttpError, makeRouteConfig, Redirect, Route }
+  from 'found';
 
 /* ... */
 
@@ -140,7 +140,7 @@ $ npm i -S found
 
 ### Basic usage
 
-Define a route configuration as an array of objects, or with the JSX configuration components and the `makeRouteConfig` function in `found/lib/jsx`.
+Define a route configuration as an array of objects, or as JSX with `<Route>` elements using `makeRouteConfig`.
 
 ```js
 const routeConfig = [
@@ -209,7 +209,7 @@ A route object under the default matching algorithm and route element resolver c
 - `render`: a method that returns the element for the route
 - `children`: an array of child route objects; if using JSX configuration components, this comes from the JSX children
 
-A route configuration consists of an array of route objects. You can also define a route configuration using the JSX configuration components and the `makeRouteConfig` function in `found/lib/jsx`.
+A route configuration consists of an array of route objects. You can generate such an array of route objects from JSX with `<Route>` elements using `makeRouteConfig`.
 
 #### `path`
 
@@ -355,7 +355,7 @@ If any matched routes have unresolved asynchronous component or data dependencie
 
 #### Redirects
 
-The `Redirect` route class and the `<Redirect>` configuration component set up static redirect routes. These take `from` and `to` properties. `from` should be a path pattern as for normal routes above. `to` can be either a path pattern or a function. If it is a path pattern, the router will populate path parameters appropriately. If it is a function, it will receive the same routing state object as `getComponent` and `getData`, as described above.
+The `Redirect` route class sets up static redirect routes. You can also use it to create JSX `<Redirect>` elements for use with `makeRouteConfig`. This class takes `from` and `to` properties. `from` should be a path pattern as for normal routes above. `to` can be either a path pattern or a function. If it is a path pattern, the router will populate path parameters appropriately. If it is a function, it will receive the same routing state object as `getComponent` and `getData`, as described above.
 
 ```js
 const redirect1 = new Redirect({
@@ -855,13 +855,13 @@ The top-level `found` package exports everything available in this library. It i
 
 ```js
 import createBrowserRouter from 'found/lib/createBrowserRouter';
+import makeRouteConfig from 'found/lib/makeRouteConfig';
 import { routerShape } from 'found/lib/PropTypes';
-import makeRouteConfig from 'found/lib/jsx/makeRouteConfig';
-import Route from 'found/lib/jsx/Route';
+import Route from 'found/lib/Route';
 
 // Instead of:
-// import { createBrowserRouter, routerShape } from 'found';
-// import { makeRouteConfig, Route } from 'found/lib/jsx';
+// import { createBrowserRouter, makeRouteConfig, Route, routerShape }
+//   from 'found';
 ```
 
 [build-badge]: https://img.shields.io/travis/4Catalyzer/found/master.svg

examples/basic-jsx/src/index.js

@@ -1,8 +1,8 @@
 import createBrowserRouter from 'found/lib/createBrowserRouter';
 import Link from 'found/lib/Link';
-import makeRouteConfig from 'found/lib/jsx/makeRouteConfig';
-import Redirect from 'found/lib/jsx/Redirect';
-import Route from 'found/lib/jsx/Route';
+import makeRouteConfig from 'found/lib/makeRouteConfig';
+import Redirect from 'found/lib/Redirect';
+import Route from 'found/lib/Route';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';

examples/universal/src/routeConfig.js

@@ -1,7 +1,7 @@
 import Link from 'found/lib/Link';
-import makeRouteConfig from 'found/lib/jsx/makeRouteConfig';
-import Redirect from 'found/lib/jsx/Redirect';
-import Route from 'found/lib/jsx/Route';
+import makeRouteConfig from 'found/lib/makeRouteConfig';
+import Redirect from 'found/lib/Redirect';
+import Route from 'found/lib/Route';
 import PropTypes from 'prop-types';
 import React from 'react';
 

src/Route.js

@@ -0,0 +1,9 @@
+/**
+ * Convenience class for creating normal routes with JSX. When not using JSX,
+ * use a POJSO instead of this class.
+ */
+export default class Route {
+  constructor(props) {
+    Object.assign(this, props);
+  }
+}

src/index.js

@@ -17,10 +17,12 @@ export getRenderArgs from './getRenderArgs';
 export getStoreRenderArgs from './getStoreRenderArgs';
 export HttpError from './HttpError';
 export Link from './Link';
+export makeRouteConfig from './makeRouteConfig';
 export Matcher from './Matcher';
 export { matcherShape, matchShape, routerShape } from './PropTypes';
 export Redirect from './Redirect';
 export RedirectException from './RedirectException';
 export resolveElements from './resolveElements';
 export ResolverUtils from './ResolverUtils';
+export Route from './Route';
 export withRouter from './withRouter';

src/jsx/makeRouteConfig.js → src/makeRouteConfig.js

@@ -1,10 +1,13 @@
 import React from 'react';
 
+/**
+ * Create a route configuration from JSX configuration elements.
+ */
 export default function makeRouteConfig(node) {
   return React.Children.toArray(node)
     .filter(React.isValidElement)
-    .map(({ type, props: { children, ...props } }) => {
-      const route = type.createRoute(props);
+    .map(({ type: Type, props: { children, ...props } }) => {
+      const route = new Type(props);
 
       if (children) {
         route.children = makeRouteConfig(children);

test/jsx/makeRouteConfig.test.js → test/makeRouteConfig.test.js

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import makeRouteConfig from '../../src/jsx/makeRouteConfig';
-import Redirect from '../../src/jsx/Redirect';
-import Route from '../../src/jsx/Route';
-import RedirectObject from '../../src/Redirect';
+import makeRouteConfig from '../src/makeRouteConfig';
+import Redirect from '../src/Redirect';
+import Route from '../src/Route';
 
 const AppPage = () => {};
 const MainPage = () => {};
@@ -15,10 +14,10 @@ describe('makeRouteConfig', () => {
     expect(makeRouteConfig(
       <Route path="/" Component={AppPage} />,
     )).toEqual([
-      {
+      new Route({
         path: '/',
         Component: AppPage,
-      },
+      }),
     ]);
   });
 
@@ -31,25 +30,25 @@ describe('makeRouteConfig', () => {
         </Route>
       </Route>,
     )).toEqual([
-      {
+      new Route({
         path: '/',
         Component: AppPage,
         children: [
-          {
+          new Route({
             Component: MainPage,
-          },
-          {
+          }),
+          new Route({
             path: 'foo',
             Component: FooPage,
             children: [
-              {
+              new Route({
                 path: 'bar',
                 Component: BarPage,
-              },
+              }),
             ],
-          },
+          }),
         ],
-      },
+      }),
     ]);
   });
 
@@ -65,16 +64,16 @@ describe('makeRouteConfig', () => {
         />
       </Route>,
     )).toEqual([
-      {
+      new Route({
         path: '/',
         Component: AppPage,
         children: [
-          new RedirectObject({
+          new Redirect({
             from: 'widget/:widgetId',
             to: '/widgets/:widgetId',
           }),
         ],
-      },
+      }),
     ]);
   });
 });