glimmer-dsl-web 0.6.1 → 0.6.3

data/lib/glimmer/web/element_proxy.rb

@@ -249,6 +249,10 @@ module Glimmer
           element_binding.unregister_all_observables
         end
         data_bindings.clear
+        content_binding_observer_registrations.each do |observer_registration|
+          observer_registration.unregister
+        end
+        content_binding_observer_registrations.clear
       end
       
       # Subclasses can override with their own selector
@@ -604,16 +608,20 @@ module Glimmer
       
       def handle_observation_request(keyword, original_event_listener)
         if rendered?
-          listener = ListenerProxy.new(
-            element: self,
-            selector: selector,
-            dom_element: dom_element,
-            event_attribute: keyword,
-            original_event_listener: original_event_listener,
-          )
-          listener.register
-          listeners_for(keyword) << listener
-          listener
+          if keyword.start_with?('on_') && !['on_render', 'on_remove'].include?(keyword.to_s)
+            (ancestor_component || component)&.handle_observation_request(keyword, original_event_listener)
+          else
+            listener = ListenerProxy.new(
+              element: self,
+              selector: selector,
+              dom_element: dom_element,
+              event_attribute: keyword,
+              original_event_listener: original_event_listener,
+            )
+            listener.register
+            listeners_for(keyword) << listener
+            listener
+          end
         else
           enqueue_post_render_method_call('handle_observation_request', keyword, original_event_listener)
         end
@@ -691,10 +699,14 @@ module Glimmer
         end
         model_binding_observer = Glimmer::DataBinding::ModelBinding.new(*binding_args)
         content_binding_observer = Glimmer::DataBinding::Observer.proc(&content_binding_work)
-        content_binding_observer.observe(model_binding_observer)
+        content_binding_observer_registrations << content_binding_observer.observe(model_binding_observer)
         content_binding_work.call # TODO inspect if we need to pass args here (from observed attributes) [but it's simpler not to pass anything at first]
       end
       
+      def content_binding_observer_registrations
+        @content_binding_observer_registrations ||= []
+      end
+      
       def respond_to_missing?(method_name, include_private = false)
         # TODO consider doing more correct checking of availability of properties/methods using native ticks
         property_name = property_name_for(method_name)

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

@@ -21,198 +21,162 @@
 
 require 'glimmer-dsl-web'
 
-Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
-  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"
-  }
-  
-  def state_code
-    STATES.invert[state]
-  end
+unless Object.const_defined?(:Address)
+  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, :billing_and_shipping, keyword_init: true) do
+    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"
+    }
+    
+    def state_code
+      STATES.invert[state]
+    end
+    
+    def state_code=(value)
+      self.state = STATES[value]
+    end
   
-  def state_code=(value)
-    self.state = STATES[value]
-  end
-
-  def summary
-    to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    def summary
+      string_attributes = to_h.except(:billing_and_shipping)
+      summary = string_attributes.values.map(&:to_s).reject(&:empty?).join(', ')
+      summary += " (Billing & Shipping)" if billing_and_shipping
+      summary
+    end
   end
 end
 
-# AddressForm Glimmer Web Component (View component)
-#
-# Including Glimmer::Web::Component makes this class a View component and automatically
-# generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
-# of the name of the class. AddressForm generates address_form keyword, which can be used
-# elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
-class AddressForm
-  include Glimmer::Web::Component
-  
-  option :address
-  
-  # Optionally, you can execute code before rendering markup.
-  # This is useful for pre-setup of variables (e.g. Models) that you would use in the markup.
+unless Object.const_defined?(:AddressForm)
+  # AddressForm Glimmer Web Component (View component)
   #
-  # before_render do
-  # end
-  
-  # Optionally, you can execute code after rendering markup.
-  # This is useful for post-setup of extra Model listeners that would interact with the
-  # markup elements and expect them to be rendered already.
-  #
-  # after_render do
-  # end
+  # Including Glimmer::Web::Component makes this class a View component and automatically
+  # generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
+  # of the name of the class. AddressForm generates address_form keyword, which can be used
+  # elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
+  class AddressForm
+    include Glimmer::Web::Component
+    
+    option :address
+    
+    # Optionally, you can execute code before rendering markup.
+    # This is useful for pre-setup of variables (e.g. Models) that you would use in the markup.
+    #
+    # before_render do
+    # end
+    
+    # Optionally, you can execute code after rendering markup.
+    # This is useful for post-setup of extra Model listeners that would interact with the
+    # markup elements and expect them to be rendered already.
+    #
+    # after_render do
+    # end
+    
+    # markup block provides the content of the
+    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]
+          }
+          
+          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') {
+            Address::STATES.each do |state_code, state|
+              option(value: state_code) { state }
+            end
   
-  # markup block provides the content of the
-  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]
-        }
-        
-        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]
+            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 {
+            r("#{address_div.selector} *") {
+              margin '5px'
+            }
+            r("#{address_div.selector} input, #{address_div.selector} select") {
+              grid_column '2'
+            }
+          }
         }
         
-        label('City: ', for: 'city-field')
-        input(id: 'city-field') {
-          value <=> [address, :city]
+        div(style: 'margin: 5px') {
+          inner_text <= [address, :summary,
+                          computed_by: address.members + ['state_code'],
+                        ]
         }
-        
-        label('State: ', for: 'state-field')
-        select(id: 'state-field') {
-          Address::STATES.each do |state_code, state|
-            option(value: state_code) { state }
-          end
+      }
+    }
+  end
+end
 
-          value <=> [address, :state_code]
-        }
+unless Object.const_defined?(:AddressPage)
+  # AddressPage Glimmer Web Component (View component)
+  #
+  # This View component represents the main page being rendered,
+  # as done by its `render` class method below
+  class AddressPage
+    include Glimmer::Web::Component
+    
+    before_render do
+      @shipping_address = Address.new(
+        full_name: 'Johnny Doe',
+        street: '3922 Park Ave',
+        street2: 'PO BOX 8382',
+        city: 'San Diego',
+        state: 'California',
+        zip_code: '91913',
+      )
+      @billing_address = Address.new(
+        full_name: 'John C Doe',
+        street: '123 Main St',
+        street2: 'Apartment 3C',
+        city: 'San Diego',
+        state: 'California',
+        zip_code: '91911',
+      )
+    end
+    
+    markup {
+      div {
+        h1('Shipping Address')
         
-        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,
-                    ]
-        }
+        address_form(address: @shipping_address)
         
-        style {
-          r("#{address_div.selector} *") {
-            margin '5px'
-          }
-          r("#{address_div.selector} input, #{address_div.selector} select") {
-            grid_column '2'
-          }
-        }
-      }
-      
-      div(style: 'margin: 5px') {
-        inner_text <= [address, :summary,
-                        computed_by: address.members + ['state_code'],
-                      ]
+        h1('Billing Address')
+        
+        address_form(address: @billing_address)
       }
     }
-  }
-end
-
-# AddressPage Glimmer Web Component (View component)
-#
-# This View component represents the main page being rendered,
-# as done by its `render` class method below
-class AddressPage
-  include Glimmer::Web::Component
-  
-  before_render do
-    @shipping_address = Address.new(
-      full_name: 'Johnny Doe',
-      street: '3922 Park Ave',
-      street2: 'PO BOX 8382',
-      city: 'San Diego',
-      state: 'California',
-      zip_code: '91913',
-    )
-    @billing_address = Address.new(
-      full_name: 'John C Doe',
-      street: '123 Main St',
-      street2: 'Apartment 3C',
-      city: 'San Diego',
-      state: 'California',
-      zip_code: '91911',
-    )
   end
-  
-  markup {
-    div {
-      h1('Shipping Address')
-      
-      address_form(address: @shipping_address)
-      
-      h1('Billing Address')
-      
-      address_form(address: @billing_address)
-    }
-  }
 end
 
 Document.ready? do

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

@@ -22,63 +22,18 @@
 require 'glimmer-dsl-web'
 
 unless Object.const_defined?(:Address)
-  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
+  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, :billing_and_shipping, keyword_init: true) do
     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"
+      "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"
     }
     
     def state_code
@@ -90,7 +45,10 @@ unless Object.const_defined?(:Address)
     end
   
     def summary
-      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+      string_attributes = to_h.except(:billing_and_shipping)
+      summary = string_attributes.values.map(&:to_s).reject(&:empty?).join(', ')
+      summary += " (Billing & Shipping)" if billing_and_shipping
+      summary
     end
   end
 end
@@ -306,6 +264,8 @@ unless Object.const_defined?(:HelloComponentListeners)
   #
   # This View component represents the main page being rendered,
   # as done by its `render` class method below
+  #
+  # Note: check out HelloComponentListenersDefaultSlot for a simpler version that leverages the default slot feature
   class HelloComponentListeners
     class Presenter
       attr_accessor :status_message
@@ -386,5 +346,6 @@ end
 
 Document.ready? do
   # renders a top-level (root) HelloComponentListeners component
+  # Note: check out hello_component_listeners_default_slot.rb for a simpler version that leverages the default slot feature
   HelloComponentListeners.render
 end