rdom下載 - rdom原始碼下載

rdom

三方組件

1.0.0

下載

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來更改它，例如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 >