Natural Pacifist Manatees

    epitath

    1.0.0-beta.2 • Public • Published

    epita✞h

    All Contributors

    In memoriam HOCs and Render Props

    Read the article

    import epitath from 'epitath'
    ...
     
    const App = epitath(function*() {
      const { loading, data } = yield <Query />
      const { time } = yield <Time />
     
      return (
        <div className="App">
          {loading ? (
            <h1>Loading</h1>
          ) : (
            <div>
              <h1>{`Hello, ${data.user.name}`}</h1>
              <h2>The time is {time.toLocaleString()}!</h2>
            </div>
          )}
        </div>
      )
    })

    npm package

    Compose HOCs imperatively like async/await. No callback hell!

    Live demo Source of demo

    Install

    yarn add epitath
    

    or

    npm install --save epitath
    

    Why

    Render props are amazing for providing more functionality but once you need to stack a bunch of them you get what recalls a painful callback hell.

    <Query>
      {({ data }) =>
        <Mutation>
          {({ mutate, result })=>
            <Form>
            etc
            </Form>
          }
        </Mutation>
      }
    </Query>

    How

    Wait, we just mentioned "callback hell". So what if we had a function that would allow us to have a kind of sugar for continuation-passing-style à la async/await?

    And that's exactly what epitath is, it just takes care of the callbacks for you. The whole code is this:

    import React from 'react'
    import immutagen from 'immutagen'
     
    export default component => {
      const generator = immutagen(component)
     
      const compose = context => {
        const value = context.value
        return context.next
          ? React.cloneElement(value, null, values => compose(context.next(values)))
          : value
      }
     
      function Epitath(props) {
        return compose(generator(props))
      }
     
      Epitath.displayName = `EpitathContainer(${component.displayName || 'anonymous'})`
     
      return Epitath
    }

    Note that epitath will only yield the first argument of the render function. In order to consume multiple arguments, we recommend creating a wrapper component:

    const MutationWrapper = ({ children, ...props }) =>
      <Mutation {...props}>{(mutate, result) => children({ mutate, result })}</Mutation>
     
    const { mutate, result } = yield <MutationWrapper />

    How is this different from Suspense?

    Suspense only allows you to evalulate a promise once. It does not allow you to trigger a re-render for a state update. And with epitath you can even use Formik, Apollo optimistic, React Powerplug and Smalldots tooling and etc!

    BTW it's epitaph not "epitath"

    "These Astrocoders dudes simply don't know how to spell words in English!"

    Actually it was intended, for 2 reasons:

    1. We wanted to put a cross as icon of the package
    2. Epitaph is already taken in NPM

    Contributing

    Steps to get it running

    Install the deps

    yarn install
    

    Boot the demo

    yarn start
    

    Things missing that we would like a little help

    • Tests
    • TypeScript support

    Acknowledgements

    Thanks @jamiebuilds for the suggestions on how simplifying the API

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Jamie

    🤔 💻

    Eli Perelman

    🤔 💻

    Gabriel Rubens

    🤔 💻

    Medson Oliveira

    🤔 💻

    George Lima

    🤔 💻

    Eliabe Júnior

    💻 🎨

    Guilherme Decampo

    🤔

    gtkatakura

    🤔 💬 💡

    Erjan Kalybek

    📖

    Jack Hanford

    📖

    Haz

    📖

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i epitath

    DownloadsWeekly Downloads

    207

    Version

    1.0.0-beta.2

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • gabrielrubens