glimmer-dsl-web 0.1.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84438bf8ca94283ebca35c684038f1ba326c9301782508bdf07b7c4e23ecb391
-  data.tar.gz: f7246af497c04e9c509457444ac9c17c8617aa881fca82adb4561473f1d18044
+  metadata.gz: 528b824876642a7d3cabb52d76ba8a93f55273443f0a4a25a308f14d80460bc4
+  data.tar.gz: db5ba4f41d4f863074bd7d5e291b9b753995fb056612f763945ea4ad10ed2c7d
 SHA512:
-  metadata.gz: b47263b248b7952d58d9fe8fb03f0614f8c917e025310839f7ab311f33fc31e292fe257ffec8f1c487843eab7814253829c00579ea2132385b4064b75e801890
-  data.tar.gz: 6be5e5bab5900605d78977e703d27ac95dac303fa3855d52bd4f7dd4a1e8c8f090d49b95c57a5abe3155dde9adece9a028cfa7afc3872b9fcead2ce1a417676d
+  metadata.gz: 820828cc1d4f45fbc23df7e1296f71e24959fe811e5b380470cbc8126484ffe9bef70351eb4534777e7398f1bcd30363e30172ebe33b1828871318603fe5a906
+  data.tar.gz: 52a96a0c75fc7cc57b8e6938784f75079f3b5caf3d4b5a49801604b8061aec73518a23576a7ab6346937f8d4899c70b0b6efa33faf9ae1d35c75cbded956101a

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 0.2.2
+
+- Fix bug in content data-binding that was caused by recent performance optimizations (+ fix Hello, Content Data-Binding! sample)
+- Fix bug in rendering formatting elements that was caused by recent performance optimizations (+ fix Hello, Paragraph! sample)
+
+## 0.2.1
+
+- Optimize performance (~800% faster):
+  - Optimize performance (~20% faster than 0.2.0) by not using glimmer-dsl-xml for rendering dom elements in the frontend as it is more suitable for backend rendering and we already have a separate dsl for the frontend
+  - Optimize performance (~287% faster than previous bullet point) by adding Glimmer shortcut methods for all HTML element DSL keywords
+  - Optimize performance (~235% faster than previous bullet point) by not selecting ElementProxy subclass dynamically for each element, yet always using ElementProxy
+
+## 0.2.0
+
+- Support `style` element content as Glimmer DSL for CSS syntax (Ruby Programmable CSS) as an alternative to a CSS `String`
+
 ## 0.1.1
 
 - Upgrade to opal-jquery 0.5.1 (adds `# backtick_javascript: true` where needed to satisfy new Opal requirement)

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.1.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.2.2 (Beta)
 ## Ruby in the Browser Web GUI Frontend Library
 [![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)
@@ -131,6 +131,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -392,15 +393,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -528,20 +529,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -708,14 +707,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -957,14 +954,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -1146,7 +1141,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.1.1'
+gem 'glimmer-dsl-web', '~> 0.2.2'
 ```
 
 Run:
@@ -1367,7 +1362,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.1.1'
+gem 'glimmer-dsl-web', '~> 0.2.2'
 ```
 
 Run:
@@ -1764,6 +1759,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;
@@ -2082,14 +2078,12 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   
@@ -2217,20 +2211,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }
@@ -2397,14 +2389,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2646,14 +2636,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       
@@ -2850,17 +2838,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

data/VERSION

@@ -1 +1 @@
-0.1.1
+0.2.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.1.1 ruby lib
+# stub: glimmer-dsl-web 0.2.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.1.1".freeze
+  s.version = "0.2.2".freeze
 
   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-01-08"
+  s.date = "2024-01-09"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) enables building Web GUI 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 library in existence. The library follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) while supporting 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. And, modular design is supported with Glimmer Web Components. You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This library relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -58,6 +58,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/select_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
+    "lib/glimmer/dsl/web/style_expression.rb",
     "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
@@ -76,7 +77,7 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.2".freeze])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.3".freeze])
   s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
   s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
   s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])

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

@@ -24,8 +24,9 @@ require 'glimmer/dsl/web/element_expression'
 require 'glimmer/dsl/web/formatting_element_expression'
 require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
-require 'glimmer/dsl/web/p_expression'
-require 'glimmer/dsl/web/select_expression'
+# require 'glimmer/dsl/web/p_expression'
+# require 'glimmer/dsl/web/select_expression'
+require 'glimmer/dsl/web/style_expression'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'

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

@@ -16,3 +16,14 @@ module Glimmer
     end
   end
 end
+
+module Glimmer
+  # Optimize performance through shortcut methods for all HTML elements that circumvent the DSL chain of responsibility
+  element_expression = Glimmer::DSL::Web::ElementExpression.new
+  (Glimmer::Web::ElementProxy::ELEMENT_KEYWORDS - ['style']).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/dsl/web/general_element_expression.rb

@@ -8,7 +8,7 @@ module Glimmer
         include ParentExpression
 
         def interpret(parent, keyword, *args, &block)
-          Glimmer::Web::ElementProxy.for(keyword, parent, args, block)
+          Glimmer::Web::ElementProxy.new(keyword, parent, args, block)
         end
         
         def add_content(parent, keyword, *args, &block)

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

@@ -0,0 +1,27 @@
+require 'glimmer/dsl/static_expression'
+require 'glimmer/dsl/web/general_element_expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class StyleExpression < StaticExpression
+        include GeneralElementExpression
+        include Glimmer
+        
+        def add_content(parent, keyword, *args, &block)
+          if parent.rendered? || parent.skip_content_on_render_blocks?
+            return_value = css(&block).to_s
+            return_value = super(parent, keyword, *args, &block) if return_value.to_s.empty?
+            if return_value.is_a?(String) && parent.dom_element.text.to_s.empty?
+              parent.add_text_content(return_value)
+            end
+            parent.post_add_content
+            return_value
+          else
+            parent.add_content_on_render(&block)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/web/element_proxy.rb

@@ -31,11 +31,14 @@ module Glimmer
           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
         def for(keyword, parent, args, block)
           element_type(keyword).new(keyword, parent, args, block)
         end
         
+        # NOTE: Avoid using this method for now as it has slow performance
         # returns Ruby proxy class (type) that would handle this keyword
         def element_type(keyword)
           class_name_main = "#{keyword.camelcase(:upper)}Proxy"
@@ -67,6 +70,19 @@ module Glimmer
         def widget_handling_listener
           @@widget_handling_listener
         end
+        
+        def render_html(element, attributes, content = nil)
+          attributes = attributes.reduce('') do |output, option_pair|
+            attribute, value = option_pair
+            value = value.to_s.sub('"', '"').sub("'", ''')
+            output += " #{attribute}=\"#{value}\""
+          end
+          if content.nil?
+            "<#{element}#{attributes} />"
+          else
+            "<#{element}#{attributes}>#{content}</#{element}>"
+          end
+        end
       end
       
       include Glimmer
@@ -74,18 +90,18 @@ module Glimmer
       Event = Struct.new(:widget, keyword_init: true)
       
       ELEMENT_KEYWORDS = [
-        "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b",
-        "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br",
-        "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data",
-        "datalist", "dd", "decorator", "del", "details", "dfn", "dir", "div", "dl", "dt",
-        "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame",
+        "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",
+        "datalist", "dd", "decorator", "details", "dfn", "dir", "div", "dl", "dt",
+        "element", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame",
         "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup",
-        "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen",
-        "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "menu",
+        "hr", "html", "iframe", "img", "input", "isindex", "kbd", "keygen",
+        "label", "legend", "li", "link", "listing", "main", "map", "marquee", "menu",
         "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup",
         "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt",
-        "ruby", "s", "samp", "script", "section", "select", "shadow", "small", "source", "spacer",
-        "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td",
+        "ruby", "s", "samp", "script", "section", "select", "shadow", "source", "spacer",
+        "span", "strike", "style", "summary", "table", "tbody", "td",
         "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt",
         "u", "ul", "var", "video", "wbr", "xmp",
       ]
@@ -249,8 +265,7 @@ module Glimmer
           @parent = nil
         end
         the_parent_dom_element = custom_parent_dom_element || parent_dom_element
-        old_element = dom_element
-        brand_new = @dom.nil? || old_element.empty? || !options[:parent].to_s.empty? || brand_new
+        brand_new ||= @dom.nil? || !options[:parent].to_s.empty? || (old_element = dom_element).empty?
         build_dom(layout: !custom_parent_dom_element) # TODO handle custom parent layout by passing parent instead of parent dom element
         if brand_new
           attach(the_parent_dom_element)
@@ -310,19 +325,16 @@ module Glimmer
       
       def build_dom(layout: true)
         # TODO consider passing parent element instead and having table item include a table cell widget only for opal
-        @dom = nil
         @dom = dom # TODO unify how to build dom for most widgets based on element, id, and name (class)
-        @dom
       end
             
       def dom
         # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
         # TODO check if we need to avoid rendering content block if no content is available
-        @dom ||= html {
-          send(keyword, html_options) {
-            args.first if args.first.is_a?(String)
-          }
-        }.to_s
+        @dom ||= begin
+          content = args.first if args.first.is_a?(String)
+          ElementProxy.render_html(keyword, html_options, content)
+        end
       end
       
       def html_options

data/lib/glimmer/web/formatting_element_proxy.rb

@@ -21,6 +21,8 @@
 # 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/web/element_proxy'
+
 module Glimmer
   module Web
     class FormattingElementProxy
@@ -43,10 +45,7 @@ module Glimmer
             content = args.first.to_s
           end
           attribute_hash = args.last.is_a?(Hash) ? args.last : {}
-          content_block = proc { content } unless content.nil?
-          html {
-            send(keyword, attribute_hash, &content_block)
-          }.to_s
+          ElementProxy.render_html(keyword, attribute_hash, content)
         end
       end
       

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

@@ -158,14 +158,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

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

@@ -117,20 +117,18 @@ Document.ready? do
               }
               
               style {
-                <<~CSS
-                  #{address_div.selector} {
-                    margin: 10px 0;
-                  }
-                  #{address_div.selector} * {
-                    margin: 5px;
-                  }
-                  #{address_div.selector} label {
-                    grid-column: 1;
-                  }
-                  #{address_div.selector} input, #{address_div.selector} select {
-                    grid-column: 2;
-                  }
-                CSS
+                r(address_div.selector) {
+                  margin '10px 0'
+                }
+                r("#{address_div.selector} *") {
+                  margin '5px'
+                }
+                r("#{address_div.selector} label") {
+                  grid_column '1'
+                }
+                r("#{address_div.selector} input, #{address_div.selector} select") {
+                  grid_column '2'
+                }
               }
             }
           }

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

@@ -156,15 +156,15 @@ Document.ready? do
         }
       }
       
+      # Programmable CSS using Glimmer DSL for CSS
       style {
-        <<~CSS
-          #{address_div.selector} * {
-            margin: 5px;
-          }
-          #{address_div.selector} input, #{address_div.selector} select {
-            grid-column: 2;
-          }
-        CSS
+        # `r` is an alias for `rule`, generating a CSS rule
+        r("#{address_div.selector} *") {
+          margin '5px'
+        }
+        r("#{address_div.selector} input, #{address_div.selector} select") {
+          grid_column '2'
+        }
       }
     }
   

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

@@ -79,6 +79,7 @@ Document.ready? do
     
     # CSS Styles
     style {
+      # CSS can be included as a String as done below, or as Glimmer DSL for CSS syntax (Ruby code) as done in other samples
       <<~CSS
         input {
           margin: 5px;

data/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb

@@ -135,14 +135,12 @@ class AddressForm
         }
         
         style {
-          <<~CSS
-            #{address_div.selector} * {
-              margin: 5px;
-            }
-            #{address_div.selector} input, #{address_div.selector} select {
-              grid-column: 2;
-            }
-          CSS
+          r("#{address_div.selector} *") {
+            margin '5px'
+          }
+          r("#{address_div.selector} input, #{address_div.selector} select") {
+            grid_column '2'
+          }
         }
       }
       

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

@@ -100,17 +100,15 @@ Document.ready? do
       }
       
       style {
-        <<~CSS
-          #{container_div.selector} * {
-            margin: 5px;
-          }
-          #{container_div.selector} label {
-            grid-column: 1;
-          }
-          #{container_div.selector} input {
-            grid-column: 2;
-          }
-        CSS
+        r("#{container_div.selector} *") {
+          margin '5px'
+        }
+        r("#{container_div.selector} label") {
+          grid_column '1'
+        }
+        r("#{container_div.selector} input") {
+          grid_column '2'
+        }
       }
     }
   }

data/lib/glimmer-dsl-web.rb

@@ -77,7 +77,6 @@ else
       
   require 'glimmer/dsl/web/dsl'
   require 'glimmer/config/opal_logger'
-  require 'glimmer-dsl-xml'
   require 'glimmer-dsl-css'
   
   Glimmer::Config.loop_max_count = 50 # TODO consider disabling if preferred

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-08 00:00:00.000000000 Z
+date: 2024-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.2.2
+        version: 1.2.3
 - !ruby/object:Gem::Dependency
   name: opal
   requirement: !ruby/object:Gem::Requirement
@@ -287,6 +287,7 @@ files:
 - lib/glimmer/dsl/web/property_expression.rb
 - lib/glimmer/dsl/web/select_expression.rb
 - lib/glimmer/dsl/web/shine_data_binding_expression.rb
+- lib/glimmer/dsl/web/style_expression.rb
 - lib/glimmer/helpers/glimmer_helper.rb
 - lib/glimmer/util/proc_tracker.rb
 - lib/glimmer/web.rb