{"_id":"@adamwirda/reactive-dom","_rev":"3-1c5369263dce9136a9cef8ec7a11a9ae","name":"@adamwirda/reactive-dom","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@adamwirda/reactive-dom","version":"0.1.0","author":{"name":"@adamwirda"},"_id":"@adamwirda/reactive-dom@0.1.0","maintainers":[{"name":"adamwirda","email":"drrac002cute@gmail.com"}],"dist":{"shasum":"97e9893fc226fbc541de9d6b6903b717081506e6","tarball":"https://registry.npmjs.org/@adamwirda/reactive-dom/-/reactive-dom-0.1.0.tgz","fileCount":9,"integrity":"sha512-Q3YI9gjOBiqe/KH7scL9G3wKaytlug4LM6qpDmbJXmGDbKjIXA0LKWUFSb8LLu92meEO951Y2DzNuUrHXEQXdw==","signatures":[{"sig":"MEUCIQDlTYsfzdpMtMZ2EA8C6Cwo8OdqzlH4wuoHVpZdBTWMSQIgBMPSHI224tNOoaos6q5vOBtoiVOD7soY2B2N84LWee0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14309},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsc"},"_npmUser":{"name":"adamwirda","email":"drrac002cute@gmail.com"},"_npmVersion":"11.6.1","description":"just test","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/reactive-dom_0.1.0_1765742983004_0.635196458160493","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@adamwirda/reactive-dom","version":"0.2.0","author":{"name":"@adamwirda"},"_id":"@adamwirda/reactive-dom@0.2.0","maintainers":[{"name":"adamwirda","email":"drrac002cute@gmail.com"}],"dist":{"shasum":"e8f2da7ae7af2402f908b12f820622e5caeb62ed","tarball":"https://registry.npmjs.org/@adamwirda/reactive-dom/-/reactive-dom-0.2.0.tgz","fileCount":11,"integrity":"sha512-ZHaY8yjy8pI191ksqkM0mLcQSj/dUDbeiwRPpE2S9bG524h+lY6S1wau72rgbf+Wf8/C9cRAFgCND4t2XSYulQ==","signatures":[{"sig":"MEYCIQC6n6QALqk2a0oV3EspGoAtb1NhoIsZk+CwuiEbSEAFJgIhALGX/8oHYrMxzVlhr+XC8N6Zkg/5XoRCkLJTsVBl5pv0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23141},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsc"},"_npmUser":{"name":"adamwirda","email":"drrac002cute@gmail.com"},"_npmVersion":"11.6.1","description":"just test","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/reactive-dom_0.2.0_1765743853517_0.03036193820483213","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@adamwirda/reactive-dom","version":"0.3.0","description":"just test","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsx build.ts && tsc"},"author":{"name":"@adamwirda"},"devDependencies":{"esbuild":"^0.27.2","typescript":"^5.9.3"},"dependencies":{"csstype":"^3.2.3"},"_id":"@adamwirda/reactive-dom@0.3.0","_nodeVersion":"25.2.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-r4VO5orCTp2SJXUaEubDxdxqqAUIPuXnxnvJurODEzVTS77eTGCtPdhJ9nakjWMa837yFbVrqmLLHHSFAWr/Zw==","shasum":"a1d7ddd769d670cb8c1a60ef016dc163f801c0a0","tarball":"https://registry.npmjs.org/@adamwirda/reactive-dom/-/reactive-dom-0.3.0.tgz","fileCount":9,"unpackedSize":6873,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCil10F689d+WjzeGjK3MdhXDfIrOAl3UgiLsl8BwCa8gIgUXJPqlp7b5in+GmaqF1wRAtzPEej/WDw+BVlvlxPXQw="}]},"_npmUser":{"name":"adamwirda","email":"drrac002cute@gmail.com"},"directories":{},"maintainers":[{"name":"adamwirda","email":"drrac002cute@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/reactive-dom_0.3.0_1767455977020_0.36813202853328986"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-14T20:09:42.933Z","modified":"2026-01-03T15:59:37.346Z","0.1.0":"2025-12-14T20:09:43.154Z","0.2.0":"2025-12-14T20:24:13.666Z","0.3.0":"2026-01-03T15:59:37.159Z"},"author":{"name":"@adamwirda"},"description":"just test","maintainers":[{"name":"adamwirda","email":"drrac002cute@gmail.com"}],"readme":"# ⚡ Reactive DOM Mini Library\n\nA tiny experimental library for building **reactive UI using pure DOM** — no Virtual DOM, no framework.\n\nInspired by Vue / Solid, but kept minimal and hackable.\n\n---\n\n## ✨ Features\n\n- ✅ Reactive state with automatic dependency tracking\n- ✅ Component defined using plain objects\n- ✅ Reactive attributes, styles, and text nodes\n- ✅ Conditional & dynamic children\n- ✅ No Virtual DOM\n- ✅ Extremely lightweight\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @adamwirda/reactive-dom\n```\n\nFor local testing:\n```bash\nnpm install ./@adamwirda/reactive-dom.1.0.tgz\n```\n\n---\n\n## 🚀 Basic Usage\n\n### Import API\n\n```js\nimport {\n  defineComponent,\n  defineState,\n  renderComponent\n} from \"@adamwirda/reactive-dom\"\n```\n\n---\n\n## 🧠 State (`defineState`)\n\n```js\nconst count = defineState(0)\n\nconsole.log(count.value) // 0\ncount.value = 1\n```\n\n### Subscribe to changes\n\n```js\ncount.subs((newValue, oldValue) => {\n  console.log(oldValue, \"→\", newValue)\n})\n```\n\n---\n\n## 🧩 Component (`defineComponent`)\n\n```js\nconst Counter = defineComponent({\n  tag: \"button\",\n  child: () => `Count: ${count.value}`,\n  event: {\n    click: () => count.value++\n  }\n})\n```\n\n---\n\n## 🎨 Reactive Attributes & Styles\n\n```js\nconst Box = defineComponent({\n  tag: \"div\",\n  attrs: {\n    id: () => `box-${count.value}`\n  },\n  styles: {\n    color: () => count.value % 2 ? \"red\" : \"blue\"\n  },\n  child: \"Hello\"\n})\n```\n\n---\n\n## 🔁 Conditional / Dynamic Child\n\n```js\nconst App = defineComponent({\n  tag: \"div\",\n  child: () =>\n    count.value > 5\n      ? \"More than 5\"\n      : \"Less than or equal to 5\"\n})\n```\n\nThe DOM node will be replaced automatically when state changes.\n\n---\n\n## 🧱 Nested Components\n\n```js\nconst Child = defineComponent({\n  tag: \"span\",\n  child: \"Child component\"\n})\n\nconst Parent = defineComponent({\n  tag: \"div\",\n  child: [\n    \"Parent: \",\n    Child\n  ]\n})\n```\n\n---\n\n## 🖥️ Render to DOM\n\n```js\nrenderComponent(\n  App(),\n  document.getElementById(\"app\")\n)\n```\n\n---\n\n## 🧠 How It Works (Short)\n\n- `defineState()` creates a reactive state\n- Accessing `.value` tracks dependencies automatically\n- Updating state triggers only affected DOM updates\n- No diffing, no virtual DOM\n\n---\n\n## ⚠️ Notes\n\n- Experimental project\n- No lifecycle cleanup yet\n- Best suited for:\n  - Learning reactivity systems\n  - Playground / experiments\n  - Building your own framework\n\n---\n\n## 📜 API Reference\n\n### `defineState(initialValue)`\n\n```ts\n{\n  value: any\n  subs(fn: (newValue, oldValue) => void)\n}\n```\n\n---\n\n### `defineComponent(config)`\n\n```ts\n{\n  tag: string\n  attrs?: Record<string, string | number | (ctx) => any>\n  styles?: Record<string, string | (ctx) => any>\n  event?: Record<string, (event, ctx) => void>\n  child?: string | number | HTMLElement | Component | (() => any)\n}\n```\n\n---\n\n### `renderComponent(element, container)`\n\n```ts\nrenderComponent(HTMLElement, HTMLElement)\n```\n\n---\n\n## 📄 License\n\nMIT © Adam Wirda\n","readmeFilename":"README.md"}