glimmer-dsl-web 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c418754ebdb0e40b75d62576c678942a321ee5d8b0dbb0f9d3bafbd4d0622cbb
-  data.tar.gz: a4e98d44358353332f166e3191bad00393532ac13dcbe0af214db53f91921b11
+  metadata.gz: 212cee9f2c87b145cca85b47395f541a749d0a472560a946c1f3b0061ec7b801
+  data.tar.gz: f7cccb64081e75018c6e043e021b071d70c7b2696057a32e25b191fb2c3dd4f6
 SHA512:
-  metadata.gz: d756e84e43ba8cce780251ab96c40234e2b5a9d53724b2be329d5cdef53d02d33a2ab629035a8c742d7ff75b888f76d2f8e92fcb5354a012bbdd061024c0db66
-  data.tar.gz: 221e1d4472510c02d403439d6fde7c33ace135f10337f2a258c1641d3685d41b8c5d049f2a96e99cbdad1dd2587c1728aa03bce04cb844705f083e2664bb49b0
+  metadata.gz: e590b30b6f3d54f859e168bd7220cfa51e8d3f2354836fb851ab20c21114518ddd2a502a74a262b704148561e64b65a07cbd2ed61593914a274fa7542da8e1c9
+  data.tar.gz: 1a334ce05e730c2eef25005d5a1a9d16683b639fac910e83ba0ceff88c380230df884486f994140bce11a68e10210ff1a28266604560ecaa134859b621402cf2

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 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`)
+- Support Content Data-Binding from inside a `Glimmer::Web::Component`
+
 ## 0.2.3
 
 - Ensure that setting `element.class_name=classnameval` does not override its Glimmer built-in CSS classes

data/README.md

@@ -1,15 +1,15 @@
-# [<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.3 (Beta)
-## Ruby in the Browser Web GUI Frontend Library
+# [<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)
+## Ruby in the Browser Web Frontend Framework
 [![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 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, most straight-forward, and most productive 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)) in building Isomorphic Ruby on Rails Applications. 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). 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 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)!
 
 **Hello, World! Sample**
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -39,7 +39,7 @@ 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`.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -71,9 +71,9 @@ Screenshot:
 
 **Hello, Form!**
 
-[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 GUI DSL.
+[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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -229,7 +229,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -348,7 +348,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -479,15 +479,15 @@ Screenshot:
 
 You can define Glimmer web components (View components) to reuse visual concepts to your heart's content,
 by simply defining a class with `include Glimmer::Web::Component` and encasing the reusable markup inside
-a `markup {...}` block. Glimmer web components automatically extend the Glimmer GUI DSL with new keywords
+a `markup {...}` block. Glimmer web components automatically extend the Glimmer HTML DSL with new keywords
 that match the underscored versions of the component class names (e.g. an `OrderSummary` class yields
-the `order_summary` keyword for reusing that component within the Glimmer GUI DSL). 
-You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` 
+the `order_summary` keyword for reusing that component within the Glimmer HTML DSL).
+You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)`
 Rails helper (more about it in [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)).
 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -567,9 +567,9 @@ end
 # AddressForm Glimmer Web Component (View component)
 #
 # Including Glimmer::Web::Component makes this class a View component and automatically
-# generates a new Glimmer GUI DSL keyword that matches the lowercase underscored version
+# generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
 # of the name of the class. AddressForm generates address_form keyword, which can be used
-# elsewhere in Glimmer GUI DSL code as done inside AddressPage below.
+# elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
 class AddressForm
   include Glimmer::Web::Component
   
@@ -736,7 +736,7 @@ Rails View code:
 </div>
 ```
 
-Glimmer GUI code in the frontend (`app/assets/opal/address_form.rb`):
+Glimmer HTML DSL Ruby code in the frontend (`app/assets/opal/address_form.rb`):
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -901,9 +901,9 @@ Screenshot:
 
 **Hello, Paragraph!**
 
-To facilitate building formatted textual paragraphs in Ruby, thanks to [Glimmer](https://github.com/AndyObtiva/glimmer#dsl-engine), the most advanced DSL engine in Ruby, the Glimmer GUI DSL is advanced enough to intelligently behave differently under different situations, like when using HTML formatting elements: `<br>`, `<strong>`, `<em>`, `<br>`, `<i>`, `<sub>`, `<sup>`, `<del>`, `<ins>`, `<small>`, `<mark>`
+To facilitate building formatted textual paragraphs in Ruby, thanks to [Glimmer](https://github.com/AndyObtiva/glimmer#dsl-engine), the most advanced DSL engine in Ruby, the Glimmer HTML DSL is advanced enough to intelligently behave differently under different situations, like when using HTML formatting elements: `<br>`, `<strong>`, `<em>`, `<br>`, `<i>`, `<sub>`, `<sup>`, `<del>`, `<ins>`, `<small>`, `<mark>`
 
-Instead of returning Ruby objects that are nested as children within their parent, the Glimmer GUI DSL returns `String` objects directly that can be concatenated to or embedded within other `String` objects via interpolation.
+Instead of returning Ruby objects that are nested as children within their parent, the Glimmer HTML DSL returns `String` objects directly that can be concatenated to or embedded within other `String` objects via interpolation.
 
 This enables writing code like:
 
@@ -931,9 +931,9 @@ it returns a `String` to enable code like this:
 
 `p {"#{span('Yesterday, ', style: 'text-decoration: underline;')}Robert suggested adding a new #{em('feature', class: 'very-emphasized')} to our software product.#{br}}`
 
-In any case, below is a full example leveraging the Glimmer GUI DSL alternative approach when utilizing formatting elements underneath a paragraph.
+In any case, below is a full example leveraging the Glimmer HTML DSL alternative approach when utilizing formatting elements underneath a paragraph.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -994,7 +994,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1074,7 +1074,7 @@ Screenshot:
 
 ![Hello, Observer!](/images/glimmer-dsl-web-samples-hello-hello-observer.gif)
 
-To get started, [Setup](#setup) Ruby gem, read [Usage](#usage) instructions, and check out more [Samples](#samples).
+To get started, [Setup](#setup) Ruby gem, read [Usage](#usage) instructions, and check out more [Samples](#samples) (including playing around with a [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app)).
 
 --
 
@@ -1089,6 +1089,9 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 - [Glimmer DSL for Web](#)
   - [Prerequisites](#prerequisites)
   - [Setup](#setup)
+    - [Rails 7](#rails-7)
+    - [Rails 6](#rails-6)
+    - [Standalone (No Rails)](#standalone-no-rails)
   - [Usage](#usage)
   - [Supported Glimmer DSL Keywords](#supported-glimmer-dsl-keywords)
   - [Coming from Glimmer DSL for Opal](#coming-from-glimmer-dsl-for-opal)
@@ -1126,11 +1129,13 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Setup
 
+You can setup Glimmer DSL for Web in [Rails 7](#rails-7), [Rails 6](#rails-6), or [Standalone (No Rails)](#standalone-no-rails).
+
 (NOTE: Keep in mind this is a Beta. 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)
 
 ### Rails 7
 
-Please follow the following steps to setup.
+Please follow these steps to setup.
 
 Install a Rails 7 gem:
 
@@ -1147,7 +1152,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.2.3'
+gem 'glimmer-dsl-web', '~> 0.2.4'
 ```
 
 Run:
@@ -1164,7 +1169,7 @@ Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically
 bin/rails g opal:install
 ```
 
-To enable the `glimmer-dsl-web` library in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom:
+To enable the `glimmer-dsl-web` gem in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom:
 
 ```ruby
 Opal.use_gem 'glimmer-dsl-web'
@@ -1220,7 +1225,7 @@ Edit and replace `app/assets/opal/opal_application.rb` content with code below (
 ```ruby
 require 'glimmer-dsl-web' # brings opal and other dependencies automatically
 
-# Add more require-statements or Glimmer GUI DSL code
+# Add more require-statements or Glimmer HTML DSL code
 ```
 
 ```ruby
@@ -1229,7 +1234,7 @@ require 'glimmer-dsl-web'
 require 'glimmer-dsl-web/samples/hello/hello_world.rb'
 ```
 
-If the `<body></body>` element (where the Glimmer GUI DSL adds elements by default) is not available when the JS file is loading, you need to put the code inside a `Document.ready? do; end` (but, it is recommended that you load the JS file after the parent element like `<body></body>` is in the page already for faster performance, which is guaranteed automatically by using `glimmer_component`, mentioned in details below):
+If the `<body></body>` element (where the Glimmer HTML DSL adds elements by default) is not available when the JS file is loading, you need to put the code inside a `Document.ready? do; end` (but, it is recommended that you load the JS file after the parent element like `<body></body>` is in the page already for faster performance, which is guaranteed automatically by using `glimmer_component`, mentioned in details below):
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1241,7 +1246,7 @@ end
 
 Example to confirm setup is working:
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1292,7 +1297,7 @@ HTML:
 ...
 ```
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1349,7 +1354,7 @@ Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
 
 ### Rails 6
 
-Please follow the following steps to setup.
+Please follow these steps to setup.
 
 Install a Rails 6 gem:
 
@@ -1372,7 +1377,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.2.3'
+gem 'glimmer-dsl-web', '~> 0.2.4'
 ```
 
 Run:
@@ -1389,7 +1394,7 @@ Follow [opal-rails](https://github.com/opal/opal-rails) instructions, basically
 bin/rails g opal:install
 ```
 
-To enable the `glimmer-dsl-web` library in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom:
+To enable the `glimmer-dsl-web` gem in the frontend, edit `config/initializers/assets.rb` and add the following at the bottom:
 
 ```ruby
 Opal.use_gem 'glimmer-dsl-web'
@@ -1451,7 +1456,7 @@ Edit and replace `app/assets/opal/opal_application.rb` content with code below (
 ```ruby
 require 'glimmer-dsl-web' # brings opal and other dependencies automatically
 
-# Add more require-statements or Glimmer GUI DSL code
+# Add more require-statements or Glimmer HTML DSL code
 ```
 
 Example to confirm setup is working:
@@ -1465,7 +1470,7 @@ Initial HTML Markup:
 ...
 ```
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1533,9 +1538,15 @@ Otherwise, if you still cannot setup successfully (even with the help of the sam
 
 Next, read [Usage](#usage) instructions, and check out [Samples](#samples).
 
+### Standalone (No Rails)
+
+Andreas Idogawa-Wildi ([@Largo](https://github.com/Largo)) created a project that demonstrates how to use Glimmer DSL for Web standalone (without Rails):
+
+[https://github.com/Largo/glimmer-dsl-web-standalone-demo](https://github.com/Largo/glimmer-dsl-web-standalone-demo)
+
 ## Usage
 
-Glimmer DSL for Web offers a GUI DSL ([Graphical User Interface](https://en.wikipedia.org/wiki/Graphical_user_interface) [Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language)) for building HTML Web User Interfaces declaratively in Ruby.
+Glimmer DSL for Web offers a HTML DSL ([Graphical User Interface](https://en.wikipedia.org/wiki/Graphical_user_interface) [Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language)) for building HTML Web User Interfaces declaratively in Ruby.
 
 1- **Keywords (HTML Elements)**
 
@@ -1551,7 +1562,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 (intentionally breaking away from Ruby imperative code conventions given this is a declarative GUI DSL ([Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language)), meaning a different language that has its own conventions, embedded within Ruby).
+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 HTML DSL structure code (intentionally breaking away from Ruby imperative code conventions given this is a declarative HTML DSL ([Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language)), meaning a different language that has its own conventions, embedded within Ruby).
 
 You can nest HTML element properties under an element like:
 
@@ -1571,7 +1582,7 @@ button('Add') {
 }
 ```
 
-Given that listener code is imperative, it uses a `do; end` style for Ruby blocks to separate it from declarative GUI structure code and enable quicker readability of the code.
+Given that listener code is imperative, it uses a `do; end` style for Ruby blocks to separate it from declarative HTML DSL structure code and enable quicker readability of the code.
 
 You can nest other HTML elements under an HTML element the same way you do so in HTML, like:
 
@@ -1617,7 +1628,7 @@ Next, check out [Samples](#samples).
 
 ## Coming from Glimmer DSL for Opal
 
-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.
+This project is inspired by [Glimmer DSL for Opal](https://github.com/AndyObtiva/glimmer-dsl-opal) and is similar in enabling Web Frontend 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 HTML DSL that is webified. As a result, applications written in Glimmer DSL for Opal are not compatible with Glimmer DSL for Web.
 
 ## Samples
 
@@ -1629,7 +1640,7 @@ https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
 #### Hello, World!
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1681,7 +1692,7 @@ 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`.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1713,9 +1724,9 @@ Screenshot:
 
 #### Hello, Form!
 
-[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 GUI DSL.
+[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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1871,7 +1882,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -1955,7 +1966,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2128,7 +2139,7 @@ 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2259,15 +2270,15 @@ Screenshot:
 
 You can define Glimmer web components (View components) to reuse visual concepts to your heart's content,
 by simply defining a class with `include Glimmer::Web::Component` and encasing the reusable markup inside
-a `markup {...}` block. Glimmer web components automatically extend the Glimmer GUI DSL with new keywords
+a `markup {...}` block. Glimmer web components automatically extend the Glimmer HTML DSL with new keywords
 that match the underscored versions of the component class names (e.g. an `OrderSummary` class yields
-the `order_summary` keyword for reusing that component within the Glimmer GUI DSL).
-You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)` 
+the `order_summary` keyword for reusing that component within the Glimmer HTML DSL).
+You may insert a Glimmer component anywhere into a Rails View using `glimmer_component(component_path, *args)`
 Rails helper (more about it in [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)).
 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.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2347,9 +2358,9 @@ end
 # AddressForm Glimmer Web Component (View component)
 #
 # Including Glimmer::Web::Component makes this class a View component and automatically
-# generates a new Glimmer GUI DSL keyword that matches the lowercase underscored version
+# generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
 # of the name of the class. AddressForm generates address_form keyword, which can be used
-# elsewhere in Glimmer GUI DSL code as done inside AddressPage below.
+# elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
 class AddressForm
   include Glimmer::Web::Component
   
@@ -2516,7 +2527,7 @@ Rails View code:
 </div>
 ```
 
-Glimmer GUI code in the frontend (`app/assets/opal/address_form.rb`):
+Glimmer HTML DSL Ruby code in the frontend (`app/assets/opal/address_form.rb`):
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2681,9 +2692,9 @@ Screenshot:
 
 #### Hello, Paragraph!
 
-To facilitate building formatted textual paragraphs in Ruby, thanks to [Glimmer](https://github.com/AndyObtiva/glimmer#dsl-engine), the most advanced DSL engine in Ruby, the Glimmer GUI DSL is advanced enough to intelligently behave differently under different situations, like when using HTML formatting elements: `<br>`, `<strong>`, `<em>`, `<br>`, `<i>`, `<sub>`, `<sup>`, `<del>`, `<ins>`, `<small>`, `<mark>`
+To facilitate building formatted textual paragraphs in Ruby, thanks to [Glimmer](https://github.com/AndyObtiva/glimmer#dsl-engine), the most advanced DSL engine in Ruby, the Glimmer HTML DSL is advanced enough to intelligently behave differently under different situations, like when using HTML formatting elements: `<br>`, `<strong>`, `<em>`, `<br>`, `<i>`, `<sub>`, `<sup>`, `<del>`, `<ins>`, `<small>`, `<mark>`
 
-Instead of returning Ruby objects that are nested as children within their parent, the Glimmer GUI DSL returns `String` objects directly that can be concatenated to or embedded within other `String` objects via interpolation.
+Instead of returning Ruby objects that are nested as children within their parent, the Glimmer HTML DSL returns `String` objects directly that can be concatenated to or embedded within other `String` objects via interpolation.
 
 This enables writing code like:
 
@@ -2711,9 +2722,9 @@ it returns a `String` to enable code like this:
 
 `p {"#{span('Yesterday, ', style: 'text-decoration: underline;')}Robert suggested adding a new #{em('feature', class: 'very-emphasized')} to our software product.#{br}}`
 
-In any case, below is a full example leveraging the Glimmer GUI DSL alternative approach when utilizing formatting elements underneath a paragraph.
+In any case, below is a full example leveraging the Glimmer HTML DSL alternative approach when utilizing formatting elements underneath a paragraph.
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2774,7 +2785,7 @@ Screenshot:
 
 #### Hello, Input (Date/Time)!
 
-Glimmer GUI code in the frontend:
+Glimmer HTML DSL Ruby code in the frontend:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2879,7 +2890,7 @@ Screenshot:
 
 #### Button Counter
 
-Glimmer GUI code in the frontend demonstrating MVC + Glimmer Web Components (Views) + Data-Binding:
+Glimmer HTML DSL Ruby code in the frontend demonstrating MVC + Glimmer Web Components (Views) + Data-Binding:
 
 ```ruby
 require 'glimmer-dsl-web'
@@ -2958,7 +2969,7 @@ Screenshot:
 
 - The Ruby Way (including TIMTOWTDI: There Is More Than One Way To Do It)
 - The Rails Way Convention over Configuration via smart defaults and automation of low-level details
-- Requiring the least amount of syntax possible to build highly interactive web pages
+- Requiring the least amount of code possible to build highly interactive web pages
 - Declarative syntax that visually maps to the DOM (Document Object Model) hierarchy
 - Ability to mix declarative and imperative code conveniently in one language
 - Computers serve Software Engineers (not Software Engineers serve Computers)

data/VERSION

@@ -1 +1 @@
-0.2.3
+0.2.4

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.3 ruby lib
+# stub: glimmer-dsl-web 0.2.4 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.2.3".freeze
+  s.version = "0.2.4"
 
   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-13"
-  s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) enables building Web GUI 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 library in existence. The library follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. 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. You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This library relies on Opal Ruby.".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.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
     "CHANGELOG.md",
@@ -30,6 +30,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/ext/class.rb",
     "lib/glimmer-dsl-web/ext/date.rb",
     "lib/glimmer-dsl-web/ext/exception.rb",
+    "lib/glimmer-dsl-web/ext/kernel.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_button.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_component.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb",
@@ -69,24 +70,24 @@ Gem::Specification.new do |s|
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze
   s.licenses = ["MIT".freeze]
-  s.rubygems_version = "3.5.3".freeze
-  s.summary = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library)".freeze
+  s.rubygems_version = "3.4.10".freeze
+  s.summary = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework)".freeze
 
   s.specification_version = 4
 
-  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2".freeze])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.3".freeze])
-  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2".freeze])
-  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3".freeze])
-  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1".freeze])
-  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.1".freeze])
-  s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1".freeze, "< 3.0.0".freeze])
-  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0".freeze])
-  s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0".freeze, "< 14.0.0".freeze])
-  s.add_development_dependency(%q<rake-tui>.freeze, [">= 0".freeze])
-  s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9".freeze, "< 3.0.0".freeze])
-  s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1".freeze, "< 7.0.0".freeze])
-  s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2".freeze])
+  s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.7.6"])
+  s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.3.2"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.2.3"])
+  s.add_runtime_dependency(%q<opal>.freeze, ["= 1.8.2"])
+  s.add_runtime_dependency(%q<opal-rails>.freeze, ["= 2.0.3"])
+  s.add_runtime_dependency(%q<opal-async>.freeze, ["~> 1.4.1"])
+  s.add_runtime_dependency(%q<opal-jquery>.freeze, ["~> 0.5.1"])
+  s.add_runtime_dependency(%q<to_collection>.freeze, [">= 2.0.1", "< 3.0.0"])
+  s.add_development_dependency(%q<puts_debuggerer>.freeze, [">= 0"])
+  s.add_development_dependency(%q<rake>.freeze, [">= 10.1.0", "< 14.0.0"])
+  s.add_development_dependency(%q<rake-tui>.freeze, [">= 0"])
+  s.add_development_dependency(%q<jeweler>.freeze, [">= 2.3.9", "< 3.0.0"])
+  s.add_development_dependency(%q<rdoc>.freeze, [">= 6.2.1", "< 7.0.0"])
+  s.add_development_dependency(%q<opal-rspec>.freeze, ["~> 0.8.0.alpha2"])
 end
 

data/lib/glimmer/web/component.rb

@@ -316,11 +316,16 @@ module Glimmer
       
       # Returns content block if used as an attribute reader (no args)
       # Otherwise, if a block is passed, it adds it as content to this Glimmer web component
-      def content(&block)
-        if block_given?
-          Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ComponentExpression.new, self.class.keyword, &block)
+      def content(*args, &block)
+        if args.empty?
+          if block_given?
+            Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Web::ComponentExpression.new, self.class.keyword, &block)
+          else
+            @content
+          end
         else
-          @content
+          # delegate to GUI DSL ContentExpression
+          super
         end
       end
 

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

@@ -0,0 +1,42 @@
+# backtick_javascript: true
+
+# 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.
+
+module ::Kernel
+  alias puts_without_glimmer puts
+  def puts(*strs)
+    puts_without_glimmer(*strs)
+  rescue Exception
+    strs.each do |str|
+      `console.log(#{str})`
+    end
+  end
+  
+  alias p_without_glimmer p
+  def p(*args)
+    p_without_glimmer(*args)
+  rescue Exception
+    args.each do |arg|
+      `console.log(#{arg})`
+    end
+  end
+end

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

@@ -96,9 +96,9 @@ end
 # AddressForm Glimmer Web Component (View component)
 #
 # Including Glimmer::Web::Component makes this class a View component and automatically
-# generates a new Glimmer GUI DSL keyword that matches the lowercase underscored version
+# generates a new Glimmer HTML DSL keyword that matches the lowercase underscored version
 # of the name of the class. AddressForm generates address_form keyword, which can be used
-# elsewhere in Glimmer GUI DSL code as done inside AddressPage below.
+# elsewhere in Glimmer HTML DSL code as done inside AddressPage below.
 class AddressForm
   include Glimmer::Web::Component
   

data/lib/glimmer-dsl-web.rb

@@ -64,6 +64,7 @@ else
   require 'glimmer'
   require 'glimmer-dsl-web/ext/exception'
   require 'glimmer-dsl-web/ext/date'
+  require 'glimmer-dsl-web/ext/kernel'
   
   # Spiking async logging
 #   logger = Glimmer::Config.logger

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-13 00:00:00.000000000 Z
+date: 2024-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -230,18 +230,21 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.8.0.alpha2
-description: Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) enables
-  building Web GUI 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 library in existence. The library follows the Ruby way (with DSLs and TIMTOWTDI)
+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 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. You can finally live in pure Rubyland
-  on the Web in both the frontend and backend with Glimmer DSL for Web! This library
-  relies on Opal Ruby.
+  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.
 email: andy.am@gmail.com
 executables: []
 extensions: []
@@ -260,6 +263,7 @@ files:
 - lib/glimmer-dsl-web/ext/class.rb
 - lib/glimmer-dsl-web/ext/date.rb
 - lib/glimmer-dsl-web/ext/exception.rb
+- lib/glimmer-dsl-web/ext/kernel.rb
 - lib/glimmer-dsl-web/samples/hello/hello_button.rb
 - lib/glimmer-dsl-web/samples/hello/hello_component.rb
 - lib/glimmer-dsl-web/samples/hello/hello_content_data_binding.rb
@@ -315,8 +319,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.3
+rubygems_version: 3.4.10
 signing_key:
 specification_version: 4
-summary: Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library)
+summary: Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework)
 test_files: []