glimmer-dsl-web 0.0.11 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c16186f1613018ccbaaf2b6bc4214b2e0ad5ce8a96354639febd256616f18a1f
-  data.tar.gz: 26b8cb6ac6b64c912e39294b32cc21f29f053aa62000991970846dd95f127d57
+  metadata.gz: aaaa7092a643511c072a409a2b771b34db6b2aa0859adc5b200e5aba0869590e
+  data.tar.gz: 15ba8d9639037fa17104cb997a449f42e79703ae9ec4992f21b8a7551d3b09f0
 SHA512:
-  metadata.gz: 0dc717529f81c4aa66e6ed6c31c32bef68e71a152ec04f3b619515339d29d5f71de076d2e4fd2622b2f7ca173e15a426588a8e46127e1f78139f403722341f6d
-  data.tar.gz: 5901cf78e56fac1cb786955bc1d84777968d3f881d00c06d1e2b9b46a0e52c83c79674560a71103b6685b4bbe1a04d45ebd858e8039404a6f713817c1e72817c
+  metadata.gz: 5732c5dca9591d17917fd6dfbd1425eed080f6aa345f6b9fb6bbbd8f3d487ce83428063b9ef974cabab8c2fdd7e6d8799b67e4442c462e6c174a4a81448900c6
+  data.tar.gz: 34afe2b80aeb727dad38572f81f46f7d442ef2998cb97b94ae92d332364f3ff2da0669203ced36a0484304fbbcbdfb1c7cb30a8b74b49ce42abb329ce333b7de

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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.0.12 (Early Alpha)
 ## Ruby in the Browser Web GUI Frontend Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -245,7 +245,9 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    # 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
@@ -978,6 +980,99 @@ 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)
+
+--
+
 NOTE: Glimmer DSL for Web is an Early Alpha project. If you want it developed faster, please [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-web/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-web/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-web/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
 Learn more about the differences between various [Glimmer](https://github.com/AndyObtiva/glimmer) DSLs by looking at:
@@ -987,8 +1082,6 @@ 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)
   - [Prerequisites](#prerequisites)
   - [Setup](#setup)
   - [Usage](#usage)
@@ -1004,8 +1097,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)
@@ -1048,7 +1144,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.0.11'
+gem 'glimmer-dsl-web', '~> 0.0.12'
 ```
 
 Run:
@@ -1264,7 +1360,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.0.12'
 ```
 
 Run:
@@ -1770,7 +1866,9 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    # 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
@@ -2559,6 +2657,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)!
 
@@ -2744,7 +2934,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.0.12

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.0.12 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.0.11".freeze
+  s.version = "0.0.12".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-07"
+  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/element_proxy.rb

@@ -302,6 +302,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/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_observer.rb

@@ -37,7 +37,9 @@ class HelloObserver
   end
   
   after_render do
-    # observe Model attribute @number_holder.number for changes and update View
+    # 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

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.0.12
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-06 00:00:00.000000000 Z
+date: 2024-01-07 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: