vdom-rb 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 175eed1045ac11f8cf7f8d233172412e44252a7a
+  data.tar.gz: 097298a39a6fa4cbb6f73e231639af21c09f89ab
+SHA512:
+  metadata.gz: f14abe05447c686b6e95e0f24254348d6f12134484bf202208d36d70201b865ca1849ca2b6af6c212fbdda89cf771329c9b82b9a0858d580f71b64f7cd2082f1
+  data.tar.gz: 52c1210dae305dd5a8e12ff67e305276405be2064c85c2047ea85b0f4c3897d857775736bee204135560cef8aa720c1c92111d90c1e9a45db1890898357b5850

data/lib/vdom-rb.rb

@@ -0,0 +1,5 @@
+# __FILE__ MUST BE SAME NAME AS GEM
+module VDOM
+  require_relative "vdom/version"
+end
+Opal.append_path(File.expand_path(File.join("..", "..", "opal"), __FILE__).untaint)

data/lib/vdom/version.rb

@@ -0,0 +1,3 @@
+module VDOM
+  VERSION = "0.1.0"
+end

data/opal/vdom.rb

@@ -0,0 +1,4 @@
+require 'vdom/component'
+require 'vdom/content'
+require 'vdom/table'
+require 'vdom/util'

data/opal/vdom/component.rb

@@ -0,0 +1,151 @@
+puts "#{__FILE__}[#{__LINE__}] requiring vdom stuff"
+require 'clearwater'
+require 'vdom/registry'
+
+module VDOM
+
+  # Base component class
+  class  Component
+    include Clearwater::Component
+
+    attr_reader :dom_id
+
+    def initialize(dom_id: nil)
+      @dom_id = dom_id
+    end
+
+    def render_dom!
+      registry.render(@dom_id)
+    end
+
+    def registry
+      VDOM::Registry.instance
+    end
+
+  end # class Component
+
+  # A DOM element
+  # TODO: call it an element ?
+  class Node < VDOM::Component
+    attr_reader :tag_name, :attributes, :content, :model
+
+    def initialize(tag_name, attributes: nil, content: nil, model: nil, dom_id: nil)
+      super(dom_id: dom_id)
+      @tag_name = tag_name
+      @attributes = attributes
+      @content = content
+      @model = model
+      @is_volatile = Proc === @content ||
+        Proc === @attributes ||
+        Proc === @tag_name
+      @cached_tag = @is_volatile ? nil : render_tag
+    end
+
+    def render
+      result = if @is_volatile
+        render_tag
+      else
+        @cached_tag
+      end
+      result
+    end
+
+    def volatile?
+      @is_volatile
+    end
+
+    def cached?
+      !volatile?
+    end
+
+    def render_tag
+      tag(
+        resolve(@tag_name),
+        resolve(@attributes),
+        resolve(@content)
+      )
+    end
+
+    def to_s
+      super + " @tag_name=#{@tag_name}"
+    end
+
+    private
+
+    def resolve(thing)
+      Proc === thing ? thing.call : thing
+    end
+
+  end
+
+  # State - a simple but effective way of implying
+  # changed state of contents. Wrap contents in a new
+  # state whenever the content changes. The object
+  # identity then become a proxy for a change
+  # in the contents. Used by StateComponent.
+  class State
+
+    attr_reader :contents
+
+    def initialize(**args)
+      @contents = args
+    end
+
+    def new
+      # self.class.new(**contents)
+      self.class.new(contents) # opal likes it like this ?
+    end
+
+    def contents
+      @contents
+    end
+
+    def [](key)
+      @contents[key]
+    end
+
+    alias_method :get, :[]
+  end
+
+  # A component with cached rendering which
+  # uses State's to determine whether the
+  # component should render. If the previous
+  # instance has a state equal to the
+  # current instance, then no rendering
+  # will be performed. If the state has
+  # changed then the render method will
+  # be called.
+  class StateComponent < VDOM::Component
+    include Clearwater::CachedRender
+
+    attr_reader :state
+
+    def initialize(state, dom_id: nil)
+      super(dom_id: dom_id)
+      @state = state
+    end
+
+    # Placeholder only. Subclasses should implement.
+    # The contents of the state held by the component
+    # can be used to perform the necessary render.
+    def render
+    end
+
+    # Returns true of the receiver's state is
+    # not equal to the previous component's
+    # state.
+    def should_render?(previous)
+      @state != previous.state
+    end
+
+    alias_method :changed?, :should_render?
+
+    # Synonym for !should_render?
+    def unchanged?(previous)
+      !changed?(previous)
+    end
+
+  end
+
+end
+

data/opal/vdom/content.rb

@@ -0,0 +1,240 @@
+require 'vdom/component'
+
+module VDOM
+  class Content
+
+    # options
+    #
+    # :value       # object appropriate to type or proc(context) or proc(value) or proc(context, value)
+    # :type        # :container, :media, :string, :integer, :decimal, :bool, :count, :percent, :sign, :date
+    # :css         # string with valid css classes or proc(value) or proc(context, value)
+    # :style       # { } hash of styles per Clearwater or proc(value) or proc(context, value)
+    # :format      # string or proc(value) or proc(context, value) for :decimal, :percent, :date
+    # :comma       # boolean for numeric values (default true)
+    # :events      # { click: ->{ clicked }, ... } - hash or proc(value) or proc(context, value)
+    #              # event names per 'developer.mozilla.org/en-US/docs/Web/Events'
+
+    attr_reader :options, :type
+
+    def initialize(**options)
+      @options = options
+      @type = @options[:type] ||= :container
+      @options[:css] ||= ''
+      @options[:style] ||= {}
+      @options[:events] ||= {}
+      @is_numeric = [:integer, :decimal, :percent, :count].include?(@type)
+      @is_text = !(container? || media?)
+      @options[:comma] = true if @options[:comma].nil?
+      set_format_defaults
+      set_css_defaults
+      set_style_defaults
+    end
+
+    def container?
+      @type == :container
+    end
+
+    def media?
+      @type == :media
+    end
+
+    def text?
+      @is_text
+    end
+
+    def date?
+      @type == :date
+    end
+
+    def numeric?
+      @is_numeric
+    end
+
+    # Context may be anything meaningful to procs.
+    # Returned value will be formatted (if applicable).
+    def node(tag_name, attributes: {}, context: nil)
+      VDOM::Node.new(
+        tag_name,
+        attributes: ->{
+          attributes.merge.({
+            class:  css(context: context, value: value),
+            style:  style(context: context, value: value),
+          }).merge(
+            events(context: context, value: value)
+          )
+        },
+        content: ->{
+          formatted_value(context: context)
+        },
+        model: self
+      )
+    end
+
+    # Context may be anything meaningful to procs.
+    # Returned value will be formatted (if applicable).
+    def value_and_attributes(context: nil)
+      value = formatted_value(context: context)
+      [
+        value,
+        {
+          class:  css(context: context, value: value),
+          style:  style(context: context, value: value),
+        }.merge(
+          events(context: context, value: value)
+        )
+      ]
+    end
+
+    def sort_value(context: nil)
+      # debug __FILE__, __LINE__,  __method__, "context=#{context.class.name}"
+      option(:sort_value, context: context)
+    end
+
+    def value(context: nil)
+      option(:value, context: context)
+    end
+
+    def css(context: nil, value: nil)
+      option(:css, context: context, value: value)
+    end
+
+    def style(context: nil, value: nil)
+      option(:style, context: context, value: value)
+    end
+
+    def events(context: nil, value: nil)
+      result = {}
+      events = option(:events, context: context, value: value)
+      if events && events.size > 0
+        events.each do |event, proc|
+          event = event[0,2] == 'on' ? event : :"on#{event}"
+          result[event] = proc
+        end
+      end
+      result
+    end
+
+    def formatted_value(context: nil)
+      v = value(context: context)
+      if v
+        if text?
+          format = format(context: context, value: v)
+          if numeric?
+            comma_numeric(format % v.to_f)
+          elsif date?
+            parse_date(v).strftime(value)
+          else
+            v.to_s
+          end
+        else
+          v
+        end
+      end
+    end
+
+    def format(context: nil, value: nil)
+      option(:format, context: context, value: value)
+    end
+
+    def option(name, context: nil, value: nil)
+      option = @options[name]
+      resolve(option, context: context, value: value)
+    end
+
+    def resolve(thing, context: nil, value: nil)
+      if Proc === thing
+        if thing.arity == 2
+          thing.call(context, value)
+        elsif thing.arity == 1
+          thing.call(value || context)
+        else
+          thing.call
+        end
+      else
+        thing
+      end
+    end
+
+    def comma_numeric(s)
+      @options[comma] ? s.comma_numeric : s
+    end
+
+    def parse_date(d)
+      self.class.parse_date(d)
+    end
+
+    def self.parse_date(d)
+      return d if d.is_a?(Date)
+      # opal Date.parse can't handle strings with named months
+      # nor can it parse YYYYMMDD without separators!
+      if RUBY_PLATFORM == 'opal'
+        t = Time.parse(d)
+        Date.new(t.year, t.month, t.day)
+      else
+        Date.parse(d)
+      end
+    end
+
+    private
+
+    def set_tag_defaults
+      @options[:tag] ||= 'div'
+    end
+
+    def set_style_defaults
+      if text? && options[:style].nil?
+        @options[:style] = case @options[:type]
+          when :integer, :decimal, :count, :percent
+            { text_align: 'right' }
+          else
+            { text_align: 'center' }
+        end
+      end
+    end
+
+    def set_css_defaults
+      # ?
+    end
+
+    def set_format_defaults
+      if text? && @options[:format].nil?
+        @options[:format] = case @options[:type]
+          when :decimal
+            ->(v) {
+              comma_numeric('%0.2f' % v)
+            }
+          when :integer, :count
+            ->(v) {
+              comma_numeric(v.to_i.to_s)
+            }
+          when :percent
+            ->(v) {
+              comma_numeric((v * 100).round(0).to_s)
+            }
+          when :sign
+            ->(v) {
+              if v == 0
+                '0'
+              else
+                v < 0 ? '-' : '+'
+              end
+            }
+          when :date
+            ->(v) {
+              v.strftime('%Y/%m/%d')
+            }
+          when :bool
+            ->(v) {
+              v ? 'T' : 'F'
+            }
+          else # :text, ...
+            ->(v) {
+              v.to_s
+            }
+        end
+      end
+    end
+
+  end
+end
+

data/opal/vdom/instance.rb

@@ -0,0 +1,112 @@
+require 'vdom/component'
+
+module VDOM
+  class Instance
+
+    # Returns a (very probably) unique element id.
+    def self.new_id
+      @@id_chars ||= ('0'..'9').to_a + ('A'..'F').to_a
+      'DOM_' + @@id_chars.shuffle.reduce('') {|r,c| r + c}
+    end
+
+    attr_reader :id
+    attr_reader :root_element
+    attr_reader :root_component
+
+    # Create a VDOM::Instance with given id,
+    # (root) component and (root) DOM element.
+    # Element must be a native element or Bowser::Element.
+    # Component must be a VDOM::Component.
+    def initialize(id: nil, component: nil, element: nil)
+      @id = id || self.class.new_id
+      @root_element = Bowser::Element.new(element)
+      @root_component = component
+      unless VDOM::Component === @root_component
+        raise TypeError, "#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__}: root component must be a VDOM::Component"
+      end
+      @virtual_dom = Clearwater::VirtualDOM::Document.new(@root_element)
+      Instances.add(self)
+    end
+
+    def ==(other)
+      self.class == other.class && id == other.id
+      id == other.id
+    end
+
+    def eql?(other)
+      self.class == other.class && id == other.id
+    end
+
+    def document
+      @document ||= Bowser.document
+    end
+
+    def window
+      @window ||= Bowser.window
+    end
+
+    # Adapted from Clearwater::Application
+    # Removed optional block argument
+    def render
+      window.animation_frame do
+        perform_render
+      end
+      nil # not sure why
+    end
+
+    # Adapted from Clearwater::Application
+    def perform_render
+      rendered = benchmark('Generated virtual DOM') do
+        _render = @root_component.render
+        # `console.log(#{"#{__FILE__}:#{__LINE__}:#{self.class.name}##{__method__} : @root_component=#{@root_component} _render=#{_render} "})`
+        Clearwater::Component.sanitize_content(_render)
+      end
+      benchmark('Rendered to actual DOM') do
+        @virtual_dom.render(rendered)
+      end
+      nil # not sure why
+    end
+
+    # Adapted from Clearwater::Application - called #debug? there
+    def benchmark?
+      !!@benchmark
+    end
+
+    # Adapted from Clearwater::Application - called #debug! there
+    def benchmark!
+      @benchmark = true
+    end
+
+    # Adapted from Clearwater::Application
+    def benchmark(what)
+      if benchmark?
+        start = `performance.now()`
+        result = yield
+        finish = `performance.now()`
+        debug __FILE__, __LINE__,  __method__, "#{what} in #{(finish - start).round(3)}ms"
+        result
+      else
+        yield
+      end
+    end
+
+    # Returns a Bowser::Element (DOM element) with given id or nil.
+    # A Bowser::Element wraps a native JS DOM element.
+    def element(id)
+      self["##{id}"]
+    end
+
+    # Returns a Bowser::Element matching query using
+    # Document.querySelector query syntax.
+    # See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector.
+    def [](query)
+      document[query]
+    end
+
+    def shutdown
+      Instances.delete(self)
+    end
+
+  end
+end
+