snabberb

Snabberb

Snabberb é uma estrutura simples de exibição de rubi construída sobre Opal e Snabbdom.

Você pode escrever visualizações reativas em rubi simples que compilam com JavaScript eficiente.

Exemplo inline

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

Exemplos

App de rack

App Roda com preenderamento HTML

Motor de jogo de tabuleiro 18xx

Uso

Criando elementos DOM com H

Subclass Snabberb :: Componente e substitua #Render para criar divs usando #H.

Renderizar deve retornar apenas um elemento raiz.

#h pega um símbolo DOM (: div ,: span ,: a, ...) ou outra classe Snabberb :: Component.

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

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

Como o Snabbdom, #H com elementos DOM pode assumir adereços que assumem a forma de um ditado.

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

Os componentes não tomam adereços, em vez disso, tomam necessidades que são argumentos dependentes.

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

#H também pode ser aninhado com uma criança ou vários filhos.

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

Precisa

Os componentes podem definir necessidades que permitem que os componentes pais transmitam argumentos. Eles também podem ter estado, o que permite que as alterações se propagem facilmente ao longo do aplicativo.

As necessidades são necessárias por padrão. Eles podem ser definidos com valores padrão. As necessidades são acessíveis com variáveis de instância que são definidas automaticamente.

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

Quando mudanças simples de estado devem ser rastreadas, uma necessidade pode definir o armazenamento: true. Isso usará o valor armazenado dessa chave que é definida no nó raiz. A precedência dos valores de necessidade é armazenada> Necessidades passadas> Valor padrão.

As necessidades podem ser definidas com o #Store, que acionará uma atualização de visualização. Snabberb usa o Snabbdom para atualizar o DOM; portanto, apenas as diferenças no DOM são alteradas.

Prendering

Você pode pré -render seu html ligando para ligar

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

Um exemplo detalhado pode ser encontrado no exemplo de Roda.

Gerando html de um arquivo

Você pode gerar HTML a partir de um componente com um arquivo.

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

Isso lê no arquivo ruby no caminho e gera JavaScript que chama HTML na versão baseada em camel do nome do arquivo.

Instalação

Adicione esta linha ao GemFile do seu aplicativo:

 gem 'snabberb'

E depois execute:

 $ bundle

Ou instale você mesmo como:

 $ gem install snabberb

Desenvolvimento

 bundle install
bundle exec rake

Contribuindo

Relatórios de bug e solicitações de tração são bem -vindos no github em https://github.com/tobymao/snabberb.

Licença

A GEM está disponível como código aberto nos termos da licença do MIT.