ovto 0.2.0

data/lib/ovto/runtime.rb

@@ -0,0 +1,388 @@
+# vim: set ft=javascript:
+require 'native'
+module Ovto
+  class Runtime
+    def initialize(app)
+      @app = app
+    end
+
+    def run(view, container)
+      getState = ->{ @app.state }
+      @scheduleRender = `Ovto.run(getState, view, container)`
+    end
+
+    def scheduleRender
+      @scheduleRender.call
+    end
+  end
+end
+
+# Core part
+# Copied from https://github.com/hyperapp/hyperapp/blob/6c4f4fb927b0ebba69cb6397ee8c1b69a9e81e18/src/index.js (see LICENSE.txt) and added some modification
+# TODO: should we use https://github.com/jorgebucaran/ultradom instead?
+%x{
+  var Ovto = {};
+  Ovto.run = function(getState, view, container) {
+    var map = [].map
+    var rootElement = (container && container.children[0]) || null
+    var oldNode = rootElement && recycleElement(rootElement)
+    var lifecycle = []
+    var skipRender
+    var isRecycling = true
+
+    scheduleRender()
+
+    return scheduleRender
+
+    function recycleElement(element) {
+      return {
+        nodeName: element.nodeName.toLowerCase(),
+        attributes: {},
+        children: map.call(element.childNodes, function(element) {
+          return element.nodeType === 3 // Node.TEXT_NODE
+            ? element.nodeValue
+            : recycleElement(element)
+        })
+      }
+    }
+
+    function resolveNode(node) {
+      if (node === Opal.nil || node == null) {
+        return "";
+      }
+      else if (node.$$id) { // is a Opal obj
+        return node.$render_view(getState());
+      }
+      else {
+        return node;
+      }
+    }
+
+    function render() {
+      skipRender = !skipRender
+
+      var node = resolveNode(view)
+
+      if (container && !skipRender) {
+        rootElement = patch(container, rootElement, oldNode, (oldNode = node))
+      }
+
+      isRecycling = false
+
+      while (lifecycle.length) lifecycle.pop()()
+    }
+
+    function scheduleRender() {
+      if (!skipRender) {
+        skipRender = true
+        setTimeout(render)
+      }
+    }
+
+    function clone(target, source) {
+      var out = {}
+
+      for (var i in target) out[i] = target[i]
+      for (var i in source) out[i] = source[i]
+
+      return out
+    }
+
+//    function setPartialState(path, value, source) {
+//      var target = {}
+//      if (path.length) {
+//        target[path[0]] =
+//          path.length > 1
+//            ? setPartialState(path.slice(1), value, source[path[0]])
+//            : value
+//        return clone(source, target)
+//      }
+//      return value
+//    }
+//
+//    function getPartialState(path, source) {
+//      var i = 0
+//      while (i < path.length) {
+//        source = source[path[i++]]
+//      }
+//      return source
+//    }
+//
+//    function wireStateToActions(path, state, actions) {
+//      for (var key in actions) {
+//        typeof actions[key] === "function"
+//          ? (function(key, action) {
+//              actions[key] = function(data) {
+//                var result = action(data)
+//
+//                if (typeof result === "function") {
+//                  result = result(getPartialState(path, getState()), actions)
+//                }
+//
+//                if (
+//                  result &&
+//                  result !== (state = getPartialState(path, getState())) &&
+//                  !result.then // !isPromise
+//                ) {
+//                  globalState = setPartialState(
+//                    path,
+//                    clone(state, result),
+//                    getState()
+//                  )
+//                  scheduleRender(globalState)
+//                }
+//
+//                return result
+//              }
+//            })(key, actions[key])
+//          : wireStateToActions(
+//              path.concat(key),
+//              (state[key] = clone(state[key])),
+//              (actions[key] = clone(actions[key]))
+//            )
+//      }
+//
+//      return actions
+//    }
+
+    function getKey(node) {
+      return node ? node.key : null
+    }
+
+    function eventListener(event) {
+      var ovto_ev = #{Native(`event`)}
+      return event.currentTarget.events[event.type](ovto_ev)
+    }
+
+    function updateAttribute(element, name, value, oldValue, isSvg) {
+      if (name === "key") {
+      } else if (name === "style") {
+        for (var i in clone(oldValue, value)) {
+          var style = value == null || value[i] == null ? "" : value[i]
+          if (i[0] === "-") {
+            element[name].setProperty(i, style)
+          } else {
+            element[name][i] = style
+          }
+        }
+      } else {
+        if (name[0] === "o" && name[1] === "n") {
+          name = name.slice(2)
+
+          if (element.events) {
+            if (!oldValue) oldValue = element.events[name]
+          } else {
+            element.events = {}
+          }
+
+          element.events[name] = value
+
+          if (value) {
+            if (!oldValue) {
+              element.addEventListener(name, eventListener)
+            }
+          } else {
+            element.removeEventListener(name, eventListener)
+          }
+        } else if (name in element && name !== "list" && !isSvg) {
+          element[name] = value == null ? "" : value
+        } else if (value != null && value !== false) {
+          element.setAttribute(name, value)
+        }
+
+        if (value == null || value === false) {
+          element.removeAttribute(name)
+        }
+      }
+    }
+
+    function createElement(node, isSvg) {
+      var element =
+        typeof node === "string" || typeof node === "number"
+          ? document.createTextNode(node)
+          : (isSvg = isSvg || node.nodeName === "svg")
+            ? document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                node.nodeName
+              )
+            : document.createElement(node.nodeName)
+
+      var attributes = node.attributes
+      if (attributes) {
+        if (attributes.oncreate) {
+          lifecycle.push(function() {
+            attributes.oncreate(element)
+          })
+        }
+        for (var i = 0; i < node.children.length; i++) {
+          element.appendChild(
+            createElement(
+              (node.children[i] = resolveNode(node.children[i])),
+              isSvg
+            )
+          )
+        }
+
+        for (var name in attributes) {
+          updateAttribute(element, name, attributes[name], null, isSvg)
+        }
+      }
+
+      return element
+    }
+
+    function updateElement(element, oldAttributes, attributes, isSvg) {
+      for (var name in clone(oldAttributes, attributes)) {
+        if (
+          attributes[name] !==
+          (name === "value" || name === "checked"
+            ? element[name]
+            : oldAttributes[name])
+        ) {
+          updateAttribute(
+            element,
+            name,
+            attributes[name],
+            oldAttributes[name],
+            isSvg
+          )
+        }
+      }
+
+      var cb = isRecycling ? attributes.oncreate : attributes.onupdate
+      if (cb) {
+        lifecycle.push(function() {
+          cb(element, oldAttributes)
+        })
+      }
+    }
+
+    function removeChildren(element, node) {
+      var attributes = node.attributes
+      if (attributes) {
+        for (var i = 0; i < node.children.length; i++) {
+          removeChildren(element.childNodes[i], node.children[i])
+        }
+
+        if (attributes.ondestroy) {
+          attributes.ondestroy(element)
+        }
+      }
+      return element
+    }
+
+    function removeElement(parent, element, node) {
+      function done() {
+        parent.removeChild(removeChildren(element, node))
+      }
+
+      var cb = node.attributes && node.attributes.onremove
+      if (cb) {
+        cb(element, done)
+      } else {
+        done()
+      }
+    }
+
+    function patch(parent, element, oldNode, node, isSvg) {
+      if (node === oldNode) {
+      } else if (oldNode == null || oldNode.nodeName !== node.nodeName) {
+        var newElement = createElement(node, isSvg)
+        parent.insertBefore(newElement, element)
+
+        if (oldNode != null) {
+          removeElement(parent, element, oldNode)
+        }
+
+        element = newElement
+      } else if (oldNode.nodeName == null) {
+        element.nodeValue = node
+      } else {
+        updateElement(
+          element,
+          oldNode.attributes,
+          node.attributes,
+          (isSvg = isSvg || node.nodeName === "svg")
+        )
+
+        var oldKeyed = {}
+        var newKeyed = {}
+        var oldElements = []
+        var oldChildren = oldNode.children
+        var children = node.children
+
+        for (var i = 0; i < oldChildren.length; i++) {
+          oldElements[i] = element.childNodes[i]
+
+          var oldKey = getKey(oldChildren[i])
+          if (oldKey != null) {
+            oldKeyed[oldKey] = [oldElements[i], oldChildren[i]]
+          }
+        }
+
+        var i = 0
+        var k = 0
+
+        while (k < children.length) {
+          var oldKey = getKey(oldChildren[i])
+          var newKey = getKey((children[k] = resolveNode(children[k])))
+
+          if (newKeyed[oldKey]) {
+            i++
+            continue
+          }
+
+          if (newKey != null && newKey === getKey(oldChildren[i + 1])) {
+            if (oldKey == null) {
+              removeElement(element, oldElements[i], oldChildren[i])
+            }
+            i++
+            continue
+          }
+
+          if (newKey == null || isRecycling) {
+            if (oldKey == null) {
+              patch(element, oldElements[i], oldChildren[i], children[k], isSvg)
+              k++
+            }
+            i++
+          } else {
+            var keyedNode = oldKeyed[newKey] || []
+
+            if (oldKey === newKey) {
+              patch(element, keyedNode[0], keyedNode[1], children[k], isSvg)
+              i++
+            } else if (keyedNode[0]) {
+              patch(
+                element,
+                element.insertBefore(keyedNode[0], oldElements[i]),
+                keyedNode[1],
+                children[k],
+                isSvg
+              )
+            } else {
+              patch(element, oldElements[i], null, children[k], isSvg)
+            }
+
+            newKeyed[newKey] = children[k]
+            k++
+          }
+        }
+
+        while (i < oldChildren.length) {
+          if (getKey(oldChildren[i]) == null) {
+            removeElement(element, oldElements[i], oldChildren[i])
+          }
+          i++
+        }
+
+        for (var i in oldKeyed) {
+          if (!newKeyed[i]) {
+            removeElement(element, oldKeyed[i][0], oldKeyed[i][1])
+          }
+        }
+      }
+      return element
+    }
+  };
+}

data/lib/ovto/state.rb

@@ -0,0 +1,69 @@
+module Ovto
+  class State
+    # Mandatory value is omitted in the argument of State.new
+    class MissingValue < StandardError; end
+    # Unknown key is given
+    class UnknownKey < StandardError; end
+
+    # (internal) initialize subclass
+    def self.inherited(subclass)
+      subclass.instance_variable_set('@item_specs', [])
+    end
+
+    # Declare state item
+    def self.item(name, options={})
+      @item_specs << [name, options]
+      # Define accessor
+      define_method(name){ @values[name] }
+    end
+
+    # Return list of item specs (Array of `[name, options]`)
+    def self.item_specs
+      @item_specs
+    end
+
+    def initialize(hash = {})
+      unknown_keys = hash.keys - self.class.item_specs.map(&:first)
+      if unknown_keys.any?
+        raise UnknownKey, "unknown key(s): #{unknown_keys.inspect}"
+      end
+
+      @values = self.class.item_specs.map{|name, options|
+        if !hash.key?(name) && !options.key?(:default)
+          raise MissingValue, ":#{name} is mandatory for #{self.class.name}.new"
+        end
+        # Note that `hash[key]` may be false or nil
+        value = hash.key?(name) ? hash[name] : options[:default]
+        [name, value]
+      }.to_h
+    end
+    attr_reader :values
+
+    # Create new state object from `self` and `hash`
+    def merge(hash)
+      unknown_keys = hash.keys - self.class.item_specs.map(&:first)
+      if unknown_keys.any?
+        raise UnknownKey, "unknown key(s): #{unknown_keys.inspect}"
+      end
+      self.class.new(@values.merge(hash))
+    end
+
+    # Return the value corresponds to `key`
+    def [](key)
+      @values[key]
+    end
+
+    # Return true if a State object `other` has same key-value paris as `self`
+    def ==(other)
+      other.is_a?(State) && self.values == other.values
+    end
+
+    def to_h
+      @values
+    end
+
+    def inspect
+      "#<#{self.class.name}:#{object_id} #{@values.inspect}>"
+    end
+  end
+end

data/lib/ovto/version.rb

@@ -0,0 +1,3 @@
+module Ovto
+  VERSION = '0.2.0'
+end

data/lib/ovto/wired_actions.rb

@@ -0,0 +1,33 @@
+require 'promise'
+
+module Ovto
+  class WiredActions
+    def initialize(actions, app, runtime)
+      @actions, @app, @runtime = actions, app, runtime
+    end
+
+    def method_missing(name, args_hash={})
+      invoke_action(name, args_hash)
+    end
+
+    def respond_to?(name)
+      @actions.respond_to?(name)
+    end
+
+    private
+
+    # Call action and schedule rendering
+    def invoke_action(name, args_hash)
+      kwargs = {state: @app.state}.merge(args_hash)
+      state_diff = @actions.__send__(name, **kwargs)
+      return if state_diff.nil? || state_diff.is_a?(Promise) || `!!state_diff.then`
+
+      new_state = @app.state.merge(state_diff)
+      if new_state != @app.state
+        @runtime.scheduleRender
+        @app._set_state(new_state)
+      end
+      return new_state
+    end
+  end
+end

data/lib/ovto.rb

@@ -0,0 +1,50 @@
+if RUBY_ENGINE == 'opal'
+  require 'console'; def console; $console; end
+  require_relative 'ovto/actions'
+  require_relative 'ovto/app'
+  require_relative 'ovto/component'
+  require_relative 'ovto/fetch'
+  require_relative 'ovto/runtime'
+  require_relative 'ovto/state'
+  require_relative 'ovto/version'
+  require_relative 'ovto/wired_actions'
+else
+  require 'ovto/version'
+  require 'opal'; Opal.append_path(__dir__)
+end
+
+module Ovto
+  # JS-object-safe inspect
+  def self.inspect(obj)
+    if `obj.$inspect`
+      obj.inspect
+    else
+      `JSON.stringify(#{obj}) || "undefined"`
+    end
+  end
+
+  # Call block. If an exception is raised and there is a tag with `id='ovto-debug'`,
+  # describe the error in that tag
+  def self.log_error(&block)
+    return block.call
+  rescue Exception => ex
+    raise ex if `typeof document === 'undefined'`  # On unit tests
+
+    div = `document.getElementById('ovto-debug')`
+    if `div && !ex.OvtoPrinted`
+      %x{
+        div.textContent = "ERROR: " + #{ex.class.name};
+        var ul = document.createElement('ul');
+        // Note: ex.backtrace may be an Array or a String
+        #{Array(ex.backtrace)}.forEach(function(line){
+          var li = document.createElement('li');
+          li.textContent = line;
+          ul.appendChild(li);
+        });
+        div.appendChild(ul);
+        ex.OvtoPrinted = true;
+      }
+    end
+    raise ex
+  end
+end

data/ovto.gemspec

@@ -0,0 +1,22 @@
+require "#{__dir__}/lib/ovto/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "ovto"
+  spec.version       = Ovto::VERSION
+  spec.authors       = ["Yutaka HARA"]
+  spec.email         = ["yutaka.hara+github@gmail.com"]
+
+  spec.summary       = %q{Simple client-side framework for Opal}
+  spec.description   = %q{Simple client-side framework for Opal}
+  spec.homepage      = "https://github.com/yhara/ovto"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "opal", '~> 0.11'
+end