Ciet

Stack: JavaScript, TypeScript

Código →

Ciet es una librería ligera en TypeScript para crear componentes HTML sin escribir HTML. Solo JavaScript/TypeScript. ~2.7 KB gzipped, cero dependencias, sin VDOM. Manipulación directa del DOM real con un sistema de reactividad propio y un router SPA incluido.

¿Qué hace a Ciet diferente?

En un ecosistema dominado por React, Vue y Svelte, ciet toma un camino contrario: sin Virtual DOM, sin compilador, sin dependencias. Usa document.createElement(), getters/setters nativos para reactividad, y MutationObserver para el ciclo de vida. El resultado es una librería que puedes aprender en 5 minutos y cuyo bundle cabe en un solo request HTTP.

Características principales

• Creación de elementos con una sola función: Ciet.create(tag, params) acepta clases, estilos (camelCase), atributos HTML, dataset, event listeners, texto, innerHTML, hijos y hooks de ciclo de vida (onMount, onUnmount). Todo tipado con TypeScript.
• Atajos para elementos comunes: Ciet.div(), Ciet.button() (con clickEvent) y Ciet.a() (con sanitización de href para bloquear protocolo javascript:).
• Sistema de reactividad: signal(), computed(), effect() y batch(). ~1 KB que implementa un sistema push-pull con suscripción automática y actualizaciones por lotes.
• Router SPA integrado: Ciet.router() genera un router hash-based con rutas estáticas, parámetros dinámicos (:id), fallback 404, y navegación programática. Todo en ~0.5 KB.
• Fragmentos y nodos de texto: Ciet.fragment() para batch appends sin reflows, y Ciet.text() para nodos de texto.

Ejemplo

import Ciet from "ciet"
const count = Ciet.signal(0)
const doubled = Ciet.computed(() => count.value * 2)
const output = Ciet.create("span", { text: "0" })
Ciet.effect(() => {
  output.textContent = String(count.value)
})
Ciet.create("div", {
  container: "#app",
  children: [
    output,
    Ciet.button({ text: "+1", clickEvent: () => count.value++ }),
  ],
})

Bundle Size

Módulo Core DOM (create + fragment + helpers + lifecycle) Reactividad (signal + computed + effect + batch) Router SPA Total

Para quien és

ciet es ideal si buscas una alternativa minimalista para prototipos rápidos, widgets embebidos, o simplemente quieres entender cómo funciona la reactividad por debajo sin la abstracción de un framework pesado. También es un excelente recurso de estudio: el código fuente completo son ~442 líneas de TypeScript repartidas en 8 archivos.

Está publicado como npm install @zesertebe/ciet y su código está en ciet bajo licencia ISC.