Instalaci\u00f3n<\/strong><\/p>\n\n\n\nSimplemente incluye VanillaCreamJS a trav\u00e9s de un CDN:<\/p>\n\n\n\n
HTML<\/p>\n\n\n
<script<\/span> src<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/vanillacream\/dist\/vanillacream.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nO, inst\u00e1lalo v\u00eda NPM:<\/p>\n\n\n\n
Bash<\/p>\n\n\n
npm install vanillacreamjs\n<\/code><\/span><\/pre>\n\n\n\ud83d\udca5 S\u00faperpoderes para elementos del DOM<\/strong><\/p>\n\n\n\nEn el n\u00facleo de VanillaCream se encuentra la funci\u00f3n $<\/code>. A primera vista puede recordarte a jQuery, pero es un universo completamente diferente \u2014y mucho m\u00e1s moderno\u2014 de funcionalidades.<\/p>\n\n\n\nEsta funci\u00f3n devuelve un elemento (o un conjunto de elementos) con s\u00faperpoderes, incluyendo vinculaci\u00f3n reactiva de estado:<\/p>\n\n\n\n
HTML<\/p>\n\n\n
<div<\/span> id<\/span>=\"app\"<\/span>><\/span>\n <div<\/span> id<\/span>=\"el\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<script<\/span>><\/span>\n const<\/span> [el, s] = $('#el'<\/span>, { counter<\/span>: 10<\/span> })\n\n el.text = ()<\/span> =><\/span> s.counter\n el.onClick(()<\/span> =><\/span> s.counter++)\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nAqu\u00ed, la funci\u00f3n $<\/code> devuelve un elemento del DOM (en este caso el<\/code>) y un objeto de estado reactivo s<\/code>. Cada elemento potenciado por $<\/code> expone propiedades poderosas:<\/p>\n\n\n\n\ntext<\/code>: establecer contenido de texto<\/li>\n\n\n\nhtml<\/code>: establecer contenido HTML interno<\/li>\n\n\n\nclass<\/code>: alternar clases CSS din\u00e1micamente<\/li>\n\n\n\non<\/code>: agregar listeners de eventos (como onClick<\/code>, onInput<\/code>, etc.)<\/li>\n\n\n\nattr<\/code>: establecer atributos HTML<\/li>\n\n\n\ndata<\/code>: establecer atributos data-*<\/code><\/li>\n<\/ul>\n\n\n\nCuando asignas una funci\u00f3n a una de estas propiedades, se vuelve reactiva, actualizando autom\u00e1ticamente el DOM cuando el estado cambia.<\/p>\n\n\n\n
Ejemplo: alternar una clase CSS<\/strong><\/p>\n\n\n\nHTML<\/p>\n\n\n
<div<\/span> id<\/span>=\"app\"<\/span>><\/span>\n <div<\/span> id<\/span>=\"el\"<\/span>><\/span>box<\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<script<\/span>><\/span>\n const<\/span> [el, s] = $('#el'<\/span>, { hl<\/span>: true<\/span> })\n\n el.class.highlighted = ()<\/span> =><\/span> s.hl\n el.on.click(()<\/span> =><\/span> s.hl = !s.hl)\n<\/span><\/script<\/span>><\/span>\n\n<style<\/span>><\/span>\n .highlighted<\/span> { background-color<\/span>: lightgreen; padding<\/span>: 10px<\/span>; }\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nAl hacer clic en el elemento se alterna el valor de s.hl<\/code>, lo que a\u00f1ade o elimina din\u00e1micamente la clase highlighted<\/code> \u2014sin manipulaci\u00f3n manual del DOM.<\/p>\n\n\n\n\u2699\ufe0f Reactividad m\u00faltiple con .set<\/code><\/strong><\/p>\n\n\n\nTambi\u00e9n puedes aplicar m\u00faltiples propiedades reactivas a la vez usando .set<\/code>:<\/p>\n\n\n\nJavaScript<\/p>\n\n\n
el<\/span>.css<\/span>.set<\/span>({\n color<\/span>: 'blue'<\/span>,\n backgroundColor: () => state.bg,\n width: () => state.x + 'px'<\/span>\n})\n\nel<\/span>.class<\/span>.set<\/span>({\n active<\/span>: () => state.active,\n box: () => state.counter >= 10<\/span>,\n otherClass: () => state.active && state.counter >= 10<\/span>\n})\n\nel<\/span>.attr<\/span>.set<\/span>({\n title<\/span>: () => `Title: ${state.title}`\n})\n\nel<\/span>.data<\/span>.set<\/span>({\n x<\/span>: () => state.x * 10<\/span>\n})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nRefs: Desestructuraci\u00f3n poderosa<\/strong><\/p>\n\n\n\nLa funci\u00f3n $.refs<\/code> acepta un elemento ra\u00edz y devuelve variables autom\u00e1ticamente enlazadas para cada ref del template, adem\u00e1s de un objeto de estado reactivo compartido:<\/p>\n\n\n\nHTML<\/p>\n\n\n
<div<\/span> id<\/span>=\"app\"<\/span>><\/span>\n <div<\/span> ref<\/span>=\"el\"<\/span>><\/span><\/div<\/span>><\/span>\n <button<\/span> ref<\/span>=\"btn\"<\/span>><\/span>Actualizar estado<\/button<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<script<\/span>><\/span>\n const<\/span> { el, btn, state } = $.refs('#app'<\/span>, { counter<\/span>: 0<\/span>, bg<\/span>: 'lightblue'<\/span>, boxClass<\/span>: false<\/span> })\n\n el.html = ()<\/span> =><\/span> `Counter: ${state.counter}<\/span>`<\/span>\n el.css.backgroundColor = ()<\/span> =><\/span> state.bg\n el.class.box = ()<\/span> =><\/span> state.boxClass\n\n btn.onClick(()<\/span> =><\/span> {\n state.counter++\n if<\/span> (state.bg !== 'lightgreen'<\/span>) state.bg = 'lightgreen'<\/span>\n state.boxClass = !state.boxClass\n })\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nIncluso puedes usar namespaces en tus refs para una desestructuraci\u00f3n m\u00e1s organizada:<\/p>\n\n\n
<button<\/span> ref<\/span>=\"btn.AZ\"<\/span>><\/span>Ordenar A-Z<\/button<\/span>><\/span>\n<button<\/span> ref<\/span>=\"btn.ZA\"<\/span>><\/span>Ordenar Z-A<\/button<\/span>><\/span>\n<button<\/span> ref<\/span>=\"btn.Random\"<\/span>><\/span>Aleatorio<\/button<\/span>><\/span>\n<ul<\/span> ref<\/span>=\"el\"<\/span>><\/span><\/ul<\/span>><\/span>\n\n<script<\/span>><\/span>\nconst<\/span> { el, btn, state } = $.refs(