glimmer-dsl-web 0.6.1 → 0.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff9463575ae6b368ccbde387628ed3267109d92ca7239eb893647b24d80fddd7
-  data.tar.gz: 6896f526bef25233083ad18e5fb2a8c668e2c88dfd91fe671de2bc3ad9e6d45e
+  metadata.gz: eecb0321e7308184ed4fb10bb9811c76a5e118cd7157e9956c29427e15717573
+  data.tar.gz: 61561e5ca787eb1bda14e6d2cb62fcc0b312900b0ecd1b34fcdaf16d9b9b58da
 SHA512:
-  metadata.gz: 204c573bae64566e947914a8862360eff803bd1be3b9f67a671c5053cf65cb07a880c0f176650db757ed9bb720cd9afeb4a1954eed865c9faa34e8540b21d4d0
-  data.tar.gz: ec311e00c136cbdce076b798735c02118f2c3459d8a3af929093325e70b3c5fbec8696868a02046cab9154e7745bb3356a77d83b05876a03517c82293c751693
+  metadata.gz: 1a19b667b26371cce71670e8cb081130802712f125cab5be871f0b28bc6e8f4ee5ec391ce6b67203d52efe5f81da928f21ac0831a6484d2617c64e5ad9d0da1c
+  data.tar.gz: 751743fa39296af6e62c0af64b3a54a9b40ecb74cabc8192f77f539d3e196112522e5efd8a7fa5eb61a9fe86894d0c82128294bf6ab37a4f2efb39e2d364b255

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.6.2
+
+- Support specifying default slot in a Component with slots (e.g. `default_slot :some_slot`) to allow consumers to insert content into default slot by adding content directly under consumed component instead of opening a block with slot name explicitly
+- Support `:markup_root_slot` as a default slot that is always available to insert content into the component markup root element in case another element is specified as the default slot.
+- Hello, Component Listeners (Default Slot)! Sample (has simpler code than Hello, Component Listeners! due to specifying a default slot): `require 'glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot'`
+- Fix opacity value for the Todo MVC sample's toggle all checkbox (make it `0` instead of `0px`)
+
 ## 0.6.1
 
 - Hello, Component Listeners! Sample: `require 'glimmer-dsl-web/samples/hello/hello_component_listeners'`

data/README.md

@@ -1,6 +1,7 @@
-# [<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)
+# [<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.2 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
-### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
+### The "Rails" of Frontend Frameworks!!!
+#### 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)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -14,7 +15,7 @@ You can finally have Ruby developer happiness and productivity in the Frontend!
 
 [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).
+[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). [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) currently runs on [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)), a Ruby-to-JavaScript transpiler. In the future, it might support other Frontend Ruby environments, such as [ruby.wasm](https://github.com/ruby/ruby.wasm).
 
 After looking through the [samples](#samples) below, read the [FAQ (Frequently Asked Questions)](#faq) to learn more about how Glimmer DSL for Web compares to other approaches/libraries like Hotwire (Turbo), Phlex, ViewComponent, Angular, Vue, React, Svelte, and other JS frameworks.
 
@@ -1345,6 +1346,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Component!](#hello-compoent)
       - [Hello, Component Slots!](#hello-component-slots)
       - [Hello, Component Listeners!](#hello-compoent-listeners)
+      - [Hello, Component Listeners (Default Slot)!](#hello-compoent-listeners-default-slot)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Style!](#hello-style)
@@ -1367,7 +1369,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Prerequisites
 
-[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) will begin by supporting [Opal Ruby](https://opalrb.com/) on [Rails](https://rubyonrails.org/). [Opal](https://opalrb.com/) is a lightweight Ruby to JavaScript transpiler that results in small downloadables compared to WASM. In the future, the project might grow to support [Ruby WASM](https://github.com/ruby/ruby.wasm) as an alternative to [Opal Ruby](https://opalrb.com/) that could be switched to with a simple configuration change.
+[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) will begin by supporting [Opal Ruby](https://opalrb.com/) on [Rails](https://rubyonrails.org/). [Opal](https://opalrb.com/) ([Fukuoka Ruby 2023 Award Winner](https://www.digitalfukuoka.jp/topics/228?locale=ja)) is a lightweight Ruby to JavaScript transpiler that results in small downloadables compared to WASM. In the future, the project might grow to support [Ruby WASM](https://github.com/ruby/ruby.wasm) as an alternative to [Opal Ruby](https://opalrb.com/) that could be switched to with a simple configuration change.
 
 - Ruby 3.0+
 - Rails 7: [https://github.com/rails/rails](https://github.com/rails/rails)
@@ -1401,7 +1403,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.6.1'
+gem 'glimmer-dsl-web', '~> 0.6.2'
 ```
 
 Run:
@@ -1630,7 +1632,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.6.1'
+gem 'glimmer-dsl-web', '~> 0.6.2'
 ```
 
 Run:
@@ -2868,7 +2870,11 @@ Component slots enables consumers of components to contribute content in designa
 Inside a Glimmer web component, you can designate an element (e.g. `div`) as a component slot by passing the `slot: :slotname` option,
 which enables consumers to contribute elements inside the component slot by opening a `slotname {...}` inside the component content block.
 
-For example, below is a sample that demonstrates how to contribute slot content to `address_header` and `address_footer` in an `address_form` component.
+If you want content that is added to a component block direclty added to a specific slot by default, you can specify a `default_slot :slot_name`.
+In that case, if you ever want to add content to the component markup root element, there is a slot that is always available for that, called `:markup_root_slot`.
+The default slot feature is demonstrated in the [Hello, Component Listeners (Default Slot)!](#hello-component-listeners-default-slot) sample.
+
+For an example of using component slots, below is a sample that demonstrates how to contribute slot content to `address_header` and `address_footer` in an `address_form` component.
 
 [lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb](/lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb)
 
@@ -3474,6 +3480,396 @@ Screenshot:
 
 ![Hello, Component Listeners!](/images/glimmer-dsl-web-samples-hello-hello-component-listeners.gif)
 
+#### Hello, Component Listeners (Default Slot)!
+
+This is a modified simpler version of Hello, Component Listeners! that takes advantage of the Component Default Slot feature.
+
+If you want content that is added to a component block direclty added to a specific slot by default, you can specify a `default_slot :slot_name`.
+In that case, if you ever want to add content to the component markup root element, there is a slot that is always available for that, called `:markup_root_slot`.
+The default slot feature is demonstrated in the [Hello, Component Listeners (Default Slot)!](#hello-component-listeners-default-slot) sample.
+
+For example, an `AccordionSection` component specifies `default_slot :section_content` to simplify inserting content for consumers of the component.
+
+[lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb](/lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.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 HelloComponentListenersDefaultSlot 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?(:AccordionSection2)
+  # Note: this is similar to AccordionSection in HelloComponentSlots but specifies default_slot for simpler consumption
+  class AccordionSection2
+    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
+    
+    default_slot :section_content # automatically insert content in this element slot inside markup
+    
+    option :title
+    
+    attr_reader :presenter
+    
+    before_render do
+      @presenter = Presenter.new
+    end
+    
+    markup {
+      section { # represents the :markup_root_slot to allow inserting content here instead of in default_slot
+        # 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| # represents the :markup_root_slot (top-level element)
+        # 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 { # re-open content and add component custom event listeners
+              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?(:HelloComponentListenersDefaultSlot)
+  # HelloComponentListenersDefaultSlot Glimmer Web Component (View component)
+  #
+  # This View component represents the main page being rendered,
+  # as done by its `render` class method below
+  #
+  # Note: this is a simpler version of HelloComponentSlots as it leverages the default slot feature
+  class HelloComponentListenersDefaultSlot
+    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 to its markup_root_slot element if no default_slot is specified
+          accordion_section2(title: 'Shipping Address') {
+            address_form(address: @shipping_address) # automatically inserts content in default_slot :section_content
+          }
+          
+          accordion_section2(title: 'Billing Address') {
+            address_form(address: @billing_address) # automatically inserts content in default_slot :section_content
+          }
+          
+          accordion_section2(title: 'Emergency Address') {
+            address_form(address: @emergency_address) # automatically inserts content in default_slot :section_content
+          }
+          
+          # 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) HelloComponentListenersDefaultSlot component
+  # Note: this is a simpler version of hello_component_slots.rb as it leverages the default slot feature
+  HelloComponentListenersDefaultSlot.render
+end
+```
+
+Screenshot:
+
+![Hello, Component Listeners!](/images/glimmer-dsl-web-samples-hello-hello-component-listeners.gif)
 
 #### Hello, glimmer_component Rails Helper!
 

data/VERSION

@@ -1 +1 @@
-0.6.1
+0.6.2

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.6.1 ruby lib
+# stub: glimmer-dsl-web 0.6.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.6.1"
+  s.version = "0.6.2"
 
   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-09-02"
+  s.date = "2024-09-30"
   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 = [
@@ -34,6 +34,7 @@ Gem::Specification.new do |s|
     "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_listeners_default_slot.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",

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

@@ -12,16 +12,34 @@ module Glimmer
         end
   
         def interpret(parent, keyword, *args, &block)
-          custom_widget_class = Glimmer::Web::Component.for(keyword)
-          custom_widget_class.new(parent, args, {}, &block)
+          component_class = Glimmer::Web::Component.for(keyword)
+          component_class.new(parent, args, {}, &block)
         end
   
         def add_content(parent, keyword, *args, &block)
+          options = args.last.is_a?(Hash) ? args.last : {}
+          slot = options[:slot] || options['slot']
+          slot = slot.to_s unless slot.nil?
           # TODO consider avoiding source_location since it does not work in Opal
           if block.source_location && (block.source_location == parent.content&.__getobj__&.source_location)
             parent.content.call(parent) unless parent.content.called?
           else
-            super(parent, keyword, *args, &block)
+            if slot
+              if slot == 'markup_root_slot'
+                super(parent, keyword, *args, &block)
+              else
+                slot_element = parent.slot_elements[slot]
+                slot_element&.content(&block)
+              end
+            else
+              if parent.default_slot
+                slot = parent.default_slot
+                slot_element = parent.slot_elements[slot]
+                slot_element&.content(&block)
+              else
+                super(parent, keyword, *args, &block)
+              end
+            end
           end
           parent.post_add_content
         end

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

@@ -28,19 +28,25 @@ module Glimmer
     module Web
       class ComponentSlotContentExpression < Expression
         def can_interpret?(parent, keyword, *args, &block)
+          component = parent.is_a?(Glimmer::Web::Component) ? parent : parent&.ancestor_component
           slot = keyword.to_s
           block_given? &&
-            parent.respond_to?(:slot_elements) &&
+            !component.nil? &&
             (
-              parent.slot_elements.keys.include?(slot) ||
-              parent.slot_elements.keys.include?(slot.to_sym)
+              component.slot_elements.keys.include?(slot) ||
+              component.slot_elements.keys.include?(slot.to_sym)
             )
         end
   
         def interpret(parent, keyword, *args, &block)
           slot = keyword.to_s
-          slot_element = parent.slot_elements[slot] || parent.slot_elements[slot.to_sym]
-          slot_element&.content(&block)
+          component = parent.is_a?(Glimmer::Web::Component) ? parent : parent.ancestor_component
+          if slot == 'markup_root_slot'
+            component.content(slot: slot.to_sym, &block)
+          else
+            slot_element = component.slot_elements[slot] || component.slot_elements[slot.to_sym]
+            slot_element.content(&block)
+          end
         end
       end
     end

data/lib/glimmer/web/component.rb

@@ -104,6 +104,14 @@ module Glimmer
           end
         end
         
+        def default_slot(slot_name = nil)
+          if slot_name.nil?
+            @default_slot
+          else
+            @default_slot = slot_name.to_s.to_sym
+          end
+        end
+        
         def keyword
           self.name.underscore.gsub('::', '__')
         end
@@ -270,7 +278,7 @@ module Glimmer
       end
       # <- end of class methods
       
-      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements, :events
+      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements, :events, :default_slot
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
@@ -288,6 +296,7 @@ module Glimmer
         options ||= {}
         @options = self.class.options.merge(options)
         @events = self.class.instance_variable_get("@events") || []
+        @default_slot = self.class.instance_variable_get("@default_slot")
         @content = Util::ProcTracker.new(content) if content
 #         @style_blocks = {} # TODO enable when doing bulk head rendering in the future
         execute_hooks('before_render')
@@ -474,8 +483,15 @@ module Glimmer
             @content
           end
         else
-          # delegate to GUI DSL ContentExpression
-          super
+          options = args.last.is_a?(Hash) ? args.last : {}
+          slot = options[:slot] || options['slot']
+          slot = slot.to_sym unless slot.nil?
+          if slot
+            Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ComponentExpression.new, self.class.keyword, slot: slot, &block)
+          else
+            # delegate to GUI DSL ContentExpression
+            super
+          end
         end
       end