Tracking

Use this.track() in component functions to track changes to a callbag while your component is on-screen:

jinx-check.tsx
1linkimport { pipe, subscribe } from 'callbag-common';

2link

3link

4linkexport function JinxCheck({ source }, renderer) {

5link  this.track(pipe(

6link    source,

7link    subscribe(v => {

8link      if (v === 13) {

9link        alert('JINX!');

10link      }

11link    }),

12link  ));

13link

14link  return <small>Jinx-Check is Active!</small>

15link}

index.tsx
1linkimport { JinxCheck } from './jinx-check';

2link

3linkconst number = state(0);

4linkconst check = state(true);

5link

6linkrenderer.render(

7link  <>

8link    <input _state={number} type='number'/> <br/>

9link    <input _state={check} type='checkbox'/> 

10link    <Conditional if={check}

11link      then={() => <JinxCheck source={number}/>}/>

12link  </>

13link).on(document.body);

👉 Tracking is useful for side-effects such as sending requests from user data:

1linkimport { state } from 'callbag-state';

2linkimport { pipe, subscribe, filter, debounce, map } from 'callbag-common';

3link

4linkconst POKEAPI = 'https://pokeapi.co/api/v2/pokemon/';

5link

6linkexport function PokeInfo(_, renderer) {

7link  const name = state('');

8link  const pokemon = state<any>(undefined);

9link  const json = pipe(pokemon, map(p => JSON.stringify(p, null, 4)));

10link

11link  this.track(pipe(

12link    name,

13link    debounce(1000),                        // --> wait until typing is finished

14link    filter(n => n.length > 0),             // --> filter out empty strings

15link    subscribe(n => {

16link      fetch(POKEAPI + n)                   // --> fetch pokemon info from PokeAPI

17link        .then(r => r.json())               // --> convert response to JSON

18link        .then(p => pokemon.set(p))

19link        .catch(() => alert('Not Found!'))

20link    })

21link  ));

22link

23link  return <>

24link    <input _state={name} type='text' placeholder='Pokemon name ...'/>

25link    <pre>{json}</pre>

26link  </>

27link}

linkType Safety

It is recommended to type-annotate the this argument in TypeScript for further type-safety. For utilizing tracking, you can use TrackerComponentThis interface for that purpose:

1linkimport { TrackerComponentThis } from 'callbag-jsx';

2link

3linkexport function MyComponent(

4link  this: TrackerComponentThis,

5link  ...

6link) {

7link  ...

8link}

👉 You can also annotate this with multiple types:

1linkexport function MyComponent(

2link  this: TrackerComponentThis & LiveComponentThis,

3link  ...

4link) {

5link...

6link}