[WIP] Fluxible Router

Author: Michael Ridgway

Gruntfile.js

@@ -1,3 +1,5 @@
+var webpack = require('webpack');
+
 module.exports = function (grunt) {
     grunt.initConfig({
         clean: ['./' + grunt.option('taskName') + '/build'],
@@ -44,9 +46,14 @@ module.exports = function (grunt) {
                 module: {
                     loaders: [
                         { test: /\.css$/, loader: 'style!css' },
-                        { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
+                        { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }
                     ]
                 },
+                plugins: [
+                    // Protects against multiple React installs when npm linking
+                    new webpack.NormalModuleReplacementPlugin(/^react?$/, require.resolve('react')),
+                    new webpack.NormalModuleReplacementPlugin(/^react(\/addons)?$/, require.resolve('react/addons'))
+                ],
                 stats: {
                     colors: true
                 },

fluxible-router/app.js

@@ -5,16 +5,12 @@
 'use strict';
 var React = require('react');
 var Fluxible = require('fluxible');
-var routrPlugin = require('fluxible-plugin-routr');
 
 var app = new Fluxible({
     component: React.createFactory(require('./components/Application.jsx'))
 });
 
-app.plug(routrPlugin({
-    routes: require('./configs/routes')
-}));
-
+app.registerStore(require('./stores/RouteStore'));
 app.registerStore(require('./stores/ApplicationStore'));
 app.registerStore(require('./stores/TimeStore'));
 app.registerStore(require('./stores/PageStore'));

fluxible-router/components/Application.jsx

@@ -10,8 +10,8 @@ var About = require('./About.jsx');
 var Page = require('./Page.jsx');
 var Timestamp = require('./Timestamp.jsx');
 var ApplicationStore = require('../stores/ApplicationStore');
-var RouterMixin = require('flux-router-component').RouterMixin;
 var FluxibleMixin = require('fluxible').FluxibleMixin;
+var RouterMixin = require('fluxible-router').RouterMixin;
 
 var Application = React.createClass({
     mixins: [RouterMixin, FluxibleMixin],
@@ -25,36 +25,23 @@ var Application = React.createClass({
         var state = this.getStore(ApplicationStore).getState();
         this.setState(state);
     },
-    render: function () {
-        var output = '';
-        //choose the right page based on the route
-        switch (this.state.currentPageName) {
-            case 'home':
-                output = <Home/>;
-                break;
-            case 'about':
-                output = <About/>;
-                break;
-            case 'page':
-                output = <Page context={this.props.context}/>;
-                break;
+    componentDidUpdate: function(prevProps, prevState) {
+        var newState = this.state;
+        if (newState.pageTitle === prevState.pageTitle) {
+            return;
         }
+        document.title = newState.pageTitle;
+    },
+    render: function () {
+        var Handler = this.state.currentRoute.get('handler');
         //render content
         return (
             <div>
-                <Nav selected={this.state.currentPageName} links={this.state.pages} />
-                {output}
+                <Nav />
+                <Handler />
                 <Timestamp />
             </div>
         );
-    },
-
-    componentDidUpdate: function(prevProps, prevState) {
-        var newState = this.state;
-        if (newState.pageTitle === prevState.pageTitle) {
-            return;
-        }
-        document.title = newState.pageTitle;
     }
 });
 

fluxible-router/components/Nav.jsx

@@ -4,40 +4,14 @@
  */
 'use strict';
 var React = require('react');
-var NavLink = require('flux-router-component').NavLink;
+var NavLink = require('fluxible-router').NavLink;
 
 var Nav = React.createClass({
-    getDefaultProps: function () {
-        return {
-            selected: 'home',
-            links: {}
-        };
-    },
     render: function() {
-        var selected = this.props.selected,
-            links = this.props.links,
-            context = this.props.context,
-            linkHTML = Object.keys(links).map(function (name) {
-                var className = '',
-                    link = links[name];
-
-                //print only link with label
-                if(link.label) {
-                    if (selected === name) {
-                        className = 'pure-menu-selected';
-                    }
-
-                    return (
-                        <li className={className} key={link.path}>
-                            <NavLink routeName={link.page}>{link.label}</NavLink>
-                        </li>
-                    );
-                }
-
-            });
         return (
             <ul className="pure-menu pure-menu-open pure-menu-horizontal">
-                {linkHTML}
+                <li><NavLink routeName="home" activeStyle={{backgroundColor: '#ccc'}}>Home</NavLink></li>
+                <li><NavLink routeName="about" activeStyle={{backgroundColor: '#ccc'}}>About</NavLink></li>
             </ul>
         );
     }

fluxible-router/configs/routes.js

@@ -2,7 +2,7 @@ module.exports = {
     home: {
         path: '/',
         method: 'get',
-        page: 'home',
+        handler: require('../components/Home.jsx'),
         label: 'Home',
         action: function (context, payload, done) {
             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: 'Home | flux-examples | routing' });
@@ -12,7 +12,7 @@ module.exports = {
     about: {
         path: '/about',
         method: 'get',
-        page: 'about',
+        handler: require('../components/About.jsx'),
         label: 'About',
         action: function (context, payload, done) {
             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: 'About | flux-examples | routing' });
@@ -22,7 +22,7 @@ module.exports = {
     dynamicpage: {
         path: '/page/:id',
         method: 'get',
-        page: 'page',
+        handler: require('../components/Page.jsx'),
         action: function (context, payload, done) {
             context.dispatch('LOAD_PAGE', { id: payload.params.id });
             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: payload.params.id + ' [Dynamic Page] | flux-examples | routing' });

fluxible-router/server.js

@@ -7,7 +7,7 @@ require('babel/register');
 var express = require('express');
 var favicon = require('serve-favicon');
 var serialize = require('serialize-javascript');
-var navigateAction = require('flux-router-component').navigateAction;
+var navigateAction = require('fluxible-router').navigateAction;
 var debug = require('debug')('Example');
 var React = require('react');
 var app = require('./app');

fluxible-router/stores/ApplicationStore.js

@@ -4,61 +4,31 @@
  */
 'use strict';
 var createStore = require('fluxible/addons').createStore;
-var routesConfig= require('../configs/routes')
 
 var ApplicationStore = createStore({
     storeName: 'ApplicationStore',
     handlers: {
-        'CHANGE_ROUTE_SUCCESS' : 'handleNavigate',
         'UPDATE_PAGE_TITLE'    : 'updatePageTitle'
     },
     initialize: function () {
-        this.currentPageName = null;
-        this.currentPage = null;
-        this.currentRoute = null;
-        this.pages = routesConfig;
         this.pageTitle = '';
     },
-    handleNavigate: function (route) {
-        if (this.currentRoute && (this.currentRoute.url === route.url)) {
-            return;
-        }
-
-        var pageName = route.config.page;
-        var page = this.pages[pageName];
-
-        this.currentPageName = pageName;
-        this.currentPage = page;
-        this.currentRoute = route;
+    updatePageTitle: function (payload) {
+        this.pageTitle = payload.pageTitle;
         this.emitChange();
     },
-    updatePageTitle: function (title) {
-        this.pageTitle = title.pageTitle;
-        this.emitChange();
-    },
-    getCurrentPageName: function () {
-        return this.currentPageName;
-    },
     getPageTitle: function () {
         return this.pageTitle;
     },
     getState: function () {
         return {
-            currentPageName: this.currentPageName,
-            currentPage: this.currentPage,
-            pages: this.pages,
-            route: this.currentRoute,
             pageTitle: this.pageTitle
         };
     },
     dehydrate: function () {
         return this.getState();
     },
     rehydrate: function (state) {
-        this.currentPageName = state.currentPageName;
-        this.currentPage = state.currentPage;
-        this.pages = state.pages;
-        this.currentRoute = state.route;
         this.pageTitle = state.pageTitle;
     }
 });

fluxible-router/stores/RouteStore.js

@@ -0,0 +1,4 @@
+var RouteStore = require('fluxible-router').RouteStore;
+var routes = require('../configs/routes');
+
+module.exports = RouteStore.withStaticRoutes(routes);

fluxible-router/stores/TimeStore.js

@@ -16,7 +16,7 @@ var TimeStore = createStore({
         this.emitChange();
     },
     handlers: {
-        'CHANGE_ROUTE_START': 'handleTimeChange',
+        'NAVIGATE_START': 'handleTimeChange',
         'UPDATE_TIME': 'handleTimeChange'
     },
     getState: function () {