Tools & Utilities

For most real-life application you would need some utilities alongside callbag-jsx. Here are a list of libraries for most common use cases such as state management, routing and testing.

👉 callbag-jsx is pretty flexible and can be used with any other library. Libraries mentioned here are merely a recommendation for getting started.

👉 Some of mentioned libraries are included by default in starter templates. These libraries are marked with a star ⭐

linkState Management

Because callbag-jsx is designed around seamless embedding of callabgs in JSX, the most convenient tools for data-flow management are naturally those that are callbag based. Specifically the following libraries are recommended:

• ⭐ callbag-common: Commonly used utilities for working with callbags
• ⭐ callbag-state: State management with callbags

Alternatively, you could use any of the following libraries:

• callbag-basics: Basic callbag utilities
• callbag-subject: A listener sink that is also a listenable source, like RxJS Subject
• callbag-behavior-subject: A subject that repeats its last value on connection (like RxJS Behavior Subject)
• reduxbag: Redux middleware for callbags

👉 Checkout callbag wiki for a list of callbag-based tools for state and data-flow management.

linkRouting

You can use callbag-router for client-side routing:

1linkimport { Route } from 'callbag-router'

2linkimport { pipe, map } from 'callbag-common'

3linkimport { makeRenderer } from 'callbag-jsx'

4link

5linkconst renderer = makeRenderer()

6linkrenderer.render(

7link  <>

8link    <Route

9link      path='/hellow/:name'

10link      component={params => <div>Hellow {params.name}!</div>}

11link    />

12link    <Route path='/goodbye' component={() => <div>GoodBye!</div>}/>

13link  </>

14link).on(document.body)

linkStyling & Themes

If you are a fan of CSS-in-JS, themed-jss specifically provides integration with callbag-jsx. It also handles theming and automatically manages dark mode:

my-btn.tsx
1linkimport { style, when } from 'themed-jss'

2linkimport { DarkMode } from 'themed-jss/dark-mode'

3link

4linkconst MyBtnStyle = style(theme => ({

5link  btn: {

6link    color: theme.background,

7link    background: theme.text,

8link    border: `2px solid ${theme.text}`,

9link    padding: 8,

10link    borderRadius: 3,

11link    cursor: 'pointer',

12link

13link    [when(':hover')]: {

14link      color: theme.text,

15link      background: 'transparent !darkmode',

16link    }

17link  }

18link}))

19link

20linkexport function MyBtn(_, renderer) {

21link  const { btn } = this.theme.classes(MyBtnStyle);

22link

23link  return (

24link    <button class={btn} onclick={() => DarkMode.toggle()}>

25link      Toggle Dark Mode

26link    </button>

27link  )

28link}

index.tsx
1linkimport { theme } from 'themed-jss'

2linkimport { themePlug } from 'themed-jss/jsx'

3link

4linkconst myTheme = theme({

5link  text: 'black',

6link  background: 'white',

7link}, {

8link  text: 'white',

9link  background: 'black'

10link})

11link

12linkconst renderer = makeRenderer().plug(themePlug(myTheme))

13linkrenderer.render(<MyBtn/>).on(document.body)

linkTesting

⭐ test-callbag-jsx is specifically designed to make testing callbag-jsx code convenient:

1linkimport { testRender } from 'test-callbag-jsx'

2linkimport { should } from 'chai'

3link

4linkimport { RemovableHellow } from './removable-hellow'

5link

6linkshould()

7link

8linkdescribe('RemovableHellow', () => {

9link  it('should say hellow and then be removed when clicked', () => {

10link

11link    testRender((renderer, { render, $ }) => {

12link      render(<RemovableHellow name='Jack'/>)

13link      $('body').text().should.equal('Hellow Jack!')

14link

15link      $('body :first-child').click()

16link      $('body').text().should.equal('')

17link    })

18link

19link  })

20link})