snabberb 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d6d783a17ba02a615ad7a82b4f6f120b2fe805b4c3f19d0364aae38fc98a24a
-  data.tar.gz: 528c609d9ca398ae2288e951d98673f3d69cd3d866000fc24d665024948cd458
+  metadata.gz: 9905574c98d778f67508b52d3195f97d3d95b00b6d8a729a086f74c48e03b532
+  data.tar.gz: 770cb2d53f5aa816c0e156ba231ad5bacc26b77fc118ce8c2963930b56faaf25
 SHA512:
-  metadata.gz: 52793e19ab8991b24aea629724cb60e6f56dfdaae33318ce1098e12f44be4ca23c6acb0caec5f82e0ac0a2be4f0047f3507e67a7793fe4887d271a24638a128d
-  data.tar.gz: 4e8e093484a519198de36a86d22885076263a3de437c2b253c8e8f203edd5ae63d2186e57bf9b0b22e856bc9acc290ae3e16a82c018d368448013a13b61a4608
+  metadata.gz: 1590dacc07bd3dab3da4c7cc5b799744242f29d08e2bd87bff32f56aedfdb50c70225910f4dd8d0ed95372c5f6a45f7fe359db42c7221e78133273b35c8c4cb2
+  data.tar.gz: 3d13da1d38258a606df13c4bdccb8afc2a38d15860f42a900718b903492cfdbe7a84d0342187cdde9bb3239075463cd5651785122bf7f00bcf008c745e1fccd6

data/.gitignore

@@ -6,6 +6,7 @@
 /pkg/
 /spec/reports/
 /tmp/
+/examples/roda/public
 
 .DS_STORE
 *.swp

data/.rubocop.yml

@@ -1,4 +1,4 @@
-Layout/IndentFirstArrayElement:
+Layout/FirstArrayElementIndentation:
   Enabled: false
 
 Metrics/AbcSize:
@@ -34,4 +34,4 @@ Style/TrailingCommaInHashLiteral:
   Enabled: false
 
 AllCops:
-  TargetRubyVersion: 2.6
+  TargetRubyVersion: 2.3

data/README.md

@@ -43,6 +43,8 @@ TextBox.html(text: 'hello world')
 ## Examples
 [Rack App](examples/rack)
 
+[Roda App with HTML Prerendering](examples/roda)
+
 ## Usage
 
 ### Creating DOM Elements With h
@@ -136,6 +138,16 @@ 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.
 
+### Prerendering
+
+You can prerender your HTML by calling
+
+```ruby
+Snabberb.prerender_script('LayoutClass', 'ApplicationClass', 'application_id', javascript_include_tags: '', **needs)
+```
+
+A detailed example can be found [in the Roda example](examples/roda).
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/examples/rack/Gemfile.lock

@@ -1,20 +1,20 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.1.0)
+    snabberb (0.2.0)
       opal (~> 1.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
     ast (2.4.0)
-    c_lexer (2.5.3.0.0)
+    c_lexer (2.6.4.1.1)
       ast (~> 2.4.0)
-      parser (= 2.5.3.0)
-    opal (1.0.0)
+      parser (= 2.6.4.1)
+    opal (1.0.1)
       ast (>= 2.3.0)
-      parser (= 2.5.3.0)
-    parser (2.5.3.0)
+      parser (~> 2.6)
+    parser (2.6.4.1)
       ast (~> 2.4.0)
     rack (2.0.7)
 

data/examples/roda/Gemfile

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'c_lexer'
+gem 'execjs'
+gem 'mini_racer'
+gem 'opal'
+gem 'opal-sprockets'
+gem 'roda'
+gem 'snabberb', path: '../..'

data/examples/roda/Gemfile.lock

@@ -0,0 +1,49 @@
+PATH
+  remote: ../..
+  specs:
+    snabberb (0.2.0)
+      opal (~> 1.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    ast (2.4.0)
+    c_lexer (2.6.4.1.1)
+      ast (~> 2.4.0)
+      parser (= 2.6.4.1)
+    concurrent-ruby (1.1.5)
+    execjs (2.7.0)
+    libv8 (7.3.492.27.1)
+    mini_racer (0.2.8)
+      libv8 (>= 6.9.411)
+    opal (1.0.1)
+      ast (>= 2.3.0)
+      parser (~> 2.6)
+    opal-sprockets (0.4.8.1.0.3.7)
+      opal (~> 1.0.0)
+      sprockets (~> 3.7)
+      tilt (>= 1.4)
+    parser (2.6.4.1)
+      ast (~> 2.4.0)
+    rack (2.0.7)
+    roda (3.26.0)
+      rack
+    sprockets (3.7.2)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    tilt (2.0.10)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  c_lexer
+  execjs
+  mini_racer
+  opal
+  opal-sprockets
+  roda
+  snabberb!
+
+BUNDLED WITH
+   2.0.2

data/examples/roda/README.md

@@ -0,0 +1,14 @@
+# Roda Example
+
+This is an example using Roda. It features prerendering HTML and SVG rendering.
+
+![SVG Hexes](roda_example.png)
+
+## Install and Run
+
+```
+bundle install
+bundle exec rackup
+```
+
+Navigate to http://localhost:9292.

data/examples/roda/app/application.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+require 'set'
+
+class Tile < Snabberb::Component
+  def render
+    h(:g, { attrs: { transform: 'rotate(60)' } }, [
+      h(:path, attrs: { d: 'm 0 87 L 0 -87', stroke: 'black', 'stroke-width' => 8 }),
+      h(:path, attrs: { d: 'm -4 86 L -4 -86', stroke: 'white', 'stroke-width' => 2 }),
+      h(:path, attrs: { d: 'm 4 86 L 4 -86', stroke: 'white', 'stroke-width' => 2 }),
+    ])
+  end
+end
+
+class Hex < Snabberb::Component
+  SIZE = 100
+  POINTS = '100,0 50,-87 -50,-87 -100,-0 -50,87 50,87'
+
+  needs :x
+  needs :y
+  needs :selected, default: Set.new, store: true
+
+  def translation
+    offset = self.class::SIZE
+    x = self.class::SIZE * Math.sqrt(3) / 2 * @x + offset
+    y = self.class::SIZE * 3 / 2 * @y + offset
+    "translate(#{x}, #{y})"
+  end
+
+  def transform
+    "#{translation} rotate(30)"
+  end
+
+  def render
+    coordinates = [@x, @y]
+    selected = @selected.include?(coordinates)
+    children = [h(:polygon, attrs: { points: self.class::POINTS })]
+    children << h(Tile) if selected
+
+    onclick = lambda do
+      if selected
+        store(:selected, @selected - [coordinates])
+      else
+        store(:selected, @selected | [coordinates])
+      end
+    end
+
+    props = {
+      attrs: {
+        transform: transform,
+        fill: selected ? 'yellow' : 'white',
+        stroke: 'black',
+      },
+      style: { cursor: 'pointer' },
+      on: { click: onclick }
+    }
+
+    h(:g, props, children)
+  end
+end
+
+class Map < Snabberb::Component
+  needs :size_x
+  needs :size_y
+
+  def render
+    hexes = @size_x.times.flat_map do |x|
+      @size_y.times.map do |y|
+        h(Hex, x: y.even? ? x + 1 : x, y: x.even? ? y + 1 : y)
+      end
+    end
+
+    container_style = {
+      width: '100%',
+      height: '100%',
+      overflow: 'auto',
+    }
+
+    svg_style = {
+      width: "#{@size_x * 50}px",
+      height: "#{@size_y * 80}px",
+    }
+
+    h(:div, { props: { id: 'map_id' }, style: container_style }, [
+      h(:svg, { style: svg_style }, [
+        h(:g, { attrs: { transform: 'scale(0.5)' } }, hexes)
+      ])
+    ])
+  end
+end
+
+class Index < Snabberb::Layout
+  def render
+    h(:html, [
+      h(:head, [
+        h(:meta, props: { charset: 'utf-8' }),
+        h(:title, 'Roda Demo'),
+      ]),
+      h(:body, [
+        @application,
+        h(:div, props: { innerHTML: @javascript_include_tags }),
+        h(:script, props: { innerHTML: @attach_func }),
+      ]),
+    ])
+  end
+end

data/examples/roda/app/polyfill.js

@@ -0,0 +1,2 @@
+if (typeof setTimeout === 'undefined') { function setTimeout(func) { func() } }
+if (typeof OpalLoaded === 'undefined') { OpalLoaded = [] }

data/examples/roda/app/requires.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+require 'opal'
+require 'polyfill'
+require 'snabberb'

data/examples/roda/config.ru

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require 'execjs'
+require 'json'
+require 'opal'
+require 'opal/sprockets'
+require 'roda'
+require 'sprockets'
+require 'snabberb'
+
+LIB_NAME = 'lib.js'
+LIB_PATH = "./public/#{LIB_NAME}"
+Opal.append_path('app')
+File.write(LIB_PATH, Opal::Builder.build('requires')) unless File.file?(LIB_PATH)
+
+class App < Roda
+  plugin :public
+
+  context = ExecJS.compile(File.read(LIB_PATH) + Opal::Builder.build('application').to_s)
+
+  environment = Sprockets::Environment.new
+  Opal.paths.each { |p| environment.append_path(p) }
+
+  javascript_include_tags = "<script src=#{LIB_NAME}></script>" + Opal::Sprockets.javascript_include_tag(
+    'application',
+    sprockets: environment,
+    prefix: '/assets',
+    debug: true,
+  )
+
+  route do |r|
+    r.public
+
+    r.on 'assets' do
+      r.run environment
+    end
+
+    r.root do
+      context.eval(
+        Snabberb.prerender_script(
+          'Index',
+          'Map',
+          'map_id',
+          javascript_include_tags: javascript_include_tags,
+          size_x: 30,
+          size_y: 30,
+        )
+      )
+    end
+  end
+end
+
+run App.freeze.app

data/lib/snabberb/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Snabberb
-  VERSION = '0.1.1'
+  VERSION = '0.2.0'
 end

data/lib/snabberb.rb

@@ -1,6 +1,21 @@
 # frozen_string_literal: true
 
+require 'json'
 require 'opal'
 require 'snabberb/version'
 
-Opal.append_path File.expand_path('../opal', __dir__)
+Opal.append_path(File.expand_path('../opal', __dir__))
+
+module Snabberb
+  def self.prerender_script(layout, application, application_id, javascript_include_tags: '', **needs)
+    needs = JSON.generate(needs)
+
+    <<~JS
+      Opal.$$.#{layout}.$html(Opal.hash({
+        application: Opal.$$.#{application}.$new(null, Opal.hash(#{needs})).$render(),
+        javascript_include_tags: '#{javascript_include_tags.gsub("\n", '')}',
+        attach_func: 'Opal.$$.#{application}.$attach("#{application_id}", Opal.hash(#{needs}))'
+      }))
+    JS
+  end
+end

data/opal/snabberb/component.rb

@@ -16,12 +16,11 @@ module Snabberb
     #   :default - Sets the default value, if not passed the need is considered required.
     #   :store - Whether or not to store the need as state. The default is false.
     def self.needs(key, **opts)
-      @class_needs ||= {}
-      @class_needs[key] = opts
+      class_needs[key] = opts
     end
 
     def self.class_needs
-      @class_needs || {}
+      @class_needs ||= superclass.respond_to?(:class_needs) ? superclass.class_needs.clone : {}
     end
 
     # Attach the root component to a dom element by container id.
@@ -145,4 +144,25 @@ module Snabberb
       end
     end
   end
+
+  # Sublcass this to prerender applications.
+  class Layout < Snabberb::Component
+    needs :application # the rendered application
+    needs :attach_func # function to reattach the application after dom load
+    needs :javascript_include_tags # all necessary javascript tags
+
+    # Example render function.
+    # def render
+    #   h(:html, [
+    #     h(:head, [
+    #       h(:meta, { props: { charset: 'utf-8'} }),
+    #     ]),
+    #     h(:body, [
+    #       @application,
+    #       h(:div, { props:  { innerHTML: @javascript_include_tags } }),
+    #       h(:script, { props:  { innerHTML: @attach_func} }),
+    #     ]),
+    #   ])
+    # end
+  end
 end

data/snabberb.gemspec

@@ -25,13 +25,14 @@ Gem::Specification.new do |spec|
   spec.bindir        = 'exe'
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = %w[lib opal]
+  spec.required_ruby_version = '>= 2.3'
 
   spec.add_dependency 'opal', '~> 1.0'
 
-  spec.add_development_dependency 'bundler', '~> 2.0'
+  spec.add_development_dependency 'bundler'
   spec.add_development_dependency 'c_lexer'
   spec.add_development_dependency 'execjs'
-  spec.add_development_dependency 'rake', '~> 12.0'
-  spec.add_development_dependency 'rspec', '~> 3.0'
-  spec.add_development_dependency 'rubocop', '~> 0.7'
+  spec.add_development_dependency 'rake'
+  spec.add_development_dependency 'rspec'
+  spec.add_development_dependency 'rubocop'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: snabberb
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Toby Mao
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-12-08 00:00:00.000000000 Z
+date: 2019-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -28,16 +28,16 @@ dependencies:
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: c_lexer
   requirement: !ruby/object:Gem::Requirement
@@ -70,44 +70,44 @@ dependencies:
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '12.0'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '12.0'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0'
 description: 'Snabberb is a minimalistic Opal view framework based on Snabbdom. You
   can write efficient reactive Javascript in pure Ruby. Snabberb also provides a simple
   way to track state.
@@ -133,6 +133,14 @@ files:
 - examples/rack/app/application.rb
 - examples/rack/config.ru
 - examples/rack/index.html.erb
+- examples/roda/Gemfile
+- examples/roda/Gemfile.lock
+- examples/roda/README.md
+- examples/roda/app/application.rb
+- examples/roda/app/polyfill.js
+- examples/roda/app/requires.rb
+- examples/roda/config.ru
+- examples/roda/roda_example.png
 - lib/snabberb.rb
 - lib/snabberb/version.rb
 - opal/snabberb.rb
@@ -159,7 +167,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '2.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="