glimmer-dsl-web 0.4.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a248314a1dcc33c038a9d2f542dce35d31d7d5702435a1c8db5b13b75068470
-  data.tar.gz: 8d83a134edc023c5ec2debe421a7f45e11887671b918ba75532574bf3019525a
+  metadata.gz: b8629cf007ddb0ff30d296d3c3dbddaf87572953cdbe9ee18128794a2c435441
+  data.tar.gz: 4353e741c102e61df81da7352a4b999c487e579b235993a8720ecc3ba7b8ec19
 SHA512:
-  metadata.gz: 64e47e6380713ca42182644f9b20b0f4137deaf951707413d49f3909346be470e66426f09aa5f3a67656808b3bfb3e07bc00ee27a8c54167ec3cbb80f254972e
-  data.tar.gz: d55f560a40cb259fa0b28ee82be1cb066efe26aa4d44f749ec05bcb97ba1f5ff735a44a252100fa8565a8338aa9b53bab0f77c6719e12061f40d40e18b1abb04
+  metadata.gz: 3c28bcc2664f375e9e7e795f80a104e62d8b73f54e72a6f7d649db92e68da6c3632bf1cede91ae9163a7b29cb4cb573f2bb8988f36bb75ca16be20a551182a34
+  data.tar.gz: 4d08a8fcf6b8d6ec2ab61d0e0e940806336c514e2f9ed01179f0b3d0a8299957ce4d0d2677ac5cd0bf3f84d114cfca69fc46592378a9d720ec4f52a6f278be16

data/CHANGELOG.md

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

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.4.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.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)
@@ -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.1'
+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.1'
+gem 'glimmer-dsl-web', '~> 0.4.2'
 ```
 
 Run:
@@ -3448,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.1
+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.1 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.1"
+  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-27"
+  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
@@ -550,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
@@ -605,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?

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

@@ -22,7 +22,6 @@
 require 'glimmer-dsl-web'
 
 class ButtonModel
-  BUTTON_STYLE_ATTRIBUTES = [:width, :height, :font_size, :background_color]
   WIDTH_MIN = 160
   WIDTH_MAX = 960
   HEIGHT_MIN = 100
@@ -30,7 +29,7 @@ class ButtonModel
   FONT_SIZE_MIN = 40
   FONT_SIZE_MAX = 200
   
-  attr_accessor :text, :pushed, *BUTTON_STYLE_ATTRIBUTES
+  attr_accessor :text, :pushed, :background_color, :width, :height, :font_size
   
   def initialize
     @text = 'Push'
@@ -88,11 +87,11 @@ class StyledButton
                       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
+      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
@@ -116,16 +115,6 @@ class StyledButton
       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

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.2
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-27 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