{"id":20285678,"url":"https://github.com/marcisbee/radi","last_synced_at":"2025-05-16T11:05:42.391Z","repository":{"id":99012065,"uuid":"116848168","full_name":"Marcisbee/radi","owner":"Marcisbee","description":"🌀Tiny (in size) front-end framework with no extra browser re-flows","archived":false,"fork":false,"pushed_at":"2024-10-04T09:15:56.000Z","size":3168,"stargazers_count":946,"open_issues_count":1,"forks_count":34,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-05-16T11:05:33.984Z","etag":null,"topics":["dom","hyperscript","javascript","radi","radijs"],"latest_commit_sha":null,"homepage":"https://radi.js.org","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/Marcisbee.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.json","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":"2018-01-09T17:29:23.000Z","updated_at":"2025-02-27T06:55:04.000Z","dependencies_parsed_at":"2025-01-01T08:00:48.257Z","dependency_job_id":"a3c18196-fcf6-424f-af74-70eb1dfd0639","html_url":"https://github.com/Marcisbee/radi","commit_stats":null,"previous_names":["radi-js/radi"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fradi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fradi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fradi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fradi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marcisbee","download_url":"https://codeload.github.com/Marcisbee/radi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"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":["dom","hyperscript","javascript","radi","radijs"],"created_at":"2024-11-14T14:28:26.850Z","updated_at":"2025-05-16T11:05:37.374Z","avatar_url":"https://github.com/Marcisbee.png","language":"JavaScript","readme":"\u003e [!IMPORTANT]\n\u003e **This project is no longer maintained!**\n\u003e \n\u003e From ashes [state management library \"exome\"](https://github.com/marcisbee/exome) was born. Go check it out, it works with any framework or as a vanilla standalone lib.\n\n---\n\n# \u003ca href='http://radi.js.org'\u003e\u003cimg src='https://rawgit.com/radi-js/radi/gh-pages/logo/radijs-github.png' height='60' alt='Radi' aria-label='Redux.js.org' /\u003e\u003c/a\u003e\n\n**Radi** is a tiny javascript framework.\n\nIt's built quite differently from any other framework. It doesn't use any kind of diffing algorithm nor virtual dom which makes it really fast.\n\nWith Radi you can create any kind of single-page applications or more complex applications.\n\n[![npm version](https://img.shields.io/npm/v/radi.svg?style=flat-square)](https://www.npmjs.com/package/radi)\n[![npm downloads](https://img.shields.io/npm/dm/radi.svg?style=flat-square)](https://www.npmjs.com/package/radi)\n[![gzip bundle size](http://img.badgesize.io/https://unpkg.com/radi@latest/dist/radi.es.min.js?compression=gzip\u0026style=flat-square)](https://unpkg.com/radi@latest/dist/radi.js)\n[![discord](https://dcbadge.vercel.app/api/server/a62gfaDW2e?style=flat-square)](https://discord.gg/a62gfaDW2e)\n\n## Installation\n\nTo install the stable version:\n\n```\nnpm install --save radi\n```\n\nThis assumes you are using [npm](https://www.npmjs.com/) as your package manager.  \n\nIf you're not, you can [access these files on unpkg](https://unpkg.com/radi/dist/), download them, or point your package manager to them.\n\n#### Browser Compatibility\n\nRadi.js currently is compatible with browsers that support at least ES5.\n\n## Ecosystem\n\n| Project | Status | Description |\n|---------|--------|-------------|\n| [radi-router]          | [![radi-router-status]][radi-router-package] | Single-page application routing |\n| [radi-fetch]          | [![radi-fetch-status]][radi-fetch-package] | HTTP client for Radi.js |\n\n[radi-router]: https://github.com/radi-js/radi-router\n\n[radi-router-status]: https://img.shields.io/npm/v/radi-router.svg?style=flat-square\n\n[radi-router-package]: https://npmjs.com/package/radi-router\n\n[radi-fetch]: https://github.com/radi-js/radi-fetch\n\n[radi-fetch-status]: https://img.shields.io/npm/v/radi-fetch.svg?style=flat-square\n\n[radi-fetch-package]: https://npmjs.com/package/radi-fetch\n\n## Documentation\n\n[Getting started guide](/docs)\n\nHere are just a few examples to work our appetite.\n\n#### Hello World example\n\nLets create component using JSX, tho it's not mandatory\nwe can just use hyperscript `r('h1', 'Hello', this.sample, '!')`. I'm using JSX for html familiarity and to showcase compatibility.\n\n```jsx\n/** @jsx Radi.r **/\n\nclass Hello extends Radi.component {\n  state() {\n    return { sample: 'World' };\n  }\n  view() {\n    return (\n      \u003ch1\u003eHello { this.state.sample } !\u003c/h1\u003e\n    )\n  }\n}\n\nRadi.mount(\u003cHello /\u003e, document.body);\n```\n\nThis example will mount h1 to body like so `\u003cbody\u003e\u003ch1\u003eHello World\u003c/h1\u003e\u003c/body\u003e`\n\n#### Counter example (With Single File Component syntax)\n\nThis will be different as we'll need to update state and use actions. Only actions can change state and trigger changes in DOM.\nAlso we'll be using our SFC syntax for `*.radi` files\n\n`Counter.radi`\n```jsx\nclass {\n  state = {\n    count: 0\n  }\n\n  @action up() {\n    return {\n      count: this.state.count +1\n    }\n  }\n\n  @action down() {\n    return {\n      count: this.state.count -1\n    }\n  }\n}\n\n\u003cdiv\u003e\n  \u003ch1\u003e{ this.state.count }\u003c/h1\u003e\n\n  \u003cbutton onclick={ () =\u003e this.down() } disabled={ this.state.count \u003c= 0 }\u003e-\u003c/button\u003e\n\n  \u003cbutton onclick={ () =\u003e this.up() }\u003e+\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## Architecture\n\nRadi fully renders page only once initially. After that `listeners` take control. They can listen for state changes in any Radi component. When change in state is caught, listener then re-renders only that part.\n\nOther frameworks silently re-renders whole page over and over again, then apply changes. But radi only re-renders parts that link to changed state values.\n\nTo check out [live repl](https://radi.js.org/#/fiddle) and [docs](https://radi.js.org/#/docs), visit [radi.js.org](https://radi.js.org).\n\n\u003c!-- ## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/radi-js/radi/releases). --\u003e\n\n## Stay In Touch\n\n- [Twitter](https://twitter.com/radi_js)\n- [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2017-present, Marcis (Marcisbee) Bergmanis\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fradi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcisbee%2Fradi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fradi/lists"}