glimmer-dsl-web 0.5.0 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 702f2aed3db1d4fcb6fbda9e794a756a3cdb44dfa47db714bbd350a5dd5e1d81
-  data.tar.gz: 5c6b8c276bc246c023cb9419744bceea8021450943cf7e2da2dfb0f86cbb4b3c
+  metadata.gz: ff9463575ae6b368ccbde387628ed3267109d92ca7239eb893647b24d80fddd7
+  data.tar.gz: 6896f526bef25233083ad18e5fb2a8c668e2c88dfd91fe671de2bc3ad9e6d45e
 SHA512:
-  metadata.gz: 5e3dbff73a4ebb082523dbcf76facc65d27a93e69e2873c08f02bd5939b34a1e9292eadd7698963d5eb53cfa164fbf7b2b14a100213c5d0f3d8d5566d6dc08cd
-  data.tar.gz: dfcc0d083636b8d0943b1ff78215c73651bfe768b970ac9cf81852a9e29ab54bf18f94d49483dc4753154c5497cbeb0f99acfbf91d684eebb97d533be19ccb30
+  metadata.gz: 204c573bae64566e947914a8862360eff803bd1be3b9f67a671c5053cf65cb07a880c0f176650db757ed9bb720cd9afeb4a1954eed865c9faa34e8540b21d4d0
+  data.tar.gz: ec311e00c136cbdce076b798735c02118f2c3459d8a3af929093325e70b3c5fbec8696868a02046cab9154e7745bb3356a77d83b05876a03517c82293c751693

data/CHANGELOG.md

@@ -1,8 +1,21 @@
 # Change Log
 
+## 0.6.1
+
+- Hello, Component Listeners! Sample: `require 'glimmer-dsl-web/samples/hello/hello_component_listeners'`
+- Upgrade to glimmer-dsl-css 1.5.2 to fix issue with `%` Number operator and support `rem`, `Q`, `pt`, `pc`, `ch`, `ex`, `vh`, `vw`, `vmin`, `vmax` Number methods
+- Refactor Todo MVC sample
+- Fix issue with components that have no events declared when nesting slot content within them
+
+## 0.6.0
+
+- Support Component Custom Event Listeners (declare inside Component with `event :eventname` or `events :event1, :event2, ...` and then listen inside consumer code by adding `on_customeventname do; ...; end` listener inside content block of a consumed Glimmer Web Component)
+- Using latest opal-sprockets 1.0.4 will fix an issue with Opal compilation breaking whenever upgrading Opal gems in a Rails project and trying to restart server and render a webpage locally.
+
 ## 0.5.0
 
-- Support Glimmer Web Component Slots (by adding `slot: :slot_name` to any parent element, like a `div`, inside a `Glimmer::Web::Component` `markup {...}` element)
+- Support Glimmer Web Component Slots (by adding `slot: :slot_name` to any parent element, like a `div`, inside a `Glimmer::Web::Component` `markup {...}` element, and later having a consumer open a `slot_name {...}` block inside the content block of a consumed component)
+- Hello, Component Slots! Sample: `require 'glimmer-dsl-web/samples/hello/hello_component_slots'`
 
 ## 0.4.4
 

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.5.0 (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.6.1 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
@@ -12,7 +12,7 @@
 
 You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. Also, with Frontend Ruby, companies can cut their hiring budget in half by having Backend Ruby Software Engineers do Frontend Development in Ruby! [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every smart highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development.
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage) (including full support for [SVG](#hello-svg)), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component) and [Slots](#hello-component-slots). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage) (including full support for [SVG](#hello-svg)), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component), [Component Slots](#hello-component-slots), and [Component Custom Event Listeners](#hello-component-listeners). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based drop-in replacement for your existing JavaScript Frontend library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make HTTP/Ajax requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb).
 
@@ -1344,6 +1344,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Content Data-Binding!](#hello-content-data-binding)
       - [Hello, Component!](#hello-compoent)
       - [Hello, Component Slots!](#hello-component-slots)
+      - [Hello, Component Listeners!](#hello-compoent-listeners)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Style!](#hello-style)
@@ -1400,7 +1401,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.5.0'
+gem 'glimmer-dsl-web', '~> 0.6.1'
 ```
 
 Run:
@@ -1629,7 +1630,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.5.0'
+gem 'glimmer-dsl-web', '~> 0.6.1'
 ```
 
 Run:
@@ -3059,7 +3060,7 @@ class HelloComponentSlots
           h1('Shipping Address')
           legend('This is the address that is used for shipping your purchase.', style: {margin_bottom: 10})
         }
-        address_footer { # contribute elements to the address_header component slot
+        address_footer { # contribute elements to the address_footer component slot
           p(sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}"))
         }
       }
@@ -3069,7 +3070,7 @@ class HelloComponentSlots
           h1('Billing Address')
           legend('This is the address that is used for your billing method (e.g. credit card).', style: {margin_bottom: 10})
         }
-        address_footer { # contribute elements to the address_header component slot
+        address_footer { # contribute elements to the address_footer component slot
           p(sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}"))
         }
       }
@@ -3087,6 +3088,393 @@ Screenshot:
 
 ![Hello, Component Slots!](/images/glimmer-dsl-web-samples-hello-hello-component-slots.png)
 
+#### Hello, Component Listeners!
+
+Component listeners enable consumers of components to listen to any custom events generated by components. Component supported events are declared with class method invocations `events :eventname1, :eventname2, ...` or `event :eventname`. Consumers can listen to those events by simply nesting `on_eventname do; ... end` matching the name of the declared event inside the component.
+
+For example, an `AccordionSection` component might generate events `:expanded` and `:collapsed` when a user clicks on the section title to expand it or collapse it. Consumers can then use `on_expanded` and `on_collapsed` to listen to those events.
+
+[lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb](/lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb)
+
+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
+  
+    def summary
+      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    end
+  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
+  
+            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'
+            }
+          }
+        }
+        
+        div(style: {margin: 5}) {
+          inner_text <= [address, :summary,
+                          computed_by: address.members + ['state_code'],
+                        ]
+        }
+      }
+    }
+  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
+          end
+        }
+        
+        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 '"►"'
+      }
+      
+      r("#{component_element_selector}.collapsed .accordion-section-content") {
+        height 0
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:Accordion)
+  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
+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!"
+      end
+    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)
+            }
+          }
+          
+          accordion_section(title: 'Billing Address') {
+            section_content {
+              address_form(address: @billing_address)
+            }
+          }
+          
+          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
+  # renders a top-level (root) HelloComponentListeners component
+  HelloComponentListeners.render
+end
+```
+
+Screenshot:
+
+![Hello, Component Listeners!](/images/glimmer-dsl-web-samples-hello-hello-component-listeners.gif)
+
+
 #### Hello, glimmer_component Rails Helper!
 
 You may insert a Glimmer component anywhere into a Rails View using
@@ -3389,7 +3777,9 @@ Screenshot:
 
 Every Glimmer Web Component can have a `style {}` block that contains CSS styles common to all instances of that element. That block is evaluated against the component class as such.
 
-Also, within every element, you can add `style(:property) <= [model, attribute]` element inline style data-binding statements to dynamically alter a CSS style property based on some changes to a model attribute.
+Also, within every element, you can add `style(:some_property) <= [model, attribute]` element inline-style data-binding statements to dynamically alter a CSS style property based on some changes to a model attribute.
+
+And, within every element, you can add `class_name(:some_css_class) <= [model, attribute]` element class-inclusion data-binding statements to dynamically alter the inclusion of a CSS class based on some changes to a model attribute.
 
 [lib/glimmer-dsl-web/samples/hello/hello_style.rb](/lib/glimmer-dsl-web/samples/hello/hello_style.rb)
 
@@ -3463,9 +3853,9 @@ class StyledButton
       class_name(:pushed) <= [button_model, :pushed]
       class_name(:pulled) <= [button_model, :pushed, on_read: :!]
       
-      style(:width) <= [button_model, :width, on_read: :px]
-      style(:height) <= [button_model, :height, on_read: :px]
-      style(:font_size) <= [button_model, :font_size, on_read: :px]
+      style(:width) <= [button_model, :width]
+      style(:height) <= [button_model, :height]
+      style(:font_size) <= [button_model, :font_size]
       style(:background_color) <= [button_model, :background_color]
       style(:border_color) <= [button_model, :border_color, computed_by: :background_color]
       

data/VERSION

@@ -1 +1 @@
-0.5.0
+0.6.1

data/glimmer-dsl-web.gemspec

@@ -2,17 +2,17 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.5.0 ruby lib
+# stub: glimmer-dsl-web 0.6.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.5.0"
+  s.version = "0.6.1"
 
   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-08-03"
-  s.description = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) enables building Web Frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. It provides a Ruby HTML DSL, which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. Modular design is supported with Glimmer Web Components and Slots. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample app (there is a very minimal Standalone [No Rails] sample app too). You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal Ruby.".freeze
+  s.date = "2024-09-02"
+  s.description = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) enables building Web Frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. It provides a Ruby HTML DSL, which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. Modular design is supported with Glimmer Web Components, Component Slots, and Component Custom Event Listeners. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample app (there is a very minimal Standalone [No Rails] sample app too). You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
     "CHANGELOG.md",
@@ -33,6 +33,7 @@ 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_listeners.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb",
@@ -102,7 +103,7 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.8.0"])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0"])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.1"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.2"])
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2"])
   s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3"])
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1"])

data/lib/glimmer/web/component.rb

@@ -89,6 +89,21 @@ module Glimmer
           @after_render = block
         end
         
+        def event(event_name)
+          @events ||= []
+          event_name = event_name.to_sym
+          @events << event_name unless @events.include?(event_name)
+        end
+        
+        def events(*event_names)
+          @events ||= []
+          if event_names.empty?
+            @events
+          else
+            event_names.each { |event| event(event) }
+          end
+        end
+        
         def keyword
           self.name.underscore.gsub('::', '__')
         end
@@ -255,7 +270,7 @@ module Glimmer
       end
       # <- end of class methods
       
-      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements
+      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements, :events
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
@@ -272,6 +287,7 @@ module Glimmer
         @args = args
         options ||= {}
         @options = self.class.options.merge(options)
+        @events = self.class.instance_variable_get("@events") || []
         @content = Util::ProcTracker.new(content) if content
 #         @style_blocks = {} # TODO enable when doing bulk head rendering in the future
         execute_hooks('before_render')
@@ -317,32 +333,84 @@ module Glimmer
       def can_handle_observation_request?(observation_request)
         observation_request = observation_request.to_s
         result = false
-        if observation_request.start_with?('on_updated_')
-          property = observation_request.sub(/^on_updated_/, '')
+        if observation_request.start_with?('on_update_') # TODO change to on_someprop_update & document this feature
+          property = observation_request.sub(/^on_update_/, '')
           result = can_add_observer?(property)
+        elsif observation_request.start_with?('on_')
+          event = observation_request.sub(/^on_/, '')
+          result = can_add_observer?(event)
         end
-        result || markup_root&.can_handle_observation_request?(observation_request)
+        result || @markup_root&.can_handle_observation_request?(observation_request)
       end
 
       def handle_observation_request(observation_request, block)
         observation_request = observation_request.to_s
-        if observation_request.start_with?('on_updated_')
-          property = observation_request.sub(/^on_updated_/, '') # TODO look into eliminating duplication from above
+        if observation_request.start_with?('on_update_')
+          property = observation_request.sub(/^on_update_/, '') # TODO look into eliminating duplication from above
           add_observer(DataBinding::Observer.proc(&block), property) if can_add_observer?(property)
+        elsif observation_request.start_with?('on_')
+          event = observation_request.sub(/^on_/, '') # TODO look into eliminating duplication from above
+          add_observer(DataBinding::Observer.proc(&block), event) if can_add_observer?(event)
         else
-          markup_root.handle_observation_request(observation_request, block)
+          @markup_root.handle_observation_request(observation_request, block)
         end
       end
 
-      def can_add_observer?(attribute_name)
-        has_instance_method?(attribute_name) || has_instance_method?("#{attribute_name}?") || @markup_root.can_add_observer?(attribute_name)
+      def can_add_observer?(attribute_or_event)
+        can_add_attribute_observer?(attribute_or_event) ||
+          can_add_custom_event_listener?(attribute_or_event)
       end
 
-      def add_observer(observer, attribute_name)
-        if has_instance_method?(attribute_name)
-          super(observer, attribute_name)
+      def can_add_attribute_observer?(attribute_name)
+        has_instance_method?(attribute_name) || has_instance_method?("#{attribute_name}?")
+      end
+
+      def can_add_custom_event_listener?(event)
+        events.include?(event.to_sym)
+      end
+
+      def add_observer(observer, attribute_or_event)
+        if can_add_attribute_observer?(attribute_or_event)
+          super(observer, attribute_or_event)
+        elsif can_add_custom_event_listener?(attribute_or_event)
+          add_custom_event_listener(observer, attribute_or_event)
+        end
+      end
+      
+      def custom_event_listeners_for(event)
+        event = event.to_sym
+        @custom_event_listeners ||= {}
+        @custom_event_listeners[event] ||= []
+      end
+      
+      def add_custom_event_listener(observer, event)
+        custom_event_listeners_for(event) << observer
+      end
+      
+      def remove_observer(observer, attribute_or_event, options = {})
+        if can_add_attribute_observer?(attribute_or_event)
+          super(observer, attribute_or_event)
+        elsif can_add_custom_event_listener?(attribute_or_event)
+          remove_custom_event_listener(observer, attribute_or_event)
+        end
+      end
+      
+      def remove_custom_event_listener(observer, event)
+        event = event.to_sym
+        custom_event_listeners_for(event).delete(observer) if custom_event_listeners_for(event).include?(observer)
+      end
+      
+      def notify_listeners(event, *args)
+        if can_add_custom_event_listener?(event)
+          notify_custom_event_listeners(event, *args)
         else
-          @markup_root.add_observer(observer, attribute_name)
+          @markup_root&.notify_listeners(event)
+        end
+      end
+      
+      def notify_custom_event_listeners(event, *args)
+        custom_event_listeners_for(event).each do |listener|
+          listener.call(*args)
         end
       end
 

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

@@ -126,7 +126,7 @@ class AddressForm
           value <=> [address, :full_name]
         }
         
-        @somelabel = label('Street: ', for: 'street-field')
+        label('Street: ', for: 'street-field')
         input(id: 'street-field') {
           value <=> [address, :street]
         }

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

@@ -0,0 +1,390 @@
+# 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?(: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
+  
+    def summary
+      to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    end
+  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
+  
+            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'
+            }
+          }
+        }
+        
+        div(style: {margin: 5}) {
+          inner_text <= [address, :summary,
+                          computed_by: address.members + ['state_code'],
+                        ]
+        }
+      }
+    }
+  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
+          end
+        }
+        
+        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 '"►"'
+      }
+      
+      r("#{component_element_selector}.collapsed .accordion-section-content") {
+        height 0
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:Accordion)
+  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
+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!"
+      end
+    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)
+            }
+          }
+          
+          accordion_section(title: 'Billing Address') {
+            section_content {
+              address_form(address: @billing_address)
+            }
+          }
+          
+          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
+  # renders a top-level (root) HelloComponentListeners component
+  HelloComponentListeners.render
+end

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

@@ -97,9 +97,9 @@ 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
+# of the name of the class. AddressForm generates address_form_with_slots keyword, which can be used
 # elsewhere in Glimmer HTML DSL code as done inside HelloComponentSlots below.
-class AddressForm
+class AddressFormWithSlots
   include Glimmer::Web::Component
   
   option :address
@@ -149,7 +149,7 @@ class AddressForm
         }
       }
       
-      div(style: 'margin: 5px') {
+      div(style: {margin: 5}) {
         inner_text <= [address, :summary,
                         computed_by: address.members + ['state_code'],
                       ]
@@ -199,22 +199,22 @@ class HelloComponentSlots
   
   markup {
     div {
-      address_form(address: @shipping_address) {
+      address_form_with_slots(address: @shipping_address) {
         address_header { # contribute elements to the address_header component slot
           h1('Shipping Address')
           legend('This is the address that is used for shipping your purchase.', style: {margin_bottom: 10})
         }
-        address_footer { # contribute elements to the address_header component slot
+        address_footer { # contribute elements to the address_footer component slot
           p(sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}"))
         }
       }
       
-      address_form(address: @billing_address) {
+      address_form_with_slots(address: @billing_address) {
         address_header { # contribute elements to the address_header component slot
           h1('Billing Address')
           legend('This is the address that is used for your billing method (e.g. credit card).', style: {margin_bottom: 10})
         }
-        address_footer { # contribute elements to the address_header component slot
+        address_footer { # contribute elements to the address_footer component slot
           p(sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}"))
         }
       }

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

@@ -86,9 +86,9 @@ class StyledButton
       class_name(:pushed) <= [button_model, :pushed]
       class_name(:pulled) <= [button_model, :pushed, on_read: :!]
       
-      style(:width) <= [button_model, :width, on_read: :px]
-      style(:height) <= [button_model, :height, on_read: :px]
-      style(:font_size) <= [button_model, :font_size, on_read: :px]
+      style(:width) <= [button_model, :width]
+      style(:height) <= [button_model, :height]
+      style(:font_size) <= [button_model, :font_size]
       style(:background_color) <= [button_model, :background_color]
       style(:border_color) <= [button_model, :border_color, computed_by: :background_color]
       

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_form.rb

@@ -24,7 +24,7 @@ class NewTodoForm
       _moz_text_rendering :optimizeLegibility
       text_rendering :optimizeLegibility
       top -140
-      width '100%'
+      width 100.%
     }
   }
 end

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_input.rb

@@ -7,7 +7,7 @@ class TodoInput
       r(component_element_selector) {
         position :relative
         margin 0
-        width '100%'
+        width 100.%
         font_size 24
         font_family :inherit
         font_weight :inherit

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list.rb

@@ -46,11 +46,11 @@ class TodoList
     
     r('.toggle-all') {
       border :none
-      bottom '100%'
+      bottom 100.%
       height 1
       opacity 0
       position :absolute
-      right '100%'
+      right 100.%
       width 1
     }
           

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list_item.rb

@@ -14,8 +14,6 @@ class TodoListItem
   end
   
   markup {
-    
-    
     li {
       # Data-bind inclusion of `completed` in `li` `class` attribute unidirectionally to `todo` `completed` attribute,
       # meaning inclusion/exclusion of `completed` class happens automatically when `todo.completed` boolean value changes.
@@ -149,7 +147,7 @@ class TodoListItem
     r('.todo-list li .destroy:after') {
       content '"×"'
       display :block
-      height '100%'
+      height 100.%
       line_height '1.1'
     }
     

data/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb

@@ -19,7 +19,7 @@ class TodoMvc
   end
   
   markup {
-    div(class: 'todomvc') {
+    div {
       section(class: 'todoapp') {
         new_todo_form(presenter: @presenter)
         
@@ -50,7 +50,7 @@ class TodoMvc
       border 0
       color :inherit
       font_family :inherit
-      font_size '100%'
+      font_size 100.%
       font_weight :inherit
       vertical_align :baseline
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.1
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-03 00:00:00.000000000 Z
+date: 2024-09-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.5.1
+        version: 1.5.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.5.1
+        version: 1.5.2
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -240,12 +240,12 @@ description: Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) en
   both structure code and logic code in one language. It supports both Unidirectional
   (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using
   <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via
-  Content Data-Binding. Modular design is supported with Glimmer Web Components and
-  Slots. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many
-  samples are demonstrated in the Rails sample app (there is a very minimal Standalone
-  [No Rails] sample app too). You can finally live in pure Rubyland on the Web in
-  both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal
-  Ruby.
+  Content Data-Binding. Modular design is supported with Glimmer Web Components, Component
+  Slots, and Component Custom Event Listeners. And, a Ruby CSS DSL is supported with
+  the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample
+  app (there is a very minimal Standalone [No Rails] sample app too). You can finally
+  live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL
+  for Web! This gem relies on Opal Ruby.
 email: andy.am@gmail.com
 executables: []
 extensions: []
@@ -267,6 +267,7 @@ 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_listeners.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb
 - lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb