glimmer-dsl-web 0.4.1 → 0.4.3

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

@@ -26,7 +26,9 @@ 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/class_name_inclusion_data_binding'
 require 'glimmer/dsl/web/bind_expression'
 require 'glimmer/dsl/web/data_binding_expression'
 require 'glimmer/dsl/web/content_data_binding_expression'
@@ -41,8 +43,10 @@ module Glimmer
        Web,
        %w[
          listener
-         style
+         style_element
          content_data_binding
+         inline_style_data_binding
+         class_name_inclusion_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/component.rb

@@ -102,6 +102,11 @@ module Glimmer
           self.keyword.gsub('_', '-')
         end
         
+        def component_element_selector
+          ".#{component_element_class}"
+        end
+        alias component_markup_root_selector component_element_selector
+        
         def component_shortcut_element_class
           self.shortcut_keyword.gsub('_', '-')
         end
@@ -203,7 +208,8 @@ module Glimmer
         end
         
         def remove_component_style(component)
-          if Glimmer::Web::Component.any_component_style?(component.class)
+          # 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) == 0 && 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)
@@ -219,7 +225,7 @@ module Glimmer
         end
         
         def component_count(component_class)
-          component_class_to_components_map[component_class].size
+          component_class_to_components_map[component_class]&.size || 0
         end
         
         def components

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,8 @@ 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)_(.*)$/
+      REGEX_CLASS_NAME_SUB_PROPERTY = /^(class_name)_(.*)$/
       
       attr_reader :keyword, :parent, :parent_component, :component, :args, :options, :children, :enabled, :foreground, :background, :removed, :rendered
       alias rendered? rendered
@@ -176,6 +199,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 +264,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 +310,39 @@ module Glimmer
         end
       end
       
+      def class_name_included(one_class_name, value = nil)
+        if rendered?
+          if value.nil?
+            class_name.include?(one_class_name)
+          else
+            if value
+              add_css_class(one_class_name)
+            else
+              remove_css_class(one_class_name)
+            end
+          end
+        else
+          enqueue_args = ['class_name_included', one_class_name]
+          enqueue_args << value unless value.nil?
+          enqueue_post_render_method_call(*enqueue_args)
+        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 +621,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 +675,31 @@ 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_') ||
+          method_name.to_s.start_with?('class_name_')
       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?('class_name_')
+          property, sub_property = method_name.to_s.match(REGEX_CLASS_NAME_SUB_PROPERTY).to_a.drop(1)
+          if args.empty?
+            class_name_included(sub_property)
+          else
+            class_name_included(sub_property, args.first)
+          end
+        elsif 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'
@@ -84,15 +83,14 @@ class StyledButton
     button {
       inner_text <= [button_model, :text, computed_by: :pushed]
       
-      class_name <= [button_model, :pushed,
-                      on_read: ->(pushed) { pushed ? 'pushed' : 'pulled' }
-                    ]
+      class_name(:pushed) <= [button_model, :pushed]
+      class_name(:pulled) <= [button_model, :pushed, on_read: :!]
       
-      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
@@ -100,32 +98,22 @@ class StyledButton
     }
   }
   
-  style {"
-    .#{component_element_class} {
-      font-family: Courrier New, Courrier;
-      border-radius: 5px;
-      border-width: 17px;
-      margin: 5px;
+  style {
+    r(component_element_selector) {
+      font_family 'Courrier New, Courrier'
+      border_radius 5
+      border_width 17
+      margin 5
     }
     
-    .#{component_element_class}.pulled {
-      border-style: outset;
+    r("#{component_element_selector}.pulled") {
+      border_style :outset
     }
     
-    .#{component_element_class}.pushed {
-      border-style: inset;
+    r("#{component_element_selector}.pushed") {
+      border_style :inset
     }
-  "}
-  
-  def button_style_value
-    "
-      width: #{button_model.width}px;
-      height: #{button_model.height}px;
-      font-size: #{button_model.font_size}px;
-      background-color: #{button_model.background_color};
-      border-color: #{button_model.border_color};
-    "
-  end
+  }
 end
 
 class StyledButtonRangeInput
@@ -183,22 +171,22 @@ class HelloStyle
     }
   }
   
-  style {"
-    .styled-button-form {
-      padding: 20px;
-      display: inline-grid;
-      grid-template-columns: auto auto;
+  style {
+    r('.styled-button-form') {
+      padding 20
+      display 'inline-grid'
+      grid_template_columns 'auto auto'
     }
     
-    .styled-button-form label, input {
-      display: block;
-      margin: 5px 5px 5px 0;
+    r('.styled-button-form label, input') {
+      display :block
+      margin '5px 5px 5px 0'
     }
     
-    .#{component_element_class} .styled-button {
-      display: block;
+    r("#{component_element_selector} .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/edit_todo_input.rb

@@ -6,11 +6,16 @@ class EditTodoInput < TodoInput
   
   markup { # evaluated against instance as a smart default convention
     input { |edit_input|
-      style <= [ todo, :editing,
-                 on_read: ->(editing) { editing ? '' : 'display: none;' },
-                 after_read: -> { edit_input.focus if todo.editing? }
-               ]
+      # Data-bind inclusion of `li` `class` `editing` unidirectionally to todo editing attribute,
+      # meaning inclusion of editing class is determined by todo editing boolean attribute.
+      # `after_read` hook will have `input` grab keyboard focus when editing todo.
+      class_name(:editing) <= [ todo, :editing,
+                                after_read: -> { edit_input.focus if todo.editing? }
+                              ]
     
+      # Data-bind `input` `value` property bidirectionally to `todo` `task` attribute
+      # meaning make any changes to the `todo` `task` attribute value automatically update the `input` `value` property
+      # and any changes to the `input` `value` property by the user automatically update the `todo` `task` attribute value.
       value <=> [todo, :task]
       
       onkeyup do |event|
@@ -31,17 +36,21 @@ class EditTodoInput < TodoInput
   style { # evaluated against class as a smart default convention (common to all instances)
     todo_input_styles
     
-    rule("*:has(> .#{component_element_class})") {
-      position 'relative'
+    r("*:has(> #{component_element_selector})") {
+      position :relative
     }
     
-    rule(".#{component_element_class}") {
-      position 'absolute'
-      display 'block'
+    r(component_element_selector) {
+      position :absolute
+      display :none
       width 'calc(100% - 43px)'
       padding '12px 16px'
       margin '0 0 0 43px'
-      top '0'
+      top 0
+    }
+    
+    r("#{component_element_selector}.editing") {
+      display :block
     }
   }
 end

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

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

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

@@ -5,6 +5,9 @@ class NewTodoInput < TodoInput
   
   markup { # evaluated against instance as a smart convention
     input(placeholder: "What needs to be done?", autofocus: "") {
+      # Data-bind `input` `value` property bidirectionally to `presenter.new_todo` `task` attribute
+      # meaning make any changes to the new todo task automatically update the input value
+      # and any changes to the input value by the user automatically update the new todo task value
       value <=> [presenter.new_todo, :task]
     
       onkeyup do |event|
@@ -16,16 +19,16 @@ class NewTodoInput < TodoInput
   style { # evaluated against class as a smart convention (common to all instances)
     todo_input_styles
     
-    rule(".#{component_element_class}") { # NewTodoInput has component_element_class as 'new-todo-input'
+    r(component_element_selector) { # NewTodoInput has component_element_class as 'new-todo-input'
       padding '16px 16px 16px 60px'
-      height '65px'
-      border 'none'
+      height 65
+      border :none
       background 'rgba(0, 0, 0, 0.003)'
       box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
     }
     
-    rule(".#{component_element_class}::placeholder") {
-      font_style 'italic'
+    r("#{component_element_selector}::placeholder") {
+      font_style :italic
       font_weight '400'
       color 'rgba(0, 0, 0, 0.4)'
     }