snabberb 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: adebae58664968503236700933371f7d76003468056be676156f39c268edb88c
+  data.tar.gz: 41124f485907d7a84e537191ac8fad844f21beb009ddf7a1979a3d44e1b33522
+SHA512:
+  metadata.gz: 5038c8f60b03ea4bf7e2d3f636007ae4f393ced975fef43aa75bcc0abd6e97e530320dea6787e952a97d7bea238057b55927fd191044461f20533b23c06a93cc
+  data.tar.gz: 0c4f20f341244f14e64c88828d194f4ae582394910e65a10f63da781d229e721f7fbbf49e8d3f23d0d5ec4df52fae474c27f35d1d9f994b2cb874007afff700f

data/.gitignore

@@ -0,0 +1,15 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+.DS_STORE
+*.swp
+/Gemfile.lock
+
+# rspec failure tracking
+.rspec_status

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.rubocop.yml

@@ -0,0 +1,37 @@
+Layout/IndentFirstArrayElement:
+  Enabled: false
+
+Metrics/AbcSize:
+  Enabled: false
+
+Metrics/BlockLength:
+  Enabled: False
+Metrics/LineLength:
+  Max: 120
+
+Metrics/MethodLength:
+  Enabled: false
+
+Style/ClassVars:
+  Enabled: false
+
+Style/CommandLiteral:
+  Enabled: false
+
+Style/Documentation:
+  Enabled: false
+
+Style/EmptyCaseCondition:
+  Enabled: false
+
+Style/TrailingCommaInArguments:
+  Enabled: false
+
+Style/TrailingCommaInArrayLiteral:
+  Enabled: false
+
+Style/TrailingCommaInHashLiteral:
+  Enabled: false
+
+AllCops:
+  TargetRubyVersion: 2.6

data/.travis.yml

@@ -0,0 +1,7 @@
+---
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.6.3
+before_install: gem install bundler -v 2.0.1

data/Gemfile

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Tobias Mao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,167 @@
+# Snabberb
+
+Snabberb is a simple Ruby view framework built on [Opal](https://github.com/opal/opal) and [Snabbdom](https://github.com/snabbdom/snabbdom).
+
+You can write reactive views in plain Ruby that compile to efficient Javascript.
+
+## Inline Example
+
+```ruby
+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')
+```
+
+## Examples
+[Rack App](examples/rack)
+
+## Usage
+
+### Creating DOM Elements With h
+
+Subclass Snabberb::Component and override #render to build divs using \#h.
+
+Render should only return one root element.
+
+\#h takes either a DOM symbol (:div, :span, :a, ...) or another Snabberb::Component class.
+
+```ruby
+...
+class DomExample < Snabberb::Component
+  def render
+    h(:div)
+  end
+end
+
+class ComponentExample < Snabberb::Component
+  def render
+    h(OtherComponent)
+  end
+end
+```
+
+Like Snabbdom, \#h with DOM elements can take props which take the form of a dict.
+
+```ruby
+...
+class PropsExample < Snabberb::Component
+  def render
+    h(:div, { style: { display: 'inline-block' }, class: { selected: true } })
+  end
+end
+```
+
+Components do not take props, instead they take [needs](#Needs) which are dependent arguments.
+
+```ruby
+...
+class PassingNeedsExample < Snabberb::Component
+  def render
+    h(ChildComponent, need1: 1, need2: 2)
+  end
+end
+```
+
+\#h can also be nested with a child or multiple children.
+
+```ruby
+...
+class NestedExample < Snabberb::Component
+  def render
+    h(:div, [
+      h(ChildComponent, need1: 1, need2: 2),
+      h(:div, { style: { width: '100px' } }, [
+        h(:div, 'hello'),
+      ])
+    ](
+  end
+end
+```
+
+### Needs
+
+Components can define needs which allow parent components to pass down arguments. They can also be stateful which allows changes to propogate easily throughout the application.
+
+Needs are by default required. They can be set with default values. Needs are accesible with instance variables that are automatically set.
+
+```ruby
+...
+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
+```
+
+When simple state changes must be tracked, a need can define store: true. This will use the stored value of this key which is set on the root node.
+The precedence of need values is stored > passed needs > default value.
+
+Needs can be set with #store which will trigger a view update. Snabberb uses Snabbdom to update the DOM, so only the differences in the DOM are changed.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'snabberb'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install snabberb
+
+## Development
+
+```
+bundle install
+bundle exec rake
+```
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/tobymao/snabberb.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+require 'rubocop/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/examples/rack/Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'c_lexer'
+gem 'opal'
+gem 'rack'
+gem 'snabberb', path: '../..'

data/examples/rack/Gemfile.lock

@@ -0,0 +1,31 @@
+PATH
+  remote: ../..
+  specs:
+    snabberb (0.1.0)
+      opal (~> 1.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    ast (2.4.0)
+    c_lexer (2.5.3.0.0)
+      ast (~> 2.4.0)
+      parser (= 2.5.3.0)
+    opal (1.0.0)
+      ast (>= 2.3.0)
+      parser (= 2.5.3.0)
+    parser (2.5.3.0)
+      ast (~> 2.4.0)
+    rack (2.0.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  c_lexer
+  opal
+  rack
+  snabberb!
+
+BUNDLED WITH
+   2.0.2

data/examples/rack/README.md

@@ -0,0 +1,13 @@
+# Rack Example
+
+This is a simple example featuring a selectable and addable list.
+
+
+## Install and Run
+
+```
+bundle install
+bundle exec rackup
+```
+
+Navigate to http://localhost:9292.

data/examples/rack/app/application.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require 'opal'
+require 'snabberb'
+
+class Row < Snabberb::Component
+  needs :index
+  needs :value
+  needs :selected_id, default: nil, store: true
+
+  def selected?
+    @index == @selected_id
+  end
+
+  def render
+    onclick = lambda do
+      store(:selected_id, selected? ? nil : @index)
+    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, @value)
+    ])
+  end
+end
+
+class Form < Snabberb::Component
+  needs :values, store: true
+
+  def render
+    input = h(:input, props: { type: 'text', value: @values.last })
+
+    onclick = lambda do |event|
+      value = input.JS['elm'].JS['value']
+      event.JS.preventDefault
+      store(:values, @values + [value])
+    end
+
+    h(:form, { style: { width: '300px' } }, [
+      input,
+      h(:button, { on: { click: onclick } }, 'Add row'),
+    ])
+  end
+end
+
+class Application < Snabberb::Component
+  needs :values, store: true
+
+  def render
+    rows = @values.map.with_index do |value, index|
+      h(Row, index: index, value: value)
+    end
+
+    h(:div, { style: { width: '100px' } }, [
+      h(:div, 'List of Fruits'),
+      *rows,
+      h(Form),
+    ])
+  end
+end
+
+Application.attach('app', values: %w[apple banana cantaloupe])

data/examples/rack/config.ru

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require 'bundler'
+Bundler.require
+
+# Instructions: bundle in this directory
+# then run `bundle exec rackup` to start the server
+# and browse to http://localhost:9292
+
+# the directory where the code is (add to opal load path )
+Opal.append_path('app')
+
+run(Opal::SimpleServer.new do |s|
+  # the name of the ruby file to load. To use more files they must be required from here (see app)
+  s.main = 'application'
+  # need to set the index explicitly for opal server to pick it up
+  s.index_path = 'index.html.erb'
+end)

data/examples/rack/index.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Snabberb Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <%= javascript_include_tag 'application' %>
+  </body>
+</html>