rdom

rdom

Ruby를 사용한 반응형 DOM 업데이트.

rdom 의 라이브 데모

rdom .netlify.app에 데모 삽입

설명

이것은 Ruby의 서버 측 VDOM을 사용한 기본 실험입니다. 보다 완전한 구현을 보려면 Mayu Live를 참조하세요. 탐구해야 할 것 같은 몇 가지 아이디어가 있었고 이것이 결과입니다.

시작하기

Ruby 3.2와 Bundler가 있는지 확인한 후 다음을 실행하세요.

 bundle install

서버를 시작하려면:

 ruby config.ru

섬기는 사람

이것은 HTTP/2 서버와 함께 제공됩니다. ruby config.ru 로 시작하세요.

기본적으로 https://localhost:8080 에 바인딩되지만 rdom _BIND="https://[::]" ruby config.ru 와 같이 환경 변수 rdom _BIND 설정하여 변경할 수 있습니다.

임베딩

이는 앱을 마운트하는 데 필요한 유일한 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.sign()은 한 번의 호출로 하위 항목의 순서를 업데이트합니다. 대부분의 VDOM 라이브러리는 유명한 양방향 비교 알고리즘을 사용하는데, 이는 제대로 작동하기 어렵습니다.

각 맞춤 요소에는 :host { display: contents; } 플렉스와 그리드의 간섭을 피하기 위해.