A lightweight observer function for Alpine.js that lets you monitor state on other Alpine components, including parent components.
Useful when you want to watch updates on child elements, or when you need to watch state in general.
Add x-alpine-observe attribute with the function name. Each component with this attribute will watch all other components and run your function every time.
<div x-data="{text:'bar'}" @click="text = 'baz'" x-text="text"></div>
<!-- The component below is watching the component above for changes -->
<div x-data="{foo:'bar', go(details) { this.foo = details.data[0].text }}" x-alpine-observe="go" x-text="foo"></div>Add x-alpine-observe attribute with an object to specify a selector. Only components with this selector will be monitored for changes. Note that changes occur on initial load so the example below will first show 1, not 0.
<div
class="counters"
x-data="{text:'bar'}"
@click="text = text === 'baz' ? 'bar' : 'baz'"
x-text="text">Watched</div>
<div
x-data="{text:'bar'}"
@click="text = text === 'baz' ? 'bar' : 'baz'"
x-text="text">Not watched</div>
<!-- The component below is watching only the component above with a class of counters for changes -->
<div
x-data="{count:0, go(details) { this.count++ }}"
x-alpine-observe="{selector: '.counters', callback: 'go'}"
x-text="count"></div>Similar to above, you can scope the child to only watch the parent for changes.
<div
id="parent"
x-data="{text: 'parent'}">
<div>
Parent: <button
@click="text = text === 'parent' ? 'also parent' : 'parent'"
x-text="text"></button>
</div>
<div>
Nested <button
x-data="{ text: 'child', getDataFromParent(details) { this.text = `${details.data[0].text}` } }"
x-alpine-observe="{selector: '#parent', callback: 'getDataFromParent'}"
@click="text = text === 'child' ? 'also child' : 'child'">
<span x-text="text"></span>
</button>
</div>
</div>Include the following <script> tag in the <head> of your document (before Alpine):
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/alpine-observe-other-components@latest/dist/index.js"></script>If you wish to create your own bundle:
npm install kevinbatdorf/alpine-observe-other-components --saveThen add the following to your script:
import 'alpine-observe-other-components'
import 'alpinejs'Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see LICENSE.md for details.