glimmer-dsl-web 0.2.4 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 212cee9f2c87b145cca85b47395f541a749d0a472560a946c1f3b0061ec7b801
-  data.tar.gz: f7cccb64081e75018c6e043e021b071d70c7b2696057a32e25b191fb2c3dd4f6
+  metadata.gz: cefe3f3c8cf1e4e34eb1703d601e57a99e000ac5691542f275e8c998c6467914
+  data.tar.gz: f70430fa7d665432a870e01bf69a6e42b328c5b8def261cd1b3fb330451dd54f
 SHA512:
-  metadata.gz: e590b30b6f3d54f859e168bd7220cfa51e8d3f2354836fb851ab20c21114518ddd2a502a74a262b704148561e64b65a07cbd2ed61593914a274fa7542da8e1c9
-  data.tar.gz: 1a334ce05e730c2eef25005d5a1a9d16683b639fac910e83ba0ceff88c380230df884486f994140bce11a68e10210ff1a28266604560ecaa134859b621402cf2
+  metadata.gz: 1610a4360edd9019218e7d483e97b45d636da381250edba3616503d5677c4109818ee81d1b9ae2715688632214edadc96762c81c2fde2706ace9d7bae9a0dbc2
+  data.tar.gz: f35f136f78c03b53c264392cb1ee1c9bae16601b2992b721bea0a3748a6cbcff2e67012ef86d3e8cd4c2cdbfccec577921a4322833d5223bd27bbc0a114c16a4

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 0.2.5
+
+- Support `Element#class_name` as an alternative to `Element#class` because `class` is a reserved method in Ruby
+- Handle case of data-binding an element that has no `type` attribute
+- Provide `attribute`/`attributes` as aliases for `option`/`options` inside classes mixing `Glimmer::Web::Component` given that the options behave like HTML attributes
+- Hello, Form MVP! Sample: `require 'glimmer-dsl-web/samples/hello/hello_form_mvp'`
+- Hello, Observer (Data-Binding)! Sample: `require 'glimmer-dsl-web/samples/hello/hello_observer_data_binding'`
+
 ## 0.2.4
 
 - Enhance `Kernel#puts` & `Kernel#p` to enable printing any native JS object with `console.log` (without having to manually wrap with `Native`)

data/README.md

@@ -1,14 +1,31 @@
-# [<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.2.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.2.5 (Beta)
 ## Ruby in the Browser Web Frontend Framework
+### 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)
 
 **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web 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, most straight-forward, and most productive frontend framework in existence. The framework 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)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). And, modular design is supported with [Glimmer Web Components](#hello-component). Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). 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)!
+**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) & [Frontend Ruby with Glimmer DSL for Web](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE))**
+
+You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development.
+
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web 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 supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. 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](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)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). 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 DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based drop-in replacement for your existing JavaScript Frontend library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make Ajax HTTP requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make Ajax HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_selector_presenter.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb).
+
+After looking through the [samples](#samples) below, read the [FAQ (Frequently Asked Questions)](#faq) to learn more about how Glimmer DSL for Web compares to other approaches/libraries like Hotwire (Turbo), Phlex, ViewComponent, Angular, Vue, React, Svelte, and other JS frameworks.
+
+Anyone not considering this kind of technology in 2024 is like someone stuck in the dark ages riding horse carriage (e.g. JavaScript developers using frameworks like React) despite flying cars having been invented already and providing exponential jumps in productivity (way more than small linear jumps provided by some JavaScript libraries). Obviously, those who do make this jump will end up winning their work over from customers and beating the competition while delivering the best Frontend value possible to customers.
+
+(Attention Software Engineers, Bloggers, and Contributors: Please use Glimmer DSL for Web in web projects, blog about it, and submit a PR with your article, project, and/or open-source-repo added to the README. Also, I give everyone permission to present this project at their local Ruby user group, local Software Engineering meetup, or Software Conferences outside of North America (e.g. Europe). I am willing to present at Software Conferences in North America and Japan (the birthplace of Ruby) only. If you want to have this project presented elsewhere, like in Europe or South America, feel free to prepare and give your own presentations of the project, and if needed, hit me up for help on the [Glimmer Gitter chat](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge))
 
 **Hello, World! Sample**
 
+(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+
+[lib/glimmer-dsl-web/samples/hello/hello_world.rb](/lib/glimmer-dsl-web/samples/hello/hello_world.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -37,8 +54,12 @@ You can also mount the `div` elsewhere by passing the `parent: parent_css_select
 
 **Hello, Button!**
 
+(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+
 Event listeners can be setup on any element using the same event names used in HTML (e.g. `onclick`) while passing in a standard Ruby block to handle behavior. `$$` gives access to JS global scope from Ruby to invoke functions like `alert`.
 
+[lib/glimmer-dsl-web/samples/hello/hello_button.rb](/lib/glimmer-dsl-web/samples/hello/hello_button.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -71,8 +92,12 @@ Screenshot:
 
 **Hello, Form!**
 
+(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) gives access to all Web Browser built-in features like HTML form validations, input focus, events, and element functions from a very terse and productive Ruby HTML DSL. Also, you can apply CSS styles by including directly in Ruby code as a string, using [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css), or managing CSS completely separately using something like [SCSS](https://sass-lang.com/). The CSS techniques could be combined as well, like by managing common reusable CSS styles separately in SCSS, but adding component specific CSS styles in Ruby when it is more convenient.
 
+[lib/glimmer-dsl-web/samples/hello/hello_form.rb](/lib/glimmer-dsl-web/samples/hello/hello_form.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -227,8 +252,12 @@ Screenshot:
 
 **Hello, Data-Binding!**
 
+(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+
 [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.
 
+[lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -344,10 +373,14 @@ Screenshot:
 
 **Hello, Content Data-Binding!**
 
+(Note: in real app development, we build [Glimmer Web Components](#hello-component), but this sample is just introducing basic building blocks towards building [components](#hello-component))
+
 If you need to regenerate HTML element content dynamically, you can use Content Data-Binding to effortlessly
 rebuild HTML elements based on changes in a Model attribute that provides the source data.
 In this example, we generate multiple address forms based on the number of addresses the user has.
 
+[lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -487,6 +520,8 @@ Rails helper (more about it in [Hello, glimmer_component Rails Helper!](#hello-g
 Below, we define an `AddressForm` component that generates an `address_form` keyword, and then we
 reuse it twice inside an `AddressPage` component displaying a Shipping Address and a Billing Address.
 
+[lib/glimmer-dsl-web/samples/hello/hello_component.rb](/lib/glimmer-dsl-web/samples/hello/hello_component.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -702,6 +737,8 @@ You may insert a Glimmer component anywhere into a Rails View using
 `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper`
 or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
 
+[lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb](/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb)
+
 Rails `ApplicationHelper` setup code:
 
 ```ruby
@@ -933,6 +970,8 @@ it returns a `String` to enable code like this:
 
 In any case, below is a full example leveraging the Glimmer HTML DSL alternative approach when utilizing formatting elements underneath a paragraph.
 
+[lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb](/lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -994,6 +1033,8 @@ Screenshot:
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) provides the `observe(model, attribute) { ... }` keyword to employ the [Observer Design Pattern](https://en.wikipedia.org/wiki/Observer_pattern) as per [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) (Model View Controller), enabling Views to observe Models and update themselves in response to changes. If the `observe` keyword is used from inside a [Component](#hello-component), when the Component is removed or its top-level element is removed, the observer is automatically cleaned up. The need for such explicit observers is significantly diminished by the availablility of the more advanced Unidirectional [Data-Binding](#hello-data-binding) Support and Bidirectional [Data-Binding](#hello-data-binding) Support.
 
+[lib/glimmer-dsl-web/samples/hello/hello_observer.rb](/lib/glimmer-dsl-web/samples/hello/hello_observer.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -1017,48 +1058,81 @@ class HelloObserver
   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
-    # Observer is automatically cleaned up if remove method is called on rendered HelloObserver
-    # or its top-level element
+    
+    # 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
-    # Just disable the observe block above as well as the oninput listeners below
-    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
-    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+    # Bidirectional Data-Binding does the same thing automatically as per alternative sample: Hello, Observer (Data-Binding)!
   end
   
   markup {
     div {
       div {
         @number_input = input(type: 'number', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
         }
       }
       div {
         @range_input = input(type: 'range', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+```
+
+Screenshot:
+
+![Hello, Observer!](/images/glimmer-dsl-web-samples-hello-hello-observer.gif)
+
+**Hello, Observer (Data-Binding)!**
+
+This is the data-binding edition of Hello, Observer!, which uses the `<=>` operator to perform bidirectional data-binding between a View property and a Model attribute, thus yield a lot less code that is declarative and is the most minimal code possible to express the requirements.
+
+[lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  markup {
+    div {
+      div {
+        input(type: 'number', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        input(type: 'range', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
         }
       }
     }
@@ -1100,7 +1174,9 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, World!](#hello-world)
       - [Hello, Button!](#hello-button)
       - [Hello, Form!](#hello-form)
+      - [Hello, Form (MVP)!](#hello-form-mvp)
       - [Hello, Observer!](#hello-observer)
+      - [Hello, Observer (Data-Binding)!](#hello-observer)
       - [Hello, Data-Binding!](#hello-data-binding)
       - [Hello, Content Data-Binding!](#hello-content-data-binding)
       - [Hello, Component!](#hello-content-data-binding)
@@ -1152,7 +1228,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.2.4'
+gem 'glimmer-dsl-web', '~> 0.2.5'
 ```
 
 Run:
@@ -1377,7 +1453,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.2.4'
+gem 'glimmer-dsl-web', '~> 0.2.5'
 ```
 
 Run:
@@ -1632,14 +1708,18 @@ This project is inspired by [Glimmer DSL for Opal](https://github.com/AndyObtiva
 
 ## Samples
 
-This external sample app contains all the samples mentioned below configured inside a Rails [Opal](https://opalrb.com/) app with all the prerequisites ready to go for convenience:
+This external Sample Selector app is built using Rails and Glimmer DSL for Web, including all the samples mentioned below configured inside a Rails [Opal](https://opalrb.com/) web app with all the prerequisites ready to go for convenience (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too):
 
 https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
+![Sample Selector](https://raw.githubusercontent.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/master/sample-glimmer-dsl-web-rails7-app.png)
+
 ### Hello Samples
 
 #### Hello, World!
 
+[lib/glimmer-dsl-web/samples/hello/hello_world.rb](/lib/glimmer-dsl-web/samples/hello/hello_world.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -1692,6 +1772,8 @@ You can also mount the `div` elsewhere by passing the `parent: parent_css_select
 
 Event listeners can be setup on any element using the same event names used in HTML (e.g. `onclick`) while passing in a standard Ruby block to handle behavior. `$$` gives access to JS global scope from Ruby to invoke functions like `alert`.
 
+[lib/glimmer-dsl-web/samples/hello/hello_button.rb](/lib/glimmer-dsl-web/samples/hello/hello_button.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -1726,6 +1808,8 @@ Screenshot:
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) gives access to all Web Browser built-in features like HTML form validations, input focus, events, and element functions from a very terse and productive Ruby HTML DSL. Also, you can apply CSS styles by including directly in Ruby code as a string, using [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css), or managing CSS completely separately using something like [SCSS](https://sass-lang.com/). The CSS techniques could be combined as well, like by managing common reusable CSS styles separately in SCSS, but adding component specific CSS styles in Ruby when it is more convenient.
 
+[lib/glimmer-dsl-web/samples/hello/hello_form.rb](/lib/glimmer-dsl-web/samples/hello/hello_form.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -1878,10 +1962,63 @@ Screenshot:
 
 ![Hello, Form!](/images/glimmer-dsl-web-samples-hello-hello-form.gif)
 
+#### Hello, Form (MVP)!
+
+This is the MVP (Model-View-Presenter) edition of Hello, Form! leveraging Glimmer Web Components and the MVP Architectural Pattern.
+
+Main file:
+
+[lib/glimmer-dsl-web/samples/hello/hello_form_mvp.rb](/lib/glimmer-dsl-web/samples/hello/hello_form_mvp.rb)
+
+Other files:
+
+[lib/glimmer-dsl-web/samples/hello/hello_form_mvp](/lib/glimmer-dsl-web/samples/hello/hello_form_mvp)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+require_relative 'hello_form_mvp/presenters/hello_form_mvp_presenter'
+
+require_relative 'hello_form_mvp/views/contact_form'
+require_relative 'hello_form_mvp/views/contact_table'
+
+class HelloFormMvp
+  include Glimmer::Web::Component
+  
+  before_render do
+    @presenter = HelloFormMvpPresenter.new
+  end
+  
+  markup {
+    div {
+      h1('Contact Form')
+      
+      contact_form(presenter: @presenter)
+      
+      h1('Contacts Table')
+      
+      contact_table(presenter: @presenter)
+    }
+  }
+end
+
+Document.ready? do
+  HelloFormMvp.render
+end
+```
+
+Screenshot:
+
+![Hello, Form!](/images/glimmer-dsl-web-samples-hello-hello-form.gif)
+
 #### Hello, Observer!
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) provides the `observe(model, attribute) { ... }` keyword to employ the [Observer Design Pattern](https://en.wikipedia.org/wiki/Observer_pattern) as per [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) (Model View Controller), enabling Views to observe Models and update themselves in response to changes. If the `observe` keyword is used from inside a [Component](#hello-component), when the Component is removed or its top-level element is removed, the observer is automatically cleaned up. The need for such explicit observers is significantly diminished by the availablility of the more advanced Unidirectional [Data-Binding](#hello-data-binding) Support and Bidirectional [Data-Binding](#hello-data-binding) Support.
 
+[lib/glimmer-dsl-web/samples/hello/hello_observer.rb](/lib/glimmer-dsl-web/samples/hello/hello_observer.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -1905,48 +2042,85 @@ class HelloObserver
   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
-    # Observer is automatically cleaned up if remove method is called on rendered HelloObserver
-    # or its top-level element
+    
+    # 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
-    # Just disable the observe block above as well as the oninput listeners below
-    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
-    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+    # Bidirectional Data-Binding does the same thing automatically as per alternative sample: Hello, Observer (Data-Binding)!
   end
   
   markup {
     div {
       div {
         @number_input = input(type: 'number', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
         }
       }
       div {
         @range_input = input(type: 'range', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloObserver.render
+end
+```
+
+Screenshot:
+
+![Hello, Observer!](/images/glimmer-dsl-web-samples-hello-hello-observer.gif)
+
+#### Hello, Observer (Data-Binding)!
+
+This is the data-binding edition of Hello, Observer!, which uses the `<=>` operator to perform bidirectional data-binding between a View property and a Model attribute, thus yield a lot less code that is declarative and is the most minimal code possible to express the requirements.
+
+[lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  markup {
+    div {
+      div {
+        input(type: 'number', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        input(type: 'range', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
         }
       }
     }
@@ -1966,6 +2140,8 @@ Screenshot:
 
 [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.
 
+[lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_data_binding.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -2139,6 +2315,8 @@ If you need to regenerate HTML element content dynamically, you can use Content
 rebuild HTML elements based on changes in a Model attribute that provides the source data.
 In this example, we generate multiple address forms based on the number of addresses the user has.
 
+[lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb](/lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -2278,6 +2456,8 @@ Rails helper (more about it in [Hello, glimmer_component Rails Helper!](#hello-g
 Below, we define an `AddressForm` component that generates an `address_form` keyword, and then we
 reuse it twice inside an `AddressPage` component displaying a Shipping Address and a Billing Address.
 
+[lib/glimmer-dsl-web/samples/hello/hello_component.rb](/lib/glimmer-dsl-web/samples/hello/hello_component.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -2493,6 +2673,8 @@ You may insert a Glimmer component anywhere into a Rails View using
 `glimmer_component(component_path, *args)` Rails helper. Add `include GlimmerHelper` to `ApplicationHelper`
 or another Rails helper, and use `<%= glimmer_component("path/to/component", *args) %>` in Views.
 
+[lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb](/lib/glimmer-dsl-web/samples/hello/hello_glimmer_component_helper/address_form.rb)
+
 Rails `ApplicationHelper` setup code:
 
 ```ruby
@@ -2724,6 +2906,8 @@ it returns a `String` to enable code like this:
 
 In any case, below is a full example leveraging the Glimmer HTML DSL alternative approach when utilizing formatting elements underneath a paragraph.
 
+[lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb](/lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -2785,6 +2969,8 @@ Screenshot:
 
 #### Hello, Input (Date/Time)!
 
+[lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb](/lib/glimmer-dsl-web/samples/hello/hello_input_date_time.rb)
+
 Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
@@ -2890,6 +3076,8 @@ Screenshot:
 
 #### Button Counter
 
+[lib/glimmer-dsl-web/samples/regular/button_counter.rb](/lib/glimmer-dsl-web/samples/regular/button_counter.rb)
+
 Glimmer HTML DSL Ruby code in the frontend demonstrating MVC + Glimmer Web Components (Views) + Data-Binding:
 
 ```ruby
@@ -2992,11 +3180,35 @@ Learn more by reading the [GPG](https://github.com/AndyObtiva/glimmer/blob/maste
 
 ## Help
 
+### FAQ
+
+F.A.Q. (Frequently Asked Questions):
+
+**How does Glimmer DSL for Web compare to Rails Hotwire (Turbo)?**
+
+Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript layer in a web application (e.g. Rails app) with Ruby code. On the other hand, Rails Hotwire (Turbo) is mostly a Backend-driven technology that enables automatically replacing HTML DOM elements with HTML markup sent over the wire from a Rails Backend. So, the two technologies are mostly orthogonal, but can be used in the same Rails web application, albeit exclusively on separate web pages at the moment. In the future, we might explore supporting the ability to combine both technologies in the same pages, but until then, use on separate pages. Glimmer DSL for Web can handle any sort of Frontend interactions even without making HTTP calls to the Backend, so it can implement more use-cases than Hotwire. Using Glimmer DSL for Web with Rails API end-points is simpler than using Hotwire overall. That is because Glimmer Content Data-Binding is a simpler version of Turbo Frames that does not require worrying about setting and using element IDs (as that is handled automatically) and that operates at a more correct abstraction level for how we think about View component updates in relation to Model changes (we make updates at the Model layer, and they automatically get reflected in the View through data-binding). Also, Glimmer DSL for Web supports Glimmer Web Components, which enable better division of View code with higher readability than ERB. It is true that Hotwire is an improvement over using JavaScript frameworks like React when there is not much logic beyond updating elements with Server-Side rendered HTML. And, Glimmer DSL for Web is the next big advancement that brings a big improvement over the Hotwire approach.
+
+**How does Glimmer DSL for Web compare to Phlex or ViewComponent?**
+
+Glimmer DSL for Web is a Frontend library, meaning it replaces the JavaScript layer in a web application (e.g. Rails app) with Ruby code while providing its own View-layer component support using [`Glimmer::Web::Component`](#hello-component). On the other hand, Phlex and ViewComponent are Backend View-layer component libraries, so they serve 100% orthogonal needs, and can be used side by side with Glimmer DSL for Web if needed (e.g. Phlex components can consist of Backend HTML elements + Glimmer components that are rendered in the Frontend). That said, Phlex came out years after previous Glimmer libraries like Glimmer DSL for SWT, and Phlex's component system is very similar to Glimmer's component system in Glimmer DSL for SWT (perhaps inspired by it unconsciously or consciously). So, if you like Phlex in the Backend, you'll love Glimmer DSL for Web in the Frontend.
+
+**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. 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?**
+
+[Content Data-Binding](#hello-content-data-binding) supports re-rendering dynamic parts of a Glimmer Web Component (or the full component if all of it is dynamic). Glimmer DSL for Web simplifies Frontend Development significantly over React by not re-rendering everything if not needed (regardless of use of Virtual DOM) yet only re-rendering the parts of a component that do change dynamically. As a result, Software Engineers do not have to worry about the ripple effect of full re-renders or the possibility of breaking some parts of a page when making small changes to a single component in a hierarchy of page components. And, if only an element property changes, [Content Data-Binding](#hello-content-data-binding) is not even needed. It is much simpler to rely on simple [Property Data-Binding](#hello-data-binding) in that case. This makes reasoning about Glimmer DSL for Web Ruby code a lot simpler than reasoning about React component JavaScript code.
+
+**How do I reuse React components from Glimmer DSL for Web?**
+
+In the future, support for HTML Web Components will be added, and that will enable reuse of React components by using a library that converts them to HTML Web Components first like [react-to-web-component](https://github.com/bitovi/react-to-web-component) or [react-webcomponent](https://github.com/adobe/react-webcomponent).
+
 ### Issues
 
-You may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-web /issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-web /issues).
+You may submit [issues](https://github.com/AndyObtiva/glimmer-dsl-web/issues) on [GitHub](https://github.com/AndyObtiva/glimmer-dsl-web/issues).
 
-[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-web /issues)
+[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer-dsl-web/issues)
 
 ### Chat
 
@@ -3020,7 +3232,7 @@ These features have been suggested. You might see them in a future version of Gl
 
 * [Andy Maleh](https://github.com/AndyObtiva) (Founder)
 
-[Click here to view contributor commits.](https://github.com/AndyObtiva/glimmer-dsl-web /graphs/contributors)
+[Click here to view contributor commits.](https://github.com/AndyObtiva/glimmer-dsl-web/graphs/contributors)
 
 ## License
 

data/VERSION

@@ -1 +1 @@
-0.2.4
+0.2.5

data/glimmer-dsl-web.gemspec

@@ -2,17 +2,17 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.2.4 ruby lib
+# stub: glimmer-dsl-web 0.2.5 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.2.4"
+  s.version = "0.2.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 = "2024-02-04"
-  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. And, modular design is supported with Glimmer Web Components. 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.date = "2024-05-12"
+  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. 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 = [
     "CHANGELOG.md",
@@ -36,9 +36,15 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.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_form_mvp.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/models/contact.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/presenters/hello_form_mvp_presenter.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_form.rb",
+    "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_observer.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/samples/regular/button_counter.rb",

data/lib/glimmer/web/component.rb

@@ -49,6 +49,7 @@ module Glimmer
             def_option_attr_accessors(new_options)
           end
         end
+        alias attributes options
 
         def option(new_option, default: nil)
           new_option = new_option.to_s.to_sym
@@ -58,6 +59,7 @@ module Glimmer
           'def_option_attr_accessors(new_options)'
           def_option_attr_accessors(new_options)
         end
+        alias attribute option
 
         def def_option_attr_accessors(new_options)
           new_options.each do |option, default|

data/lib/glimmer-dsl-web/ext/kernel.rb

@@ -22,6 +22,7 @@
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 module ::Kernel
+  # TODO contribute to Opal
   alias puts_without_glimmer puts
   def puts(*strs)
     puts_without_glimmer(*strs)
@@ -31,6 +32,7 @@ module ::Kernel
     end
   end
   
+  # TODO contribute to Opal
   alias p_without_glimmer p
   def p(*args)
     p_without_glimmer(*args)

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

@@ -23,6 +23,8 @@ require 'glimmer-dsl-web'
 
 include Glimmer
 
+# This is an introductory version of Hello, Form!
+# Check out Hello, Form (MVP)! for a more serious advanced version built with Glimmer Web Components.
 Document.ready? do
   div {
     h1('Contact Form')

data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp/models/contact.rb

@@ -0,0 +1 @@
+Contact = Struct.new(:name, :email, keyword_init: true)

data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp/presenters/hello_form_mvp_presenter.rb

@@ -0,0 +1,25 @@
+require_relative '../models/contact'
+
+class HelloFormMvpPresenter
+  attr_accessor :contacts
+  
+  def initialize
+    @contacts = fetch_contacts
+  end
+  
+  def fetch_contacts
+    [
+      Contact.new(name: 'John Doe', email: 'johndoe@example.com'),
+      Contact.new(name: 'Jane Doe', email: 'janedoe@example.com'),
+    ]
+  end
+  
+  def new_contact
+    @new_contact ||= Contact.new
+  end
+  
+  def add_contact
+    contacts << Contact.new(name: new_contact.name, email: new_contact.email)
+    new_contact.name = new_contact.email = ''
+  end
+end

data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_form.rb

@@ -0,0 +1,46 @@
+class ContactForm
+  include Glimmer::Web::Component
+  
+  option :presenter
+  
+  markup {
+    form {
+      div {
+        label('Name: ', for: 'name-field')
+        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true) {
+          value <=> [presenter.new_contact, :name]
+        }
+      }
+      
+      div {
+        label('Email: ', for: 'email-field')
+        @email_input = input(type: 'email', id: 'email-field', required: true) {
+          value <=> [presenter.new_contact, :email]
+        }
+      }
+      
+      div {
+        input(type: 'submit', value: 'Add Contact') {
+          onclick do |event|
+            if [@name_input, @email_input].all?(&:check_validity)
+              event.prevent_default
+              # adding contact model to presenter contacts array indirectly updates contacts table
+              presenter.add_contact
+              @name_input.focus
+            end
+          end
+        }
+      }
+      
+      style {
+        # CSS can be included as Glimmer DSL for CSS syntax (Ruby code)
+        r('input') {
+          margin '5px'
+        }
+        r('input[type=submit]') {
+          margin '5px 0'
+        }
+      }
+    }
+  }
+end

data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_table.rb

@@ -0,0 +1,42 @@
+class ContactTable
+  include Glimmer::Web::Component
+  
+  option :presenter
+  
+  markup {
+    table {
+      thead {
+        tr {
+          th('Name')
+          th('Email')
+        }
+      }
+      
+      tbody {
+        content(presenter, :contacts) {
+          presenter.contacts.each do |contact|
+            tr {
+              td(contact.name)
+              td(contact.email)
+            }
+          end
+        }
+      }
+      
+      style {
+        # CSS can be included as Glimmer DSL for CSS syntax (Ruby code)
+        r('table') {
+          border '1px solid grey'
+          border_spacing '0'
+        }
+        r('table tr td, table tr th') {
+          padding '5px'
+        }
+        r('table tr:nth-child(even)') {
+          background '#ccc'
+        }
+      }
+    }
+  }
+end
+      

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

@@ -0,0 +1,51 @@
+# 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
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer-dsl-web'
+
+require_relative 'hello_form_mvp/presenters/hello_form_mvp_presenter'
+
+require_relative 'hello_form_mvp/views/contact_form'
+require_relative 'hello_form_mvp/views/contact_table'
+
+class HelloFormMvp
+  include Glimmer::Web::Component
+  
+  before_render do
+    @presenter = HelloFormMvpPresenter.new
+  end
+  
+  markup {
+    div {
+      h1('Contact Form')
+      
+      contact_form(presenter: @presenter)
+      
+      h1('Contacts Table')
+      
+      contact_table(presenter: @presenter)
+    }
+  }
+end
+
+Document.ready? do
+  HelloFormMvp.render
+end

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

@@ -39,48 +39,34 @@ class HelloObserver
   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
-    # Observer is automatically cleaned up if remove method is called on rendered HelloObserver
-    # or its top-level element
+    
+    # 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
-    # Just disable the observe block above as well as the oninput listeners below
-    # and enable the `value <=> [@number_holder, :number]` lines to try the data-binding version
-    # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
+    # Bidirectional Data-Binding does the same thing automatically as per alternative sample: Hello, Observer (Data-Binding)!
   end
   
   markup {
     div {
       div {
         @number_input = input(type: 'number', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
         }
       }
       div {
         @range_input = input(type: 'range', min: 0, max: 100) {
-          # oninput listener updates Model attribute @number_holder.number
+          # oninput listener (observer) updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
           end
-          
-          # Bidirectional Data-Binding simplifies the implementation significantly
-          # by enabling the following line and disabling oninput listeners as well
-          # as the after_body observe block observer
-          # Learn more about Bidirectional and Unidirectional Data-Binding in hello_data_binding.rb
-#           value <=> [@number_holder, :number]
         }
       }
     }

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

@@ -0,0 +1,57 @@
+# 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
+# "Software"), to deal in the Software without restriction, including
+# without limitation the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the Software, and to
+# permit persons to whom the Software is furnished to do so, subject to
+# the following conditions:
+#
+# The above copyright notice and this permission notice shall be
+# included in all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+require 'glimmer-dsl-web'
+
+class NumberHolder
+  attr_accessor :number
+  
+  def initialize
+    self.number = 50
+  end
+end
+
+class HelloObserver
+  include Glimmer::Web::Component
+  
+  before_render do
+    @number_holder = NumberHolder.new
+  end
+  
+  markup {
+    div {
+      div {
+        input(type: 'number', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
+        }
+      }
+      div {
+        input(type: 'range', min: 0, max: 100) {
+          value <=> [@number_holder, :number]
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloObserver.render
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.2.5
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-04 00:00:00.000000000 Z
+date: 2024-05-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -240,11 +240,11 @@ description: Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) en
   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. And, modular design is supported with Glimmer Web Components.
-  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.
+  Content Data-Binding. Modular design is supported with Glimmer Web Components. 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.
 email: andy.am@gmail.com
 executables: []
 extensions: []
@@ -269,9 +269,15 @@ files:
 - lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.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_form_mvp.rb
+- lib/glimmer-dsl-web/samples/hello/hello_form_mvp/models/contact.rb
+- lib/glimmer-dsl-web/samples/hello/hello_form_mvp/presenters/hello_form_mvp_presenter.rb
+- lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_form.rb
+- 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_observer.rb
+- lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb
 - lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb
 - lib/glimmer-dsl-web/samples/hello/hello_world.rb
 - lib/glimmer-dsl-web/samples/regular/button_counter.rb