falcro
v2.0.2
Published
react + falcor
Downloads
10
Readme
falcro
[work in progress]
falcor as a component
npm install react falcor falcro --save
// instantiate a model, matching paths to data sources
let model = new Model({
cache: {...},
source: new Router([...])
});
// include the Root component somewhere up in your component hierarchy
function App(){
return <Root model={model}>
<User name='threepointone' />
</Root>;
}
// and then fetch anywhere in your app
function User({name}){
return <Get query={`users.${name}['avatar_url', 'id']`}>{
({users, error, loading}}) => loading ?
<div>loading...</div> :
<img src={users[name].avatar_url} alt={users[name].id} />
}</Get>;
}
// all the falcor goodies for free - batching, caching, .set/.call, etc
//BONUS - server side async rendering
renderToString(<App/>, model).then(html => res.send(html))
Model
(see falcor.Model)
Root
- model - instance of Model
Get
- query - falcor model query. accepts falcor-path-syntax
- children - a function, that will receive, on render -
- ...value - ie, the result of the query
- error - if errored
- loading - true if a request is in flight
- $ - actions on the model instance - setValue, call, and refresh (more to come)
renderToString(element, model)
- returns a promise, which resolves to the html
examples
use react-heatpack to run examples from /examples
directory
todo
so much
- refreshing only the components that change
- streaming results
- redux/router scenarios (reduce/rewind/replay/etc)
- shallow render testing
- idents
- derefs
- etc etc