You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

callbag-jsx

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

callbag-jsx

callbags + JSX: super fast and super thiny interactive web apps

0.1.13
latest
Source
npmnpm
Version published
Weekly downloads
10
-56.52%
Maintainers
1
Weekly downloads
 
Created
Source

tests coverage version docs

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:

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/`)



Keywords

JSX

FAQs

Package last updated on 15 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts