omniscient-tools/README.md

A few tools to use with omniscient.js

Omniscient Tools
================

Tools to make working with omniscient more fun.


JSX Components
--------------

Omniscient makes working with jsx harder than it needs to be. Here's how you have to do it with raw omniscient:

```
var HelloWorld = component(function({}) {
  return <div>Hello</div> 
}).jsx
```

We export a component function that automatically adds the `.jsx`

```
var {component} = require('omniscient-tools')
var HelloWorld = component(function({}) {
  return <div>Hello</div> 
})
```



React Router Page Loads
-----------------------

Motivation: we need a way to allow a top-level component to interact with react router. It needs to be able to do the following:

- select a cursor for the page
- select a component to render
- load data or manipulate the state when the url changes

Router example:

```
var React = window.React = require('react');
var Router = require('react-router');
var {Route, Redirect, NotFoundRoute} = Router;

var {loadHandlers} = require('omniscient-tools')

var routes = [
  <Route name="index" path="/" handler={Main}>
    ...
    <Route name="proposal-edit" path="proposals/:id/edit" handler={CreateProposal}/>
  </Route>,
];

var Handler = null;
Router.run(routes, (h, state) => {
  Handler = h

  loadHandlers(state).then(function(data) {
    render()
  })
});

function render() {
  React.render(<Handler/>, document.body);
}

ProposalStore.state.on('swap', function() {
  render()
})
```

Handler Example: specify a load function and a render function

```
function loadProposal(params) {
  return Store.loaded
  .then(function() {
    var id = params.id
    var editing = Store.getProposal(id)
    return Store.state.cursor('editing').update(() => editing)
  })
}

module.exports = handler(loadProposal, function() {
  console.log("render", Store.state.cursor('editing').toJS())
  return <EditForm editing={Store.state.cursor('editing')}/>
})

var EditForm = component(function({editing}) {
  return <div>{editing.get('name')}</div>
})
```