@elementumjs/listenable-data is a data structure to listen for deep changes into objects' attributes.

• 📝 How to use it
  • Set a single listener
  • Set a global listener
  • Other features
• ⚙️ Installation
  • Import from CDN as ES Module
  • Or install the package locally
  • Other import methods

How to use it

Set a single listener

To listen for a single property change follow the following steps:

1. Define initial data object and create the listenable object with it.
2. Register a listener to any property that receives:
   • value: Current value of attribute after the change.
   • last: Last value of the attribute.
3. Trigger a change.
4. (optional) Dismiss the listener to stop listening.

    import Data from '@elementumjs/listenable-data';

    // [1] Define initial data object and create the listenable object
    const data = new Data({
        deep: {
            counter: 0
        }
    });

    // [2] Register a listener
    data.listen("deep.counter", (value, last) => console.log(value, last));

    // [3] Trigger a change
    data.deep.counter++; // 1 0

    // [4] Dismiss the listener
    data.dismiss("deep.counter");

Global listener

Also is possible to listen for any propery change:

1. Define initial data object and create the listenable object with it.
2. Register a listener to any property that receives:
   • value: Current value of attribute after the change.
   • last: Last value of the attribute.
   • ref: The property reference.
3. Trigger a change.
4. (optional) Dismiss the global listener to stop listening.

    import Data from '@elementumjs/listenable-data';

    // [1] Define initial data object and create the listenable object
    const data = new Data({
        deep: {
            counter: 0
        }
    });

    // [2] Register a listener
    data.listenAll((value, last, ref) => console.log(value, last, ref));

    // [3] Trigger a change
    data.deep.counter++; // 1 0 "deep.counter"

    // [4] Dismiss the listener
    data.dismissAll();

Other features

Check if single property is already defined

    // Define initial data object and create the listenable object
    const data = new Data({
        deep: {
            counter: 0
        }
    });

    // Print if source data contains a single reference
    console.log(data.contains("deep.counter")) // true

Get defined references

    // Define initial data object and create the listenable object
    const data = new Data({
        deep: {
            counter: 0
        }
    });

    // Print if source data contains a single reference
    console.log(data.refs()) // ["deep", "deep.counter"]

Installation

Import from CDN as ES Module

Import from jsDelivr CDN:

    import Data from "https://cdn.jsdelivr.net/gh/elementumjs/listenable-data/dist/listenable-data.esm.js";

Or install the package locally

Download the package

Install via npm:

    npm install @elementumjs/listenable-data

Import as ES Module

ES Module builds are intended for use with modern bundlers like webpack 2 or rollup. Use it with ES6 JavaScript import:

    import Data from '@elementumjs/listenable-data';

Other import methods

Checkout other import methods in dist/README.md.