rdom

rdom

Atualizações reativas de DOM com Ruby.

demonstração ao vivo em rdom .fly.dev

incorporando demonstração em rdom .netlify.app

Descrição

Este é um experimento básico com um VDOM do lado do servidor em Ruby. Para uma implementação mais completa, consulte Mayu Live. Tive algumas ideias que senti que precisava explorar e este é o resultado.

Começando

Certifique-se de ter Ruby 3.2 e Bundler e execute:

 bundle install

Para iniciar o servidor:

 ruby config.ru

Servidor

Essa coisa vem com um servidor HTTP/2. Comece com ruby config.ru .

Por padrão, ele se liga a https://localhost:8080 , mas pode ser alterado definindo a variável de ambiente rdom _BIND como este rdom _BIND="https://[::]" ruby config.ru .

Incorporação

Estas são as únicas linhas de HTML necessárias para montar um aplicativo.

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ções

Você pode usar bin/transform para ver a saída transformada de um arquivo Haml.

Exemplo:

 bin/transform app/List.haml

Recursos e limitações

Renderização reativa

Este repositório contém uma biblioteca de sinais reativos inspirada em SolidJS, Preact Signals e Reactive.

Apenas streaming

Aplicativos feitos com isso só podem ser transmitidos, o servidor nunca tentará construir o HTML para a solicitação inicial. Se você precisar servir HTML na solicitação inicial, dê uma olhada no Mayu Live.

Sem retomada

Se a conexão cair, todo o estado será perdido. Para uma tentativa de algo mais confiável, dê uma olhada no Mayu Live.

Elementos personalizados

Todas as árvores DOM estáticas são extraídas em elementos personalizados, portanto, se você escrever:

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

Então este código será gerado:

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

O navegador lhe 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 slot dentro do shadow DOM terá seus nós atribuídos sempre que os filhos forem atualizados.

Isso é bom por vários motivos:

• A marcação só é transferida para o navegador uma vez e pode ser reutilizada.
• Diferenciar fica mais fácil porque não nos preocupamos com a ordem. HTMLSlotElement.assign() atualiza a ordem dos filhos em 1 chamada. A maioria das bibliotecas VDOM usa o famoso algoritmo de diferenciação bidirecional, que é difícil de acertar.

Cada elemento personalizado possui :host { display: contents; } para evitar interferência com flex e grid.