{"id":20284168,"url":"https://github.com/clebert/batis","last_synced_at":"2025-04-11T08:24:07.801Z","repository":{"id":55647884,"uuid":"259011235","full_name":"clebert/batis","owner":"clebert","description":"General reactive JavaScript programming using the idea of React Hooks.","archived":false,"fork":false,"pushed_at":"2023-03-26T22:48:01.000Z","size":1639,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T14:05:12.712Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/clebert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-26T11:17:44.000Z","updated_at":"2024-11-05T08:44:16.000Z","dependencies_parsed_at":"2024-10-24T18:10:59.574Z","dependency_job_id":null,"html_url":"https://github.com/clebert/batis","commit_stats":{"total_commits":135,"total_committers":2,"mean_commits":67.5,"dds":0.03703703703703709,"last_synced_commit":"ca84b748ccabd3eeb8761b4ea68fe131b4b62639"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clebert%2Fbatis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clebert%2Fbatis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clebert%2Fbatis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clebert%2Fbatis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clebert","download_url":"https://codeload.github.com/clebert/batis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361059,"owners_count":21090808,"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":[],"created_at":"2024-11-14T14:18:34.224Z","updated_at":"2025-04-11T08:24:07.772Z","avatar_url":"https://github.com/clebert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# batis\n\n\u003e General reactive JavaScript programming using the idea of\n\u003e [React Hooks](https://reactjs.org/docs/hooks-intro.html).\n\n## Introduction\n\nEven though React Hooks are actually a constrained solution for using state and\nmanaging side effects in functional stateless components, they have proven to be\nvery elegant in their design. I wanted to use this kind of reactive programming\nin areas other than React development, so I wrote Batis.\n\nBatis essentially revolves around the concept of a Hook and its host. Running a\nfunctional stateless Hook requires a host that manages the state and effects and\nreports asynchronous state changes that should result in a new run.\n\n## Installation\n\n```\nnpm install batis\n```\n\n## Usage\n\n```js\nimport {Host, useEffect, useLayoutEffect, useMemo, useState} from 'batis';\n```\n\n```js\nfunction useGreeting(salutation) {\n  const [name, setName] = useState(`John`);\n\n  useLayoutEffect(() =\u003e {\n    setName(`Jane`);\n  }, []);\n\n  useEffect(() =\u003e {\n    // Unlike React, Batis always applies all state changes, whether\n    // synchronous or asynchronous, in batches. Therefore, Janie is not\n    // greeted individually.\n    setName(`Janie`);\n    setName((prevName) =\u003e `${prevName} and Johnny`);\n\n    const handle = setTimeout(() =\u003e setName(`World`), 0);\n\n    return () =\u003e clearTimeout(handle);\n  }, []);\n\n  return useMemo(() =\u003e `${salutation} ${name}!`, [salutation, name]);\n}\n```\n\n```js\nconst greeting = new Host(useGreeting);\n\nconsole.log(greeting.run(`Hi`));\nconsole.log(greeting.rerun());\n\ngreeting.reset();\n\nconsole.log(greeting.run(`Bye`));\nconsole.log(greeting.rerun());\n\nawait greeting.nextAsyncStateChange;\n\nconsole.log(greeting.run(`Hello`));\n```\n\n```\n[ 'Hi Jane!', 'Hi John!' ]\n[ 'Hi Janie and Johnny!' ]\n[ 'Bye Jane!', 'Bye John!' ]\n[ 'Bye Janie and Johnny!' ]\n[ 'Hello World!' ]\n```\n\n## API reference\n\nThe [React Hooks API reference](https://reactjs.org/docs/hooks-reference.html)\nalso applies to this library and should be consulted.\n\n### Implementation status\n\nBelow you can see the subset of React Hooks implemented by Batis:\n\n| React Hook                                   | Status            |\n| -------------------------------------------- | ----------------- |\n| [`useState`][usestate]                       | ✅Implemented     |\n| [`useEffect`][useeffect]                     | ✅Implemented     |\n| [`useLayoutEffect`][uselayouteffect]         | ✅Implemented     |\n| [`useMemo`][usememo]                         | ✅Implemented     |\n| [`useCallback`][usecallback]                 | ✅Implemented     |\n| [`useRef`][useref]                           | ✅Implemented     |\n| [`useReducer`][usereducer]                   | ✅Implemented     |\n| [`useContext`][usecontext]                   | ❌Not implemented |\n| [`useImperativeHandle`][useimperativehandle] | ❌Not implemented |\n| [`useDebugValue`][usedebugvalue]             | ❌Not implemented |\n\n[usestate]: https://reactjs.org/docs/hooks-reference.html#usestate\n[useeffect]: https://reactjs.org/docs/hooks-reference.html#useeffect\n[uselayouteffect]: https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n[usememo]: https://reactjs.org/docs/hooks-reference.html#usememo\n[usecallback]: https://reactjs.org/docs/hooks-reference.html#usecallback\n[useref]: https://reactjs.org/docs/hooks-reference.html#useref\n[usereducer]: https://reactjs.org/docs/hooks-reference.html#usereducer\n[usecontext]: https://reactjs.org/docs/hooks-reference.html#usecontext\n[useimperativehandle]:\n  https://reactjs.org/docs/hooks-reference.html#useimperativehandle\n[usedebugvalue]: https://reactjs.org/docs/hooks-reference.html#usedebugvalue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclebert%2Fbatis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclebert%2Fbatis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclebert%2Fbatis/lists"}