Pues esto es lo que vamos a aprender hoy, amigos y amigas, esto es lo que nos toca, así que tenemos Lit, que no sabéis lo que es Lit, no os preocupéis que lo vamos a explicar, ¿vale?
¿Qué es Lit? ¿Para qué sirve? ¿Por qué es interesante? ¿De quién es? ¿Quién ha creado esto? ¿Por qué deberías aprenderlo? ¿Quién lo está usando? Todo, todo, todo.
Y quédate, porque de verdad es que yo creo que Lit es... Mira, pocas veces me vais a escuchar decir esto, ¿eh? Pocas veces.
Porque ya sabéis que yo soy un poco... ¿Cómo decirlo? No soy muy creyente de cada framework que sale o cada biblioteca que salga cada semana.
Por ejemplo, yo hice el vídeo de SolidGS y pese a tener muchos comentarios negativos en el vídeo en YouTube, por gente diciéndome, bueno, ya está la gente, que otros siempre estáis ahí, que de aprender más cosas, parad y tal.
Como si fuese culpa mía que salgan, ¿sabes? ¿Yo qué he hecho? Yo solo estoy mostrándote, no matas al mensajero.
Total, que ya sabéis que yo era un poco, pues, no muy creyente de SolidGS, por ejemplo.
Pero tengo que decir que con Lit, ¡eh! Ojo, cuidado con Lit. A mí es una biblioteca que me llama bastante la atención
porque está muy basada en Web Components y creo que de la forma correcta, por fin.
O sea, durante mucho tiempo hemos tenido aproximaciones interesantes como Polymer, SkateGS, Stencil también, que es más un compilador Stencil.
Hemos tenido un montón de cositas, ¿vale? Pero Lit me gusta, me gusta, ¿eh? Tiene cositas que digo, bien, bien, bien, me gusta, me gusta.
Hoy que tengo, Got, hoy tenemos esto, tenemos Lit, ¿vale? Tenemos Lit.
Pero dejadme antes de que empiece, hoy nos toca aprender Lit.
¿Y qué es Lit? ¿Para qué sirve Lit? ¿Quién ha creado Lit? ¿Cuál es la ventaja de Lit? ¿Lit? ¿Lit? ¿Lit? ¿Lit? ¿Por qué Lit?
Bueno, pues ahora yo te lo explico. Esto, amigo, amiga, esto es Lit, ¿vale?
Lit básicamente es una biblioteca que te permite crear Web Components reutilizables de una forma simple, rápida y con el mínimo boilerplate posible.
Como podemos ver, esta es la página oficial, lit.dev. ¿Y quién está detrás de Lit? ¿Quién está detrás?
Pues nada más y nada menos que Google, que además está utilizándolo cada vez más, más incluso que Polymer, más incluso que Angular.
Los últimos desarrollos que están haciendo, están haciendo una migración a componentes con Lit.
Así que, ojo, cuidado, porque Lit realmente está tomando mucha forma.
¿Y qué es lo que tiene Lit que realmente, pues, está enamorando tanto y que cada vez se está llamando más la atención, ¿no?
Pero, pues, lo que tiene es que está basado muy fuerte en Web Components, ¿vale?
En la plataforma. Y hace que escribirlo sea muy sencillo.
Por ejemplo, ya nos dice aquí que es simple, ¿vale? Simple.
Que te puede utilizar el boilerplate, porque al final lo que haces con Lit es construir encima de los Web Components.
Y esto lo que hace es que, según esto, hace que seas feliz y productivo.
Tienes reactividad, templates declarativos y un montón de features como para manejar eventos de una forma muy sencilla, muy similar a lo que hemos visto a diferentes bibliotecas, ¿vale?
Así que, vamos a ver cómo Lit nos ayuda a crear como componentes reutilizables encima con una capa de abstracción muy fina de encima de los Web Components.
Rápido. ¿Por qué rápido? ¿Por qué rápido?
Porque tiene un footprint pequeño y tiene actualizaciones instantáneas.
Fíjate, ocupa 5Ks. La biblioteca de Lit ocupa 5Ks.
Si la comparamos con otra, por ejemplo, vamos a poner React.
Pues me dirás, ¡guau! Si React es la mitad. ¡No!
También tienes que contar React DOM, porque para utilizarla en el navegador son dos.
Así que tendríamos 40 más los dos y medio antes, 42.
Pues ya podemos ver que es casi menos de una décima parte, a lo mejor, pero es bastante más pequeño, ¿no?
Como podemos ver, es bastante más pequeño.
O sea, son 5, casi 10 veces más.
Casi, casi. A lo mejor 9, 8 veces más ocupa React.
5 míseros Ks para tener un montón de funcionalidades, ¿eh?
Además, te ayuda a tener el bundle pequeño, ¿no?
Cuando haces una aplicación sencilla, pues no necesitas tantas cosas.
Pues Lit te ayuda a esto y hace que todo funcione mucho más rápido.
Las renderizadas son súper rápidas.
Además, Lit solo toca las partes de tu UI cuando se cambian.
O sea, eso ya lo veremos. Es muy típico de las librerías.
Pero no tiene un DOM virtual, ¿vale?
Esto es más parecido a Svelte.
No tiene un DOM virtual como sí que lo tiene React.
Y finalmente, pues su tercera pata y seguramente una de las más importantes, Web Components.
Ahora, hay gente que dice, ¿qué son los Web Components?
¿No? Que no sabemos qué son los Web Components.
¿Por qué son importantes los Web Components?
A ver, los Web Components en realidad no es una cosa.
Los Web Components son como un paquete de diferentes tecnologías que te permiten crear como elementos personalizados y reutilizables dentro de tu página web, en tu HTML, ¿vale?
Pero hay que tener en contexto que los Web Components como tal no es una sola cosa, sino que digamos que son diferentes tecnologías que te permiten hacer esto.
Por ejemplo, lo más visual de los Web Components sería lo que se llaman Custom Elements.
Los Custom Elements son justamente esto.
Un conjunto de APIs de JavaScript que lo que te permiten es definir elementos personalizados.
¿Y qué quiere decir esto de elementos personalizados?
Pues es muy sencillo.
En elementos personalizados, imagínate, igual que en el HTML, tenemos la etiqueta div, section, aside, el anchor, image y todo esto.
Esos son elementos, ¿verdad? De HTML.
Un elemento personalizado que tú podrías crear con elementos personalizados, con un Custom Element, sería crear tu propia etiqueta y que la puedas utilizar.
Así que eso es lo que te permitiría.
A partir de aquí, pues tenemos más cosas.
El Shadow DOM, los Enmascript Modules.
Hay un montón de tecnologías que lo que te permiten justamente es crear lo que se le llama como Web Components, ¿vale?
Componentes web.
O sea que es parte de la plataforma y obviamente cada vez tenemos más compatibilidad.
De hecho, si nos vamos al Can I Use, vamos a Web Components para ver un poco cuál es la compatibilidad.
Es Custom Elements.
Fíjate que no pone Web Components como una feature, porque es que hay muchas features.
HTML Impost también en la parte de los Web Components, HTML Templates, Shadow DOM, ¿ves?
Y los Custom Elements que es, ¿ves?
Una de las key features de los Web Components System, ¿vale?
Para que tengas clarísimo, los Web Components es un conjunto de cosas.
Entonces, en los Custom Elements seguramente lo más importante.
Pues podemos ver que tienen casi un soporte bastante extenso, del 95%.
En el caso de Safari, tienen, ¿ves?
Alguna cosilla ahí que no soportan, pero es algo menor, no tan importante, no tan...
Drástico, o sea que lo puedes utilizar sin problemas.
HTML Impost al final está deprecado, o sea que esto no tienes que hacerle mucho caso.
Lo que sí que es importante es el Shadow DOM, que como podemos ver también tiene un buen soporte, 95%.
Y el Shadow DOM, pues iremos viendo, ¿eh?
De qué trata, qué es importante.
Lo vamos a ver en Leads seguramente, porque lo utilizarán seguro.
Pero bueno, básicamente el Shadow DOM lo que te permite es tener un árbol de elementos que de alguna forma es como transparente para ti.
O sea, no lo puedes...
O sea, igual que tenemos el DOM, un árbol de elementos nosotros en nuestro HTML, el Shadow DOM es como un árbol de elementos dentro de ese árbol de elementos
que lo que nos permite es que sean totalmente agnósticos el uno del otro.
O sea, encapsula tanto el CSS como todo el DOM del que está por arriba, o sea, el principal, el que estamos utilizando.
Y eso es lo que nos permite justamente es tener estilos que no se vayan a colisionar y cosas así.
Bueno, lo iremos viendo, no os preocupéis si no lo entendéis del todo.
Porque seguro que con Leads vamos a ir viendo un poquito estas cosas.
Pues eso, Web Components.
Ahora que te he contado que son los Web Components.
Bueno, cada Lead Component es un Web Component nativo, ¿vale?
O sea, que esto lo que te da son todos los superpoderes, la interoperabilidad.
Ahora, los Web Components lo bueno que tiene es que puede utilizarse en cualquier sitio.
O sea, tú utilizas el HTML y ya está.
Y también en la gran mayoría de los frameworks.
Es verdad que, por ejemplo, React no tiene una muy buena compatibilidad para ciertas cosas, especialmente temas de atributos y cosas así.
Pero se pueden utilizar y hay técnicas para utilizarlos sin ningún problema, ¿vale?
Ahora, ¿qué significa esto?
¿Qué es lo bueno que tienen los componentes que tú hagas con Lead?
Hombre, pues que como están basados en la plataforma, pues ya pueden pasar 5, 10, 15 años que van a soportar muy bien el paso del tiempo, ¿vale?
No es como si tú ahora haces un design system, un catálogo de componentes y lo haces con una librería en concreto.
Claro, eso cuando pasen 5 años, pues tienes que tener cuidado de que la librería no desaparezca.
Siempre vas a estar atado a esa librería.
Como Lead, que también es una biblioteca, ¿no?
También le llamo librería, pero en realidad la traducción correcta es biblioteca.
También es una biblioteca, pero es, uno, bastante pequeña y lo segundo está basado en un estándar de la web.
Así que no debería, el estándar de la web es muy difícil que cambie.
Así que eso es una cosa buena.
Aquí tenemos un poquito el tema este, ¿no?
Custom Elements, ¿no?
Esto es lo que justo os comentaba, ¿no?
Los Custom Elements, que aquí en este caso, aquí esto sería ya código con Lead.
Lead, estaríamos importando Lead de aquí, HTML, CSS y Lead Element.
Y aquí tendríamos ya unos decoradores.
Si no sabéis lo que son los decoradores, bastante interesante.
Pero básicamente los decoradores es como para añadir una funcionalidad por encima de una clase, una propiedad, de un método.
Y son bastante potentes, pero tengo que avisarte de una cosa.
Los decoradores todavía no están de forma oficial en el...
Ahora no me sale la palabra.
En Enmascript, pero quería decirte que están en un stage.
Todavía están en una fase.
Todavía no están cerrados del todo, ¿vale?
O sea, que todavía son un poquito experimentales.
Están cerca de salir, pero todavía no están cerrados del todo.
Solo para que lo tengas en cuenta.
Por lo tanto, los navegadores no soportan los decoradores, ¿vale?
Ahora mismo.
Entonces, dicho esto, te permite con Custom Elements, ¿lo ves?
En este caso, utilizando el decorador Custom Elements, le estamos diciendo cuál es la etiqueta que tenemos que utilizar para utilizar este componente.
Al final, este componente, si te fijas, se parece muchísimo, muchísimo a los componentes que, por ejemplo, hacíamos con React con las clases.
De hecho, aquí le cambias el little element por react.component.
Es verdad que aquí hay un decorador que ahora te explico, que esto más o menos es como una prop, más o menos.
Y aquí tenemos el método render y ya está.
Entonces, en lugar de tener JSX, tenemos aquí un string, pero que le tienes que poner HTML y ya está.
Pero se parece un montón.
Se parece un montón.
Y aquí sería cómo lo estamos utilizando, ¿no?
Este es simple grating.
Este es justamente la etiqueta que le hemos puesto aquí arriba con el decorador Custom Elements.
Si le hubiéramos puesto otra cosa, pues lo hubiéramos tenido que utilizar de otra forma.
Importantísimo de los Custom Elements.
Si no lo sabes, esto es súper importante.
Los Custom Elements tienen que tener siempre dos segmentos.
¿Cómo que dos segmentos?
Bueno, pues aquí puedes ver simple grating, ¿no?
Y aquí tienes como un guión en medio.
Todos, todos los Custom Elements que crees, todos, todos, todos, tienen que tener dos segmentos.
Tú puedes poner aquí X, guión, lo que sea.
¿Por qué?
Porque, claro, obviamente, solo tienen que ser con dos segmentos para asegurarse que no colisiona con el HTML.
Si el día de mañana, imagínate que tú haces un Custom Elements y le llamas portal.
Y de repente, de hecho, se está trabajando en ello, en este elemento del HTML que se llame portal.
Pues entonces habría una colisión y se le haría pardísima.
Bueno, pues para evitar esto, los Custom Elements solo pueden ser de dos segmentos.
O sea, no puede ser de uno.
Tiene que ser de más de uno.
Para que lo sepas y lo tengas en cuenta.
Puede ser de más de, puede ser de tres, de cuatro, pero no puede ser de uno.
Ahora, esto sería para el Custom Elements.
Scope Styles, esto es lo que decíamos, ¿no?
Que Lead lo que te proporciona es que tengas estilos que están encapsulados en este Custom Elements
gracias al Shadow DOM, justamente.
¿Ves?
Lo que tenemos aquí es que puedes utilizar un selector tan sencillo como P,
que sería esta P de aquí, porque total, este estilo de aquí va a quedar encapsulado
dentro de este árbol de elementos que se va a generar aquí, ¿vale?
Se le llama Shadow justamente por eso, ¿no?
Porque está en la sombra.
No lo va a ver, no va a colisionar nada de esto con lo que teníamos en nuestro HTML ya, ¿vale?
Luego, propiedades reactivas.
Esto es algo parecido, digamos, a las props, aunque también es a la vez un poquito de estado.
Esto lo iremos viendo ahora.
Y lo que hace es que cada vez que cambia, pues se vuelve a ejecutar este método de render, ¿vale?
Y, bueno, templates declarativos.
Esto es muy parecido a lo que ya tenemos con todos, o sea que sin ningún problema esto lo iremos viendo, ¿vale?
¿Qué puedes hacer con Lead?
Pues nada, componentes que sean reutilizables, design system y aplicaciones y sitios, ¿vale?
O sea, es que Lead al final no deja de ser también, fíjate, una biblioteca para crear interfaces de usuario.
¿Qué quiere decir eso? Esto es justamente una biblioteca JavaScript para crear interfaces de usuario.
Es que Lead es exactamente lo mismo en este aspecto, ¿vale?
Otra cosa es que la aproximación es un poco distinta, punto.
Pero ya está.
Pero es que lo que te permite Lead es crear interfaces de usuario con JavaScript,
solo que en este caso pues está muy enfocado a utilizar toda la tecnología nativa, lo más cerca de la plataforma.
Y aquí tenemos algunas de las organizaciones que ya lo están utilizando.
Tenemos Adobe y podéis ver componentes.
Esto está muy, muy, muy interesante, ¿eh?
Porque mira, vais aquí, Spectrum Web Components.
Pues todos estos componentes que veis aquí, fijaos, ves que es SP Button.
Pues todos estos componentes están hechos con Lead.
En este caso están hechos con Lead Element, que era una versión muy anterior y tal.
A ver, Lead Element, no sé si los habrán actualizado y tal.
Pero bueno, que aquí podemos ver que todos estos componentes pues están hechos con esa tecnología.
Aquí todos, todos los que veáis.
Mira, Google y pone Many Projects.
Many Projects.
La verdad es que Google lo está utilizando cada vez más, ¿eh?
Es súper interesante.
Me dije Haskell, hombre, React es algo más que interfaz de usuario.
También está pensado para hacer aplicaciones en el navegador.
Que hoy el día el navegador es casi un OS.
Pero vamos a ver, React, o sea, una aplicación, ¿qué es?
Si no es una aplicación, es una interfaz de usuario.
Aquí lo tienes también, ¿eh?
O sea, Lead puede hacer exactamente lo mismo que React.
O sea, en ese término de webs, aplicaciones y tal, es exactamente lo mismo, ¿no?
Una aplicación no deja de ser también una interfaz para el usuario, pero como lo quieras pensar.
Pensad que Lead no deja de ser JavaScript.
Al final, lo que va a estar, ¿dónde va a estar el problema?
Yo creo, ¿vale?
Lead seguramente no va a tener tanto soporte a server-side rendering.
Ahí es donde realmente vamos a encontrarnos problemas, ¿no?
Tiene un paquete que es experimental, que seguramente vamos a intentar echarle un vistazo,
que te permite hacer server-side rendering, pero no está tan maduro como es React,
que lleva años y paños ya haciendo server-side rendering, ¿no?
Ya estamos cansados y todo de hacer server-side rendering y tenemos frameworks tan potentes
como NextDS que ya esto nos lo solucionan súper fácil.
Esto, a día de hoy, en Lead no está solucionado.
Por lo tanto, una cosa que habría que tener en cuenta y habría que tener un poco de cuidado
es que, obviamente, al no hacer server-side rendering, pues podríamos tener problemas
con temas de SEO, que no tiene por qué, pero es verdad que puede pesar.
O sea, es una cosa que puede pesar a día de hoy.
Pero ya os digo que se está trabajando en ello y por eso digo que tiene muy buena pinta,
porque se han tomado súper en serio el tema de, uno, server-side rendering y, dos, interoperabilidad.
¿Qué quiere decir esto? Pues que están trabajando muy fuerte en tener sus paquetes
para que puedas utilizar muy fácilmente cualquier lead element, cualquier elemento de lead
dentro de React y así. O sea, que me parece muy interesante y, además,
que funcione con server-side rendering, lo cual es todavía más interesante, ¿vale?
Así que vamos a darle. Vamos a darle, vamos a seguir.
Ya hemos visto aquí un poquito de todo, ya hemos visto todo esto.
Pues si os parece, yo creo que lo mejor es hacerse el tutorial, ¿no?
Porque aquí esto tiene un tutorial que normalmente, pues, ayuda bastante
y podemos mirar un poco línea por línea.
Al final son pocas cosillas y luego podemos intentar hacer, si eso, una aplicación, ¿no?
Lead tutorial. This interactive tutorial, bueno, os lo digo en castellano,
voy a intentar traducirlo mientras lo voy haciendo, ¿vale? Voy a intentar, voy a dar my best
para comentarlo. Vamos a ver. Dice, este tutorial interactivo nos va a ayudar
a aprender desde el principio qué es lead y ver lo simple que es y todo esto.
Cada paso de este tutorial nos introduce una o dos features de lead.
Así que vamos a utilizar el editor interactivo para añadir algunas features
con este código de ejemplo con el que está empezando.
Y entonces vamos a poder aquí, aquí veremos la preview del output.
Si nos quedamos en algún momento, espero que no, nos quedemos, pues, por lo que sea,
nos quedamos ahí atascados, le podemos dar al botón solve para ver el código finalizado.
Y entonces cuando hagamos clic reset, podemos volver a empezar desde el principio.
O sea, yo escribo aquí, bla, le doy a reset, vale, y vuelve desde el principio.
Muy bien, el editor nos muestra, pues, un componente lead básico,
que ahora os comentaré línea por línea, ¿vale?
Y entonces así es como lo vamos a ir creando.
Algo así parecido iremos haciendo en cada paso.
Por ahora me dice que solo que intente los botones solve y reset.
Bueno, me voy a fiar.
Los lead components son web components, ¿vale?
Así que ellos actúan como elementos HTML normales y corriente.
Por eso, fíjate que aquí tengo dos archivos.
El myelement.ts de TypeScript, ¿vale?
Pues se pueden hacer con JavaScript o TypeScript o lo que tú quieras.
Y el index.html.
Fíjate que aquí en el index.html tenemos este myelement.
¿Cómo funciona esto?
Pues que aquí tú tienes un script type module donde cargamos el myelement,
que está aquí, y una vez que lo cargamos, tú en el HTML lo utilizas así.
Lo cual es bastante espectacular, ¿no?
Está bastante chulo.
O sea, aquí le llamamos myelement, como le podemos haber llamado myapp.
Y entonces, para asegurarnos que podemos llamarle myapp,
pues aquí tendríamos que cambiar el custom element, el nombre.
Le ponemos aquí myapp y ya nos volvería a funcionar, ¿vale?
Entonces, vamos a echarle un vistazo al index.html.
Bueno, ya lo he hecho.
Y entonces podemos hacer el review de la documentación y tal.
Bueno, voy a abrir la documentación por si acaso.
Pero, mira, encima nos dice todas las cosas que se pueden crear.
La verdad es que podría haber empezado por aquí, ¿eh?
Pero, bueno, da igual.
Mira, ya veis que tenemos propiedades, estados.
Bueno, bueno, pinta bien, pinta bien.
Vale, pues aún un poco ahora que ya sabemos cómo funciona,
voy a revisar un poco el código y os lo comento con vosotros, ¿vale?
Línea 1, importamos lit element y html de la librería o la biblioteca,
el paquete lit.
Y importamos custom element y property de lit barra decoraditos.js.
Estos dos son decoradores que utilizaremos más adelante.
De hecho, el primero que utilizamos es el custom element.
Este decorador lo que está haciendo es afectar a toda esta clase de
my element extends lit element, ¿vale?
Esta clase de aquí está afectada por este decorador.
Lo que estamos diciendo, básicamente, es decorame esta clase con esta
funcionalidad.
Y le estamos pasando por parámetro al decorador cuál es el nombre de la
etiqueta que deberíamos poder utilizar aquí, que es este de aquí, ¿vale?
Entonces, ahora ya tenemos la clase.
Tenemos que extender delete element.
Y esto, por lo tanto, ya tendrá inicializado un montón de cosillas.
Y, finalmente, le decimos las propiedades que tenemos.
En este caso, tenemos una propiedad que su nombre es versión y el valor
inicial es un string que es starting, ¿vale?
Empezando.
Y, finalmente, tenemos que tener un método render para que renderice
algo nuestro lit element.
Y, en este caso, return, devolvemos.
Ojo con este HTML.
Importante, esto no es JSX.
Esto es un string como un template string.
Básicamente, solo que se lo estamos pasando aquí a este método HTML.
Esto es una forma que se pueden utilizar las plantillas con algunos métodos,
en este caso de HTML, que fíjate que no está haciendo esto, ¿vale?
No está haciendo esto porque no es necesario.
Lo que está haciendo en este caso es pasarle directamente a este método, ¿vale?
El template string.
Esto, ahora no recuerdo exactamente cómo se llama el nombre,
pero era plantillas de texto, yo creo que es.
Es que, claro, es lo mismo que template string.
Plantillas literales es tag template literals.
Tag template literals.
Así se llama, ¿eh?
No sé, como plantillas etiquetadas y secuencias de escape.
Plantillas etiquetadas.
Puede ser que sea plantillas etiquetadas.
Puede ser.
Es que no sé cómo se dice en castellano.
Plantillas etiquetadas, efectivamente.
Mira, aquí tendríamos un ejemplo, ¿vale?
Y veis aquí que es justamente el método.
Y aquí ya le pasa esto directamente.
Y entonces, lo que le llegaría al método sería así.
Los strings, expersona, exedat, ¿vale?
Llega de una forma especial.
Pero, bueno, eso no es importante.
Lo importante es que sepáis cómo hay que hacerlo
y que no es justamente lo que sería aquí poniendo el método, ¿vale?
Entonces, HTML y lo que queremos renderizar.
Pues vamos a poner aquí.
Hola, gente de Twitch.
Y más tarde, YouTube.
¿Vale?
Y podemos decirle aquí.
Esta es la versión starting del código.
Bueno, ya veis que funciona, que es lo importante.
Muy bien.
Pues nada, vamos al siguiente.
Porque este ya está.
Vamos, define component.
Bueno, ah, mira.
Si es que nos lo dejan ahora de cero.
La madre que os trajo.
Muy bien.
Venga, nos dice define un componente.
Bueno, así practicamos otra vez.
En lead, todas las cosas empiezan,
casi todas las cosas empiezan definiendo un componente.
Así que nos va a dar un proyecto para empezar.
Ya nos ha dejado los imports.
Perfecto.
Define un componente.
Bueno, pues ponemos custom element
y vamos a poner la etiqueta que sea my element.
Hacemos class my element
y extendemos delete element.
Uf, element.
Y ya está, ¿vale?
Ahora, my element provee una implementación para tu componente.
Y este decorador lo que hace es registrar en el navegador
que tenemos un nuevo tipo de elemento que es este de aquí.
Perfecto.
Ahora, el todo text debería desaparecer.
De hecho, ha desaparecido.
Antes tenía ahí un todo text.
Vamos a ver si lo quito.
¿Ves?
Todo.
Y si hago, pum.
De hecho, aquí lo puedes ver.
En el my element, como le ha puesto un párrafo,
cuando no estaba definido, salía el párrafo este.
Porque, claro, no sabía cómo renderizar eso ni nada.
Entonces, pensaba que esto era HTML.
Y entonces, este párrafo se veía.
Por eso, ahora desaparece.
Porque ahora sí que tiene una implementación
y no hemos dicho que tenemos que hacer con lo que estamos envolviendo.
¿Vale?
Se parece, de nuevo, se parece al react.component.
¿Vale?
Es parecido, pero obviamente no es exactamente igual que React.
Tiene bastantes diferencias.
¿Vale?
Como iremos viendo.
Ahora, añadimos un render.
Método render.
Vamos a poner método render.
Retour.
HTML.
Y vamos a poner, hola mundo, desde my element.
¿Vale?
Y ya está.
Este sería nuestro método.
Es importante.
Ahí.
Tendríamos que cerrar aquí.
Es importante eso, que el render al final es un método
que necesita nuestro little element para decir lo que le tiene que renderizar.
Porque si no, lo importante es que aquí le pasemos nuestro template literal
para ver qué es lo que tiene que devolver.
Y ya está.
¿Vale?
Pues con esto vamos a seguir a por el siguiente.
Venga, Properties and Expressions.
Vamos con ello.
Properties and Expressions.
Little elements puede tener propiedades reactivas.
¿Vale?
Cambiando una propiedad reactiva, lo que hace es disparar la actualización del componente.
Esto es lo mismo que React.
Es muy parecido.
Si sabes React, no te va a costar nada pillar muchas de las cosas que tenemos aquí.
¿No?
Entonces, nos va a dar...
Aquí tenemos una definición muy básica de un componente.
Y en este paso lo que vamos a hacer es declarar una propiedad reactiva.
Así que vamos a poner Property.
Y aquí vamos a tener que el Message...
Le decimos que es del tipo String porque esto es TypeScript.
¿Vale?
Aunque lo podríamos no poner, ¿eh?
Si queremos.
Solo para que lo tengáis en cuenta.
O le podemos poner el tipo.
¿Vale?
Y entonces ya tenemos aquí una propiedad que pone MessageStringHelloGain.
Ahora, ¿cómo podemos hacer para acceder justamente a esto?
¿Vale?
Una vez que le hemos dicho, vale, este Message es una propiedad de nuestro elemento.
Importante.
¿Por qué necesitas este decorador?
¿Vale?
¿Por qué necesitas este decorador?
Igual esta sintaxis no te suena.
¿Vale?
Pero las clases pueden tener propiedades y en lugar de utilizar el constructor como se haría normalmente,
normalmente se haría así, ¿vale?
Para tener propiedades de la clase se haría algo así, ¿vale?
Harías This, Property, ¿vale?
El nombre PropertyName, ¿vale?
Y aquí pues podría ser Hello, ¿vale?
Bueno, vamos a poner otra cosa.
Dos.
Entonces, el problema que tenemos aquí...
Claro, dice, no existe en OnTime, no sé qué, no sé cuántos.
Bueno, pero no importa.
El tema es que esto, para quitarte el constructor, lo puedes hacer directamente aquí, ¿vale?
Tú puedes hacer esto y ya está.
Y así de fácil es.
Es mucho más sencillo, sin necesidad de tener que crear, poner el constructor, todo para llamar al super y todo esto, ¿vale?
Así que mejor si lo haces así.
Ahora, esto, lo que estamos haciendo aquí es añadirle una propiedad a la clase MyElement.
Pero esto no significa que cuando actualicemos el PropertyName,
hagamos que esto sea una propiedad realmente del elemento y tenga reactividad.
O sea, que cuando cambie el valor de este a 3, o a 3, o a 4, o tal, no se volverá a renderizar.
Para conseguir eso, tenemos que hacer este Property, ¿vale?
Que es justamente lo que hemos hecho aquí.
Y además, ahora veremos que este Property, además, tiene otra cosilla.
Me imagino que más adelante nos explicará.
Por ahora nos quedamos con esto, ¿eh?
Una propiedad de el elemento que cada vez que cambie de valor se volverá a renderizar.
Pero claro, para decirle esto, tenemos que acceder al valor de Message.
Obviamente, aquí lo que podemos hacer es evaluar el This.Message, ¿vale?
Y ahora, pues evaluando, tenemos el G-Logging.
Aquí puedes utilizar cualquier cosa de expresión dinámica para tener valores dinámicos,
para ver cuál es la...
Por ejemplo, puedes mirar cuál es la...
Lo puedes utilizar tantas veces como quieras, ¿vale?
En este caso no hay cosas tan raras como Solid.js, ¿vale?
Pese a la reactividad, que en Solid.js vimos que era un poquito más complejo a veces
porque tenías que tener cuidado cómo accedías a ciertas propiedades y tal.
Bueno, aquí, en principio, no deberías tener ningún problema.
Así que lo dejamos así.
Y ya tendríamos nuestra primera...
Bueno, nuestra propia propiedad reactiva.
Que, bueno, ahora mismo podemos ver que tampoco es que está haciendo nada.
Vamos a seguir para ver qué nos comentan.
Declarative Event Listener.
Bueno, esto es la clave, ¿no?
O sea, es que al final, si no sabes cómo manejar eventos,
tu aplicación está muerta.
En este caso, pues bueno, ya tenemos aquí bastante código creado
que es muy parecido al que ya sabemos hacer.
Por ejemplo, creando una propiedad con el nombre,
con el tipo string name y tu nombre aquí, ¿vale?
Para añadir la interactividad a tus componentes,
normalmente, probablemente lo que quieres es añadir
algunos manejadores de eventos.
Y Lit hace muy fácil que tú puedas añadir manejadores de eventos
que sean declarativos, ¿vale?
O sea, no imperativos, no con el punto
add, event, listener, tal, tal.
Sino que sean declarativos, muy parecidos también, de nuevo,
a los de React, Vue y compañía,
pero de una forma un poquito distinta.
En este caso, pues ya podríamos tener un botón
para hacer alguna cosa.
Por ejemplo, vamos a hacer esto.
Vamos a añadir este,
aunque creo que no está en los ejercicios, ¿vale?
Pero vamos a añadir aquí un botón
que le vamos a decir que cuando le demos un clic,
pues tiene que hacer algo, ¿vale?
Vamos a poner click me.
Y vamos a poner aquí el botón.
Entonces, aquí le tenemos que decir el método que se tiene que ejecutar.
Muy parecido a como sería como un React, un JSX, ¿vale?
This handleClick.
Tenemos que crear.
Tenemos que crear este método, handleClick,
que ahora mismo no existe.
Lo creamos aquí mismo.
Y vamos a poner ahora que esto sea alert, hola mundo.
Y ahora lo cambiaremos, ¿vale?
Click me, ¿vale?
Hola mundo.
Súper fácil, súper fácil.
Cosas importantes y diferentes.
Bueno, pues fíjate que aquí no se le ponen, por ejemplo, las comillas, ¿vale?
Tampoco se le pone esto.
Lo que siempre se utiliza es la evaluación de las variables,
lo típico de un template string.
Esto está súper bien porque se nota que es muy cerca de la plataforma, ¿no?
Porque esto está todo en el navegador.
No se está compilando al vuelo.
Bueno, en este caso sí que está compilándose al vuelo,
pero no esta parte, ¿vale?
Esta parte no.
Esto al final lo podríamos utilizar perfectamente en el navegador
y funcionaría, ¿vale?
Que eso es lo realmente impresionante.
Vale.
Vamos a seguir con esto.
Bueno, he hecho este button solo para que lo veamos,
pero ahora lo quito.
Y ahora seguiremos con el handleClick este.
Dice, encuentra el input, el elemento input,
y añádele esta expresión dentro del tag, ¿vale?
Dice que aparte del arrobaClick que hemos visto,
también podríamos tener aquí un arrobaInput.
La verdad es que me gusta bastante que sea con arroba,
porque así se diferencia mucho.
Esto es una cosa que le pasa a React, ¿no?
Que pone onClick y la gente ya se pone ahí como loca.
Dios, no, esto es HTML, el onClick, eso está mal.
Con el arroba está bien porque así la gente lo diferencia bastante
y estoy seguro que ahora la gente no se volverá tan loca aquí con esto.
Vamos a poner aquí un changeName y vamos a crear este método changeName.
Y lo que vamos a hacer aquí, que cuando se haga el evento input,
que el evento input al final lo que quiere decir es que cada vez que se teclee
o se borre o se cambie, cuando ocurra un cambio en el texto dentro del input,
se ejecutará este changeName, ¿vale?
Bueno, pues lo que vamos a hacer es, vamos a poner aquí una constante que sea input,
vamos a recuperarlo del target asHTMLInputElement, ¿vale?
Esto es porque es TypeScript, aunque yo creo que si hacemos esto tampoco se quejará.
Y finalmente podemos poner aquí en la propiedad, ¿ves?
Aquí en la propiedad del name, this.name, vamos a poner el input.value, ¿vale?
Ponemos el punto barra.
Bueno, claro, ¿veis? Me dice input.value no existe en el tipo eventTarget.
Bueno, esto es porque tenemos que decirle que es un HTMLInputElement.
Esto es porque es TypeScript, ¿vale?
Pero bueno, ya está, ya está, así ya está.
Y de esta forma, ¿qué vamos a ver?
Porque ¿y para qué sirve esto, básicamente?
Bueno, fíjate que aquí en el render, voy a quitar este todo que tenemos por aquí
y este también lo voy a quitar porque ya lo he hecho arriba.
Fíjate que en el render tiene aquí un hello y el this.name aquí está vacío, ¿no?
Y pone aquí your name here, que es el valor por defecto que tenemos aquí.
Lo que va a ocurrir es que vamos a poder ver cómo se va viendo, básicamente, cómo...
¡Ay! Se me ha olvidado aquí el event, ¿no?
Event.
Es que esto he notado en el linter, que te avise de las cosas, ¿sabes?
Porque me debería decir, oye, que event este es undefined.
Bueno, ahora sí que lo tenemos.
El change in, vale.
Le llegará el evento y ya está.
Bueno, pues fíjate que lo que estamos haciendo es cambiar como la propiedad, el valor.
Esto es muy parecido más bien a un estado, ¿vale?
Esto es interesante porque parece que más bien parece un estado.
Pero, bueno, ya verán la diferencia respecto a property y state después,
porque el estado es más interno y esto puede ser más externo.
Así que, bueno, pues hacemos esto, your name here, bla, bla, bla.
Y vamos a poner aquí, pues, mi dudez.
¿Vale?
Y ya podemos ver cómo se está volviendo a renderizar todo el elemento directamente.
Así que, lo que tenemos con el property este, que es una propiedad ahora que se ha convertido en reactiva.
Solo lo único que hemos tenido que hacer es asignarle el nuevo valor, lo cual es brutal.
Esto es una de las cosas que más me gustan.
El hecho de que sea súper fácil de que se actualice la UI.
O sea, en lugar de utilizar un método, ¿no?
Pues que directamente puedas hacer una asignación y ya está.
Esto está bastante chulo.
Bueno, pues hasta aquí esto ya lo tenemos bien.
Vamos a por la siguiente.
Más expresiones.
Ojo, cuidado, que esto ya empieza a complicarse.
Yo aquí veo muchos símbolos.
Vamos a ver, más expresiones.
En las páginas anteriores has utilizado expresiones para añadir, ¿vale?
Has usado expresiones para añadir contenido de texto y añadir eventos, bueno, manejadores de eventos.
Ahora también puedes utilizar expresiones para añadir atributos o propiedades.
Aquí vamos a proveerte un componente que tiene un checkbox y un text input, ¿vale?
Que lo vemos aquí, aquí el input y el checkbox.
En este paso vas a utilizar una expresión para activar o desactivar el text input.
O sea, este text input vamos a ponerlo en disable o no, dependiendo, me imagino, del valor del checkbox.
Así que encuentra el text input y añade esta expresión.
Vale.
El text input es este.
Voy a quitar esto de aquí.
Y lo que me dice es que podemos ponerle aquí, que este question mark es un poco raro.
Vamos a ponerle el question mark, ahora veremos qué dice, porque dice el question mark attribute name syntax le dice a lit que tú quieres añadir o quitar un atributo que es booleano basado en el valor de la expresión.
¿Por qué pasa esto?
Esto es muy interesante, ¿vale?
Esto es porque tú, si pones el disable y lo pones vacío, ¿vale?
Aunque lo pongas vacío o lo pongas false, fíjate que yo aunque le ponga false, fíjate que sigue viéndose disable.
Esto es porque, ahora entiendo por qué es el question mark.
Porque el question mark lo que le queremos decir básicamente es, vale, según la expresión que hay aquí a la derecha, este atributo deberá estar o no, ¿vale?
Tendrá que estar o desaparecer por completo, porque si estuviese, aunque fuese aquí con vacío, pues fíjate que ya solo el hecho de que esté, ya hace que esté desactivado, ¿vale?
O sea que lo que va a hacer el question mark es hacer que desaparezca del todo.
Así que aquí lo que vamos a hacer es evaluar si está el disk.check y dependiendo de esto, ¿vale?
Aquí podemos ver que cada vez que le doy, pues se va activando o desactivando.
Si vemos un poco el código, vemos que aquí funciona gracias a la propiedad check, que es un booleano, que por defecto es false y que cada vez que cambiamos aquí, cada vez que hacemos un change, ejecutamos el disk.check y se ejecuta este método.
El disk.check cambia, se vuelve a renderizar todo, bueno, maravilloso, la verdad.
Aquí vemos algunos ejemplos más típicos, ¿vale?
Esto sería muy similar a utilizar un children, ¿no?
O sea, child nodes, pues evaluas y ya está.
Ahora, para añadir un atributo, por ejemplo, una clase, pues nada, evaluas y ya está.
Para atributos booleanos, bueno, este justo es el ejemplo que hemos visto, ¿no?
Para ver si este hidden tiene que aparecer o no, pues si evalúa esto, true o false.
Una propiedad, vale, pues punto value, igual, esto es un poco el punto value, la verdad es que no me gusta mucho.
Hay que diferenciar entre atributos y propiedades.
Y en este caso, el punto value lo que haría es guardar el disk.value y mostrarlo aquí en el input, ¿vale?
Y el event listener, que este lo hemos visto.
Me imagino que en algún momento veremos el properties, no lo sé.
Vamos a ver el template logic.
Step 6.
Ahora que ya tenemos todos los básicos, vamos a introducir algo más complicado.
Un elemento más complicado.
Nos va a complicar, va, nos va a complicar.
En este remainder of this tutorial, reminder, ¿esto qué es?
Ah, porque es un to-do list.
No podía faltar un to-do list en un tutorial.
Claro que sí.
Vamos a añadir un to-do list.
Así que ya nos han añadido algún boilerplate.
De esta forma ya vemos que la property ya puede tener un valor también de algo complejo,
como puede ser un array, un objeto.
Hasta ahora solo ya hemos visto strings o booleanos.
Y ya vemos que una propiedad en realidad puede tener cualquier valor.
Aquí vamos a utilizar JavaScript estándar en las expresiones de lead para crear, básicamente,
pues plantillas que son condicionales o que se repiten, ¿vale?
Esto es muy similar al renderizado condicional que podemos ver en React, en Vue, en todos estos.
Y nada, pues el también es hacer un loop de una lista, que es justamente lo que me imagino
que vamos a hacer en este caso.
Vamos a utilizar map, porque vamos a convertir un array en información que se va a estar renderizando.
Es exactamente...
Es que, de verdad, alguien que venga de React, esto es súper fácil, ¿vale?
Súper, súper fácil.
¿Cómo?
Me ha ido apareciendo la React, van, sirve muy tranquilo haciendo código.
Hostia, no sabía, ¿eh?
Eso no lo sabía.
No lo sabía.
Vale, añade esta expresión entre el UL.
Vale, aquí, en el UL vamos a querer renderizarlo todo.
Una cosa que me gusta mucho, ¿no?, de las plantillas estas,
es que al final todo esto no deja de ser finalmente JavaScript puro y duro.
O sea, es que no tienes que aprender...
Si sabes JavaScript, no es como JSX, que a mí me encanta JSX.
Pero que ya sonó, bueno, pues tiene algunas cosas, particularidades y tal.
En este caso es todavía más fácil, porque es que esto no deja de ser un template string,
que lo que estamos haciendo es evaluar, pues, una expresión.
En este caso, pues, queremos decirle, vale, this.listItems, que es la propiedad que tenemos arriba.
Mapeamos y por cada item lo que hacemos es devolver el HTML y aquí le vamos a decir que sea li, un li,
y cada li que muestre el item.text.
Pues ya está.
Vale, esto sería antes, que veríamos que no teníamos todo,
y esto sería después que tenemos aquí los to-dos, que son estos dos iniciales.
El item.text es justamente esto de aquí.
Ay, ¿por qué se queja?
Ah, porque se me ha olvidado esto.
Se me ha olvidado ahí cerrar el paréntesis.
Vale, pues con esto ya lo tendríamos.
Ahora, esto al final podrías complicarlo todo lo que quisiéramos.
O sea, de hecho, por aquí podríamos ponerle también, igual que pones aquí el item.text,
podríamos hacer, me imagino, por ejemplo, si item.completed,
podríamos decirle check o to-do, ¿no?
Y aquí podemos ver, el primero está completado a true, pues el primero aparece así.
Y el segundo que está completado a false, pues aparece que en el to-do, ¿vale?
El to-do o vamos a poner aquí un muñeco de desarrollo, ¿vale?
Por ejemplo, pues esto, que teníamos esta diferencia.
Aquí al final lo que estamos haciendo además es un renderizado condicional,
dependiendo del valor que tenemos aquí, una cosa u otra.
Vale, vamos a ver qué dice por aquí.
Dice add the click handler.
Te hemos prohibido de un input, este input que tenemos aquí, ¿no?
Y un add button, que es justamente el que tenemos aquí abajo.
Pero todavía no funcionan.
Añade the input property and event handler, ¿vale?
Necesitamos la propiedad input para saber lo que estamos añadiendo en el input,
o sea, property.
Tenemos que poner aquí input, y me imagino que ahora mismo puede ser esto vacío, ¿vale?
Y un event handler.
La propiedad input.
Vale, pero aquí está haciendo otra cosa diferente, ¿eh?
No está mirando tanto el input value, pero bueno.
Porque aquí lo que veo que está haciendo, fíjate, que lo que está haciendo es una query.
O sea, aquí esto de query...
Aquí está haciendo una cosa distinta, que esto no nos lo han explicado.
O sea, esto lo han puesto aquí de golpe.
Esto lo han puesto de golpe, de golpe, ¿eh?
O sea, dice...
Porque dice add the input property and add the handler, no sé qué, eso cuánto.
Pero aquí nos han cambiado esto.
A ver, yo entiendo que por lo que nos habían explicado hasta ahora,
por lo que nos habían explicado hasta ahora,
lo que tendríamos que estar haciendo es otra cosa.
Era aquí lo del change, el this handle change.
Vamos a intentar hacerlo como nos lo habían explicado, ¿vale?
Porque...
Y ahora intentaremos luego hacerlo como dicen ellos.
Pero hasta ahora nos habían explicado que esto tenía que ser más bien así.
A ver, ahora no me acuerdo...
Como no tengo autocomplita, ahora no me acuerdo de cuáles eran los inputs y todo esto.
Pero...
Bueno, el input debería ser...
Claro, que es mucho...
No es mucho mejor, ¿no?
Es un poco diferente.
Ahí, he puesto event target, creo que es event y ya está.
O html event, no me acuerdo.
e.target as html input element.
Y aquí tendríamos el this.input input.value, ¿vale?
Que a ver, entiendo que esto es la diferencia típica de controlado o no controlado.
Aquí estaríamos controlando, pero sería innecesario porque realmente no sé hasta qué punto tiene sentido que sea una propiedad, ¿vale?
Entonces, entiendo por qué lo han hecho así, pero claro, como todavía no lo habían añadido, pues me sorprende.
Entonces, para añadir el to-do, entiendo, tendríamos que hacer this list items.push.
Y de aquí tendríamos que crear del texto, sería el this.input y el completed al principio sería false.
Y lo que podríamos hacer, no sé si esto funcionará, pero tendríamos que volver a reiniciar esto y el this.requestUpdate.
Claro, ¿cuál es el problema de esto?
¿Cuál es el problema que podemos tener aquí?
Que realmente este input, el value, el value tendría que ser también el que tengamos en this.input.
Tendría que ser así.
A ver ahora, si digo to-do y le doy a add, ¿vale?
Ahora me lo ha añadido.
O sea, esto sería como nos lo han explicado hasta ahora, ¿vale?
Lo he hecho no como me están diciendo aquí a la izquierda, sino como me lo han explicado hasta ahora.
O sea, que claro, a ver, es un poco raro, porque claro, de repente dicen query y no sé qué.
Vamos a hacerlo ahora como de repente nos dicen aquí, ¿vale?
Que es, bueno, yo creo que este requestUpdate, de hecho, no sería ni siquiera necesario,
porque como estamos cambiando aquí este input, efectivamente, ya este input es reactivo.
Me imagino que el problema está más bien en este listItems, a ver.
¿Ves?
Cuando he hecho el add, pues no aparece, porque cuando haces un push,
como no estás asignando un nuevo valor a listItems, sino que lo estás mutando,
por eso tienes que indicarle tú que lo tienes que actualizar.
Ojo, cuidado con esto, ¿eh?
Ojo, cuidado con esto.
En este caso, como estoy cambiando el input a mano, pues claro, como lo tengo que refrescar,
pues por eso pasa esto.
Vale.
Ahora vamos a hacerlo como lo hacen aquí, porque veo aquí que hay un nuevo decorador
que se llama query, y vamos a verlo.
¿Qué es lo que hace?
Vamos por partes.
¿Para qué era el disk.requestUpdate este?
Este requestUpdate es como para decirle, es para forzar un nuevo render.
Y se tiene que utilizar por culpa de este lastListItems, ¿vale?
Porque esto, aunque es una propiedad que reactiva, al ser un array, cuando haces el punto push,
no lo detecta, no detecta un nuevo cambio, ¿vale?
Entonces, claro, yo le doy aquí, y si no hago este requestUpdate, vamos a verlo, pues no pasa nada,
porque no detecta el cambio, no es capaz de hacerlo.
¿Qué se podría hacer?
Hombre, pues una cosa sería asignarle algo, que sería listItems, tenemos que hacer algo así.
Pero entiendo que por temas de rendimiento, seguramente es mejor lo otro.
Disk.requestItems, lo que le hacemos es una asignación nueva, tal.
Me imagino que lo otro es mucho más performante, ¿vale?
¿Ves? Ahora, ahí, voy a quitarlo con el requestUpdate, para que lo veamos, si funciona.
¿Vale? ¿Ves que sí que funciona?
¿Por qué? Gracias a la asignación.
La asignación es la clave con lo que hace justamente esto, ¿vale?
Así que tenedlo en cuenta, solo tenedlo en cuenta que si hacéis un punto push,
que no va a hacer la magia de la reactividad así por así, para que lo sepáis.
Vale, lo vamos a dejar así.
Para esto es el requestUpdate, ¿vale? Para forzar un nuevo render.
Entonces, esto ya lo hemos tenido claro.
Vamos a ver cómo nos dicen aquí, que hay aquí un decorador que es queryNewItem.
Entiendo que este query lo tenemos que importar, vale, ya está importado aquí del decorador este,
y aquí, en lugar de crear una propiedad, lo que está diciendo es, vale,
hazme un query, que básicamente es como un query selector, del elemento con id NewItem.
Este elemento NewItem es justamente el que tenemos aquí en el input.
Fíjate, que tenemos aquí la id NewItem.
De esta forma, no necesita esto. Esto sería la forma como descontrolada, ¿no?
La forma no controlada.
¿Para qué? Para que funcione de una forma nativa y seguramente con mejor rendimiento.
Entonces, al input le dejamos esta id NewItem, recuperamos este elemento aquí,
en query, decimos que esto, pues, ponemos que es opcional, html input element,
html input element, que es obligatorio, html input element, ¿vale?
Este es el tipo en TypeScript, si no, no sería necesario.
Esto es más de TypeScript que de otra cosa.
Y al final lo podemos hacer algo muy similar, ¿no?
Aquí, en lugar del disk.input, del handle change este que habíamos hecho,
esto lo quitaríamos, ya no necesitamos escuchar el elemento del input.
Y en el addToDo este, pues, lo que tenemos que hacer es un poco algo parecido,
pero no exactamente igual.
Como ahora en el input lo que tenemos es el elemento,
lo que hacemos es cambiar el valor del elemento, ¿vale?
Esto es resetear el input, ¿vale?
¿Por qué? Porque en el DOM element, cuando tú pillas un input,
pues, tienes la propiedad value y de esta forma le puedes cambiar el valor.
Y aquí, en lugar de disk.input, va a tener que ser disk.input.value.
O sea, antes de cambiarlo, lo utilizamos para añadir este nuevo item,
luego reseteamos el input y hacemos un request update.
El request update ahora es necesario pese a que cambiemos el input
porque este input ahora no es una propiedad reactiva,
sino que es el elemento, ¿vale?
Del que hemos hecho una query.
Yo me imagino que habrá una forma mejor con ref,
con referencias o alguna cosa así, ¿vale?
Pero, bueno, por ahora así es como nos lo han explicado.
Así que, mira, el query decorator es una forma fácil
de recuperar una referencia de un nodo.
Es básicamente equivalente a hacer esto.
Claro, sería equivalente a acceder al shadow root, ¿vale?
Para poder hacer un query selector del shadow DOM ese que habíamos creado
para buscar esta idea.
Pero en este caso, pues, no lo necesitamos.
Y esto debería funcionar.
Y así está funcionando.
Bueno, está bien, ¿no?
Porque es un to-do y ya tiene sus cosillas.
Vamos a por la siguiente.
Va.
Paso 7.
Estilos.
Interesantes los estilos.
Puedes añadir estilos que están encapsulados en un componente de lead.
Encapsulados quiere decir que tú estos estilos no te tienes que preocupar
con estilos que tengas fuera de este lead element porque no van a colisionar.
O sea, que tú puedes estilar perfectamente un párrafo, una imagen,
utilizando selectores muy sencillos porque no se van a colisionar
con ninguno que haya fuera, ¿vale?
Así que aquí tenemos el código para empezar, que es muy parecido al que teníamos antes.
Quizás un poquito más complicado porque veo aquí, ta, ta, ta, que si lo clicas...
Ah, no.
Parecía que si clicabas un elemento, parecía que se iba a hacer un to-do.
Ah, vale.
Ahora entiendo por qué.
Porque necesitan los estilos para que veamos que están to-do.
Vale.
Pues venga, vamos a hacer los estilos.
¿Cómo se hacen los estilos?
Bueno, pues un componente de lead, lo que tendríamos aquí, sería una propiedad estática llamada styles
y le asignaríamos los estilos.
Para crear los estilos tenemos que utilizar el método css, que lo tenemos que importar de lead.
¿Ves?
Este css.
Igual que tenemos html, pues css.
Y entonces, pues css.
Y aquí tenemos que poner las comillas invertidas, ¿vale?
Y aquí ya pues estilaríamos.
Y lo que podemos decir, si miramos un poquito aquí...
Vale, veo que...
ToggleCompletedItem.Completed.
¿Y dónde le está poniendo la clase?
Vale, la clase esa la vamos a tener que poner nosotros.
Porque yo veo aquí este...
Ah, claro.
¿Ves que pone aquí todo?
Es que digo, ¿cómo sabe que la clase Completed?
Vamos a ponerlo.
Completed.
Vamos a poner aquí una clase que sea Completed.
Vale.
TextDecoration.
LineThrough.
Que LineThrough básicamente es que lo va a atachar.
Y color.
Y ponemos un color un poco más...
Más claro.
Ahora bien, ¿cómo se utiliza esta clase?
Pues lo vamos a tener que poner nosotros.
Aquí en este ClassToDo, básicamente,
tenemos que hacer una evaluación
donde si el item está completado,
pues le vamos a añadir como clase Completed.
Y si no, le vamos a dejar el stream vacío.
Y aquí vemos que ya tenemos uno estilado.
La verdad es que es bastante cómodo.
Me gusta muchísimo el hecho de que tiene muchas cosas resueltas muy fácilmente para ti.
Está muy bien el tema de tener los estilos encapsulados.
Eso está muy chulo.
Otra cosa que me gusta es el hecho de que realmente todo se hace muy, no sé, muy conocido.
Porque no deja de ser JavaScript.
Que es una de las cosas que más me gusta de JSX en React.
Que a muy poca gente le gusta, ¿no?
Pues le gustan más los DSLs, o sea, templates, básicamente,
como los de Angular o los de Vue.
Y a mí lo que más me gusta de JSX justamente es que no deja de ser JavaScript.
Y me gusta mucho esto, que es JavaScript.
Es lo mejor.
O sea, de verdad, me gusta un montón.
Vale.
A clases.
Vale, esto ya lo hemos hecho.
Aternary expression, no sé qué, no sé cuánto.
Ah, mira.
Si quieres, puedes ponerle más de una clase a la vez
utilizando ClassMap.
La directiva ClassMap.
Vamos a ver cómo funciona el ClassMap.
Y la probamos, ¿no?
Ya que estamos.
Ah.
Ah, mira, fíjate.
Venga, vamos a probarla.
Vamos a probar a utilizar esto.
Vamos a probarlo en el tutorial.
Vamos a probar dónde se importa el ClassMap de directivas.
Venga, vamos a importarlo.
Básicamente, ClassMap lo que nos va a permitir es añadirle más clases a la vez
sin necesidad de que sea tan verboso.
Bueno, aquí porque es básicamente una ternaria y es bastante fácil.
Pero, claro, aquí podríamos poner clases, decirle completed,
que esto sería itemCompleted, ¿no?
O sea, es el nombre de la clase.
Ay, espérate, no podría ser aquí.
Perdón, perdón.
Si es que eso son un montón de elementos.
No, no, ahí no es.
Claro, aquí lo vamos a tener que complicar un poco,
pero, bueno, no pasa nada.
Total, quiero ver cómo funciona esto.
Así que esto por aquí, esto por aquí.
Y sería aquí, ¿vale?
ClasesCompleted.
O sea, esto sería, se le pone la claseCompleted si esto es true.
Y aquí entiendo que tendría que utilizarse el ClassMap de clases.
Así.
Y ya está.
En este caso, este ejemplo no es muy bueno, ¿vale?
¿Por qué?
Porque al final solo tienes una clase y tiene más sentido utilizar una ternaria.
Pero lo bueno de esto es que yo aquí podría empezar a utilizar un montón de cosas, ¿no?
Por ejemplo, todo, pues, si no es itemCompleted, ¿vale?
Y entonces en el todo, tú aquí podrías poner todo y ponerle color blue, ¿vale?
¿Ves?
Y ya lo hemos estilado ahí un momentito.
Así que sería un poquito esa la idea, ¿vale?
Y, hombre, normalmente esto, además lo podríamos extraer en un método, ¿no?
Y generar las clases, incluso con el ClassMap para que te devuelva aquí la clase.
Esto está bastante, bastante chulo.
O sea, podríamos tener get, vamos a ponerlo así como privado.
No sé si se puede privado.
Sí.
GetClassItem.
¿Vale?
Pues entonces ya le podríamos sacar esto.
Le pasamos aquí el item.
Teníamos aquí las clases.
Y aquí devolveríamos.
Yo creo que esto se puede hacer.
Es que es lo que más me gusta de Elite, ¿eh?
Es que es JavaScript.
Punto.
Ya está.
O sea, no...
Nada de complicarse la vida con cosas...
Qué lástima que no tengas esto autocomplete, ¿eh?
Vale.
Esto lo podemos poner aquí.
Esto lo quitamos.
Y con esto lo que estamos extrayendo básicamente es la lógica de crearlo.
Mira, ¿ves?
Ya está funcionando otra vez.
Y lo hemos extraído totalmente.
Y en lugar de estar creando ahí constantemente, lo que hacemos es pasarle el item.
Y dependiendo del item, pues le creamos las clases.
La verdad que está bastante chulo.
O sea, está muy bien.
Me gusta un montón porque realmente es muy fácil de entender.
Lo puedes extraer súper fácil.
JavaScript, JavaScript, JavaScript.
Muy bien.
Finishing touches.
Vale.
Cuando los templates se van haciendo cada vez más grandes y complicados,
te puede ayudar a romperlos en piezas más pequeñitas.
Así que han añadido a hide completed checkbox to do list.
Vale.
Y entonces también se han traído el de main to do list template en una constante separada.
Ahora podemos saber lo que son los partial templates.
Vamos a ver qué son estos de los partial templates.
Ah, mira.
Aquí hay different partial templates.
Vale, vale.
Vale.
Vas a notar que el to do partials es casi idéntico al elemento UL del paso anterior.
Excepto de que ahora estamos utilizando los nuevos, una nueva constante items en lugar de this.list items.
Tu misión.
Ojo, me encanta.
Misión.
Estamos en misión.
Tu misión.
Refactorizar la plantilla para ocultar los items completos cuando hide completed esté chequeado.
Y mostrar un mensaje cuando no estén completos.
Vale.
Entonces, primero, a ver qué entienda esto.
¿Por qué pone to do?
¿Por qué tenemos dos?
Define partial templates.
Vale.
Tenemos to do.
Replace items definition.
Vale.
Primero, tenemos que cambiar los items.
Porque aquí podemos ver que aquí salen exactamente los mismos items.
O sea, que primero este item lo vamos a cambiar dependiendo de, dice por aquí,
hide completed, que es una propiedad.
¿Vale?
Entiendo que esta propiedad va cambiando y tenía que cambiarse.
Vale.
Pues entonces, le pillamos el hide completed.
Y si el hide completed, ¿no?
Pues hide completed.
This.list items.filter.item.item.completed.
¿Vale?
Y si no, pues todos los this.list items.
Vamos a ver si esto funciona.
¿Vale?
Con esto ya tendríamos el paso uno.
¿Vale?
Coño, si es que está aquí la solución y yo aquí, pues es lo mismo, ¿no?
Vale.
O sea, esto es lo mismo.
Vale.
Define some partial templates.
Add the following code just before the return statement.
Vale.
Aquí lo que...
Vale.
Ahora entiendo qué quiere decir con partial templates.
Es que partial templates suena como un poco raro, ¿vale?
Partial template o no sabía yo cómo llamarla así.
Básicamente lo que estamos haciendo es que podemos crear esto como el to-do este que está
creando aquí.
Pues aquí podemos crear también...
O sea, tú puedes renderizar lo que quieras.
O todo este to-do o puedes renderizar otro string.
Y al final puedes componer lo que devuelve el componente a través de constantes que también son templates en sí mismo.
O sea, que al final puedes componer el template con más templates.
Tú lo que renderizas básicamente lo puedes componer.
Entonces tú aquí tendríamos all to-do, to-do's done, ¿vale?
HTML.
All right.
Everything is done.
Play a video game.
Vale.
All to-do's done, no sé qué.
Entonces lo que tendríamos que hacer es que si tenemos...
Podríamos tener...
Es que no sé cómo llamarle.
Es que to-do's-or-message me parece un nombre muy malo.
Eh...
Yo qué sé.
To-do's-or-message es como que te quedas con la duda.
¿Pero qué es el to-do's-or-message?
No sé.
Es un poco...
Bueno.
Si tenemos por hacer, ¿vale?
Entonces vamos a renderizar los to-do's de aquí.
Y si no, el all to-do's done.
¿Vale?
Si tenemos todavía elementos, pues los renderizamos.
Si no, le decimos que ya lo tenemos todo hecho.
Quitamos esto.
Y aquí, en lugar de este to-do's, aquí lo que queremos es renderizar el content.
Entiendo.
Y...
All right.
Everything is done.
Play a video game.
¿Vale?
Ahí lo tendríamos.
Ay, espérate.
¿Por qué?
Si...
Hide completed.
Items is my...
No.
¿Y por qué?
¿Cuándo me pone esto?
O sea, si pongo el hide...
Yo pensaba que esto...
A ver, a ver.
Items.
List.
Ah, claro.
Sí, claro.
Porque lo muestra igual.
A ver, yo creo que esto, en lugar de hacer así...
Claro, en lugar de ser así, seguramente en lugar de calcular aquí los items así en general,
tendría que ser...
Que está bien, que sí sea hide completed.
Pero a lo mejor tendría que salir esto, si ya los has completado todos igualmente, ¿no?
Pero ahora entiendo.
Es que, claro, si estos no lo están contando igual, hasta que no haya sido hide completed,
es que no...
Ah, complete.
Claro, ahora te lo he quitado.
Por eso no sale el mensaje.
Pero bueno, está bien.
Lo importante es que este content de aquí lo estamos calculando a partir de aquí y que
estos sean los partial templates, estos que nos están comentando.
Vale, perfecto.
Muy bien.
Bueno, ponlo todo.
Perfecto.
Sí, esto ya lo he hecho.
Try clicking hide completed.
Mira que todo haya funcionado correctamente.
Si quieres experimentar con Lit Online, ahora te puedes ir al Playground o te puedes ir al
Startup Kit, Add Lit to an Existed Project y tal.
Bueno, nos vamos a ir al Playground.
Voy a poner la cámara.
Espero que os haya gustado este...
Ah, bueno, se me ha olvidado cerrar el H1.
Perdón, perdón, perdón.
Venga, que os leo un poco.
Uf.
Bueno, hemos terminado al final los...
El Playground.
¿Qué tal?
Lit, el killer de SolidJS.
Hombre, yo la verdad me gusta más Lit que SolidJS.
A ver, SolidJS al final, lo que me parece a mí, ¿eh?
SolidJS es demasiado una copia a React cambiando ciertas cosas y algunas que cambian demasiado
el funcionamiento mental de JavaScript.
Eso es una cosa que a mí personalmente no me gusta, ¿no?
Pues bueno, ya os lo dije en el vídeo.
Gracias, espero que te haya gustado la clase de hoy, que hemos aprendido de Lit.
Volveremos con Lit, seguro más adelante.
Seguramente haremos una clase práctica.
Haremos un proyecto.
No sé, si tenéis alguna idea de proyecto, pasaros por Discord.
Me lo dejáis en el canal.
Pero a lo mejor hacemos el típico proyecto de buscador de películas, pero con Lit desde
cero, para ver cómo haríamos los fetch, cómo podríamos hacer todo esto.
Aprenderemos sobre directivas, que también tiene directivas.
Se puede hacer una especie de hooks con Lit.
Así que eso.
Bueno, muchas gracias y nada, que gracias por acompañarme.
El miércoles vuelve tu web a juicio, pero mañana, antes haremos, estaremos aquí un
buen rato haciendo unas cuantas cosas.
Pues nada, Feralp, The Palacio, Dragnet, Gebu, Beta, Subnova, 6, BrandonU95, Gameplayer,
BBarrera44, Tommy Molo, Dartiles, Apérezes de Nicolás, Cosa Corión, David Fabián, Chavito, Marta
Torre, hombre, Marta, un abrazo.