Ejemplos prácticos. Demos en vivo.
Elige un ejemplo para abrirlo a pantalla completa, con la vista previa en vivo y su código fuente lado a lado.
Básicos
4Los patrones de los que está hecha toda app Nuclo.
Contador
Muta el estado y luego llama a update(). El texto dinámico se refresca.
Lista de tareas
Usa list() para elementos repetidos. Llama a update() tras cada mutación.
Filtro de búsqueda
Filtra un array con JavaScript simple. Renderiza el resultado con list().
Estilos
Usa css() para las clases. Usa cx() para pequeños cambios condicionales.
Componentes
4Funciones simples con parámetros estáticos y dinámicos, hijos, listas emparejadas por identidad y datos anidados. Cada vista previa cuenta sus montajes.
Parámetros estáticos y dinámicos
Un parámetro de valor se lee una vez, cuando se construye el componente. Un parámetro de función se lee en cada update(). El componente en sí se ejecuta una sola vez en ambos casos, y el contador de montajes lo demuestra.
Hijos y modificadores
Un componente reenvía sus hijos con un spread: constructores, texto, objetos de atributos y modificadores. Las partes condicionales van en when(), así el componente que las rodea nunca se reconstruye.
Identidad en listas
list() conserva una fila mientras su elemento esté en el array: reordena, inserta y renombra sin perder inputs ni foco. Un interruptor clona los objetos en cada actualización para mostrar lo que cuesta romper la identidad.
Datos anidados
Un equipo con miembros con tareas: un componente por nivel, llamadas a list() anidadas, conteos derivados como funciones sobre los mismos objetos. Los cambios profundos parchean solo sus propios nodos.
API
13Una pequeña demo por cada bloque de construcción, las mismas que incrusta la documentación.
Constructores de etiquetas
Un constructor recibe atributos, hijos estáticos y texto dinámico. Renombrar cambia el estado y luego llama a update().
Componentes
Un componente es una función simple. Cada llamada a Counter() conserva su propio conteo.
Atributos
Los valores de los atributos pueden ser funciones. El segundo botón invierte busy y llama a update(); el disabled y el aria-busy de Save lo siguen.
Eventos
onInput y onKeyDown son atributos simples. Escribe y luego pulsa Escape para limpiar.
Ciclo de vida
onMount inicia un intervalo y devuelve su limpieza. Desmontar ejecuta la limpieza, así que el conteo se pausa hasta que el temporizador se monta de nuevo.
Actualizaciones explícitas
count++ solo cambia la variable. El texto se pone al día en el siguiente update(), desde el botón o desde cualquier otra cosa en esta página.
Valores dinámicos
Edita el nombre. El texto estático quedó fijado cuando se construyó el elemento; el dinámico se ejecuta de nuevo en cada update(). forceUpdate() reconstruye el árbol, así que el texto estático también se pone al día.
update()
Cada update() ejecuta todos los valores dinámicos, incluso cuando sus datos no cambiaron. Otras demos de esta página también suben el conteo.
scope()
Ambos botones añaden un elemento y renombran al usuario. update('cart') refresca solo el panel con scope.
when()
La primera condición verdadera gana; de lo contrario, se renderiza .else(). Una rama nueva se construye desde cero.
list()
Las filas se emparejan por identidad. Marca una fila y luego pulsa Reverse: el mismo <li> se mueve, con su checkbox y todo.
region() e into()
Un layout con una región principal apilada y una región lateral, llenadas desde fuera. Escribe en Home, abre el diálogo y ciérralo: el texto permanece. Article llena ambas regiones con un solo into().
forceUpdate()
update() refresca solo la línea dinámica de lang. forceUpdate() llama a App de nuevo y parchea el mismo <h1>. La forma explícita reconstruye solo este árbol, no toda la página.
Estilos
3Crea una clase, compón una clase y usa un tema diminuto.
Formularios
3Validación como funciones simples sobre estado simple, campos tocados, pasos y filas dinámicas.
Validación de campos
Reglas como una función sobre estado simple, errores que se muestran una vez que el campo fue tocado, una comprobación asíncrona con debounce y estado pendiente, y un envío que espera a todo ello.
Asistente de varios pasos
Tres pasos como ramas de when() sobre un único objeto de datos. Siguiente marca como tocados los campos del paso y avanza solo cuando pasan. Revisión lista todo con enlaces de Editar.
Filas dinámicas
Líneas de factura en un array renderizado con list(). Cada fila se valida a sí misma, el total cuenta las válidas y las filas conservan sus inputs cuando se añaden o eliminan otras.
SVG
27Gráficos, animaciones, herramientas y juegos con los constructores de etiquetas SVG, impulsados por datos simples, eventos de puntero y update().
Gráfico de barras
Rects a partir de un array. Su y y su height son funciones de los datos, así que update() mueve las barras.
Gráfico de líneas
Un path cuyo d se construye a partir de los puntos, con un área con gradiente y un círculo por punto.
Gráfico de anillo
Un círculo por porción. stroke-dasharray le da a cada una su parte del anillo y stroke-dashoffset su inicio.
Animación SVG
SMIL como constructores: animateSvg hace pulsar el sol, animateTransformSvg pone al planeta en órbita. Un dur dinámico fija la velocidad.
Medidor
Un arco que se llena con stroke-dashoffset y una aguja que gira con un transform de CSS. Ambos son funciones de un solo número.
Gráfico de radar
Cinco valores en cinco ejes. La forma es un único path cuyo d se calcula a partir de los datos, así que update() la transforma.
Mapa de calor
Una cuadrícula de rects cuyo fill-opacity sigue un nivel. Haz clic en una celda para subirlo; un hijo titleSvg es su tooltip.
Tooltip al pasar el puntero
Eventos de puntero en elementos SVG. onPointerEnter elige el punto activo y un grupo de tooltip se desliza hasta él.
Editor de curvas
Arrastra los manejadores de una Bézier cúbica. onPointerDown elige un punto, onPointerMove en el svg lo mueve y el path lo sigue.
Reloj
Las manecillas son líneas cuyo transform es una función de la hora. onMount inicia el tictac y devuelve la limpieza.
Iconos conmutables
Un icono de menú que se transforma en una cruz con transiciones CSS, y un corazón que salta con una animación SMIL que comienza al hacer clic.
Flujo en vivo
Dos series se desplazan a la izquierda con un temporizador. Una transición CSS tan larga como un tick suaviza el deslizamiento, y al pasar el puntero se lee cualquier muestra.
Gráfico de velas
Cuarenta posiciones leen su propia vela. Cambia el marco temporal, activa la media, pasa el puntero para ver los números o deja que la vela en vivo avance.
Carrera de barras
Diez barras nunca salen del DOM. Su posición fija un translateY, así que una transición desliza cada una a su fila cuando cambian los valores.
Gráfico de áreas apiladas
Cuatro bandas se transforman entre los diseños apilado, de flujo y porcentual. Ocultar una serie solo deja su banda con grosor cero, así que cada path conserva su forma.
Treemap
Un diseño cuadrificado por el que puedes profundizar. Cambiar la métrica desliza cada celda a su nueva caja, y hacer clic en un grupo lo reemplaza por sus hijos.
Histograma en vivo
Las muestras llegan desde cuatro distribuciones. Los intervalos se recuentan en cada cambio, una campana ajustada sigue la media y un deslizador fija el número de intervalos.
Bloc de dibujo
Los eventos de puntero dibujan polilíneas. list() renderiza una por trazo, y el trazo en curso crece en cada update().
Perilla giratoria
Un deslizador personalizado: el ángulo del puntero fija el valor, las flechas del teclado lo ajustan paso a paso y pathLength="100" convierte el valor en un trazo discontinuo.
Rueda de color
Elige un tono por ángulo y una saturación por distancia. Noventa cuñas, un gradiente radial y un disco oscuro forman la rueda.
Espirógrafo
Una rueda gira dentro de un anillo y una pluma la traza. Cada frame alarga un trazo y actualiza solo su scope().
Pelotas que rebotan
Gravedad, paredes y colisiones en un bucle de requestAnimationFrame. Tira hacia atrás y suelta para lanzar una pelota.
Manchas viscosas
Un desenfoque y un filtro de matriz de color funden las manchas entre sí. Un rastro de círculos sigue al puntero.
Grafo de fuerzas
Los nodos se repelen, los enlaces atraen y el diseño se enfría hasta reposar. Arrastra un nodo o haz clic en uno para que le crezca un hijo.
Selección y zoom
Selecciona un rango en la vista general para ampliar el gráfico de arriba. Un clipPath que sigue la selección colorea la parte elegida.
Tres en línea
Juega contra la computadora. when() añade cada marca, y una animación CSS sobre su trazo la dibuja.
Texto circular
Escribe una insignia. textPath curva el texto alrededor de un círculo y textLength lo ajusta exactamente a una vuelta.
Enrutamiento
6Tablas de rutas, coincidencias, la ruta activa, capas y loaders. nuclo-router es un paquete separado: npm install nuclo nuclo-router.
Una app con rutas
Una app real con su propio router, corriendo en el marco: una tabla de rutas, un outlet(), enlaces simples, un estado pendiente y un 404. Navega un poco y luego usa Atrás.
Rutas anidadas
Docs es un layout con rutas hijas. Un tema se renderiza en su outlet() y los enlaces ./topic se resuelven respecto a la ruta del layout. Escribe en las notas y luego cambia de tema: el layout nunca se reconstruye.
Loaders de ruta
La página de post exporta un load() que se ejecuta antes de construir la página. Observa router.pending mientras espera, y el estado de error con Reintentar cuando lanza una excepción en el post roto.
Capas
El formulario de pedido empuja la página de cliente como una capa y espera su resultado. El formulario no se vuelve a renderizar, así que sus notas sobreviven. Guardar resuelve el push; Cancelar o Atrás lo descarta.
Varios routers y carga
Dos routers, dos spinners. El layout de la tienda y su sección tienen sendos load(): corren en paralelo bajo un único router.pending. La barra lateral tiene su propio router, creado pero nunca iniciado, con su propia bandera de carga refrescada desde onNavigate.
Coincidencia de patrones
Patrones estáticos, :param y *rest, y una tabla de secciones montada bajo dos padres. Escribe una ruta y observa match(), que resuelve sin cargar nada.
Apps
15Programas más grandes, a pantalla completa, con su código fuente real en pestañas: un escritorio con ventanas, una cuadrícula de datos, un chat, juegos, editores y bibliotecas que gestionan su propio estado.
Constructor de páginas
Escribe directamente en la página, arrastra los asideros para reordenar bloques o moverlos a layouts, pulsa / para insertar y haz clic derecho para ver acciones. Da estilo a layouts grid y flex, deshaz ediciones, previsualiza a tamaño de teléfono y exporta HTML.
Paso a paso de algoritmos
El motor es JavaScript simple: generadores que mutan un array y hacen yield tras cada paso. El reproductor llama a next() y update(); las barras son un list() sobre los mismos objetos, así que un intercambio mueve dos elementos.
Tablero Kanban
Un tablero de equipo: añade tareas, asígnalas a personas, edítalas en un diálogo, filtra por persona o búsqueda, arrástralas entre columnas y deshaz una eliminación. Columnas y tarjetas son arrays simples de los mismos objetos; cada movimiento es un splice(). Las filas se emparejan por identidad, así que arrastrar, ordenar, asignar o editar una tarjeta reutiliza su elemento. El contador de montajes en pantalla lo demuestra.
Inspector de three.js
Una biblioteca que gestiona su propio estado. El panel lee posiciones, colores y banderas directamente de los objetos de three.js y les escribe las ediciones de vuelta. El bucle de render llama a update() una vez por frame; nada se duplica.
Scroll infinito
Un feed sin fin: un fetch() falso y rápido genera cada página al vuelo en un único array simple. Solo las filas cercanas al viewport están en el DOM: el list() renderiza posts.slice(start, end) entre dos espaciadores, así que la página sigue ligera con cien mil posts. Un sentinela al final real pide la siguiente página antes de entrar en pantalla.
Escritorio
Un escritorio funcional con Archivos, Notas, Terminal, Calculadora, Temporizador, un tablero Kanban, Finanzas y un Calendario. Crea y organiza carpetas, edita notas y usa comandos de shell sobre un disco simulado compartido, guardado en tu navegador. Escribe en la Calculadora directamente desde el teclado, haz clic en cualquier parte del Terminal para enfocar su línea de entrada, arrastra tarjetas entre columnas en el tablero, o lleva un libro de cuentas en la hoja de cálculo de Finanzas y mira cómo se mueven sus gráficos — el libro vive en IndexedDB. Las ventanas conservan su estado mientras las mueves, redimensionas y cambias entre apps; un temporizador en marcha llena la bandeja de la barra de tareas con into().
Grafo de nodos
Conecta números, texto e interruptores a través de nodos de matemáticas, comparaciones e If, y cada valor se actualiza mientras escribes. Las funciones también son grafos: sus nodos Input y Output son los puertos de cada Call, y un Call puede nombrar su propia función, así que factorial y sum recurren con un If como salida. El motor es JavaScript simple: cada nodo es un generador que hace yield para pedir una entrada, y un único bucle los dirige desde su propia pila, así que sum(50000) anida cincuenta mil llamadas en alrededor de una décima de segundo sin tocar la pila de llamadas de JavaScript. Solo un presupuesto de pasos detiene una recursión sin salida. Arrastrar escribe x e y y actualiza solo el scope del lienzo; el contador de ejecuciones muestra que el grafo nunca se ejecuta por un movimiento.
Cuadrícula de datos
Una tabla de trabajo sobre 10 000 objetos de fila simples. Búsqueda, filtro, orden y paginación son funciones simples sobre el array, y el cuerpo de la tabla es un list() sobre la página actual. Las filas se emparejan por identidad, así que ordenar mueve las filas que permanecen en la página, y una fila editada es el mismo objeto en todas partes. El contador de filas construidas lo demuestra.
Chat
Un chat con tres canales, cada uno un objeto simple: su historial, cursor, indicador de escritura, borrador y posición de scroll, así que cambiar de canal conserva cada uno exactamente como estaba, y update("chat-sidebar") refresca solo las insignias de no leídos. El historial carga hacia arriba sin fin con unshift() y un scrollTop que crece lo que mide lo añadido. Tu mensaje aparece antes de que el servidor lo tenga, send() parchea el mismo objeto, y Reintentar, Editar, Eliminar y las reacciones nunca reconstruyen su fila. Los mensajes renderizan código, negritas, enlaces y @menciones.
Panel en vivo
Tarjetas que se refrescan a distintos ritmos, desde 20 veces por segundo hasta una vez por segundo. Cada tarjeta es un scope(), y su temporizador llama a update() con el id de esa tarjeta, así que un tick evalúa solo esa tarjeta. Cada valor dinámico se cuenta en pantalla: cambia a un update() sin más y el reloj se evalúa unas cien veces por segundo para cambiar una sola vez.
Editor de píxeles
La imagen es un único array simple de 1024 cadenas de color, y cada celda lee su color de él. Un trazo escribe en el array y llama a update(); al terminar, el editor guarda una copia con slice(). Deshacer, rehacer y cada paso del list() del historial vuelven a poner un array anterior: sin store, sin datos inmutables.
Serpiente
Un bucle de juego es un temporizador que llama a step() sobre objetos simples y luego a update() una vez por tick. La serpiente es un list() de sus objetos celda, y en cada tick el objeto de la cola pasa a ser la nueva cabeza, así que un elemento se mueve y ninguno se construye: el contador de segmentos construidos solo sube cuando la serpiente come. La comida aparece con una animación de keyframes().
Secuenciador de pasos
Una biblioteca que gestiona su propio reloj. Web Audio reserva cada nota por adelantado en su propia línea de tiempo, y el patrón es un array 2D simple de booleanos que la cuadrícula invierte y el planificador lee, así que un clic se oye en la siguiente pasada. El cabezal actualiza solo su scope() cuando cambia el paso audible. El audio arranca en el primer Play y se cierra en la limpieza del montaje, así que salir del ejemplo detiene el sonido.
Selector de idioma
Cada etiqueta es un valor estático, escrito como en una app de un solo idioma, así que update() nunca la vuelve a leer: los clics del carrito refrescan solo cantidades y totales. Cambiar el idioma llama a forceUpdate() sobre este árbol, que ejecuta el componente de nuevo y parchea los mismos elementos, lang y dir incluidos. Dinero, plurales, fechas y listas vienen de Intl, y el carrito y un cupón escrito sobreviven al cambio.
Editor de temas
Una pequeña biblioteca de componentes: createCss() nombra los tokens y variants() construye botones, insignias, tarjetas, inputs, alertas e interruptores a partir de ellos. Los tokens son variables CSS, así que cada clase se compila una vez. Cada control escribe un objeto de tema simple y llama a update(), que reescribe el texto de un único elemento style.