Niche Portobello Mushroom
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

falcro

2.0.2 • Public • Published

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

Keywords

install

npm i falcro

Downloadsweekly downloads

5

version

2.0.2

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability