Nifty Pony Merchandise

    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

    2

    Version

    2.0.2

    License

    ISC

    Last publish

    Collaborators

    • threepointone