glimmer-dsl-web 0.4.1 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a248314a1dcc33c038a9d2f542dce35d31d7d5702435a1c8db5b13b75068470
-  data.tar.gz: 8d83a134edc023c5ec2debe421a7f45e11887671b918ba75532574bf3019525a
+  metadata.gz: 757705f381e25fbeb5666fd26b544cece14ed84cb335f6b1f7e6a4c273bac53f
+  data.tar.gz: 6a5b9416eb62f2b823f1357c813ee18e417df6e769ae57dcb8704bb8079a31bd
 SHA512:
-  metadata.gz: 64e47e6380713ca42182644f9b20b0f4137deaf951707413d49f3909346be470e66426f09aa5f3a67656808b3bfb3e07bc00ee27a8c54167ec3cbb80f254972e
-  data.tar.gz: d55f560a40cb259fa0b28ee82be1cb066efe26aa4d44f749ec05bcb97ba1f5ff735a44a252100fa8565a8338aa9b53bab0f77c6719e12061f40d40e18b1abb04
+  metadata.gz: 9d1c13a1b7199085718ccb37158232874a0599eee6bac22036ee86aa0d29ae2cdaf404a1ab701b5a9060cedbb4b846f00750a97a17760430a0731cb2a53e4e65
+  data.tar.gz: 0cd1b2ab98e2abab219c9d5dcbbb49dbf9c5c5f8bfa9b6f8a764589aa3d65dac991a77bd1b865d1f616db5ca82c2eb05b239a60a27b8f6f17a81cdd03365937e

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 0.4.3
+
+- Support element class name inclusion data-binding (e.g. `class_name('pushed') <= [@button_model, :pushed]`)
+- Refactor Todo MVC sample to simplify and utilize new element inline style data-binding and element class name inclusion data-binding features
+- Fix issue with component removal removing its style element even if other instances of the same component still exist (this was breaking TodoMVC when clearly Todo items)
+
+## 0.4.2
+
+- Support element inline style data-binding (e.g. `style(:background_color) <= [@button_model, :background_color]`)
+- Support SVG element keywords
+- Hello, SVG! Sample: `require 'glimmer-dsl-web/samples/hello/hello_svg'`
+- Upgrade to glimmer-dsl-css 1.5.1 to get support for `px`, `in`, `pt`, `cm`, `mm`, `em` methods on `Numeric` (e.g. `14.px` => `"14px"` / `2.em` => `"2em"`) and support for `%` method on `Integer`/`Float` to allow producing `%` CSS values (e.g. `90.%` => `"90%"`)
+
 ## 0.4.1
 
 - Enhance Hello, Style! sample to allow setting styled button background color

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.4.1 (Beta)
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for Web 0.4.3 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
@@ -12,7 +12,7 @@
 
 You can finally have Ruby developer happiness and productivity in the Frontend! No more wasting time splitting your resources across multiple languages, using badly engineered, over-engineered, or premature-optimization-obsessed JavaScript libraries, fighting JavaScript build issues (e.g. webpack), or rewriting Ruby Backend code in Frontend JavaScript. With [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), you can have an exponential jump in development productivity (2x or higher), time-to-release (1/2 or less time), cost (1/2 or cheaper), and maintainability (~50% the code that is simpler and more readable) over JavaScript libraries like React, Angular, Ember, Vue, and Svelte, while being able to reuse Backend Ruby code as is in the Frontend for faster interactions when needed. Also, with Frontend Ruby, companies can cut their hiring budget in half by having Backend Ruby Software Engineers do Frontend Development in Ruby! [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c) finally fulfills every smart highly-productive Rubyist's dream by bringing Ruby productivity fun to Frontend Development, the same productivity fun you had for years and decades in Backend Development.
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for Web enables building Web Frontends using [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c), as per [Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby](https://youtu.be/knutsgHTrfQ?t=789). It supports Rails' principle of the One Person Framework by not requiring any extra developers with JavaScript expertise, yet enabling Ruby (Backend) Software Engineers to develop the Frontend with Ruby code that is better than any JavaScript code produced by JS developers. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with [DSLs](https://martinfowler.com/books/dsl.html) and [TIMTOWTDI](https://en.wiktionary.org/wiki/TMTOWTDI#English)) and the Rails way ([Convention over Configuration](https://rubyonrails.org/doctrine)) in building Isomorphic Ruby on Rails Applications. It provides a Ruby [HTML DSL](#usage) (including full support for [SVG](#hello-svg)), which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) [Data-Binding](#hello-data-binding) (using `<=`) and Bidirectional (Two-Way) [Data-Binding](#hello-data-binding) (using `<=>`). Dynamic rendering (and re-rendering) of HTML content is also supported via [Content Data-Binding](#hello-content-data-binding). Modular design is supported with [Glimmer Web Components](#hello-component). And, a Ruby CSS DSL is supported with the included [Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css). To automatically convert legacy HTML & CSS code to Glimmer DSL Ruby code, Software Engineers could use the included [`html_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-xml#html-to-glimmer-converter) and [`css_to_glimmer`](https://github.com/AndyObtiva/glimmer-dsl-css#css-to-glimmer-converter) commands. Many [samples](#samples) are demonstrated in the [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) (there is a very minimal [Standalone [No Rails] static site sample app](https://github.com/Largo/glimmer-dsl-web-standalone-demo) too). You can finally live in pure Rubyland on the Web in both the frontend and backend with [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web)!
 
 [Glimmer DSL for Web](https://rubygems.org/gems/glimmer-dsl-web) aims to be a very simple Ruby-based drop-in replacement for your existing JavaScript Frontend library (e.g. React, Angular, Vue, Ember, Svelte) or your JavaScript Frontend layer in general. It does not change how your Frontend interacts with the Backend, meaning you can continue to write Rails Backend API endpoints as needed and make HTTP/Ajax requests or read data embedded in elements, but from [Ruby in the Browser](https://www.youtube.com/watch?v=4AdcfbI6A4c). Whatever is possible in JavaScript is possible when using Glimmer DSL for Web as it integrates with any existing JavaScript library. The [Rails sample app](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app) demonstrates how to [make HTTP calls](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector/models/sample_api.rb) and how to [integrate with a JavaScript library](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/views/layouts/application.html.erb) (highlightjs) that performs [code syntax highlighting](https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/blob/master/app/assets/opal/sample_selector.rb).
 
@@ -1243,10 +1243,6 @@ class TodoMvc
         todo_list(presenter: @presenter)
         
         todo_filters(presenter: @presenter)
-              
-        style {
-          todo_mvc_styles
-        }
       }
       
       todo_mvc_footer
@@ -1257,46 +1253,46 @@ class TodoMvc
     }
   }
   
-  def todo_mvc_styles
-    rule('body, button, html') {
-      margin '0'
-      padding '0'
+  style {
+    r('body, button, html') {
+      margin 0
+      padding 0
     }
     
-    rule('button') {
-      _webkit_font_smoothing 'antialiased'
-      _webkit_appearance 'none'
-      appearance 'none'
-      background 'none'
-      border '0'
-      color 'inherit'
-      font_family 'inherit'
+    r('button') {
+      _webkit_font_smoothing :antialiased
+      _webkit_appearance :none
+      appearance :none
+      background :none
+      border 0
+      color :inherit
+      font_family :inherit
       font_size '100%'
-      font_weight 'inherit'
-      vertical_align 'baseline'
+      font_weight :inherit
+      vertical_align :baseline
     }
     
-    rule('.todoapp') {
+    r('.todoapp') {
       background '#fff'
       margin '130px 0 40px 0'
-      position 'relative'
+      position :relative
       box_shadow '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
     }
   
     media('screen and (-webkit-min-device-pixel-ratio:0)') {
-      rule('body') {
+      r('body') {
         font "14px 'Helvetica Neue', Helvetica, Arial, sans-serif"
-        line_height '1.4em'
+        line_height 1.4.em
         background '#f5f5f5'
         color '#111111'
-        min_width '230px'
-        max_width '550px'
+        min_width 230
+        max_width 550
         margin '0 auto'
-        _webkit_font_smoothing 'antialiased'
+        _webkit_font_smoothing :antialiased
         font_weight '300'
       }
     }
-  end
+  }
 end
 
 Document.ready? do
@@ -1340,11 +1336,14 @@ Learn more about the differences between various [Glimmer](https://github.com/An
       - [Hello, Component!](#hello-content-data-binding)
       - [Hello, glimmer_component Rails Helper!](#hello-glimmer_component-rails-helper)
       - [Hello, Paragraph!](#hello-paragraph)
+      - [Hello, Style!](#hello-style)
+      - [Hello, SVG!](#hello-svg)
       - [Hello, Input (Date/Time)!](#hello-input-datetime)
       - [Button Counter](#button-counter)
       - [Todo MVC](#todo-mvc)
   - [Design Principles](#design-principles)
   - [Supporting Libraries](#supporting-libraries)
+  - [Influences and Inspiration](#influences-and-inspiration)
   - [Glimmer Process](#glimmer-process)
   - [Help](#help)
     - [Issues](#issues)
@@ -1391,7 +1390,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.4.1'
+gem 'glimmer-dsl-web', '~> 0.4.3'
 ```
 
 Run:
@@ -1620,7 +1619,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.4.1'
+gem 'glimmer-dsl-web', '~> 0.4.3'
 ```
 
 Run:
@@ -3140,6 +3139,239 @@ Screenshot:
 
 ![Hello, Paragraph!](/images/glimmer-dsl-web-samples-hello-hello-paragraph.png)
 
+#### Hello, Style!
+
+Every Glimmer Web Component can have a `style {}` block that contains CSS styles common to all instances of that element. That block is evaluated against the component class as such.
+
+Also, within every element, you can add `style(:property) <= [model, attribute]` element inline style data-binding statements to dynamically alter a CSS style property based on some changes to a model attribute.
+
+[lib/glimmer-dsl-web/samples/hello/hello_style.rb](/lib/glimmer-dsl-web/samples/hello/hello_style.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class ButtonModel
+  WIDTH_MIN = 160
+  WIDTH_MAX = 960
+  HEIGHT_MIN = 100
+  HEIGHT_MAX = 600
+  FONT_SIZE_MIN = 40
+  FONT_SIZE_MAX = 200
+  
+  attr_accessor :text, :pushed, :background_color, :width, :height, :font_size
+  
+  def initialize
+    @text = 'Push'
+    @width = WIDTH_MIN
+    @height = HEIGHT_MIN
+    @font_size = FONT_SIZE_MIN
+    @background_color = '#add8e6'
+  end
+  
+  def push
+    self.pushed = !pushed
+  end
+  
+  def text
+    pushed ? 'Pull' : 'Push'
+  end
+  
+  def width=(value)
+    @width = value
+    self.font_size = @width/4 if @font_size > @width/4
+  end
+  
+  def height=(value)
+    @height = value
+    self.font_size = @height/2.5 if @font_size > @height/2.5
+  end
+  
+  def font_size=(value)
+    @font_size = value
+    self.width = @font_size*4 if @height < @font_size*4
+    self.height = @font_size*2.5 if @height < @font_size*2.5
+  end
+  
+  def border_color
+    red = background_color[1..2].hex
+    green = background_color[3..4].hex
+    blue = background_color[5..6].hex
+    new_red = red - 10
+    new_green = green - 10
+    new_blue = blue - 10
+    "##{new_red.to_s(16)}#{new_green.to_s(16)}#{new_blue.to_s(16)}"
+  end
+end
+
+class StyledButton
+  include Glimmer::Web::Component
+  
+  option :button_model
+  
+  markup {
+    button {
+      inner_text <= [button_model, :text, computed_by: :pushed]
+      
+      class_name(:pushed) <= [button_model, :pushed]
+      class_name(:pulled) <= [button_model, :pushed, on_read: :!]
+      
+      style(:width) <= [button_model, :width, on_read: :px]
+      style(:height) <= [button_model, :height, on_read: :px]
+      style(:font_size) <= [button_model, :font_size, on_read: :px]
+      style(:background_color) <= [button_model, :background_color]
+      style(:border_color) <= [button_model, :border_color, computed_by: :background_color]
+      
+      onclick do
+        button_model.push
+      end
+    }
+  }
+  
+  style {
+    r(component_element_selector) {
+      font_family 'Courrier New, Courrier'
+      border_radius 5
+      border_width 17
+      margin 5
+    }
+    
+    r("#{component_element_selector}.pulled") {
+      border_style :outset
+    }
+    
+    r("#{component_element_selector}.pushed") {
+      border_style :inset
+    }
+  }
+end
+
+class StyledButtonRangeInput
+  include Glimmer::Web::Component
+  
+  option :button_model
+  option :property
+  option :property_min
+  option :property_max
+  
+  markup {
+    input(type: 'range', min: property_min, max: property_max) {
+      value <=> [button_model, property]
+    }
+  }
+end
+
+class StyledButtonColorInput
+  include Glimmer::Web::Component
+  
+  option :button_model
+  option :property
+  
+  markup {
+    input(type: 'color') {
+      value <=> [button_model, property]
+    }
+  }
+end
+
+class HelloStyle
+  include Glimmer::Web::Component
+  
+  before_render do
+    @button_model = ButtonModel.new
+  end
+  
+  markup {
+    div {
+      div(class: 'styled-button-form') {
+        label('Styled Button Width:', class: 'property-label', for: 'styled-button-width-input')
+        styled_button_range_input(button_model: @button_model, property: :width, property_min: ButtonModel::WIDTH_MIN, property_max: ButtonModel::WIDTH_MAX, id: 'styled-button-width-input')
+        
+        label('Styled Button Height:', class: 'property-label', for: 'styled-button-height-input')
+        styled_button_range_input(button_model: @button_model, property: :height, property_min: ButtonModel::HEIGHT_MIN, property_max: ButtonModel::HEIGHT_MAX, id: 'styled-button-height-input')
+        
+        label('Styled Button Font Size:', class: 'property-label', for: 'styled-button-font-size-input')
+        styled_button_range_input(button_model: @button_model, property: :font_size, property_min: ButtonModel::FONT_SIZE_MIN, property_max: ButtonModel::FONT_SIZE_MAX, id: 'styled-button-font-size-input')
+        
+        label('Styled Button Background Color:', for: 'styled-button-background-color-input')
+        styled_button_color_input(button_model: @button_model, property: :background_color, id: 'styled-button-background-color-input')
+      }
+      
+      styled_button(button_model: @button_model)
+    }
+  }
+  
+  style {
+    r('.styled-button-form') {
+      padding 20
+      display 'inline-grid'
+      grid_template_columns 'auto auto'
+    }
+    
+    r('.styled-button-form label, input') {
+      display :block
+      margin '5px 5px 5px 0'
+    }
+    
+    r("#{component_element_selector} .styled-button") {
+      display :block
+    }
+  }
+end
+
+Document.ready? do
+  HelloStyle.render
+end
+```
+
+Screenshot:
+
+--
+
+![Hello, Style!](/images/glimmer-dsl-web-samples-hello-hello-style.gif)
+
+#### Hello, SVG!
+
+[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (Scalable Vector Graphics) is fully supported and can be utilized by simply embedding [SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) (all lower-case in Ruby) via the Glimmer HTML DSL syntax, just like any other HTML elements.
+
+[lib/glimmer-dsl-web/samples/hello/hello_svg.rb](/lib/glimmer-dsl-web/samples/hello/hello_svg.rb)
+
+Glimmer HTML DSL Ruby code in the frontend:
+
+```ruby
+require 'glimmer-dsl-web'
+
+class HelloSvg
+  include Glimmer::Web::Component
+  
+  markup {
+    div {
+      svg(width: '100%', height: '100') {
+        circle(cx: '50', cy: '50', r: '50', style: 'fill:blue;') {
+          animate(attributename: 'cx', begin: '0s', dur: '8s', from: '50', to: '90%', repeatcount: 'indefinite')
+        }
+      }
+      svg(width: '200', height: '180') {
+        rect(x: '30', y: '30', height: '110', width: '110', style: 'stroke:green;fill:red') {
+          animatetransform(attributename: 'transform', begin: '0.1s', dur: '10s', type: 'rotate', from: '0 85 85', to: '360 85 85', repeatcount: 'indefinite')
+        }
+      }
+    }
+  }
+end
+
+Document.ready? do
+  HelloSvg.render
+end
+```
+
+Screenshot:
+
+--
+
+![Hello, SVG!](/images/glimmer-dsl-web-samples-hello-hello-svg.gif)
+
 --
 
 #### Hello, Input (Date/Time)!
@@ -3365,10 +3597,6 @@ class TodoMvc
         todo_list(presenter: @presenter)
         
         todo_filters(presenter: @presenter)
-              
-        style {
-          todo_mvc_styles
-        }
       }
       
       todo_mvc_footer
@@ -3379,46 +3607,46 @@ class TodoMvc
     }
   }
   
-  def todo_mvc_styles
-    rule('body, button, html') {
-      margin '0'
-      padding '0'
+  style {
+    r('body, button, html') {
+      margin 0
+      padding 0
     }
     
-    rule('button') {
-      _webkit_font_smoothing 'antialiased'
-      _webkit_appearance 'none'
-      appearance 'none'
-      background 'none'
-      border '0'
-      color 'inherit'
-      font_family 'inherit'
+    r('button') {
+      _webkit_font_smoothing :antialiased
+      _webkit_appearance :none
+      appearance :none
+      background :none
+      border 0
+      color :inherit
+      font_family :inherit
       font_size '100%'
-      font_weight 'inherit'
-      vertical_align 'baseline'
+      font_weight :inherit
+      vertical_align :baseline
     }
     
-    rule('.todoapp') {
+    r('.todoapp') {
       background '#fff'
       margin '130px 0 40px 0'
-      position 'relative'
+      position :relative
       box_shadow '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)'
     }
   
     media('screen and (-webkit-min-device-pixel-ratio:0)') {
-      rule('body') {
+      r('body') {
         font "14px 'Helvetica Neue', Helvetica, Arial, sans-serif"
-        line_height '1.4em'
+        line_height 1.4.em
         background '#f5f5f5'
         color '#111111'
-        min_width '230px'
-        max_width '550px'
+        min_width 230
+        max_width 550
         margin '0 auto'
-        _webkit_font_smoothing 'antialiased'
+        _webkit_font_smoothing :antialiased
         font_weight '300'
       }
     }
-  end
+  }
 end
 
 Document.ready? do
@@ -3448,6 +3676,15 @@ Here is a list of notable 3rd party gems used by Glimmer DSL for Web:
 - [opal-async](https://github.com/AndyObtiva/opal-async): Non-blocking tasks and enumerators for Web.
 - [to_collection](https://github.com/AndyObtiva/to_collection): Treat an array of objects and a singular object uniformly as a collection of objects.
 
+## Influences and Inspiration
+
+- https://github.com/inesita-rb/inesita
+- https://github.com/opal/paggio
+- https://github.com/ruby-hyperloop/hyperloop
+- https://docs.hyperstack.org/
+- https://github.com/AndyObtiva/glimmer-dsl-opal
+- https://github.com/AndyObtiva/glimmer
+
 ## Glimmer Process
 
 [Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is the lightweight software development process used for building Glimmer libraries and Glimmer apps, which goes beyond Agile, rendering all Agile processes obsolete. [Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md) is simply made up of 7 guidelines to pick and choose as necessary until software development needs are satisfied.

data/VERSION

@@ -1 +1 @@
-0.4.1
+0.4.3

data/glimmer-dsl-web.gemspec

@@ -2,16 +2,16 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.4.1 ruby lib
+# stub: glimmer-dsl-web 0.4.3 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.4.1"
+  s.version = "0.4.3"
 
   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-07-27"
+  s.date = "2024-07-28"
   s.description = "Glimmer DSL for Web (Ruby in the Browser Web Frontend Framework) enables building Web Frontends using Ruby in the Browser, as per Matz's recommendation in his RubyConf 2022 keynote speech to replace JavaScript with Ruby. It aims at providing the simplest, most intuitive, most straight-forward, and most productive frontend framework in existence. The framework follows the Ruby way (with DSLs and TIMTOWTDI) and the Rails way (Convention over Configuration) in building Isomorphic Ruby on Rails Applications. It provides a Ruby HTML DSL, which uniquely enables writing both structure code and logic code in one language. It supports both Unidirectional (One-Way) Data-Binding (using <=) and Bidirectional (Two-Way) Data-Binding (using <=>). Dynamic rendering (and re-rendering) of HTML content is also supported via Content Data-Binding. Modular design is supported with Glimmer Web Components. And, a Ruby CSS DSL is supported with the included Glimmer DSL for CSS. Many samples are demonstrated in the Rails sample app (there is a very minimal Standalone [No Rails] sample app too). You can finally live in pure Rubyland on the Web in both the frontend and backend with Glimmer DSL for Web! This gem relies on Opal Ruby.".freeze
   s.email = "andy.am@gmail.com".freeze
   s.extra_rdoc_files = [
@@ -47,6 +47,7 @@ Gem::Specification.new do |s|
     "lib/glimmer-dsl-web/samples/hello/hello_observer_data_binding.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_paragraph.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_style.rb",
+    "lib/glimmer-dsl-web/samples/hello/hello_svg.rb",
     "lib/glimmer-dsl-web/samples/hello/hello_world.rb",
     "lib/glimmer-dsl-web/samples/regular/button_counter.rb",
     "lib/glimmer-dsl-web/samples/regular/todo_mvc.rb",
@@ -65,6 +66,7 @@ Gem::Specification.new do |s|
     "lib/glimmer/data_binding/element_binding.rb",
     "lib/glimmer/dsl/web/a_expression.rb",
     "lib/glimmer/dsl/web/bind_expression.rb",
+    "lib/glimmer/dsl/web/class_name_inclusion_data_binding.rb",
     "lib/glimmer/dsl/web/component_expression.rb",
     "lib/glimmer/dsl/web/content_data_binding_expression.rb",
     "lib/glimmer/dsl/web/data_binding_expression.rb",
@@ -72,12 +74,13 @@ Gem::Specification.new do |s|
     "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/inline_style_data_binding_expression.rb",
     "lib/glimmer/dsl/web/listener_expression.rb",
     "lib/glimmer/dsl/web/observe_expression.rb",
     "lib/glimmer/dsl/web/property_expression.rb",
     "lib/glimmer/dsl/web/shine_data_binding_expression.rb",
     "lib/glimmer/dsl/web/span_expression.rb",
-    "lib/glimmer/dsl/web/style_expression.rb",
+    "lib/glimmer/dsl/web/style_element_expression.rb",
     "lib/glimmer/helpers/glimmer_helper.rb",
     "lib/glimmer/util/proc_tracker.rb",
     "lib/glimmer/web.rb",
@@ -97,7 +100,7 @@ Gem::Specification.new do |s|
 
   s.add_runtime_dependency(%q<glimmer>.freeze, ["~> 2.8.0"])
   s.add_runtime_dependency(%q<glimmer-dsl-xml>.freeze, ["~> 1.4.0"])
-  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.0"])
+  s.add_runtime_dependency(%q<glimmer-dsl-css>.freeze, ["~> 1.5.1"])
   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"])

data/lib/glimmer/data_binding/element_binding.rb

@@ -6,30 +6,52 @@ module Glimmer
     class ElementBinding
       include Observable
       include Observer
-
-      attr_reader :element, :property
-      def initialize(element, property, translator = nil)
+      
+      attr_reader :element, :property, :translator, :sub_property
+      def initialize(element, property, translator: nil)
         @element = element
-        @property = property
+        if (property_parts = property.to_s.match(Glimmer::Web::ElementProxy::REGEX_CLASS_NAME_SUB_PROPERTY))
+          @property, @sub_property = property_parts.to_a.drop(1)
+        elsif (property_parts = property.to_s.match(Glimmer::Web::ElementProxy::REGEX_STYLE_SUB_PROPERTY))
+          @property, @sub_property = property_parts.to_a.drop(1)
+          @sub_property = @sub_property.gsub('_', '-')
+        else
+          @property = property
+        end
         @translator = translator
 
-        # TODO implement automatic cleanup upon calling element.remove
-        # Alternatively, have this be built into ElementProxy and remove this code
-#         if @element.respond_to?(:dispose)
-#           @element.on_widget_disposed do |dispose_event|
-#             unregister_all_observables
-#           end
-#         end
+        if @element.respond_to?(:remove)
+          unregister_handler = lambda { |dispose_event| unregister_all_observables }
+          @element.handle_observation_request('on_remove', unregister_handler)
+        end
       end
       
       def call(value)
         evaluated_property_value = evaluate_property
         converted_value = @translator&.call(value, evaluated_property_value) || value
-        @element.send("#{@property}=", converted_value) unless converted_value == evaluated_property_value
+        if converted_value != evaluated_property_value
+          if @sub_property
+            if @property.to_s == 'class_name'
+              @element.class_name_included(@sub_property, converted_value)
+            elsif @property.to_s == 'style'
+              @element.style_property(@sub_property, converted_value)
+            end
+          else
+            @element.send("#{@property}=", converted_value)
+          end
+        end
       end
       
       def evaluate_property
-        @element.send(@property)
+        if @sub_property
+          if @property.to_s == 'class_name'
+            @element.class_name_included(@sub_property)
+          elsif @property.to_s == 'style'
+            @element.style_property(@sub_property)
+          end
+        else
+          @element.send(@property)
+        end
       end
     end
   end

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

@@ -0,0 +1,21 @@
+require 'glimmer/dsl/expression'
+
+module Glimmer
+  module DSL
+    module Web
+      class ClassNameInclusionDataBindingExpression < Expression
+        def can_interpret?(parent, keyword, *args, &block)
+          keyword == 'class_name' &&
+            block.nil? &&
+            args.size == 1 &&
+            textual?(args.first)
+        end
+        
+        def interpret(parent, keyword, *args, &block)
+          parent_attribute = "#{keyword}_#{args.first.to_s}"
+          Glimmer::DataBinding::Shine.new(parent, parent_attribute)
+        end
+      end
+    end
+  end
+end