{"_id":"@archtechx/alpine-reactive","_rev":"3-15827a3064a3542b414d92540571b589","name":"@archtechx/alpine-reactive","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@archtechx/alpine-reactive","version":"0.1.0","description":"Reactivity layer for Alpine 2.x","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/archtechx/alpine-reactive.git"},"keywords":["alpine.js","reactivity"],"author":{"name":"Samuel Štancl","email":"samuel@archte.ch"},"license":"MIT","bugs":{"url":"https://github.com/archtechx/alpine-reactive/issues"},"homepage":"https://github.com/archtechx/alpine-reactive#readme","gitHead":"fa09e2822f18a4ee7e5255cf53e47f5d40366855","_id":"@archtechx/alpine-reactive@0.1.0","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-ufYkbIzL343R2TDQTtZFnDg+ZL+hGlFjhZ2v9dvCPNB4Nf0hxrFcUPxWjd+J+rTaSWZW+h/Mmnxte7VwFWeYtA==","shasum":"e61510e45fdc952683b3e545c98f54de7e16e620","tarball":"https://registry.npmjs.org/@archtechx/alpine-reactive/-/alpine-reactive-0.1.0.tgz","fileCount":3,"unpackedSize":6482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoj5OCRA9TVsSAnZWagAARPoP/0+yJpwVAciGbKervrHz\nbBOoJk5ZpZK3q1QM0fq0pd21BSBk7i4A4HCnen3OmsNjJmTfteIHIpjX52KH\nWQlqcNGjuOIAho8+uP9GiBGMcvjn/WrxoG4ouca7ysxh5k6ac3GKxhv8UhHt\nyWI8aeuFx1c0k02tJ7bKHNsNzwUGpTCnWoAhWHsKcH5hZSxoFjDrWW6XXL5g\nBwTFavo0XspMthzPxcxqCkUBkpMUQD4buXno5OoXtqavImwtj7GdikT0WbqJ\nX/CWk7xeK3ETSSZXquS4z7dmAH9NISMokW2wrfgwyKSuR+R+6q4lasw4wFVb\nCdAyBJS0g3hlLPWjpkT3xHSdfFBwyMEQTI15MqsqqDlo4iZyxkSWRooCpIfk\njUMuDJqprznGbWyq/OphFpiuPr2j3/dKQwlHLL7F1v/6fhj4GH5ycbBj/n8F\ncF0ki0OUMSg5torkPvi3oMsumI4KyIbcUYuOUvCd99TGAi3D0GqaqyhyPeAU\nudhQFjM5fwC0cNfjNZxDkp8V2FEklqrkLZrr5ZjvuxOGXjPpIojP8XRqbI59\n36CSQ86NlD1bANc7+xQUMd6QiSpnB2q5GNkJOcEFGotB37Oinf4Suf6qUSQW\n2Iuny1DUrObRfSZ79xJobHyDnla2HMyfv3998QsVCLvYTi/y1kWnarTJfEzR\nLN5M\r\n=QIgR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8IV2EBiltl7wdZmDfjMEZK/s0Xq/T/OuwAxSXhdS9KAiBmKkZT58rU+fqgrk+A5Ys89Abs46d042QNRZyup55weA=="}]},"_npmUser":{"name":"samuelstancl","email":"samuel.stancl@gmail.com"},"directories":{},"maintainers":[{"name":"samuelstancl","email":"samuel.stancl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-reactive_0.1.0_1621245517327_0.30238577584936444"},"_hasShrinkwrap":false},"0.1.1":{"name":"@archtechx/alpine-reactive","version":"0.1.1","description":"Reactivity layer for Alpine 2.x","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/archtechx/alpine-reactive.git"},"keywords":["alpine.js","reactivity"],"author":{"name":"Samuel Štancl","email":"samuel@archte.ch"},"license":"MIT","bugs":{"url":"https://github.com/archtechx/alpine-reactive/issues"},"homepage":"https://github.com/archtechx/alpine-reactive#readme","gitHead":"c217094ee1bcee290a28227ef419b0e5eec496ba","_id":"@archtechx/alpine-reactive@0.1.1","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-Ksx8rrdEeVcs/A22ZkpSr6FbngwAMwCbiJkc71LCmdd3xpdAmMzQNJaEYdL5Is7qwHfK+tJtvdA9O0jIVUgkcg==","shasum":"26aa5310fa9024bc48ad0121bad213f0650e62ab","tarball":"https://registry.npmjs.org/@archtechx/alpine-reactive/-/alpine-reactive-0.1.1.tgz","fileCount":3,"unpackedSize":7531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgokPACRA9TVsSAnZWagAAhL4P/juUMQaMG1+iqgW32Kvn\n+eMRh89n8+Cg8dYm2H3/l4CUBydAbwBWiArfvIf0D6BNyduheVbEeItv4KlL\nOmERS1DJC1Dr5xwS/+m1+QOTmlwzrD2jPqugFSh5XEUtXGTsB7VJN4a0Hnq0\njysjw44eA1DUzpaVJixpZ7FErCx25COakF7XDggcuIr4Mc0VRlpua75H1/W/\nrdlRtBA+nnOLooKPCCNmu9otCsmuViFtk5LRX759amnhHWumy0/hgSiW1B52\nanmhky44xop7TCAOoRfYPtN0kDqbrlT4E4s/nXKNpR4lp6HghQIoIGvmTTQ2\np4B8PNAF3SCnGiVeLfzjrJU2x1besEmyFQ6y+jSA5TDidtPbcyxWtzpDoFla\nyE+WD5hW5q91tCP3WCYWDX/7coa4SARwlr1ZnBRhqgS0o4FSOIRePyKBYECO\n35pTHLfLLJQtdVHSp/10tRGBjV4YWSTdi4IKBEnKRuuApJg3AUacUb0J9Vgr\n/BiRKogILEJqZt3Z8pzJEPBpVlT27WmNHXO0IgUcXC/gr/tPilBwHw23h6oC\nvTdWz3EhVJBSUBq3zf9MQj5jf9SNYSUQ4BudDTIycruoyKudOov4Fz6fboTw\nmyaK+pqm+8Uxn6463zhKQv1EIcgQfioTS7YgWLWlSPZ/w7lYkTKLWM4CTC0W\nb21E\r\n=GJB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDpW6Z9nsfkjERsTQc4KQwFJa9MjvOM18wurDP1WVn/AIgFI4CgobAFhNM/5gUGjSUfUftFtUppQzAPiMPpSUoY1E="}]},"_npmUser":{"name":"samuelstancl","email":"samuel.stancl@gmail.com"},"directories":{},"maintainers":[{"name":"samuelstancl","email":"samuel.stancl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-reactive_0.1.1_1621246912408_0.5270558617269154"},"_hasShrinkwrap":false},"0.1.2":{"name":"@archtechx/alpine-reactive","version":"0.1.2","description":"Reactivity layer for Alpine 2.x","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/archtechx/alpine-reactive.git"},"keywords":["alpine.js","reactivity"],"author":{"name":"Samuel Štancl","email":"samuel@archte.ch"},"license":"MIT","bugs":{"url":"https://github.com/archtechx/alpine-reactive/issues"},"homepage":"https://github.com/archtechx/alpine-reactive#readme","gitHead":"7e5e742f19b0f431ada31f0507ee33b496ff5ecf","_id":"@archtechx/alpine-reactive@0.1.2","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-U0wiczyX4JLBCo0upZWa5n39cAC8+1/CZNKkY+Gchqj/X/3KPTeMfYVG1wFHDtxQSVlAvGXqwF6mhIwbcJ0J9Q==","shasum":"72a88aceaa2349eba221f7385a214b8ad31f463c","tarball":"https://registry.npmjs.org/@archtechx/alpine-reactive/-/alpine-reactive-0.1.2.tgz","fileCount":3,"unpackedSize":7536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqAGNCRA9TVsSAnZWagAAkoEP/1jxLwntnTAnwrya7KRk\ndX6v9m3dAwC2PBUkXfpGHz/ssSVOivMYl1PvPgY0zNz5p6usICbh83RmahnE\nNgH3iofVR8kZGFZiZUsD4C7ECeO95vc+ub3lue6eSg1VqfZap6kFVdx4eq/Q\n6MaUzn8XKFtya+vOw6WRCTVFDfPY2qkAvknwbCAYeYnV9XtkMVwZ+qJA5OQ+\niTO9mhIkr45bTUrevJ1qLRAbRDdl3PIEK4s/LTewDgT86KxJLr1U5mr7nX6S\ngJD1+JP7qwqjvPve60ts03/pMH9Zxrh4+I3nu3W9xftySCcVBWXhzqZihx7x\n/tPAxAI9lD9MzpdBCFS95rEJsF6GptjyBbgcC7ZhmXVovx7AYF+Ex4DX8QsY\n/xsxowY7emN7e4CwnarxTzqTJy7FBgcxYDafLQPpoNUnX0b+E0lPf7N4XFTX\nTseYKaXUOyd6iAeExjsbTGgmWTPe5WMH6xdtFiPU7rO1Uwo7vg+XxVIDG3t6\nlQUphYJPWbAVfaL1w91gmNYnOGutccxMskowkr9f1lVxFpAvsstnvN/oOhDA\n3rRVYF4bqzOCxXLtbE+k3GlPcSQZZ9iCROHupnsFhH5XipokGbrnvV9UQmE8\nl8L5lz8gms2/HUVYS/ssvhDUz4/bVmac/6XmAJKobMg6giXwVQu5YO9nFuso\n4BtV\r\n=zsKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJWe3j9U+h0RzOJw4/j0HCaqoRXQRpR1KuCCT354dmcAiAgroR0uIhmMTHZ+SgYE0Tinwzv5QcGMK2dVIxK/i/UFg=="}]},"_npmUser":{"name":"samuelstancl","email":"samuel.stancl@gmail.com"},"directories":{},"maintainers":[{"name":"samuelstancl","email":"samuel.stancl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-reactive_0.1.2_1621623180950_0.9193936912615697"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-17T09:58:36.989Z","0.1.0":"2021-05-17T09:58:37.441Z","modified":"2022-04-04T15:18:40.263Z","0.1.1":"2021-05-17T10:21:52.576Z","0.1.2":"2021-05-21T18:53:01.059Z"},"maintainers":[{"name":"samuelstancl","email":"samuel.stancl@gmail.com"}],"description":"Reactivity layer for Alpine 2.x","homepage":"https://github.com/archtechx/alpine-reactive#readme","keywords":["alpine.js","reactivity"],"repository":{"type":"git","url":"git+https://github.com/archtechx/alpine-reactive.git"},"author":{"name":"Samuel Štancl","email":"samuel@archte.ch"},"bugs":{"url":"https://github.com/archtechx/alpine-reactive/issues"},"license":"MIT","readme":"# alpine-reactive\n\nThis package provides a reactivity layer for Alpine 2.x.\n\n## Problem\n\nWhen you create a component that uses a value defined outside of it, you can modify the value from Alpine, but not vice versa:\n\n```html\n<div x-data=\"{ counter: window.clickCount }\">\n    <button @click=\"counter++\">+</button>\n    Click count: <span x-text=\"count\" />\n    <button @click=\"counter++\">--</button>\n</div>\n```\n\nClicking the buttons **will** update `window.clickCount`. However when `window.clickCount` is modified outside of the component, Alpine **won't** notice, and won't re-render the DOM.\n\nOnly after something else triggers a re-render, Alpine will show the correct click count again.\n\n## Solution\n\nThis package provides a reactive proxy wrapper for these objects. The syntax is very similar to Vue 3 — you just wrap the variable in `reactive()` and all changes will be tracked.\n\nOne difference between this package's solution and Vue's `reactive()` is that Alpine requires the calls to be **component-specific**. Meaning, the `reactive()` helper also needs the component instance/element. To simplify that, the package also provides a magic Alpine property, `$reactive`.\n\n## Installation\n\n### npm\n\n```sh\nnpm install --save-dev @archtechx/alpine-reactive\n```\n\nThen import the library **before importing Alpine**:\n```js\nimport '@archtechx/alpine-reactive'\n\n// import 'alpinejs'\n```\n\nTo create reactive proxies, import the `reactive` helper:\n\n```js\nimport { reactive } from '@archtechx/alpine-reactive'\n\nwindow.clickCounter = reactive({\n    counter: 10,\n})\n```\n\nThe Alpine hook is executed automatically regardless of what parts of the library you import. For a full reference of the available helpers, see the [Full API](#full-api) section below.\n\n### CDN\n\n```html\n<script type=\"module\">\n    import { reactive } from 'https://unpkg.com/@archtechx/alpine-reactive'\n\n    window.clickCounter = reactive({\n        counter: 10,\n    })\n\n    // If you want to use reactive() outside of this script tag:\n    // window.reactive = reactive\n</script>\n```\n\n## Demo\n\n[View online](https://archtechx.github.io/alpine-reactive/demo.html)\n\n```html\n<script>\n    window.counter = reactive({\n        count: 10,\n    })\n</script>\n\n<div x-data=\"{ counter: $reactive(window.counter) }\">\n    <button @click=\"counter.count--\">-</button>\n    Click count: <span x-text=\"counter.count\"></span>\n    <button @click=\"counter.count++\">+</button>\n</div>\n```\n\nUnder the hood, this creates a proxy that forwards everything to `window.clickCount`, but observes changes made to `window.clickCount` and updates the component as needed.\n\nOf course, you may use the same reactive proxy in multiple components.\n\n## Full API\n\n### reactive(target, componentEl = null): Proxy for target\n\nThis creates a reactive proxy for `object`. If `componentEl` is passed, all writes to this proxy will trigger `updateElements()` on `componentEl`'s Alpine instance.\n\n### ref(val): { value: val }\n\nThis turns `foo` into `{ value: foo }`, which allows for `foo` — a primitive type in this example — to be used with proxies.\n\n### isRef(value): bool\n\nChecks if a value is a ref.\n\n### unRef(value)\n\nSyntactic sugar for `isRef(value) ? value.value : value`.\n\n### isReactiveProxy(proxy): bool\n\nChecks whether the passed variable is a value returned by `reactive()`.\n\n### watch(target, (key, value) => void) or watch(target, value => void), property)\n\nWatches a reactive proxy, or a property on the reactive proxy.\n\nExample:\n```js\nwatch(window.counter, (key, value) => console.log(`${key} was changed to ${value}`)); // Watch proxy\nwatch(window.counter, count => console.log(count), 'count'); // Watch property\n```\n\n## Details\n\nThe package provides a `$reactive` magic property for Alpine. That property is syntactic sugar for `reactive(target, $el)`.\n\n```diff\n- counter: reactive(window.counter, $el)\n+ counter: $reactive(window.counter)\n```\n\nThe magic property is added using the exported `addMagicProperty()` function, which is called once Alpine is available by the `register()` function. `register()` is called automatically for friendly CDN imports.\n","readmeFilename":"README.md"}