{"id":15230540,"url":"https://github.com/atlassubbed/atlas-relax","last_synced_at":"2025-04-10T03:52:59.318Z","repository":{"id":57186099,"uuid":"174886488","full_name":"atlassubbed/atlas-relax","owner":"atlassubbed","description":"Minimal, powerful declarative VDOM and reactive programming library.","archived":false,"fork":false,"pushed_at":"2019-04-03T07:21:47.000Z","size":104,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T03:52:49.707Z","etag":null,"topics":["components","diff","dom","framework","hyperscript","jsx","meteor","mithril","preact","react","reactive","vdom","virtual-dom"],"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/atlassubbed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-10T22:01:37.000Z","updated_at":"2024-02-16T23:12:29.000Z","dependencies_parsed_at":"2022-09-14T09:50:23.048Z","dependency_job_id":null,"html_url":"https://github.com/atlassubbed/atlas-relax","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/atlassubbed%2Fatlas-relax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassubbed%2Fatlas-relax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassubbed%2Fatlas-relax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassubbed%2Fatlas-relax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atlassubbed","download_url":"https://codeload.github.com/atlassubbed/atlas-relax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154998,"owners_count":21056542,"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":["components","diff","dom","framework","hyperscript","jsx","meteor","mithril","preact","react","reactive","vdom","virtual-dom"],"created_at":"2024-09-29T03:05:57.734Z","updated_at":"2025-04-10T03:52:59.278Z","avatar_url":"https://github.com/atlassubbed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# atlas-relax\n\nRelax is a minimal, powerful declarative VDOM and reactive programming library.\n\n[![Travis](https://img.shields.io/travis/atlassubbed/atlas-relax.svg)](https://travis-ci.org/atlassubbed/atlas-relax)\n\n[\u003cimg align=\"right\" width=\"250\" height=\"250\" src=\"https://user-images.githubusercontent.com/38592371/54162407-be63ba00-442b-11e9-9577-02fbf627d1f6.gif\"\u003e](https://en.wikipedia.org/wiki/Atomic_orbital?q=into+the+rabbit+hole)\n\n### just relax 😌\n\nThis tiny 2.5KB (.min.gz) engine lets you define data-driven apps using declarative components. Relax combines ideas from Meteor, Mithril and Preact into one simple library. Relax supports:\n\n  * **Sideways** reactive data between components done right\n    * reactive computations\n    * reactive variables\n    * reactive providers\n  * Managed diffs (take imperative control when automatic diffs are too expensive)\n    * **rebasing** work (add or override work in a diff)\n    * **coherent** batched updates\n    * **decoherent** time-sliced updates (incremental rendering)\n  * **Fragments** and array return values from `render`\n  * **Fibers** for efficiently tracking work that is being redone\n  * **Scheduling** (async and sync)\n  * Keyed JSX (e.g. `\u003cli key=\"key1\"\u003e`) for efficient diffing\n  * Lifecycle methods/hooks\n  * Memoization as a replacement for `shouldComponentUpdate`\n  * Rendering-agnostic apps\n    * render apps to arbitrary targets (not just the DOM)\n  * Well-established DAG algorithms to ensure updates remain efficient (O(n)) and correct\n    * stack-safe\n    * atomic, solves the \"diamond problem\" (no redundant renders)\n\nRelax gives you what you need to build not only simple todo apps, but also rapidly-updating apps like stock tickers.\n\n### demos\n\n  * [VDOM diffing visualized with force-directed graphs](https://github.com/atlassubbed/play-relax-visualized)\n  * [\"Fluid\" rendering priority visualized](https://github.com/atlassubbed/play-fluid-priority) \n  * [Dynamic-interval component](https://github.com/atlassubbed/play-dynamic-polling)\n\n### FAQs 🤔\n\n  1. **Is JSX necessary? No.**\n  2. **Is Relax a view library? Yes.** You can code a declarative tree and use a [DOM-rendering plugin](https://github.com/atlassubbed/atlas-mini-dom) to render it to the DOM, or a String-rendering plugin to render it to HTML.\n  3. **Is Relax a state management library? Yes.** Relax's state management primitives are powerful enough that you could implement your own MOBX/Redux/`Meteor.Tracker.autorun` in [a few lines of code](https://github.com/atlassubbed/atlas-munchlax) on top of Relax.\n  4. **Do I need Redux or MOBX? No.** Relax's reactive primitives are sufficient for all apps.\n  5. **Do I need something like React hooks? No.** Sufficient lifecycle methods are provided. If you prefer hooks (closures), you could implement React hooks on top of Relax's lifecycle methods in a few lines of code.\n  6. **Do updates cause the whole app to re-render? No.** Updates scale linearly with the radius of the update, not with the total graph size. If an update only affects 5 nodes, then only those 5 nodes will get their `render` called.\n  7. **Do re-renders always update the DOM? No.** Mutations are calculated with a keyed diffing algorithm to limit interactions with the DOM. Plugins (DOM Renderer, SSR Renderer, etc.) don't have to think -- Relax \"tells plugins what to do\".\n  8. **Are there docs and demos I can read? Soon.** I'm currently working on all of that stuff.\n\n### build your own X \n\nRelax isn't a \"framework\", it's a small library that helps you avoid huge frameworks. Relax abstracts out the heavy lifting associated with common UI and state management tasks (reconciliation, efficient data flow propagation, reactive functions, etc.). **Build your own framework**: Many frameworks can be built in a few lines of code with Relax's primitives:\n  \n  * [React DOM](https://github.com/atlassubbed/atlas-mini-dom) (as a plugin)\n  * [MOBX](https://github.com/atlassubbed/atlas-munchlax)\n  * Redux\n\nRelax's inner-diff (instance-level `diff`) API is inspired by Mithril's `redraw`. If you prefer React syntax, hooks and other React-like APIs can also be built pretty easily with Relax's primitives:\n\n  * `setState`\n  * functional `setState`\n  * `useEffect`\n  * `useLayoutEffect`\n  * `useState`\n  * `useRef`\n  * Sky is the limit: `afterAll`, `after`, `before`, `beforeAll`, `afterMount`, `beforeUnmount`, `afterUpdate`\n\nIf you've ever tinkered with Meteor, you've probably been obsessed with `Tracker.autorun` at some point. Nobody blames you -- it is awesome. If you wanted to, you could implement the exact same API using Relax nodes as Relax supports dependency graphs out-of-the-box. Relax makes it easy to implement reactive patterns such as:\n  \n  * [`Meteor.Tracker`](https://github.com/atlassubbed/atlas-munchlax)\n  * [`Meteor.ReactiveVar`](https://github.com/atlassubbed/atlas-munchlax)\n  * `Meteor.ReactiveDict`\n  * `Meteor.Collection` (reactive collection)\n  * Efficient `Meteor.Collection.find` that supports sort, filter, and multiple listeners per query\n\n### install\n\n```\nnpm install --save atlas-relax\n```\n\nYou are assumed to be familiar with transpiling code (babel, webpack, etc.). In the future, I may make a `dist/` folder containing various transpiled-minified code for quick installment.\n\n### notes\n\nRelax is an experimental library and your feedback is greatly appreciated! If Relax has piqued your interest 👀 then read the source code! I've included implementation comments for your reference. If you are curious how some things were implemented, check out the [development history](https://github.com/atlassubbed/history-atlas-relax). There are a few things I want to implement in the future:\n\n  1. Make plugins agnostic to reducible nodes (makes DOM rendering more efficient)\n  2. Error boundaries -- they're useful for larger apps.\n     * not as easy to implement as in React, since we may generalize it to DAGs\n  3. Ensure DOM renderers can properly hydrate an existing tree to decrease time-to-mount\n  4. Docs, demos and examples \n     * [Basic DOM Renderer](https://github.com/atlassubbed/atlas-mini-dom) (plugin) in 20 lines of code\n     * Functional [reactive framework in 20 lines of code](https://github.com/atlassubbed/atlas-munchlax)\n  5. Re-roll code into modules, provide optimized `dist/` files\n     * Use rollup, babel and terser to generate ready-to-use distribution payloads\n  6. Reverse queued managed mounts so they mount in expected order.\n\n### inspired by 💜\n\nMeteor, Mithril, Preact and physics analogies. MIT License.\n\nThe gif above was made with the help of Paul Falstad's [atomic dipole transition applet](http://www.falstad.com/qmatomrad/). Check out his other amazing interactive physics playgrounds over at his website: [http://www.falstad.com/mathphysics.html](http://www.falstad.com/mathphysics.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassubbed%2Fatlas-relax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatlassubbed%2Fatlas-relax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassubbed%2Fatlas-relax/lists"}