rdom

rdom

Ruby によるリアクティブ DOM 更新。

rdom .fly.dev でのライブデモ

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.assign() は 1 回の呼び出しで子の順序を更新します。ほとんどの VDOM ライブラリは、有名な 2-way-diffing アルゴリズムを使用していますが、これを正しく理解するのは困難です。

各カスタム要素には:host { display: contents; }が含まれます。フレックスとグリッドとの干渉を避ける:host { display: contents; } 。