glimmer-dsl-web 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d0e231339d0d3cd0a330fce53e852109df1b4b7b306194cff98e8e2eecbbd39
-  data.tar.gz: 384766d64c13a9724402021ea1ce47fae393bf66ccb4c56011a6e14e4c3fdefd
+  metadata.gz: 2615511253319f0227b782825764b4b009c0a3d4072b366d7409a3255f653d47
+  data.tar.gz: 0d09f5a38cd26cd6f8edad82aab884b89178ffa79043e5e7dc88fbd19f2e5958
 SHA512:
-  metadata.gz: 1d127d5d4b7eed73f60940b8c669593fcace051c6eccd6a5e80bc9d759aedecec922ba2b701341b9fc043781d7d2e4d0e371cc967dd782f4c3ed228d7b68c748
-  data.tar.gz: 9bb14fe78d3d4d6b7709429132c7b00bedb12d1183adcead609f88545b199174e7dda788241e41db63732551650064d77ec8794d3360c9c08c4c3719397a02a7
+  metadata.gz: 54ce5174ba09451931424f9c7d30b4abc7aebfd8486ecb6fe0863ece4a4747c908c9445753cc68e535bfb90835d1ad1951fde8f31f9fe2e90f34980754b4ecbf
+  data.tar.gz: d654378ed6fa4c7d05322c09054a44039d83ef2d4dcecc048963b2dc31c723a68c679072f71da2a1984ba94cd4630a382d363928ca57315ca673ae33dfe62d59

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.0.7
+
+- Support input[type=number] value data-binding as a Ruby Numeric object (Integer or Float)
+- Support input[type=range] value data-binding as a Ruby Numeric object (Integer or Float)
+- Support input[type=datetime-local] value data-binding as a Ruby Time object
+- Support input[type=date] value data-binding as a Ruby Date object
+- Support input[type=time] value data-binding as a Ruby Time object
+- Update Hello, Data-Binding! Sample to include a checkbox
+- New Hello, Input (Date/Time)! Sample: `require 'glimmer-dsl-web/samples/hello/hello_input'`
+
 ## 0.0.6
 
 - Support attribute unidirectional/bidirectional data-binding

data/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2023 Andy Maleh
+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

data/README.md

@@ -1,9 +1,9 @@
-# [<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.0.6 (Early Alpha)
+# [<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.0.7 (Early Alpha)
 ## Ruby in the Browser Web GUI Frontend Library
 [![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)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web GUI frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It aims at providing the simplest frontend library in existence. The library follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) while supporting both Unidirectional (One-Way) Data-Binding (using `<=`) and Bidirectional (Two-Way) Data-Binding (using `<=>`). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web GUI frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It aims at providing the simplest, most intuitive, and most straight-forward frontend library in existence. The library follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) while supporting both Unidirectional (One-Way) Data-Binding (using `<=`) and Bidirectional (Two-Way) Data-Binding (using `<=>`). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
 
 **Hello, World! Sample**
 
@@ -222,6 +222,8 @@ Screenshot:
 
 **Hello, Data-Binding!**
 
+[Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) intuitively supports both Unidirectional (One-Way) Data-Binding via the `<=` operator and Bidirectional (Two-Way) Data-Binding via the `<=>` operator, incredibly simplifying how to sync View properties with Model attributes with the simplest code to reason about.
+
 Glimmer GUI code:
 
 ```ruby
@@ -239,7 +241,10 @@ Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init:
   end
 
   def summary
-    values.map(&:to_s).reject(&:empty?).join(', ')
+    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
 
@@ -248,14 +253,15 @@ end
   street2: 'Apartment 3C, 2nd door to the right',
   city: 'San Diego',
   state: 'California',
-  zip_code: '91911'
+  zip_code: '91911',
+  billing_and_shipping: true,
 )
 
 include Glimmer
 
 Document.ready? do
   div {
-    form(style: 'display: grid; grid-auto-columns: 80px 200px;') { |address_form|
+    div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
       label('Street: ', for: 'street-field')
       input(id: 'street-field') {
         # Bidirectional Data-Binding with <=> ensures input.value and @address.street
@@ -289,16 +295,25 @@ Document.ready? do
         # on_write option specifies :to_s method to invoke on value before writing to model attribute
         # to ensure the numeric zip code value is stored as a String
         value <=> [@address, :zip_code,
-                    on_write: :to_s
+                    on_write: :to_s,
                   ]
       }
       
+      div(style: 'grid-column: 1 / span 2') {
+        input(id: 'billing-and-shipping-field', type: 'checkbox') {
+          checked <=> [@address, :billing_and_shipping]
+        }
+        label(for: 'billing-and-shipping-field') {
+          'Use this address for both Billing & Shipping'
+        }
+      }
+      
       style {
         <<~CSS
-          .#{address_form.element_id} * {
+          #{address_div.selector} * {
             margin: 5px;
           }
-          .#{address_form.element_id} input, .#{address_form.element_id} select {
+          #{address_div.selector} input, #{address_div.selector} select {
             grid-column: 2;
           }
         CSS
@@ -306,10 +321,12 @@ Document.ready? do
     }
   
     div(style: 'margin: 5px') {
-      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes update div.inner_text
-      # as computed by changes to the address member attributes + state_code address custom attribute
+      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes
+      # automatically update div.inner_text
+      # (computed by changes to address attributes, meaning if street changes,
+      # @address.summary is automatically recomputed.)
       inner_text <= [@address, :summary,
-                      computed_by: @address.members + ['state_code']
+                      computed_by: @address.members + ['state_code'],
                     ]
     }
   }.render
@@ -424,6 +441,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Button!](#hello-button)
       - [Hello, Form!](#hello-form)
       - [Hello, Data-Binding!](#hello-data-binding)
+      - [Hello, Input (Date/Time)!](#hello-input-datetime)
       - [Button Counter](#button-counter)
   - [Glimmer Process](#glimmer-process)
   - [Help](#help)
@@ -446,7 +464,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Setup
 
-(NOTE: Keep in mind this is a very early experimental and incomplete **alpha**. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
+(NOTE: Keep in mind this is an Early Alpha. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
 
 The [glimmer-dsl-web](https://rubygems.org/gems/glimmer-dsl-web) gem is a [Rails Engine](https://guides.rubyonrails.org/engines.html) gem that includes assets.
 
@@ -473,7 +491,7 @@ gem 'opal', '1.4.1'
 gem 'opal-rails', '2.0.2'
 gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.6'
+gem 'glimmer-dsl-web', '~> 0.0.7'
 gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
 gem 'glimmer-dsl-css', '~> 1.2.1', require: false
 ```
@@ -618,7 +636,7 @@ gem 'opal', '1.4.1'
 gem 'opal-rails', '2.0.2'
 gem 'opal-async', '~> 1.4.0'
 gem 'opal-jquery', '~> 0.4.6'
-gem 'glimmer-dsl-web', '~> 0.0.6'
+gem 'glimmer-dsl-web', '~> 0.0.7'
 gem 'glimmer-dsl-xml', '~> 1.3.1', require: false
 gem 'glimmer-dsl-css', '~> 1.2.1', require: false
 ```
@@ -1140,7 +1158,10 @@ Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init:
   end
 
   def summary
-    values.map(&:to_s).reject(&:empty?).join(', ')
+    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
 
@@ -1149,14 +1170,15 @@ end
   street2: 'Apartment 3C, 2nd door to the right',
   city: 'San Diego',
   state: 'California',
-  zip_code: '91911'
+  zip_code: '91911',
+  billing_and_shipping: true,
 )
 
 include Glimmer
 
 Document.ready? do
   div {
-    form(style: 'display: grid; grid-auto-columns: 80px 200px;') { |address_form|
+    div(style: 'display: grid; grid-auto-columns: 80px 260px;') { |address_div|
       label('Street: ', for: 'street-field')
       input(id: 'street-field') {
         # Bidirectional Data-Binding with <=> ensures input.value and @address.street
@@ -1190,16 +1212,25 @@ Document.ready? do
         # on_write option specifies :to_s method to invoke on value before writing to model attribute
         # to ensure the numeric zip code value is stored as a String
         value <=> [@address, :zip_code,
-                    on_write: :to_s
+                    on_write: :to_s,
                   ]
       }
       
+      div(style: 'grid-column: 1 / span 2') {
+        input(id: 'billing-and-shipping-field', type: 'checkbox') {
+          checked <=> [@address, :billing_and_shipping]
+        }
+        label(for: 'billing-and-shipping-field') {
+          'Use this address for both Billing & Shipping'
+        }
+      }
+      
       style {
         <<~CSS
-          .#{address_form.element_id} * {
+          #{address_div.selector} * {
             margin: 5px;
           }
-          .#{address_form.element_id} input, .#{address_form.element_id} select {
+          #{address_div.selector} input, #{address_div.selector} select {
             grid-column: 2;
           }
         CSS
@@ -1207,10 +1238,12 @@ Document.ready? do
     }
   
     div(style: 'margin: 5px') {
-      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes update div.inner_text
-      # as computed by changes to the address member attributes + state_code address custom attribute
+      # Unidirectional Data-Binding is done with <= to ensure @address.summary changes
+      # automatically update div.inner_text
+      # (computed by changes to address attributes, meaning if street changes,
+      # @address.summary is automatically recomputed.)
       inner_text <= [@address, :summary,
-                      computed_by: @address.members + ['state_code']
+                      computed_by: @address.members + ['state_code'],
                     ]
     }
   }.render
@@ -1221,6 +1254,113 @@ Screenshot:
 
 ![Hello, Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-data-binding.gif)
 
+#### Hello, Input (Date/Time)!
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class TimePresenter
+  attr_accessor :date_time, :month_string, :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
+    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)
+    end
+  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, :month_string, computed_by: :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 {
+        <<~CSS
+          #{container_div.selector} * {
+            margin: 5px;
+          }
+          #{container_div.selector} label {
+            grid-column: 1;
+          }
+          #{container_div.selector} input {
+            grid-column: 2;
+          }
+        CSS
+      }
+    }
+  }.render
+end
+```
+
+Screenshot:
+
+![Hello, Input (Date/Time)!](/images/glimmer-dsl-web-samples-hello-hello-input-date-time.gif)
+
 #### Button Counter
 
 **UPCOMING (NOT RELEASED OR SUPPORTED YET)**
@@ -1351,7 +1491,7 @@ These features have been suggested. You might see them in a future version of Gl
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2023 - Andy Maleh.
+Copyright (c) 2023-2024 - Andy Maleh.
 See [LICENSE.txt](LICENSE.txt) for further details.
 
 --

data/VERSION

@@ -1 +1 @@
-0.0.6
+0.0.7

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.0.6 ruby lib
+# stub: glimmer-dsl-web 0.0.7 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.6".freeze
+  s.version = "0.0.7".freeze
 
   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-01-01"
+  s.date = "2024-01-02"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) - Enables frontend GUI development with Ruby by adopting a DSL that follows web-like HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development. This library relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -33,6 +33,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_button.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_form.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
     "lib/glimmer/config/opal_logger.rb",
@@ -51,8 +52,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/web.rb",
     "lib/glimmer/web/element_proxy.rb",
     "lib/glimmer/web/event_proxy.rb",
-    "lib/glimmer/web/listener_proxy.rb",
-    "lib/glimmer/web/property_owner.rb"
+    "lib/glimmer/web/listener_proxy.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]

data/lib/glimmer/data_binding/element_binding.rb

@@ -24,7 +24,7 @@ module Glimmer
       end
       
       def call(value)
-        converted_value = translated_value = @translator.call(value)
+        converted_value = translated_value = @translator.call(value, evaluate_property)
         @element.send("#{@property}=", converted_value) unless evaluate_property == converted_value
       end
       

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

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# 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

data/lib/glimmer/util/proc_tracker.rb

@@ -1,4 +1,4 @@
-# Copyright (c) 2023 Andy Maleh
+# 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