callbag-state-keyed v0.2.4

callbag-state-keyed

👉 Key-track callbag-states:

import state from 'callbag-state';
import keyed from 'callbag-state-keyed';
import subscribe from 'callbag-subscribe';

const s = state([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jack' },
  { id: 3, name: 'Jill' },
]);

const k = keyed(s, p => p.id);
subscribe(console.log)(k.key(2));   // > { id: 2, name: 'Jack' }

s.set([
  { id: 2, name: 'Jack' },
  { id: 3, name: 'Jill' }
]);                                 // --> no changes to id 2, no logs

s.set([
  { id: 2, name: 'Joe' },
  { id: 3, name: 'Jill' }
]);                                 // > { id: 2, name: 'Joe' }

► TRY IT!

👉 Modify key-tracked sub-states:

const jill = k.key(3);
subscribe(console.log)(jill);       // > { id: 3, name: 'Jill' }
jill.sub('name').set('Jillian');    // > { id: 3, name: 'Jillian' }

► TRY IT!

👉 Track index of a particular key:

subscribe(console.log)(k.index(2)); // --> index of element with `id: 2`
                                    // > 0
s.set([
  { id: 3, name: 'Jillian' },
  { id: 2, name: 'Joe' }
]);                                 // > 1

► TRY IT!

👉 Get detailed list changes for a keyed list:

subscribe(console.log)(k.changes());

s.set([
  { id: 4, name: 'Joseph' },
  { id: 3, name: 'Jillian' },
  { id: 1, name: 'John' },
]);

// > {
// >   additions: [
// >     { index: 0, item: { id: 4, name: 'Joseph' } },
// >     { index: 2, item: { id: 1, name: 'John' } },
// >   ],
// >   deletions: [
// >     { index: 1, item: { id: 2, name: 'Joe' } } 
// >   ],
// >   moves: [
// >     { item: { id: 3, name: 'Jillian' }, oldIndex: 0, newIndex: 1 }
// >   ]
// > }

► TRY IT!

Gotchas

Same as callbag-state.

Contribution

Be nice and respectful, more importantly super open and welcoming to all.

👉 Useful commands for working on this repo:

git clone https://github.com/loreanvictor/callbag-state-keyed.git

npm i              # --> install dependencies

npm start          # --> run `samples/index.ts`

npm test           # --> run all tests

npm run cov:view   # --> view code coverage