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 >