Instalación
No hay nada que instalar. Un import map y ya:
<script type="importmap">
{ "imports": { "homly": "https://cdn.jsdelivr.net/gh/softronicve/[email protected]/homly.js" } }
</script>import { HomlyComponent, Homly } from 'homly';
class Contador extends HomlyComponent {
get basePath() { return import.meta.url; }
get templateUrl() { return './contador.html'; }
get styleUrl() { return './contador.css'; }
get store() { return (this._store ??= Homly.createStore({ n: 0 })); }
get actions() { return { sumar: () => { this.store.state.n++; } }; }
}
customElements.define('mi-contador', Contador);<!-- contador.html -->
<button data-action="sumar">+1</button>
<span data-bind="n"></span>Las directivas
El DOM se enlaza con atributos data-*. Este buscador está hecho con homly:
Es una isla real: data-model para el input, una computed
para filtrar y data-for para la lista. El filtro vive en la URL
—prueba /?q=bind— así un resultado se puede compartir por enlace.
Todo lo demás de esta página es HTML entregado por el servidor.
Por qué
-
Sin toolchain
Ni
node_modules, ni bundler, ni configuración. Editas un archivo y recargas. Esta misma página se publica con ungit pull. -
Señales, no Virtual DOM
Una señal por variable: cambiar un valor toca exactamente los nodos que dependen de él. Sin diffing, sin re-render del árbol.
-
Es la plataforma
Custom Elements,
@scopepara aislar el CSS,AbortControllerpara limpiar todo al desmontar. homly pone el pegamento, no un runtime paralelo. -
Se lee entero
Un solo archivo, 568 líneas de código con su JSDoc al lado. Cuando algo falla, puedes leer por qué.
Documentación
La referencia completa —directivas, store.resource, rutas con
parámetros, filtros en la URL y el logger de desarrollo— está en el
README del repositorio.