glimmer-dsl-web 0.0.5 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9250414d9d8804f3af1ddf5cc083ce9e06ff87e3a57e1686c1e9bb7cb1ee847
-  data.tar.gz: f9312dfb0e0a87a047b4b25216031587f965b70d8059a7de6d670105b2ce41ca
+  metadata.gz: 2615511253319f0227b782825764b4b009c0a3d4072b366d7409a3255f653d47
+  data.tar.gz: 0d09f5a38cd26cd6f8edad82aab884b89178ffa79043e5e7dc88fbd19f2e5958
 SHA512:
-  metadata.gz: 05be5bd7202f612582819cf970eb8185e530c2dff83e90caae1e3d5b09ad18d1aad44cd622e5b1b6d17f5afd83eb61762af2a941ab7bc77ea39b409e81ce4e6c
-  data.tar.gz: 6a979d023e5faf0b78656ca332bf6593ea33ed224ab8f1f06490767466dd62861e6a560fec63be25352500e0e2fde92cfa9d31e47089a6f5a629f7546816c283
+  metadata.gz: 54ce5174ba09451931424f9c7d30b4abc7aebfd8486ecb6fe0863ece4a4747c908c9445753cc68e535bfb90835d1ad1951fde8f31f9fe2e90f34980754b4ecbf
+  data.tar.gz: d654378ed6fa4c7d05322c09054a44039d83ef2d4dcecc048963b2dc31c723a68c679072f71da2a1984ba94cd4630a382d363928ca57315ca673ae33dfe62d59

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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
+- Support `select` element (it was blocked by a built-in Ruby method)
+- Handle case of `:parent` selector being invalid, defaulting to `body`.
+- Remove pure-struct gem dependency as the latest Opal fixed the implementation of Struct
+- New Hello, Data-Binding! Sample: `require 'glimmer-dsl-web/samples/hello/hello_data_binding'`
+
 ## 0.0.5
 
 - Support `p` element as it was overriden by Ruby's `p` method.

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,55 +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.5 (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. 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)!
-
-This project is inspired by [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) and is similar in enabling frontend GUI development with Ruby. [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) mainly differs from Glimmer DSL for Opal by adopting a DSL that follows web-like HTML syntax in Ruby to facilitate leveraging existing HTML/CSS/JS skills instead of adopting a desktop GUI DSL that is webified.
-
-**Sample**
-
-Initial HTML Markup:
-
-```html
-...
-<div id="app-container">
-</div>
-...
-```
-
-Glimmer GUI code:
-
-```ruby
-require 'glimmer-dsl-web'
-
-include Glimmer
-
-Document.ready? do
-  # This will hook into element #app-container and then build HTML inside it using Ruby DSL code
-  div(parent: '#app-container') {
-    label(class: 'greeting') {
-      'Hello, World!'
-    }
-  }.render
-end
-```
-
-That produces:
-
-```html
-...
-<div id="app-container">
-  <div data-parent="#app-container" class="element element-1">
-    <label class="greeting element element-2">
-      Hello, World!
-    </label>
-  </div>
-</div>
-...
-```
-
-![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
+[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**
 
@@ -266,6 +220,123 @@ Screenshot:
 
 ![Hello, Form!](/images/glimmer-dsl-web-samples-hello-hello-form.gif)
 
+**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
+require 'glimmer-dsl-web'
+
+Address = Struct.new(:street, :street2, :city, :state, :zip_code, keyword_init: true) do
+  STATES = {...} # contains US States
+  
+  def state_code
+    STATES.invert[state]
+  end
+  
+  def state_code=(value)
+    self.state = STATES[value]
+  end
+
+  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
+
+@address = Address.new(
+  street: '123 Main St',
+  street2: 'Apartment 3C, 2nd door to the right',
+  city: 'San Diego',
+  state: 'California',
+  zip_code: '91911',
+  billing_and_shipping: true,
+)
+
+include Glimmer
+
+Document.ready? do
+  div {
+    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
+        # automatically stay in sync when either side changes
+        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') {
+        # Bidirectional Data-Binding with <=> ensures input.value and @address.zip_code
+        # automatically stay in sync when either side changes
+        # 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,
+                  ]
+      }
+      
+      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_div.selector} * {
+            margin: 5px;
+          }
+          #{address_div.selector} input, #{address_div.selector} select {
+            grid-column: 2;
+          }
+        CSS
+      }
+    }
+  
+    div(style: 'margin: 5px') {
+      # 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'],
+                    ]
+    }
+  }.render
+end
+```
+
+Screenshot:
+
+![Hello, Data-Binding!](/images/glimmer-dsl-web-samples-hello-hello-data-binding.gif)
+
 **Button Counter Sample**
 
 **UPCOMING (NOT RELEASED OR SUPPORTED YET)**
@@ -348,7 +419,7 @@ When clicked 7 times:
 
 
 
-NOTE: Glimmer DSL for Web is a pre-alpha project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
+NOTE: Glimmer DSL for Web is an Early Alpha project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
 Learn more about the differences between various [Glimmer](https://github.com/AndyObtiva/glimmer) DSLs by looking at:
 
@@ -363,10 +434,14 @@ Learn more about the differences between various [Glimmer](https://github.com/An
   - [Setup](#setup)
   - [Usage](#usage)
   - [Supported Glimmer DSL Keywords](#supported-glimmer-dsl-keywords)
+  - [Coming from Glimmer DSL for Opal](#coming-from-glimmer-dsl-for-opal)
   - [Samples](#samples)
     - [Hello Samples](#hello-samples)
       - [Hello, World!](#hello-world)
+      - [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)
@@ -389,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.
 
@@ -416,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.5'
+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
 ```
@@ -561,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.5'
+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
 ```
@@ -701,7 +776,7 @@ Also, if the element has a little bit of text content that can fit in one line,
 
 3- **Content Block (Properties + Listeners + Nested Elements + Text Content)**
 
-Element methods can accept a Ruby content block. It intentionally has a `{...}` style even as a multi-line block to indicate that the code is declarative GUI structure code.
+Element methods can accept a Ruby content block. It intentionally has a `{...}` style even as a multi-line block to indicate that the code is declarative GUI structure code (intentionally breaking away from Ruby imperative code conventions given this is a declarative GUI DSL, meaning a different language that has its own conventions, embedded within Ruby).
 
 You can nest HTML element properties under an element like:
 
@@ -743,7 +818,7 @@ form {
 }
 ```
 
-You can nest text content underneath an element's Ruby block, like:
+You can nest text content underneath an element's Ruby block provided it is the return value of the block (last declared value), like:
 
 ```ruby
 p(class: 'summary') {
@@ -757,11 +832,15 @@ You can get/set any element property or invoke any element function by simply ca
 
 ## Supported Glimmer DSL Keywords
 
-[All HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
+[All HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element), following the Ruby method name standard of lowercase and underscored names.
+
+[All HTML attributes](https://www.w3schools.com/html/html_attributes.asp), following the Ruby method name standard of lowercase and underscored names.
+
+[All HTML events](https://www.w3schools.com/tags/ref_eventattributes.asp), same event attribute names as in HTML.
 
-[All HTML attributes](https://www.w3schools.com/html/html_attributes.asp).
+## Coming from Glimmer DSL for Opal
 
-[All HTML events](https://www.w3schools.com/tags/ref_eventattributes.asp).
+This project is inspired by [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) and is similar in enabling frontend GUI development with Ruby. [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) mainly differs from Glimmer DSL for Opal by adopting a DSL that follows web-like HTML syntax in Ruby to facilitate leveraging existing HTML/CSS/JS skills instead of adopting a desktop GUI DSL that is webified. As a result, applications written in Glimmer DSL for Opal are not compatible with Glimmer DSL for Web.
 
 ## Samples
 
@@ -769,8 +848,6 @@ This external sample app contains all the samples mentioned below configured ins
 
 https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
-**[NOT RELEASED OR SUPPORTED YET]** https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails-app
-
 ### Hello Samples
 
 #### Hello, World!
@@ -799,7 +876,7 @@ That produces the following under `<body></body>`:
 
 ![setup is working](/images/glimmer-dsl-web-setup-example-working.png)
 
-Alternative syntax when an element only has text content:
+Alternative syntax (useful when an element has text content that fits in one line):
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1006,6 +1083,284 @@ Screenshot:
 
 ![Hello, Form!](/images/glimmer-dsl-web-samples-hello-hello-form.gif)
 
+#### Hello, Data-Binding!
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+Address = Struct.new(: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
+  
+  def state_code=(value)
+    self.state = STATES[value]
+  end
+
+  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
+
+@address = Address.new(
+  street: '123 Main St',
+  street2: 'Apartment 3C, 2nd door to the right',
+  city: 'San Diego',
+  state: 'California',
+  zip_code: '91911',
+  billing_and_shipping: true,
+)
+
+include Glimmer
+
+Document.ready? do
+  div {
+    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
+        # automatically stay in sync when either side changes
+        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') {
+        # Bidirectional Data-Binding with <=> ensures input.value and @address.zip_code
+        # automatically stay in sync when either side changes
+        # 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,
+                  ]
+      }
+      
+      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_div.selector} * {
+            margin: 5px;
+          }
+          #{address_div.selector} input, #{address_div.selector} select {
+            grid-column: 2;
+          }
+        CSS
+      }
+    }
+  
+    div(style: 'margin: 5px') {
+      # 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'],
+                    ]
+    }
+  }.render
+end
+```
+
+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)**
@@ -1136,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.5
+0.0.7