glimmer-dsl-web 0.9.2 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75e7b37a6cf240d81c9a1e9849b3c5ee131e687562082f4cab743b93773acd1a
-  data.tar.gz: 449aa6cb6effc7d7b2be71a93e74a3b5478a3b4c35152a3261b551de02018001
+  metadata.gz: 2f64cd1a4155afc8688d37c70266a28288ae80473332c9dc2bb0dbf01d81b590
+  data.tar.gz: 51ff57301add3f920f5a0425bb4817659bdcddf77882591313f76693906a6116
 SHA512:
-  metadata.gz: bcb77d7c98262ea80a1acde5a329009eb50e9abd34fb05a9d9cbb15260429b012374c961c86ce8988d46ad2ac6cefb0092e6d77455c01d035bfc8433586560f3
-  data.tar.gz: 55fd5286dc976ec1f00535c29b5b240186e96938edae060708f1004b2b16aaee3f286f94ee020c9a9306a14e7fc25de0912a05656c7c83832f478ca111cc7e89
+  metadata.gz: 90d5df27de10596eccf5c052863b7dbf8552400c1e4f7d31870c2ba7f8b762faa082ef0566555cd920d7b5bb20640e85462cfb70373f6d7f77ee4605a8cf8dbe
+  data.tar.gz: 309cd017bc28c4934fa72d1b9ba13e3f692740b147f40834bf6cc8740bf20a4136eca39388f58cfffc2c8efbe930c8424dd1122b68ae011181cad9a3ab161b76

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.10.0
+
+- Ensure auto-formatting date/time/datetime/week/month values from date/time/datetime objects even without data-binding
+- Update Hello, Input Date/Time! sample to work without data-binding (as data-binding will happen in a new sample)
+- Hello, Input Date/Time Data-Binding! sample: `require 'glimmer-dsl-web/samples/hello/hello_input_date_time_data_binding.rb'`
+
 ## 0.9.2
 
 - Relax opal dependency to '>= 1.8.2', '< 2.0.0' (to enable use of Glimmer DSL for Web with newer versions of Opal)

data/README.md

@@ -1,19 +1,17 @@
-# [<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.9.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.0 (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!!!
 [![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)
 
-**UPCOMING MAY 30, 2026 TALK: "Frontend Ruby on Rails with Glimmer DSL for Web" at [RubyConf Austria 2026](https://rubyconf.at/), in Vienna, Austria**
-
 **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
 
 **([Fukuoka Prefecture Future IT Initiative 2025 Money Forward Award Winner](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html)) [(Award Announcement)](https://digitalfukuoka.jp/news/info/528/)**
 
 (**Workshops: [wroclove.rb 2026 Ruby conference workshop exercises: "Building Rails SPAs in Frontend Ruby with Glimmer DSL for Web"](https://github.com/AndyObtiva/glimmer_commerce)**)
 
-**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4)) / [Frontend Ruby with Glimmer DSL for Web at Ruby on Rio 2025-06-06 Talk](https://www.youtube.com/watch?v=LY6ulYICuzE)**
+**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4)) / [Frontend Ruby with Glimmer DSL for Web at Ruby on Rio 2025-06-06 Talk](https://www.youtube.com/watch?v=LY6ulYICuzE) / [Frontend Ruby on Rails with Glimmer DSL for Web at RubyConf Austria 2026](https://www.youtube.com/watch?v=qTukq5AcSK0))**
 
 **(Ruby Rogues Podcast: [Building Better Ruby Apps: Glimmer Component Slots and More](https://topenddevs.com/podcasts/ruby-rogues/episodes/building-better-ruby-apps-glimmer-s-component-slots-and-more-ruby-653))**
 

data/VERSION

@@ -1 +1 @@
-0.9.2
+0.10.0

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.9.2 ruby lib
+# stub: glimmer-dsl-web 0.10.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.9.2".freeze
+  s.version = "0.10.0".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
@@ -48,6 +48,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb",
     "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_observer.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",

data/lib/glimmer/web/element_proxy.rb

@@ -713,6 +713,51 @@ module Glimmer
         end
       end
       
+      def value(raw: false)
+        if rendered?
+          view_to_model_converter = value_converters_for_input_type(type)&.[](:view_to_model)
+          view_value = super()
+          if !raw && view_to_model_converter
+            view_to_model_converter.call(view_value, nil)
+          else
+            view_value
+          end
+        else # this is the value passed by the programmer as per its format in the model (date/time or string)
+          model_to_view_converter = value_converters_for_input_type(type)&.[](:model_to_view)
+          if !raw && model_to_view_converter
+            model_to_view_converter.call(options[:value], nil)
+          else
+            options[:value]
+          end
+        end
+      end
+      
+      def value=(new_value)
+        model_to_view_converter = value_converters_for_input_type(type)&.[](:model_to_view)
+        if rendered?
+          if model_to_view_converter
+            super(model_to_view_converter.call(new_value, nil))
+          else
+            super(new_value)
+          end
+        else
+          the_value = if model_to_view_converter
+            model_to_view_converter.call(super(new_value), nil)
+          else
+            new_value
+          end
+          if keyword == 'textarea'
+            if args.first.is_a?(String)
+              args[0] = the_value
+            else
+              args.prepend(the_value)
+            end
+          else
+            options[:value] = the_value
+          end
+        end
+      end
+      
       def data_bind(property, model_binding)
         element_binding_read_translator = value_converters_for_input_type(type)&.[](:model_to_view)
         element_binding = DataBinding::ElementBinding.new(self, property, translator: element_binding_read_translator)
@@ -936,13 +981,13 @@ module Glimmer
           'number' => {
             model_to_view: -> (value, old_value) { value.to_s },
             view_to_model: -> (value, old_value) {
-              value.include?('.') ? value.to_f : value.to_i
+              value.to_s.include?('.') ? value.to_f : value.to_i
             },
           },
           'range' => {
             model_to_view: -> (value, old_value) { value.to_s },
             view_to_model: -> (value, old_value) {
-              value.include?('.') ? value.to_f : value.to_i
+              value.to_s.include?('.') ? value.to_f : value.to_i
             },
           },
           'datetime-local' => {
@@ -960,7 +1005,7 @@ module Glimmer
             view_to_model: -> (value, old_value) {
               if value.to_s.empty?
                 nil
-              else
+              elsif value.is_a?(String)
                 date = Native(`new Date(Date.parse(#{value}))`)
                 year = Native.call(date, 'getFullYear')
                 month = Native.call(date, 'getMonth') + 1
@@ -968,6 +1013,8 @@ module Glimmer
                 hour = Native.call(date, 'getHours')
                 minute = Native.call(date, 'getMinutes')
                 Time.new(year, month, day, hour, minute)
+              else
+                value
               end
             },
           },
@@ -986,13 +1033,15 @@ module Glimmer
             view_to_model: -> (value, old_value) {
               if value.to_s.empty?
                 nil
-              else
+              elsif value.is_a?(String)
                 year, month, day = value.split('-')
                 if !old_value.to_s.empty?
                   Time.new(year, month, day, old_value.hour, old_value.min)
                 else
                   Time.new(year, month, day)
                 end
+              else
+                value
               end
             },
           },
@@ -1011,14 +1060,16 @@ module Glimmer
             view_to_model: -> (value, old_value) {
               if value.to_s.empty?
                 nil
-              else
+              elsif value.is_a?(String)
                 hour, minute = value.split(':')
                 if !old_value.to_s.empty?
                   Time.new(old_value.year, old_value.month, old_value.day, hour, minute)
-                else
+                elsif value.is_a?(String)
                   now = Time.now
                   Time.new(now.year, now.month, now.day, hour, minute)
                 end
+              else
+                value
               end
             },
           },
@@ -1037,13 +1088,15 @@ module Glimmer
             view_to_model: -> (value, old_value) {
               if value.to_s.empty?
                 nil
-              else
+              elsif value.is_a?(String)
                 year, month = value.split('-')
                 if !old_value.to_s.empty?
                   Time.new(year, month, old_value.day, old_value.hour, old_value.min)
                 else
                   Time.new(year, month)
                 end
+              else
+                value
               end
             },
           },

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

@@ -1,85 +1,126 @@
 require 'glimmer-dsl-web'
 
-class TimePresenter
-  attr_accessor :date_time, :week_string
-  
-  def initialize
-    @date_time = Time.now
+unless Object.const_defined?(:TimePresenter) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class TimePresenter
+    attr_accessor :date_time, :week_string
+    
+    def initialize
+      @date_time = Time.now
+    end
+    
+    def week_string
+      return nil if @date_time.nil?
+      year = @date_time.year
+      week = ((@date_time.yday / 7).to_i + 1).to_s.rjust(2, '0')
+      "#{year}-W#{week}"
+    end
+    
+    def date_time_string
+      @date_time&.strftime('%Y-%m-%dT%H:%M')
+    end
+    
+    def date_time_string=(value)
+      if value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+        date_time_parts = value.split('T')
+        date_parts = date_time_parts.first.split('-')
+        time_parts = date_time_parts.last.split(':')
+        self.date_time = Time.new(*date_parts, *time_parts)
+      elsif value.strip.empty?
+        self.date_time = nil
+      end
+    end
   end
+end
+
+unless Object.const_defined?(:HelloInputDateTime) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class HelloInputDateTime
+    include Glimmer::Web::Component
+    
+    before_render do
+      @time_presenter = TimePresenter.new
+    end
+    
+    after_render do
+      observe(@time_presenter, :date_time) do |new_date_time|
+        @date_time_field.value = new_date_time
+        @date_field.value = new_date_time
+        @time_field.value = new_date_time
+        @month_field.value = new_date_time
+        @week_field.value = @time_presenter.week_string
+        @time_string_field.value = @time_presenter.date_time_string
+      end
+    end
+    
+    markup {
+      div {
+        div(style: 'display: grid; grid-auto-columns: 130px 260px;') { |container_div|
+          label('Date Time: ', for: 'date-time-field')
+          @date_time_field = input(id: 'date-time-field', type: 'datetime-local') {
+            value @time_presenter.date_time
+            
+            oninput do |event|
+              @time_presenter.date_time = @date_time_field.value
+            end
+          }
+          
+          label('Date: ', for: 'date-field')
+          @date_field = input(id: 'date-field', type: 'date') {
+            value @time_presenter.date_time
+            
+            oninput do |event|
+              @time_presenter.date_time = @date_field.value
+            end
+          }
+    
+          label('Time: ', for: 'time-field')
+          @time_field = input(id: 'time-field', type: 'time') {
+            value @time_presenter.date_time
+            
+            oninput do |event|
+              @time_presenter.date_time = @time_field.value
+            end
+          }
   
-  def week_string
-    return nil if @date_time.nil?
-    year = @date_time.year
-    week = ((@date_time.yday / 7).to_i + 1).to_s.rjust(2, '0')
-    "#{year}-W#{week}"
-  end
+          label('Month: ', for: 'month-field')
+          @month_field = input(id: 'month-field', type: 'month') {
+            value @time_presenter.date_time
+            
+            oninput do |event|
+              @time_presenter.date_time = @month_field.value
+            end
+          }
   
-  def date_time_string
-    @date_time&.strftime('%Y-%m-%dT%H:%M')
-  end
+          label('Week: ', for: 'week-field')
+          @week_field = input(id: 'week-field', type: 'week', disabled: true) {
+            value @time_presenter.week_string
+          }
   
-  def date_time_string=(value)
-    if value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
-      date_time_parts = value.split('T')
-      date_parts = date_time_parts.first.split('-')
-      time_parts = date_time_parts.last.split(':')
-      self.date_time = Time.new(*date_parts, *time_parts)
-    elsif value.strip.empty?
-      self.date_time = nil
-    end
+          label('Time String: ', for: 'time-string-field')
+          @time_string_field = input(id: 'time-string-field', type: 'text') {
+            value @time_presenter.date_time_string
+          
+            oninput do |event|
+              @time_presenter.date_time_string = @time_string_field.value
+            end
+          }
+          
+          style {
+            r("#{container_div.selector} *") {
+              margin '5px'
+            }
+            r("#{container_div.selector} label") {
+              grid_column '1'
+            }
+            r("#{container_div.selector} input") {
+              grid_column '2'
+            }
+          }
+        }
+      }
+    }
   end
 end
 
-@time_presenter = TimePresenter.new
-
-include Glimmer
-
 Document.ready? do
-  div {
-    div(style: 'display: grid; grid-auto-columns: 130px 260px;') { |container_div|
-      label('Date Time: ', for: 'date-time-field')
-      input(id: 'date-time-field', type: 'datetime-local') {
-        # Bidirectional Data-Binding with <=> ensures input.value and @time_presenter.date_time
-        # automatically stay in sync when either side changes
-        value <=> [@time_presenter, :date_time]
-      }
-      
-      label('Date: ', for: 'date-field')
-      input(id: 'date-field', type: 'date') {
-        value <=> [@time_presenter, :date_time]
-      }
-
-      label('Time: ', for: 'time-field')
-      input(id: 'time-field', type: 'time') {
-        value <=> [@time_presenter, :date_time]
-      }
-
-      label('Month: ', for: 'month-field')
-      input(id: 'month-field', type: 'month') {
-        value <=> [@time_presenter, :date_time]
-      }
-
-      label('Week: ', for: 'week-field')
-      input(id: 'week-field', type: 'week', disabled: true) {
-        value <= [@time_presenter, :week_string, computed_by: :date_time]
-      }
-
-      label('Time String: ', for: 'time-string-field')
-      input(id: 'time-string-field', type: 'text') {
-        value <=> [@time_presenter, :date_time_string, computed_by: :date_time]
-      }
-      
-      style {
-        r("#{container_div.selector} *") {
-          margin '5px'
-        }
-        r("#{container_div.selector} label") {
-          grid_column '1'
-        }
-        r("#{container_div.selector} input") {
-          grid_column '2'
-        }
-      }
-    }
-  }
+  HelloInputDateTime.render
 end

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

@@ -0,0 +1,97 @@
+require 'glimmer-dsl-web'
+
+unless Object.const_defined?(:TimePresenter) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class TimePresenter
+    attr_accessor :date_time, :week_string
+    
+    def initialize
+      @date_time = Time.now
+    end
+    
+    def week_string
+      return nil if @date_time.nil?
+      year = @date_time.year
+      week = ((@date_time.yday / 7).to_i + 1).to_s.rjust(2, '0')
+      "#{year}-W#{week}"
+    end
+    
+    def date_time_string
+      @date_time&.strftime('%Y-%m-%dT%H:%M')
+    end
+    
+    def date_time_string=(value)
+      if value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/)
+        date_time_parts = value.split('T')
+        date_parts = date_time_parts.first.split('-')
+        time_parts = date_time_parts.last.split(':')
+        self.date_time = Time.new(*date_parts, *time_parts)
+      elsif value.strip.empty?
+        self.date_time = nil
+      end
+    end
+  end
+end
+
+unless Object.const_defined?(:HelloInputDateTimeDataBinding) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class HelloInputDateTimeDataBinding
+    include Glimmer::Web::Component
+    
+    before_render do
+      @time_presenter = TimePresenter.new
+    end
+    
+    markup {
+      div {
+        div(style: 'display: grid; grid-auto-columns: 130px 260px;') { |container_div|
+          label('Date Time: ', for: 'date-time-field')
+          input(id: 'date-time-field', type: 'datetime-local') {
+            # Bidirectional Data-Binding with <=> ensures input.value and @time_presenter.date_time
+            # automatically stay in sync when either side changes
+            value <=> [@time_presenter, :date_time]
+          }
+          
+          label('Date: ', for: 'date-field')
+          input(id: 'date-field', type: 'date') {
+            value <=> [@time_presenter, :date_time]
+          }
+    
+          label('Time: ', for: 'time-field')
+          input(id: 'time-field', type: 'time') {
+            value <=> [@time_presenter, :date_time]
+          }
+    
+          label('Month: ', for: 'month-field')
+          input(id: 'month-field', type: 'month') {
+            value <=> [@time_presenter, :date_time]
+          }
+    
+          label('Week: ', for: 'week-field')
+          input(id: 'week-field', type: 'week', disabled: true) {
+            value <= [@time_presenter, :week_string, computed_by: :date_time]
+          }
+    
+          label('Time String: ', for: 'time-string-field')
+          input(id: 'time-string-field', type: 'text') {
+            value <=> [@time_presenter, :date_time_string, computed_by: :date_time]
+          }
+          
+          style {
+            r("#{container_div.selector} *") {
+              margin '5px'
+            }
+            r("#{container_div.selector} label") {
+              grid_column '1'
+            }
+            r("#{container_div.selector} input") {
+              grid_column '2'
+            }
+          }
+        }
+      }
+    }
+  end
+end
+
+Document.ready? do
+  HelloInputDateTimeDataBinding.render
+end

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

@@ -1,55 +1,59 @@
 require 'glimmer-dsl-web'
 
-class NumberHolder
-  attr_accessor :number
-  
-  def initialize
-    self.number = 50
+unless Object.const_defined?(:NumberHolder) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class NumberHolder
+    attr_accessor :number
+    
+    def initialize
+      self.number = 50
+    end
   end
 end
 
-class HelloObserver
-  include Glimmer::Web::Component
-  
-  before_render do
-    @number_holder = NumberHolder.new
-  end
-  
-  after_render do
-    @number_input.value = @number_holder.number
-    @range_input.value = @number_holder.number
+unless Object.const_defined?(:HelloObserver) # this is only needed in sample selector app due to file reloading, but not in real apps.
+  class HelloObserver
+    include Glimmer::Web::Component
     
-    # Observe Model attribute @number_holder.number for changes and update View elements.
-    # Observer is automatically cleaned up when `remove` method is called on rendered
-    # HelloObserver web component or its top-level markup element (div)
-    observe(@number_holder, :number) do
-      number_string = @number_holder.number.to_s
-      @number_input.value = number_string unless @number_input.value == number_string
-      @range_input.value = number_string unless @range_input.value == number_string
+    before_render do
+      @number_holder = NumberHolder.new
     end
-    # Bidirectional Data-Binding does the same thing automatically as per alternative sample: Hello, Observer (Data-Binding)!
-  end
-  
-  markup {
-    div {
+    
+    after_render do
+      @number_input.value = @number_holder.number
+      @range_input.value = @number_holder.number
+      
+      # Observe Model attribute @number_holder.number for changes and update View elements.
+      # Observer is automatically cleaned up when `remove` method is called on rendered
+      # HelloObserver web component or its top-level markup element (div)
+      observe(@number_holder, :number) do
+        number_string = @number_holder.number.to_s
+        @number_input.value = number_string unless @number_input.value == number_string
+        @range_input.value = number_string unless @range_input.value == number_string
+      end
+      # Bidirectional Data-Binding does the same thing automatically as per alternative sample: Hello, Observer (Data-Binding)!
+    end
+    
+    markup {
       div {
-        @number_input = input(type: 'number', min: 0, max: 100) {
-          # oninput listener (observer) updates Model attribute @number_holder.number
-          oninput do
-            @number_holder.number = @number_input.value.to_i
-          end
+        div {
+          @number_input = input(type: 'number', min: 0, max: 100) {
+            # oninput listener (observer) updates Model attribute @number_holder.number
+            oninput do
+              @number_holder.number = @number_input.value.to_i
+            end
+          }
         }
-      }
-      div {
-        @range_input = input(type: 'range', min: 0, max: 100) {
-          # oninput listener (observer) updates Model attribute @number_holder.number
-          oninput do
-            @number_holder.number = @range_input.value.to_i
-          end
+        div {
+          @range_input = input(type: 'range', min: 0, max: 100) {
+            # oninput listener (observer) updates Model attribute @number_holder.number
+            oninput do
+              @number_holder.number = @range_input.value.to_i
+            end
+          }
         }
       }
     }
-  }
+  end
 end
 
 Document.ready? do

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

@@ -1,34 +1,38 @@
 require 'glimmer-dsl-web'
 
-class NumberHolder
-  attr_accessor :number
-  
-  def initialize
-    self.number = 50
+unless Object.const_defined?(:NumberHolder) # this is only needed in the sample app, not in real apps
+  class NumberHolder
+    attr_accessor :number
+    
+    def initialize
+      self.number = 50
+    end
   end
 end
 
-class HelloObserverDataBinding
-  include Glimmer::Web::Component
-  
-  before_render do
-    @number_holder = NumberHolder.new
-  end
-  
-  markup {
-    div {
+unless Object.const_defined?(:HelloObserverDataBinding) # this is only needed in the sample app, not in real apps
+  class HelloObserverDataBinding
+    include Glimmer::Web::Component
+    
+    before_render do
+      @number_holder = NumberHolder.new
+    end
+    
+    markup {
       div {
-        input(type: 'number', min: 0, max: 100) {
-          value <=> [@number_holder, :number]
+        div {
+          input(type: 'number', min: 0, max: 100) {
+            value <=> [@number_holder, :number]
+          }
         }
-      }
-      div {
-        input(type: 'range', min: 0, max: 100) {
-          value <=> [@number_holder, :number]
+        div {
+          input(type: 'range', min: 0, max: 100) {
+            value <=> [@number_holder, :number]
+          }
         }
       }
     }
-  }
+  end
 end
 
 Document.ready? do

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/models/todo.rb

@@ -1,7 +1,6 @@
-Todo = Struct.new(:task, :completed, :editing, :deleted, keyword_init: true) do
+Todo = Struct.new(:task, :completed, :editing, keyword_init: true) do
   alias completed? completed
   alias editing? editing
-  alias deleted? deleted
   
   def active = !completed
   alias active? active

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/presenters/todo_presenter.rb

@@ -6,7 +6,7 @@ class TodoPresenter
   FILTERS = [:all, :active, :completed]
   FILTER_ROUTE_REGEXP = /\#\/([^\/]*)$/
   
-  attr_accessor :can_clear_completed, :active_todo_count, :created_todo
+  attr_accessor :can_clear_completed, :active_todo_count
   attr_reader :todos, :new_todo, :filter
   
   def initialize
@@ -27,7 +27,6 @@ class TodoPresenter
     todos.append(todo)
     observe_todo_completion_to_update_todo_stats(todo)
     new_todo.task = ''
-    self.created_todo = todo # notifies View observer indirectly to add created todo to todo list
   end
   
   def filter=(filter)
@@ -87,7 +86,6 @@ class TodoPresenter
     todos.delete(todo)
     observer_registration = observers_for_todo_stats.delete(todo.object_id)
     observer_registration&.deregister
-    todo.deleted = true # notifies View observer indirectly to delete todo
   end
   
   def observers_for_todo_stats

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

@@ -3,11 +3,8 @@ require_relative 'todo_input'
 class NewTodoInput < TodoInput
   option :presenter
   
-  markup { # evaluated against instance as a smart convention
+  markup {
     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,10 +13,10 @@ class NewTodoInput < TodoInput
     }
   }
   
-  style { # evaluated against class as a smart convention (common to all instances)
+  style {
     todo_input_styles
     
-    r(component_element_selector) { # NewTodoInput has component_element_class as 'new-todo-input'
+    r(component_element_selector) {
       padding '16px 16px 16px 60px'
       height 65
       border :none

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

@@ -5,14 +5,6 @@ class TodoList
   
   option :presenter
   
-  after_render do
-    observe(presenter, :created_todo) do |todo|
-      @todo_ul.content { # re-open todo ul content to add created todo
-        todo_list_item(presenter:, todo:)
-      }
-    end
-  end
-  
   markup {
     main(class: 'main') {
       div(class: 'toggle-all-container') {
@@ -25,14 +17,14 @@ class TodoList
         }
       }
       
-      @todo_ul = ul {
-        # class name is data-bound unidirectionally to the presenter filter attribute,
-        # meaning it would automatically get set to its value whenever presenter.filter changes
+      ul {
         class_name <= [presenter, :filter]
       
-        presenter.todos.each do |todo|
-          todo_list_item(presenter:, todo:)
-        end
+        content(presenter, :todos) {
+          presenter.todos.each do |todo|
+            todo_list_item(presenter:, todo:)
+          end
+        }
       }
     }
   }

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

@@ -6,43 +6,21 @@ class TodoListItem
   option :presenter
   option :todo
   
-  after_render do
-    # after rendering markup, observe todo deleted attribute and remove component when deleted
-    observe(todo, :deleted) do |deleted|
-      self.remove if deleted
-    end
-  end
-  
   markup {
     li {
-      # Data-bind inclusion of `completed` in `li` `class` attribute unidirectionally to `todo` `completed` attribute,
-      # meaning inclusion/exclusion of `completed` class happens automatically when `todo.completed` boolean value changes.
       class_name(:completed) <= [todo, :completed]
-      
-      # Data-bind inclusion of `active` in `li` `class` attribute unidirectionally to `todo` `completed` attribute, negated,
-      # meaning inclusion/exclusion of `active` class happens automatically when `todo.completed` negated boolean value changes.
       class_name(:active) <= [todo, :completed, on_read: :!]
-      
-      # Data-bind inclusion of `editing` in `li` `class` attribute unidirectionally to `todo` `editing` attribute,
-      # meaning inclusion/exclusion of `editing` class happens automatically when `todo.editing` boolean value changes.
       class_name(:editing) <= [todo, :editing]
       
       div(class: 'view') {
         input(class: 'toggle', type: 'checkbox') {
-          # Data-bind `input` `checked` property bidirectionally to `todo` `completed` attribute
-          # meaning make any changes to the `todo` `completed` attribute value automatically update the `input` `checked` property
-          # and any changes to the `input` `checked` property by the user automatically update the `todo` `completed` attribute value.
-          # `after_write` hook is invoked after writing a new value to the model attribute (`todo` `completed` attribute)
           checked <=> [todo, :completed]
         }
         
         label {
-          # Data-bind `label` inner HTML unidirectionally to `todo.task` (`String` value),
-          # meaning make changes to `todo` `task` attribute automatically update `label` inner HTML.
           inner_html <= [todo, :task]
           
           ondblclick do |event|
-            # if the markup root (li) last child is not an input field, re-open content and add an edit input field
             unless markup_root.children.last.keyword == 'input'
               markup_root.content {
                 edit_todo_input(presenter:, todo:)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.10.0
 platform: ruby
 authors:
 - Andy Maleh
@@ -321,6 +321,7 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb
 - lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb
 - 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_observer.rb
 - lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb