rdom

rdom

تحديثات DOM التفاعلية مع روبي.

العرض التجريبي المباشر على rdom .fly.dev

تضمين العرض التوضيحي في rdom .netlify.app

وصف

هذه تجربة أساسية مع 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 >

سيتم تعيين العقد الخاصة بكل فتحة داخل DOM الظلي كلما تم تحديث العناصر الفرعية.

وهذا أمر جيد لعدة أسباب:

• يتم نقل العلامات إلى المتصفح مرة واحدة فقط ويمكن إعادة استخدامها.
• يصبح الاختلاف أسهل لأننا لا نهتم بالنظام. يقوم HTMLSlotElement.sign() بتحديث ترتيب العناصر الفرعية في مكالمة واحدة. تستخدم معظم مكتبات VDOM خوارزمية التمييز ثنائي الاتجاه الشهيرة، والتي يصعب الحصول عليها بشكل صحيح.

يحتوي كل عنصر مخصص على :host { display: contents; } لتجنب التداخل مع المرن والشبكة.