glimmer-dsl-web 0.4.0 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8b106a50bf2ec2656480068685e725017a8b7a32f49d38459416b01c550e9aa
-  data.tar.gz: ca6c4c2e8028059c5a305c45f181d6f5902e5737d65011dd5ce34b5af334baf0
+  metadata.gz: b8629cf007ddb0ff30d296d3c3dbddaf87572953cdbe9ee18128794a2c435441
+  data.tar.gz: 4353e741c102e61df81da7352a4b999c487e579b235993a8720ecc3ba7b8ec19
 SHA512:
-  metadata.gz: a95444fd3855a6e498e243eb06ffc80e7f25cdbe5ed3b178729450d37f3c528b42919dccddde64caa38e48fcb90b4bb16e42d4f5b3c66425ac2333c5176fe7ad
-  data.tar.gz: fc781cd899da6a3059b6b5b048c7f324f03d231a755403178996d90eed391cbbcb3c2a214eb6bf0b0e2b1e318560e1b8fded988f998582075b181d7ee74093cb
+  metadata.gz: 3c28bcc2664f375e9e7e795f80a104e62d8b73f54e72a6f7d649db92e68da6c3632bf1cede91ae9163a7b29cb4cb573f2bb8988f36bb75ca16be20a551182a34
+  data.tar.gz: 4d08a8fcf6b8d6ec2ab61d0e0e940806336c514e2f9ed01179f0b3d0a8299957ce4d0d2677ac5cd0bf3f84d114cfca69fc46592378a9d720ec4f52a6f278be16

data/CHANGELOG.md

@@ -1,11 +1,23 @@
 # Change Log
 
+## 0.4.2
+
+- Support element inline style data-binding (e.g. `style(:background_color) <= [@button_model, :background_color]`)
+- Support SVG element keywords
+- Hello, SVG! Sample: `require 'glimmer-dsl-web/samples/hello/hello_svg'`
+
+## 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 components, without repeating style for repeating components
+- 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
-- 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

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.4.0 (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.2 (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,7 +8,7 @@
 
 **(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.
 
@@ -1345,6 +1345,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Todo MVC](#todo-mvc)
   - [Design Principles](#design-principles)
   - [Supporting Libraries](#supporting-libraries)
+  - [Influences and Inspiration](#influences-and-inspiration)
   - [Glimmer Process](#glimmer-process)
   - [Help](#help)
     - [Issues](#issues)
@@ -1391,7 +1392,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.4.0'
+gem 'glimmer-dsl-web', '~> 0.4.2'
 ```
 
 Run:
@@ -1620,7 +1621,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.4.0'
+gem 'glimmer-dsl-web', '~> 0.4.2'
 ```
 
 Run:
@@ -1881,7 +1882,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
 
@@ -3444,6 +3449,15 @@ Here is a list of notable 3rd party gems used by Glimmer DSL for Web:
 - [opal-async](https://github.com/AndyObtiva/opal-async): Non-blocking tasks and enumerators for Web.
 - [to_collection](https://github.com/AndyObtiva/to_collection): Treat an array of objects and a singular object uniformly as a collection of objects.
 
+## Influences and Inspiration
+
+- https://github.com/inesita-rb/inesita
+- https://github.com/opal/paggio
+- https://github.com/ruby-hyperloop/hyperloop
+- https://docs.hyperstack.org/
+- https://github.com/AndyObtiva/glimmer-dsl-opal
+- https://github.com/AndyObtiva/glimmer
+
 ## Glimmer Process
 
 [Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is the lightweight software development process used for building Glimmer libraries and Glimmer apps, which goes beyond Agile, rendering all Agile processes obsolete. [Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is simply made up of 7 guidelines to pick and choose as necessary until software development needs are satisfied.

data/VERSION

@@ -1 +1 @@
-0.4.0
+0.4.2

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.4.0 ruby lib
+# stub: glimmer-dsl-web 0.4.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.4.0"
+  s.version = "0.4.2"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-07-22"
+  s.date = "2024-07-28"
   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 = [
@@ -47,6 +47,7 @@ Gem::Specification.new do |s|
     "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_svg.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",
@@ -72,12 +73,13 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/element_expression.rb",
     "lib/glimmer/dsl/web/formatting_element_expression.rb",
     "lib/glimmer/dsl/web/general_element_expression.rb",
+    "lib/glimmer/dsl/web/inline_style_data_binding_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
     "lib/glimmer/dsl/web/observe_expression.rb",
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
     "lib/glimmer/dsl/web/span_expression.rb",
-    "lib/glimmer/dsl/web/style_expression.rb",
+    "lib/glimmer/dsl/web/style_element_expression.rb",
     "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
@@ -97,7 +99,7 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.8.0"])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0"])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.0"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.1"])
   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

@@ -6,30 +6,46 @@ module Glimmer
     class ElementBinding
       include Observable
       include Observer
-
-      attr_reader :element, :property
-      def initialize(element, property, translator = nil)
+      
+      attr_reader :element, :property, :translator, :sub_property
+      def initialize(element, property, translator: nil)
         @element = element
-        @property = property
+        if (property_parts = property.to_s.match(Glimmer::Web::ElementProxy::REGEX_STYLE_SUB_PROPERTY))
+          @property, @sub_property = property_parts.to_a.drop(1)
+          @sub_property = @sub_property.gsub('_', '-')
+        else
+          @property = property
+        end
         @translator = translator
 
-        # TODO implement automatic cleanup upon calling element.remove
-        # Alternatively, have this be built into ElementProxy and remove this code
-#         if @element.respond_to?(:dispose)
-#           @element.on_widget_disposed do |dispose_event|
-#             unregister_all_observables
-#           end
-#         end
+        if @element.respond_to?(:remove)
+          unregister_handler = lambda { |dispose_event| unregister_all_observables }
+          @element.handle_observation_request('on_remove', unregister_handler)
+        end
       end
       
       def call(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
+        unless converted_value == evaluated_property_value
+          if @sub_property
+            if @property.to_s == 'style'
+              @element.style_property(@sub_property, converted_value)
+            end
+          else
+            @element.send("#{@property}=", converted_value)
+          end
+        end
       end
       
       def evaluate_property
-        @element.send(@property)
+        if @sub_property
+          if @property.to_s == 'style'
+            @element.style_property(@sub_property)
+          end
+        else
+          @element.send(@property)
+        end
       end
     end
   end

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

@@ -26,7 +26,8 @@ require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
 require 'glimmer/dsl/web/a_expression'
 require 'glimmer/dsl/web/span_expression'
-require 'glimmer/dsl/web/style_expression'
+require 'glimmer/dsl/web/style_element_expression'
+require 'glimmer/dsl/web/inline_style_data_binding_expression'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'
@@ -41,8 +42,9 @@ module Glimmer
        Web,
        %w[
          listener
-         style
+         style_element
          content_data_binding
+         inline_style_data_binding
          component
          formatting_element
          data_binding

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

@@ -10,7 +10,18 @@ module Glimmer
         include GeneralElementExpression
         
         def can_interpret?(parent, keyword, *args, &block)
-          Glimmer::Web::ElementProxy.keyword_supported?(keyword)
+          Glimmer::Web::ElementProxy.keyword_supported?(keyword) &&
+            (
+              args.empty? ||
+              args.size == 1 && args.first.is_a?(String) ||
+              args.size == 1 && args.first.is_a?(Hash) ||
+              args.size == 2 && args.first.is_a?(String) && args.last.is_a?(Hash)
+            ) &&
+            ( # ensure SVG keywords only live under SVG element (unless it's the SVG element itself)
+              !Glimmer::Web::ElementProxy.svg_keyword_supported?(keyword) ||
+              keyword == 'svg' ||
+              parent.find_ancestor(include_self: true) { |ancestor| ancestor.keyword == 'svg' }
+            )
         end
       end
     end

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

@@ -0,0 +1,21 @@
+require 'glimmer/dsl/expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class InlineStyleDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'style' &&
+            block.nil? &&
+            args.size == 1 &&
+            textual?(args.first)
+        end
+        
+        def interpret(parent, keyword, *args, &block)
+          parent_attribute = "#{keyword}_#{args.first.to_s.underscore}"
+          Glimmer::DataBinding::Shine.new(parent, parent_attribute)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/dsl/web/{style_expression.rb → style_element_expression.rb}

@@ -4,7 +4,7 @@ require 'glimmer/dsl/web/general_element_expression'
 module Glimmer
   module DSL
     module Web
-      class StyleExpression < Expression
+      class StyleElementExpression < Expression
         include GeneralElementExpression
         include Glimmer
         

data/lib/glimmer/web/element_proxy.rb

@@ -31,6 +31,14 @@ module Glimmer
           ELEMENT_KEYWORDS.include?(keyword.to_s)
         end
       
+        def html_keyword_supported?(keyword)
+          HTML_ELEMENT_KEYWORDS.include?(keyword.to_s)
+        end
+      
+        def svg_keyword_supported?(keyword)
+          SVG_ELEMENT_KEYWORDS.include?(keyword.to_s)
+        end
+      
         # NOTE: Avoid using this method until we start supporting ElementProxy subclasses
         # in which case, we must cache them to avoid the slow performance of element_type
         # Factory Method that translates a Glimmer DSL keyword into a ElementProxy object
@@ -94,7 +102,7 @@ module Glimmer
       
       Event = Struct.new(:widget, keyword_init: true)
       
-      ELEMENT_KEYWORDS = [
+      HTML_ELEMENT_KEYWORDS = [
         "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio",
         "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body",
         "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "data",
@@ -110,6 +118,19 @@ module Glimmer
         "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt",
         "u", "ul", "var", "video", "wbr", "xmp",
       ]
+      
+      SVG_ELEMENT_KEYWORDS = [
+        "animate", "animateMotion", "animateTransform", "circle", "clipPath", "defs", "desc", "ellipse",
+        "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+        "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA",
+        "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode",
+        "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile",
+        "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker",
+        "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
+        "set", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use", "view",
+      ].map(&:downcase)
+ 
+      ELEMENT_KEYWORDS = HTML_ELEMENT_KEYWORDS + SVG_ELEMENT_KEYWORDS
 
       GLIMMER_ATTRIBUTES = [:parent]
       PROPERTY_ALIASES = {
@@ -122,6 +143,7 @@ module Glimmer
       REGEX_FORMAT_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
+      REGEX_STYLE_SUB_PROPERTY = /^(style)_(.*)$/
       
       attr_reader :keyword, :parent, :parent_component, :component, :args, :options, :children, :enabled, :foreground, :background, :removed, :rendered
       alias rendered? rendered
@@ -176,6 +198,14 @@ module Glimmer
         dom_element.attr('class').to_s.split if rendered?
       end
       
+      def html?
+        ElementProxy.html_keyword_supported?(keyword)
+      end
+      
+      def svg?
+        ElementProxy.svg_keyword_supported?(keyword)
+      end
+      
       def remove
         return if @removed
         on_remove_listeners = listeners_for('on_remove').dup
@@ -233,9 +263,16 @@ module Glimmer
         end
         parents_array
       end
+      alias ancestors parents
 
-      def dialog_ancestor
-        parents.detect {|p| p.is_a?(DialogProxy)}
+      def find_ancestor(include_self: false, &condition)
+        current_element_proxy = self
+        return current_element_proxy if include_self && condition.call(current_element_proxy)
+        until current_element_proxy.parent.nil?
+          current_element_proxy = current_element_proxy.parent
+          return current_element_proxy if condition.call(current_element_proxy)
+        end
+        nil
       end
       
       def print
@@ -272,6 +309,21 @@ module Glimmer
         end
       end
       
+      def style_property(property, value = nil)
+        if rendered?
+          property = property.to_s.gsub('_', '-')
+          if value.nil?
+            dom_element.css(property)
+          else
+            dom_element.css(property, value)
+          end
+        else
+          enqueue_args = ['style_property', property]
+          enqueue_args << value unless value.nil?
+          enqueue_post_render_method_call(*enqueue_args)
+        end
+      end
+      
       def parent_selector
         @parent&.selector
       end
@@ -372,12 +424,7 @@ module Glimmer
       end
       
       def html_options
-        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
-        body_class = (framework_css_classes + 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)
@@ -416,8 +463,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)
@@ -555,13 +602,12 @@ module Glimmer
       
       def data_bind(property, model_binding)
         element_binding_read_translator = value_converters_for_input_type(type)&.[](:model_to_view)
-        element_binding_parameters = [self, property, element_binding_read_translator]
-        element_binding = DataBinding::ElementBinding.new(*element_binding_parameters)
+        element_binding = DataBinding::ElementBinding.new(self, property, translator: element_binding_read_translator)
         #TODO make this options observer dependent and all similar observers in element specific data binding handlers
         element_binding.observe(model_binding)
         element_binding.call(model_binding.evaluate_property)
         data_bindings[element_binding] = model_binding
-        unless model_binding.binding_options[:read_only]
+        if !model_binding.binding_options[:read_only]
           # TODO add guards against nil cases for hash below
           listener_keyword = data_binding_listener_for_element_and_property(keyword, property)
           if listener_keyword
@@ -610,14 +656,23 @@ module Glimmer
           dom_element.respond_to?(method_name, include_private) ||
           (!dom_element.prop(property_name).nil? && !dom_element.prop(property_name).is_a?(Proc)) ||
           (!dom_element.prop(unnormalized_property_name).nil? && !dom_element.prop(unnormalized_property_name).is_a?(Proc)) ||
-          method_name.to_s.start_with?('on_')
+          method_name.to_s.start_with?('on_') ||
+          method_name.to_s.start_with?('style_')
       end
       
       def method_missing(method_name, *args, &block)
         # TODO consider doing more correct checking of availability of properties/methods using native ticks
         property_name = property_name_for(method_name)
         unnormalized_property_name = unnormalized_property_name_for(method_name)
-        if method_name.to_s.start_with?('on_')
+        if method_name.to_s.start_with?('style_')
+          property, sub_property = method_name.to_s.match(REGEX_STYLE_SUB_PROPERTY).to_a.drop(1)
+          sub_property = sub_property.gsub('_', '-')
+          if args.empty?
+            style_property(sub_property)
+          else
+            style_property(sub_property, args.first) # TODO in the future, support more sophisticated forms of CSS sub-property values, like [1.px, :solid, :black] for border
+          end
+        elsif method_name.to_s.start_with?('on_')
           handle_observation_request(method_name, block)
         elsif dom_element.respond_to?(method_name)
           if rendered?
@@ -831,6 +886,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_style.rb

@@ -29,13 +29,14 @@ class ButtonModel
   FONT_SIZE_MIN = 40
   FONT_SIZE_MAX = 200
   
-  attr_accessor :text, :pushed, :width, :height, :font_size
+  attr_accessor :text, :pushed, :background_color, :width, :height, :font_size
   
   def initialize
     @text = 'Push'
     @width = WIDTH_MIN
     @height = HEIGHT_MIN
     @font_size = FONT_SIZE_MIN
+    @background_color = '#add8e6'
   end
   
   def push
@@ -61,6 +62,16 @@ class ButtonModel
     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
@@ -76,17 +87,11 @@ class StyledButton
                       on_read: ->(pushed) { pushed ? 'pushed' : 'pulled' }
                     ]
       
-      style <= [ button_model, :width,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
-      
-      style <= [ button_model, :height,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
-      
-      style <= [ button_model, :font_size,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
+      style(:width) <= [button_model, :width, on_read: :px]
+      style(:height) <= [button_model, :height, on_read: :px]
+      style(:font_size) <= [button_model, :font_size, on_read: :px]
+      style(:background_color) <= [button_model, :background_color]
+      style(:border_color) <= [button_model, :border_color, computed_by: :background_color]
       
       onclick do
         button_model.push
@@ -94,32 +99,22 @@ class StyledButton
     }
   }
   
-  style {'
-    button {
+  style {"
+    .#{component_element_class} {
       font-family: Courrier New, Courrier;
       border-radius: 5px;
       border-width: 17px;
-      border-color: #ACC7D5;
-      background-color: #ADD8E6;
       margin: 5px;
     }
     
-    button.pulled {
+    .#{component_element_class}.pulled {
       border-style: outset;
     }
     
-    button.pushed {
+    .#{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;
-    "
-  end
+  "}
 end
 
 class StyledButtonRangeInput
@@ -137,6 +132,19 @@ class StyledButtonRangeInput
   }
 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
   
@@ -145,32 +153,41 @@ class HelloStyle
   end
   
   markup {
-    div(class: 'hello-style') {
-      div(class: 'form-row') {
-        label('Styled Button Width:', for: 'styled-button-width-input')
+    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')
-      }
-      div(class: 'form-row') {
-        label('Styled Button Height:', for: 'styled-button-height-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')
-      }
-      div(class: 'form-row') {
-        label('Styled Button Font Size:', for: 'styled-button-font-size-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 {'
-    .hello-style {
+  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;
     }
     
-    .hello-style .form-row {
-      margin: 10px 0;
+    .#{component_element_class} .styled-button {
+      display: block;
     }
-  '}
+  "}
 end
 
 Document.ready? do

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

@@ -0,0 +1,45 @@
+# 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 HelloSvg
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      svg(width: '100%', height: '100') {
+        circle(cx: '50', cy: '50', r: '50', style: 'fill:blue;') {
+          animate(attributename: 'cx', begin: '0s', dur: '8s', from: '50', to: '90%', repeatcount: 'indefinite')
+        }
+      }
+      svg(width: '200', height: '180') {
+        rect(x: '30', y: '30', height: '110', width: '110', style: 'stroke:green;fill:red') {
+          animatetransform(attributename: 'transform', begin: '0.1s', dur: '10s', type: 'rotate', from: '0 85 85', to: '360 85 85', repeatcount: 'indefinite')
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloSvg.render
+end

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

@@ -3,7 +3,7 @@ require_relative 'todo_input'
 class NewTodoInput < TodoInput
   option :presenter
   
-  markup { # evaluated against instance as a smart default convention
+  markup { # evaluated against instance as a smart convention
     input(placeholder: "What needs to be done?", autofocus: "") {
       value <=> [presenter.new_todo, :task]
     
@@ -13,10 +13,10 @@ class NewTodoInput < TodoInput
     }
   }
   
-  style { # evaluated against class as a smart default convention (common to all instances)
+  style { # evaluated against class as a smart convention (common to all instances)
     todo_input_styles
     
-    rule(".#{component_element_class}") { # built-in component_class.component_element_class (e.g. NewTodoInput has CSS class as new-todo-input)
+    rule(".#{component_element_class}") { # NewTodoInput has component_element_class as 'new-todo-input'
       padding '16px 16px 16px 60px'
       height '65px'
       border 'none'
@@ -24,7 +24,7 @@ class NewTodoInput < TodoInput
       box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
     }
     
-    rule(".#{component_element_class}::placeholder") { # built-in component_class.component_element_class (e.g. NewTodoInput has CSS class as new-todo-input)
+    rule(".#{component_element_class}::placeholder") {
       font_style 'italic'
       font_weight '400'
       color 'rgba(0, 0, 0, 0.4)'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.2
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-22 00:00:00.000000000 Z
+date: 2024-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.5.0
+        version: 1.5.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.5.0
+        version: 1.5.1
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -280,6 +280,7 @@ files:
 - 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_svg.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
@@ -305,12 +306,13 @@ files:
 - lib/glimmer/dsl/web/element_expression.rb
 - lib/glimmer/dsl/web/formatting_element_expression.rb
 - lib/glimmer/dsl/web/general_element_expression.rb
+- lib/glimmer/dsl/web/inline_style_data_binding_expression.rb
 - lib/glimmer/dsl/web/listener_expression.rb
 - lib/glimmer/dsl/web/observe_expression.rb
 - lib/glimmer/dsl/web/property_expression.rb
 - lib/glimmer/dsl/web/shine_data_binding_expression.rb
 - lib/glimmer/dsl/web/span_expression.rb
-- lib/glimmer/dsl/web/style_expression.rb
+- lib/glimmer/dsl/web/style_element_expression.rb
 - lib/glimmer/helpers/glimmer_helper.rb
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb