glimmer-dsl-web 0.10.2 → 0.10.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aad28a356df583d4a4784a532111d9e4d4f3743f8855998deb69ff03521a0107
-  data.tar.gz: 79c3a03baea98bd0774d95e4dbd049e30ddde606402b17770b037cffcbdb63ce
+  metadata.gz: 9612f4c1844bb9ccf62e32d1682a71bb933268fc9e9a74837a89a558001b96b0
+  data.tar.gz: c6bffc8d775f74c96f13cad87702648f2da115fd7da7de998946a7dc33572410
 SHA512:
-  metadata.gz: 427e0f03396027917230ad86fbfbfc258253b31044cadb32718caab75de8230edf22c5dc628a561db08c9b1bb82729e9e8347eef097ccb67d5e823fbcf90686f
-  data.tar.gz: e6f98162f1ab9a278547bf21d73cd861606b7595dc8ddd86cddf6901cc3b4f0d2e24af477bcbaf3bbaf870898abaa0901696e526ff040682bcede3cd595d3e07
+  metadata.gz: 5747a2f6092a03c2c0ae35c666f615aca23eac99b6b98eed533bf2876e747ca97bb33bd6a2f89285f34dcd0520873c2538e85306149cfbe5184fb921e4128928
+  data.tar.gz: 381d39d680af48941b8282aa180e4f6cd6641f7c79e408739c4e2e4838507f7e084011408f59dc09c5183c39912ec8b1cf6abbdadcff0f0587ec6d9151104d82

data/CHANGELOG.md

@@ -1,8 +1,15 @@
 # Change Log
 
+## 0.10.3
+
+- Support `parent.prepend {}` on `ElementProxy` and `Glimmer::Web::Component`, which is a method that prepends elements to the content of a parent element
+- Support `element.focused` & `element.focused=` methods, including `focused` data-binding support. Note that setting `element.focused=` as `true` gives an element focus, but setting it to `false` does not change focus (you would have to set another element as focused to remove focus from a previous element).
+- Hello, Mutation! sample: `require 'glimmer-dsl-web/samples/hello/hello_mutation.rb'`
+- Hello, Mutation Content Data-Binding! sample: `require 'glimmer-dsl-web/samples/hello/hello_mutation_content_data_binding.rb'`
+
 ## 0.10.2
 
-- Support `ElementProxy#append {}`/`Glimmer::Web::Component#append {}` as an alias for `content {}` to enable appending elements to the content of a parent element
+- Support `parent.append {}` as an alias for `content {}` on `ElementProxy` and `Glimmer::Web::Component`, which is a method that appends elements to the content of a parent element
 
 ## 0.10.1
 

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.10.2 (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.10.3 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### The "Rails" of Frontend Frameworks!!! ([Fukuoka Award Winning](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))
 #### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!

data/VERSION

@@ -1 +1 @@
-0.10.2
+0.10.3

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.10.2 ruby lib
+# stub: glimmer-dsl-web 0.10.3 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.10.2".freeze
+  s.version = "0.10.3".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -50,6 +50,8 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_input_date_time_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_modal.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_mutation.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_mutation_content_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb",

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

@@ -12,6 +12,9 @@ module Glimmer
         end
         
         def add_content(parent, keyword, *args, &block)
+          options = args.last.is_a?(Hash) ? args.last : {}
+          parent_original_add_child_mutation = parent&.add_child_mutation
+          parent&.add_child_mutation = options[:add_child_mutation] if options[:add_child_mutation]
           if parent.bulk_render? || parent.rendered? || parent.skip_content_on_render_blocks?
             return_value = super(parent, keyword, *args, &block)
             parent.add_text_content(return_value, on_empty: true) if return_value.is_a?(String)
@@ -20,6 +23,8 @@ module Glimmer
           else
             parent.add_content_on_render(&block)
           end
+        ensure
+          parent&.add_child_mutation = parent_original_add_child_mutation
         end
       end
     end

data/lib/glimmer/web/component.rb

@@ -512,11 +512,23 @@ module Glimmer
       end
       alias append content
       
+      def prepend(bulk_render: false, &block)
+        @markup_root.prepend(bulk_render:, &block)
+      end
+      
       def remove_all_listeners
         data_bindings.each do |option_binding, model_binding|
           option_binding.unregister_all_observables
         end
       end
+      
+      def add_child_mutation
+        markup_root.add_child_mutation
+      end
+      
+      def add_child_mutation=(value)
+        markup_root.add_child_mutation = value
+      end
 
       def method_missing(method_name, *args, &block)
         if can_handle_observation_request?(method_name)

data/lib/glimmer/web/element_proxy.rb

@@ -445,7 +445,7 @@ module Glimmer
         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)
+          attach(the_parent_dom_element, add_child_mutation: self.parent&.add_child_mutation || :append)
         else
           reattach(old_element)
         end
@@ -458,14 +458,29 @@ module Glimmer
       end
       alias rerender render
         
-      def attach(the_parent_dom_element)
-        the_parent_dom_element.append(@dom)
+      def attach(the_parent_dom_element, add_child_mutation: :append)
+        if add_child_mutation == :prepend
+          the_parent_dom_element.prepend(@dom)
+        else
+          the_parent_dom_element.append(@dom)
+        end
       end
         
       def reattach(old_element)
         old_element.replace_with(@dom)
       end
       
+      def focused
+        @focused = `#{dom_element}[0] == document.activeElement`
+        @focused
+      end
+      
+      def focused=(value)
+        @focused = value
+        focus if @focused
+        @focused
+      end
+      
       def mark_rendered
         @rendered = true
         children.each(&:mark_rendered) if bulk_render?
@@ -545,15 +560,27 @@ module Glimmer
         html_options
       end
       
-      def content(bulk_render: false, &block)
+      def add_child_mutation
+        @add_child_mutation || :append
+      end
+      
+      def add_child_mutation=(value)
+        @add_child_mutation = value
+      end
+      
+      def content(bulk_render: false, add_child_mutation: :append, &block)
         original_bulk_render = options[:bulk_render]
         options[:bulk_render] = bulk_render if rendered?
-        return_value = Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ElementExpression.new, keyword, &block)
+        return_value = Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ElementExpression.new, keyword, add_child_mutation:, &block)
         options[:bulk_render] = original_bulk_render if rendered?
         return_value
       end
       alias append content
       
+      def prepend(bulk_render: false, &block)
+        content(bulk_render:, add_child_mutation: :prepend, &block)
+      end
+      
       # Subclasses must override with their own mappings
       def observation_request_to_event_mapping
         {}

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

@@ -38,131 +38,135 @@ end
 # generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
 # of the name of the class. AddressForm generates address_form_with_slots keyword, which can be used
 # elsewhere in Glimmer HTML DSL code as done inside HelloComponentSlots below.
-class AddressFormWithSlots
-  include Glimmer::Web::Component
-  
-  option :address
-  
-  # markup block provides the content of the
-  markup {
-    div {
-      # designate this div as a slot with the slot name :address_header to enable
-      # consumers to contribute elements to `address_header {...}` slot
-      div(slot: :address_header, class: 'address-form-header')
-      
-      div(class: 'address-field-container', style: {display: :grid, grid_auto_columns: '80px 260px'}) {
-        label('Full Name: ', for: 'full-name-field')
-        input(id: 'full-name-field') {
-          value <=> [address, :full_name]
-        }
-        
-        @somelabel = label('Street: ', for: 'street-field')
-        input(id: 'street-field') {
-          value <=> [address, :street]
-        }
-        
-        label('Street 2: ', for: 'street2-field')
-        textarea(id: 'street2-field') {
-          value <=> [address, :street2]
-        }
+unless Object.const_defined?(:AddressFormWithSlots)
+  class AddressFormWithSlots
+    include Glimmer::Web::Component
+    
+    option :address
+    
+    # markup block provides the content of the
+    markup {
+      div {
+        # designate this div as a slot with the slot name :address_header to enable
+        # consumers to contribute elements to `address_header {...}` slot
+        div(slot: :address_header, class: 'address-form-header')
         
-        label('City: ', for: 'city-field')
-        input(id: 'city-field') {
-          value <=> [address, :city]
+        div(class: 'address-field-container', style: {display: :grid, grid_auto_columns: '80px 260px'}) {
+          label('Full Name: ', for: 'full-name-field')
+          input(id: 'full-name-field') {
+            value <=> [address, :full_name]
+          }
+          
+          @somelabel = label('Street: ', for: 'street-field')
+          input(id: 'street-field') {
+            value <=> [address, :street]
+          }
+          
+          label('Street 2: ', for: 'street2-field')
+          textarea(id: 'street2-field') {
+            value <=> [address, :street2]
+          }
+          
+          label('City: ', for: 'city-field')
+          input(id: 'city-field') {
+            value <=> [address, :city]
+          }
+          
+          label('State: ', for: 'state-field')
+          select(id: 'state-field') {
+            Address::STATES.each do |state_code, state|
+              option(value: state_code) { state }
+            end
+  
+            value <=> [address, :state_code]
+          }
+          
+          label('Zip Code: ', for: 'zip-code-field')
+          input(id: 'zip-code-field', type: 'number', min: '0', max: '99999') {
+            value <=> [address, :zip_code,
+                        on_write: :to_s,
+                      ]
+          }
         }
         
-        label('State: ', for: 'state-field')
-        select(id: 'state-field') {
-          Address::STATES.each do |state_code, state|
-            option(value: state_code) { state }
-          end
-
-          value <=> [address, :state_code]
+        div(style: {margin: 5}) {
+          inner_text <= [address, :summary,
+                          computed_by: address.members + ['state_code'],
+                        ]
         }
         
-        label('Zip Code: ', for: 'zip-code-field')
-        input(id: 'zip-code-field', type: 'number', min: '0', max: '99999') {
-          value <=> [address, :zip_code,
-                      on_write: :to_s,
-                    ]
-        }
-      }
-      
-      div(style: {margin: 5}) {
-        inner_text <= [address, :summary,
-                        computed_by: address.members + ['state_code'],
-                      ]
+        # designate this div as a slot with the slot name :address_footer to enable
+        # consumers to contribute elements to `address_footer {...}` slot
+        div(slot: :address_footer, class: 'address-form-footer')
       }
-      
-      # designate this div as a slot with the slot name :address_footer to enable
-      # consumers to contribute elements to `address_footer {...}` slot
-      div(slot: :address_footer, class: 'address-form-footer')
-    }
-  }
-  
-  style {
-    r('.address-field-container *') {
-      margin 5
     }
-    r('.address-field-container input, .address-field-container select') {
-      grid_column '2'
+    
+    style {
+      r('.address-field-container *') {
+        margin 5
+      }
+      r('.address-field-container input, .address-field-container select') {
+        grid_column '2'
+      }
     }
-  }
+  end
 end
 
 # HelloComponentSlots Glimmer Web Component (View component)
 #
 # This View component represents the main page being rendered,
 # as done by its `render` class method below
-class HelloComponentSlots
-  include Glimmer::Web::Component
-  
-  before_render do
-    @shipping_address = Address.new(
-      full_name: 'Johnny Doe',
-      street: '3922 Park Ave',
-      street2: 'PO BOX 8382',
-      city: 'San Diego',
-      state: 'California',
-      zip_code: '91913',
-    )
-    @billing_address = Address.new(
-      full_name: 'John C Doe',
-      street: '123 Main St',
-      street2: 'Apartment 3C',
-      city: 'San Diego',
-      state: 'California',
-      zip_code: '91911',
-    )
-  end
-  
-  markup {
-    div {
-      address_form_with_slots(address: @shipping_address) {
-        address_header { # contribute elements to the address_header component slot
-          h1('Shipping Address')
-          legend('This is the address that is used for shipping your purchase.', style: {margin_bottom: 10})
-        }
-        address_footer { # contribute elements to the address_footer component slot
-          p {
-            sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}")
+unless Object.const_defined?(:HelloComponentSlots)
+  class HelloComponentSlots
+    include Glimmer::Web::Component
+    
+    before_render do
+      @shipping_address = Address.new(
+        full_name: 'Johnny Doe',
+        street: '3922 Park Ave',
+        street2: 'PO BOX 8382',
+        city: 'San Diego',
+        state: 'California',
+        zip_code: '91913',
+      )
+      @billing_address = Address.new(
+        full_name: 'John C Doe',
+        street: '123 Main St',
+        street2: 'Apartment 3C',
+        city: 'San Diego',
+        state: 'California',
+        zip_code: '91911',
+      )
+    end
+    
+    markup {
+      div {
+        address_form_with_slots(address: @shipping_address) {
+          address_header { # contribute elements to the address_header component slot
+            h1('Shipping Address')
+            legend('This is the address that is used for shipping your purchase.', style: {margin_bottom: 10})
+          }
+          address_footer { # contribute elements to the address_footer component slot
+            p {
+              sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}")
+            }
           }
         }
-      }
-      
-      address_form_with_slots(address: @billing_address) {
-        address_header { # contribute elements to the address_header component slot
-          h1('Billing Address')
-          legend('This is the address that is used for your billing method (e.g. credit card).', style: {margin_bottom: 10})
-        }
-        address_footer { # contribute elements to the address_footer component slot
-          p {
-            sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}")
+        
+        address_form_with_slots(address: @billing_address) {
+          address_header { # contribute elements to the address_header component slot
+            h1('Billing Address')
+            legend('This is the address that is used for your billing method (e.g. credit card).', style: {margin_bottom: 10})
+          }
+          address_footer { # contribute elements to the address_footer component slot
+            p {
+              sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}")
+            }
           }
         }
       }
     }
-  }
+  end
 end
 
 Document.ready? do

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

@@ -0,0 +1,51 @@
+require 'glimmer-dsl-web'
+
+class HelloMutation
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1('Hello, Mutation!')
+      
+      p {
+        'Add items to a list via element DOM mutations.'
+      }
+      
+      div(class: 'actions') {
+        @input = input(placeholder: 'Enter list item content')
+        
+        button('Append list item') {
+          onclick do
+            @list.append {
+              li { @input.value }
+            }
+            @input.value = ''
+            @input.focus
+          end
+        }
+        
+        button('Prepend list item') {
+          onclick do
+            @list.prepend {
+              li { @input.value }
+            }
+            @input.value = ''
+            @input.focus
+          end
+        }
+      }
+      
+      @list = ul
+    }
+  }
+  
+  style {
+    r('.actions input, .actions button') {
+      margin '10px 10px 10px 0'
+    }
+  }
+end
+
+Document.ready? do
+  HelloMutation.render
+end

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

@@ -0,0 +1,83 @@
+require 'glimmer-dsl-web'
+
+class ListPresenter
+  attr_accessor :list, :new_list_item
+  
+  def initialize
+    @list = []
+    @new_list_item = ''
+  end
+  
+  def append_list_item
+    list.push(new_list_item)
+    clear_new_list_item
+  end
+  
+  def prepend_list_item
+    list.prepend(new_list_item)
+    clear_new_list_item
+  end
+  
+  def clear_new_list_item
+    self.new_list_item = ''
+  end
+  
+  def entering_new_list_item?
+    new_list_item.empty?
+  end
+end
+
+class HelloMutationContentDataBinding
+  include Glimmer::Web::Component
+  
+  before_render do
+    @list_presenter = ListPresenter.new
+  end
+  
+  markup {
+    div {
+      h1('Hello, Mutation Content Data-Binding!')
+      
+      p {
+        'Add items to a list via content data-binding (which performs implicit DOM mutations).'
+      }
+      
+      div(class: 'actions') {
+        @input = input(placeholder: 'Enter list item content') {
+          value <=> [@list_presenter, :new_list_item]
+          focused <= [@list_presenter, :entering_new_list_item?, computed_by: :new_list_item]
+        }
+        
+        button('Append list item') {
+          onclick do
+            @list_presenter.append_list_item
+          end
+        }
+        
+        button('Prepend list item') {
+          onclick do
+            @list_presenter.prepend_list_item
+          end
+        }
+      }
+      
+      ul {
+        content(@list_presenter, :list) {
+          @list_presenter.list.each do |list_item|
+            li { list_item }
+          end
+        }
+      }
+    }
+  }
+  
+  style {
+    r('.actions input, .actions button') {
+      margin '10px 10px 10px 0'
+    }
+  }
+end
+
+Document.ready? do
+  HelloMutationContentDataBinding.render
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.10.2
+  version: 0.10.3
 platform: ruby
 authors:
 - Andy Maleh
@@ -323,6 +323,8 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb
 - lib/glimmer-dsl-web/samples/hello/hello_input_date_time_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_modal.rb
+- lib/glimmer-dsl-web/samples/hello/hello_mutation.rb
+- lib/glimmer-dsl-web/samples/hello/hello_mutation_content_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_page_component_link/conference_talk_page.rb