glimmer-dsl-web 0.6.4 → 0.6.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bef64d09d4fdc73c08a83c9b3014a8a28685d0d261fb6af08ca2d68242792579
-  data.tar.gz: 66f34cb59d7423d8d84abca97e9d7425cd7fc344865e4a8eb170345116c7c4a1
+  metadata.gz: 6eb86fb33f7053193df400df56389ceaecad3b8857b7e110da57353682f9d7a3
+  data.tar.gz: f713f308fbb0cf9fbdd5f965465e8d875571fc07a2b126e38403236124b047f2
 SHA512:
-  metadata.gz: 59b52a1d608eccbc4dcb16a7f3dc7d9c3190c23c32a1f9b9b465efae5fcb47b5d53b89214597bb3e1b938eb4eeeb046c052dbfe8ae25c71a7ba9af46f5902bad
-  data.tar.gz: 4c1edfc03d78c96b61329bfb854177c6965e7536599c9e0367a180b720fc3d3f34ddb6a01c7245f97d601d668b1a03fddf82bd7012f4a3531217fcbe742f8812
+  metadata.gz: 98b0322be04f66756a304156880507c6f9cff290337d734709c3c6742693b0d0129e0e2a4c1af5e286ea41495e7c8064741d48f4e2e6d361049659d3619b0d3d
+  data.tar.gz: 05161d53f0d4a57a9b6c460ca6eef9a5a5e6606cfc21245ef77ca0c1720bac0116f619eccdf7b3e2a85018056e07a8e5525e23e05035edde0b84126b5ccb37c8

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.6.5
+
+- Ensure clearing input datetime/date/time/month values sends `nil` to the data-bound model attribute (not `''`, which caused issues)
+- Support data-binding input month vaue to a model attribute that has a datetime value
+- Fix issue with clearing date/time from Hello, Input Date/Time! causing errors in the web browser console
+
 ## 0.6.4
 
 - Support Rails 7.1 & 7.2 by upgrading to opal-rails 2.0.4

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.6.4 (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.6.5 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### The "Rails" of Frontend Frameworks!!!
 #### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
@@ -1404,7 +1404,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.6.4'
+gem 'glimmer-dsl-web', '~> 0.6.5'
 ```
 
 Run:
@@ -4558,7 +4558,7 @@ Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript la
 
 **How does Glimmer DSL for Web compare to Angular, React, Vue, Svelte, or other JS frameworks?**
 
-Without delving into details, Glimmer DSL for Web is meant to be a Ruby-based drop-in replacement for Angular, React, Vue, Svelte, and other JS frameworks. Glimmer Ruby code is transpiled to JavaScript, so it has JavaScript performance in general, which is not that far from that of Angular, React, or Vue. Glimmer DSL for Web has outperformed React by a factor of 66.66% in rendering 3000+ elements in a realistic app scenario that was benchmarked recently (in Oct 2024). Additionally, it enables writing both structure code and logic code in the same language (Ruby), greatly simplifying maintainability and improving productivity by eliminating multi-language dissonance and friction that drags down productivity as there is no need anymore to think in multiple languages unnecessarily, use XML based solutions (e.g. JSX), or use templating solutions (e.g. Mustache). Lastly, Glimmer DSL for Web supports familiar Software Engineering architectural patterns like Model-View-Controller and Model-View-Presenter, enabling Software Engineers to write the lightest and simplest code possible for building Web frontends in Ruby, with the best separation of concerns. Software Engineers can finally become happy Ruby developers by writing Ruby code in the Frontend too now in addition to the Backend.
+Without delving into details, Glimmer DSL for Web is meant to be a Ruby-based drop-in replacement for Angular, React, Vue, Svelte, and other JS frameworks. Glimmer Ruby code is transpiled to JavaScript, so it has JavaScript performance in general, which is not that far from that of Angular, React, or Vue. Glimmer DSL for Web has outperformed React by a factor of 33.33% in rendering 3000+ elements in a realistic app scenario that was benchmarked recently (in Oct 2024). Additionally, it enables writing both structure code and logic code in the same language (Ruby), greatly simplifying maintainability and improving productivity by eliminating multi-language dissonance and friction that drags down productivity as there is no need anymore to think in multiple languages unnecessarily, use XML based solutions (e.g. JSX), or use templating solutions (e.g. Mustache). Lastly, Glimmer DSL for Web supports familiar Software Engineering architectural patterns like Model-View-Controller and Model-View-Presenter, enabling Software Engineers to write the lightest and simplest code possible for building Web frontends in Ruby, with the best separation of concerns. Software Engineers can finally become happy Ruby developers by writing Ruby code in the Frontend too now in addition to the Backend.
 
 **How do I have a Glimmer Web Component re-render in a similar way to how React components re-render?**
 

data/VERSION

@@ -1 +1 @@
-0.6.4
+0.6.5

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.4 ruby lib
+# stub: glimmer-dsl-web 0.6.5 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.6.4"
+  s.version = "0.6.5"
 
   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 = "2025-01-07"
+  s.date = "2025-01-20"
   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 = [

data/lib/glimmer/data_binding/element_binding.rb

@@ -28,7 +28,13 @@ module Glimmer
       
       def call(value)
         evaluated_property_value = evaluate_property
-        converted_value = @translator&.call(value, evaluated_property_value) || value
+        converted_value = @translator&.call(value, @old_value)
+        is_date_time = ['date', 'time', 'datetime-local', 'month'].include?(element.options['type'])
+        if !is_date_time
+          converted_value ||= value
+        end
+        
+        @old_value = value
         if converted_value != evaluated_property_value
           if @sub_property
             if @property.to_s == 'class_name'

data/lib/glimmer/web/element_proxy.rb

@@ -137,12 +137,14 @@ module Glimmer
         'inner_html' => 'innerHTML',
         'outer_html' => 'outerHTML',
       }
-      FORMAT_DATETIME = '%Y-%m-%dT%H:%M'
-      FORMAT_DATE = '%Y-%m-%d'
-      FORMAT_TIME = '%H:%M'
+      FORMAT_DATETIME = '%Y-%m-%dT%H:%M' # TODO ensure using when setting value on date/time fields without data-binding
+      FORMAT_DATE = '%Y-%m-%d' # TODO ensure using when setting value on date/time fields without data-binding
+      FORMAT_TIME = '%H:%M' # TODO ensure using when setting value on date/time fields without data-binding
+      FORMAT_MONTH = '%Y-%m' # TODO ensure using when setting value on date/time fields without data-binding
       REGEX_FORMAT_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/
       REGEX_FORMAT_DATE = /^\d{4}-\d{2}-\d{2}$/
       REGEX_FORMAT_TIME = /^\d{2}:\d{2}$/
+      REGEX_FORMAT_MONTH = /^\d{4}-\d{2}$/
       REGEX_STYLE_SUB_PROPERTY = /^(style)_(.*)$/
       REGEX_CLASS_NAME_SUB_PROPERTY = /^(class_name)_(.*)$/
       
@@ -671,7 +673,11 @@ module Glimmer
             data_binding_read_listener = lambda do |event|
               view_property_value = send(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
+              is_date_time = ['date', 'time', 'datetime-local', 'month'].include?(options['type'])
+              converted_view_property_value = element_binding_write_translator&.call(view_property_value, model_binding.evaluate_property)
+              if !is_date_time
+                converted_view_property_value ||= view_property_value
+              end
               model_binding.call(converted_view_property_value)
             end
             handle_observation_request(listener_keyword, data_binding_read_listener)
@@ -885,8 +891,10 @@ module Glimmer
                 value.strftime(FORMAT_DATETIME)
               elsif value.is_a?(String) && valid_js_date_string?(value)
                 value
-              else
-                old_value
+              elsif value.to_s.empty?
+                ''
+              else # keep old value if a bad model attribute value was set
+                old_value&.strftime(FORMAT_DATETIME)
               end
             },
             view_to_model: -> (value, old_value) {
@@ -909,8 +917,10 @@ module Glimmer
                 value.strftime(FORMAT_DATE)
               elsif value.is_a?(String) && valid_js_date_string?(value)
                 value
-              else
-                old_value
+              elsif value.to_s.empty?
+                ''
+              else # keep old value if a bad model attribute value was set
+                old_value&.strftime(FORMAT_DATE)
               end
             },
             view_to_model: -> (value, old_value) {
@@ -918,7 +928,7 @@ module Glimmer
                 nil
               else
                 year, month, day = value.split('-')
-                if old_value
+                if !old_value.to_s.empty?
                   Time.new(year, month, day, old_value.hour, old_value.min)
                 else
                   Time.new(year, month, day)
@@ -932,8 +942,10 @@ module Glimmer
                 value.strftime(FORMAT_TIME)
               elsif value.is_a?(String) && valid_js_date_string?(value)
                 value
-              else
-                old_value
+              elsif value.to_s.empty?
+                ''
+              else # keep old value if a bad model attribute value was set
+                old_value&.strftime(FORMAT_TIME)
               end
             },
             view_to_model: -> (value, old_value) {
@@ -941,7 +953,7 @@ module Glimmer
                 nil
               else
                 hour, minute = value.split(':')
-                if old_value
+                if !old_value.to_s.empty?
                   Time.new(old_value.year, old_value.month, old_value.day, hour, minute)
                 else
                   now = Time.now
@@ -950,6 +962,31 @@ module Glimmer
               end
             },
           },
+          'month' => {
+            model_to_view: -> (value, old_value) {
+              if value.respond_to?(:strftime)
+                value.strftime(FORMAT_MONTH)
+              elsif value.is_a?(String) && valid_js_date_string?(value)
+                value
+              elsif value.to_s.empty?
+                ''
+              else # keep old value if a bad model attribute value was set
+                old_value&.strftime(FORMAT_MONTH)
+              end
+            },
+            view_to_model: -> (value, old_value) {
+              if value.to_s.empty?
+                nil
+              else
+                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
+              end
+            },
+          },
         }
       end
       
@@ -965,7 +1002,7 @@ module Glimmer
       end
       
       def valid_js_date_string?(string)
-        [REGEX_FORMAT_DATETIME, REGEX_FORMAT_DATE, REGEX_FORMAT_TIME].any? do |format|
+        [REGEX_FORMAT_DATETIME, REGEX_FORMAT_DATE, REGEX_FORMAT_TIME, REGEX_FORMAT_MONTH].any? do |format|
           string.match(format)
         end
       end
@@ -993,7 +1030,6 @@ module Glimmer
           style_value.to_s
         end
       end
-      
     end
   end
 end

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

@@ -22,23 +22,12 @@
 require 'glimmer-dsl-web'
 
 class TimePresenter
-  attr_accessor :date_time, :month_string, :week_string
+  attr_accessor :date_time, :week_string
   
   def initialize
     @date_time = Time.now
   end
   
-  def month_string
-    @date_time&.strftime('%Y-%m')
-  end
-  
-  def month_string=(value)
-    if value.match(/^\d{4}-\d{2}$/)
-      year, month = value.split('-')
-      self.date_time = Time.new(year, month, date_time.day, date_time.hour, date_time.min)
-    end
-  end
-  
   def week_string
     return nil if @date_time.nil?
     year = @date_time.year
@@ -56,6 +45,8 @@ class TimePresenter
       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
@@ -78,22 +69,22 @@ Document.ready? do
       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, :month_string, computed_by: :date_time]
+        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]
+        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]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.6.4
+  version: 0.6.5
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-07 00:00:00.000000000 Z
+date: 2025-01-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer