Construye una Biblioteca Universal de Datos Reactiva con Starbeam

Otra cosa a tener en cuenta es que hay varias formas de pensar en StarBeam. Una de ellas es que es una biblioteca reactiva independiente. He dado charlas sobre eso e incluso he comenzado a escribir algunas diapositivas al respecto, pero en lugar de eso decidí centrarme mucho más en este conjunto de ejemplos en la combinación con React. Originalmente, siempre se pretendía que fuera un tutorial centrado en React, pero también me enfoqué mucho en intercalar cosas reactivas de StarBeam con useState y cosas así. Así que hay una forma de involucrarse más en StarBeam, y tiene sus compensaciones. Ayuda en ciertos aspectos, pero requiere estar completamente involucrado. Decidí centrarme mucho en intercalar cosas de StarBeam y los beneficios de StarBeam con solo cosas regulares de React.

Así que supongo que simplemente comenzaré. El primer paso aquí es un ejemplo de contador muy estándar. Así que déjame mostrarte el ejemplo. Tenemos algunos incrementos. Tengo un pequeño campo de texto aquí, y si incrementas, básicamente se agrega el número a los contadores que se están implementando. Creo que podría haber hecho un ejemplo que sea solo de React puro, pero probablemente puedas averiguar cómo implementarlo en React puro, ¿verdad? Como dije, decidí centrarme en combinar StarBeam con React. Así que en este caso, simplemente comienzo usando un useState regular para obtener la variable de inicio. Así que veamos si puedo mostrar un inspector de React. Así es como funciona el contador, ¿verdad? Y puedes ver que hay una prop llamada start que se pasa a todas las cosas. Y si incremento start, ¿verdad?, entonces las props se actualizarán. Así que eso es algo muy normal de React. Y luego, cómo implementé el campo de texto es simplemente un campo de entrada. Básicamente, usé el nuevo hook useID que React agregó para que funcione con HTML 4, blah, blah, blah. Todo esto es como cosas estándar de React. Pero luego el contador es porque creo que estoy legalmente obligado a hacer un tutorial de contador, el contador es un ejemplo de StarBeam en React. Y decidí centrarme en esto de la siguiente manera, básicamente hacer un pequeño valor personalizado Reactivo llamado contador y explicaré cómo funciona en un segundo. Y luego explicaré que básicamente hay dos cosas sucediendo aquí. Una cosa que quiero mencionar en general es que algo interesante de StarBeam, pero es difícil de transmitir en este tipo de demostración, es que cuando implementas algo como esto, de lo que hablaremos en un minuto, funcionará en Preact, funcionará en Vue, eventualmente funcionará en Svelte, Ember, etc. Pero cuando te encuentras con esto por primera vez en React, probablemente lo estés comparando mentalmente con lo que tendrías que escribir manualmente, y probablemente esté bien, pero no es como si fuera algo desconocido y no es mucho mejor. Así que creo que de todos modos decidí centrarme en un ejemplo que básicamente solo te llevará cinco minutos es lo que diría. Así que vamos a seguir adelante, aunque a primera vista, esto no le está dando mucho a Vue. Pero el punto es, como verás, a medida que avanzamos, veremos que obtienes algunos beneficios y también la universalidad es buena.

Básicamente hay dos cosas sucediendo aquí. La primera es un hook llamado useResource, y un recurso es simplemente un propósito general ... Es la unidad principal de funcionalidad de StarVM. Y si escribes el recurso que está en la línea 38 aquí, como dije, ese mismo recurso funcionará en otros frameworks. Entonces, lo que probablemente harías si estás escribiendo una biblioteca o algo así es escribir esto como algo independiente. No estarías usando ningún código de React aquí en absoluto, y luego podrías usarlo donde quieras. Y nuevamente, la segunda mitad de este tutorial es construir una biblioteca de data, y espero que tenga más sentido cuando llegue a eso. Entonces, ¿qué está pasando aquí? En primer lugar, la unidad más fundamental de estado reactivo en StarBeam se llama la celda. Y eso es como si estuvieras familiarizado con las señales, es como una señal o una variable de estado de uso o algo así. Es simplemente la unidad más fundamental de estado reactivo. Así que estamos dentro del recurso... La función del recurso es como el callback de la promesa, ¿verdad? Es el lugar para configurarte. Entonces, dentro de eso, simplemente creamos una nueva celda y luego devolvemos un objeto que tiene un getter en él, que me da el valor actual de la celda y un método de incremento en él. Ahora, si volvemos al código de react, el hook solo toma una de esas cosas y nos devuelve este valor. Puede hacer muchas más cosas que eso, incluyendo configuración y limpieza, pero llegaremos a eso pronto. Es importante destacar que el valor que obtienes de useResource siempre es el mismo. Eso significa que si tu contador de saludo se vuelve a renderizar varias veces, no obtendrás nuevas copias de la celda cada vez porque, por supuesto, eso no funcionaría.

No puedes suscribirte a algo o interactuar con algo que está cambiando todo el tiempo a menos que uses useState. Cuando dices useResource, eso te dará el mismo valor cada vez. Creo que una forma de pensar en esto es que te da mucho de lo que obtendrías si estás familiarizado con solid, solid es básicamente una forma de escribir algo que se parece a React, pero hay una parte de tu código que se ejecuta una vez y luego hay una parte de tu código que se ejecuta cada vez. Es básicamente ese mismo modelo, pero usa ganchos de React que se ven familiares y puedes usarlo en React. Obtienes el contador, es el mismo cada vez, y luego este código aquí es algo y es algo que tienes que escribir en React básicamente debido a los detalles internos de React. Especialmente en preact, que tiene casi la misma API, no tienes que escribir esto. Es solo una cosa que React te obliga a hacer. Entonces, básicamente, useReactive es solo un gancho que envuelves alrededor de cualquier código que interactúa con otro estado de StarView. Aquí estás creando una instancia del contador y aquí estás diciendo que voy a interactuar con el contador. Entonces, si solo usas Reactive como un gancho, puedes pasar dependencias y en este caso, lo más importante aquí, como dije antes, start es solo una variable de estado normal de React, por lo que puedes pasarla aquí y todo funciona como esperarías. También debo mencionar que tengo mucho contenido en el sitio web que entra en detalles sobre esto, pero StarBeam también funciona perfectamente bien con el modo estricto de React y resulta ser un poco más complicado de lo que parece en general, pero básicamente, cada vez que digo que esto se ejecuta solo una vez o como esta dependencia, etc., hay muchas cosas que surgen si intentas implementar cosas así tú mismo y hacer que funcionen con el modo estricto, y básicamente, bajo el capó, hacemos que eso funcione. Entonces, básicamente, cuando dices useReactive, eso significa que estás interactuando con el estado Reactivo. Puedes envolver eso alrededor de cualquier cosa, pero no necesitas hacerlo si no estás interactuando con ningún estado Reactivo. Además, si olvidas usar Reactive, lo que sucederá cuando intentes interactuar con el estado es que obtendrás un error que es bastante claro. Dice que intentaste leer este valor Reactivo y te da una línea en la traza de la pila, pero es un valor Reactivo que se creó aquí. Por favor, envuélvelo en use Reactive. Entonces, básicamente tenemos este contador de saludo, y estamos diciendo counter.currentplusstart. Nuevamente, me enfoqué mucho en intercalar el estado de React con el estado de StarBeam solo para mostrar que funciona. Y tenemos un H1 y luego en el clic estamos haciendo counter.increment, y eso llamará a este incremento. Me extendí un poco aquí, pero si simplemente recargamos aquí, básicamente se comporta como esperarías. Entonces, incrementa la cosa de inicio que actualizará el inicio en todos estos lugares. Y también tengo este incrementador. Cuando lo incremento, obviamente funciona. Así que creo que eso es, estoy insistiendo un poco en el punto, pero creo que funciona de la manera que esperarías más o menos. Ahora pasemos al segundo paso.

Entonces, el segundo paso es, bien, quiero tener un array dinámico de contadores. Y quiero poder agregarlos y eliminarlos. Y creo que solo mostrándote que funciona de la manera que esperarías. Entonces, básicamente, piensa en cómo implementarías eso en un contexto normal de React. Y luego veamos la implementación aquí.

Primero que nada, creé un nuevo recurso llamado counters. Y aquí es donde brilla una parte de StarBeam que es realmente valiosa, que es que StarBeam viene con versiones reactivas de todas las colecciones integradas de JavaScript. En este caso, hay algo llamado un mapa reactivo. Y se comporta exactamente igual que un mapa normal. Y si observas el tipo de TypeScript de esta cosa, es solo un mapa, ¿verdad? Es solo que cada vez que lees o escribes en el mapa, es reactivo.

Entonces, bien, tenemos este recurso. Creamos este mapa reactivo. Y ahora vamos a escribir una pequeña implementación para él. Primero que nada, queremos una lista de todos los contadores, ¿verdad? Y eso nos dará una, simplemente va a expandir los valores del contador, ¿verdad? Así que eso usa la API normal de JavaScript para expandir, ¿verdad? Se ve de la manera que esperarías. Muy rápidamente, un contador es solo un objeto que tiene un ID y un conteo. El ID básicamente está ahí para la clave en React. Bien, ahora, ¿cómo debería funcionar remove? Remove funcionará simplemente eliminando el elemento del array. ¿Cómo funcionará add? Funcionará incrementando esta variable que básicamente es solo, nuevamente, es solo para que obtengamos un ID nuevo cada vez. Vamos a crear un nuevo objeto reactivo. Así como había un mapa reactivo, hay un objeto reactivo. Y el objeto reactivo también tiene exactamente la misma API que un objeto normal, pero es reactivo. Entonces, eso significa que si haces object.entries, object.keys, object.values, si buscas una propiedad, haces in, cualquiera de esas cosas funcionará de manera reactiva.

Bien, vamos a comenzar el conteo en 0. Y luego vamos a establecer el contador en el mapa en ese ID. Ahora, en la implementación, vamos a decir, vamos a comenzar como, una vez más, solo va a ser un estado normal de React. Y vamos a decir, dame el recurso countered. Nuevamente, eso nos da un valor estable cada vez. Y luego el ID de inicio es básicamente solo para la etiqueta. Bien, el mismo trato que antes aquí. Ahora, cuando hacemos clic en el botón, por cierto, este tablero aquí es solo una cosa de ESLint. Si lo elimino, ESLint me va a gritar. Y lo autocompleto, cuando lo guardo, eso es todo. Eso es solo una cosa para, si estás usando TypeScript con configuraciones de ESLint muy estrictas, eso es lo que sucede. Bien, sí, cuando haces clic en el botón, dices counters.add. Creo que vale la pena señalar, cuando dije antes que obtienes un valor estable, eso es algo significativo aquí porque lo que eso significa es que no existe tal cosa como un problema de cierre obsoleto aquí. Los contadores siempre tienen el mismo valor. Entonces no importa cuándo creaste este cierre. Siempre hace lo correcto. Lo siguiente que vamos a hacer es counters.list. Y solo como recordatorio, lo que hace list es que se expande sobre los valores, y eso usa la API normal de matemáticas de JavaScript. Y veamos. Y luego simplemente vamos a recorrerlo, y vamos a hacer lo normal una vez que hemos recorrido. Así que cada vez que obtenemos un contador. Estoy usando el marco de CSS vainilla solo porque se ve bien pero no es muy importante aquí. Entonces tenemos la clave si el contador tiene un ID. Y luego vamos a llamar a hello counter. Hello counter toma un inicio como antes. Ahora toma un contador. Y también toma un remove, que es simplemente counters.remove. Y si vamos a ver qué es hello counter, así que tiene el ID.

Si volvemos aquí, cada uno tiene este ID. Permíteme ver el inspector de React. ¿Por qué me están gritando? Realmente no lo sé. De acuerdo. De todos modos, el ID. Puede que haya olvidado poner el modo estricto en algún lugar. De todos modos, normalmente hago todo con el modo estricto solo porque trabajé muy duro para que el modo estricto funcione en React. Así que quiero asegurarme de detectar cualquier problema rápidamente si algo no funciona. Y todas las pruebas de React en StarBeam utilizan tanto el modo estricto como el modo no estricto. Tienen las mismas pruebas. Hay un entorno de prueba que se ejecuta en ambos.

De acuerdo. Así que obtienes este ID aquí. Ese es ese ID. Y luego todo esto es muy detallado. Pero es solo un marco vainilla. La parte importante aquí es que el contador.count va aquí. Así es, el contador.count. Así que si lo incremento, ¿qué es ese conteo? Es solo esta cosa que estoy modificando. Y luego start es solo esa variable de React. Y luego tengo una cosa que es start más contador.count. Y luego el botón de incremento simplemente hace contador.count++. Decremento hace contador.count menos menos. Y el botón de Eliminar simplemente hace Remove, que es lo que pasamos a la función Remove que toma un ID. Así que tenemos un ID. Así que llamamos a Remove y eso funciona. Todavía tenemos que pasar Start aquí como parámetro. Eso es solo porque Start puede cambiar. Y eso es una de las cosas que React necesita saber. Es básicamente un gancho normal. Pero no tienes que enumerar todas las cosas que son StarBeamReactive, porque StarBeamReactive se rastrea automáticamente. Recuerda, lo llamamos rastreo automático. De acuerdo. Importante, creo que puedo entender el punto. Porque creo que es genial. Y es fácil mirarlo y decir, oh, no veo qué hay de genial. No veo qué está pasando. Parece bastante normal. Pero creo que si piensas en todas las cosas que tendrías que hacer en React para que algo como esto funcione, el hecho de que puedas simplemente hacer un array, hacer un mapa, poner cosas en el mapa, en un controlador de eventos, y luego agregar cosas, eliminar cosas, incrementar valores, y todo funciona, creo que es básicamente magia. Y no tiene los problemas que, quiero decir, tiene algunos problemas filosóficos si eres obsesivo con el estado mutable, pero no tiene los problemas de React con el estado mutable. Básicamente, la única advertencia que tienes con starter meme y React es que tienes que decir use reactive alrededor del código que lo usa. Nuevamente, Preact tiene la misma API y no requiere que uses reactive, pero en React, esa es la única advertencia. Y luego todo funciona perfectamente. De acuerdo. Ese es el segundo paso. Y, nuevamente, lo más importante aquí es que hay rastreadores incorporados, rastreadores automáticos incorporados, que son mapas reactivos, arrays reactivos, objetos reactivos, y puedes usarlos y funcionan. De acuerdo. Ahora, veamos el siguiente paso. Ahora eso es todo para los contadores. Lo siguiente que quiero mostrar es un ejemplo de fecha.

El ejemplo de fecha aquí es básicamente que puedes seleccionar el formato de hora que desees. Estas cosas son básicamente las integradas, la fecha Intel, la verás en un minuto. Y cada vez que lo cambies, se actualizará la salida y te dará la hora. Me preguntaba, ¿por qué no está avanzando? Eso es porque el formato corto no tiene segundos. Pero básicamente está avanzando. Así que más o menos, este es un ejemplo de intervalo establecido.

OK. Hice un nuevo recurso llamado reloj. Y ahora vamos a entrar en la configuración y el desmontaje. La forma en que funciona es que primero puedes, al igual que antes, crear cualquier estado reactivo que desees. Si quieres configurar y desmontar cosas, lo haces dentro de un bloque de configuración. Y en React, la razón principal por la que esto es importante es que React necesita algo para renderizar inicialmente. Pero no ejecutará tu código de desmontaje si no ejecutó tu efecto. Así que básicamente, eso es un argot de React. Pero básicamente, la forma de pensar en esto es que esto estará presente, sea cual sea el valor que tenga, en la representación inicial, esto solo se ejecutará si React llega a configurar tus efectos. Y luego automáticamente hará lo correcto. Así que en la configuración, vamos a establecer un intervalo. Vamos a establecer el valor de la celda. Oh, debería haber mencionado esto antes. Hay tres formas diferentes de actualizar las celdas. Puedes decir ahora.current = new Date. Puedes decir ahora.set(new Date). Y también puedes decir ahora.update(oldDate). Y luego lo que quieras hacer. Esas son básicamente solo tres formas diferentes de decir lo mismo. Eso es todo. Y luego, como antes, estamos devolviendo un objeto. Tiene un formato en él. Quiero señalar algo aquí, que es que el objeto que devolvemos al final sigue siendo un valor único que no cambia con el tiempo, aunque este bloque aquí puede cambiar. Y veremos en el siguiente paso que este bloque puede cambiar. Veremos en el siguiente paso que si algo dentro del bloque de configuración se invalida, se desmonta el bloque de configuración. Pero no destruye este código. Así que lo único que estamos haciendo aquí es devolver un objeto que tiene un método de formato. Y toma un estilo de fecha y un estilo de hora. Y todo lo que hace es usar intl.dateTimeFormat y leer ahora ese código. Así que ahora, al igual que antes, vamos a decir useResourceClock. Y luego vamos a decir useReactive. useReactive, esta vez no toma un callback. No hay dependencias esta vez. Y todo lo que hacemos es decir que el tiempo es ..., y luego llamamos al método de formato en el reloj con el formato de hora y el formato de fecha. En realidad, probablemente, se refiere a mí. Probablemente debería haber tenido formato de hora y formato de fecha. Básicamente, el trato aquí, por cierto, es que más o menos no lo necesitas realmente. Pero en ciertos casos en el modo estricto, si no lo pasas, terminas con un valor obsoleto. Y básicamente, por mejor o peor, eso es lo que React quiere que hagas, y eso garantiza que el comportamiento sea correcto. Pero la mayoría de las veces, si no pasas matrices de dependencias y el componente externo se vuelve a renderizar, obtienes el comportamiento correcto. No es que el useReactiveBlock solo se almacene en caché en función del ReactiveState dentro de él. También se vuelve a evaluar cada vez que el componente externo se vuelve a evaluar. Eso es un poco detallado.

Entonces, es importante, cuando llamas a clock.format, tenemos un formato de hora y un formato de fecha. Esas son dos piezas de ReactiveState que se permiten cambiar. Pero también está el reloj que avanza, y eso se usa aquí. Así que solo estamos haciendo algo bastante normal y estándar. Acabo de extraer el estilo de selección en su propio componente. Y nuevamente, parte del punto aquí es que es algo bastante normal en React. Puedes intercalarlo fácilmente, mezclarlo. Tengo una cosa que es un componente normal que me da SelectStyle. Puedes usar hooks normales, etc. Y luego, como solo estoy llamando a otro componente aquí y no estoy usando ningún ReactiveState aquí afuera, no tengo que decir use ReactiveState aquí. En cuanto a este código, no hay nada Reactivo sucediendo. Pero luego, cuando llamo a un reloj, ese código está usando un recurso, o ese código dice use Reactive. Y nuevamente, eso funciona de la manera que esperarías. Ahora tengo un último paso aquí, que básicamente es solo mostrarte sobre la invalidación. Aquí tengo un ejemplo donde el recurso toma la velocidad, que es una actualización en milisegundos, y lee la actualización en milisegundos cuando configura el intervalo aquí. Y la idea es que me gustaría borrar el intervalo y configurar un nuevo temporizador cada vez que cambie la actualización en milisegundos, pero quiero mantener la antigua celda y el objeto antiguo. Básicamente, si lo ralentizo, verás que se detendrá y tardará más tiempo en actualizarse. Si lo acelero, se actualiza más rápido. Y la forma en que esto funciona es que la función de configuración es básicamente una función que solo te da un valor estable. Hice un ReactiveObject con milisegundos actualizados de 1,000. Obtuve una versión estable de eso. Pasé eso al reloj. Y luego la función del reloj toma la velocidad y luego, como dije, accede a la propiedad de actualización de milisegundos dentro de mi configuración. Y lo que eso significa es, déjame hacer un registro en la consola aquí. Hagamos un registro en la consola aquí. Creando recurso. Volvámoslo a poner para que podamos mostrarlo. OK. Entonces, si lo recargo ahora, esto es modo estricto, creando el recurso, creándolo de nuevo, creándolo de nuevo, lo que sea. Y luego eventualmente llama a la configuración. Si lo acelero, puedes ver que la configuración se llama de nuevo, pero no el recurso, ¿verdad? El recurso externo es estable. Y la configuración, pero la regla de edad se está desmontando. Eso es importante porque te permite mantener el valor que obtuviste de useResource, y se garantiza que funcione. Sin cierres obsoletos ni nada por el estilo. Se garantiza que obtengas el mismo valor de vuelta. OK. Ese fue el único punto de todo este ejemplo. Sí, y solo para que lo veas, ¿cómo funciona? Solo estoy usando como slash igual y estrella igual para actualizar el valor que está dentro de ReactiveObject, y eso funciona como se esperaba. Ahora pasaremos a la siguiente parte que dije que haría en la propuesta. Así que pasaremos al paso 2. Sí, olvidé hacer que la barra de navegación funcione en una ventana más pequeña. OK, entonces, básicamente, una demostración rápida es que puedo, estoy usando, en este ejemplo, verás en un segundo, solo estoy usando datos locales. Y a medida que incremento el ID de usuario, me da el valor correcto. Y este es un ejemplo aburrido, pero hay un punto específico que quiero hacer aquí. Entonces, en este ejemplo, tengo un recurso de usuario actual. Y el recurso de usuario actual, como verás aquí, solo copié y pegué de, olvidé cómo se llama, de JSON placeholder. Solo copié y pegué todos los datos. Pero el recurso tiene una celda, que es solo un índice actual. Y devuelve un objeto que tiene un getter actual que devuelve el miembro de la matriz en el índice actual punto actual. Y lo importante aquí es que aunque lo único que cambia es el índice actual, el hecho de que este getter accede a índice actual punto significa que este valor se invalida.

Este valor se rastrea. Y luego, lo mismo aquí. Si solo accedes al índice, se rastrea. Y luego, todo lo que hace choose. Entonces, si dices que quieres elegir un índice, todo lo que hace es establecer el índice en la celda. Entonces, nuevamente, lo mismo. Tienes una celda. Devuelves un objeto. El objeto es estable. No cambia con el tiempo. Puedes obtener el valor actual. Obtienes el índice. Eliges, etc.

Entonces, ahora veamos cómo funciona. Obtenemos el recurso de usuario actual. Básicamente, ¿qué es el perfil? Si el usuario actual es indefinido, entonces básicamente digo ID de usuario no válido. user.current, recuerda, es solo esto. No está haciendo nada super especial. Pero está accediendo al índice. Eso significa que cada vez que cambia el índice, todo esto se invalida. Entonces, si no hay un usuario actual porque está fuera de rango, dice ID de usuario no válido. De lo contrario, invoca el componente de perfil. Y el componente de perfil, notablemente, solo toma el usuario de la API. El usuario de la API es esto. No es algo de StarView. Debido a que lo llamamos con user.current dentro de user reactivo, ahora es solo un usuario de API normal. Y desde el mundo exterior, se ve normal.

Hice un pequeño ayudante JSONify que lo único que hace es llamar a JSON.stringify por ti. Todo lo que hace es hacer que los perfiles sean gratuitos con JSON.stringify. Lo siento mucho. Y luego, puedes ver esto si estás interesado. Me gusta. Pero básicamente es solo una entrada. Es un campo de entrada que escribí. No creo que haya algo de StarBeam en él. Es algo muy estándar de React. Entonces, cada vez que se actualiza el número, llamamos a user.choose. Obtenemos una cadena de vuelta, aunque sí, obtenemos una cadena de vuelta. Debido a que los ID de usuario están desplazados en 1, el ID de usuario 1 está en realidad en el índice de matriz 0. Restamos 1 allí. Notablemente, puedes hacer cualquier cosa que funcione en JavaScript normal. No tienes que pensar en si hice lo correcto Reactivo aquí. No, el método choose establece un valor. Puedes restar esto todo el tiempo. Y luego, el valor del campo es solo user.index más 1. Y user.index, recuerda, es solo esto.

OK, y luego el perfil es solo esto. Entonces, creo que, nuevamente, cuando decidí hacer este estilo, una de las cosas que quiero mostrar es que no tienes que sumergirte en el mundo de StarBeam y luego no puedes usar ninguna cosa normal de React. Una gran parte de lo que está sucediendo aquí es cosas normales de React. Es solo que si decides usar el estado de StarBeam en lugar de useState, puedes hacerlo. Y ofrece muchos beneficios.

No tienes que preocuparte por este tipo de cosas si estás trabajando con React, vale. Bien, ese es el segundo paso, muy aburrido. Pero siento que tengo que escribir 'label equals' en todas partes ahora. No puedo cambiarlo. Olvidé actualizarlo. Ahora vamos a hablar de qué se trata ser una API de datos real. Para mostrarte esto, tengo que mostrarte algo. He creado una API de datos remotos. Y voy a mostrarte una versión simplificada solo para mayor claridad. Verás más adelante, hay más en la implementación real. Pero esto es una aproximación bastante cercana.

Entonces, ¿qué son los datos remotos? Toma una URL. Los datos son simplemente un objeto reactivo que tiene un estado y un valor en él. Y luego hice una función asíncrona. FetchData toma una señal de tablero. No tuve que hacerlo, pero decidí admitir la cancelación. Y eso significa que en el modo estricto, obtienes una cancelación, y así es como es. Creo que eso es lo que el modo estricto espera de ti. Básicamente, hacemos una solicitud aquí. Si el resultado es OK, entonces esperamos JSON. Esto debería ser bastante comprensible. Solo estamos actualizando algunos valores. Y luego en la configuración, esto es solo una función. En la configuración, creamos un nuevo controlador de aborto. Llamamos a fetch con una señal. Entonces así es como llegó la señal. Y luego capturamos cualquier error y establecemos el estado como error. Y luego la limpieza de la configuración es abortar el controlador. De lo contrario, simplemente devolvemos todos los datos. Así que estamos empezando a entrar en algo más elaborado aquí. Pero todo se basa en lo que hemos visto hasta ahora. OK. ¿Dónde estamos? OK, entonces use resource. Llamamos a los datos remotos. Nuevamente, el perfil solo toma un ID como una cadena en valores normales de React. Entonces podemos pasarlos aquí, pasarlos allá. Lo que llamamos use reactive. Use reactive no toma nada especial, ¿verdad? ¿Correcto? Y luego todo lo que estamos haciendo aquí es decir, OK, si el estado del usuario es de carga, simplemente decimos 'cargando'. Si hay un error, mostramos el error. De lo contrario, si es un éxito, hacemos lo que hicimos antes. Esto es como si realmente no lo necesitaras. Y en realidad sí lo hago. Pero creo que TypeScript me hace querer tener que decir algo allí. Pero no creo que pueda suceder nunca. OK, solo para mostrarte si paso al siguiente ejemplo. Entonces puedes ver que dice 'cargando'. ¿Correcto? Y si implemento. Ahora, cada vez que lo cambio, se está cargando de nuevo, lo cual no es necesariamente lo que queremos. Y eso es lo que son los siguientes pasos. Pero aún así, esto es bastante bueno. Básicamente, solo construyendo sobre lo que ya aprendimos, podemos construir una pieza reactiva de estado de carga reactiva, maneja correctamente la cancelación, maneja el modo estricto descomponiendo las cosas, y todo eso. Por cierto, podría haber hecho más aquí. Pero creo que solo mostrarte el JSON es probablemente lo suficientemente claro. OK, como dije, todo eso está muy bien. Pero realmente nos gustaría poder almacenar varios de ellos, como mantenerlos en memoria. Entonces esto es lo que hace esto. Solo hay 10 en la base de datos, así que solo quería romper el 10. Pero básicamente, ahora hay un campo de texto. El campo de texto tiene un número entre 1 y 10. Cuando se carga inicialmente, no hay elementos en él.

Y espero que puedas tener una idea de cómo esto está conectado con el ejemplo del contador que hicimos antes. OK, entonces a medida que incremento, se está cargando. Y luego, si los selecciono, lo obtienes. Obtienes el correcto, ¿verdad? Y genial. OK, ¿cómo funciona eso? Estoy en el paso cuatro, ¿verdad? Sí, ¿cómo funciona eso? Primero que nada, hice un recurso de usuario, al igual que hice antes con el recurso de contador, y al igual que antes, hago un mapa reactivo. Cada API en StarBeam tiene un lugar para poner una descripción. Y si usas la API de depuración, básicamente te muestra cómo todo está conectado entre sí y te muestra la descripción si proporcionas una. OK, ¿qué devolvimos? Devolvimos un mapa, el mapa que es el mapa real, y todo. Y el 'all' básicamente va a iterar sobre las entradas y las ordena por ID. Nuevamente, esto es como un mapa.entry estándar, una ordenación estándar, cosas normales de JavaScript estándar. Y luego, 'get' dice si el mapa tiene el ID, entonces vamos a, aquí está la siguiente cosa interesante. Entonces, si el mapa no tiene un ID, entonces vamos a llamar a la función de recurso que toma un uso. Lo vimos antes, pero también toma un uso. Y eso te permite crear un nuevo recurso dentro del recurso existente que se conecta, y su tiempo de vida se conecta. Entonces, el usuario es solo un envoltorio alrededor de datos remotos. Pero esto básicamente significa que cuando se limpian los usuarios externos, todos los individuales se limpian, no tan importante con fetch, porque probablemente tienes un montón de informes colgando, pero si tienes un canal o algo así, funcionará. OK. Entonces, si el mapa tiene ID, lo establecemos. De cualquier manera, devolvemos el documento.

OK. Entonces veamos. Permíteme poner la etiqueta aquí. Etiqueta igual a ID de usuario. Entonces, el ID actual es, nuevamente, la fecha de uso estándar. Obtenemos los usuarios como un recurso de usuario. Dado que el ID actual es una cosa normal de React, lo pasamos como una dependencia aquí. Y luego lo mismo con el campo. El campo simplemente cambia el ID actual. Ahora aquí está lo importante. Hay una cosa crítica aquí, y es que, OK, vamos a llamar simplemente a users.all. ¿Y qué es users.all? Recordamos, simplemente hace esta propagación estándar. Iteramos sobre ella, y luego el ID es la clave, la clave de React. Entonces simplemente creamos un elemento de usuario. El elemento de usuario lo veremos en un segundo. Entonces, un elemento de usuario toma un ID. Toma un recurso. Async es solo esto, como es solo esto que tiene esta unión. Básicamente tiene estos diferentes estados. Entonces es un recurso de eso. Recurso simplemente significa que llamas a eso actual para obtener el valor actual. Y luego, tienes el actual como un número, y obtienes una función de selección. Y select, si miras aquí, simplemente llama a setCurrentID, que es una cosa normal de React. Y eso es, nuevamente, a lo que me refiero con la intercalación. Estás estableciendo el ID actual, que es una pieza normal de estado de React. Y eso va a afectar lo que sucede en el mundo de Starbeam también. Entonces, ¿qué es un elemento de usuario? Bueno, primero que nada, ¿qué significa si es actual? Significa que el ID para este usuario es el mismo que el ID actual, así que pasamos el ID, que es este ID, y el actual, que es el ID actual. Nuevamente, es una pieza de estado de React. Luego devolvemos un elemento de usuario. Esto es un botón normal de React. Cuando haces clic en él, simplemente va a llamar a select con el ID.

Y si quieres tener una idea de cómo funciona, eso es lo que está haciendo. Y luego tengo un componente de nombre de usuario. El componente de nombre de usuario toma un usuario de API asíncrono. Y creo que no necesito ver Reactivo aquí, pero lo dejaré por ahora porque no quiero meterme con eso. No veo que se use ningún estado Reactivo. OK, entonces el nombre de la clase, si el estado es un error, es error. Y luego, estamos verificando el estado del usuario. Y esto es un poco confuso. Aparece en un, esto es solo un diseño de API, una cosa sobre este ejemplo. En el siguiente paso, termino, admito la recarga. Y en un estado de recarga, puedes estar, básicamente, esto resultará en, si estás recargando desde un error, te mostraré el siguiente paso. Si estás recargando desde un error, entonces obtienes el nombre de la clase de error, pero también puedes estar cargando. O puedes ser un valor. Estoy de acuerdo en que en este ejemplo en particular, eso es un poco, se ve raro. De cualquier manera, estás cambiando el estado del usuario. El usuario es simplemente, en este punto, el valor actual que pasamos. Así que creo que puedo dejar esto. Y creo que funcionará. No lo hace. ¿Por qué? Ah, eso es porque el usuario también es reactivo. Esta cosa. Como esta cosa. OK, creo que, en general, obtienes un buen error si lo arruinas. Por lo general, termino envolviendo mucho en él cuando sé que estoy interactuando con el estado reactivo y funciona. OK, entonces eso es lo que es el nombre de usuario. Es como, vamos a recargar. Entonces, básicamente es esta pequeña pieza aquí, ¿verdad? Es esta pieza. Ahora, cuando selecciono algo, ¿verdad? Lo que hace es llamar a la función de selección que pasé y eso finalmente resultará en que se llame a setCurrentID. Y eso resultará en la variable de usuario. Así que la variable de usuario es como todos mis usuarios que obtengo y luego esta pieza de estado reactivo, ¿verdad? Así que cada vez que actualizo esa pieza de estado reactivo, el usuario se actualiza y puedo pasarlo allí, ¿verdad? Así que nuevamente, hay una intercalación sucediendo. Y el perfil es lo que vimos antes. No creo que haya nada especial más allá de lo que vimos antes.

De acuerdo, siguiente. Así que eso está bien, pero quería manejar algunos casos adicionales. Quiero manejar errores y quiero manejar la recarga, la revalidación, ¿verdad? Y creo que aquí es donde StarBeam comienza a alejarse de lo que normalmente puedes hacer si aún no estás convencido. Así que veamos qué hace este ejemplo. Bueno, déjame mostrarte primero. Básicamente lo configuré para que una de cada cuatro veces obtengas un error en lugar de obtener un resultado. Te mostraré cómo funciona en un segundo, pero igual que antes obtenemos estas cosas, se cargan, pero ahora, a diferencia de antes, puedo hacer clic en esta cosa y se recargará y puedes ver que dice 'actualizando' allí. Cada vez que hago clic en ella, puedes ver algunas cosas. Si estoy cargándola, hace lo correcto. Esta cosa de errores y esta cosa de descarga es solo, es una cuenta. Y lo más importante aquí es que simplemente, parece un JavaScript normal, cómo lo describes.

De acuerdo, así que llegamos a eso. Hasta ahora, todo es básicamente lo mismo. Sin embargo, básicamente agregué algunas funcionalidades a los datos remotos que no te mostré antes, que básicamente son una forma de invalidar los datos remotos y la tasa de error. Si lo analizamos, lo que puede, lo que probablemente sea evidente en este momento es que cuando tienes un estado reactivo, si lees un estado reactivo, invalida cualquier cálculo que lo use. Hay un tipo especial de estado reactivo llamado marcador. Ahora podrías haber usado una celda e incrementado un número o algo así, pero hace que la depuración sea más fácil si simplemente explicas lo que estás haciendo. Entonces, un marcador es simplemente algo que puedes validar cuando quieras. Y la API de datos remotos toma un marcador como opción. Ahora, dentro de la configuración, si el marcador se llama 'invalidate', dentro de la configuración, todo lo que hace es leer el invalidador. Y eso significa que si más tarde marcas el invalidador como sucio, se limpiará y reiniciará solo el bloque de configuración. Todo lo demás será igual, pero se reciclará este bloque de configuración. De lo contrario, eso es todo lo que hace. Básicamente es solo otro consumo. Y creo que la forma de pensar en esto es que la pieza de datos aquí que estamos devolviendo tiene otro estado, que es como, ¿todavía soy válido? ¿Es este un usuario válido? Y si lo invalidas, eso es solo un hecho sobre los datos subyacentes, ¿verdad? Simplemente leyéndolo, podría haber sido una revisión. Podría haber sido cualquier cosa. De lo contrario, es lo mismo. La tasa de error está aquí. Básicamente, simplemente digo, okay, si, como, si hay una tasa de error, entonces simplemente, como si dijeras 0.25, yo, lo que sea, esto es solo matemáticas. Básicamente, si hay una tasa de error y es el módulo correcto, entonces simplemente devuelve error. Eso me permite demostrar el error. Volviendo al paso cinco. Creo que todo se ve igual. No recuerdo. Creo que esta es una de las razones por las que aún no he publicado el paquete es tratar de averiguar cómo hacer que esto no sea necesario. Es algo que tendrías que hacer en React, pero, como, no es realmente necesario, pero creo que arreglarlo hizo que las pruebas fallaran. De acuerdo, entonces.

Ah, así que algunas cosas. Aquí hay mucho más código, y creo que recomendaría echarle un vistazo mientras sigues el proceso, pero no hay nada importante aquí, así que agregué una cosa de estadísticas. Las estadísticas son, en resumen, básicamente lo mismo que hicimos antes, ¿verdad? Es como decir, dame todos los usuarios, filtra por user.status.length. Aquí están las estadísticas de error, si hay algún error, y así sucesivamente. Básicamente, creo que una buena forma de pensar en esto es, si estuvieras escribiendo una versión de nodo de esta biblioteca, como un ORM o algo así, esto es simplemente el código que escribirías. Y no tienes que pensar mucho más allá de eso, ¿verdad? Tienes que decir 'useReactive', tienes que usar 'useResource', pero una vez que tienes un objeto en tus manos, puedes filtrarlo básicamente como quieras. Y lo que eso produce es que, en este momento hay un error porque el estado de un usuario dice 'error'. Echemos un vistazo rápido a esto. Así que eso, y todo eso... La única razón por la que el estado del usuario es 'error' es porque tenemos un objeto reactivo y cuando hay un error, establecemos el estado como 'error' aquí, ¿verdad? Así que es bastante normal. Sí, esas son las estadísticas. En cierto sentido, me estoy repitiendo mucho aquí porque creo que es difícil realmente, hay mucho código aquí, pero el 95% de él es algo que probablemente ya sabíamos hacer. Básicamente, puedes seguir el enfoque reactivo y funciona. Bien, veamos. Ah, entonces, ¿qué hace este botón de actualización? Todo lo que hace es llamar a 'validate'. Todo lo que hace es llamar a 'mark', ah, hice una clase solo por diversión. Entonces, lo otro es que puedes simplemente poner cosas en una clase porque es solo una aplicación, como, no hay, no tienes que escribir ninguna derivación, blah, blah, blah, o como en 'computed', lo que sea, básicamente, como quieras almacenar tus objetos, como quieras leerlos, siempre y cuando realmente puedas leerlos en algún lugar, estás bien. Entonces, ¿la recarga básicamente solo dice si el estado está recargando? Y eso sucede si volvemos a los datos remotos, la forma en que obtenemos la recarga es que, en, si la configuración es, si ocurre esta desactivación, entonces recordamos la última pieza de datos y la almacenamos dentro de un valor y también establecemos el estado como recargando. Entonces sí, eso es lo que es la recarga. Y nuevamente, solo estoy tratando de decir que, puedes pensar en todo esto como simplemente leer datos normales y las mutaciones simplemente no, debes hacer las mutaciones en un controlador de eventos. Pero creo que eso, lo que sea, es normal. Y eso es también lo que React quiere y obtienes buenos errores si no lo haces. Pero es bastante fácil no estropearlo.

Ok, genial. Ah, así que obtén datos, agregué un pequeño ayudante aquí que básicamente desempaqueta la recarga. Sí, no quiero tener que, no voy a leer todo el código aquí. Creo que si esto fuera una verdadera masterclass, probablemente nos ensuciaríamos un poco más las manos, pero creo que vale la pena leerlo por ti mismo si estás interesado. Estoy tratando de pensar si hay algo muy interesante aquí. Creo que cubrimos la mayor parte. Creo que sí, por lo que los usuarios, todo ese map, todo sigue funcionando como antes. Nuevamente, creo que lo único que agrega este ejemplo es el marcador de invalidación. También comencé a escribir más abstracciones, pero ese es el punto. El punto es que a medida que construyes tu biblioteca, realmente puedes refactorizarla como quieras. Puedes, si te gusta esta cosa de getAcing, por ejemplo, tal vez no lo entiendas. ¿Dónde está eso? Tal vez no lo entiendas, pero el punto importante es que no tuviste que pensar, oh, ya envolví tu cosa. Necesito escribir use getAcing, necesito escribir derive, necesito lo que sea. Básicamente, puedes sacar estas abstracciones de funcionamiento. Ok, eso es todo. Sí, ya comencé a hacer algo de filtrado aquí, ya hicimos algo de ordenamiento antes, ¿verdad? Y lo que va a suceder es que todo va a funcionar como antes, puedo seleccionar cosas. Si selecciono un error, se va a actualizar y eso está bien. Un último paso y luego responderé cualquier pregunta de la única persona que ha aguantado, si hay alguna. Entonces, lo último es que porque lo puse en la abstracción, escribí una lógica de filtrado. Y la lógica de filtrado es básicamente así, si escribo 'towel' o algo así, decido dejar los errores 404 porque de lo contrario no hay forma de actualizarlos. Sin embargo, si los actualizas y luego no coinciden con el filtro, desaparecen. Veamos cómo funciona eso. Sí, básicamente creé un nuevo filtro usando getState, cosas normales, pásalo por aquí. Y luego, en lugar de decir users.all aquí, digo users.all.filter. Y luego simplemente digo, ¿es el estado del usuario? Si el estado del usuario no es éxito, déjalo porque, como dije, quieres volver a cargarlo. De lo contrario, verifica si el usuario coincide con el filtro, que veremos en un segundo. O si el filtro está vacío, eso también está bien. ¿Y qué significa matches? Una vez más, es un método que podríamos poner en nuestro objeto de usuario local y podemos hacer lo que queramos, ¿verdad? Así que simplemente obtenemos los datos, obtenemos los datos, éxito. Y este es el filtro más aburrido, ¿verdad? Como los nombres en minúsculas incluyen el texto, entonces devuelve verdadero. Supongo que puedo hacer esto. Me sorprende que tengamos uno para el largo. Ahora, si escribo algo como 'Leanna', sin tener que propagar, pensar en dependencias, etc. Todo lo que hago es cambiar la cosa subyacente y eso fue suficiente para hacer que eso desaparezca, cambiar la cosa descargada, actualizarla mientras sucede y todo eso. Ok. Ah, también debo señalar, creo que no mencioné esto antes, pero a medida que cambio el ID de usuario, cambia la cosa que está seleccionada y la forma en que funciona es simplemente, entonces tenemos un ID actual, ¿verdad? El ID actual se conecta a este campo React normal y porque todo lo demás, como el usuario actual, se basa en users.getCurrentID, en todas partes decimos usuario, veamos, cuando pasamos el usuario al perfil, como eso es suficiente para que se actualice cuando simplemente movemos esto, ¿verdad? Si escribo tres, si escribo nueve, ok. Para dar un paso atrás y luego responderé tus preguntas, creo que lo interesante de esto es que básicamente puedes escribir tu, en cierto sentido, esto no es realmente ReactQuery, pero es como si fueras a escribir un ReactQuery estándar, puedes llegar bastante lejos aquí y todo lo que tienes que hacer es hacer un map que tenga los valores en él, puedes usar track state, pero en su mayoría lo estás haciendo en algún lugar profundo y luego todo lo demás es como un objeto que envuelve a otro objeto, pero juntos estás almacenando algunas cosas en un campo privado, como cuando invalido algo, eso es solo otra pieza de estado que puedes modificar y eso invalidará automáticamente el bloque de configuración y creo que algo en lo que pasé mucho tiempo y estoy orgulloso, pero es difícil de comunicar porque la mayoría de las personas tratan de evitarlo, es que el modo estricto de React hace que sea muy, muy difícil tener valores estables. Entonces, si solo estás haciendo esto en Preact o Vue o algo así, es bastante fácil tener valores estables y luego StarBeam se parece mucho a lo que ya esperas. Pero en React, en particular, el modo estricto desmonta y configura el estado constantemente, por lo que si quieres poder decir, estoy leyendo desde el valor estable, tengo un getter en él, tiene su referencia a esta celda y no es un useState, ¿verdad? Es un tipo especial de cosa. Hay mucho trabajo que se realiza para que el modo estricto parezca invisible, ¿verdad? En resumen, obtienes una nueva instancia de, cuando React desmonta y configura el componente detrás de escena, como gratuitamente, eso realmente desmonta y configura el recurso, pero no puedes decir que eso está sucediendo porque todo esto sucede dentro del recurso del usuario y el sistema reactivo.

Estoy bastante satisfecho con eso, lo que básicamente significa que podemos construir algo sólido. Tiene la misma semántica sólida, pero sucede completamente dentro de React, dentro de las semánticas de React y se intercala perfectamente con React. Creo que eso es genial. Lo que me gusta de esto y lo que quiero para un comienzo, lo que me hace feliz, es que te devuelve eso nuevamente. Puedes ir básicamente, si miras la implementación de, por ejemplo, el objeto de usuarios, sí, hay un recurso aquí, pero es como un mapa, literalmente podrías haberlo escrito en un entorno de nodo y tendría sentido, simplemente no sería reactivo, pero ahora lo es.

Ok, creo que una última cosa que quiero decir aquí es que la API de recursos, tal como la estoy usando aquí, va en línea con cómo el ecosistema está haciendo las cosas. Sin embargo, ahora que los decoradores de la etapa tres han llegado, tengo la intención de implementar una versión basada en clases de todas estas APIs y hay muchos casos en los que es muy agradable. Así que solo mostraré un ejemplo. Aquí tenemos un, ¿dónde está, en realidad no tengo un gran ejemplo en este caso, pero básicamente si fueras a poner una celda en algún lugar, podrías escribir algo como reactive user: igual a algo como usuarios, y eso básicamente, detrás de escena, crearía una celda para ti y crearía un getter que lee de la celda y tiene un setter que se actualiza solo. Y personalmente, a veces me gusta, como puedes ver, hice una clase aquí, no es que no puedas hacerlo, pero terminas teniendo que hacer un poco más de trabajo y obtienes un buen conjunto de comportamientos si puedes escribir decoradores y planeo hacer eso. No es porque no tenga una opinión, no quiero influir en cuál es mejor, creo que me gusta lo que hicimos con este diseño. Me gusta el hecho de que, como esto es bastante bueno. A diferencia de React, te brinda los valores estables, etc., pero también me gusta poder usar clases de manera más ergonómica y eso está por venir.

Ok, creo que he cubierto todo. No sé quién es MD, pero ¿tienes alguna pregunta antes de irme? No sé, tal vez tenga que quitarte el silencio o ni siquiera sé cómo funciona eso. No sigas esa. Eso. Ok, veo que dijiste. Entonces, StarBeam es solo una API que obtiene datos JSON. Eso no es del todo correcto. Es una API que te permite crear APIs que obtienen datos. Pero creo que lo importante es que si fueras a escribir tu propia lógica de obtención, escribirías la lógica de obtención y luego la colocarías en algún lugar. Y comencé desde el principio mostrándote, ok, podrías poner una celda, podrías construir abstracciones a partir de ahí. Esa es la respuesta de qué hacer con eso. Creo que sería genial si las personas construyeran ORMs y cosas así a su alrededor. Hay algunas cosas en el repositorio, como algo llamado StarBeam store, que es solo una pequeña tienda con filtrado y cosas así. Sí, creo que eso es lo que es. Creo que en términos de Visual Studio, no hay nada que impida. Es como si necesitara lanzar los paquetes. Entonces ya hay paquetes en MPM, pero no son la API que acabo de mostrarte por completo. Hay algunos cambios. Una vez que lance el paquete, es solo un paquete MPM. Y simplemente, ¿qué está sucediendo? Si miras el código, es como si estuvieras haciendo esto. Suponiendo que Visual Studio tiene el mismo soporte de IntelliSense y TypeScript que VS Code, creo que funcionará. Ah, ok, no usas React. Ok, no cubrí eso porque no fue lo que dije en el tutorial. Pero la forma en que funciona StarBeam es que este código, por lo que llamamos código universal, no este código. Entonces este código y este código, todo el código que no dice nada sobre React, lo llamamos código universal. Y el código universal es simplemente código reactivo que describe todo. Tiene recursos, tiene ciclos de vida y todo, pero no se refiere a ningún framework específico. Y la forma en que lo conectas a un framework es algo llamado renderizador. Pasé mucho tiempo mostrándote el renderizador de React. Ya existe un renderizador de Preact y funciona de la misma manera, pero no tienes que escribir use Reactive todo el tiempo, básicamente. También hay un renderizador de Vue en el repositorio, view.js, y hay un renderizador de spell que construimos hace mucho tiempo y que necesitamos actualizar, que también llegará pronto. Pero la idea básica es que, como dije, la forma correcta de usar StarBeam es aprender a construir este tipo de código muy bien, simplemente pensar en todo, principalmente en términos, puedes construir toda una biblioteca de datos sin pensar en React, React, vista, spell, lo que sea. Y luego, cuando estés listo para usarlo, simplemente dices, usa, blah, blah, blah. Como aquí, dirías, usa Reactive o usa recurso.

En Preact dices lo mismo, en Vue creo que es simplemente, como, usar paréntesis. No, es setup. Y, como, hay, no sé, no estoy seguro si lo tengo fácilmente accesible, pero sí, hay algunas, hay una configuración. Muy bien. Sí, solo te mostraré, creo que esto tal vez te ayude. Espero haber respondido tus preguntas. De acuerdo, así que vamos a cerrar esto y luego, solo estoy, eso no es, en realidad. Hay un documento de Markdown en algún lugar, buscando. De acuerdo, déjame hacer la vista previa, hacer la asignación. Esto es algo nuevo, pero es como una versión 1.0. Entonces, la idea básicamente es así, aquí están todas las representaciones. Y estas son las API que funcionan en todas partes. Pero SetupReactive y SetupResource solo funcionan si ya estás en un contexto que solo, necesitas estar en un contexto que se ejecuta, que sabes que se ejecuta durante la configuración y no en otros lugares. Hay formas de hacerlo en React, pero en React básicamente quieres usar un hook. Entonces, básicamente, hay algo, como una sección llamada renderizadores de estilo de hook y eso tiene la API de estilo de hook. Pero la idea detrás de este documento es básicamente queremos tener un conjunto de API que funcione en todas partes. Y si, básicamente, la idea es esto se desarrollará y luego usarás la misma API básica en todas partes. Y nuestro trabajo es unirlo todo. Pero creo que lo genial es que la mayor parte del tiempo, como, sí, déjame... Creo que deberías ir a stardomjs.com aunque está un poco desactualizado ahora y debería actualizarse pronto. Me faltaba algo y luego debería terminar. Entonces, lo que quiero decir es que cuando te adentras en Starbeam, como dije antes, la mayor parte del trabajo que haces es en código universal, ¿verdad? Es código que no... Como terminas escribiendo, como si miraras este código, como el 80% o algo así es código universal. Y creo que el hecho de que los recursos te permitan seguir teniendo acceso al ciclo de vida y cosas así. Y puedes hacerlo de manera universal, y puedes pensar en ello como una forma universal de escribir libros, ¿verdad, si eres un programador de React? Hay algunas otras características de las que no hablé y esto lo terminaré después de esto. Por ejemplo, hay algo llamado modificadores, que es básicamente una forma universal de escribir código que se conecta a elementos. Así que eso es como directivas en Angular, directivas en Svelte. No sé cómo se llaman en Vue. Refs en sistemas basados en hooks, ¿verdad? Así que hay una forma de hacer eso. Y también hay algo llamado servicios, que es básicamente una forma de tener un recurso singleton, como cualquier recurso que desees tener solo una copia para toda la aplicación. Y el tema de los servicios ya está en, el repositorio ya existe. Creo que incluso está aquí. Los modificadores llegarán pronto. Estarán en una futura versión, pero en los próximos meses. Así que básicamente nuestro plan es tratar de ser lo más universal posible. Para que puedas escribir, básicamente, bibliotecas. El único lugar donde no puedes escribir algo universal y está fuera de alcance es la interfaz de usuario, porque eso es lo que intentabas usar en el framework, ¿verdad? Pero eso no significa que no puedas acceder, como un modificador es una función que toma un elemento y devuelve un recurso, ¿verdad? Y así puedes llegar bastante lejos en lo que puedes hacer. Simplemente, no vamos a tener una sintaxis de div con corchetes angulares en Tarbin, pero ese es el punto de React o svelte o Angular. De acuerdo. Creo que eso me resume. Muchas gracias. Gracias por quedarte y ser una persona, es mejor tener una persona que ninguna. Espero que haya sido útil. Y estate atento al sitio web. Creo que el sitio web se actualizará en las próximas semanas con todos estos detalles de manera más clara. Y voy a subir el código real que mostré. Como está en la demostración que acabo de mostrarte estaba dentro del repositorio. Así que lo voy a subir en las próximas horas, probablemente puedas ir a echar un vistazo. Probablemente lo tuitearé. Muy bien. Muchas gracias. Gracias por estar aquí. Adiós.