beryl 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b009e4e353f9efecf2cb768b1e71126f5367edaf534559c0c6ef1b9d02312d1
-  data.tar.gz: 4e0fa2a870b6bec3f12f5b5d5e6b840571fff39e3181e8965f0c48e6d7032f4d
+  metadata.gz: 5b6146cdf28fe2e973b3d151fe7536034e11a3e1dec1639b7e139509ecd4e298
+  data.tar.gz: 5d7c85d49307cb8c427bf8f2fc593615613d6abc648d6e1dae6a2d081f46abe8
 SHA512:
-  metadata.gz: a3834be4e596b8260b5a8d246b97e58ecfb771c74a8d0b5c6c49e8598a8cd9a5d483b7f1a5341e41a3238678c756f0ddbc23b1ae7cde8ea8af312102e214c60f
-  data.tar.gz: 3c0ca7a52f50ba852be97f031e89cd80df1ccd056ac8e4af4b9cbcff71c86efb32fe28a8d8c5980cf2f04514f4c1db343893e3ec9d15413eb2328a44ad21fd9b
+  metadata.gz: 87de7c9e079ca95edf709051289c8c34a6d3f3314c46f9b877fadd5fa4fc199e783f00fd964b6d3fe39db2d48269eec0d3b14708108998fad8eba77dfc431ae5
+  data.tar.gz: 6aa0b0572132a48a1d7f175e386b6bc6b404a0efbbd953ea43d9b861e867d176dfc5effa950cb87b91e757f6c0144e5b7a80551a93616cce585e31c7d9ebe352

data/Gemfile

@@ -3,4 +3,4 @@ source "https://rubygems.org"
 git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
 
 # Specify your gem's dependencies in beryl.gemspec
-gemspec
+gemspec

data/Gemfile.lock

@@ -1,3 +1,8 @@
+PATH
+  remote: .
+  specs:
+    beryl (0.2.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -5,6 +10,7 @@ GEM
     bowser (1.0.4)
       opal (>= 0.7.0, < 0.12.0)
     hike (1.2.3)
+    minitest (5.11.3)
     opal (0.11.3)
       ast (>= 2.3.0)
       hike (~> 1.2)
@@ -14,16 +20,21 @@ GEM
       ast (~> 2.2)
     puma (3.12.0)
     rack (2.0.5)
+    rake (10.5.0)
     sourcemap (0.1.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bowser!
-  opal!
-  puma!
-  rack!
+  beryl!
+  bowser
+  bundler (~> 1.16)
+  minitest (~> 5.0)
+  opal
+  puma
+  rack
+  rake (~> 10.0)
 
 BUNDLED WITH
-   1.16.4
+   1.16.5

data/Rakefile

@@ -1,27 +1 @@
-require 'opal'
-require 'rake/testtask'
-require 'bowser'
-require 'bundler/gem_tasks'
-
-desc 'Build the app to build/app.js'
-task :build do
-  Opal.append_path 'app'
-  Opal.append_path 'lib'
-  Dir.mkdir('build') unless File.exist?('build')
-  File.binwrite 'build/app.js', Opal::Builder.build('frontend_app').to_s
-end
-
-desc 'Build and run the app'
-task :run do
-  Rake::Task['build'].invoke
-  sh 'bundle exec rackup --port 3000 --host 0.0.0.0'
-end
-
-desc 'Test the app'
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'test'
-  t.libs << 'lib'
-  t.test_files = FileList['test/**/*_test.rb']
-end
-
-task :default => :test
+load './lib/beryl/Rakefile'

data/Rakefile-template

@@ -0,0 +1,5 @@
+require 'beryl'
+
+spec = Gem::Specification.find_by_name 'beryl'
+rakefile = "#{spec.gem_dir}/lib/beryl/Rakefile"
+load rakefile

data/app/frontend.rb

@@ -0,0 +1,4 @@
+require 'beryl/frontend'
+require 'view'
+
+Beryl::Frontend.new(View.new).run

data/app/initial_state.rb

@@ -0,0 +1,5 @@
+{
+  content: 'here we will load something',
+  counter: 0,
+  route: nil
+}

data/app/something.rb

@@ -0,0 +1,12 @@
+require 'beryl/widget'
+
+class Something < Beryl::Widget
+  def render(state)
+    column :fill_width, :fill_height do
+      text 'Bart', height: 100, width: 300
+      text 'Abc', proportional_height: 2
+      text 'Karol', :fill_height
+      text 'Xyz', proportional_height: 3
+    end
+  end
+end

data/app/view.rb

@@ -0,0 +1,8 @@
+require 'beryl/view'
+require 'something'
+
+class View < Beryl::View
+  def render
+    Something.new.render(state)
+  end
+end

data/beryl.gemspec

@@ -1,38 +1,33 @@
-
-lib = File.expand_path("../lib", __FILE__)
+lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require "beryl/version"
+require 'beryl/version'
 
 Gem::Specification.new do |spec|
-  spec.name          = "beryl"
+  spec.name          = 'beryl'
   spec.version       = Beryl::VERSION
-  spec.authors       = ["Bart Blast"]
-  spec.email         = ["bart@bartblast.com"]
+  spec.authors       = ['Bart Blast']
+  spec.email         = ['bart@bartblast.com']
 
   spec.summary       = %q{Web framework}
   spec.description   = %q{Web framework}
-  spec.homepage      = "https://github.com/bartblast/beryl"
-  spec.license       = "MIT"
-
-  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
-  # to allow pushing to a single host or delete this section to allow pushing to any host.
-  # if spec.respond_to?(:metadata)
-  #   spec.metadata["allowed_push_host"] = "TODO: Set to 'http://mygemserver.com'"
-  # else
-  #   raise "RubyGems 2.0 or newer is required to protect against " \
-  #     "public gem pushes."
-  # end
+  spec.homepage      = 'https://github.com/bartblast/beryl'
+  spec.license       = 'MIT'
 
   # Specify which files should be added to the gem when it is released.
   # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
   spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
     `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
   end
-  spec.bindir        = "exe"
+  spec.bindir        = 'exe'
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
-  spec.require_paths = ["lib"]
+  spec.require_paths = ['lib']
+
+  spec.add_development_dependency 'bundler', '~> 1.16'
+  spec.add_development_dependency 'rake', '~> 10.0'
+  spec.add_development_dependency 'minitest', '~> 5.0'
 
-  spec.add_development_dependency "bundler", "~> 1.16"
-  spec.add_development_dependency "rake", "~> 10.0"
-  spec.add_development_dependency "minitest", "~> 5.0"
-end
+  spec.add_development_dependency 'bowser'
+  spec.add_development_dependency 'opal'
+  spec.add_development_dependency 'puma'
+  spec.add_development_dependency 'rack'
+end

data/config.ru

@@ -1,5 +1,5 @@
+require 'beryl/backend'
 require 'rack'
-require_relative 'lib/app'
 
 use Rack::Static, :urls => ['/build']
-run App.new
+run Beryl::Backend.new

data/lib/beryl/Rakefile

@@ -0,0 +1,28 @@
+require 'bowser'
+require 'opal'
+require 'bundler/gem_tasks'
+require 'rake/testtask'
+
+desc 'Build the app to build/app.js'
+task :compile do
+  Opal.append_path 'app'
+  Opal.append_path 'lib'
+  Dir.mkdir('build') unless File.exist?('build')
+  File.binwrite 'build/app.js', Opal::Builder.build('frontend').to_s
+  File.binwrite 'build/style.css', File.read("#{File.dirname(__FILE__)}/style.css")
+end
+
+desc 'Build and run the app'
+task :run do
+  Rake::Task['compile'].invoke
+  sh 'bundle exec rackup --port 3000 --host 0.0.0.0'
+end
+
+desc 'Test the app'
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.libs << 'lib'
+  t.test_files = FileList['test/**/*_test.rb']
+end
+
+task :default => :test

data/lib/beryl/backend.rb

@@ -0,0 +1,44 @@
+require 'command_handler'
+require 'json'
+require 'serializer'
+
+module Beryl
+  class Backend
+    def call(env)
+      req = Rack::Request.new(env)
+      case req.path_info
+      when '/command'
+        [200, { 'Content-Type' => 'application/json; charset=utf-8' }, [handle_command(req)]]
+      else
+        [200, { 'Content-Type' => 'text/html; charset=utf-8' }, [response]]
+      end
+    end
+
+    private
+
+    def handle_command(req)
+      json = JSON.parse(req.body.read)
+      result = CommandHandler.new.handle(json['type'].to_sym, json['payload'])
+      Serializer.serialize(result)
+    end
+
+    def hydrate_state
+      Serializer.serialize(eval(File.read('app/initial_state.rb'))).gsub('"', '"')
+    end
+
+    def response
+      <<~HEREDOC
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <script src="build/app.js"></script>
+          <link rel="stylesheet" type="text/css" href="build/style.css">
+        </head>
+        <body>
+          <div id="beryl" data-beryl="#{hydrate_state}" class="bg-color-255-255-255-255 font-color-0-0-0-255 font-size-20 font-open-sanshelveticaverdanasans-serif s e ui s e"></div>
+        </body>
+      </html>
+      HEREDOC
+    end
+  end
+end

data/lib/beryl/deserializer.rb

@@ -0,0 +1,21 @@
+require 'json'
+
+module Beryl
+  module Deserializer
+    extend self
+
+    def deserialize(item, json = false)
+      item = JSON.parse(item) unless json
+      case item['class']
+      when 'Hash'
+        item['value'].each_with_object({}) do |(key, value), result|
+          result[key.to_sym] = deserialize(value, true)
+        end
+      when 'Integer'
+        item['value'].to_i
+      when 'String'
+        item['value']
+      end
+    end
+  end
+end

data/lib/beryl/frontend.rb

@@ -0,0 +1,26 @@
+require 'opal'
+require 'native'
+require 'beryl/deserializer'
+require 'beryl/runtime'
+
+module Beryl
+  class Frontend
+    def initialize(view)
+      @view = view
+    end
+
+    def onload(&block)
+      `window.onload = block;`
+    end
+
+    def run
+      onload do
+        document = Native(`window.document`)
+        root = document.getElementById('beryl')
+        serialized_state = root.getAttribute('data-beryl').gsub('"', '"')
+        state = Beryl::Deserializer.deserialize(serialized_state)
+        Beryl::Runtime.new(root, state, @view).run
+      end
+    end
+  end
+end

data/lib/beryl/runtime.rb

@@ -0,0 +1,65 @@
+require 'renderer'
+require 'task'
+require 'bowser/http'
+require 'serializer'
+
+module Beryl
+  class Runtime
+    def initialize(root, state, view)
+      @messages = []
+      @root = root
+      @state = state
+      @view = view
+    end
+
+    def push(message)
+      @messages << message
+    end
+
+    def render
+      @view.state = @state
+      virtual_dom = VirtualDOM.new(@view.render)
+      Renderer.new.render(self, virtual_dom.dom.first, @root)
+    end
+
+    def process
+      while @messages.any?
+        message = @messages.shift
+        result = transition(message.first, message.last)
+        @state = result.is_a?(Array) ? result.first : result
+        command = result.is_a?(Array) ? result[1] : nil
+        run_command(result[1], result[2]) if command
+        render
+      end
+    end
+
+    def run
+      process
+      render
+    end
+
+    def run_command(type, payload)
+      Task.new do
+        Bowser::HTTP.fetch('/command', method: :post, data: { type: type, payload: Serializer.serialize(payload) })
+          .then(&:json) # JSONify the response
+          .then { |response| puts response }
+          .catch { |exception| warn exception.message }
+      end
+    end
+
+    def transition(type, payload)
+      case type
+
+      when :IncrementClicked
+        @state.merge(counter: @state[:counter] + 1)
+
+      when :LoadClicked
+        [@state, :FetchData, key_1: 1, key_2: 2]
+
+      when :LoadSuccess
+        @state.merge(content: payload[:data])
+
+      end
+    end
+  end
+end

data/lib/beryl/style.css

@@ -0,0 +1,89 @@
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.s.r > .s { flex-basis: auto !important; } .s.r > .s.ctr { flex-basis: auto !important; }}
+
+/* General Input Reset */
+input[type=range] {
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    /* width: 100%;  Specific width is required for Firefox. */
+    background: transparent; /* Otherwise white in Chrome */
+    position:absolute;
+    left:0;
+    top:0;
+    z-index:10;
+    width: 100%;
+    outline: dashed 1px;
+    height: 100%;
+    opacity: 0;
+}
+
+/* Hide all syling for track */
+input[type=range]::-moz-range-track {
+    background: transparent;
+    cursor: pointer;
+}
+input[type=range]::-ms-track {
+    background: transparent;
+    cursor: pointer;
+}
+input[type=range]::-webkit-slider-runnable-track {
+    background: transparent;
+    cursor: pointer;
+}
+
+/* Thumbs */
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    opacity: 0.5;
+    width: 80px;
+    height: 80px;
+    background-color: black;
+    border:none;
+    border-radius: 5px;
+}
+input[type=range]::-moz-range-thumb {
+    opacity: 0.5;
+    width: 80px;
+    height: 80px;
+    background-color: black;
+    border:none;
+    border-radius: 5px;
+}
+input[type=range]::-ms-thumb {
+    opacity: 0.5;
+    width: 80px;
+    height: 80px;
+    background-color: black;
+    border:none;
+    border-radius: 5px;
+}
+input[type=range][orient=vertical]{
+    writing-mode: bt-lr; /* IE */
+    -webkit-appearance: slider-vertical;  /* WebKit */
+}
+
+.explain {
+    border: 6px solid rgb(174, 121, 15) !important;
+}
+.explain > .s {
+    border: 4px dashed rgb(0, 151, 167) !important;
+}
+
+.ctr {
+    border: none !important;
+}
+.explain > .ctr > .s {
+    border: 4px dashed rgb(0, 151, 167) !important;
+}
+
+html,body{height:100%;padding:0;margin:0;}.s.e.ic{display:block;}.s:focus{outline:none;}.ui{width:100%;height:auto;min-height:100%;z-index:0;}.ui.s.hf{height:100%;}.ui.s.hf > .hf{height:100%;}.ui > .fr.s{position:fixed;}.s{position:relative;border:none;flex-shrink:0;display:flex;flex-direction:row;flex-basis:auto;resize:none;box-sizing:border-box;margin:0;padding:0;border-width:0;border-style:solid;font-size:inherit;color:inherit;font-family:inherit;line-height:1;font-weight:inherit;text-decoration:none;font-style:inherit;}.s.wrp{flex-wrap:wrap;}.s.notxt{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.s.cptr{cursor:pointer;}.s.ctxt{cursor:text;}.s.ppe{pointer-events:none !important;}.s.cpe{pointer-events:auto !important;}.s.clr{opacity:0;}.s.oq{opacity:1;}.s.hvclr:hover{opacity:0;}.s.hvoq:hover{opacity:1;}.s.fcsclr:focus{opacity:0;}.s.fcsoq:focus{opacity:1;}.s.atvclr:active{opacity:0;}.s.atvoq:active{opacity:1;}.s.ts{transition:transform 160ms, opacity 160ms, filter 160ms, background-color 160ms, color 160ms, font-size 160ms;}.s.sb{overflow:auto;flex-shrink:1;}.s.sbx{overflow-x:auto;}.s.sbx.r{flex-shrink:1;}.s.sby{overflow-y:auto;}.s.sby.c{flex-shrink:1;}.s.sby.e{flex-shrink:1;}.s.cp{overflow:hidden;}.s.cpx{overflow-x:hidden;}.s.cpy{overflow-y:hidden;}.s.wc{width:auto;}.s.bn{border-width:0;}.s.bd{border-style:dashed;}.s.bdt{border-style:dotted;}.s.bs{border-style:solid;}.s.t{white-space:pre;display:inline-block;}.s.it{line-height:1.05;}.s.e{display:flex;flex-direction:column;white-space:pre;}.s.e.hbh{z-index:0;}.s.e.hbh > .bh{z-index:-1;}.s.e.sbt > .t.hf{flex-grow:0;}.s.e.sbt > .t.wf{align-self:auto !important;}.s.e > .hc{height:auto;}.s.e > .hf{flex-grow:100000;}.s.e > .wf{width:100%;}.s.e > .wc{align-self:flex-start;}.s.e.ct{justify-content:flex-start;}.s.e > .s.at{margin-bottom:auto !important;margin-top:0 !important;}.s.e.cb{justify-content:flex-end;}.s.e > .s.ab{margin-top:auto !important;margin-bottom:0 !important;}.s.e.cr{align-items:flex-end;}.s.e > .s.ar{align-self:flex-end;}.s.e.cl{align-items:flex-start;}.s.e > .s.al{align-self:flex-start;}.s.e.ccx{align-items:center;}.s.e > .s.cx{align-self:center;}.s.e.ccy > .s{margin-top:auto;margin-bottom:auto;}.s.e > .s.cy{margin-top:auto !important;margin-bottom:auto !important;}.s.r{display:flex;flex-direction:row;}.s.r > .s{flex-basis:0%;}.s.r > .s.we{flex-basis:auto;}.s.r > .hf{align-self:stretch !important;}.s.r > .hfp{align-self:stretch !important;}.s.r > .wf{flex-grow:100000;}.s.r > .ctr{flex-grow:0;flex-basis:auto;align-self:stretch;}.s.r > u:first-of-type.acr{flex-grow:1;}.s.r > s:first-of-type.accx{flex-grow:1;}.s.r > s:first-of-type.accx > .cx{margin-left:auto !important;}.s.r > s:last-of-type.accx{flex-grow:1;}.s.r > s:last-of-type.accx > .cx{margin-right:auto !important;}.s.r > s:only-of-type.accx{flex-grow:1;}.s.r > s:only-of-type.accx > .cy{margin-top:auto !important;margin-bottom:auto !important;}.s.r > s:last-of-type.accx ~ u{flex-grow:0;}.s.r > u:first-of-type.acr ~ s.accx{flex-grow:0;}.s.r.ct{align-items:flex-start;}.s.r > .s.at{align-self:flex-start;}.s.r.cb{align-items:flex-end;}.s.r > .s.ab{align-self:flex-end;}.s.r.cr{justify-content:flex-end;}.s.r.cl{justify-content:flex-start;}.s.r.ccx{justify-content:center;}.s.r.ccy{align-items:center;}.s.r > .s.cy{align-self:center;}.s.r.sev{justify-content:space-between;}.s.c{display:flex;flex-direction:column;}.s.c > .hf{flex-grow:100000;}.s.c > .wf{width:100%;}.s.c > .wfp{width:100%;}.s.c > .wc{align-self:flex-start;}.s.c > u:first-of-type.acb{flex-grow:1;}.s.c > s:first-of-type.accy{flex-grow:1;}.s.c > s:first-of-type.accy > .cy{margin-top:auto !important;margin-bottom:0 !important;}.s.c > s:last-of-type.accy{flex-grow:1;}.s.c > s:last-of-type.accy > .cy{margin-bottom:auto !important;margin-top:0 !important;}.s.c > s:only-of-type.accy{flex-grow:1;}.s.c > s:only-of-type.accy > .cy{margin-top:auto !important;margin-bottom:auto !important;}.s.c > s:last-of-type.accy ~ u{flex-grow:0;}.s.c > u:first-of-type.acb ~ s.accy{flex-grow:0;}.s.c.ct{justify-content:flex-start;}.s.c > .s.at{margin-bottom:auto;}.s.c.cb{justify-content:flex-end;}.s.c > .s.ab{margin-top:auto;}.s.c.cr{align-items:flex-end;}.s.c > .s.ar{align-self:flex-end;}.s.c.cl{align-items:flex-start;}.s.c > .s.al{align-self:flex-start;}.s.c.ccx{align-items:center;}.s.c > .s.cx{align-self:center;}.s.c.ccy{justify-content:center;}.s.c > .ctr{flex-grow:0;flex-basis:auto;width:100%;align-self:stretch !important;}.s.c.sev{justify-content:space-between;}.s.g{display:-ms-grid;}.s.g > .gp > .s{width:100%;}@supports (display:grid) {.s.g{display:grid;
+}}.s.g > .s.at{justify-content:flex-start;}.s.g > .s.ab{justify-content:flex-end;}.s.g > .s.ar{align-items:flex-end;}.s.g > .s.al{align-items:flex-start;}.s.g > .s.cx{align-items:center;}.s.g > .s.cy{justify-content:center;}.s.pg{display:block;}.s.pg > .s:first-child{margin:0 !important;}.s.pg > .s.al:first-child + .s{margin:0 !important;}.s.pg > .s.ar:first-child + .s{margin:0 !important;}.s.pg > .s.ar{float:right;}.s.pg > .s.ar::after{content:"";display:table;clear:both;}.s.pg > .s.al{float:left;}.s.pg > .s.al::after{content:"";display:table;clear:both;}.s.iml{white-space:pre-wrap;}.s.p{display:block;white-space:normal;}.s.p.hbh{z-index:0;}.s.p.hbh > .bh{z-index:-1;}.s.p > .t{display:inline;white-space:normal;}.s.p > .e{display:inline;white-space:normal;}.s.p > .e.fr{display:flex;}.s.p > .e.bh{display:flex;}.s.p > .e.a{display:flex;}.s.p > .e.b{display:flex;}.s.p > .e.or{display:flex;}.s.p > .e.ol{display:flex;}.s.p > .e > .t{display:inline;white-space:normal;}.s.p > .r{display:inline-flex;}.s.p > .c{display:inline-flex;}.s.p > .g{display:inline-grid;}.s.p > .s.ar{float:right;}.s.p > .s.al{float:left;}.s.hidden{display:none;}.s.a{position:absolute;bottom:100%;left:0;width:100%;z-index:10;margin:0 !important;pointer-events:none;}.s.a > .hf{height:auto;}.s.a > .wf{width:100%;}.s.a > .s{pointer-events:auto;}.s.b{position:absolute;bottom:0;left:0;height:0;width:100%;z-index:10;margin:0 !important;pointer-events:auto;}.s.b > .hf{height:auto;}.s.or{position:absolute;left:100%;top:0;height:100%;margin:0 !important;z-index:10;pointer-events:auto;}.s.ol{position:absolute;right:100%;top:0;height:100%;margin:0 !important;z-index:10;pointer-events:auto;}.s.fr{position:absolute;width:100%;height:100%;left:0;top:0;margin:0 !important;z-index:10;pointer-events:none;}.s.fr > .s{pointer-events:auto;}.s.bh{position:absolute;width:100%;height:100%;left:0;top:0;margin:0 !important;z-index:0;pointer-events:none;}.s.bh > .s{pointer-events:auto;}.s.w1{font-weight:100;}.s.w2{font-weight:200;}.s.w3{font-weight:300;}.s.w4{font-weight:400;}.s.w5{font-weight:500;}.s.w6{font-weight:600;}.s.w7{font-weight:700;}.s.w8{font-weight:800;}.s.w9{font-weight:900;}.s.i{font-style:italic;}.s.sk{text-decoration:line-through;}.s.u{text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-skip:ink;}.s.u.sk{text-decoration:line-through underline;text-decoration-skip-ink:auto;text-decoration-skip:ink;}.s.tun{font-style:normal;}.s.tj{text-align:justify;}.s.tja{text-align:justify-all;}.s.tc{text-align:center;}.s.tr{text-align:right;}.s.tl{text-align:left;}.s.modal{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;}.border-0{border-width:0px;}.border-1{border-width:1px;}.border-2{border-width:2px;}.border-3{border-width:3px;}.border-4{border-width:4px;}.border-5{border-width:5px;}.border-6{border-width:6px;}.font-size-8{font-size:8px;}.font-size-9{font-size:9px;}.font-size-10{font-size:10px;}.font-size-11{font-size:11px;}.font-size-12{font-size:12px;}.font-size-13{font-size:13px;}.font-size-14{font-size:14px;}.font-size-15{font-size:15px;}.font-size-16{font-size:16px;}.font-size-17{font-size:17px;}.font-size-18{font-size:18px;}.font-size-19{font-size:19px;}.font-size-20{font-size:20px;}.font-size-21{font-size:21px;}.font-size-22{font-size:22px;}.font-size-23{font-size:23px;}.font-size-24{font-size:24px;}.font-size-25{font-size:25px;}.font-size-26{font-size:26px;}.font-size-27{font-size:27px;}.font-size-28{font-size:28px;}.font-size-29{font-size:29px;}.font-size-30{font-size:30px;}.font-size-31{font-size:31px;}.font-size-32{font-size:32px;}.p-0{padding:0px;}.p-1{padding:1px;}.p-2{padding:2px;}.p-3{padding:3px;}.p-4{padding:4px;}.p-5{padding:5px;}.p-6{padding:6px;}.p-7{padding:7px;}.p-8{padding:8px;}.p-9{padding:9px;}.p-10{padding:10px;}.p-11{padding:11px;}.p-12{padding:12px;}.p-13{padding:13px;}.p-14{padding:14px;}.p-15{padding:15px;}.p-16{padding:16px;}.p-17{padding:17px;}.p-18{padding:18px;}.p-19{padding:19px;}.p-20{padding:20px;}.p-21{padding:21px;}.p-22{padding:22px;}.p-23{padding:23px;}.p-24{padding:24px;}
+
+.font-open-sanshelveticaverdanasans-serif{
+    font-family: "Open Sans", "Helvetica", "Verdana", sans-serif;
+}.font-color-0-0-0-255{
+     color: rgba(0,0,0,1);
+ }.bg-color-255-255-255-255{
+      background-color: rgba(255,255,255,1);
+  }.s:focus .focusable, .s.focusable:focus{
+       box-shadow: 0px 0px 3px 3px rgba(155,203,255,1);
+       outline: none;
+   }

data/lib/beryl/utils.rb

@@ -0,0 +1,55 @@
+module Beryl
+  module Utils
+    extend self
+
+    def constantize(camel_cased_word)
+      names = camel_cased_word.split('::'.freeze)
+
+      # Trigger a built-in NameError exception including the ill-formed constant in the message.
+      Object.const_get(camel_cased_word) if names.empty?
+
+      # Remove the first blank element in case of '::ClassName' notation.
+      names.shift if names.size > 1 && names.first.empty?
+
+      names.inject(Object) do |constant, name|
+        if constant == Object
+          constant.const_get(name)
+        else
+          candidate = constant.const_get(name)
+          next candidate if constant.const_defined?(name, false)
+          next candidate unless Object.const_defined?(name)
+
+          # Go down the ancestors to check if it is owned directly. The check
+          # stops when we reach Object or the end of ancestors tree.
+          constant = constant.ancestors.inject(constant) do |const, ancestor|
+            break const    if ancestor == Object
+            break ancestor if ancestor.const_defined?(name, false)
+            const
+          end
+
+          # owner is in Object, so raise
+          constant.const_get(name, false)
+        end
+      end
+    end
+
+    def deep_symbolize_keys(hash)
+      deep_transform_keys_in_object(hash) { |key| key.to_sym rescue key }
+    end
+
+    private
+
+    def deep_transform_keys_in_object(object, &block)
+      case object
+      when Hash
+        object.each_with_object({}) do |(key, value), result|
+          result[yield(key)] = deep_transform_keys_in_object(value, &block)
+        end
+      when Array
+        object.map {|e| deep_transform_keys_in_object(e, &block) }
+      else
+        object
+      end
+    end
+  end
+end

data/lib/beryl/version.rb

@@ -1,3 +1,3 @@
 module Beryl
-  VERSION = "0.1.0"
+  VERSION = '0.2.0'
 end

data/lib/beryl/view.rb

@@ -0,0 +1,35 @@
+require 'beryl/virtual_dom'
+
+module Beryl
+  class View
+    attr_accessor :state
+
+    def div(props = {}, &children)
+      node('div', props, children ? children.call : [])
+    end
+
+    def input(props = {}, &children)
+      node('input', props, children ? children.call : [])
+    end
+
+    def link(text, props = {}, &children)
+      node('a', props, [text(text)])
+    end
+
+    def node(type, props = {}, children)
+      {
+        type: type,
+        props: props,
+        children: children
+      }
+    end
+
+    def span(props = {}, &children)
+      node('span', props, children ? children.call : [])
+    end
+
+    def text(value, props = {}, &children)
+      node('text', props.merge(nodeValue: value), children ? children.call : [])
+    end
+  end
+end

data/lib/beryl/virtual_dom.rb

@@ -0,0 +1,144 @@
+module Beryl
+  class VirtualDOM
+    attr_reader :dom
+
+    def initialize(layout)
+      @layout = layout
+      @dom = convert(layout)
+    end
+
+    private
+
+    def convert(layout)
+      layout.each_with_object([]) do |element, dom|
+        case element[:type]
+        when :column
+          width = width(element[:props])
+          height = height(element[:props])
+          klass = "#{height[:class]} s c #{width[:class]} ct cl"
+          style = "#{width[:style]}#{height[:style]}"
+          props = { class: klass, style: style }
+          dom << node('div', props, element[:children] ? convert(element[:children]) : [])
+        when :row
+          width = width(element[:props])
+          height = height(element[:props])
+          klass = "#{height[:class]} s r #{width[:class]} cl ccy"
+          style = "#{width[:style]}#{height[:style]}"
+          props = { class: klass, style: style }
+          dom << node('div', props, element[:children] ? convert(element[:children]) : [])
+        when :text
+          width = width(element[:props])
+          height = height(element[:props])
+          klass = "#{height[:class]} s e #{width[:class]}"
+          style = "#{width[:style]}#{height[:style]}"
+          props = { class: klass, style: style }
+          dom << node('div', props, [node('text', { nodeValue: element[:value] })])
+        end
+      end
+    end
+
+    def height(props)
+      type = height_type(props)
+      {
+        type: type,
+        class: height_class(type),
+        style: height_style(props, type)
+      }
+    end
+
+    def width(props)
+      type = width_type(props)
+      {
+        type: type,
+        class: width_class(type),
+        style: width_style(props, type)
+      }
+    end
+
+    def width_type(props)
+      props = [props] unless props.is_a?(Array)
+      return :content unless props
+      return :fill if props.include?(:fill_width)
+      hash = props.select { |p| p.is_a?(Hash) }.first
+      return :content unless hash
+      return :fixed if hash[:width].is_a?(Integer)
+      return :proportional if hash[:proportional_width].is_a?(Integer)
+      :content
+    end
+
+    def height_type(props)
+      props = [props] unless props.is_a?(Array)
+      return :content unless props
+      return :fill if props.include?(:fill_height)
+      hash = props.select { |p| p.is_a?(Hash) }.first
+      return :content unless hash
+      return :fixed if hash[:height].is_a?(Integer)
+      return :proportional if hash[:proportional_height].is_a?(Integer)
+      :content
+    end
+
+    def width_class(type)
+      case type
+      when :content
+        'wc'
+      when :fill
+        'wf'
+      when :fixed
+        ''
+      when :proportional
+        'wfp'
+      end
+    end
+
+    def height_class(type)
+      case type
+      when :content
+        'hc'
+      when :fill
+        'hf'
+      when :fixed
+        ''
+      when :proportional
+        'hfp'
+      end
+    end
+
+    def width_style(props, type)
+      case type
+      when :content
+        ''
+      when :fill
+        ''
+      when :fixed
+        width = props.select { |p| p.is_a?(Hash) }.first[:width]
+        "width: #{width}px;"
+      when :proportional
+        portion = props.select { |p| p.is_a?(Hash) }.first[:proportional_width]
+        "flex-grow: #{100000 * portion};"
+      end
+    end
+
+    def height_style(props, type)
+      case type
+      when :content
+        ''
+      when :fill
+        ''
+      when :fixed
+        height = props.select { |p| p.is_a?(Hash) }.first[:height]
+        "height: #{height}px;"
+      when :proportional
+        portion = props.select { |p| p.is_a?(Hash) }.first[:proportional_height]
+        "flex-grow: #{100000 * portion};"
+      end
+    end
+
+    def node(type, props = {}, children = [])
+      {
+        type: type,
+        props: props,
+        children: children
+      }
+    end
+  end
+end

data/lib/beryl/widget.rb

@@ -0,0 +1,50 @@
+require 'beryl/utils'
+
+module Beryl
+  class Widget
+    attr_reader :children
+
+    def initialize
+      @children = []
+    end
+
+    def build(type, *args, &block)
+      element = Widget.new
+      element.instance_eval(&block)
+      {
+        type: type,
+        props: args,
+        children: element.children
+      }
+    end
+
+    def column(*args, &block)
+      @children << build(:column, *args, &block)
+      @children
+    end
+
+    def method_missing(name, *args, &block)
+      constantized = Beryl::Utils.constantize(name.to_s)
+      child = args.any? ? constantized.new.render(*args) : constantized.new.render
+      raise SyntaxError.new("Widget #{name} should return only one element (use row or column)") if child.is_a?(Array) && child.size > 1
+      @children += child
+      child
+    rescue NoMethodError
+      raise NameError.new("There is no such widget: #{name}")
+    end
+
+    def row(*args, &block)
+      @children << build(:row, *args, &block)
+      @children
+    end
+
+    def text(string, *props)
+      @children << {
+        type: :text,
+        value: string,
+        props: props
+      }
+      @children
+    end
+  end
+end

data/lib/{virtual_dom.rb → renderer.rb}

@@ -1,27 +1,27 @@
 require 'native'
-require 'event_loop'
+require 'beryl/runtime'
 
-class VirtualDOM
-  def render(event_loop, element, parentDom, replace = true)
+class Renderer
+  def render(runtime, element, parentDom, replace = true)
     document = Native(`window.document`)
     dom = element[:type] == 'text' ? document.createTextNode('') : document.createElement(element[:type])
 
-    add_event_listeners(element, dom, event_loop)
+    add_event_listeners(element, dom, runtime)
     set_attributes(element, dom)
 
     childElements = element[:children] || [];
-    childElements.each { |child| render(event_loop, child, dom, false) }
+    childElements.each { |child| render(runtime, child, dom, false) }
 
     update_dom(parentDom, dom, replace)
   end
 
   private
 
-  def add_event_listeners(element, dom, event_loop)
-    listener_props = element[:props].select { |key, _value| listener?(key) }
-    listener_props.each do |key, value|
+  def add_event_listeners(element, dom, runtime)
+    listeners = element[:props].select { |key, _value| listener?(key) }
+    listeners.each do |key, value|
       event_type = key.downcase[2..-1]
-      dom.addEventListener(event_type, lambda { event_loop.push(value); event_loop.process })
+      dom.addEventListener(event_type, lambda { runtime.push(value); runtime.process })
     end
   end
 
@@ -30,8 +30,8 @@ class VirtualDOM
   end
 
   def set_attributes(element, dom)
-    attribute_props = element[:props].reject { |key, _value| listener?(key) }
-    attribute_props.each { |key, value| dom[key] = value }
+    attributes = element[:props].reject { |key, _value| listener?(key) }
+    attributes.each { |key, value| key != :class ? dom[key] = value : dom.className = value }
   end
 
   def update_dom(parent_dom, dom, replace)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: beryl
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Bart Blast
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-09-23 00:00:00.000000000 Z
+date: 2018-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -52,6 +52,62 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: bowser
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: opal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Web framework
 email:
 - bart@bartblast.com
@@ -66,20 +122,31 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app-Gemfile
-- app/frontend_app.rb
+- Rakefile-template
+- app/frontend.rb
+- app/initial_state.rb
+- app/something.rb
+- app/view.rb
 - beryl.gemspec
 - bin/console
 - bin/setup
 - config.ru
-- lib/app.rb
 - lib/beryl.rb
+- lib/beryl/Rakefile
+- lib/beryl/backend.rb
+- lib/beryl/deserializer.rb
+- lib/beryl/frontend.rb
+- lib/beryl/runtime.rb
+- lib/beryl/style.css
+- lib/beryl/utils.rb
 - lib/beryl/version.rb
+- lib/beryl/view.rb
+- lib/beryl/virtual_dom.rb
+- lib/beryl/widget.rb
 - lib/command_handler.rb
-- lib/event_loop.rb
+- lib/renderer.rb
 - lib/serializer.rb
 - lib/task.rb
-- lib/virtual_dom.rb
 homepage: https://github.com/bartblast/beryl
 licenses:
 - MIT

data/app-Gemfile

@@ -1,6 +0,0 @@
-source 'https://rubygems.org' do
-  gem 'bowser'
-  gem 'opal'
-  gem 'puma'
-  gem 'rack'
-end

data/app/frontend_app.rb

@@ -1,73 +0,0 @@
-require 'opal'
-require 'native'
-require 'event_loop'
-require 'serializer'
-require 'virtual_dom'
-
-puts 'Wow, running opal!'
-
-def div(props = {}, &children)
-  node('div', props, children ? children.call : [])
-end
-
-def input(props = {}, &children)
-  node('input', props, children ? children.call : [])
-end
-
-def link(text, props = {}, &children)
-  node('a', props, [text(text)])
-end
-
-def node(type, props = {}, children)
-  {
-    type: type,
-    props: props,
-    children: children
-  }
-end
-
-def span(props = {}, &children)
-  node('span', props, children ? children.call : [])
-end
-
-def text(value, props = {}, &children)
-  node('text', props.merge(nodeValue: value), children ? children.call : [])
-end
-
-def onload(&block)
-  `window.onload = block;`
-end
-
-def element(state)
-  div(id: 'container') {[
-    input(value: 'foo', type: 'text'),
-    span() {[
-      text(' Foo ' + state[:counter].to_s + ' ')
-    ]},
-    link(' Increment ', onClick: [:IncrementClicked, key_1: 1, key_2: 2]),
-    link(' Load ', onClick: [:LoadClicked, key_1: 1, key_2: 2]),
-    div {[
-      text(state[:content])
-    ]}
-  ]}
-end
-
-class Interval
-  def initialize(time = 0, &block)
-    @interval = `setInterval(function(){#{block.call}}, time)`
-  end
-
-  def stop
-    `clearInterval(#@interval)`
-  end
-end
-
-onload do
-  document = Native(`window.document`)
-  parentDom = document.getElementById('root')
-
-  state = { counter: 0, content: 'here we will load something' }
-  event_loop = EventLoop.new(parentDom, state)
-  event_loop.process
-  event_loop.render
-end

data/lib/app.rb

@@ -1,33 +0,0 @@
-require 'json'
-require_relative 'command_handler'
-require_relative 'serializer'
-
-class App
-  HTML = <<~HEREDOC
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <script src='build/app.js'></script>
-      </head>
-      <body>
-        <div id="root"></div>
-      </body>
-    </html>
-  HEREDOC
-
-  def call (env)
-    req = Rack::Request.new(env)
-    case req.path_info
-    when '/rock/command'
-      [200, { 'Content-Type' => 'application/json; charset=utf-8' }, [run_command(req)]]
-    else
-      [200, { 'Content-Type' => 'text/html; charset=utf-8' }, [HTML]]
-    end
-  end
-
-  def run_command(req)
-    json = JSON.parse(req.body.read)
-    result = CommandHandler.new.handle(json['type'].to_sym, json['payload'])
-    Serializer.serialize(result)
-  end
-end

data/lib/event_loop.rb

@@ -1,53 +0,0 @@
-require 'virtual_dom'
-require 'task'
-require 'bowser/http'
-require 'serializer'
-
-class EventLoop
-  def initialize(root, state)
-    @messages = []
-    @root = root
-    @state = state
-  end
-
-  def push(message)
-    puts 'adding message...'
-    @messages << message
-  end
-
-  def render
-    VirtualDOM.new.render(self, element(@state), @root)
-  end
-
-  def process
-    while @messages.any?
-      message = @messages.shift
-      result = transition(message.first, message.last)
-      @state = result.is_a?(Array) ? result.first : result
-      command = result.is_a?(Array) ? result[1] : nil
-      run_command(result[1], result[2]) if command
-      render
-    end
-  end
-
-  def run_command(type, payload)
-    puts 'running command'
-    Task.new do
-      Bowser::HTTP.fetch('/rock/command', method: :post, data: { type: type, payload: Serializer.serialize(payload) })
-        .then(&:json) # JSONify the response
-        .then { |response| puts response }
-        .catch { |exception| warn exception.message }
-    end
-  end
-
-  def transition(type, payload)
-    case type
-    when :IncrementClicked
-      @state.merge(counter: @state[:counter] + 1)
-    when :LoadClicked
-      [@state, :FetchData, key_1: 1, key_2: 2]
-    when :LoadSuccess
-      @state.merge(content: payload[:data])
-    end
-  end
-end