diff --git a/README.md b/README.md index 73e7fb0..63275e4 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,48 @@ This package provides a reactive proxy wrapper for these objects. The syntax is One 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`. +## Installation + +### npm + +```sh +npm install --save-dev @archtechx/alpine-reactive +``` + +Then import the library **before importing Alpine**: +```js +import '@archtechx/alpine-reactive' + +// import 'alpinejs' +``` + +To create reactive proxies, import the `reactive` helper: + +```js +import { reactive } from '@archtechx/alpine-reactive' + +window.clickCounter = reactive({ + counter: 10, +}) +``` + +The 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. + +### CDN + +```html + +``` + ## Demo [View online](https://archtechx.github.io/alpine-reactive/demo.html) diff --git a/src/index.js b/src/index.js index 01832dd..273a8ce 100644 --- a/src/index.js +++ b/src/index.js @@ -99,13 +99,19 @@ export function addMagicProperty() { }) } +window.__ALPINE_REACTIVE_REGISTERED__ = false + export function register() { - const deferrer = window.deferLoadingAlpine || function (callback) { callback() } + if (! window.__ALPINE_REACTIVE_REGISTERED__) { + const deferrer = window.deferLoadingAlpine || function (callback) { callback() } - window.deferLoadingAlpine = function (callback) { - addMagicProperty() + window.deferLoadingAlpine = function (callback) { + addMagicProperty() - deferrer(callback) + deferrer(callback) + } + + window.__ALPINE_REACTIVE_REGISTERED__ = true } }