Nasal Piercings Manipulator

    callbag-jsx
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.13 • Public • Published

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



    Install

    npm i callbag-jsx

    DownloadsWeekly Downloads

    7

    Version

    0.1.13

    License

    MIT

    Unpacked Size

    267 kB

    Total Files

    194

    Last publish

    Collaborators

    • lorean.victor