{"id":44210409,"url":"https://github.com/js-works/preactive","last_synced_at":"2026-02-10T00:11:29.165Z","repository":{"id":39283368,"uuid":"229412073","full_name":"js-works/preactive","owner":"js-works","description":"An alternative API for programming components and hook functions with Preact","archived":false,"fork":false,"pushed_at":"2022-12-09T08:30:30.000Z","size":1030,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-01T10:12:00.410Z","etag":null,"topics":["hook-functions","hooks","hooks-api","preact"],"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/js-works.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}},"created_at":"2019-12-21T10:32:59.000Z","updated_at":"2022-07-27T01:17:03.000Z","dependencies_parsed_at":"2023-01-25T20:46:02.112Z","dependency_job_id":null,"html_url":"https://github.com/js-works/preactive","commit_stats":null,"previous_names":["js-works/js-preactive"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/js-works/preactive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-works%2Fpreactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-works%2Fpreactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-works%2Fpreactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-works%2Fpreactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-works","download_url":"https://codeload.github.com/js-works/preactive/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-works%2Fpreactive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29287082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T21:57:15.303Z","status":"ssl_error","status_checked_at":"2026-02-09T21:57:11.537Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hook-functions","hooks","hooks-api","preact"],"created_at":"2026-02-10T00:11:29.042Z","updated_at":"2026-02-10T00:11:29.144Z","avatar_url":"https://github.com/js-works.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preactive\n\nA R\u0026D project to evaluate an alternative API for developing components with Preact using an alternative to hook functions (called \"extensions\").\u003cbr\u003e\nThe main advantages of the new API are:\n\n- No rules of hooks\n- No special linter necessary\n- 100% accurately typeable\n\nBe aware that this project is just for research purposes and\nis not meant to be used in production.\n\n### Installation\n\n```\ngit clone https://github.com/js-works/preactive.git\ncd preactive\nnpm install\n```\n\n### Running demos\n\n```\nnpm run storybook\n```\n\n## Examples\n\nRemark: We are using the following naming convention to reduce the amount of noise in the source code (for non-trivial components, where you access the props and the state object very often, that makes quite a difference):\n\n- `p` is the variable for the props object\n- `s` is the variable for a state object\n\n### Simple counter\n\n```tsx\nimport { render } from 'preact';\nimport { component } from 'preactive';\nimport { preset, state } from 'preactive/ext';\n\nconst Counter = component('Counter')\u003c{\n  initialCount?: number;\n  label?: string;\n}\u003e((p) =\u003e {\n  preset(p, {\n    initialCount: 0,\n    label: 'Counter'\n  });\n\n  const [s, set] = state({ count: p.initialCount });\n  const increment = () =\u003e set.count((it) =\u003e it + 1);\n\n  return () =\u003e (\n    \u003cdiv\u003e\n      \u003cbutton onClick={increment}\u003e\n        {p.label}: {s.count}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n});\n\nrender(\u003cCounter /\u003e, document.querySelector('#app')!);\n```\n\n### Additional example - showing more features\n\n```tsx\nimport { h, render } from 'preact';\nimport { component } from 'preactive';\nimport { effect, preset, state } from 'preactive/ext';\n\nconst Counter = component('Counter')\u003c{\n  initialCount?: number;\n  label?: string;\n}\u003e((p) =\u003e {\n  preset(p, {\n    initialCount: 0,\n    label: 'Counter'\n  });\n\n  const [s, set] = state({ count: p.initialCount });\n  const increment = () =\u003e s.count((it) =\u003e it + 1);\n\n  effect(\n    () =\u003e console.log(`Value of \"${p.label}\": ${s.count}`),\n    () =\u003e [s.count]\n  );\n\n  return () =\u003e (\n    \u003cdiv\u003e\n      \u003cbutton onClick={increment}\u003e\n        {p.label}: {s.count}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n});\n\nrender(\u003cCounter /\u003e, document.querySelector('#app')!);\n```\n\n## API\n\n### Core functions\n\n- `component(displayName, render: props =\u003e vnode): ComponentClass`\n- `component(displayName, init: props =\u003e () =\u003e vnode): ComponentClass`\n- `component(displayName): (render: props =\u003e vnode) =\u003e ComponentClass`\n- `component(displayName): (init: props =\u003e () =\u003e vnode) =\u003e ComponentClass`\n\n### Utility functions\n\n- tbd\n\n### Extensions\n\n- `atom(initialValue)`\n- `state(initialValues)`\n- `createMemo(calculation, getDependencies)`\n- `consume(context)`\n- `effect(action, getDependencies? | null)`\n- `interval(action, milliseconds)`\n- `handlePromise(getPromise)`\n- `preset(props, defaultProps or getDefaultProps)`\n\n## Project state\n\nThis R\u0026D project is in a very early development state\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-works%2Fpreactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-works%2Fpreactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-works%2Fpreactive/lists"}