xander - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

lib/index.js

		'use strict';

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _reactDom = require('react-dom');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var router = require('rootr');
		@@ -35,7 +43,10 @@

		// Create a react component connected to container
		// returns store and container.
		return connect(Container);
		};

		xander.boot = function (options) {
		var App = xander(options);
		(0, _reactDom.render)(_react2.default.createElement(App, null), options.rootEl \|\| document.body);
		};

		// Export static functions
		@@ -42,0 +53,0 @@ xander.Link = require('./link');

package.json

		{
		"name": "xander",
		"version": "0.8.0",
		"version": "0.8.1",
		"description": "Single page app framework",
		@@ -5,0 +5,0 @@ "repository": "git+https://github.com/formula/xander.git",

README.md

		@@ -7,6 +7,10 @@ # xander

		Framework for React Single Page Apps. The framework is a complete environment including routing and state management.
		Framework for React Single Page Apps.

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

		This project was born out of a desire to build
		an alternative to popular React-Router and Redux,
		keeping `router` and `location` in stores.

		## Usage
		@@ -19,2 +23,3 @@
		```
		## Examples
		### Quick start
		@@ -25,7 +30,8 @@
		```js
		import React from 'react';
		import ReactDOM from 'react-dom';
		import app from 'xander';
		import {boot} from 'xander';

		let App = app({
		// 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: [{
		@@ -40,30 +46,4 @@ path: '/',
		})

		ReactDOM.render(<App />, document.body)
		```

		### Router

		```js
		var { router } = require('xander')
		var { loadRoutes } = require('xander')

		loadRoutes({
		routes: [{
		path: '/',
		load: () => System.import('./HomePage')
		}, {
		path: '*',
		component: (props) => <div>404</div>
		}])
		```
		### Container Component

		A component to render the current route content.

		```js
		import {Container} from 'xander'
		render( <Container router={...} location={...} />, document.all.root )
		```

		### Link Component
		@@ -77,6 +57,11 @@
		<Link type="button" to="/buckets" />
		<Link type="button" to="/buckets" type="button" /> // render button tag instead of a
		```

		### Open path programmically
		### Router

		A minimalist routers, supports history API.

		#### Location

		Manage location with the easy to use API.
		@@ -93,3 +78,3 @@

		### Replace routes
		#### Load Routes

		@@ -105,8 +90,34 @@ Routes and related location information stored as routes.

		### Manage state with stores

		Create custom stores with reducer function.
		See [rootr](https://github.com/formula/rootr) for more examples.

		### State management

		Use `createStore` to create immutable stores.

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

		For more examples see [fluxury](https://github.com/formula/fluxury).

		#### connect ####

		A higher order function to connect React component

		```js
		import {connect} from 'xander'
		let Connected = connect(store, component)`
		ReactDOM.render(<Connected />)
		```

		#### Container ####

		A component to render the current route content.

		```js
		import {Container} from 'xander'
		render( <Container router={...} location={...} />, document.all.root )
		```

xander - npm Package Compare versions

Improved metrics