rdom

rdom

การอัปเดต DOM แบบโต้ตอบด้วย Ruby

การสาธิตสดที่ rdom .fly.dev

การฝังการสาธิตที่ rdom .netlify.app

คำอธิบาย

นี่คือการทดลองขั้นพื้นฐานกับ VDOM ฝั่งเซิร์ฟเวอร์ใน Ruby หากต้องการการใช้งานที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ Mayu Live ฉันมีไอเดียบางอย่างที่รู้สึกเหมือนต้องสำรวจ และนี่คือผลลัพธ์

เริ่มต้นใช้งาน

ตรวจสอบให้แน่ใจว่าคุณมี Ruby 3.2 และ Bundler จากนั้นรัน:

 bundle install

ในการเริ่มต้นเซิร์ฟเวอร์:

 ruby config.ru

เซิร์ฟเวอร์

สิ่งนี้มาพร้อมกับเซิร์ฟเวอร์ HTTP/2 เริ่มต้นด้วย ruby config.ru

ตามค่าเริ่มต้นจะผูกกับ https://localhost:8080 แต่สามารถเปลี่ยนแปลงได้โดยการตั้งค่าตัวแปรสภาพแวดล้อม rdom _BIND เช่น rdom _BIND="https://[::]" ruby config.ru

การฝัง

นี่เป็นบรรทัด HTML เดียวที่คุณต้องติดตั้งแอป

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 > 

แปลงร่าง

คุณสามารถใช้ bin/transform เพื่อดูเอาต์พุตที่แปลงแล้วของไฟล์ Haml

ตัวอย่าง:

 bin/transform app/List.haml

คุณสมบัติและข้อจำกัด

การเรนเดอร์แบบปฏิกิริยา

พื้นที่เก็บข้อมูลนี้มีไลบรารีสัญญาณรีแอกทีฟที่ได้รับแรงบันดาลใจจาก SolidJS, Preact Signals และ Reactively

สตรีมมิ่งเท่านั้น

แอปที่สร้างด้วยสิ่งนี้สามารถสตรีมได้เท่านั้น เซิร์ฟเวอร์จะไม่พยายามสร้าง HTML สำหรับคำขอเริ่มต้น หากคุณต้องการให้บริการ HTML ในคำขอเริ่มต้น โปรดดูที่ Mayu Live

ไม่มีการดำเนินการต่อ

หากการเชื่อมต่อหลุด สถานะทั้งหมดจะหายไป หากต้องการลองทำสิ่งที่น่าเชื่อถือกว่านี้ ลองดู Mayu Live

องค์ประกอบที่กำหนดเอง

แผนผัง DOM แบบคงที่ทั้งหมดจะถูกแยกออกเป็นองค์ประกอบที่กำหนดเอง ดังนั้นหากคุณเขียนว่า:

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

จากนั้นรหัสนี้จะถูกสร้างขึ้น:

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

เบราว์เซอร์จะให้:

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 >

แต่ละช่องภายใน Shadow DOM จะมีโหนดที่ได้รับมอบหมายเมื่อใดก็ตามที่ลูกได้รับการอัปเดต

นี่เป็นสิ่งที่ดีด้วยเหตุผลหลายประการ:

• มาร์กอัปจะถูกถ่ายโอนไปยังเบราว์เซอร์เพียงครั้งเดียวและสามารถนำมาใช้ซ้ำได้
• การแตกแยกจะง่ายขึ้นเพราะเราไม่สนใจเรื่องลำดับ HTMLSlotElement.assign() อัพเดตลำดับลูกใน 1 สาย ไลบรารี VDOM ส่วนใหญ่ใช้อัลกอริธึม 2-way-diffing ที่มีชื่อเสียงซึ่งเป็นเรื่องยากที่จะแก้ไขให้ถูกต้อง

องค์ประกอบที่กำหนดเองแต่ละรายการมี :host { display: contents; } เพื่อหลีกเลี่ยงการรบกวนดิ้นและกริด