snabberb

Grogner

Snabberb est un simple framework Ruby View construit sur Opal et Snabbdom.

Vous pouvez écrire des vues réactives dans Ruby ordinaire qui compile avec un JavaScript efficace.

Exemple en ligne

 require 'opal'
require 'snabberb'

class TextBox < Snabberb :: Component
  needs :text
  needs :selected , default : false , store : true

  def render
    onclick = lambda do
      store ( :selected , ! @selected )
    end

    style = {
      cursor : 'pointer' ,
      border : 'solid 1px rgba(0,0,0,0.2)' ,
    }

    style [ 'background-color' ] = 'lightblue' if @selected

    h ( :div , { style : style , on : { click : onclick } } , [
      h ( :div , @text )
    ] )
  end
end


# Assuming you have a DOM element with ID=app
TextBox . attach ( 'app' , text : 'hello world' )

# Or you can get the HTML string for isomorphic applications
TextBox . html ( text : 'hello world' ) 

Exemples

Application de rack

Application Roda avec prétention HTML

Moteur de jeu de société 18xx

Usage

Création d'éléments DOM avec H

Sous-classe SnabberB :: Composant et remplacer #Render pour construire des divs à l'aide de #h.

Le rendu ne doit renvoyer qu'un seul élément racine.

#h prend un symbole Dom (: div ,: span ,: a, ...) ou un autre snabberb :: Classe de composants.

...
class DomExample < Snabberb :: Component
  def render
    h ( :div )
  end
end

class ComponentExample < Snabberb :: Component
  def render
    h ( OtherComponent )
  end
end

Comme Snabbdom, #H avec DOM Les éléments peuvent prendre des accessoires qui prennent la forme d'un dict.

...
class PropsExample < Snabberb :: Component
  def render
    h ( :div , { style : { display : 'inline-block' } , class : { selected : true } } )
  end
end

Les composants ne prennent pas d'accessoires, ils répondent plutôt aux besoins qui sont des arguments dépendants.

...
class PassingNeedsExample < Snabberb :: Component
  def render
    h ( ChildComponent , need1 : 1 , need2 : 2 )
  end
end

#H peut également être imbriqué avec un enfant ou plusieurs enfants.

...
class NestedExample < Snabberb :: Component
  def render
    h ( :div , [
      h ( ChildComponent , need1 : 1 , need2 : 2 ) ,
      h ( :div , { style : { width : '100px' } } , [
        h ( :div , 'hello' ) ,
      ] )
    ] )
  end
end

Besoins

Les composants peuvent définir les besoins qui permettent aux composants parents de transmettre des arguments. Ils peuvent également être avec état, ce qui permet aux modifications de propager facilement tout au long de l'application.

Les besoins sont par défaut requis. Ils peuvent être définis avec des valeurs par défaut. Les besoins sont accessibles avec des variables d'instance qui sont automatiquement définies.

...
class NeedsExample < Snabberb :: Component
  needs :name
  needs :value , default : 0 , store : true

  def render
    onclick = lambda do
      store ( :value , @value + 1 )
    end

    h ( :div , [
      h ( :div , @name ) ,
      h ( :div , { on : { click : onclick } } , @value ) ,
    ] )
  end
end

Lorsque des changements d'état simples doivent être suivis, un besoin peut définir le magasin: vrai. Cela utilisera la valeur stockée de cette clé qui est définie sur le nœud racine. La priorité des valeurs de besoin est stockée> Besoins passé> valeur par défaut.

Les besoins peuvent être définis avec #Store qui déclenchera une mise à jour de la vue. SnabberB utilise Snabbbdom pour mettre à jour le DOM, donc seules les différences dans le DOM sont modifiées.

Préoccupation

Vous pouvez prétendre votre HTML en appelant

 Snabberb . prerender_script ( 'LayoutClass' , 'ApplicationClass' , 'application_id' , javascript_include_tags : '' , ** needs )

Un exemple détaillé peut être trouvé dans l'exemple Roda.

Générer du HTML à partir d'un fichier

Vous pouvez générer du HTML à partir d'un composant avec un fichier.

Snabberb.html_script ('path / to / my_component.rb', ** besoins)

Cela se lit dans le fichier Ruby sur le chemin d'accès et génère JavaScript qui appelle HTML sur la version camel du nom du fichier.

Installation

Ajoutez cette ligne à Gemfile de votre application:

 gem 'snabberb'

Puis exécuter:

 $ bundle

Ou installez-le vous-même comme:

 $ gem install snabberb

Développement

 bundle install
bundle exec rake

Contributif

Les rapports de bogues et les demandes de traction sont les bienvenus sur GitHub sur https://github.com/tobymao/snabberb.

Licence

Le GEM est disponible en open source en vertu des termes de la licence du MIT.