glimmer-dsl-web 0.6.0 → 0.6.2

data/VERSION

@@ -1 +1 @@
-0.6.0
+0.6.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.6.0 ruby lib
+# stub: glimmer-dsl-web 0.6.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.6.0"
+  s.version = "0.6.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-08-24"
+  s.date = "2024-09-30"
   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, Component Slots, and Component Custom Event Listeners. 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 = [
@@ -33,6 +33,8 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/ext/kernel.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_button.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_component_listeners.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_component_listeners_default_slot.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component_slots.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb",
@@ -102,7 +104,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.1"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.2"])
   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/dsl/web/component_expression.rb

@@ -12,16 +12,34 @@ module Glimmer
         end
   
         def interpret(parent, keyword, *args, &block)
-          custom_widget_class = Glimmer::Web::Component.for(keyword)
-          custom_widget_class.new(parent, args, {}, &block)
+          component_class = Glimmer::Web::Component.for(keyword)
+          component_class.new(parent, args, {}, &block)
         end
   
         def add_content(parent, keyword, *args, &block)
+          options = args.last.is_a?(Hash) ? args.last : {}
+          slot = options[:slot] || options['slot']
+          slot = slot.to_s unless slot.nil?
           # TODO consider avoiding source_location since it does not work in Opal
           if block.source_location && (block.source_location == parent.content&.__getobj__&.source_location)
             parent.content.call(parent) unless parent.content.called?
           else
-            super(parent, keyword, *args, &block)
+            if slot
+              if slot == 'markup_root_slot'
+                super(parent, keyword, *args, &block)
+              else
+                slot_element = parent.slot_elements[slot]
+                slot_element&.content(&block)
+              end
+            else
+              if parent.default_slot
+                slot = parent.default_slot
+                slot_element = parent.slot_elements[slot]
+                slot_element&.content(&block)
+              else
+                super(parent, keyword, *args, &block)
+              end
+            end
           end
           parent.post_add_content
         end

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

@@ -28,19 +28,25 @@ module Glimmer
     module Web
       class ComponentSlotContentExpression < Expression
         def can_interpret?(parent, keyword, *args, &block)
+          component = parent.is_a?(Glimmer::Web::Component) ? parent : parent&.ancestor_component
           slot = keyword.to_s
           block_given? &&
-            parent.respond_to?(:slot_elements) &&
+            !component.nil? &&
             (
-              parent.slot_elements.keys.include?(slot) ||
-              parent.slot_elements.keys.include?(slot.to_sym)
+              component.slot_elements.keys.include?(slot) ||
+              component.slot_elements.keys.include?(slot.to_sym)
             )
         end
   
         def interpret(parent, keyword, *args, &block)
           slot = keyword.to_s
-          slot_element = parent.slot_elements[slot] || parent.slot_elements[slot.to_sym]
-          slot_element&.content(&block)
+          component = parent.is_a?(Glimmer::Web::Component) ? parent : parent.ancestor_component
+          if slot == 'markup_root_slot'
+            component.content(slot: slot.to_sym, &block)
+          else
+            slot_element = component.slot_elements[slot] || component.slot_elements[slot.to_sym]
+            slot_element.content(&block)
+          end
         end
       end
     end

data/lib/glimmer/web/component.rb

@@ -89,17 +89,26 @@ module Glimmer
           @after_render = block
         end
         
-        def event(event)
+        def event(event_name)
           @events ||= []
-          event = event.to_sym
-          @events << event unless @events.include?(event)
+          event_name = event_name.to_sym
+          @events << event_name unless @events.include?(event_name)
         end
         
-        def events(*events)
-          if events.empty?
+        def events(*event_names)
+          @events ||= []
+          if event_names.empty?
             @events
           else
-            events.each { |event| event(event) }
+            event_names.each { |event| event(event) }
+          end
+        end
+        
+        def default_slot(slot_name = nil)
+          if slot_name.nil?
+            @default_slot
+          else
+            @default_slot = slot_name.to_s.to_sym
           end
         end
         
@@ -269,7 +278,7 @@ module Glimmer
       end
       # <- end of class methods
       
-      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements, :events
+      attr_reader :markup_root, :parent, :args, :options, :style_block, :component_style, :slot_elements, :events, :default_slot
       alias parent_proxy parent
 
       def initialize(parent, args, options, &content)
@@ -286,7 +295,8 @@ module Glimmer
         @args = args
         options ||= {}
         @options = self.class.options.merge(options)
-        @events = self.class.instance_variable_get("@events")
+        @events = self.class.instance_variable_get("@events") || []
+        @default_slot = self.class.instance_variable_get("@default_slot")
         @content = Util::ProcTracker.new(content) if content
 #         @style_blocks = {} # TODO enable when doing bulk head rendering in the future
         execute_hooks('before_render')
@@ -473,8 +483,15 @@ module Glimmer
             @content
           end
         else
-          # delegate to GUI DSL ContentExpression
-          super
+          options = args.last.is_a?(Hash) ? args.last : {}
+          slot = options[:slot] || options['slot']
+          slot = slot.to_sym unless slot.nil?
+          if slot
+            Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ComponentExpression.new, self.class.keyword, slot: slot, &block)
+          else
+            # delegate to GUI DSL ContentExpression
+            super
+          end
         end
       end
 

data/lib/glimmer/web/element_proxy.rb

@@ -604,16 +604,20 @@ module Glimmer
       
       def handle_observation_request(keyword, original_event_listener)
         if rendered?
-          listener = ListenerProxy.new(
-            element: self,
-            selector: selector,
-            dom_element: dom_element,
-            event_attribute: keyword,
-            original_event_listener: original_event_listener,
-          )
-          listener.register
-          listeners_for(keyword) << listener
-          listener
+          if keyword.start_with?('on_') && !['on_render', 'on_remove'].include?(keyword.to_s)
+            (ancestor_component || component)&.handle_observation_request(keyword, original_event_listener)
+          else
+            listener = ListenerProxy.new(
+              element: self,
+              selector: selector,
+              dom_element: dom_element,
+              event_attribute: keyword,
+              original_event_listener: original_event_listener,
+            )
+            listener.register
+            listeners_for(keyword) << listener
+            listener
+          end
         else
           enqueue_post_render_method_call('handle_observation_request', keyword, original_event_listener)
         end

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

@@ -21,198 +21,162 @@
 
 require 'glimmer-dsl-web'
 
-Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, keyword_init: true) do
-  STATES = {
-    "AK"=>"Alaska",
-    "AL"=>"Alabama",
-    "AR"=>"Arkansas",
-    "AS"=>"American Samoa",
-    "AZ"=>"Arizona",
-    "CA"=>"California",
-    "CO"=>"Colorado",
-    "CT"=>"Connecticut",
-    "DC"=>"District of Columbia",
-    "DE"=>"Delaware",
-    "FL"=>"Florida",
-    "GA"=>"Georgia",
-    "GU"=>"Guam",
-    "HI"=>"Hawaii",
-    "IA"=>"Iowa",
-    "ID"=>"Idaho",
-    "IL"=>"Illinois",
-    "IN"=>"Indiana",
-    "KS"=>"Kansas",
-    "KY"=>"Kentucky",
-    "LA"=>"Louisiana",
-    "MA"=>"Massachusetts",
-    "MD"=>"Maryland",
-    "ME"=>"Maine",
-    "MI"=>"Michigan",
-    "MN"=>"Minnesota",
-    "MO"=>"Missouri",
-    "MS"=>"Mississippi",
-    "MT"=>"Montana",
-    "NC"=>"North Carolina",
-    "ND"=>"North Dakota",
-    "NE"=>"Nebraska",
-    "NH"=>"New Hampshire",
-    "NJ"=>"New Jersey",
-    "NM"=>"New Mexico",
-    "NV"=>"Nevada",
-    "NY"=>"New York",
-    "OH"=>"Ohio",
-    "OK"=>"Oklahoma",
-    "OR"=>"Oregon",
-    "PA"=>"Pennsylvania",
-    "PR"=>"Puerto Rico",
-    "RI"=>"Rhode Island",
-    "SC"=>"South Carolina",
-    "SD"=>"South Dakota",
-    "TN"=>"Tennessee",
-    "TX"=>"Texas",
-    "UT"=>"Utah",
-    "VA"=>"Virginia",
-    "VI"=>"Virgin Islands",
-    "VT"=>"Vermont",
-    "WA"=>"Washington",
-    "WI"=>"Wisconsin",
-    "WV"=>"West Virginia",
-    "WY"=>"Wyoming"
-  }
-  
-  def state_code
-    STATES.invert[state]
-  end
+unless Object.const_defined?(:Address)
+  Address = Struct.new(:full_name, :street, :street2, :city, :state, :zip_code, :billing_and_shipping, keyword_init: true) do
+    STATES = {
+      "AK"=>"Alaska", "AL"=>"Alabama", "AR"=>"Arkansas", "AS"=>"American Samoa", "AZ"=>"Arizona",
+      "CA"=>"California", "CO"=>"Colorado", "CT"=>"Connecticut", "DC"=>"District of Columbia", "DE"=>"Delaware",
+      "FL"=>"Florida", "GA"=>"Georgia", "GU"=>"Guam", "HI"=>"Hawaii", "IA"=>"Iowa", "ID"=>"Idaho", "IL"=>"Illinois",
+      "IN"=>"Indiana", "KS"=>"Kansas", "KY"=>"Kentucky", "LA"=>"Louisiana", "MA"=>"Massachusetts", "MD"=>"Maryland",
+      "ME"=>"Maine", "MI"=>"Michigan", "MN"=>"Minnesota", "MO"=>"Missouri", "MS"=>"Mississippi", "MT"=>"Montana",
+      "NC"=>"North Carolina", "ND"=>"North Dakota", "NE"=>"Nebraska", "NH"=>"New Hampshire", "NJ"=>"New Jersey",
+      "NM"=>"New Mexico", "NV"=>"Nevada", "NY"=>"New York", "OH"=>"Ohio", "OK"=>"Oklahoma", "OR"=>"Oregon",
+      "PA"=>"Pennsylvania", "PR"=>"Puerto Rico", "RI"=>"Rhode Island", "SC"=>"South Carolina", "SD"=>"South Dakota",
+      "TN"=>"Tennessee", "TX"=>"Texas", "UT"=>"Utah", "VA"=>"Virginia", "VI"=>"Virgin Islands", "VT"=>"Vermont",
+      "WA"=>"Washington", "WI"=>"Wisconsin", "WV"=>"West Virginia", "WY"=>"Wyoming"
+    }
+    
+    def state_code
+      STATES.invert[state]
+    end
+    
+    def state_code=(value)
+      self.state = STATES[value]
+    end
   
-  def state_code=(value)
-    self.state = STATES[value]
-  end
-
-  def summary
-    to_h.values.map(&:to_s).reject(&:empty?).join(', ')
+    def summary
+      string_attributes = to_h.except(:billing_and_shipping)
+      summary = string_attributes.values.map(&:to_s).reject(&:empty?).join(', ')
+      summary += " (Billing & Shipping)" if billing_and_shipping
+      summary
+    end
   end
 end
 
-# AddressForm Glimmer Web Component (View component)
-#
-# Including Glimmer::Web::Component makes this class a View component and automatically
-# generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
-# of the name of the class. AddressForm generates address_form keyword, which can be used
-# elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
-class AddressForm
-  include Glimmer::Web::Component
-  
-  option :address
-  
-  # Optionally, you can execute code before rendering markup.
-  # This is useful for pre-setup of variables (e.g. Models) that you would use in the markup.
+unless Object.const_defined?(:AddressForm)
+  # AddressForm Glimmer Web Component (View component)
   #
-  # before_render do
-  # end
-  
-  # Optionally, you can execute code after rendering markup.
-  # This is useful for post-setup of extra Model listeners that would interact with the
-  # markup elements and expect them to be rendered already.
-  #
-  # after_render do
-  # end
+  # Including Glimmer::Web::Component makes this class a View component and automatically
+  # generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
+  # of the name of the class. AddressForm generates address_form keyword, which can be used
+  # elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
+  class AddressForm
+    include Glimmer::Web::Component
+    
+    option :address
+    
+    # Optionally, you can execute code before rendering markup.
+    # This is useful for pre-setup of variables (e.g. Models) that you would use in the markup.
+    #
+    # before_render do
+    # end
+    
+    # Optionally, you can execute code after rendering markup.
+    # This is useful for post-setup of extra Model listeners that would interact with the
+    # markup elements and expect them to be rendered already.
+    #
+    # after_render do
+    # end
+    
+    # markup block provides the content of the
+    markup {
+      div {
+        div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
+          label('Full Name: ', for: 'full-name-field')
+          input(id: 'full-name-field') {
+            value <=> [address, :full_name]
+          }
+          
+          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
   
-  # markup block provides the content of the
-  markup {
-    div {
-      div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
-        label('Full Name: ', for: 'full-name-field')
-        input(id: 'full-name-field') {
-          value <=> [address, :full_name]
-        }
-        
-        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]
+            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,
+                      ]
+          }
+          
+          style {
+            r("#{address_div.selector} *") {
+              margin '5px'
+            }
+            r("#{address_div.selector} input, #{address_div.selector} select") {
+              grid_column '2'
+            }
+          }
         }
         
-        label('City: ', for: 'city-field')
-        input(id: 'city-field') {
-          value <=> [address, :city]
+        div(style: 'margin: 5px') {
+          inner_text <= [address, :summary,
+                          computed_by: address.members + ['state_code'],
+                        ]
         }
-        
-        label('State: ', for: 'state-field')
-        select(id: 'state-field') {
-          Address::STATES.each do |state_code, state|
-            option(value: state_code) { state }
-          end
+      }
+    }
+  end
+end
 
-          value <=> [address, :state_code]
-        }
+unless Object.const_defined?(:AddressPage)
+  # AddressPage Glimmer Web Component (View component)
+  #
+  # This View component represents the main page being rendered,
+  # as done by its `render` class method below
+  class AddressPage
+    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 {
+        h1('Shipping Address')
         
-        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,
-                    ]
-        }
+        address_form(address: @shipping_address)
         
-        style {
-          r("#{address_div.selector} *") {
-            margin '5px'
-          }
-          r("#{address_div.selector} input, #{address_div.selector} select") {
-            grid_column '2'
-          }
-        }
-      }
-      
-      div(style: 'margin: 5px') {
-        inner_text <= [address, :summary,
-                        computed_by: address.members + ['state_code'],
-                      ]
+        h1('Billing Address')
+        
+        address_form(address: @billing_address)
       }
     }
-  }
-end
-
-# AddressPage Glimmer Web Component (View component)
-#
-# This View component represents the main page being rendered,
-# as done by its `render` class method below
-class AddressPage
-  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 {
-      h1('Shipping Address')
-      
-      address_form(address: @shipping_address)
-      
-      h1('Billing Address')
-      
-      address_form(address: @billing_address)
-    }
-  }
 end
 
 Document.ready? do