[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96051":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":20,"createdAt":9,"pushedAt":9,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},96051,"mador","marsbos\u002Fmador","marsbos","Make Any DOM Reactive",null,"JavaScript",109,3,101,0,5,42.31,"MIT License",false,"main",[],"2026-09-20 04:01:32","# mador.js\n\n### Make DOM Reactive. Nothing more.\n\nMador:\n\n- is a very small reactive DOM runtime.\n- **is for people who don't need or want a framework**.\n\nIt gives you reactive state and a way to bind that state to existing DOM.\n\nMador is a native ES module and can be used through npm or directly from a CDN.\n\n```js\nimport mador from \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@marsbos\u002Fmador@latest\u002Fdist\u002Fmador.js\";\n\nconst [read, write] = mador({\n  count: 1,\n});\n\nread(\n  \".counter\",\n  (el, count) => {\n    el.textContent = `Count: ${count}`;\n  },\n  (state) => state.count,\n);\n\nread(\n  \".another-counter\",\n  (el, count) => {\n    el.textContent = count * 3;\n  },\n  (state) => state.count,\n);\n\nwrite((state) => {\n  state.count++;\n});\n```\n\nAnd that's basically all.\n\nThere are no components, templates or virtual DOM.\nMador works with the DOM you already have.\n\n### Reactive bindings\n\nA binding consists of three things:\n\n```js\nread(selector, update, read);\n```\n\n`selector` selects the elements to update.\n\n`update` receives each element and the value returned by read.\n\n`read` selects the state the binding depends on.\n\n```js\nread(\n  \".counter\",\n  (el, count) => {\n    el.textContent = count * 2;\n  },\n  (state) => state.count,\n);\n```\n\nMador tracks the properties read by the binding and only reruns it when those dependencies change.\n\n### State\n\nState is changed through `w`:\n\n```js\nwrite((state) => {\n  state.count++;\n});\n```\n\nWrites are **batched**, so multiple changes made in the same write are processed together.\n\n### DOM lifetime\n\n'Bindings' are associated with the DOM they update.\n\nWhen the matching elements are gone, Mador can remove the corresponding reactive runner.\n\n**There is no component lifecycle to manage**.\n\n### Why mador.js?\n\nSometimes a page doesn't need a framework.\n\nIt already has HTML & Javascript, but is just needs a little reactivity.\n\nMador is made to do that.\n\n### Size\n\nMador is intentionally small.\n\nThe runtime is currently around `855 bytes` minified.\n\n### Usage\n\nMador is distributed as an ES module.\n\n```js\nimport mador from \"mador\";\n```\n\nNo global runtime and no build step is required.\n\n## License\n\nMIT\n","mador.js 是一个极简的 DOM 响应式绑定库，用于在不引入框架的前提下为现有 HTML 添加响应式状态更新能力。它提供轻量级的 reactive state 管理和基于 CSS 选择器的 DOM 绑定机制，支持依赖追踪、批量写入与自动清理失效绑定，无虚拟 DOM、无组件模型、无模板编译，纯原生 ES 模块，压缩后仅约 855 字节。适用于静态页面增强、微交互场景、渐进式增强（Progressive Enhancement）或作为大型应用中局部响应式逻辑的替代方案。",2,"2026-09-09 02:30:05","CREATED_QUERY"]