Alpine — Observe Other Components

A lightweight observer function for Alpine.js that lets you monitor state on other Alpine components, including parent components.

About

Useful when you want to watch updates on child elements, or when you need to watch state in general.

Watch everything

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>

Demo

Watch only specific components

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>

Demo

Watch parent components

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>

Demo

Installation

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>

Manual

If you wish to create your own bundle:

npm install kevinbatdorf/alpine-observe-other-components --save

Then add the following to your script:

import 'alpine-observe-other-components'
import 'alpinejs'

License

Licensed under the MIT license, see LICENSE.md for details.

kevinbatdorf / alpine-observe-other-components Goto Github PK