xander

xander

Overview

Framework for browser apps with uncompromising configuration.

Usage

Installation

npm install --save xander

Examples

Quick start

A minimal app with home and 404 page.

import {boot, Rule, Eval} from 'xander';

// Calling constructor function return React component.
boot({
  debug: false, // optional, enables logging actions to console.
  rootEl: document.body, // optional, determine root node for application.
  routes: [{
    path: '/',
    component: (props) => <div>Hello, World.</div> 
  }, {
    path: '/test_rules',
    component: (props) => (
      <div>
        <Rule exp="A + B" values={{ A: 2, B: 4 }} />
        <Eval exp="A + B" values={{ A: 2, B: 4 }} />
        <Rule
          exp={`AND(status = true, country = "Denmark")`}
          values={{ valid: true, country: "Denmark" }}
        />
      </div>
    )
  }, {
    path: '*',
    component: (props) => <div>404</div>
  }])

})

webpack

Webpack is recommended to bundle your projects. The minimal example provides a simple boilerplate setup. For larger projects, look at the async example which utilizes webpack's code splitting to scale your app.

Link Component

A link component to hyperlink your app without annoying page refreshes.

import {Link} from 'xander'
<Link to="/buckets" />
<Link type="button" to="/buckets" />
<Link type="button" to="/buckets" type="button" /> // render button tag instead of a

Router

A minimalist routers, supports history API.

import {router} from 'xander'
router.open('/buckets/1')

Use redirect to change the URL without adding an entry to the history state.

router.redirect('/buckets')

Load Routes

Load routes and related configuration.

loadRoutes([{
  path: '/',
  load: loadContent( System.import('./pages/home') )
}])

State management

Use createStore to create immutable stores.

import {createStore} from 'xander'
createStore(name, reducerOrSpec, actionsAndQueries)

For more examples see fluxury.