glimmer-dsl-web 0.3.2 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fda2e015b57a53d9281d9f04b7c222d8d42bf61bb33d670cb6ddb8cb0893d2c5
-  data.tar.gz: 327db5ff9687b0fb8f5ed96533c9c86dc71ca20876b8db39e28d7b156aed280b
+  metadata.gz: 9a248314a1dcc33c038a9d2f542dce35d31d7d5702435a1c8db5b13b75068470
+  data.tar.gz: 8d83a134edc023c5ec2debe421a7f45e11887671b918ba75532574bf3019525a
 SHA512:
-  metadata.gz: 7b36ba84170c0a90ac89a28218275fa4da16b21972bb298cd59b675fb41670c367aec3524f8582a7181d91f2a723ea36f7d7e6b8e2a1d4e2733b634b7e8e808f
-  data.tar.gz: 4d88b75d775ca693fe50602f7d6b9fd136188f1d88d8d13dee8d7e281c9218a1fc81540e662b1428ff67ac1ee124a015919aec31b2853eb49378ff022003c225
+  metadata.gz: 64e47e6380713ca42182644f9b20b0f4137deaf951707413d49f3909346be470e66426f09aa5f3a67656808b3bfb3e07bc00ee27a8c54167ec3cbb80f254972e
+  data.tar.gz: d55f560a40cb259fa0b28ee82be1cb066efe26aa4d44f749ec05bcb97ba1f5ff735a44a252100fa8565a8338aa9b53bab0f77c6719e12061f40d40e18b1abb04

data/CHANGELOG.md

@@ -1,16 +1,33 @@
 # Change Log
 
+## 0.4.1
+
+- Enhance Hello, Style! sample to allow setting styled button background color
+- Fixed issue with `Glimmer::Web::Component::component_element_class` not working in components when programmatically changing the component markup root CSS class
+
+## 0.4.0
+
+- Support `style {}` block in `Glimmer::Web::Component` that would automatically add style in one place for all component instances
+- Support `Glimmer::Web::Component::component_element_class` to return CSS class automatically generated for a component based on its name (e.g. `StyledButton` gets `styled-button` CSS class)
+- Hello, Style! Sample: `require 'glimmer-dsl-web/samples/hello/hello_style'`
+- Upgrade to Glimmer DSL for CSS 1.5.0
+- Remove support for including multiple `before_render` and `after_render` blocks in a component as it is not needed and can be confusing
+- Optimize performance of Todo MVC by not adding an edit input field to every todo, yet adding it only upon editing a todo.
+- Fix issue with `ElementProxy#add_css_class` and `ElementProxy#remove_css_class` crashing if called before rendering an element
+- Fix issue with Hello, Observer (Data-Binding)! crashing if run after Hello, Observer! due to both samples sharing the same class by mistake
+
 ## 0.3.2
 
 - Optimize performance (~248% faster) of rendering by changing DSL ordering to avoid component checks at the top
 - Optimize performance of formatting html elements by adding Glimmer DSL shortcut methods
 - Optimize performance of component expressions by indexing component keywords
+- Upgrade to glimmer 2.7.9
 
 ## 0.3.1
 
 - Optimize Todo MVC performance for filtering between all, active, and completed (it happens instantly now)
-- Append Todo MVC todos at the bottom instead of prepending them at the top (I copied the ES6 version initially which did things the opposite way from how Todo MVC behaves normally in other versions)
-- Make Todo MVC "items left" text show "item left" if there is only 1 todo (I missed this detail before)
+- Append Todo MVC todos at the bottom instead of prepending them at the top (the ES6 version was copied initially, which ordered todos the opposite way from how Todo MVC behaves in other versions)
+- Make Todo MVC "items left" text show "item left" if there is only 1 todo
 - Make Todo MVC footer links open a new tab/window (with `target: '_blank'` option)
 - Refactor/Simplify Todo MVC sample code
 - Upgrade to glimmer 2.7.8

data/README.md

@@ -1,5 +1,5 @@
-# [<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.3.2 (Beta)
-## Ruby in the Browser Web Frontend Framework
+# [<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.4.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)
 [![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)
@@ -8,13 +8,13 @@
 
 **(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) & [Frontend Ruby with Glimmer DSL for Web](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE))**
 
-[![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
+[![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
 
 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), 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, 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 Ajax HTTP 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 Ajax HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_selector_presenter.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).
 
 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.
 
@@ -265,8 +265,64 @@ Glimmer HTML DSL Ruby code in the frontend:
 ```ruby
 require 'glimmer-dsl-web'
 
-Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init: true) do
-  STATES = {...} # contains US States
+Address = Struct.new(:street, :street2, :city, :state, :zip_code, :billing_and_shipping, 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]
@@ -1310,6 +1366,8 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 You can setup Glimmer DSL for Web in [Rails 7](#rails-7), [Rails 6](#rails-6), or [Standalone (No Rails)](#standalone-no-rails).
 
+Once done, read [Usage](#usage) instructions. Note that for serious app usage, it is recommended to build [components](#hello-component) and use the [`glimmer_component` Rails Helper](#hello-glimmer_component-rails-helper) to embed the top-level Web Frontend component in a Rails View.
+
 (NOTE: Keep in mind this is a Beta. If you run into issues, 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 7
@@ -1333,7 +1391,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.3.2'
+gem 'glimmer-dsl-web', '~> 0.4.1'
 ```
 
 Run:
@@ -1562,7 +1620,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.3.2'
+gem 'glimmer-dsl-web', '~> 0.4.1'
 ```
 
 Run:
@@ -1803,6 +1861,8 @@ You can get/set any element property or invoke any element function by simply ca
 
 Next, check out [Samples](#samples).
 
+Note that for serious app usage, it is recommended to build [components](#hello-component) and use the [`glimmer_component` Rails Helper](#hello-glimmer_component-rails-helper) to embed the top-level Web Frontend component in a Rails View.
+
 ## Supported Glimmer DSL Keywords
 
 [All HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), following the Ruby method name standard of lowercase and underscored names.
@@ -1821,7 +1881,11 @@ This external Sample Selector app is built using Rails and Glimmer DSL for Web,
 
 https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
-![Sample Selector](https://raw.githubusercontent.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/master/sample-glimmer-dsl-web-rails7-app.png)
+A deployed version of the Sample Selector app can be accessed over here:
+
+https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/
+
+[![Sample Selector](https://raw.githubusercontent.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/master/sample-glimmer-dsl-web-rails7-app.png)](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
 
 ### Hello Samples
 
@@ -2256,7 +2320,7 @@ Glimmer HTML DSL Ruby code in the frontend:
 ```ruby
 require 'glimmer-dsl-web'
 
-Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init: true) do
+Address = Struct.new(:street, :street2, :city, :state, :zip_code, :billing_and_shipping, keyword_init: true) do
   STATES = {
     "AK"=>"Alaska",
     "AL"=>"Alabama",
@@ -2391,7 +2455,9 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
+        # `r` is an alias for `rule`, generating a CSS rule
         r("#{address_div.selector} *") {
           margin '5px'
         }
@@ -3370,8 +3436,9 @@ end
 - Declarative syntax that visually maps to the DOM (Document Object Model) hierarchy
 - Ability to mix declarative and imperative code conveniently in one language
 - Computers serve Software Engineers (not Software Engineers serve Computers)
-- Think only about real world concepts directly relevant to web page interaction
+- Think only about real world concepts directly relevant to web page interaction and application domain model
 - Modular Software Design (e.g. support for Components)
+- No premature optimizations
 
 ## Supporting Libraries
 

data/VERSION

@@ -1 +1 @@
-0.3.2
+0.4.1

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.3.2 ruby lib
+# stub: glimmer-dsl-web 0.4.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.3.2"
+  s.version = "0.4.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-07-02"
+  s.date = "2024-07-27"
   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, 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 = [
@@ -46,6 +46,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_style.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/samples/regular/todo_mvc.rb",
@@ -81,6 +82,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
     "lib/glimmer/web/component.rb",
+    "lib/glimmer/web/component/component_style_container.rb",
     "lib/glimmer/web/element_proxy.rb",
     "lib/glimmer/web/event_proxy.rb",
     "lib/glimmer/web/formatting_element_proxy.rb",
@@ -93,9 +95,9 @@ Gem::Specification.new do |s|
 
   s.specification_version = 4
 
-  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.9"])
+  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.4.0"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.0"])
   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/component_style_container.rb

@@ -0,0 +1,13 @@
+require 'glimmer/web/component'
+
+class ComponentStyleContainer
+  include Glimmer::Web::Component
+  
+  option :component
+  
+  markup {
+    component_style_container_block = component.class.instance_variable_get("@style_block")
+    component_style_container_class = "#{component.class.component_element_class}-style"
+    style(class: component_style_container_class, &component_style_container_block)
+  }
+end

data/lib/glimmer/web/component.rb

@@ -73,17 +73,20 @@ module Glimmer
         end
 
         def before_render(&block)
-          @before_render_blocks ||= []
-          @before_render_blocks << block
+          @before_render = block
         end
 
         def markup(&block)
           @markup_block = block
         end
 
+        # TODO in the future support a string value too
+        def style(&block)
+          @style_block = block
+        end
+
         def after_render(&block)
-          @after_render_blocks ||= []
-          @after_render_blocks << block
+          @after_render = block
         end
         
         def keyword
@@ -95,6 +98,14 @@ module Glimmer
           self.name.underscore.gsub('::', '__').split('__').last
         end
         
+        def component_element_class
+          self.keyword.gsub('_', '-')
+        end
+        
+        def component_shortcut_element_class
+          self.shortcut_keyword.gsub('_', '-')
+        end
+        
         # Creates component without rendering
         def create(*args)
           args << {} unless args.last.is_a?(Hash)
@@ -105,6 +116,7 @@ module Glimmer
         
         # Creates and renders component
         def render(*args)
+          Glimmer::DSL::Engine.new_parent_stack unless Glimmer::DSL::Engine.parent.nil?
           rendered_component = send(keyword, *args)
           rendered_component
         end
@@ -172,14 +184,76 @@ module Glimmer
         def interpretation_stack
           @interpretation_stack ||= []
         end
+        
+        def add_component(component)
+          component_class_to_components_map[component.class] ||= {}
+          component_class_to_components_map[component.class][component.object_id] = component
+        end
+        
+        def remove_component(component)
+          component_class_to_components_map[component.class].delete(component.object_id)
+          component_class_to_components_map.delete(component.class) if component_class_to_components_map[component.class].empty?
+        end
+        
+        def add_component_style(component)
+          # We must not remove the head style element until all components are removed of a component class
+          if Glimmer::Web::Component.component_count(component.class) == 1
+            Glimmer::Web::Component.component_styles[component.class] = ComponentStyleContainer.render(parent: 'head', component: component, component_style_container_block: component.style_block)
+          end
+        end
+        
+        def remove_component_style(component)
+          if Glimmer::Web::Component.any_component_style?(component.class)
+            # TODO in the future, you would need to remove style using a jQuery call if you created head element in bulk
+            Glimmer::Web::Component.component_styles[component.class].remove
+            Glimmer::Web::Component.component_styles.delete(component.class)
+          end
+        end
+        
+        def any_component?(component_class)
+          component_class_to_components_map.has_key?(component_class)
+        end
+        
+        def any_component_style?(component_class)
+          component_styles.has_key?(component_class)
+        end
+        
+        def component_count(component_class)
+          component_class_to_components_map[component_class].size
+        end
+        
+        def components
+          component_class_to_components_map.values.map(&:values).flatten
+        end
+        
+        def body_components
+          components.reject {|component| component.is_a?(ComponentStyleContainer)}
+        end
+        
+        def head_components
+          components.select {|component| component.is_a?(ComponentStyleContainer)}
+        end
+        
+        def remove_all_components
+          # removing body components automatically removes corresponding head components
+          body_components.each(&:remove)
+        end
+        
+        def component_class_to_components_map
+          @component_class_to_components_map ||= {}
+        end
+        
+        def component_styles
+          @component_styles ||= {}
+        end
       end
       # <- end of class methods
       
-
-      attr_reader :markup_root, :parent, :args, :options
+      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
+        Glimmer::Web::Component.add_component(self)
         Component.interpretation_stack.push(self)
         @parent = parent
         options = args.delete_at(-1) if args.is_a?(Array) && args.last.is_a?(Hash)
@@ -192,10 +266,14 @@ module Glimmer
         options ||= {}
         @options = self.class.options.merge(options)
         @content = Util::ProcTracker.new(content) if content
+#         @style_blocks = {} # TODO enable when doing bulk head rendering in the future
         execute_hooks('before_render')
         markup_block = self.class.instance_variable_get("@markup_block")
+#         add_style_block
         raise Glimmer::Error, 'Invalid Glimmer web component for having no markup! Please define markup block!' if markup_block.nil?
         @markup_root = instance_exec(&markup_block)
+        add_style_block
+#         add_style_to_markup_root
         @markup_root.options[:parent] = options[:parent] if !options[:parent].nil?
         @parent ||= @markup_root.parent
         raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
@@ -346,10 +424,35 @@ module Glimmer
       private
 
       def execute_hooks(hook_name)
-        self.class.instance_variable_get("@#{hook_name}_blocks")&.each do |hook_block|
-          instance_exec(&hook_block)
-        end
+        hook_block = self.class.instance_variable_get("@#{hook_name}")
+        instance_exec(&hook_block) if hook_block
+      end
+      
+      def add_style_block
+        style_block = self.class.instance_variable_get("@style_block")
+        # TODO handle case of style_block being a nil with style value being a string
+        return if style_block.nil?
+#         style_block_component_index = Component.interpretation_stack.size > 1 ? -2 : -1
+        # TODO It might be better to have each component create a style tag in head by accumulating style blocks here first
+#         Component.interpretation_stack[style_block_component_index].style_blocks << style_block
+        Glimmer::Web::Component.add_component_style(self)
+      end
+
+# TODO render style blocks in head in bulk in the future
+#       def add_style_to_markup_root
+#         if Component.interpretation_stack.size == 1 && !style_blocks.empty?
+          ## TODO it might be better to generate element directly instead of relying on ComponentStyle
+          ## for performance reasons
+          ## TODO rename component_style and capture it by component (might need to have style_blocks a hash mapping component classes to style blocks)
+#           @component_style = ComponentStyleContainer.render(parent: 'head', component: self, style_blocks:)
+#         end
+#       end
+      
+      def remove_style_block
+        Glimmer::Web::Component.remove_component_style(self)
       end
     end
   end
 end
+
+require 'glimmer/web/component/component_style_container'

data/lib/glimmer/web/element_proxy.rb

@@ -123,13 +123,18 @@ module Glimmer
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
       
-      attr_reader :keyword, :parent, :parent_component, :args, :options, :children, :enabled, :foreground, :background, :removed?, :rendered
+      attr_reader :keyword, :parent, :parent_component, :component, :args, :options, :children, :enabled, :foreground, :background, :removed, :rendered
       alias rendered? rendered
+      alias removed? removed
       
       def initialize(keyword, parent, args, block)
         @keyword = keyword
         @parent = parent.is_a?(Glimmer::Web::Component) ? parent.markup_root : parent
         @parent_component = parent if parent.is_a?(Glimmer::Web::Component)
+        if Component.interpretation_stack.last&.markup_root.nil?
+          @component = Component.interpretation_stack.last
+          @component&.instance_variable_set("@markup_root", self)
+        end
         @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
         if parent.nil?
           options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
@@ -164,7 +169,7 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
-        render if bulk_render? && @parent.nil?
+        render if bulk_render? && @parent.nil? && !rendered?
       end
       
       def css_classes
@@ -172,6 +177,7 @@ module Glimmer
       end
       
       def remove
+        return if @removed
         on_remove_listeners = listeners_for('on_remove').dup
         if rendered?
           @children.dup.each do |child|
@@ -181,6 +187,10 @@ module Glimmer
           dom_element.remove
         end
         parent&.post_remove_child(self)
+        if component
+          Glimmer::Web::Component.remove_component(component)
+          component.remove_style_block
+        end
         @removed = true
         on_remove_listeners.each do |listener|
           listener.original_event_listener.call(EventProxy.new(listener: listener))
@@ -362,7 +372,7 @@ module Glimmer
       end
       
       def html_options
-        body_class = ([name, element_id] + css_classes.to_a).join(' ')
+        body_class = (base_css_classes + css_classes.to_a).uniq.compact.join(' ')
         html_options = options.dup
         GLIMMER_ATTRIBUTES.each do |attribute|
           next unless html_options.include?(attribute)
@@ -401,8 +411,8 @@ module Glimmer
       
       def class_name=(value)
         if rendered?
-          value = value.is_a?(Array) ? value.join(' ') : value.to_s
-          new_class_name = "#{name} #{element_id} #{value}"
+          values = value.is_a?(Array) ? value : [value.to_s]
+          new_class_name = (base_css_classes + values).uniq.compact.join(' ')
           dom_element.prop('className', new_class_name)
         else
           enqueue_post_render_method_call('class_name=', value)
@@ -413,7 +423,7 @@ module Glimmer
         if rendered?
           dom_element.add_class(css_class)
         else
-          enqueue_post_render_method_call('class_name=', value)
+          enqueue_post_render_method_call('add_css_class', css_class)
         end
       end
       
@@ -425,7 +435,7 @@ module Glimmer
         if rendered?
           dom_element.remove_class(css_class)
         else
-          enqueue_post_render_method_call('class_name=', value)
+          enqueue_post_render_method_call('remove_css_class', css_class)
         end
       end
       
@@ -816,6 +826,15 @@ module Glimmer
       
       private
       
+      def base_css_classes
+        framework_css_classes = [name, element_id]
+        if component
+          framework_css_classes.prepend(component.class.component_element_class)
+          framework_css_classes.prepend(component.class.component_shortcut_element_class) if component.class.component_shortcut_element_class != component.class.component_element_class
+        end
+        framework_css_classes
+      end
+      
       def valid_js_date_string?(string)
         [REGEX_FORMAT_DATETIME, REGEX_FORMAT_DATE, REGEX_FORMAT_TIME].any? do |format|
           string.match(format)

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

@@ -29,7 +29,7 @@ class NumberHolder
   end
 end
 
-class HelloObserver
+class HelloObserverDataBinding
   include Glimmer::Web::Component
   
   before_render do
@@ -53,5 +53,5 @@ class HelloObserver
 end
 
 Document.ready? do
-  HelloObserver.render
+  HelloObserverDataBinding.render
 end

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

@@ -0,0 +1,206 @@
+# 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'
+
+class ButtonModel
+  BUTTON_STYLE_ATTRIBUTES = [:width, :height, :font_size, :background_color]
+  WIDTH_MIN = 160
+  WIDTH_MAX = 960
+  HEIGHT_MIN = 100
+  HEIGHT_MAX = 600
+  FONT_SIZE_MIN = 40
+  FONT_SIZE_MAX = 200
+  
+  attr_accessor :text, :pushed, *BUTTON_STYLE_ATTRIBUTES
+  
+  def initialize
+    @text = 'Push'
+    @width = WIDTH_MIN
+    @height = HEIGHT_MIN
+    @font_size = FONT_SIZE_MIN
+    @background_color = '#add8e6'
+  end
+  
+  def push
+    self.pushed = !pushed
+  end
+  
+  def text
+    pushed ? 'Pull' : 'Push'
+  end
+  
+  def width=(value)
+    @width = value
+    self.font_size = @width/4 if @font_size > @width/4
+  end
+  
+  def height=(value)
+    @height = value
+    self.font_size = @height/2.5 if @font_size > @height/2.5
+  end
+  
+  def font_size=(value)
+    @font_size = value
+    self.width = @font_size*4 if @height < @font_size*4
+    self.height = @font_size*2.5 if @height < @font_size*2.5
+  end
+  
+  def border_color
+    red = background_color[1..2].hex
+    green = background_color[3..4].hex
+    blue = background_color[5..6].hex
+    new_red = red - 10
+    new_green = green - 10
+    new_blue = blue - 10
+    "##{new_red.to_s(16)}#{new_green.to_s(16)}#{new_blue.to_s(16)}"
+  end
+end
+
+class StyledButton
+  include Glimmer::Web::Component
+  
+  option :button_model
+  
+  markup {
+    button {
+      inner_text <= [button_model, :text, computed_by: :pushed]
+      
+      class_name <= [button_model, :pushed,
+                      on_read: ->(pushed) { pushed ? 'pushed' : 'pulled' }
+                    ]
+      
+      ButtonModel::BUTTON_STYLE_ATTRIBUTES.each do |attribute|
+        style <= [ button_model, attribute,
+                   on_read: method(:button_style_value) # convert value on read before storing in style
+                 ]
+      end
+      
+      onclick do
+        button_model.push
+      end
+    }
+  }
+  
+  style {"
+    .#{component_element_class} {
+      font-family: Courrier New, Courrier;
+      border-radius: 5px;
+      border-width: 17px;
+      margin: 5px;
+    }
+    
+    .#{component_element_class}.pulled {
+      border-style: outset;
+    }
+    
+    .#{component_element_class}.pushed {
+      border-style: inset;
+    }
+  "}
+  
+  def button_style_value
+    "
+      width: #{button_model.width}px;
+      height: #{button_model.height}px;
+      font-size: #{button_model.font_size}px;
+      background-color: #{button_model.background_color};
+      border-color: #{button_model.border_color};
+    "
+  end
+end
+
+class StyledButtonRangeInput
+  include Glimmer::Web::Component
+  
+  option :button_model
+  option :property
+  option :property_min
+  option :property_max
+  
+  markup {
+    input(type: 'range', min: property_min, max: property_max) {
+      value <=> [button_model, property]
+    }
+  }
+end
+
+class StyledButtonColorInput
+  include Glimmer::Web::Component
+  
+  option :button_model
+  option :property
+  
+  markup {
+    input(type: 'color') {
+      value <=> [button_model, property]
+    }
+  }
+end
+
+class HelloStyle
+  include Glimmer::Web::Component
+  
+  before_render do
+    @button_model = ButtonModel.new
+  end
+  
+  markup {
+    div {
+      div(class: 'styled-button-form') {
+        label('Styled Button Width:', class: 'property-label', for: 'styled-button-width-input')
+        styled_button_range_input(button_model: @button_model, property: :width, property_min: ButtonModel::WIDTH_MIN, property_max: ButtonModel::WIDTH_MAX, id: 'styled-button-width-input')
+        
+        label('Styled Button Height:', class: 'property-label', for: 'styled-button-height-input')
+        styled_button_range_input(button_model: @button_model, property: :height, property_min: ButtonModel::HEIGHT_MIN, property_max: ButtonModel::HEIGHT_MAX, id: 'styled-button-height-input')
+        
+        label('Styled Button Font Size:', class: 'property-label', for: 'styled-button-font-size-input')
+        styled_button_range_input(button_model: @button_model, property: :font_size, property_min: ButtonModel::FONT_SIZE_MIN, property_max: ButtonModel::FONT_SIZE_MAX, id: 'styled-button-font-size-input')
+        
+        label('Styled Button Background Color:', for: 'styled-button-background-color-input')
+        styled_button_color_input(button_model: @button_model, property: :background_color, id: 'styled-button-background-color-input')
+      }
+      
+      styled_button(button_model: @button_model)
+    }
+  }
+  
+  style {"
+    .styled-button-form {
+      padding: 20px;
+      display: inline-grid;
+      grid-template-columns: auto auto;
+    }
+    
+    .styled-button-form label, input {
+      display: block;
+      margin: 5px 5px 5px 0;
+    }
+    
+    .#{component_element_class} .styled-button {
+      display: block;
+    }
+  "}
+end
+
+Document.ready? do
+  HelloStyle.render
+end

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

@@ -4,8 +4,8 @@ class EditTodoInput < TodoInput
   option :presenter
   option :todo
   
-  markup {
-    input(class: self.class.todo_input_class) { |edit_input|
+  markup { # evaluated against instance as a smart default convention
+    input { |edit_input|
       style <= [ todo, :editing,
                  on_read: ->(editing) { editing ? '' : 'display: none;' },
                  after_read: -> { edit_input.focus if todo.editing? }
@@ -27,27 +27,21 @@ class EditTodoInput < TodoInput
       end
     }
   }
-  
-  class << self
-    def todo_input_class
-      'edit-todo'
-    end
     
-    def todo_input_styles
-      super
-      
-      rule("*:has(> .#{todo_input_class})") {
-        position 'relative'
-      }
-      
-      rule(".#{todo_input_class}") {
-        position 'absolute'
-        display 'block'
-        width 'calc(100% - 43px)'
-        padding '12px 16px'
-        margin '0 0 0 43px'
-        top '0'
-      }
-    end
-  end
+  style { # evaluated against class as a smart default convention (common to all instances)
+    todo_input_styles
+    
+    rule("*:has(> .#{component_element_class})") {
+      position 'relative'
+    }
+    
+    rule(".#{component_element_class}") {
+      position 'absolute'
+      display 'block'
+      width 'calc(100% - 43px)'
+      padding '12px 16px'
+      margin '0 0 0 43px'
+      top '0'
+    }
+  }
 end

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

@@ -10,21 +10,21 @@ class NewTodoForm
       h1('todos')
       
       new_todo_input(presenter: presenter)
-      
-      style {
-        rule('.header h1') {
-          color '#b83f45'
-          font_size '80px'
-          font_weight '200'
-          position 'absolute'
-          text_align 'center'
-          _webkit_text_rendering 'optimizeLegibility'
-          _moz_text_rendering 'optimizeLegibility'
-          text_rendering 'optimizeLegibility'
-          top '-140px'
-          width '100%'
-        }
-      }
+    }
+  }
+  
+  style {
+    rule('.header h1') {
+      color '#b83f45'
+      font_size '80px'
+      font_weight '200'
+      position 'absolute'
+      text_align 'center'
+      _webkit_text_rendering 'optimizeLegibility'
+      _moz_text_rendering 'optimizeLegibility'
+      text_rendering 'optimizeLegibility'
+      top '-140px'
+      width '100%'
     }
   }
 end

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

@@ -3,41 +3,31 @@ require_relative 'todo_input'
 class NewTodoInput < TodoInput
   option :presenter
   
-  markup {
-    input(class: self.class.todo_input_class, placeholder: "What needs to be done?", autofocus: "") {
+  markup { # evaluated against instance as a smart convention
+    input(placeholder: "What needs to be done?", autofocus: "") {
       value <=> [presenter.new_todo, :task]
     
       onkeyup do |event|
         presenter.create_todo if event.key == 'Enter' || event.keyCode == "\r"
       end
-    
-      style {
-        self.class.todo_input_styles
-      }
     }
   }
   
-  class << self
-    def todo_input_class
-      'new-todo'
-    end
+  style { # evaluated against class as a smart convention (common to all instances)
+    todo_input_styles
+    
+    rule(".#{component_element_class}") { # NewTodoInput has component_element_class as 'new-todo-input'
+      padding '16px 16px 16px 60px'
+      height '65px'
+      border 'none'
+      background 'rgba(0, 0, 0, 0.003)'
+      box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
+    }
     
-    def todo_input_styles
-      super
-      
-      rule(".#{todo_input_class}") {
-        padding '16px 16px 16px 60px'
-        height '65px'
-        border 'none'
-        background 'rgba(0, 0, 0, 0.003)'
-        box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
-      }
-      
-      rule(".#{todo_input_class}::placeholder") {
-        font_style 'italic'
-        font_weight '400'
-        color 'rgba(0, 0, 0, 0.4)'
-      }
-    end
-  end
+    rule(".#{component_element_class}::placeholder") {
+      font_style 'italic'
+      font_weight '400'
+      color 'rgba(0, 0, 0, 0.4)'
+    }
+  }
 end

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

@@ -45,80 +45,80 @@ class TodoFilters
           presenter.clear_completed
         end
       }
+    }
+  }
+  
+  style {
+    rule('.todo-filters') {
+      border_top '1px solid #e6e6e6'
+      font_size '15px'
+      height '20px'
+      padding '10px 15px'
+      text_align 'center'
+    }
+    
+    rule('.todo-filters:before') {
+      bottom '0'
+      box_shadow '0 1px 1px rgba(0,0,0,.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0,0,0,.2)'
+      content '""'
+      height '50px'
+      left '0'
+      overflow 'hidden'
+      position 'absolute'
+      right '0'
+    }
+    
+    rule('.todo-count') {
+      float 'left'
+      text_align 'left'
+    }
+    
+    rule('.todo-count .strong') {
+      font_weight '300'
+    }
+    
+    rule('.filters') {
+      left '0'
+      list_style 'none'
+      margin '0'
+      padding '0'
+      position 'absolute'
+      right '0'
+    }
+    
+    rule('.filters li') {
+      display 'inline'
+    }
+    
+    rule('.filters li a') {
+      border '1px solid transparent'
+      border_radius '3px'
+      color 'inherit'
+      margin '3px'
+      padding '3px 7px'
+      text_decoration 'none'
+      cursor 'pointer'
+    }
+    
+    rule('.filters li a.selected') {
+      border_color '#ce4646'
+    }
+    
+    rule('.clear-completed, html .clear-completed:active') {
+      cursor 'pointer'
+      float 'right'
+      line_height '19px'
+      position 'relative'
+      text_decoration 'none'
+    }
+    
+    media('(max-width: 430px)') {
+      rule('.todo-filters') {
+        height '50px'
+      }
       
-      style {
-        rule('.todo-filters') {
-          border_top '1px solid #e6e6e6'
-          font_size '15px'
-          height '20px'
-          padding '10px 15px'
-          text_align 'center'
-        }
-        
-        rule('.todo-filters:before') {
-          bottom '0'
-          box_shadow '0 1px 1px rgba(0,0,0,.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0,0,0,.2)'
-          content '""'
-          height '50px'
-          left '0'
-          overflow 'hidden'
-          position 'absolute'
-          right '0'
-        }
-        
-        rule('.todo-count') {
-          float 'left'
-          text_align 'left'
-        }
-        
-        rule('.todo-count .strong') {
-          font_weight '300'
-        }
-        
-        rule('.filters') {
-          left '0'
-          list_style 'none'
-          margin '0'
-          padding '0'
-          position 'absolute'
-          right '0'
-        }
-        
-        rule('.filters li') {
-          display 'inline'
-        }
-        
-        rule('.filters li a') {
-          border '1px solid transparent'
-          border_radius '3px'
-          color 'inherit'
-          margin '3px'
-          padding '3px 7px'
-          text_decoration 'none'
-          cursor 'pointer'
-        }
-        
-        rule('.filters li a.selected') {
-          border_color '#ce4646'
-        }
-        
-        rule('.clear-completed, html .clear-completed:active') {
-          cursor 'pointer'
-          float 'right'
-          line_height '19px'
-          position 'relative'
-          text_decoration 'none'
-        }
-        
-        media('(max-width: 430px)') {
-          rule('.todo-filters') {
-            height '50px'
-          }
-          
-          rule('.filters') {
-            bottom '10px'
-          }
-        }
+      rule('.filters') {
+        bottom '10px'
       }
     }
   }

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

@@ -3,12 +3,8 @@ class TodoInput
   include Glimmer::Web::Component
   
   class << self
-    def todo_input_class
-      'todo-input'
-    end
-    
     def todo_input_styles
-      rule(".#{todo_input_class}") {
+      rule(".#{component_element_class}") {
         position 'relative'
         margin '0'
         width '100%'
@@ -24,9 +20,14 @@ class TodoInput
         _webkit_font_smoothing 'antialiased'
       }
       
-      rule(".#{todo_input_class}::selection") {
+      rule(".#{component_element_class}::selection") {
         background 'red'
       }
+      
+      rule(".#{component_element_class}:focus") {
+        box_shadow '0 0 2px 2px #cf7d7d'
+        outline '0'
+      }
     end
   end
 end

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

@@ -38,16 +38,10 @@ class TodoList
           todo_list_item(presenter:, todo:)
         end
       }
-      
-      style {
-        todo_list_styles
-      }
     }
   }
   
-  def todo_list_styles
-    TodoListItem.todo_list_item_styles
-    
+  style {
     rule('.main') {
       border_top '1px solid #e6e6e6'
       position 'relative'
@@ -86,7 +80,7 @@ class TodoList
       transform 'rotate(90deg)'
     }
     
-    rule('.toggle-all:focus+label, .toggle:focus+label, :focus') {
+    rule('.toggle-all:focus+label, .toggle:focus+label') {
       box_shadow '0 0 2px 2px #cf7d7d'
       outline '0'
     }
@@ -104,5 +98,5 @@ class TodoList
     rule('.todo-list.completed li.active') {
       display 'none'
     }
-  end
+  }
 end

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

@@ -31,6 +31,12 @@ class TodoListItem
           inner_html <= [todo, :task]
           
           ondblclick do |event|
+            # if the markup root (li) last child is not an input field, re-open content and add an edit input field
+            unless markup_root.children.last.keyword == 'input'
+              markup_root.content {
+                edit_todo_input(presenter:, todo:)
+              }
+            end
             todo.start_editing
           end
         }
@@ -41,8 +47,6 @@ class TodoListItem
           end
         }
       }
-      
-      edit_todo_input(presenter:, todo:)
     }
   }
   
@@ -54,9 +58,7 @@ class TodoListItem
     classes.join(' ')
   end
   
-  def self.todo_list_item_styles
-    EditTodoInput.todo_input_styles
-    
+  style {
     rule('.todo-list li.completed label') {
       color '#949494'
       text_decoration 'line-through'
@@ -155,6 +157,6 @@ class TodoListItem
         height '40px'
       }
     }
-  end
+  }
 end
             

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

@@ -12,14 +12,10 @@ class TodoMvcFooter
       p {
         "Part of #{a('TodoMVC', href: 'http://todomvc.com', target: '_blank')}"
       }
-      
-      style {
-        todo_mvc_styles
-      }
     }
   }
   
-  def todo_mvc_styles
+  style {
     rule('footer.info') {
       margin '65px auto 0'
       color '#4d4d4d'
@@ -41,5 +37,5 @@ class TodoMvcFooter
     rule('footer.info a:hover') {
       text_decoration 'underline'
     }
-  end
+  }
 end

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

@@ -26,10 +26,6 @@ class TodoMvc
         todo_list(presenter: @presenter)
         
         todo_filters(presenter: @presenter)
-              
-        style {
-          todo_mvc_styles
-        }
       }
       
       todo_mvc_footer
@@ -40,7 +36,7 @@ class TodoMvc
     }
   }
   
-  def todo_mvc_styles
+  style {
     rule('body, button, html') {
       margin '0'
       padding '0'
@@ -79,7 +75,7 @@ class TodoMvc
         font_weight '300'
       }
     }
-  end
+  }
 end
 
 Document.ready? do

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.1
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-02 00:00:00.000000000 Z
+date: 2024-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.7.9
+        version: 2.8.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.7.9
+        version: 2.8.0
 - !ruby/object:Gem::Dependency
   name: glimmer-dsl-xml
   requirement: !ruby/object:Gem::Requirement
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.4.0
+        version: 1.5.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.4.0
+        version: 1.5.0
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -279,6 +279,7 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_observer.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb
+- lib/glimmer-dsl-web/samples/hello/hello_style.rb
 - lib/glimmer-dsl-web/samples/hello/hello_world.rb
 - lib/glimmer-dsl-web/samples/regular/button_counter.rb
 - lib/glimmer-dsl-web/samples/regular/todo_mvc.rb
@@ -314,6 +315,7 @@ files:
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb
 - lib/glimmer/web/component.rb
+- lib/glimmer/web/component/component_style_container.rb
 - lib/glimmer/web/element_proxy.rb
 - lib/glimmer/web/event_proxy.rb
 - lib/glimmer/web/formatting_element_proxy.rb