glimmer-dsl-web 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 162d98e6fa4d8eefcec1f4edb2f5af6c3d5d3a88aaa01704ded825b982aabbd9
-  data.tar.gz: 8c133105ac1cf160658c476771a9b58c0ac351116a1b919cdef37db19bd085e7
+  metadata.gz: b8b106a50bf2ec2656480068685e725017a8b7a32f49d38459416b01c550e9aa
+  data.tar.gz: ca6c4c2e8028059c5a305c45f181d6f5902e5737d65011dd5ce34b5af334baf0
 SHA512:
-  metadata.gz: 5bc70f98db8b2fec83310e789967447663f9d1d7017ad6dd8b1984ce5e520ef835430d5f5b8c885fa92282d63617a58ba42cb30dda6b0212cafd63e3ce378b93
-  data.tar.gz: 75561cba8a7a7d61e71e286e197dbbb80879261715500249ddd565f0833273777039632f2553a1cb5e0e3c4c1258704fc83f73ea7e163c1d4ab64a0af0e2f307
+  metadata.gz: a95444fd3855a6e498e243eb06ffc80e7f25cdbe5ed3b178729450d37f3c528b42919dccddde64caa38e48fcb90b4bb16e42d4f5b3c66425ac2333c5176fe7ad
+  data.tar.gz: fc781cd899da6a3059b6b5b048c7f324f03d231a755403178996d90eed391cbbcb3c2a214eb6bf0b0e2b1e318560e1b8fded988f998582075b181d7ee74093cb

data/CHANGELOG.md

@@ -1,10 +1,27 @@
 # Change Log
 
+## 0.4.0
+
+- Support `style {}` block in `Glimmer::Web::Component` that would automatically add style in one place for all components, without repeating style for repeating components
+- 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
+- Hello, Style! Sample: `require 'glimmer-dsl-web/samples/hello/hello_style'`
+- 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,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.3.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.4.0 (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)
@@ -14,7 +14,7 @@ You can finally have Ruby developer happiness and productivity in the Frontend!
 
 [Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage), 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.1'
+gem 'glimmer-dsl-web', '~> 0.4.0'
 ```
 
 Run:
@@ -1562,7 +1620,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.3.1'
+gem 'glimmer-dsl-web', '~> 0.4.0'
 ```
 
 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.
@@ -2256,7 +2316,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 +2451,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 +3432,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.1
+0.4.0

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.1 ruby lib
+# stub: glimmer-dsl-web 0.4.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.3.1"
+  s.version = "0.4.0"
 
   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-01"
+  s.date = "2024-07-22"
   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.8"])
+  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/data_binding/element_binding.rb

@@ -4,7 +4,6 @@ require 'glimmer/data_binding/observer'
 module Glimmer
   module DataBinding
     class ElementBinding
-      include Glimmer
       include Observable
       include Observer
 
@@ -12,7 +11,7 @@ module Glimmer
       def initialize(element, property, translator = nil)
         @element = element
         @property = property
-        @translator = translator || proc {|value| value}
+        @translator = translator
 
         # TODO implement automatic cleanup upon calling element.remove
         # Alternatively, have this be built into ElementProxy and remove this code
@@ -24,8 +23,9 @@ module Glimmer
       end
       
       def call(value)
-        converted_value = translated_value = @translator.call(value, evaluate_property)
-        @element.send("#{@property}=", converted_value) unless evaluate_property == converted_value
+        evaluated_property_value = evaluate_property
+        converted_value = @translator&.call(value, evaluated_property_value) || value
+        @element.send("#{@property}=", converted_value) unless converted_value == evaluated_property_value
       end
       
       def evaluate_property

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

@@ -8,7 +8,7 @@ module Glimmer
         include ParentExpression
 
         def can_interpret?(parent, keyword, *args, &block)
-          !!Glimmer::Web::Component.for(keyword)
+          Glimmer::Web::Component.for(keyword)
         end
   
         def interpret(parent, keyword, *args, &block)

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

@@ -40,14 +40,14 @@ module Glimmer
       Engine.add_dynamic_expressions(
        Web,
        %w[
-         component
          listener
-         data_binding
-         property
-         content_data_binding
-         shine_data_binding
          style
+         content_data_binding
+         component
          formatting_element
+         data_binding
+         shine_data_binding
+         property
        ]
       )
     end

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

@@ -17,3 +17,14 @@ module Glimmer
     end
   end
 end
+
+module Glimmer
+  # Optimize performance through shortcut methods for all HTML formatting elements that circumvent the DSL chain of responsibility
+  element_expression = Glimmer::DSL::Web::FormattingElementExpression.new
+  Glimmer::Web::FormattingElementProxy::FORMATTING_ELEMENT_KEYWORDS.each do |keyword|
+    Glimmer::DSL::Engine.static_expressions[keyword] ||= Concurrent::Hash.new
+    element_expression_dsl = element_expression.class.dsl
+    Glimmer::DSL::Engine.static_expressions[keyword][element_expression_dsl] = element_expression
+    Glimmer.send(:define_method, keyword, &Glimmer::DSL::Engine::STATIC_EXPRESSION_METHOD_FACTORY.call(keyword))
+  end
+end

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
@@ -119,84 +131,129 @@ module Glimmer
         end
       end
       
+      ADD_COMPONENT_KEYWORDS_UPON_INHERITANCE = proc do
+        class << self
+          def inherited(subclass)
+            Glimmer::Web::Component.add_component_keyword_to_classes_map_for(subclass)
+            subclass.class_eval(&Glimmer::Web::Component::ADD_COMPONENT_KEYWORDS_UPON_INHERITANCE)
+          end
+        end
+      end
+      
       class << self
         def included(klass)
           if !klass.ancestors.include?(GlimmerSupersedable)
             klass.extend(ClassMethods)
             klass.include(Glimmer)
             klass.prepend(GlimmerSupersedable)
-            Glimmer::Web::Component.add_component_namespaces_for(klass)
+            Glimmer::Web::Component.add_component_keyword_to_classes_map_for(klass)
+            klass.class_eval(&Glimmer::Web::Component::ADD_COMPONENT_KEYWORDS_UPON_INHERITANCE)
           end
         end
       
         def for(underscored_component_name)
-          extracted_namespaces = underscored_component_name.
-            to_s.
-            split(/__/).map do |namespace|
-              namespace.camelcase(:upper)
-            end
-          Glimmer::Web::Component.component_namespaces.each do |base|
-            extracted_namespaces.reduce(base) do |result, namespace|
-              if !result.constants.include?(namespace)
-                namespace = result.constants.detect {|c| c.to_s.upcase == namespace.to_s.upcase } || namespace
-              end
-              begin
-                constant = result.const_get(namespace)
-                return constant if constant&.respond_to?(:ancestors) &&
-                                   (
-                                     constant&.ancestors&.to_a.include?(Glimmer::Web::Component) ||
-                                     # TODO checking GlimmerSupersedable as a hack because when a class is loaded twice (like when loading samples
-                                     # by reloading ruby files), it loses its Glimmer::Web::Component ancestor as a bug in Opal
-                                     # but somehow the prepend module remains
-                                     constant&.ancestors&.to_a.include?(GlimmerSupersedable)
-                                   )
-                constant
-              rescue => e
-                # Glimmer::Config.logger.debug {"#{e.message}\n#{e.backtrace.join("\n")}"}
-                result
-              end
-            end
+          component_classes = Glimmer::Web::Component.component_keyword_to_classes_map[underscored_component_name]
+          if component_classes.nil? || component_classes.empty?
+            Glimmer::Config.logger.debug {"#{underscored_component_name} has no Glimmer web component class!" }
+            nil
+          else
+            component_class = component_classes.first
           end
-          raise "#{underscored_component_name} has no Glimmer web component class!"
-        rescue => e
-          Glimmer::Config.logger.debug {e.message}
-          Glimmer::Config.logger.debug {"#{e.message}\n#{e.backtrace.join("\n")}"}
-          nil
         end
  
-        def add_component_namespaces_for(klass)
-          Glimmer::Web::Component.namespaces_for_class(klass).drop(1).each do |namespace|
-            Glimmer::Web::Component.component_namespaces << namespace
+        def add_component_keyword_to_classes_map_for(component_class)
+          keywords_for_class(component_class).each do |keyword|
+            Glimmer::Web::Component.component_keyword_to_classes_map[keyword] ||= []
+            Glimmer::Web::Component.component_keyword_to_classes_map[keyword] << component_class
           end
         end
 
-        def namespaces_for_class(m)
-          return [m] if m.name.nil?
-          namespace_constants = m.name.split(/::/).map(&:to_sym)
-          namespace_constants.reduce([Object]) do |output, namespace_constant|
-            output += [output.last.const_get(namespace_constant)]
-          end[1..-1].uniq.reverse
+        def keywords_for_class(component_class)
+          namespaces = component_class.to_s.split(/::/).map(&:underscore).reverse
+          namespaces.size.times.map { |n| namespaces[0..n].reverse.join('__') }
         end
 
-        def component_namespaces
-          @component_namespaces ||= reset_component_namespaces
+        def component_keyword_to_classes_map
+          @component_keyword_to_classes_map ||= reset_component_keyword_to_classes_map
         end
 
-        def reset_component_namespaces
-          @component_namespaces = Set[Object, Glimmer::Web]
+        def reset_component_keyword_to_classes_map
+          @component_keyword_to_classes_map = {}
         end
         
         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)
@@ -209,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?
@@ -319,6 +380,14 @@ module Glimmer
       def remove
         @markup_root&.remove
       end
+
+      def data_bind(property, model_binding)
+        @markup_root&.data_bind(property, model_binding)
+      end
+      
+      def bind_content(*binding_args, &content_block)
+        @markup_root&.bind_content(*binding_args, &content_block)
+      end
       
       # Returns content block if used as an attribute reader (no args)
       # Otherwise, if a block is passed, it adds it as content to this Glimmer web component
@@ -355,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'