glimmer-dsl-web 0.7.1 → 0.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f37d0d4bbc970ce93dc9ded190d19402fae86911c26c6941a45f0da3fa6d2a9
-  data.tar.gz: 2a4dd7e2b7a6e5035b513201e0c341c46e4c8604479d161d0bfbe6d2e9a6abbe
+  metadata.gz: 6fa66088970372c55644a8ffe63929208eb2ff33f70210fbb37c9df47c640553
+  data.tar.gz: 3322387162239687f62b4dd3ea7c1d1d34d52bda6e1242960dd9e6e7d8cf0f0a
 SHA512:
-  metadata.gz: 067b48f703219cda26d1cbbce6e4b2179216f6b6b9a5354786adfb04e4341a34100b9254d9849f2ad9d742fe1180d083d8f8ebc4a3945fc182f603dbabc9a952
-  data.tar.gz: c4b8a62396faa659bc001e854e1d8219f27771d85b561b93d64831c574b42129c0c5c87fec47fae1913b19f2ddeffb4288b54d8ec2e9e009b8377de05406638f
+  metadata.gz: 6cd62b7128c8da53cb68a359ed633724439671877e485c17bda919fca70f7e5d80c10fda3720072b9f7e6fdcd5c1f6fb0ec1652539fa9e864234779ef5bea267
+  data.tar.gz: 0e2c789e2eb779f9fb5e0a70bc22da3ece42d0e9c1efcb77fd965a39c93e380142ca082b131fada732e25ce4b22ef131f5292af91d9cfe94cd7e19c2ce7229b9

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 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)

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.7.1 (Beta)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.7.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!!!
@@ -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)
@@ -1389,7 +1390,7 @@ Once done, read [Usage](#usage) instructions. Note that for serious app usage, i
 
 ### Rails 8
 
-Rails 8 instructions are not ready yet though they would rely on the `opal --watch` command in the Development environment to generate JavaScript files in the directory that propshaft is setup with, and Rails 8 would rely on the `opal` command to generate JavaScript files for the Production environment. 
+Rails 8 instructions are not ready yet though they would rely on the `opal --watch` command in the Development environment to generate JavaScript files in the directory that propshaft is setup with, and Rails 8 would rely on the `opal` command to generate JavaScript files for the Production environment.
 
 Instructions will be added in the future.
 
@@ -1416,7 +1417,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.7.1'
+gem 'glimmer-dsl-web', '~> 0.7.2'
 ```
 
 Run:
@@ -3758,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

data/VERSION

@@ -1 +1 @@
-0.7.1
+0.7.2

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.7.1 ruby lib
+# stub: glimmer-dsl-web 0.7.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.7.1".freeze
+  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]
@@ -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",

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

@@ -0,0 +1,81 @@
+# Copyright (c) 2023-2024 Andy Maleh
+#
+# Permission is hereby granted, free of charge, to any person obtaining
+# a copy of this software and associated documentation files (the
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer-dsl-web'
+
+unless Object.const_defined?(:AddressTypeSelector)
+  class AddressTypeSelector
+    include Glimmer::Web::Component
+    
+    attribute :address_types, default: []
+    attribute :selected_address_type
+    
+    before_render do
+      self.selected_address_type ||= address_types.first
+    end
+    
+    markup {
+      select(placeholder: 'Select an address type') { |select_element|
+        address_types.each do |address_type|
+          option(value: address_type) { address_type }
+        end
+        
+        # Bidirectionally data-bind select value to selected_address_type attribute on self (component)
+        value <=> [self, :selected_address_type]
+      }
+    }
+    
+    style {
+      r(component_element_selector) {
+        font_size 2.em
+        margin_left 5.px
+      }
+    }
+  end
+end
+
+unless Object.const_defined?(:AddressTypeSelectorPage)
+  class AddressTypeSelectorPage
+    include Glimmer::Web::Component
+    
+    markup {
+      div {
+        h1('Address type for delivery:', style: {display: :inline})
+        
+        address_type_selector(address_types: ['Home', 'Work', 'Other']) {
+          # We can listen to the updates of any attribute/option in a Glimmer Web Component
+          # on_{attribute_name}_update do execute code when component attribute/option with attribute_name is updated
+          # This is an alternative to using Component Listeners, which require that the component explicitly calls notify_listeners,
+          # whereas Component Attribute Listeners get tracked automatically, but depend on a specific attribute
+          # The trade-off is Component Listeners provide more flexibility when needed as they are not bound to specific attributes,
+          # but often Component Attribute Listeners are good enough as a solution for certain problems.
+          on_selected_address_type_update do |address_type|
+            $$.alert("You selected the address type: #{address_type}")
+          end
+        }
+      }
+    }
+  end
+end
+
+Document.ready? do
+  AddressTypeSelectorPage.render
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.2
 platform: ruby
 authors:
 - Andy Maleh
@@ -266,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