JSPM

array-watch

0.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 49
  • Score
    100M100P100Q60282F
  • License MIT

Track additions and deletions from an array

Package Exports

  • array-watch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (array-watch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

array-watch

Track additions and deletions from an array

Usage

To track changes to an array, pass it to the watch function. The result is a Proxy to the array with on and removeListener functions for listening to changes. When a change is made, the following events will be fired:

  • add - the values array contains values added to the array
  • remove - the values array contains values removed from the array
  • change - the added array contains values added to the array, and the removed array contains values removed from the array
const proxy = watch([]);

proxy.on('add', e => {
  console.log('Added values: ' + e.values);
});

proxy.on('remove', e => {
  console.log('Removed values: ' + e.values);
});

proxy.push('push'); // => Added values: push
proxy[1] = 'set'; // => Added values: set
proxy.splice(0, 1, 'splice', 'test') // => Added values: splice,test
                                     // => Removed values: push

Changes are tracked regardless of whether they are the result of setting an indexed value, length or calling a mutating function. Only changes that occur as the result of operations on the Proxy can be tracked. The following will not call the add handler:

const original = [],
      proxy = watch(original);

proxy.on('add', e => {
  console.log('Added values: ' + e.values);
});

original.push('push');