snabberb

Snabber

Snabberb es un marco simple de Ruby View basado en Opal y Snabbdom.

Puede escribir vistas reactivas en Ruby Plain que se compilan a JavaScript eficiente.

Ejemplo en línea

 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' ) 

Ejemplos

Aplicación

Aplicación Roda con preventaje de HTML

Motor de juego de mesa de 18xx

Uso

Creando elementos dom con h

Subclase SnabBberb :: Componente y anulación #render para construir divs usando #H.

Renderizar solo debe devolver un elemento raíz.

#h toma un símbolo DOM (: div ,: span ,: a, ...) u otra clase de componente SnabBberb ::.

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

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

Al igual que Snabbdom, #H con elementos DOM puede tomar accesorios que toman la forma de un dict.

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

Los componentes no toman accesorios, sino que toman necesidades que son argumentos dependientes.

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

#H también se puede anidar con un niño o varios hijos.

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

Necesidades

Los componentes pueden definir las necesidades que permiten que los componentes principales transmitan argumentos. También pueden ser con estado, lo que permite que los cambios se propoguen fácilmente a lo largo de la aplicación.

Las necesidades son por defecto requeridas. Se pueden configurar con valores predeterminados. Las necesidades son accesibles con variables de instancia que se establecen automáticamente.

...
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

Cuando se deben rastrear los simples cambios en el estado, una necesidad puede definir la tienda: Verdadero. Esto utilizará el valor almacenado de esta clave que se establece en el nodo raíz. La precedencia de los valores de necesidad se almacena> NECESIDAD PASADO> Valor predeterminado.

Las necesidades se pueden configurar con #store que activará una actualización de vista. Snabberb usa Snabbdom para actualizar el DOM, por lo que solo se cambian las diferencias en el DOM.

Prevenimiento

Puedes prerender tu html llamando

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

Se puede encontrar un ejemplo detallado en el ejemplo de Roda.

Generar html a partir de un archivo

Puede generar HTML a partir de un componente con un archivo.

Snabberb.html_script ('ruta/a/my_component.rb', ** Necesidades)

Esto se lee en el archivo Ruby en la ruta y genera JavaScript que llama a HTML en la versión CamelCased del nombre del archivo.

Instalación

Agregue esta línea al archivo gem de su aplicación:

 gem 'snabberb'

Y luego ejecutar:

 $ bundle

O instálelo usted mismo como:

 $ gem install snabberb

Desarrollo

 bundle install
bundle exec rake

Que contribuye

Los informes de errores y las solicitudes de extracción son bienvenidas en GitHub en https://github.com/tobymao/snabberb.

Licencia

La gema está disponible como código abierto bajo los términos de la licencia MIT.