An experimental router for browser side JS
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.flowconfig
.gitignore
LICENSE
README.md
gulpfile.js
package.json

README.md

switchboard

devDependency Status

An experimental router for browser side JS

API Goal

First, create a new instance of the Switchboard:

// app.js
import Switchboard from 'switchboard';

let app = new Switchboard();
let {route, Page, DependsOn} = app;
export default {
    route,
    Page,
    DependsOn
};

Then, define your pages:

// UserProfile.jsx
import React, {Component} from 'react';

import {Page, DependsOn, PageContainer} from '../app';
import {UserView} from '../views/UserView';

@Page('user-profile', '/user/:userId')
@DependsOn({
    userData: getUserData // A dependency function
    someConstData: [1, 2, 3.14]
})
class UserProfile extends Component {

    render() {
        let {userData, someConstData} = this.route.dependencies;

        let {userId} = this.route.params;

        return (
            <UserView userId={userId} profile={userData}>
            </UserView>
        );

    }
}

/*
  Dependency functions are invoked with positional
  parameters same as the route URL.
  This function returns a promise which Switchboard resolves
  before instantiating the component
*/
function userData(userId) {
    return fetch(`/users/${userId}.json`);
}

...And ofcourse, the container:

import React, {Component} from 'react';
import {PageContainer} from '../app';

@PageContainer
class AppView extends Component {
    render() {
        return (
            <div className="page-container">
                {this.activePage}
            </div>
        );
    }
}

License: MIT