{"id":13567867,"url":"https://github.com/ms-jpq/noact","last_synced_at":"2025-05-16T11:04:53.292Z","repository":{"id":38179554,"uuid":"186494671","full_name":"ms-jpq/noact","owner":"ms-jpq","description":"Minimalist React (\u003c 70 lines)","archived":false,"fork":false,"pushed_at":"2025-03-11T13:45:40.000Z","size":3081,"stargazers_count":322,"open_issues_count":4,"forks_count":12,"subscribers_count":8,"default_branch":"noact","last_synced_at":"2025-04-12T14:55:10.913Z","etag":null,"topics":["react","typescript","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ms-jpq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-05-13T20:58:04.000Z","updated_at":"2025-04-02T07:17:26.000Z","dependencies_parsed_at":"2023-02-18T20:45:53.082Z","dependency_job_id":"baa81e94-5c92-43b3-85db-bdbd8c6f5c69","html_url":"https://github.com/ms-jpq/noact","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ms-jpq%2Fnoact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ms-jpq%2Fnoact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ms-jpq%2Fnoact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ms-jpq%2Fnoact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ms-jpq","download_url":"https://codeload.github.com/ms-jpq/noact/tar.gz/refs/heads/noact","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"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":["react","typescript","virtual-dom"],"created_at":"2024-08-01T13:02:47.083Z","updated_at":"2025-05-16T11:04:48.282Z","avatar_url":"https://github.com/ms-jpq.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# [~~Re~~Noact](https://ms-jpq.github.io/noact/)\n\nNoact is a minimal **_self-rendering_** Virtual DOM library.\n\n- **Declarative:** Pretty much like React, without the JSX compilation of course, hence the name.\n- **Type safe:** Noact is completely typesafe, which means you get [static type checking][auto complete gif] for free!\n- **Simple:** [Only 60 lines][60 lines] of type declarations \u0026 rendering code. (and 10ish lines of code-gen code)\n\n## [Example App](https://ms-jpq.github.io/noact-page/)\n\n## How it feels to write Noact\n\n![demo.gif]\n\n**\\- Explosions \\-**\n\nEven has support for **style auto complete**\n\n![typedemo.png]\n\n## Usage\n\nNoact is inspired by the syntax of the [elm HTML engine][elm html]\n\n```Typescript\nimport { button, div } from \"./NoactElements\"\nconst component1 = div({},\n    button({ onclick: () =\u003e alert(\":D\"), txt: \"+\" }),\n    div({ txt: \"♥\" }),\n    button({ onclick: () =\u003e alert(\"D:\"), txt: \"-\" })\n)\n```\n\n`component1` is a memoized `() =\u003e HTMLElement` function, `component1()` will give you back\n\n```HTML\n\u003cdiv\u003e\n  \u003cbutton\u003e+\u003c/button\u003e\n  \u003cdiv\u003e♥\u003c/div\u003e\n  \u003cbutton\u003e-\u003c/button\u003e\n\u003c/div\u003e\n```\n\nYou can use `component1` as it is, or compose it in a Virtual DOM configuration\n\n```Typescript\nimport { createMountPoint } from \"./Noact\"\nconst mount = createMountPoint(document.querySelector(`#root`))\nconst remount = () =\u003e mount(\n    component1,\n    span({ txt: new Date().toString() })\n)\nsetInterval(remount, 1000)\n```\n\nHere the root element will be populated with both `component1` and `span`. Every 1000ms, `#root \u003e span` and only `#root \u003e span` will be updated.\n\nIn essence, `component1` is both the rendering function, and the virtual DOM.\n\n## License\n\n[MIT License][mit]\n\n[demo.gif]: https://raw.githubusercontent.com/ms-jpq/Noact/noact/_assets/demo.gif\n[typedemo.png]: https://raw.githubusercontent.com/ms-jpq/Noact/noact/_assets/type_demo.png\n[auto complete gif]: https://github.com/ms-jpq/Noact/blob/noact/_assets/auto_complete.gif\n[elm html]: https://package.elm-lang.org/packages/elm/html/latest/\n[mit]: https://github.com/ms-jpq/Noact/blob/noact/LICENSE\n[60 lines]: https://github.com/ms-jpq/Noact/blob/noact/src/noact.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fms-jpq%2Fnoact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fms-jpq%2Fnoact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fms-jpq%2Fnoact/lists"}