{"id":20762817,"url":"https://github.com/astrocoders/epitath","last_synced_at":"2025-04-05T14:05:14.577Z","repository":{"id":57099403,"uuid":"147451757","full_name":"Astrocoders/epitath","owner":"Astrocoders","description":"Compose render props imperatively with async/await/CPS kinda sugar","archived":false,"fork":false,"pushed_at":"2019-02-13T19:49:50.000Z","size":385,"stargazers_count":390,"open_issues_count":7,"forks_count":7,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T13:08:40.490Z","etag":null,"topics":["cps","react","render-props"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Astrocoders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-05T03:02:01.000Z","updated_at":"2025-02-11T15:50:43.000Z","dependencies_parsed_at":"2022-08-20T16:51:11.484Z","dependency_job_id":null,"html_url":"https://github.com/Astrocoders/epitath","commit_stats":null,"previous_names":["astrocoders/regenerator"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Fepitath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Fepitath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Fepitath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Fepitath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Astrocoders","download_url":"https://codeload.github.com/Astrocoders/epitath/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345850,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cps","react","render-props"],"created_at":"2024-11-17T10:39:17.866Z","updated_at":"2025-04-05T14:05:14.550Z","avatar_url":"https://github.com/Astrocoders.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# epita✞h\n[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors)\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003eIn memoriam HOCs and Render Props\u003c/i\u003e\n\u003c/p\u003e\n\n### [Read the article](https://medium.com/p/9f76dd911f9e)\n\n### Also, we think you may want to take a look on [React Hooks API now](https://reactjs.org/docs/hooks-intro.html)\n\n```js\nimport epitath from 'epitath'\n...\n\nconst App = epitath(function*() {\n  const { loading, data } = yield \u003cQuery /\u003e\n  const { time } = yield \u003cTime /\u003e\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      {loading ? (\n        \u003ch1\u003eLoading\u003c/h1\u003e\n      ) : (\n        \u003cdiv\u003e\n          \u003ch1\u003e{`Hello, ${data.user.name}`}\u003c/h1\u003e\n          \u003ch2\u003eThe time is {time.toLocaleString()}!\u003c/h2\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  )\n})\n```\n\n[![npm package][npm-badge]][npm]\n\nCompose HOCs imperatively like async/await. No callback hell!\n\n[Live demo](http://astrocoders.com/epitath)\n[Source of demo](https://github.com/Astrocoders/epitath/blob/master/demo/src/index.js#L42)\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/npm-package\n\n## Install\n\n```\nyarn add epitath\n```\nor\n```\nnpm install --save epitath\n```\n\n## Why\nRender 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.\n\n```jsx\n\u003cQuery\u003e\n  {({ data }) =\u003e\n    \u003cMutation\u003e\n      {({ mutate, result })=\u003e\n        \u003cForm\u003e\n        etc\n        \u003c/Form\u003e\n      }\n    \u003c/Mutation\u003e\n  }\n\u003c/Query\u003e\n```\n\n## How\n\nWait, 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?\n\nAnd that's exactly what epitath is, it just takes care of the callbacks for you.\nThe whole code is this:\n\n```js\nimport React from 'react'\nimport immutagen from 'immutagen'\n\nexport default component =\u003e {\n  const generator = immutagen(component)\n\n  const compose = context =\u003e {\n    const value = context.value\n    return context.next\n      ? React.cloneElement(value, null, values =\u003e compose(context.next(values)))\n      : value\n  }\n\n  function Epitath(props) {\n    return compose(generator(props))\n  }\n\n  Epitath.displayName = `EpitathContainer(${component.displayName || 'anonymous'})`\n\n  return Epitath\n}\n```\n\n**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:\n\n```js\nconst MutationWrapper = ({ children, ...props }) =\u003e\n  \u003cMutation {...props}\u003e{(mutate, result) =\u003e children({ mutate, result })}\u003c/Mutation\u003e\n\nconst { mutate, result } = yield \u003cMutationWrapper /\u003e\n```\n\n## How is this different from Suspense?\n\nSuspense only allows you to evalulate a promise once. It does not allow you to trigger a re-render for a state update.\nAnd with epitath you can even use Formik, Apollo optimistic, React Powerplug and Smalldots tooling and etc!\n\n## BTW it's epitaph not \"epitath\"\n\n\"These Astrocoders dudes simply don't know how to spell words in English!\" \n\nActually it was intended, for 2 reasons:\n\n1. We wanted to put a cross as icon of the package\n2. Epitaph is already taken in NPM\n\n\n## Contributing\n\n### Steps to get it running\n\nInstall the deps\n```\nyarn install\n```\n\nBoot the demo\n```\nyarn start\n```\n\n### Things missing that we would like a little help\n\n- [ ] Tests\n- [ ] TypeScript support\n\n### Acknowledgements \n\nThanks @jamiebuilds for the [suggestions](https://github.com/Astrocoders/epitath/issues/1) on how simplifying the API\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/952783?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJamie\u003c/b\u003e\u003c/sub\u003e](https://jamie.build/)\u003cbr /\u003e[🤔](#ideas-jamiebuilds \"Ideas, Planning, \u0026 Feedback\") [💻](https://github.com/Astrocoders/epitath/commits?author=jamiebuilds \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/285899?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEli Perelman\u003c/b\u003e\u003c/sub\u003e](http://eliperelman.com)\u003cbr /\u003e[🤔](#ideas-eliperelman \"Ideas, Planning, \u0026 Feedback\") [💻](https://github.com/Astrocoders/epitath/commits?author=eliperelman \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1283200?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGabriel Rubens\u003c/b\u003e\u003c/sub\u003e](https://medium.com/@_gabrielrubens)\u003cbr /\u003e[🤔](#ideas-grsabreu \"Ideas, Planning, \u0026 Feedback\") [💻](https://github.com/Astrocoders/epitath/commits?author=grsabreu \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/17956325?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMedson Oliveira\u003c/b\u003e\u003c/sub\u003e](https://github.com/medson10)\u003cbr /\u003e[🤔](#ideas-medson10 \"Ideas, Planning, \u0026 Feedback\") [💻](https://github.com/Astrocoders/epitath/commits?author=medson10 \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/16995184?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGeorge Lima\u003c/b\u003e\u003c/sub\u003e](https://github.com/georgelima)\u003cbr /\u003e[🤔](#ideas-georgelima \"Ideas, Planning, \u0026 Feedback\") [💻](https://github.com/Astrocoders/epitath/commits?author=georgelima \"Code\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8146889?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEliabe Júnior\u003c/b\u003e\u003c/sub\u003e](http://eliabejr.com)\u003cbr /\u003e[💻](https://github.com/Astrocoders/epitath/commits?author=eliabejr \"Code\") [🎨](#design-eliabejr \"Design\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/4806269?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGuilherme Decampo\u003c/b\u003e\u003c/sub\u003e](https://astrocoders.com)\u003cbr /\u003e[🤔](#ideas-guilhermedecampo \"Ideas, Planning, \u0026 Feedback\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/8618687?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egtkatakura\u003c/b\u003e\u003c/sub\u003e](https://github.com/gtkatakura)\u003cbr /\u003e[🤔](#ideas-gtkatakura \"Ideas, Planning, \u0026 Feedback\") [💬](#question-gtkatakura \"Answering Questions\") [💡](#example-gtkatakura \"Examples\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/4899432?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eErjan Kalybek\u003c/b\u003e\u003c/sub\u003e](https://mssg.me/emx)\u003cbr /\u003e[📖](https://github.com/Astrocoders/epitath/commits?author=erjanmx \"Documentation\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/2148168?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJack Hanford\u003c/b\u003e\u003c/sub\u003e](http://jackhanford.com/)\u003cbr /\u003e[📖](https://github.com/Astrocoders/epitath/commits?author=hanford \"Documentation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3068563?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHaz\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/diegohaz)\u003cbr /\u003e[📖](https://github.com/Astrocoders/epitath/commits?author=diegohaz \"Documentation\") |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastrocoders%2Fepitath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fastrocoders%2Fepitath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastrocoders%2Fepitath/lists"}