glimmer-dsl-web 0.7.0 → 0.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ff3ef1efa40dc4dcc6e202544e7d0fa7be60c80d1f3dc9c465ed27cf62610df
-  data.tar.gz: da8851cd3e896f236c5cf45b23ff234ceb5854a6814a213e7311bc5f553910f8
+  metadata.gz: 6fa66088970372c55644a8ffe63929208eb2ff33f70210fbb37c9df47c640553
+  data.tar.gz: 3322387162239687f62b4dd3ea7c1d1d34d52bda6e1242960dd9e6e7d8cf0f0a
 SHA512:
-  metadata.gz: 145f156c520f3e25b0f4251fba654fcac9668edf5e03473aa4891fcf970ea92189d8a64be0f93f7fcbd81a9fc28ae541ccf6c99088ce64bbeb9eb9bb97c65450
-  data.tar.gz: 53ab737627d2cc6fac28e94f6e372a46f9a21af784afb5c4618509a874a684ff574eb85aa6a5a6c469b264c36257c5f66e8469f9d9825442e119341d9e1210ce
+  metadata.gz: 6cd62b7128c8da53cb68a359ed633724439671877e485c17bda919fca70f7e5d80c10fda3720072b9f7e6fdcd5c1f6fb0ec1652539fa9e864234779ef5bea267
+  data.tar.gz: 0e2c789e2eb779f9fb5e0a70bc22da3ece42d0e9c1efcb77fd965a39c93e380142ca082b131fada732e25ce4b22ef131f5292af91d9cfe94cd7e19c2ce7229b9

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 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)
+
 ## 0.7.0
 
 - Rename `element-ID` element CSS classes to `glimmer-element-ID` for a more unique class name that nobody else would be using

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.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.7.2 (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!!!
@@ -7,7 +7,7 @@
 
 **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
 
-**([Fukuoka Prefecture Future IT Initiative 2025 Money Forward Award Winner](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))**
+**([Fukuoka Prefecture Future IT Initiative 2025 Money Forward Award Winner](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html)) [(Award Announcement)](https://digitalfukuoka.jp/news/info/528/)**
 
 **(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4))**
 
@@ -17,7 +17,7 @@
 
 **Endorsement:** *"I'd like to endorse Andy Maleh’s work (Glimmer DSL for Web). I got introduced to it at RubyConf 2024 and have been playing around with it pretty successfully. What I have found most interesting is that I have been writing inside of a rails app, where I have been running the same code for models and presenters inside of MRI rspec. That way I can write tests that verify behavior of the presenters and models and still see them run successfully in the browser. That allows me to have a very nice cycle of refactoring and being confident in my changes without even running it in browser. I just assume that the binding will work and it usually works perfectly."* - Steve Tuckner on January 9, 2024
 
-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 (aka SPA: Single Page Applications) 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), Component Attribute Listeners, 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](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends (aka SPA: Single Page Applications) 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) (including a standalone general components gem called [glimmer-web-components](https://github.com/AndyObtiva/glimmer-web-components)), [Component Slots](#hello-component-slots), Component Attribute Listeners, 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 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 SPA (Single Page Applications), 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.
 
@@ -31,7 +31,7 @@ Anyone not considering this kind of technology in 2024 is like someone stuck in
 
 **Hello, World! Sample**
 
-(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+(Note: in real app development, we build [Glimmer Web Components](#hello-component) and we rely on the [glimmer_component Rails Helper](#hello-glimmer_component-rails-helper) to embed components in ERB Views without needing `Document.ready?`, but this sample is just introducing basic building blocks towards building [components](#hello-component))
 
 [lib/glimmer-dsl-web/samples/hello/hello_world.rb](/lib/glimmer-dsl-web/samples/hello/hello_world.rb)
 
@@ -63,7 +63,7 @@ You can also mount the `div` elsewhere by passing the `parent: parent_css_select
 
 **Hello, Button!**
 
-(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+(Note: in real app development, we build [Glimmer Web Components](#hello-component) and we rely on the [glimmer_component Rails Helper](#hello-glimmer_component-rails-helper) to embed components in ERB Views without needing `Document.ready?`, but this sample is just introducing basic building blocks towards building [components](#hello-component))
 
 Event listeners can be setup on any element using the same event names used in HTML (e.g. `onclick`) while passing in a standard Ruby block to handle behavior. `$$` gives access to JS global scope from Ruby to invoke functions like `alert`.
 
@@ -101,7 +101,7 @@ Screenshot:
 
 **Hello, Form!**
 
-(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+(Note: in real app development, we build [Glimmer Web Components](#hello-component) and we rely on the [glimmer_component Rails Helper](#hello-glimmer_component-rails-helper) to embed components in ERB Views without needing `Document.ready?`, but this sample is just introducing basic building blocks towards building [components](#hello-component))
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) gives access to all Web Browser built-in features like HTML form validations, input focus, events, and element functions from a very terse and productive Ruby HTML DSL. Also, you can apply CSS styles by including directly in Ruby code as a string, using [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css), or managing CSS completely separately using something like [SCSS](https://sass-lang.com/). The CSS techniques could be combined as well, like by managing common reusable CSS styles separately in SCSS, but adding component specific CSS styles in Ruby when it is more convenient.
 
@@ -261,7 +261,7 @@ Screenshot:
 
 **Hello, Data-Binding!**
 
-(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+(Note: in real app development, we build [Glimmer Web Components](#hello-component) and we rely on the [glimmer_component Rails Helper](#hello-glimmer_component-rails-helper) to embed components in ERB Views without needing `Document.ready?`, but this sample is just introducing basic building blocks towards building [components](#hello-component))
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) intuitively supports both Unidirectional (One-Way) Data-Binding via the `<=` operator and Bidirectional (Two-Way) Data-Binding via the `<=>` operator, incredibly simplifying how to sync View properties with Model attributes with the simplest code to reason about.
 
@@ -438,7 +438,7 @@ Screenshot:
 
 **Hello, Content Data-Binding!**
 
-(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+(Note: in real app development, we build [Glimmer Web Components](#hello-component) and we rely on the [glimmer_component Rails Helper](#hello-glimmer_component-rails-helper) to embed components in ERB Views without needing `Document.ready?`, but this sample is just introducing basic building blocks towards building [components](#hello-component))
 
 If you need to regenerate HTML element content dynamically, you can use Content Data-Binding to effortlessly
 rebuild HTML elements based on changes in a Model attribute that provides the source data.
@@ -1348,10 +1348,11 @@ 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, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
       - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Style!](#hello-style)
@@ -1387,6 +1388,14 @@ Once done, read [Usage](#usage) instructions. Note that for serious app usage, i
 
 (NOTE: Keep in mind this is a Beta. If you run into issues, read the [FAQ](#faq) in case they are addressed there (e.g. [I sometimes get an Opal error that makes no sense in relation to my code. How do I fix it?](https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/README.md#i-sometimes-get-an-opal-error-that-makes-no-sense-in-relation-to-my-code-how-do-i-fix-it)) and try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
 
+### 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.
+
+Instructions will be added in the future.
+
+If you want to help contribute Rails 8 instructions, please look at the Rails 7 instructions and see what needs to be adjusted in light of the first statement above about using `opal --watch` in Development and `opal` in Production.
+
 ### Rails 7
 
 (NOTE: In the future, we plan to automate the setup steps below. If you would like to help contribute that to the project, please do so and open a Pull Request.)
@@ -1408,7 +1417,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.7.0'
+gem 'glimmer-dsl-web', '~> 0.7.2'
 ```
 
 Run:
@@ -3750,6 +3759,83 @@ 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'
+
+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
+```
+
+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, glimmer_component Rails Helper!
 
 You may insert a Glimmer component anywhere into a Rails View using
@@ -4599,6 +4685,11 @@ Here is a list of notable 3rd party gems used by Glimmer DSL for Web:
 - [opal-async](https://github.com/AndyObtiva/opal-async): Non-blocking tasks and enumerators for Web.
 - [to_collection](https://github.com/AndyObtiva/to_collection): Treat an array of objects and a singular object uniformly as a collection of objects.
 
+Here is a list of 3rd party gems that compliment Glimmer DSL for Web:
+- [glimmer-web-components](https://github.com/AndyObtiva/glimmer-web-components)
+
+![glimmer-web-components](https://github.com/AndyObtiva/glimmer-web-components/raw/master/screenshots/glimmer-web-components-multi-checkbox-dropdown.gif)
+
 ## Influences and Inspiration
 
 - https://github.com/inesita-rb/inesita

data/VERSION

@@ -1 +1 @@
-0.7.0
+0.7.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.7.0 ruby lib
+# stub: glimmer-dsl-web 0.7.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.7.0"
+  s.version = "0.7.2".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2025-03-01"
+  s.date = "1980-01-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 = [
@@ -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_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",
@@ -98,24 +99,24 @@ Gem::Specification.new do |s|
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]
-  s.rubygems_version = "3.4.10".freeze
+  s.rubygems_version = "3.6.7".freeze
   s.summary = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework)".freeze
 
   s.specification_version = 4
 
-  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.2"])
-  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2"])
-  s.add_runtime_dependency(%q<opal-rails>.freeze, ["~> 2.0.4"])
-  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1"])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.2"])
-  s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1", "< 3.0.0"])
-  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 1.0.1"])
-  s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0", "< 14.0.0"])
-  s.add_development_dependency(%q<rake-tui>.freeze, [">= 0"])
-  s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9", "< 3.0.0"])
-  s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1", "< 7.0.0"])
-  s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2"])
+  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.8.0".freeze])
+  s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0".freeze])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.2".freeze])
+  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
+  s.add_runtime_dependency(%q<opal-rails>.freeze, ["~> 2.0.4".freeze])
+  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.2".freeze])
+  s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
+  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 1.0.1".freeze])
+  s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])
+  s.add_development_dependency(%q<rake-tui>.freeze, [">= 0".freeze])
+  s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9".freeze, "< 3.0.0".freeze])
+  s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1".freeze, "< 7.0.0".freeze])
+  s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2".freeze])
 end
 

data/lib/glimmer/helpers/glimmer_helper.rb

@@ -12,10 +12,11 @@ module GlimmerHelper
     next_id_number = GlimmerHelper.next_id_number
     component_id = "glimmer_component_#{next_id_number}"
     component_script_container_id = "glimmer_component_script_container_#{next_id_number}"
+    component_script_tag_id = "glimmer_component_script_#{next_id_number}"
     component_args_json = JSON.dump(component_args)
     opal_script = <<~OPAL
       require 'glimmer-dsl-web'
-      component_args_json = '#{component_args_json}'
+      component_args_json = $$.document.getElementById("#{component_script_tag_id}").dataset.componentArgs
       component_args = JSON.parse(component_args_json)
       component_args << {} if !component_args.last.is_a?(Hash)
       component_args.last[:parent] = "##{component_id}"
@@ -27,7 +28,7 @@ module GlimmerHelper
     content_tag(:div, id: component_script_container_id, class: ['glimmer_component_script_container', "#{component_file}_script_container"], 'data-turbo': 'false') do
       content_tag(:div, '', id: component_id, class: ['glimmer_component', component_file]) +
       javascript_include_tag(component_asset_path, "data-turbolinks-track": "reload") +
-      content_tag(:script, raw(js_script), type: 'application/javascript', "data-turbo-eval": "false")
+      content_tag(:script, raw(js_script), id: component_script_tag_id, type: 'application/javascript', "data-turbo-eval": "false", "data-component-args": component_args_json)
     end
   end
 end

data/lib/glimmer/web/element_proxy.rb

@@ -476,6 +476,8 @@ module Glimmer
         end
       end
       
+      alias to_s dom
+      
       def children_dom_content
         children.map(&:dom).join
       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

data/lib/glimmer-dsl-web.rb

@@ -21,10 +21,10 @@
 
 require 'opal'
 
-GLIMMER_DSL_OPAL_ROOT = File.expand_path('../..', __FILE__)
-GLIMMER_DSL_OPAL_LIB = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib')
+GLIMMER_DSL_WEB_ROOT = File.expand_path('../..', __FILE__)
+GLIMMER_DSL_WEB_LIB = File.join(GLIMMER_DSL_WEB_ROOT, 'lib')
  
-$LOAD_PATH.unshift(GLIMMER_DSL_OPAL_LIB)
+$LOAD_PATH.unshift(GLIMMER_DSL_WEB_LIB)
 
 if RUBY_ENGINE != 'opal'
   require 'opal-rails'
@@ -32,12 +32,12 @@ if RUBY_ENGINE != 'opal'
   require 'opal-jquery'
   require 'glimmer/helpers/glimmer_helper'
 else
-#   GLIMMER_DSL_OPAL_MISSING = File.join(GLIMMER_DSL_OPAL_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
+#   GLIMMER_DSL_WEB_MISSING = File.join(GLIMMER_DSL_WEB_ROOT, 'lib', 'glimmer-dsl-opal', 'missing')
    
-#   $LOAD_PATH.unshift(GLIMMER_DSL_OPAL_MISSING) # missing Ruby classes/methods
+#   $LOAD_PATH.unshift(GLIMMER_DSL_WEB_MISSING) # missing Ruby classes/methods
   # TODO look into making append_path work (causing some trouble right now)
 #   Opal.append_path File.expand_path('../glimmer-dsl-opal/missing', __FILE__)
-#   Opal.append_path GLIMMER_DSL_OPAL_MISSING
+#   Opal.append_path GLIMMER_DSL_WEB_MISSING
   module Kernel
     def include_package(package)
       # No Op (just a shim)

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.7.2
 platform: ruby
 authors:
 - Andy Maleh
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-01 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -267,6 +266,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_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
@@ -333,7 +333,6 @@ homepage: http://github.com/AndyObtiva/glimmer-dsl-web
 licenses:
 - MIT
 metadata: {}
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -348,8 +347,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key:
+rubygems_version: 3.6.7
 specification_version: 4
 summary: Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework)
 test_files: []