Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loreanvictor/callbag-jsx
callbags + JSX: fast and tiny interactive web apps
https://github.com/loreanvictor/callbag-jsx
callbags dom frontend jsx ui
Last synced: 9 days ago
JSON representation
callbags + JSX: fast and tiny interactive web apps
- Host: GitHub
- URL: https://github.com/loreanvictor/callbag-jsx
- Owner: loreanvictor
- License: mit
- Created: 2020-10-15T16:01:45.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-21T08:36:40.000Z (over 3 years ago)
- Last Synced: 2024-10-13T07:08:40.678Z (23 days ago)
- Topics: callbags, dom, frontend, jsx, ui
- Language: TypeScript
- Homepage: https://loreanvictor.github.io/callbag-jsx
- Size: 1.73 MB
- Stars: 75
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - callbag-jsx
README
[](https://github.com/loreanvictor/callbag-jsx/actions?query=workflow%3A%22Test+and+Report+Coverage%22)
[](https://codecov.io/gh/loreanvictor/callbag-jsx)
[](https://www.npmjs.com/package/callbag-jsx)
[](https://loreanvictor.github.io/callbag-jsx/) [](https://gitter.im/callbag-jsx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
---
Callbags + JSX. No virtual DOM, compile-time invalidation, or other _magic tricks_. \
👉 [Read the Docs](https://loreanvictor.github.io/callbag-jsx)
Sample Todolist app:
```tsx
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(
<>
Todos
- {todo.sub('title')}
}/>
Add
>
).on(document.body);
```
[â–ºTRY IT!](https://stackblitz.com/edit/callbag-jsx-todolist)
## Why?
👉 [Long Answer Here](https://loreanvictor.github.io/callbag-jsx/meta/why)
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](https://reactjs.org/docs/hooks-rules.html).
- It is pretty robust, e.g. modify the DOM manually if you need to.
👉 [Comparison with Other Frameworks](https://loreanvictor.github.io/callbag-jsx/meta/compare)
## Installation
Easiest way is to use one of these templates:
- [TypeScript template](https://github.com/loreanvictor/callbag-jsx-starter-ts/generate)
- [JavaScript template](https://github.com/loreanvictor/callbag-jsx-starter-js/generate)
You can also just install the package:
```bash
npm i callbag-jsx
```
and use the following jsx pragmas in your `.jsx`/`.tsx` files:
```jsx
/** @jsx renderer.create */
/** @jsxFrag renderer.fragment */
```
👉 [Read the docs for more info/options](https://loreanvictor.github.io/callbag-jsx/install)
## Usage
```jsx
import { makeRenderer } from 'callbag-jsx';
const renderer = makeRenderer();
renderer.render(
Hellow World!).on(document.body);
```
```jsx
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(
You have clicked {count} times!
).on(document.body);
```
👉 [Read the Docs](https://loreanvictor.github.io/callbag-jsx)
## 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:
```bash
git clone https://github.com/loreanvictor/callbag-jsx.git
```
```bash
npm i # --> install dependencies
```
```bash
npm start # --> run `samples/index.tsx` on `localhost:3000`
```
```bash
npm test # --> run all tests
```
```bash
npm run cov:view # --> run tests and display the code coverage report
```
```bash
npm i -g @codedoc/cli # --> install CODEDOC cli (for working on docs)
```
```bash
codedoc install # --> install CODEDOC dependencies (for working on docs)
```
```bash
codedoc serve # --> serve docs on `localhost:3000/render-jsx` (from `docs/md/`)
```
