rdom

rdom

Pembaruan DOM reaktif dengan Ruby.

demo langsung di rdom .fly.dev

menyematkan demo di rdom .netlify.app

Keterangan

Ini adalah eksperimen dasar dengan VDOM sisi server di Ruby. Untuk implementasi lebih lengkap lihat Mayu Live. Saya punya beberapa ide yang saya rasa harus saya jelajahi, dan inilah hasilnya.

Memulai

Pastikan Anda memiliki Ruby 3.2 dan Bundler, lalu jalankan:

 bundle install

Untuk memulai server:

 ruby config.ru

pelayan

Hal ini dilengkapi dengan server HTTP/2. Mulai dengan ruby config.ru .

Secara default, ini terikat ke https://localhost:8080 , tetapi dapat diubah dengan mengatur variabel lingkungan rdom _BIND seperti ini rdom _BIND="https://[::]" ruby config.ru .

Penyematan

Ini adalah satu-satunya baris HTML yang Anda perlukan untuk memasang aplikasi.

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 > 

Berubah

Anda dapat menggunakan bin/transform untuk melihat keluaran file Haml yang diubah.

Contoh:

 bin/transform app/List.haml

Fitur dan batasan

Render reaktif

Repositori ini berisi perpustakaan sinyal reaktif yang terinspirasi oleh SolidJS, Preact Signals, dan Reaktif.

Hanya streaming

Aplikasi yang dibuat dengan ini hanya dapat dialirkan, server tidak akan pernah mencoba membuat HTML untuk permintaan awal. Jika Anda perlu menyajikan HTML pada permintaan awal, lihat Mayu Live.

Tidak melanjutkan

Jika koneksi terputus, semua status hilang. Untuk mencoba sesuatu yang lebih andal, lihat Mayu Live.

Elemen khusus

Semua pohon DOM statis diekstraksi menjadi elemen khusus, jadi jika Anda menulis:

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

Maka kode ini akan dihasilkan:

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

Browser akan memberi Anda:

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 >

Setiap slot di dalam shadow DOM akan memiliki nodenya yang ditetapkan setiap kali turunannya diperbarui.

Ini bagus karena beberapa alasan:

• Markup hanya ditransfer ke browser satu kali dan dapat digunakan kembali.
• Diffing menjadi lebih mudah karena kita tidak peduli dengan keteraturan. HTMLSlotElement.assign() memperbarui urutan anak dalam 1 panggilan. Sebagian besar perpustakaan VDOM menggunakan algoritma perbedaan 2 arah yang terkenal, yang sulit dilakukan dengan benar.

Setiap elemen khusus memiliki :host { display: contents; } untuk menghindari gangguan pada flex dan grid.