rdom

rdom

Mises à jour réactives du DOM avec Ruby.

démo en direct sur rdom .fly.dev

intégration de la démo sur rdom .netlify.app

Description

Il s'agit d'une expérience de base avec un VDOM côté serveur dans Ruby. Pour une implémentation plus complète, voir Mayu Live. J’avais quelques idées que je pensais devoir explorer, et voici le résultat.

Commencer

Assurez-vous d'avoir Ruby 3.2 et Bundler, puis exécutez :

 bundle install

Pour démarrer le serveur :

 ruby config.ru

Serveur

Cette chose est livrée avec un serveur HTTP/2. Démarrez-le avec ruby config.ru .

Par défaut, il se lie à https://localhost:8080 , mais il peut être modifié en définissant la variable d'environnement rdom _BIND comme ceci rdom _BIND="https://[::]" ruby config.ru .

Intégration

Ce sont les seules lignes HTML dont vous avez besoin pour monter une application.

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 > 

Transformations

Vous pouvez utiliser bin/transform pour voir la sortie transformée d'un fichier Haml.

Exemple:

 bin/transform app/List.haml

Caractéristiques et limites

Rendu réactif

Ce référentiel contient une bibliothèque de signaux réactifs inspirée de SolidJS, Preact Signals et Reactively.

Uniquement en streaming

Les applications créées avec cela ne peuvent être diffusées que en streaming, le serveur ne tentera jamais de construire le code HTML pour la requête initiale. Si vous devez diffuser du HTML dans la requête initiale, jetez un œil à Mayu Live.

Pas de reprise

Si la connexion est interrompue, tout l'état est perdu. Pour tenter quelque chose de plus fiable, consultez Mayu Live.

Éléments personnalisés

Toutes les arborescences DOM statiques sont extraites dans des éléments personnalisés, donc si vous écrivez :

- items = %w[foo bar baz]
% ul
  = items.map do |item |
    % li = item

Ensuite ce code sera généré :

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

Le navigateur vous donnera :

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 >

Chaque emplacement à l'intérieur du Shadow DOM aura ses nœuds attribués chaque fois que les enfants seront mis à jour.

C'est une bonne chose pour plusieurs raisons :

• Le balisage n’est transféré au navigateur qu’une seule fois et peut être réutilisé.
• La différence devient plus facile parce que nous ne nous soucions pas de l'ordre. HTMLSlotElement.assign() met à jour l'ordre des enfants en 1 appel. La plupart des bibliothèques VDOM utilisent le célèbre algorithme de comparaison bidirectionnelle, difficile à maîtriser.

Chaque élément personnalisé a :host { display: contents; } pour éviter les interférences avec la flexion et la grille.