glimmer-dsl-web 0.0.9 → 0.0.11

data/VERSION

@@ -1 +1 @@
-0.0.9
+0.0.11

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.0.9 ruby lib
+# stub: glimmer-dsl-web 0.0.11 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.9".freeze
+  s.version = "0.0.11".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-01-05"
+  s.date = "2024-01-06"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) - Enables frontend GUI development with Ruby by adopting a DSL that follows web-like HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development. This library relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -35,8 +35,11 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
+    "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
     "lib/glimmer/data_binding/element_binding.rb",
@@ -48,10 +51,12 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/element_expression.rb",
     "lib/glimmer/dsl/web/general_element_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
+    "lib/glimmer/dsl/web/observe_expression.rb",
     "lib/glimmer/dsl/web/p_expression.rb",
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
+    "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
     "lib/glimmer/web/component.rb",
@@ -69,10 +74,10 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
-  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.4.1".freeze])
-  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.2".freeze])
+  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
+  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.0".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.4.6".freeze])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.0".freeze])
   s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
   s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0".freeze])
   s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])

data/lib/glimmer/dsl/web/component_expression.rb

@@ -21,8 +21,9 @@ module Glimmer
           if block.source_location && (block.source_location == parent.content&.__getobj__&.source_location)
             parent.content.call(parent) unless parent.content.called?
           else
-            super
+            super(parent, keyword, *args, &block)
           end
+          parent.post_add_content
         end
       end
     end

data/lib/glimmer/dsl/web/dsl.rb

@@ -1,3 +1,24 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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.
+
 require 'glimmer/dsl/engine'
 require 'glimmer/dsl/web/element_expression'
 require 'glimmer/dsl/web/listener_expression'
@@ -9,6 +30,7 @@ require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'
 require 'glimmer/dsl/web/shine_data_binding_expression'
 require 'glimmer/dsl/web/component_expression'
+require 'glimmer/dsl/web/observe_expression'
 
 module Glimmer
   module DSL

data/lib/glimmer/dsl/web/observe_expression.rb

@@ -0,0 +1,42 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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.
+
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/top_level_expression'
+require 'glimmer/dsl/observe_expression'
+require 'glimmer/web/component'
+
+module Glimmer
+  module DSL
+    module SWT
+      class ObserveExpression < StaticExpression
+        include TopLevelExpression
+        include Glimmer::DSL::ObserveExpression
+
+        def interpret(parent, keyword, *args, &block)
+          observer_registration = super(parent, keyword, *args, &block)
+          Glimmer::Web::Component.interpretation_stack.last&.observer_registrations&.push(observer_registration)
+          observer_registration
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/helpers/glimmer_helper.rb

@@ -0,0 +1,30 @@
+module GlimmerHelper
+  class << self
+    def next_id_number
+      @next_id_number ||= 0
+      @next_id_number += 1
+    end
+  end
+  
+  def glimmer_component(component_asset_path, *component_args)
+    component_file = component_asset_path.split('/').last
+    component_class_name = component_file.classify
+    next_id_number = GlimmerHelper.next_id_number
+    component_id = "glimmer_component_#{next_id_number}"
+    component_script_container_id = "glimmer_component_script_container_#{next_id_number}"
+    component_args_json = JSON.dump(component_args)
+    opal_script = <<~Opal
+      require 'glimmer-dsl-web'
+      component_args_json = '#{component_args_json}'
+      component_args = JSON.parse(component_args_json)
+      component_args << {} if !component_args.last.is_a?(Hash)
+      component_args.last[:parent] = "##{component_id}"
+      #{component_class_name}.render(*component_args)
+    Opal
+    content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"]) do
+      content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +
+      javascript_include_tag(component_asset_path, "data-turbolinks-track": "reload") +
+        content_tag(:script, raw(opal_script), type: 'text/ruby')
+    end
+  end
+end

data/lib/glimmer/web/component.rb

@@ -94,8 +94,9 @@ module Glimmer
         end
         
         def render(*args)
-          rendered_component = send(keyword)
-          rendered_component.render(*args)
+          rendered_component = send(keyword, *args)
+          options = args.last.is_a?(Hash) ? args.last.slice(:parent, :custom_parent_dom_element, :brand_new) : {}
+          rendered_component.render(**options)
           rendered_component
         end
       end
@@ -175,14 +176,19 @@ module Glimmer
         def reset_component_namespaces
           @component_namespaces = Set[Object, Glimmer::Web]
         end
+        
+        def interpretation_stack
+          @interpretation_stack ||= []
+        end
       end
       # <- end of class methods
       
 
-      attr_reader :markup_root, :parent, :options
+      attr_reader :markup_root, :parent, :args, :options
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
+        Component.interpretation_stack.push(self)
         @parent = parent
         options = args.delete_at(-1) if args.is_a?(Array) && args.last.is_a?(Hash)
         if args.is_a?(Hash)
@@ -198,9 +204,18 @@ module Glimmer
         markup_block = self.class.instance_variable_get("@markup_block")
         raise Glimmer::Error, 'Invalid Glimmer web component for having no markup! Please define markup block!' if markup_block.nil?
         @markup_root = instance_exec(&markup_block)
+        @markup_root.options[:parent] = options[:parent] if options[:parent]
         @parent ||= @markup_root.parent
         raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
         execute_hooks('after_render')
+        
+        # TODO adapt for web
+        observer_registration_cleanup_listener = proc do
+          observer_registrations.compact.each(&:deregister)
+          observer_registrations.clear
+        end
+        @markup_root.handle_observation_request('on_remove', observer_registration_cleanup_listener)
+        post_add_content if content.nil?
       end
       
       # Subclasses may override to perform post initialization work on an added child
@@ -208,6 +223,15 @@ module Glimmer
         # No Op by default
       end
 
+      def post_add_content
+        Component.interpretation_stack.pop
+      end
+      
+      # This stores observe keyword registrations of model/attribute observers
+      def observer_registrations
+        @observer_registrations ||= []
+      end
+
       def can_handle_observation_request?(observation_request)
         observation_request = observation_request.to_s
         result = false
@@ -273,9 +297,9 @@ module Glimmer
         "#{attribute_name}="
       end
       
-      def render(*args)
+      def render(parent: nil, custom_parent_dom_element: nil, brand_new: false)
         # this method is defined to prevent displaying a harmless Glimmer no keyword error as an annoying useless warning
-        @markup_root&.render(*args)
+        @markup_root&.render(parent: parent, custom_parent_dom_element: custom_parent_dom_element, brand_new: brand_new)
       end
       
       # Returns content block if used as an attribute reader (no args)

data/lib/glimmer/web/element_proxy.rb

@@ -1,3 +1,5 @@
+# backtick_javascript: true
+
 # Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining
@@ -137,11 +139,14 @@ module Glimmer
         @children.dup.each do |child|
           child.remove
         end
+        on_remove_listeners = listeners_for('on_remove').dup
         remove_all_listeners
         dom_element.remove
         parent&.post_remove_child(self)
         @removed = true
-#         listeners_for('widget_removed').each {|listener| listener.call(Event.new(widget: self))}
+        on_remove_listeners.each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
       end
       
       def remove_all_listeners
@@ -215,15 +220,18 @@ module Glimmer
         if parent_selector
           Document.find(parent_selector)
         else
-          # TODO consider moving this to initializer
           options[:parent] ||= 'body'
           the_element = Document.find(options[:parent])
-          the_element = Document.find('body') if the_element.length == 0
+          if the_element.length == 0
+            options[:parent] = 'body'
+            the_element = Document.find('body')
+          end
           the_element
         end
       end
       
-      def render(parent_selector = nil, custom_parent_dom_element: nil, brand_new: false)
+      def render(parent: nil, custom_parent_dom_element: nil, brand_new: false)
+        parent_selector = parent
         options[:parent] = parent_selector if !parent_selector.to_s.empty?
         if !options[:parent].to_s.empty?
           # ensure element is orphaned as it is becoming a top-level root element
@@ -430,22 +438,12 @@ module Glimmer
       end
       
       def handle_observation_request(keyword, original_event_listener)
-#         case keyword
-#         when 'on_widget_removed'
-#           listeners_for(keyword.sub(/^on_/, '')) << original_event_listener.to_proc
-#         else
-          handle_javascript_observation_request(keyword, original_event_listener)
-#         end
-      end
-      
-      def handle_javascript_observation_request(keyword, original_event_listener)
         listener = ListenerProxy.new(
           element: self,
           selector: selector,
           dom_element: dom_element,
           event_attribute: keyword,
-          listener: original_event_listener,
-          original_event_listener: original_event_listener
+          original_event_listener: original_event_listener,
         )
         listener.register
         listeners_for(keyword) << listener
@@ -499,7 +497,7 @@ module Glimmer
       end
       
       def respond_to_missing?(method_name, include_private = false)
-        # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
+        # TODO consider doing more correct checking of availability of properties/methods using native ticks
         property_name = property_name_for(method_name)
         unnormalized_property_name = unnormalized_property_name_for(method_name)
         super(method_name, include_private) ||
@@ -512,7 +510,7 @@ module Glimmer
       end
       
       def method_missing(method_name, *args, &block)
-        # TODO consider doing more correct checking of availability of properties/methods using native `` ticks
+        # TODO consider doing more correct checking of availability of properties/methods using native ticks
         property_name = property_name_for(method_name)
         unnormalized_property_name = unnormalized_property_name_for(method_name)
         if method_name.to_s.start_with?('on_')

data/lib/glimmer/web/event_proxy.rb

@@ -24,9 +24,11 @@ module Glimmer
     class EventProxy
       attr_reader :js_event, :listener
 
-      def initialize(js_event:, listener:)
-        @js_event = js_event
+      # Instantiates EventProxy
+      # When js_event is nil, it is a custom event
+      def initialize(listener:, js_event: nil)
         @listener = listener
+        @js_event = js_event
       end
       
       def element = listener.element
@@ -34,6 +36,7 @@ module Glimmer
       def event_attribute = listener.event_attribute
       
       def original_event
+        return if js_event.nil?
         Native(`#{js_event.to_n}.originalEvent`)
       end
       
@@ -41,14 +44,14 @@ module Glimmer
         property_name = method_name.to_s.camelcase
         super(method_name, include_private) ||
           js_event.respond_to?(method_name, include_private) ||
-          `#{property_name} in #{original_event.to_n}`
+          (original_event && `#{property_name} in #{original_event.to_n}`)
       end
       
       def method_missing(method_name, *args, &block)
         property_name = method_name.to_s.camelcase
         if js_event.respond_to?(method_name, true)
           js_event.send(method_name, *args, &block)
-        elsif `#{property_name} in #{original_event.to_n}`
+        elsif (original_event && `#{property_name} in #{original_event.to_n}`)
           original_event[property_name]
         else
           super(method_name, *args, &block)

data/lib/glimmer/web/listener_proxy.rb

@@ -24,33 +24,34 @@ require 'glimmer/web/event_proxy'
 module Glimmer
   module Web
     class ListenerProxy
-      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :listener, :js_listener, :original_event_listener
+      attr_reader :element, :event_attribute, :event_name, :dom_element, :selector, :js_listener, :original_event_listener
 
-      def initialize(element:, event_attribute:, dom_element:, selector:, listener:)
+      def initialize(element:, event_attribute:, dom_element:, selector:, original_event_listener:)
         @element = element
         @event_attribute = event_attribute
-        @event_name = event_attribute.sub(/^on/, '')
+        @event_name = event_attribute.sub(/^on_/, '').sub(/^on/, '')
         @dom_element = dom_element
         @selector = selector
-        @listener = listener
-        @js_listener = lambda do |js_event|
-          event = EventProxy.new(js_event: js_event, listener: self)
-          result = listener.call(event)
-          result = true if result.nil?
-          result
+        if !event_attribute.start_with?('on_') # custom event
+          @js_listener = lambda do |js_event|
+            event = EventProxy.new(js_event: js_event, listener: self)
+            result = original_event_listener.call(event)
+            result = true if result.nil?
+            result
+          end
         end
         @original_event_listener = original_event_listener
       end
       
       def register
-        @dom_element.on(@event_name, &@js_listener)
+        @dom_element.on(@event_name, &@js_listener) unless @js_listener.nil?
       end
       alias observe register
       alias reregister register
       
       def unregister
         # TODO contribute fix to opal to allow passing observer with & to off with selector not specified as nil
-        @dom_element.off(@event_name, @js_listener)
+        @dom_element.off(@event_name, @js_listener) unless @js_listener.nil?
         @element.listeners_for(@event_attribute).delete(self)
       end
       alias unobserve unregister

data/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb

@@ -0,0 +1,156 @@
+require 'glimmer-dsl-web'
+
+class AddressForm
+  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
+    def state_code
+      STATES.invert[state]
+    end
+    
+    def state_code=(value)
+      self.state = STATES[value]
+    end
+  
+    def summary
+      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    end
+  end
+  
+  STATES = {
+    "AK"=>"Alaska",
+    "AL"=>"Alabama",
+    "AR"=>"Arkansas",
+    "AS"=>"American Samoa",
+    "AZ"=>"Arizona",
+    "CA"=>"California",
+    "CO"=>"Colorado",
+    "CT"=>"Connecticut",
+    "DC"=>"District of Columbia",
+    "DE"=>"Delaware",
+    "FL"=>"Florida",
+    "GA"=>"Georgia",
+    "GU"=>"Guam",
+    "HI"=>"Hawaii",
+    "IA"=>"Iowa",
+    "ID"=>"Idaho",
+    "IL"=>"Illinois",
+    "IN"=>"Indiana",
+    "KS"=>"Kansas",
+    "KY"=>"Kentucky",
+    "LA"=>"Louisiana",
+    "MA"=>"Massachusetts",
+    "MD"=>"Maryland",
+    "ME"=>"Maine",
+    "MI"=>"Michigan",
+    "MN"=>"Minnesota",
+    "MO"=>"Missouri",
+    "MS"=>"Mississippi",
+    "MT"=>"Montana",
+    "NC"=>"North Carolina",
+    "ND"=>"North Dakota",
+    "NE"=>"Nebraska",
+    "NH"=>"New Hampshire",
+    "NJ"=>"New Jersey",
+    "NM"=>"New Mexico",
+    "NV"=>"Nevada",
+    "NY"=>"New York",
+    "OH"=>"Ohio",
+    "OK"=>"Oklahoma",
+    "OR"=>"Oregon",
+    "PA"=>"Pennsylvania",
+    "PR"=>"Puerto Rico",
+    "RI"=>"Rhode Island",
+    "SC"=>"South Carolina",
+    "SD"=>"South Dakota",
+    "TN"=>"Tennessee",
+    "TX"=>"Texas",
+    "UT"=>"Utah",
+    "VA"=>"Virginia",
+    "VI"=>"Virgin Islands",
+    "VT"=>"Vermont",
+    "WA"=>"Washington",
+    "WI"=>"Wisconsin",
+    "WV"=>"West Virginia",
+    "WY"=>"Wyoming"
+  }
+
+  include Glimmer::Web::Component
+  
+  option :full_name
+  option :street
+  option :street2
+  option :city
+  option :state
+  option :zip_code
+  
+  attr_reader :address
+  
+  before_render do
+    @address = Address.new(
+      full_name: full_name,
+      street: street,
+      street2: street2,
+      city: city,
+      state: state,
+      zip_code: zip_code,
+    )
+  end
+  
+  markup {
+    div {
+      div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
+        label('Full Name: ', for: 'full-name-field')
+        input(id: 'full-name-field') {
+          value <=> [address, :full_name]
+        }
+        
+        @somelabel = label('Street: ', for: 'street-field')
+        input(id: 'street-field') {
+          value <=> [address, :street]
+        }
+        
+        label('Street 2: ', for: 'street2-field')
+        textarea(id: 'street2-field') {
+          value <=> [address, :street2]
+        }
+        
+        label('City: ', for: 'city-field')
+        input(id: 'city-field') {
+          value <=> [address, :city]
+        }
+        
+        label('State: ', for: 'state-field')
+        select(id: 'state-field') {
+          STATES.each do |state_code, state|
+            option(value: state_code) { state }
+          end
+
+          value <=> [address, :state_code]
+        }
+        
+        label('Zip Code: ', for: 'zip-code-field')
+        input(id: 'zip-code-field', type: 'number', min: '0', max: '99999') {
+          value <=> [address, :zip_code,
+                      on_write: :to_s,
+                    ]
+        }
+        
+        style {
+          <<~CSS
+            #{address_div.selector} * {
+              margin: 5px;
+            }
+            #{address_div.selector} input, #{address_div.selector} select {
+              grid-column: 2;
+            }
+          CSS
+        }
+      }
+      
+      div(style: 'margin: 5px') {
+        inner_text <= [address, :summary,
+                        computed_by: address.members + ['state_code'],
+                      ]
+      }
+    }
+  }
+end

data/lib/glimmer-dsl-web/samples/hello/hello_observer.rb

@@ -0,0 +1,88 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# 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.
+
+require 'glimmer-dsl-web'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  after_render do
+    # observe Model attribute @number_holder.number for changes and update View
+    observe(@number_holder, :number) do
+      number_string = @number_holder.number.to_s
+      @number_input.value = number_string unless @number_input.value == number_string
+      @range_input.value = number_string unless @range_input.value == number_string
+    end
+    # Bidirectional Data-Binding does the same thing automatically
+    # Just disable the observe block above as well as the oninput listeners below
+    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
+    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+  end
+  
+  markup {
+    div {
+      div {
+        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @number_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+          # oninput listener updates Model attribute @number_holder.number
+          oninput do
+            @number_holder.number = @range_input.value.to_i
+          end
+          
+          # Bidirectional Data-Binding simplifies the implementation significantly
+          # by enabling the following line and disabling oninput listeners as well
+          # as the after_body observe block observer
+          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+#           value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloObserver.render
+end