glimmer-dsl-web 0.0.11 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c16186f1613018ccbaaf2b6bc4214b2e0ad5ce8a96354639febd256616f18a1f
-  data.tar.gz: 26b8cb6ac6b64c912e39294b32cc21f29f053aa62000991970846dd95f127d57
+  metadata.gz: 5c9bd6a7f085751de551a8eada611f25b6462c32f31019ebc31e296a98a7dbe7
+  data.tar.gz: cde631c346fddf15d48c52b85643f4f436761b059ccca0a8909cca56fdc7676e
 SHA512:
-  metadata.gz: 0dc717529f81c4aa66e6ed6c31c32bef68e71a152ec04f3b619515339d29d5f71de076d2e4fd2622b2f7ca173e15a426588a8e46127e1f78139f403722341f6d
-  data.tar.gz: 5901cf78e56fac1cb786955bc1d84777968d3f881d00c06d1e2b9b46a0e52c83c79674560a71103b6685b4bbe1a04d45ebd858e8039404a6f713817c1e72817c
+  metadata.gz: 036cbe077a6378e6fb18cf10060074b4a071b20f4293960ded842458069c4dfb5bc041eb909f0b7b3cfbb809f73a41605f2b97f101b338f1ee616e52f00445c3
+  data.tar.gz: 4441339edfaf2724324e4aa30c19b2afc7e0e9d673add6130882e1c3220e278a1be1d21be126bf9b8aaa7568c62a0c59ecbce9ca2d1103183263ae17deb2d15e

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 0.1.0
+
+- Update rendering system to render HTML elements immediately instead of waiting for complete components to be rendered all at once.
+- Support `render: false` option in any element or component to avoid rendering when building the elements/components (including a Component#create alternative to Component#render that defers rendering if needed).
+- Fix `Glimmer::Web::Component` `after_render` hook by ensuring it only fires after the component markup has been rendered
+
+## 0.0.12
+
+- Treat HTML text formatting elements differently (e.g. `b`, `i`, `strong`, `em`, `sub`, `sup`, `del`, `ins`, `small`, `mark`) by not appending to their parent content, yet having them generate a String with `to_s` that can be embedded in a `String` that is the text content of another normal element like `p` or `div`.
+- Treat `span` as a special text formatting element if included inside a `p` and as a normal element outside a `p`.
+- Hello, Paragraph! Sample: `require 'glimmer-dsl-web/samples/hello/hello_paragraph'`
+
 ## 0.0.11
 
 - Support element custom event listener: `on_remove`

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.0.11 (Early Alpha)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.1.0 (Beta)
 ## Ruby in the Browser Web GUI Frontend Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -17,7 +17,7 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end
 ```
 
@@ -49,7 +49,7 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -150,7 +150,7 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end
 ```
 
@@ -245,7 +245,11 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    @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(@number_holder, :number) do
       number_string = @number_holder.number.to_s
       @number_input.value = number_string unless @number_input.value == number_string
@@ -260,7 +264,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -274,7 +278,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
@@ -409,7 +413,7 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end
 ```
 
@@ -544,7 +548,7 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -978,7 +982,100 @@ Screenshot:
 
 ![Hello, glimmer_component Rails Helper!](/images/glimmer-dsl-web-samples-hello-hello-component.png)
 
-NOTE: Glimmer DSL for Web is an Early Alpha project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
+**Hello, Paragraph!**
+
+To facilitate building formatted textual paragraphs in Ruby, the Glimmer GUI DSL is advanced enough to behave differently 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.
+
+This enables writing code like:
+
+`p {"#{strong('Yesterday, ')}Robert suggested adding a new #{em('feature')} to our software product.#{br}}`
+
+That is close to how it is written in HTML, albeit briefer in Ruby:
+
+`<p><strong>Yesterday, </strong>Robert suggested adding a new <em>feature</em> to our software product.<br></p>`
+
+Formatting elements just like regular elements can accept text content as their first argument or as their block return value. So, the code above could equally be written as follows:
+
+`p {"#{strong{'Yesterday, '}}Robert suggested adding a new #{em{'feature'}} to our software product.#{br}}`
+
+This enables seggregating formatting element attributes if desired, as in this example:
+
+`p {"#{strong(class: 'very-string'){'Yesterday, '}}Robert suggested adding a new #{em(class: 'very-emphasized'){'feature'}} to our software product.#{br}}`
+
+Another way of writing the same code is to pass the text content as the first argument, before attributes:
+
+
+`p {"#{strong('Yesterday, ', class: 'very-string')}Robert suggested adding a new #{em('feature', class: 'very-emphasized')} to our software product.#{br}}`
+
+One last bit of info to keep in mind is that `<span>` generally generates a normal element, except when used inside a `<p>`'s content block, in which case it is assumed to be used for formatting, so
+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.
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class HelloParagraph
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1(class: 'title') {
+        'Flying Cars Become 100% Safe with AI Powered Balance!'
+      }
+      
+      p(class: 'intro') {"
+        In the early 2030's, #{em('flying cars')} became affordable after their prices dropped
+        below #{small(del('$100,000'))}#{ins('$80,000')} as a result of the innovations of #{strong('Travel-X')}. Still, that did not
+        make #{em('flying cars')} any popular due to the extreme difficulty in piloting such flying vehicles for the average
+        person, making it very tough to pass the tests for getting a piloting license given the learning curve.
+      "}
+      
+      p {"
+        That said, #{b('Travel-X')} has recently come up with a new feature for their flagship #{i('flying car')},
+        the Ptero#{sub(1)}#{sup('TM')}, which relies on AI#{sub(2)} to automatically balance the flying cars in mid-air,
+        thus significantly facilitating their piloting by the average consumer.
+      "}
+      
+      p(class: 'conclusion') {"
+        That Ptero#{sup('TM')} will be so stable and well balanced while flying that the consumer will be able to drive
+        as if it is a plain old car, with the only difference being vertical elevation, the control of which will be handled
+        automatically by AI. The Ptero#{sup('TM')} will debut for #{span(style: 'text-decoration: underline dashed;'){'$79,000'}}.
+      "}
+      
+      h2(class: 'legend-title') {
+        mark('Legend:')
+      }
+      
+      p(class: 'legend') {"
+        #{strong("1- Ptero:")} Pterosaur is flying dinosaur species#{br}
+        #{strong("2- AI:")} Artificial Intelligence#{br}
+      "}
+        
+    }
+  }
+end
+
+Document.ready? do
+  HelloParagraph.render
+end
+```
+
+Screenshot:
+
+--
+
+![Hello, Paragraph!](/images/glimmer-dsl-web-samples-hello-hello-paragraph.png)
+
+--
+
+NOTE: Glimmer DSL for Web is a Beta project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still a Beta, so the more feedback and issues you report the better.
 
 Learn more about the differences between various [Glimmer](https://github.com/AndyObtiva/glimmer) DSLs by looking at:
 
@@ -986,9 +1083,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Table of Contents
 
-- [Glimmer DSL for Web](#-glimmer-dsl-for-opal-alpha-pure-ruby-web-gui)
-  - [Principles](#principles)
-  - [Background](#background)
+- [Glimmer DSL for Web](#)
   - [Prerequisites](#prerequisites)
   - [Setup](#setup)
   - [Usage](#usage)
@@ -1004,8 +1099,11 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Content Data-Binding!](#hello-content-data-binding)
       - [Hello, Component!](#hello-content-data-binding)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
+      - [Hello, Paragraph!](#hello-paragraph)
       - [Hello, Input (Date/Time)!](#hello-input-datetime)
       - [Button Counter](#button-counter)
+  - [Design Principles](#design-principles)
+  - [Supporting Libraries](#supporting-libraries)
   - [Glimmer Process](#glimmer-process)
   - [Help](#help)
     - [Issues](#issues)
@@ -1025,7 +1123,7 @@ Learn more about the differences between various [Glimmer](https://github.com/An
 
 ## Setup
 
-(NOTE: Keep in mind this is an Early Alpha. If you run into issues, try to go back to a [previous revision](https://rubygems.org/gems/glimmer-dsl-web/versions). Also, there is a slight chance any issues you encounter are fixed in master or some other branch that you could check out instead)
+(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)
 
 The [glimmer-dsl-web](https://rubygems.org/gems/glimmer-dsl-web) gem is a [Rails Engine](https://guides.rubyonrails.org/engines.html) gem that includes assets.
 
@@ -1048,7 +1146,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.0.11'
+gem 'glimmer-dsl-web', '~> 0.1.0'
 ```
 
 Run:
@@ -1151,7 +1249,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1202,7 +1300,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1264,7 +1362,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.0.11'
+gem 'glimmer-dsl-web', '~> 0.1.0'
 ```
 
 Run:
@@ -1365,7 +1463,7 @@ Document.ready? do
     label(class: 'greeting') {
       'Hello, World!'
     }
-  }.render
+  }
 end
 ```
 
@@ -1520,7 +1618,7 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end
 ```
 
@@ -1542,7 +1640,7 @@ require 'glimmer-dsl-web'
 include Glimmer
 
 Document.ready? do
-  div('Hello, World!').render
+  div('Hello, World!')
 end
 ```
 
@@ -1574,7 +1672,7 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -1675,7 +1773,7 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end
 ```
 
@@ -1770,7 +1868,11 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    @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(@number_holder, :number) do
       number_string = @number_holder.number.to_s
       @number_input.value = number_string unless @number_input.value == number_string
@@ -1785,7 +1887,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -1799,7 +1901,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i
@@ -1990,7 +2092,7 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end
 ```
 
@@ -2125,7 +2227,7 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end
 ```
 
@@ -2559,6 +2661,98 @@ Screenshot:
 
 ![Hello, glimmer_component Rails Helper!](/images/glimmer-dsl-web-samples-hello-hello-component.png)
 
+#### Hello, Paragraph!
+
+To facilitate building formatted textual paragraphs in Ruby, the Glimmer GUI DSL is advanced enough to behave differently 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.
+
+This enables writing code like:
+
+`p {"#{strong('Yesterday, ')}Robert suggested adding a new #{em('feature')} to our software product.#{br}}`
+
+That is close to how it is written in HTML, albeit briefer in Ruby:
+
+`<p><strong>Yesterday, </strong>Robert suggested adding a new <em>feature</em> to our software product.<br></p>`
+
+Formatting elements just like regular elements can accept text content as their first argument or as their block return value. So, the code above could equally be written as follows:
+
+`p {"#{strong{'Yesterday, '}}Robert suggested adding a new #{em{'feature'}} to our software product.#{br}}`
+
+This enables seggregating formatting element attributes if desired, as in this example:
+
+`p {"#{strong(class: 'very-string'){'Yesterday, '}}Robert suggested adding a new #{em(class: 'very-emphasized'){'feature'}} to our software product.#{br}}`
+
+Another way of writing the same code is to pass the text content as the first argument, before attributes:
+
+
+`p {"#{strong('Yesterday, ', class: 'very-string')}Robert suggested adding a new #{em('feature', class: 'very-emphasized')} to our software product.#{br}}`
+
+One last bit of info to keep in mind is that `<span>` generally generates a normal element, except when used inside a `<p>`'s content block, in which case it is assumed to be used for formatting, so
+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.
+
+Glimmer GUI code:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class HelloParagraph
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1(class: 'title') {
+        'Flying Cars Become 100% Safe with AI Powered Balance!'
+      }
+      
+      p(class: 'intro') {"
+        In the early 2030's, #{em('flying cars')} became affordable after their prices dropped
+        below #{small(del('$100,000'))}#{ins('$80,000')} as a result of the innovations of #{strong('Travel-X')}. Still, that did not
+        make #{em('flying cars')} any popular due to the extreme difficulty in piloting such flying vehicles for the average
+        person, making it very tough to pass the tests for getting a piloting license given the learning curve.
+      "}
+      
+      p {"
+        That said, #{b('Travel-X')} has recently come up with a new feature for their flagship #{i('flying car')},
+        the Ptero#{sub(1)}#{sup('TM')}, which relies on AI#{sub(2)} to automatically balance the flying cars in mid-air,
+        thus significantly facilitating their piloting by the average consumer.
+      "}
+      
+      p(class: 'conclusion') {"
+        That Ptero#{sup('TM')} will be so stable and well balanced while flying that the consumer will be able to drive
+        as if it is a plain old car, with the only difference being vertical elevation, the control of which will be handled
+        automatically by AI. The Ptero#{sup('TM')} will debut for #{span(style: 'text-decoration: underline dashed;'){'$79,000'}}.
+      "}
+      
+      h2(class: 'legend-title') {
+        mark('Legend:')
+      }
+      
+      p(class: 'legend') {"
+        #{strong("1- Ptero:")} Pterosaur is flying dinosaur species#{br}
+        #{strong("2- AI:")} Artificial Intelligence#{br}
+      "}
+        
+    }
+  }
+end
+
+Document.ready? do
+  HelloParagraph.render
+end
+```
+
+Screenshot:
+
+--
+
+![Hello, Paragraph!](/images/glimmer-dsl-web-samples-hello-hello-paragraph.png)
+
+--
 
 #### Hello, Input (Date/Time)!
 
@@ -2659,7 +2853,7 @@ Document.ready? do
         CSS
       }
     }
-  }.render
+  }
 end
 ```
 
@@ -2744,7 +2938,18 @@ Screenshot:
 
 ![Button Counter](/images/glimmer-dsl-web-samples-regular-button-counter.gif)
 
-## Glimmer Supporting Libraries
+## Design Principles
+
+- 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
+- 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)
+- Think only about real world concepts directly relevant to web page interaction
+- Modular Software Design (e.g. support for Components)
+
+## Supporting Libraries
 
 Here is a list of notable 3rd party gems used by Glimmer DSL for Web:
 - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML & HTML in pure Ruby.

data/VERSION

@@ -1 +1 @@
-0.0.11
+0.1.0

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.0.11 ruby lib
+# stub: glimmer-dsl-web 0.1.0 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.11".freeze
+  s.version = "0.1.0".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]
   s.authors = ["Andy Maleh".freeze]
-  s.date = "2024-01-06"
-  s.description = "Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) - Enables frontend GUI development with Ruby by adopting a DSL that follows web-like HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development. This library relies on Opal Ruby.".freeze
+  s.date = "2024-01-08"
+  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) while supporting 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.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
     "CHANGELOG.md",
@@ -38,6 +38,7 @@ Gem::Specification.new do |s|
     "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_paragraph.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/vendor/jquery.js",
@@ -49,6 +50,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/dsl/web/data_binding_expression.rb",
     "lib/glimmer/dsl/web/dsl.rb",
     "lib/glimmer/dsl/web/element_expression.rb",
+    "lib/glimmer/dsl/web/formatting_element_expression.rb",
     "lib/glimmer/dsl/web/general_element_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
     "lib/glimmer/dsl/web/observe_expression.rb",
@@ -62,6 +64,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/web/component.rb",
     "lib/glimmer/web/element_proxy.rb",
     "lib/glimmer/web/event_proxy.rb",
+    "lib/glimmer/web/formatting_element_proxy.rb",
     "lib/glimmer/web/listener_proxy.rb"
   ]
   s.homepage = "http://github.com/AndyObtiva/glimmer-dsl-web".freeze

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

@@ -21,6 +21,7 @@
 
 require 'glimmer/dsl/engine'
 require 'glimmer/dsl/web/element_expression'
+require 'glimmer/dsl/web/formatting_element_expression'
 require 'glimmer/dsl/web/listener_expression'
 require 'glimmer/dsl/web/property_expression'
 require 'glimmer/dsl/web/p_expression'
@@ -44,6 +45,7 @@ module Glimmer
          property
          content_data_binding
          shine_data_binding
+         formatting_element
          element
        ]
       )

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

@@ -0,0 +1,19 @@
+require 'glimmer/dsl/expression'
+
+require 'glimmer/web/formatting_element_proxy'
+
+module Glimmer
+  module DSL
+    module Web
+      class FormattingElementExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          Glimmer::Web::FormattingElementProxy.keyword_supported?(keyword, parent: parent)
+        end
+        
+        def interpret(parent, keyword, *args, &block)
+          Glimmer::Web::FormattingElementProxy.format(keyword, *args, &block)
+        end
+      end
+    end
+  end
+end

data/lib/glimmer/web/component.rb

@@ -93,10 +93,17 @@ module Glimmer
           self.name.underscore.gsub('::', '__').split('__').last
         end
         
+        # Creates component without rendering
+        def create(*args)
+          args << {} unless args.last.is_a?(Hash)
+          args.last[:render] = false
+          rendered_component = send(keyword, *args)
+          rendered_component
+        end
+        
+        # Creates and renders component
         def render(*args)
           rendered_component = send(keyword, *args)
-          options = args.last.is_a?(Hash) ? args.last.slice(:parent, :custom_parent_dom_element, :brand_new) : {}
-          rendered_component.render(**options)
           rendered_component
         end
       end
@@ -204,10 +211,15 @@ module Glimmer
         markup_block = self.class.instance_variable_get("@markup_block")
         raise Glimmer::Error, 'Invalid Glimmer web component for having no markup! Please define markup block!' if markup_block.nil?
         @markup_root = instance_exec(&markup_block)
-        @markup_root.options[:parent] = options[:parent] if options[:parent]
+        @markup_root.options[:parent] = options[:parent] if !options[:parent].nil?
         @parent ||= @markup_root.parent
         raise Glimmer::Error, 'Invalid Glimmer web component for having an empty markup! Please fill markup block!' if @markup_root.nil?
-        execute_hooks('after_render')
+        if options[:render] != false
+          execute_hooks('after_render')
+        else
+          on_render_listener = proc { execute_hooks('after_render') }
+          @markup_root.handle_observation_request('on_render', on_render_listener)
+        end
         
         # TODO adapt for web
         observer_registration_cleanup_listener = proc do

data/lib/glimmer/web/element_proxy.rb

@@ -109,16 +109,25 @@ module Glimmer
         @keyword = keyword
         @parent = parent
         @options = args.last.is_a?(Hash) ? args.last.symbolize_keys : {}
+        if parent.nil?
+          options[:parent] ||= Component.interpretation_stack.last&.options&.[](:parent)
+          options[:render] ||= Component.interpretation_stack.last&.options&.[](:render)
+        end
         @args = args
         @block = block
         @children = []
         @parent&.post_initialize_child(self)
+        render if !@rendered && render_after_create?
+      end
+      
+      def render_after_create?
+        options[:render] != false && (@parent.nil? || @parent.render_after_create?)
       end
       
       # Executes for the parent of a child that just got added
       def post_initialize_child(child)
         @children << child
-        child.render
+        child.render if !render_after_create?
       end
       
       # Executes for the parent of a child that just got removed
@@ -128,6 +137,7 @@ module Glimmer
       
       # Executes at the closing of a parent widget curly braces after all children/properties have been added/set
       def post_add_content
+        # TODO double check every place we should call this method
         # No Op
       end
       
@@ -215,7 +225,7 @@ module Glimmer
       def parent_selector
         @parent&.selector
       end
-
+      
       def parent_dom_element
         if parent_selector
           Document.find(parent_selector)
@@ -253,8 +263,10 @@ module Glimmer
             handle_observation_request(keyword, event_listener)
           end
         end
-        children.each do |child|
-          child.render
+        unless render_after_create?
+          children.each do |child|
+            child.render
+          end
         end
         @rendered = true
         unless skip_content_on_render_blocks?
@@ -262,6 +274,10 @@ module Glimmer
             content(&content_block)
           end
         end
+        # TODO replace following line with a method call like (`notify_listeners('on_render')`)
+        listeners_for('on_render').each do |listener|
+          listener.original_event_listener.call(EventProxy.new(listener: listener))
+        end
       end
       alias rerender render
         
@@ -302,6 +318,7 @@ module Glimmer
             
       def dom
         # TODO auto-convert known glimmer attributes like parent to data attributes like data-parent
+        # TODO check if we need to avoid rendering content block if no content is available
         @dom ||= html {
           send(keyword, html_options) {
             args.first if args.first.is_a?(String)

data/lib/glimmer/web/event_proxy.rb

@@ -1,3 +1,5 @@
+# backtick_javascript: true
+
 # Copyright (c) 2023-2024 Andy Maleh
 #
 # Permission is hereby granted, free of charge, to any person obtaining

data/lib/glimmer/web/formatting_element_proxy.rb

@@ -0,0 +1,56 @@
+# 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 Glimmer
+  module Web
+    class FormattingElementProxy
+      class << self
+        include Glimmer
+        
+        def keyword_supported?(keyword, parent: nil)
+          keyword = keyword.to_s
+          (
+            FORMATTING_ELEMENT_KEYWORDS.include?(keyword) ||
+            (parent&.keyword == 'p' && keyword == 'span')
+          )
+        end
+      
+        def format(keyword, *args, &block)
+          content = nil
+          if block_given?
+            content = block.call.to_s
+          elsif args.any? && !args.first.is_a?(Hash)
+            content = args.first.to_s
+          end
+          attribute_hash = args.last.is_a?(Hash) ? args.last : {}
+          content_block = proc { content } unless content.nil?
+          html {
+            send(keyword, attribute_hash, &content_block)
+          }.to_s
+        end
+      end
+      
+      FORMATTING_ELEMENT_KEYWORDS = %w[b i strong em sub sup del ins small mark br]
+    end
+  end
+end

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

@@ -30,5 +30,5 @@ Document.ready? do
         $$.alert('Hello, Button!')
       end
     }
-  }.render
+  }
 end

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

@@ -137,5 +137,5 @@ Document.ready? do
         end
       end
     }
-  }.render
+  }
 end

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

@@ -177,5 +177,5 @@ Document.ready? do
                       computed_by: @address.members + ['state_code'],
                     ]
     }
-  }.render
+  }
 end

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

@@ -98,5 +98,5 @@ Document.ready? do
         }
       CSS
     }
-  }.render
+  }
 end

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

@@ -113,5 +113,5 @@ Document.ready? do
         CSS
       }
     }
-  }.render
+  }
 end

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

@@ -37,7 +37,11 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    @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(@number_holder, :number) do
       number_string = @number_holder.number.to_s
       @number_input.value = number_string unless @number_input.value == number_string
@@ -52,7 +56,7 @@ class HelloObserver
   markup {
     div {
       div {
-        @number_input = input(type: 'number', value: @number_holder.number, min: 0, max: 100) {
+        @number_input = input(type: 'number', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @number_input.value.to_i
@@ -66,7 +70,7 @@ class HelloObserver
         }
       }
       div {
-        @range_input = input(type: 'range', value: @number_holder.number, min: 0, max: 100) {
+        @range_input = input(type: 'range', min: 0, max: 100) {
           # oninput listener updates Model attribute @number_holder.number
           oninput do
             @number_holder.number = @range_input.value.to_i

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

@@ -0,0 +1,67 @@
+# 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 HelloParagraph
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      h1(class: 'title') {
+        'Flying Cars Become 100% Safe with AI Powered Balance!'
+      }
+      
+      p(class: 'intro') {"
+        In the early 2030's, #{em('flying cars')} became affordable after their prices dropped
+        below #{small(del('$100,000'))}#{ins('$80,000')} as a result of the innovations of #{strong('Travel-X')}. Still, that did not
+        make #{em('flying cars')} any popular due to the extreme difficulty in piloting such flying vehicles for the average
+        person, making it very tough to pass the tests for getting a piloting license given the learning curve.
+      "}
+      
+      p {"
+        That said, #{b('Travel-X')} has recently come up with a new feature for their flagship #{i('flying car')},
+        the Ptero#{sub(1)}#{sup('TM')}, which relies on AI#{sub(2)} to automatically balance the flying cars in mid-air,
+        thus significantly facilitating their piloting by the average consumer.
+      "}
+      
+      p(class: 'conclusion') {"
+        That Ptero#{sup('TM')} will be so stable and well balanced while flying that the consumer will be able to drive
+        as if it is a plain old car, with the only difference being vertical elevation, the control of which will be handled
+        automatically by AI. The Ptero#{sup('TM')} will debut for #{span(style: 'text-decoration: underline dashed;'){'$79,000'}}.
+      "}
+      
+      h2(class: 'legend-title') {
+        mark('Legend:')
+      }
+      
+      p(class: 'legend') {"
+        #{strong("1- Ptero:")} Pterosaur is flying dinosaur species#{br}
+        #{strong("2- AI:")} Artificial Intelligence#{br}
+      "}
+        
+    }
+  }
+end
+
+Document.ready? do
+  HelloParagraph.render
+end

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

@@ -26,5 +26,5 @@ include Glimmer
 Document.ready? do
   div {
     'Hello, World!'
-  }.render
+  }
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.1.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-06 00:00:00.000000000 Z
+date: 2024-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -230,10 +230,17 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.8.0.alpha2
-description: Glimmer DSL for Web (Ruby in the Browser Web GUI Frontend Library) -
-  Enables frontend GUI development with Ruby by adopting a DSL that follows web-like
-  HTML syntax, enabling the transfer of HTML/CSS/JS skills to Ruby frontend development.
-  This library relies on Opal Ruby.
+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) while supporting 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.
 email: andy.am@gmail.com
 executables: []
 extensions: []
@@ -260,6 +267,7 @@ files:
 - 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_paragraph.rb
 - lib/glimmer-dsl-web/samples/hello/hello_world.rb
 - lib/glimmer-dsl-web/samples/regular/button_counter.rb
 - lib/glimmer-dsl-web/vendor/jquery.js
@@ -271,6 +279,7 @@ files:
 - lib/glimmer/dsl/web/data_binding_expression.rb
 - lib/glimmer/dsl/web/dsl.rb
 - lib/glimmer/dsl/web/element_expression.rb
+- lib/glimmer/dsl/web/formatting_element_expression.rb
 - lib/glimmer/dsl/web/general_element_expression.rb
 - lib/glimmer/dsl/web/listener_expression.rb
 - lib/glimmer/dsl/web/observe_expression.rb
@@ -284,6 +293,7 @@ files:
 - lib/glimmer/web/component.rb
 - lib/glimmer/web/element_proxy.rb
 - lib/glimmer/web/event_proxy.rb
+- lib/glimmer/web/formatting_element_proxy.rb
 - lib/glimmer/web/listener_proxy.rb
 homepage: http://github.com/AndyObtiva/glimmer-dsl-web
 licenses: