glimmer-dsl-web 0.3.1 → 0.4.0

data/lib/glimmer/web/element_proxy.rb

@@ -123,13 +123,18 @@ module Glimmer
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
       
-      attr_reader :keyword, :parent, :parent_component, :args, :options, :children, :enabled, :foreground, :background, :removed?, :rendered
+      attr_reader :keyword, :parent, :parent_component, :component, :args, :options, :children, :enabled, :foreground, :background, :removed, :rendered
       alias rendered? rendered
+      alias removed? removed
       
       def initialize(keyword, parent, args, block)
         @keyword = keyword
         @parent = parent.is_a?(Glimmer::Web::Component) ? parent.markup_root : parent
         @parent_component = parent if parent.is_a?(Glimmer::Web::Component)
+        if Component.interpretation_stack.last&.markup_root.nil?
+          @component = Component.interpretation_stack.last
+          @component&.instance_variable_set("@markup_root", self)
+        end
         @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
         if parent.nil?
           options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
@@ -164,7 +169,7 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
-        render if bulk_render? && @parent.nil?
+        render if bulk_render? && @parent.nil? && !rendered?
       end
       
       def css_classes
@@ -172,6 +177,7 @@ module Glimmer
       end
       
       def remove
+        return if @removed
         on_remove_listeners = listeners_for('on_remove').dup
         if rendered?
           @children.dup.each do |child|
@@ -181,6 +187,10 @@ module Glimmer
           dom_element.remove
         end
         parent&.post_remove_child(self)
+        if component
+          Glimmer::Web::Component.remove_component(component)
+          component.remove_style_block
+        end
         @removed = true
         on_remove_listeners.each do |listener|
           listener.original_event_listener.call(EventProxy.new(listener: listener))
@@ -362,7 +372,12 @@ module Glimmer
       end
       
       def html_options
-        body_class = ([name, element_id] + css_classes.to_a).join(' ')
+        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(' ')
         html_options = options.dup
         GLIMMER_ATTRIBUTES.each do |attribute|
           next unless html_options.include?(attribute)
@@ -413,7 +428,7 @@ module Glimmer
         if rendered?
           dom_element.add_class(css_class)
         else
-          enqueue_post_render_method_call('class_name=', value)
+          enqueue_post_render_method_call('add_css_class', css_class)
         end
       end
       
@@ -425,7 +440,7 @@ module Glimmer
         if rendered?
           dom_element.remove_class(css_class)
         else
-          enqueue_post_render_method_call('class_name=', value)
+          enqueue_post_render_method_call('remove_css_class', css_class)
         end
       end
       
@@ -539,8 +554,8 @@ module Glimmer
       end
       
       def data_bind(property, model_binding)
-        element_binding_translator = value_converters_for_input_type(type)[:model_to_view]
-        element_binding_parameters = [self, property, element_binding_translator]
+        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)
         #TODO make this options observer dependent and all similar observers in element specific data binding handlers
         element_binding.observe(model_binding)
@@ -552,7 +567,8 @@ module Glimmer
           if listener_keyword
             data_binding_read_listener = lambda do |event|
               view_property_value = send(property)
-              converted_view_property_value = value_converters_for_input_type(type)[:view_to_model].call(view_property_value, model_binding.evaluate_property)
+              element_binding_write_translator = value_converters_for_input_type(type)&.[](:view_to_model)
+              converted_view_property_value = element_binding_write_translator&.call(view_property_value, model_binding.evaluate_property) || view_property_value
               model_binding.call(converted_view_property_value)
             end
             handle_observation_request(listener_keyword, data_binding_read_listener)
@@ -722,7 +738,7 @@ module Glimmer
       end
       
       def value_converters_for_input_type(input_type)
-        input_value_converters[input_type] || {model_to_view: ->(value, old_value) {value}, view_to_model: ->(value, old_value) {value}}
+        input_value_converters[input_type]
       end
       
       def input_value_converters

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

@@ -29,7 +29,7 @@ class NumberHolder
   end
 end
 
-class HelloObserver
+class HelloObserverDataBinding
   include Glimmer::Web::Component
   
   before_render do
@@ -53,5 +53,5 @@ class HelloObserver
 end
 
 Document.ready? do
-  HelloObserver.render
+  HelloObserverDataBinding.render
 end

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

@@ -0,0 +1,178 @@
+# 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 ButtonModel
+  WIDTH_MIN = 160
+  WIDTH_MAX = 960
+  HEIGHT_MIN = 100
+  HEIGHT_MAX = 600
+  FONT_SIZE_MIN = 40
+  FONT_SIZE_MAX = 200
+  
+  attr_accessor :text, :pushed, :width, :height, :font_size
+  
+  def initialize
+    @text = 'Push'
+    @width = WIDTH_MIN
+    @height = HEIGHT_MIN
+    @font_size = FONT_SIZE_MIN
+  end
+  
+  def push
+    self.pushed = !pushed
+  end
+  
+  def text
+    pushed ? 'Pull' : 'Push'
+  end
+  
+  def width=(value)
+    @width = value
+    self.font_size = @width/4 if @font_size > @width/4
+  end
+  
+  def height=(value)
+    @height = value
+    self.font_size = @height/2.5 if @font_size > @height/2.5
+  end
+  
+  def font_size=(value)
+    @font_size = value
+    self.width = @font_size*4 if @height < @font_size*4
+    self.height = @font_size*2.5 if @height < @font_size*2.5
+  end
+end
+
+class StyledButton
+  include Glimmer::Web::Component
+  
+  option :button_model
+  
+  markup {
+    button {
+      inner_text <= [button_model, :text, computed_by: :pushed]
+      
+      class_name <= [button_model, :pushed,
+                      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
+               ]
+      
+      onclick do
+        button_model.push
+      end
+    }
+  }
+  
+  style {'
+    button {
+      font-family: Courrier New, Courrier;
+      border-radius: 5px;
+      border-width: 17px;
+      border-color: #ACC7D5;
+      background-color: #ADD8E6;
+      margin: 5px;
+    }
+    
+    button.pulled {
+      border-style: outset;
+    }
+    
+    button.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
+  include Glimmer::Web::Component
+  
+  option :button_model
+  option :property
+  option :property_min
+  option :property_max
+  
+  markup {
+    input(type: 'range', min: property_min, max: property_max) {
+      value <=> [button_model, property]
+    }
+  }
+end
+
+class HelloStyle
+  include Glimmer::Web::Component
+  
+  before_render do
+    @button_model = ButtonModel.new
+  end
+  
+  markup {
+    div(class: 'hello-style') {
+      div(class: 'form-row') {
+        label('Styled Button Width:', 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')
+        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')
+        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')
+      }
+      styled_button(button_model: @button_model)
+    }
+  }
+  
+  style {'
+    .hello-style {
+      padding: 20px;
+    }
+    
+    .hello-style .form-row {
+      margin: 10px 0;
+    }
+  '}
+end
+
+Document.ready? do
+  HelloStyle.render
+end

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

@@ -4,11 +4,11 @@ class EditTodoInput < TodoInput
   option :presenter
   option :todo
   
-  markup {
-    input(class: todo_input_class) { |edit_input|
+  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? }
+                 after_read: -> { edit_input.focus if todo.editing? }
                ]
     
       value <=> [todo, :task]
@@ -25,25 +25,17 @@ class EditTodoInput < TodoInput
       onblur do |event|
         todo.save_editing
       end
-      
-      style {
-        todo_input_styles
-      }
     }
   }
-  
-  def todo_input_class
-    'edit-todo'
-  end
-  
-  def todo_input_styles
-    super
     
-    rule("*:has(> .#{todo_input_class})") {
+  style { # evaluated against class as a smart default convention (common to all instances)
+    todo_input_styles
+    
+    rule("*:has(> .#{component_element_class})") {
       position 'relative'
     }
     
-    rule(".#{todo_input_class}") {
+    rule(".#{component_element_class}") {
       position 'absolute'
       display 'block'
       width 'calc(100% - 43px)'
@@ -51,5 +43,5 @@ class EditTodoInput < TodoInput
       margin '0 0 0 43px'
       top '0'
     }
-  end
+  }
 end

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

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

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

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

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

@@ -45,80 +45,80 @@ class TodoFilters
           presenter.clear_completed
         end
       }
+    }
+  }
+  
+  style {
+    rule('.todo-filters') {
+      border_top '1px solid #e6e6e6'
+      font_size '15px'
+      height '20px'
+      padding '10px 15px'
+      text_align 'center'
+    }
+    
+    rule('.todo-filters:before') {
+      bottom '0'
+      box_shadow '0 1px 1px rgba(0,0,0,.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0,0,0,.2)'
+      content '""'
+      height '50px'
+      left '0'
+      overflow 'hidden'
+      position 'absolute'
+      right '0'
+    }
+    
+    rule('.todo-count') {
+      float 'left'
+      text_align 'left'
+    }
+    
+    rule('.todo-count .strong') {
+      font_weight '300'
+    }
+    
+    rule('.filters') {
+      left '0'
+      list_style 'none'
+      margin '0'
+      padding '0'
+      position 'absolute'
+      right '0'
+    }
+    
+    rule('.filters li') {
+      display 'inline'
+    }
+    
+    rule('.filters li a') {
+      border '1px solid transparent'
+      border_radius '3px'
+      color 'inherit'
+      margin '3px'
+      padding '3px 7px'
+      text_decoration 'none'
+      cursor 'pointer'
+    }
+    
+    rule('.filters li a.selected') {
+      border_color '#ce4646'
+    }
+    
+    rule('.clear-completed, html .clear-completed:active') {
+      cursor 'pointer'
+      float 'right'
+      line_height '19px'
+      position 'relative'
+      text_decoration 'none'
+    }
+    
+    media('(max-width: 430px)') {
+      rule('.todo-filters') {
+        height '50px'
+      }
       
-      style {
-        rule('.todo-filters') {
-          border_top '1px solid #e6e6e6'
-          font_size '15px'
-          height '20px'
-          padding '10px 15px'
-          text_align 'center'
-        }
-        
-        rule('.todo-filters:before') {
-          bottom '0'
-          box_shadow '0 1px 1px rgba(0,0,0,.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0,0,0,.2)'
-          content '""'
-          height '50px'
-          left '0'
-          overflow 'hidden'
-          position 'absolute'
-          right '0'
-        }
-        
-        rule('.todo-count') {
-          float 'left'
-          text_align 'left'
-        }
-        
-        rule('.todo-count .strong') {
-          font_weight '300'
-        }
-        
-        rule('.filters') {
-          left '0'
-          list_style 'none'
-          margin '0'
-          padding '0'
-          position 'absolute'
-          right '0'
-        }
-        
-        rule('.filters li') {
-          display 'inline'
-        }
-        
-        rule('.filters li a') {
-          border '1px solid transparent'
-          border_radius '3px'
-          color 'inherit'
-          margin '3px'
-          padding '3px 7px'
-          text_decoration 'none'
-          cursor 'pointer'
-        }
-        
-        rule('.filters li a.selected') {
-          border_color '#ce4646'
-        }
-        
-        rule('.clear-completed, html .clear-completed:active') {
-          cursor 'pointer'
-          float 'right'
-          line_height '19px'
-          position 'relative'
-          text_decoration 'none'
-        }
-        
-        media('(max-width: 430px)') {
-          rule('.todo-filters') {
-            height '50px'
-          }
-          
-          rule('.filters') {
-            bottom '10px'
-          }
-        }
+      rule('.filters') {
+        bottom '10px'
       }
     }
   }

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

@@ -2,29 +2,32 @@
 class TodoInput
   include Glimmer::Web::Component
   
-  def todo_input_class
-    'todo-input'
-  end
-  
-  def todo_input_styles
-    rule(".#{todo_input_class}") {
-      position 'relative'
-      margin '0'
-      width '100%'
-      font_size '24px'
-      font_family 'inherit'
-      font_weight 'inherit'
-      line_height '1.4em'
-      color 'inherit'
-      padding '6px'
-      border '1px solid #999'
-      box_shadow 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)'
-      box_sizing 'border-box'
-      _webkit_font_smoothing 'antialiased'
-    }
-    
-    rule(".#{todo_input_class}::selection") {
-      background 'red'
-    }
+  class << self
+    def todo_input_styles
+      rule(".#{component_element_class}") {
+        position 'relative'
+        margin '0'
+        width '100%'
+        font_size '24px'
+        font_family 'inherit'
+        font_weight 'inherit'
+        line_height '1.4em'
+        color 'inherit'
+        padding '6px'
+        border '1px solid #999'
+        box_shadow 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)'
+        box_sizing 'border-box'
+        _webkit_font_smoothing 'antialiased'
+      }
+      
+      rule(".#{component_element_class}::selection") {
+        background 'red'
+      }
+      
+      rule(".#{component_element_class}:focus") {
+        box_shadow '0 0 2px 2px #cf7d7d'
+        outline '0'
+      }
+    end
   end
 end

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

@@ -38,14 +38,10 @@ class TodoList
           todo_list_item(presenter:, todo:)
         end
       }
-      
-      style {
-        todo_list_styles
-      }
     }
   }
   
-  def todo_list_styles
+  style {
     rule('.main') {
       border_top '1px solid #e6e6e6'
       position 'relative'
@@ -84,7 +80,7 @@ class TodoList
       transform 'rotate(90deg)'
     }
     
-    rule('.toggle-all:focus+label, .toggle:focus+label, :focus') {
+    rule('.toggle-all:focus+label, .toggle:focus+label') {
       box_shadow '0 0 2px 2px #cf7d7d'
       outline '0'
     }
@@ -102,7 +98,5 @@ class TodoList
     rule('.todo-list.completed li.active') {
       display 'none'
     }
-    
-    TodoListItem.todo_list_item_styles
-  end
+  }
 end