Mizu.js, simplifica las web apps interactivas

mizu.js es una biblioteca JavaScript que permite crear aplicaciones web interactivas de manera flexible y adaptable, integrándose directamente con el HTML y utilizando expresiones de JavaScript estándar. Ofrece alrededor de treinta directivas que facilitan la renderización dinámica de contenido, la gestión de eventos, la creación de elementos personalizados, el enlace y modelado de atributos, el manejo de solicitudes HTTP, y la renderización de markdown y código, entre otras funcionalidades.

Una de las ventajas destacadas de mizu.js es su capacidad para funcionar tanto del lado del cliente en navegadores modernos, como del lado del servidor en entornos como Node, Deno o Bun, e incluso para la generación estática de sitios. Esto la convierte en una herramienta versátil para diversos escenarios de desarrollo web.

La sintaxis de mizu.js se basa en prefijos que indican el propósito de cada directiva:

  • * para directivas generales.

  • @ para directivas basadas en eventos.

  • : para directivas de enlace de atributos.

  • :: para directivas de enlace bidireccional (modelado).

Por ejemplo, para renderizar elementos de una lista de manera dinámica y manejar eventos, se puede utilizar la siguiente sintaxis:

<ul>
  <li *for="const item of items" @click="handleClick(item)">{{ item }}</li>
</ul>

En este caso, *for itera sobre la lista items, y @click asigna una función handleClick al evento de clic en cada elemento.

Además, mizu.js ofrece directivas para renderizar contenido enriquecido, como markdown o resaltar sintaxis de código:

<div *markdown>
  **¡Hola, mundo!**
</div>

<code *code[ts]>
  const saludo = "Hola, mundo";
</code>

En este ejemplo, *markdown convierte el contenido markdown en HTML, y *code[ts] resalta la sintaxis del código TypeScript proporcionado.

La biblioteca también incluye directivas inspiradas en htmx para manejar solicitudes HTTP y actualizar partes del DOM sin necesidad de recargar la página completa, lo que es especialmente útil en contextos de renderizado del lado del servidor.