Horo

Micro lib for DOM without virtual DOM.

The Why

Why not?

Usage

Horo doesn't have herself own state management, but she has primitive helper utils/state, which is a simple event emitter. And You can use RxJS as before, but you should create you own wrapper for RxJS.

Simple static insertion

You can insert static value in you template.

const text = 'hello world'; // horo accepts, for static insertion, only strings
const component = horo`
    <div>
        <span>${text}</span>
    </div>
`;

Simple dynamic insertion

Also you can insert dynamic value and interact with this.

// horo accepts, for dynamic insertion, only Subscriable<string|Component>
const [foo, setFoo] = state('Hello');
const component = horo`
    <div>
        <span>${foo}</span>
    </div>
`;
setFoo('Wolrd!'); // horo will change the value in the DOM on its own.

Attributes

Similar to simple inserts, you can manipulate attributes.

const visibility = state('show');
const component = horo`
    <p class="${visibility}">
        Hello Wolrd! 
    </p>
`;
visibility.next('hide');

Kinda sorta Components

import { Observable, ReplaySubject } from 'rxjs';
import { horo, Component } from 'horo';
import { state } from 'horo/utils';

export function mount(root: Element): void {
    const component = horo`
        <div>
            ${HelloWorldComponent()}
        </div>
    `;
    root.appendChild(component.fragment);
}

function HelloWorldComponent() {
    const [component] = state(horo`
        <span> Hello World! </span>
    `);
    return component;
}

Now you just need to call mount on the root element, as you would with Vue/React/Angular application. Or any other place you want.

Event Handling

const [text, setText] = state('');
 
const component = horo`
<div>
    <input @input=${(ev: InputEvent) => setText(ev.data as string)} data-testid="input"></input>
    <span>${text}</span>
</div