rdom

rdom

Actualizaciones reactivas de DOM con Ruby.

demostración en vivo en rdom .fly.dev

incorporación de demostración en rdom .netlify.app

Descripción

Este es un experimento básico con un VDOM del lado del servidor en Ruby. Para una implementación más completa, consulte Mayu Live. Tenía algunas ideas que sentía que tenía que explorar y este es el resultado.

Empezando

Asegúrate de tener Ruby 3.2 y Bundler, luego ejecuta:

 bundle install

Para iniciar el servidor:

 ruby config.ru

Servidor

Esto viene con un servidor HTTP/2. Inícielo con ruby config.ru .

De forma predeterminada, se vincula a https://localhost:8080 , pero se puede cambiar configurando la variable de entorno rdom _BIND así rdom _BIND="https://[::]" ruby config.ru .

Incrustar

Estas son las únicas líneas de HTML que necesita para montar una aplicación.

rdom.js"></script> < rdom -embed src="https://rdom.fly.dev/. rdom "></ rdom -embed>">

 < script type =" module " src =" https://rdom.fly.dev/ rdom .js " > </ script >
< rdom -embed src =" https://rdom.fly.dev/. rdom " > </ rdom -embed > 

Transforma

Puede utilizar bin/transform para ver la salida transformada de un archivo Haml.

Ejemplo:

 bin/transform app/List.haml

Características y limitaciones

Representación reactiva

Este repositorio contiene una biblioteca de señales reactivas inspirada en SolidJS, Preact Signals y Reactively.

Solo transmisión

Las aplicaciones creadas con esto solo se pueden transmitir, el servidor nunca intentará construir el HTML para la solicitud inicial. Si necesita entregar HTML en la solicitud inicial, eche un vistazo a Mayu Live.

No reanudar

Si la conexión se cae, se pierde todo el estado. Para intentar algo más confiable, consulte Mayu Live.

Elementos personalizados

Todos los árboles DOM estáticos se extraen en elementos personalizados, por lo que si escribe:

- items = %w[foo bar baz]
% ul
  = items.map do |item |
    % li = item

Entonces se generará este código:

rdom_Partials = [ VDOM::CustomElement[ :" rdom -elem-app꞉꞉my-component.haml-0", '<ul><slot id="slot0"></slot></ul>' ], VDOM::CustomElement[ :" rdom -elem-app꞉꞉my-component.haml-1", '<li><slot id="slot0"></slot></li>' ] ] def render items = %w[foo bar baz] H[ rdom _Partials[0], slots: { slot0: items.map { |item| H[ rdom _Partials[1], slots: { slot0: item }] } } ] end end">

 # frozen_string_literal: true
class self :: Component < VDOM :: Component :: Base
  rdom _Partials = [
    VDOM :: CustomElement [
      :" rdom -elem-app꞉꞉my-component.haml-0" ,
      '<ul><slot id="slot0"></slot></ul>'
    ] ,
    VDOM :: CustomElement [
      :" rdom -elem-app꞉꞉my-component.haml-1" ,
      '<li><slot id="slot0"></slot></li>'
    ]
  ]
  def render
    items = %w[ foo bar baz ]
    H [
      rdom _Partials [ 0 ] ,
      slots : {
        slot0 : items . map { | item | H [ rdom _Partials [ 1 ] , slots : { slot0 : item } ] }
      }
    ]
  end
end

El navegador te dará:

rdom-elem-my-component.haml-0> #shadow-dom <ul><slot></slot></ul> <li> <slot id="slot0"> < rdom -elem-my-component.haml-1> ↴ < rdom -elem-my-component.haml-1> ↴ < rdom -elem-my-component.haml-1> ↴ </slot> </li> < rdom -elem-my-component.haml-1> #shadow-dom <li> <slot id="slot0"> <#text> ↴ </slot> </li> foo </ rdom -elem-my-component.haml-1> < rdom -elem-my-component.haml-1> #shadow-dom <li> <slot id="slot0"> <#text> ↴ </slot> </li> bar </ rdom -elem-my-component.haml-1> < rdom -elem-my-component.haml-1> #shadow-dom <li> <slot id="slot0"> <#text> ↴ </slot> </li> baz </ rdom -elem-my-component.haml-1> </ rdom -elem-my-component.haml-0>">

 < rdom -elem-my-component .haml-0 >
  #shadow-dom
    < ul > < slot > </ slot > </ ul >
    < li >
      < slot id =" slot0 " >
        < rdom -elem-my-component .haml-1 > ↴
        < rdom -elem-my-component .haml-1 > ↴
        < rdom -elem-my-component .haml-1 > ↴
      </ slot >
    </ li >
  < rdom -elem-my-component .haml-1 >
    #shadow-dom
      < li >
        < slot id =" slot0 " >
          < #text > ↴
        </ slot >
      </ li >
    foo
  </ rdom -elem-my-component .haml-1 >
  < rdom -elem-my-component .haml-1 >
    #shadow-dom
      < li >
        < slot id =" slot0 " >
          < #text > ↴
        </ slot >
      </ li >
    bar
  </ rdom -elem-my-component .haml-1 >
  < rdom -elem-my-component .haml-1 >
    #shadow-dom
      < li >
        < slot id =" slot0 " >
          < #text > ↴
        </ slot >
      </ li >
    baz
  </ rdom -elem-my-component .haml-1 >
</ rdom -elem-my-component .haml-0 >

Cada ranura dentro del DOM oculto tendrá sus nodos asignados cada vez que se actualicen los elementos secundarios.

Esto es bueno por varias razones:

• El marcado solo se transfiere al navegador una vez y se puede reutilizar.
• Diferenciar se vuelve más fácil porque no nos importa el orden. HTMLSlotElement.assign() actualiza el orden de los niños en 1 llamada. La mayoría de las bibliotecas VDOM utilizan el famoso algoritmo de diferenciación bidireccional, que es difícil de hacer bien.

Cada elemento personalizado tiene :host { display: contents; } para evitar interferencias con flex y grid.