glimmer-dsl-web 0.7.1 → 0.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f37d0d4bbc970ce93dc9ded190d19402fae86911c26c6941a45f0da3fa6d2a9
-  data.tar.gz: 2a4dd7e2b7a6e5035b513201e0c341c46e4c8604479d161d0bfbe6d2e9a6abbe
+  metadata.gz: 6cdfd633318946532548053f4ab89f31e423280ae73ba9505b598b0e60695680
+  data.tar.gz: e95ac60a8077a1157abaf6da13cf0f7adab1f3f72fb727bb9cf270ae373cab2e
 SHA512:
-  metadata.gz: 067b48f703219cda26d1cbbce6e4b2179216f6b6b9a5354786adfb04e4341a34100b9254d9849f2ad9d742fe1180d083d8f8ebc4a3945fc182f603dbabc9a952
-  data.tar.gz: c4b8a62396faa659bc001e854e1d8219f27771d85b561b93d64831c574b42129c0c5c87fec47fae1913b19f2ddeffb4288b54d8ec2e9e009b8377de05406638f
+  metadata.gz: c77c3cc7a2eabae100de6dd48e5797f8ce28774c4da17e6324bfe61fd8ece5d3e7b811538eabef1989f31de589e2ce64a1bbf122998c963158e844f33ca73987
+  data.tar.gz: a9f1a3ca8a39beae60602248b395621cadf2ae15362be300ff34f2d1d7d9c1464dcdab0614f31838388ae7a3e556abf0437f372642566827bd2ec72ba831934d

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.7.3
+
+- Hello, Component Attribute Data-Binding! Sample: `require 'glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb'`
+
+## 0.7.2
+
+- Hello, Component Attribute Listeners! Sample: `require 'glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb'`
+
 ## 0.7.1
 
 - Fix issue with not being able to pass arguments containing apostrophe (') to glimmer_component helper (provided by GlimmerHelper)

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.7.1 (Beta)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.7.3 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### The "Rails" of Frontend Frameworks!!! ([Fukuoka Award Winning](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))
 #### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
@@ -1348,10 +1348,12 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Observer (Data-Binding)!](#hello-observer)
       - [Hello, Data-Binding!](#hello-data-binding)
       - [Hello, Content Data-Binding!](#hello-content-data-binding)
-      - [Hello, Component!](#hello-compoent)
+      - [Hello, Component!](#hello-component)
       - [Hello, Component Slots!](#hello-component-slots)
-      - [Hello, Component Listeners!](#hello-compoent-listeners)
-      - [Hello, Component Listeners (Default Slot)!](#hello-compoent-listeners-default-slot)
+      - [Hello, Component Listeners!](#hello-component-listeners)
+      - [Hello, Component Listeners (Default Slot)!](#hello-component-listeners-default-slot)
+      - [Hello, Component Attribute Listeners!](#hello-component-attribute-listeners)
+      - [Hello, Component Attribute Data-Binding!](#hello-component-attribute-data-binding)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Style!](#hello-style)
@@ -1389,7 +1391,7 @@ Once done, read [Usage](#usage) instructions. Note that for serious app usage, i
 
 ### Rails 8
 
-Rails 8 instructions are not ready yet though they would rely on the `opal --watch` command in the Development environment to generate JavaScript files in the directory that propshaft is setup with, and Rails 8 would rely on the `opal` command to generate JavaScript files for the Production environment. 
+Rails 8 instructions are not ready yet though they would rely on the `opal --watch` command in the Development environment to generate JavaScript files in the directory that propshaft is setup with, and Rails 8 would rely on the `opal` command to generate JavaScript files for the Production environment.
 
 Instructions will be added in the future.
 
@@ -1416,7 +1418,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.7.1'
+gem 'glimmer-dsl-web', '~> 0.7.3'
 ```
 
 Run:
@@ -2994,367 +2996,357 @@ Glimmer HTML DSL Ruby code in the frontend:
 ```ruby
 require 'glimmer-dsl-web'
 
-unless Object.const_defined?(:Address)
-  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
-    
-    def state_code=(value)
-      self.state = STATES[value]
-    end
+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 summary
-      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
-    end
+  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
 
-unless Object.const_defined?(:AddressForm)
-  # 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 HelloComponentListeners below.
-  class AddressForm
-    include Glimmer::Web::Component
-    
-    option :address
-    
-    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
+# 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 HelloComponentListeners below.
+class AddressForm
+  include Glimmer::Web::Component
   
-            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'
-            }
-          }
+  option :address
+  
+  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]
         }
         
-        div(style: {margin: 5}) {
-          inner_text <= [address, :summary,
-                          computed_by: address.members + ['state_code'],
-                        ]
+        label('Street: ', for: 'street-field')
+        input(id: 'street-field') {
+          value <=> [address, :street]
         }
-      }
-    }
-  end
-end
-
-unless Object.const_defined?(:AccordionSection)
-  class AccordionSection
-    class Presenter
-      attr_accessor :collapsed, :instant_transition
-      
-      def toggle_collapsed(instant: false)
-        self.instant_transition = instant
-        self.collapsed = !collapsed
-      end
-      
-      def expand(instant: false)
-        self.instant_transition = instant
-        self.collapsed = false
-      end
-      
-      def collapse(instant: false)
-        self.instant_transition = instant
-        self.collapsed = true
-      end
-    end
-    
-    include Glimmer::Web::Component
-    
-    events :expanded, :collapsed
-    
-    option :title
-    
-    attr_reader :presenter
-    
-    before_render do
-      @presenter = Presenter.new
-    end
-    
-    markup {
-      section {
-        # Unidirectionally data-bind the class inclusion of 'collapsed' to the @presenter.collapsed boolean attribute,
-        # meaning if @presenter.collapsed changes to true, the CSS class 'collapsed' is included on the element,
-        # and if it changes to false, the CSS class 'collapsed' is removed from the element.
-        class_name(:collapsed) <= [@presenter, :collapsed]
-        class_name(:instant_transition) <= [@presenter, :instant_transition]
-      
-        header(title, class: 'accordion-section-title') {
-          onclick do |event|
-            @presenter.toggle_collapsed
-            if @presenter.collapsed
-              notify_listeners(:collapsed)
-            else
-              notify_listeners(:expanded)
-            end
+        
+        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
+
+          value <=> [address, :state_code]
         }
         
-        div(slot: :section_content, class: 'accordion-section-content')
-      }
-    }
-    
-    style {
-      r('.accordion-section-title') {
-        font_size 2.em
-        font_weight :bold
-        cursor :pointer
-        padding_left 20
-        position :relative
-        margin_block_start 0.33.em
-        margin_block_end 0.33.em
-      }
-      
-      r('.accordion-section-title::before') {
-        content '"▼"'
-        position :absolute
-        font_size 0.5.em
-        top 10
-        left 0
-      }
-      
-      r('.accordion-section-content') {
-        height 246
-        overflow :hidden
-        transition 'height 0.5s linear'
-      }
-      
-      r("#{component_element_selector}.instant_transition .accordion-section-content") {
-        transition 'initial'
-      }
-      
-      r("#{component_element_selector}.collapsed .accordion-section-title::before") {
-        content '"►"'
+        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'
+          }
+        }
       }
       
-      r("#{component_element_selector}.collapsed .accordion-section-content") {
-        height 0
+      div(style: {margin: 5}) {
+        inner_text <= [address, :summary,
+                        computed_by: address.members + ['state_code'],
+                      ]
       }
     }
-  end
+  }
 end
 
-unless Object.const_defined?(:Accordion)
-  class Accordion
-    include Glimmer::Web::Component
+class AccordionSection
+  class Presenter
+    attr_accessor :collapsed, :instant_transition
     
-    events :accordion_section_expanded, :accordion_section_collapsed
+    def toggle_collapsed(instant: false)
+      self.instant_transition = instant
+      self.collapsed = !collapsed
+    end
     
-    markup {
-      # given that no slots are specified, nesting content under the accordion component
-      # in consumer code adds content directly inside the markup root div.
-      div { |accordion|
-        # on render, all accordion sections would have been added by consumers already, so we can
-        # attach listeners to all of them by re-opening their content with `.content { ... }` block
-        on_render do
-          accordion_section_elements = accordion.children
-          accordion_sections = accordion_section_elements.map(&:component)
-          accordion_sections.each_with_index do |accordion_section, index|
-            accordion_section_number = index + 1
+    def expand(instant: false)
+      self.instant_transition = instant
+      self.collapsed = false
+    end
+    
+    def collapse(instant: false)
+      self.instant_transition = instant
+      self.collapsed = true
+    end
+  end
+  
+  include Glimmer::Web::Component
+  
+  events :expanded, :collapsed
   
-            # ensure only the first section is expanded
-            accordion_section.presenter.collapse(instant: true) if accordion_section_number != 1
+  option :title
   
-            accordion_section.content {
-              on_expanded do
-                other_accordion_sections = accordion_sections.reject {|other_accordion_section| other_accordion_section == accordion_section }
-                other_accordion_sections.each { |other_accordion_section| other_accordion_section.presenter.collapse }
-                notify_listeners(:accordion_section_expanded, accordion_section_number)
-              end
+  attr_reader :presenter
   
-              on_collapsed do
-                notify_listeners(:accordion_section_collapsed, accordion_section_number)
-              end
-            }
+  before_render do
+    @presenter = Presenter.new
+  end
+  
+  markup {
+    section {
+      # Unidirectionally data-bind the class inclusion of 'collapsed' to the @presenter.collapsed boolean attribute,
+      # meaning if @presenter.collapsed changes to true, the CSS class 'collapsed' is included on the element,
+      # and if it changes to false, the CSS class 'collapsed' is removed from the element.
+      class_name(:collapsed) <= [@presenter, :collapsed]
+      class_name(:instant_transition) <= [@presenter, :instant_transition]
+    
+      header(title, class: 'accordion-section-title') {
+        onclick do |event|
+          @presenter.toggle_collapsed
+          if @presenter.collapsed
+            notify_listeners(:collapsed)
+          else
+            notify_listeners(:expanded)
           end
         end
       }
+      
+      div(slot: :section_content, class: 'accordion-section-content')
     }
-  end
+  }
+  
+  style {
+    r('.accordion-section-title') {
+      font_size 2.em
+      font_weight :bold
+      cursor :pointer
+      padding_left 20
+      position :relative
+      margin_block_start 0.33.em
+      margin_block_end 0.33.em
+    }
+    
+    r('.accordion-section-title::before') {
+      content '"▼"'
+      position :absolute
+      font_size 0.5.em
+      top 10
+      left 0
+    }
+    
+    r('.accordion-section-content') {
+      height 246
+      overflow :hidden
+      transition 'height 0.5s linear'
+    }
+    
+    r("#{component_element_selector}.instant_transition .accordion-section-content") {
+      transition 'initial'
+    }
+    
+    r("#{component_element_selector}.collapsed .accordion-section-title::before") {
+      content '"►"'
+    }
+    
+    r("#{component_element_selector}.collapsed .accordion-section-content") {
+      height 0
+    }
+  }
 end
 
-unless Object.const_defined?(:HelloComponentListeners)
-  # HelloComponentListeners Glimmer Web Component (View component)
-  #
-  # This View component represents the main page being rendered,
-  # as done by its `render` class method below
-  class HelloComponentListeners
-    class Presenter
-      attr_accessor :status_message
-      
-      def initialize
-        @status_message = "Accordion section 1 is expanded!"
+class Accordion
+  include Glimmer::Web::Component
+  
+  events :accordion_section_expanded, :accordion_section_collapsed
+  
+  markup {
+    # given that no slots are specified, nesting content under the accordion component
+    # in consumer code adds content directly inside the markup root div.
+    div { |accordion|
+      # on render, all accordion sections would have been added by consumers already, so we can
+      # attach listeners to all of them by re-opening their content with `.content { ... }` block
+      on_render do
+        accordion_section_elements = accordion.children
+        accordion_sections = accordion_section_elements.map(&:component)
+        accordion_sections.each_with_index do |accordion_section, index|
+          accordion_section_number = index + 1
+
+          # ensure only the first section is expanded
+          accordion_section.presenter.collapse(instant: true) if accordion_section_number != 1
+
+          accordion_section.content {
+            on_expanded do
+              other_accordion_sections = accordion_sections.reject {|other_accordion_section| other_accordion_section == accordion_section }
+              other_accordion_sections.each { |other_accordion_section| other_accordion_section.presenter.collapse }
+              notify_listeners(:accordion_section_expanded, accordion_section_number)
+            end
+
+            on_collapsed do
+              notify_listeners(:accordion_section_collapsed, accordion_section_number)
+            end
+          }
+        end
       end
-    end
-    
-    include Glimmer::Web::Component
+    }
+  }
+end
+
+# HelloComponentListeners Glimmer Web Component (View component)
+#
+# This View component represents the main page being rendered,
+# as done by its `render` class method below
+class HelloComponentListeners
+  class Presenter
+    attr_accessor :status_message
     
-    before_render do
-      @presenter = Presenter.new
-      @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',
-      )
-      @emergency_address = Address.new(
-        full_name: 'Mary Doe',
-        street: '2038 Ipswitch St',
-        street2: 'Suite 300',
-        city: 'San Diego',
-        state: 'California',
-        zip_code: '91912',
-      )
+    def initialize
+      @status_message = "Accordion section 1 is expanded!"
     end
-    
-    markup {
-      div {
-        h1(style: {font_style: :italic}) {
-          inner_html <= [@presenter, :status_message]
-        }
-          
-        accordion { # any content nested under component directly is added under its markup root div element
-          accordion_section(title: 'Shipping Address') {
-            section_content { # contribute elements to section_content slot declared in AccordionSection component
-              address_form(address: @shipping_address)
-            }
-          }
-          
-          accordion_section(title: 'Billing Address') {
-            section_content {
-              address_form(address: @billing_address)
-            }
-          }
-          
-          accordion_section(title: 'Emergency Address') {
-            section_content {
-              address_form(address: @emergency_address)
-            }
+  end
+  
+  include Glimmer::Web::Component
+  
+  before_render do
+    @presenter = Presenter.new
+    @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',
+    )
+    @emergency_address = Address.new(
+      full_name: 'Mary Doe',
+      street: '2038 Ipswitch St',
+      street2: 'Suite 300',
+      city: 'San Diego',
+      state: 'California',
+      zip_code: '91912',
+    )
+  end
+  
+  markup {
+    div {
+      h1(style: {font_style: :italic}) {
+        inner_html <= [@presenter, :status_message]
+      }
+        
+      accordion { # any content nested under component directly is added under its markup root div element
+        accordion_section(title: 'Shipping Address') {
+          section_content { # contribute elements to section_content slot declared in AccordionSection component
+            address_form(address: @shipping_address)
           }
-          
-          # on_accordion_section_expanded listener matches event :accordion_section_expanded declared in Accordion component
-          on_accordion_section_expanded { |accordion_section_number|
-            @presenter.status_message = "Accordion section #{accordion_section_number} is expanded!"
+        }
+        
+        accordion_section(title: 'Billing Address') {
+          section_content {
+            address_form(address: @billing_address)
           }
-          
-          on_accordion_section_collapsed { |accordion_section_number|
-            @presenter.status_message = "Accordion section #{accordion_section_number} is collapsed!"
+        }
+        
+        accordion_section(title: 'Emergency Address') {
+          section_content {
+            address_form(address: @emergency_address)
           }
         }
+        
+        # on_accordion_section_expanded listener matches event :accordion_section_expanded declared in Accordion component
+        on_accordion_section_expanded { |accordion_section_number|
+          @presenter.status_message = "Accordion section #{accordion_section_number} is expanded!"
+        }
+        
+        on_accordion_section_collapsed { |accordion_section_number|
+          @presenter.status_message = "Accordion section #{accordion_section_number} is collapsed!"
+        }
       }
     }
-  end
+  }
 end
 
 Document.ready? do
@@ -3758,6 +3750,188 @@ Screenshot:
 
 ![Hello, Component Listeners!](/images/glimmer-dsl-web-samples-hello-hello-component-listeners.gif)
 
+#### Hello, Component Attribute Listeners!
+
+[lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb](/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class AddressTypeSelector
+  include Glimmer::Web::Component
+  
+  attribute :address_types, default: []
+  attribute :selected_address_type
+  
+  before_render do
+    self.selected_address_type ||= address_types.first
+  end
+  
+  markup {
+    select { |select_element|
+      address_types.each do |address_type|
+        option(value: address_type) { address_type }
+      end
+      
+      # Bidirectionally data-bind select value to selected_address_type attribute on self (component)
+      value <=> [self, :selected_address_type]
+    }
+  }
+  
+  style {
+    r(component_element_selector) {
+      font_size 2.em
+      margin_left 5.px
+    }
+  }
+end
+
+class AddressTypeSelectorPage
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1('Address type for delivery:', style: {display: :inline})
+      
+      address_type_selector(address_types: ['Home', 'Work', 'Other']) {
+        # We can listen to the updates of any attribute/option in a Glimmer Web Component
+        # on_{attribute_name}_update do execute code when component attribute/option with attribute_name is updated
+        # This is an alternative to using Component Listeners, which require that the component explicitly calls notify_listeners,
+        # whereas Component Attribute Listeners get tracked automatically, but depend on a specific attribute
+        # The trade-off is Component Listeners provide more flexibility when needed as they are not bound to specific attributes,
+        # but often Component Attribute Listeners are good enough as a solution for certain problems.
+        on_selected_address_type_update do |address_type|
+          $$.alert("You selected the address type: #{address_type}")
+        end
+      }
+    }
+  }
+end
+
+Document.ready? do
+  AddressTypeSelectorPage.render
+end
+```
+
+Screenshot:
+
+![Hello, Component Attribute Listeners!](/images/glimmer-dsl-web-samples-hello-hello-component-attribute-listeners.png)
+
+![Hello, Component Attribute Listeners Selected Address Type!](/images/glimmer-dsl-web-samples-hello-hello-component-attribute-listeners-selected-address-type.png)
+
+![Hello, Component Attribute Listeners Selected Address Type Dialog!](/images/glimmer-dsl-web-samples-hello-hello-component-attribute-listeners-selected-address-type-dialog.png)
+
+#### Hello, Component Attribute Data-Binding!
+
+[lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb)
+
+```ruby
+require 'glimmer-dsl-web'
+
+class AddressTypePresenter
+  attr_accessor :address_types, :selected_address_type
+  
+  def initialize(address_types:, selected_address_type: nil)
+    @address_types = address_types
+    @selected_address_type = selected_address_type
+    @selected_address_type ||= address_types.first
+  end
+end
+
+class AddressTypeSelect
+  include Glimmer::Web::Component
+  
+  attribute :address_types, default: []
+  attribute :selected_address_type
+  
+  markup {
+    select { |select_element|
+      address_types.each do |address_type|
+        option(value: address_type) { address_type }
+      end
+      
+      value <=> [self, :selected_address_type]
+    }
+  }
+  
+  style {
+    r(component_element_selector) {
+      font_size 2.em
+      margin_left 5.px
+    }
+  }
+end
+
+class AddressTypeRadioGroup
+  include Glimmer::Web::Component
+  
+  attribute :address_types, default: []
+  attribute :selected_address_type
+  
+  markup {
+    div { |select_element|
+      address_types.each do |address_type|
+        input_id = "radio_address_type_#{address_type}"
+        input(id: input_id, type: 'radio', name: 'radio_address_type', value: address_type) {
+          checked <=> [self, :selected_address_type,
+                       on_read: ->(address_type_string_value) { address_type_string_value == address_type },
+                       on_write: ->(radio_input_boolean_value) { radio_input_boolean_value ? address_type : selected_address_type },
+                      ]
+        }
+        label(for: input_id) { address_type }
+      end
+    }
+  }
+  
+  style {
+    r(component_element_selector) {
+      font_size 2.em
+      margin_top 10.px
+    }
+    r("#{component_element_selector} label") {
+      margin_left 2.px
+      margin_right 10.px
+    }
+  }
+end
+
+class AddressTypeComponentAttributeDataBindingPage
+  include Glimmer::Web::Component
+  
+  before_render do
+    @presenter = AddressTypePresenter.new(address_types: ['Home', 'Work', 'Other'])
+  end
+  
+  markup {
+    div {
+      h1('Address type for delivery:')
+      
+      address_type_select(address_types: @presenter.address_types, selected_address_type: @presenter.selected_address_type) {
+        # Not only can we data-bind attributes on basic HTML elements,
+        # but we can also data-bind custom attributes on Glimmer Web Components
+        selected_address_type <=> [@presenter, :selected_address_type]
+      }
+      
+      address_type_radio_group(address_types: @presenter.address_types, selected_address_type: @presenter.selected_address_type) {
+        # Not only can we data-bind attributes on basic HTML elements,
+        # but we can also data-bind custom attributes on Glimmer Web Components
+        selected_address_type <=> [@presenter, :selected_address_type]
+      }
+    }
+  }
+end
+
+Document.ready? do
+  AddressTypeComponentAttributeDataBindingPage.render
+end
+```
+
+Screenshot:
+
+![Hello, Component Attribute Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-component-attribute-data-binding.gif)
+
 #### Hello, glimmer_component Rails Helper!
 
 You may insert a Glimmer component anywhere into a Rails View using

data/VERSION

@@ -1 +1 @@
-0.7.1
+0.7.3

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.7.1 ruby lib
+# stub: glimmer-dsl-web 0.7.3 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.7.1".freeze
+  s.version = "0.7.3".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -33,6 +33,8 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/ext/kernel.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_button.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb",

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

@@ -0,0 +1,127 @@
+# 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'
+
+unless Object.const_defined?(:AddressTypePresenter)
+  class AddressTypePresenter
+    attr_accessor :address_types, :selected_address_type
+    
+    def initialize(address_types:, selected_address_type: nil)
+      @address_types = address_types
+      @selected_address_type = selected_address_type
+      @selected_address_type ||= address_types.first
+    end
+  end
+end
+
+unless Object.const_defined?(:AddressTypeSelect)
+  class AddressTypeSelect
+    include Glimmer::Web::Component
+    
+    attribute :address_types, default: []
+    attribute :selected_address_type
+    
+    markup {
+      select { |select_element|
+        address_types.each do |address_type|
+          option(value: address_type) { address_type }
+        end
+        
+        value <=> [self, :selected_address_type]
+      }
+    }
+    
+    style {
+      r(component_element_selector) {
+        font_size 2.em
+        margin_left 5.px
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:AddressTypeRadioGroup)
+  class AddressTypeRadioGroup
+    include Glimmer::Web::Component
+    
+    attribute :address_types, default: []
+    attribute :selected_address_type
+    
+    markup {
+      div { |select_element|
+        address_types.each do |address_type|
+          input_id = "radio_address_type_#{address_type}"
+          input(id: input_id, type: 'radio', name: 'radio_address_type', value: address_type) {
+            checked <=> [self, :selected_address_type,
+                         on_read: ->(address_type_string_value) { address_type_string_value == address_type },
+                         on_write: ->(radio_input_boolean_value) { radio_input_boolean_value ? address_type : selected_address_type },
+                        ]
+          }
+          label(for: input_id) { address_type }
+        end
+      }
+    }
+    
+    style {
+      r(component_element_selector) {
+        font_size 2.em
+        margin_top 10.px
+      }
+      r("#{component_element_selector} label") {
+        margin_left 2.px
+        margin_right 10.px
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:AddressTypeComponentAttributeDataBindingPage)
+  class AddressTypeComponentAttributeDataBindingPage
+    include Glimmer::Web::Component
+    
+    before_render do
+      @presenter = AddressTypePresenter.new(address_types: ['Home', 'Work', 'Other'])
+    end
+    
+    markup {
+      div {
+        h1('Address type for delivery:')
+        
+        address_type_select(address_types: @presenter.address_types, selected_address_type: @presenter.selected_address_type) {
+          # Not only can we data-bind attributes on basic HTML elements,
+          # but we can also data-bind custom attributes on Glimmer Web Components
+          selected_address_type <=> [@presenter, :selected_address_type]
+        }
+        
+        address_type_radio_group(address_types: @presenter.address_types, selected_address_type: @presenter.selected_address_type) {
+          # Not only can we data-bind attributes on basic HTML elements,
+          # but we can also data-bind custom attributes on Glimmer Web Components
+          selected_address_type <=> [@presenter, :selected_address_type]
+        }
+      }
+    }
+  end
+end
+
+Document.ready? do
+  AddressTypeComponentAttributeDataBindingPage.render
+end

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

@@ -0,0 +1,81 @@
+# 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'
+
+unless Object.const_defined?(:AddressTypeSelector)
+  class AddressTypeSelector
+    include Glimmer::Web::Component
+    
+    attribute :address_types, default: []
+    attribute :selected_address_type
+    
+    before_render do
+      self.selected_address_type ||= address_types.first
+    end
+    
+    markup {
+      select(placeholder: 'Select an address type') { |select_element|
+        address_types.each do |address_type|
+          option(value: address_type) { address_type }
+        end
+        
+        # Bidirectionally data-bind select value to selected_address_type attribute on self (component)
+        value <=> [self, :selected_address_type]
+      }
+    }
+    
+    style {
+      r(component_element_selector) {
+        font_size 2.em
+        margin_left 5.px
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:AddressTypeSelectorPage)
+  class AddressTypeSelectorPage
+    include Glimmer::Web::Component
+    
+    markup {
+      div {
+        h1('Address type for delivery:', style: {display: :inline})
+        
+        address_type_selector(address_types: ['Home', 'Work', 'Other']) {
+          # We can listen to the updates of any attribute/option in a Glimmer Web Component
+          # on_{attribute_name}_update do execute code when component attribute/option with attribute_name is updated
+          # This is an alternative to using Component Listeners, which require that the component explicitly calls notify_listeners,
+          # whereas Component Attribute Listeners get tracked automatically, but depend on a specific attribute
+          # The trade-off is Component Listeners provide more flexibility when needed as they are not bound to specific attributes,
+          # but often Component Attribute Listeners are good enough as a solution for certain problems.
+          on_selected_address_type_update do |address_type|
+            $$.alert("You selected the address type: #{address_type}")
+          end
+        }
+      }
+    }
+  end
+end
+
+Document.ready? do
+  AddressTypeSelectorPage.render
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.3
 platform: ruby
 authors:
 - Andy Maleh
@@ -266,6 +266,8 @@ files:
 - lib/glimmer-dsl-web/ext/kernel.rb
 - lib/glimmer-dsl-web/samples/hello/hello_button.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component.rb
+- lib/glimmer-dsl-web/samples/hello/hello_component_attribute_data_binding.rb
+- lib/glimmer-dsl-web/samples/hello/hello_component_attribute_listeners.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb