@ryancole/router - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/route.js

@@ -37,5 +37,30 @@ "use strict";
 function route(options) {
-  var wrappedLoadComponent = function () {
+  var path = options.path;
+
+  var _getPathRegexp = getPathRegexp(path),
+      re = _getPathRegexp.re,
+      keys = _getPathRegexp.keys;
+
+  var loadComponent = getLoadComponent(options);
+  return _extends({}, options, { re: re, keys: keys, loadComponent: loadComponent });
+}
+
+// `routes` is a convinience mapper to `route` for an array of route
+// configuration objects.
+
+function routes(routes) {
+  return routes.map(route);
+}
+
+// `getLoadComponent` returns a higher order component that renders
+// the route's component itself but provides to it access to the
+// route data, and the history object, via react context.
+
+function getLoadComponent(options) {
+  var userLoadComponent = options.loadComponent;
+  return function () {
     var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(route, history) {
-      var initialProps, loadedComponent, componentMetadata, RouteComponentWithDisplayName;
+      var _class, _temp;
+
+      var props, loadedComponent, componentMetadata;
       return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -45,5 +70,5 @@ while (1) {
             case 0:
-              initialProps = {};
+              props = {};
               _context.next = 3;
-              return loadComponent();
+              return userLoadComponent();
 
@@ -63,25 +88,29 @@ case 3:
             case 8:
-              initialProps = _context.sent;
+              props = _context.sent;
 
             case 9:
-              RouteComponentWithDisplayName = function (_RouteComponent) {
-                _inherits(RouteComponentWithDisplayName, _RouteComponent);
+              return _context.abrupt("return", (_temp = _class = function (_React$Component) {
+                _inherits(RouteComponent, _React$Component);
 
-                function RouteComponentWithDisplayName() {
-                  _classCallCheck(this, RouteComponentWithDisplayName);
+                function RouteComponent() {
+                  _classCallCheck(this, RouteComponent);
 
-                  return _possibleConstructorReturn(this, (RouteComponentWithDisplayName.__proto__ || Object.getPrototypeOf(RouteComponentWithDisplayName)).apply(this, arguments));
+                  return _possibleConstructorReturn(this, (RouteComponent.__proto__ || Object.getPrototypeOf(RouteComponent)).apply(this, arguments));
                 }
 
-                return RouteComponentWithDisplayName;
-              }(RouteComponent);
+                _createClass(RouteComponent, [{
+                  key: "render",
+                  value: function render() {
+                    return _react2.default.createElement(
+                      ContextProvider,
+                      { history: history, route: route },
+                      _react2.default.createElement(componentMetadata.Component, props)
+                    );
+                  }
+                }]);
 
-              RouteComponentWithDisplayName.displayName = "RouteComponent(" + componentMetadata.displayName + ")";
-              return _context.abrupt("return", _react2.default.createElement(
-                RouteComponentWithDisplayName,
-                { route: route, history: history },
-                _react2.default.createElement(componentMetadata.component, initialProps)
-              ));
+                return RouteComponent;
+              }(_react2.default.Component), _class.displayName = "RouteComponent(" + componentMetadata.displayName + ")", _temp));
 
-            case 12:
+            case 10:
             case "end":
@@ -94,24 +123,10 @@ return _context.stop();
 
-    return function wrappedLoadComponent(_x, _x2) {
+    function loadComponent(_x, _x2) {
       return _ref.apply(this, arguments);
-    };
+    }
+
+    return loadComponent;
   }();
-
-  var path = options.path,
-      loadComponent = options.loadComponent;
-
-  var _getPathRegexp = getPathRegexp(path),
-      re = _getPathRegexp.re,
-      keys = _getPathRegexp.keys;
-
-  return _extends({}, options, { re: re, keys: keys, loadComponent: wrappedLoadComponent });
 }
 
-// `routes` is a convinience mapper to `route` for an array of route
-// configuration objects.
-
-function routes(routes) {
-  return routes.map(route);
-}
-
 // convinience function for building a regexp for a given path.
@@ -131,3 +146,3 @@
   return {
-    component: _component,
+    Component: _component,
     displayName: _component.displayName || _component.name,
@@ -138,15 +153,15 @@ getInitialProps: _component.getInitialProps
 
-// `RouteComponent` is a wrapper React component that simply puts the
+// `ContextProvider` is a wrapper React component that simply puts the
 // route object and the history object on to context.
 
-var RouteComponent = function (_React$Component) {
-  _inherits(RouteComponent, _React$Component);
+var ContextProvider = function (_React$Component2) {
+  _inherits(ContextProvider, _React$Component2);
 
-  function RouteComponent() {
-    _classCallCheck(this, RouteComponent);
+  function ContextProvider() {
+    _classCallCheck(this, ContextProvider);
 
-    return _possibleConstructorReturn(this, (RouteComponent.__proto__ || Object.getPrototypeOf(RouteComponent)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ContextProvider.__proto__ || Object.getPrototypeOf(ContextProvider)).apply(this, arguments));
   }
 
-  _createClass(RouteComponent, [{
+  _createClass(ContextProvider, [{
     key: "render",
@@ -168,13 +183,13 @@ value: function render() {
 
-  return RouteComponent;
+  return ContextProvider;
 }(_react2.default.Component);
 
-RouteComponent.propTypes = {
+ContextProvider.propTypes = {
   route: _react2.default.PropTypes.object.isRequired,
   history: _react2.default.PropTypes.object.isRequired,
-  children: _react2.default.PropTypes.node.isRequired
+  children: _react2.default.PropTypes.element.isRequired
 };
-RouteComponent.childContextTypes = {
+ContextProvider.childContextTypes = {
   route: _react2.default.PropTypes.object,
   history: _react2.default.PropTypes.object
 };

package.json

 {
   "name": "@ryancole/router",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A simple router for react.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

readme.md

@@ -11,6 +11,8 @@ A simple router for React.
 
-The main concept of the router is that routes are an up-front, static resource. The router operates on an array of route objects. You define your routes up front.
+The main concept of the router is that routes are an up-front, static resource. The router operates on an array of route objects. You define your routes up front. You can take the requested URL and match it against your routes and get the exact route that should be rendered. Likewise, you can compile route URLs using named routes and route parameters.
 
-A route is intended to be thought of as a complete "page" or "view" to be rendered by React. The intention is that, when the URL pathname changes and this router finds the appropriate React component to render, the component being rendered is going to make up your complete application view so that you can simply call `ReactDOM.render` on the returned component. Nested views and such can be achieved by using "template" components that compose your boilerplate components and render your route component into it, etc.
+A route is intended to be thought of as a complete "page" or "view" to be rendered by React. The intention is that, when the URL pathname changes and this router finds the appropriate React component to render, the component being rendered is going to make up your complete application view so that you can simply call `ReactDOM.render` on the returned component.
 
+There is no route nesting, like react-router v3, and there are no floating route components, like react-router v4. Because of this, there is a clear place to perform code splitting and asynchronous loading of split bundles.
+
 ```js
@@ -29,2 +31,3 @@ import {routes} from "@ryancole/router";
   {
+    name: "team",
     path: "/team/:slug",
@@ -43,3 +46,3 @@ loadComponent: () => System.import("../client/page/Team")
 
-A route object must specify a `loadComponent` function that returns the React component to be rendered when this route is matched. `loadComponent` must return a then-able promise-like which resolves to the loaded React component.
+A route object must specify a `loadComponent` function that returns the React component to be rendered when this route is matched. `loadComponent` should return a `Promise` that resolves to the loaded React component.
 
@@ -58,4 +61,4 @@ ```js
   if (route) {
-    route.loadComponent(route, history).then(component => {
-      ReactDOM.render(component, destination);
+    route.loadComponent(route, history).then(Component => {
+      ReactDOM.render(<Component />, destination);
     });
@@ -69,3 +72,3 @@ }
 
-The router will also check to see if the route's component has any data concerns and will fetch the necessary data. A React component can implement a static function called `getInitialProps` if it needs to have data fetched prior to being rendered. This `getInitialProps` function will be called on both browser and server and will provide whatever is returned as props to the route's component.
+The router will also check to see if the route's component has any data concerns and will fetch the necessary data. A React component can implement a static function called `getInitialProps` if it needs to have data fetched prior to being rendered. If implemented, the `getInitialProps` return value object will be provided to the route component as props.
 
@@ -80,2 +83,3 @@ ```js
 }
+
 Team.getInitialProps = async ({slug}) => {
@@ -82,0 +86,0 @@ const team = await Teams.getBySlug(slug);

src/route.js

@@ -9,21 +9,6 @@ import React from "react";
 export function route(options) {
-  const {path, loadComponent} = options;
+  const {path} = options;
   const {re, keys} = getPathRegexp(path);
-  return { ...options, re, keys, loadComponent: wrappedLoadComponent };
-  async function wrappedLoadComponent(route, history) {
-    let initialProps = {};
-    const loadedComponent = await loadComponent();
-    const componentMetadata = componentToMetadata(loadedComponent);
-    if (componentMetadata.getInitialProps) {
-      initialProps = await componentMetadata.getInitialProps(route.segments);
-    }
-    class RouteComponentWithDisplayName extends RouteComponent {
-      static displayName = `RouteComponent(${componentMetadata.displayName})`;
-    }
-    return (
-      <RouteComponentWithDisplayName route={route} history={history}>
-        {React.createElement(componentMetadata.component, initialProps)}
-      </RouteComponentWithDisplayName>
-    );
-  }
+  const loadComponent = getLoadComponent(options);
+  return { ...options, re, keys, loadComponent };
 }
@@ -38,2 +23,28 @@
 
+// `getLoadComponent` returns a higher order component that renders
+// the route's component itself but provides to it access to the
+// route data, and the history object, via react context.
+
+function getLoadComponent(options) {
+  const userLoadComponent = options.loadComponent;
+  return async function loadComponent(route, history) {
+    let props = {};
+    const loadedComponent = await userLoadComponent();
+    const componentMetadata = componentToMetadata(loadedComponent);
+    if (componentMetadata.getInitialProps) {
+      props = await componentMetadata.getInitialProps(route.segments);
+    }
+    return class RouteComponent extends React.Component {
+      static displayName = `RouteComponent(${componentMetadata.displayName})`;
+      render() {
+        return (
+          <ContextProvider history={history} route={route}>
+            <componentMetadata.Component {...props} />
+          </ContextProvider>
+        );
+      }
+    }
+  };
+}
+
 // convinience function for building a regexp for a given path.
@@ -53,3 +64,3 @@
   return {
-    component: _component,
+    Component: _component,
     displayName: _component.displayName || _component.name,
@@ -60,10 +71,10 @@ getInitialProps: _component.getInitialProps
 
-// `RouteComponent` is a wrapper React component that simply puts the
+// `ContextProvider` is a wrapper React component that simply puts the
 // route object and the history object on to context.
 
-class RouteComponent extends React.Component {
+class ContextProvider extends React.Component {
   static propTypes = {
     route: React.PropTypes.object.isRequired,
     history: React.PropTypes.object.isRequired,
-    children: React.PropTypes.node.isRequired
+    children: React.PropTypes.element.isRequired
   }
@@ -70,0 +81,0 @@ static childContextTypes = {

No alert changes

Improved metrics

Total package byte prevSize

23724

increased by3.89%

Lines of code

459

increased by4.79%

Number of lines in readme file

84

increased by5%

No dependency changes