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>
})

v0.1.4 - Mon, 23 Feb 2015 18:03:24 GMT

• 4cc611c [fixed] add displayName to handler component