loreanvictor / callbag-jsx

Callbags + JSX. No virtual DOM, compile-time invalidation, or other magic tricks.
👉 Read the Docs

Sample Todolist app:

import { makeRenderer, List } from 'callbag-jsx';
import { state } from 'callbag-state';

const renderer = makeRenderer();

const todos = state([{title: 'Do this'}, {title: 'Do that'}]);
const next = state('');

const add = () => {
  todos.set(todos.get().concat([{title: next.get()}]));
  next.set('');
};

renderer.render(
  <>
    <h1>Todos</h1>
    <ol>
      <List of={todos} each={todo => <li>{todo.sub('title')}</li>}/>
    </ol>
    <input type='text' _state={next} placeholder='What should be done?'/>
    <button onclick={add}>Add</button>
  </>
).on(document.body);

►TRY IT!

Why?

👉 Long Answer Here

Main purpose of callbag-jsx is to provide full control over DOM while being as convenient as tools like React. In other words, unlike other frameworks and tools, callbag-jsx DOES NOT infer when and how to update the DOM, it gives you the tools to conveniently outline that.

As a result:

• It gives you full control and gets out of your way whenever it cannot help.
• It is faster than most popular frameworks (it does less)
• It is smaller than most popular frameworks (it needs less code)
• It is pretty straight-forward, i.e. it just bind given callbags to DOM elements. So no weird hooks rules.
• It is pretty robust, e.g. modify the DOM manually if you need to.

👉 Comparison with Other Frameworks

Installation

Easiest way is to use one of these templates:

• TypeScript template
• JavaScript template

You can also just install the package:

npm i callbag-jsx

and use the following jsx pragmas in your .jsx/.tsx files:

/** @jsx renderer.create */
/** @jsxFrag renderer.fragment */

👉 Read the docs for more info/options

Usage

import { makeRenderer } from 'callbag-jsx';

const renderer = makeRenderer();
renderer.render(<div>Hellow World!</div>).on(document.body);

import expr from 'callbag-expr';
import state from 'callbag-state';

const count = state(0);

const add = () => count.set(count.get() + 1);
const color = expr($ => $(count) % 2 ? 'red' : 'green');

renderer.render(
  <div onclick={add} style={{ color }}>
    You have clicked {count} times!
  </div>
).on(document.body);

👉 Read the Docs

Contribution

There are no contribution guidelines or issue templates currently, so just be nice (and also note that this is REALLY early stage). Useful commands for development / testing:

git clone https://github.com/loreanvictor/callbag-jsx.git

npm i                   # --> install dependencies

npm start               # --> run `samples/index.tsx` on `localhost:3000`

npm test                # --> run all tests

npm run cov:view        # --> run tests and display the code coverage report

npm i -g @codedoc/cli   # --> install CODEDOC cli (for working on docs)

codedoc install         # --> install CODEDOC dependencies (for working on docs)

codedoc serve           # --> serve docs on `localhost:3000/render-jsx` (from `docs/md/`)