glimmer-dsl-web 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8b106a50bf2ec2656480068685e725017a8b7a32f49d38459416b01c550e9aa
-  data.tar.gz: ca6c4c2e8028059c5a305c45f181d6f5902e5737d65011dd5ce34b5af334baf0
+  metadata.gz: 9a248314a1dcc33c038a9d2f542dce35d31d7d5702435a1c8db5b13b75068470
+  data.tar.gz: 8d83a134edc023c5ec2debe421a7f45e11887671b918ba75532574bf3019525a
 SHA512:
-  metadata.gz: a95444fd3855a6e498e243eb06ffc80e7f25cdbe5ed3b178729450d37f3c528b42919dccddde64caa38e48fcb90b4bb16e42d4f5b3c66425ac2333c5176fe7ad
-  data.tar.gz: fc781cd899da6a3059b6b5b048c7f324f03d231a755403178996d90eed391cbbcb3c2a214eb6bf0b0e2b1e318560e1b8fded988f998582075b181d7ee74093cb
+  metadata.gz: 64e47e6380713ca42182644f9b20b0f4137deaf951707413d49f3909346be470e66426f09aa5f3a67656808b3bfb3e07bc00ee27a8c54167ec3cbb80f254972e
+  data.tar.gz: d55f560a40cb259fa0b28ee82be1cb066efe26aa4d44f749ec05bcb97ba1f5ff735a44a252100fa8565a8338aa9b53bab0f77c6719e12061f40d40e18b1abb04

data/CHANGELOG.md

@@ -1,11 +1,17 @@
 # Change Log
 
+## 0.4.1
+
+- Enhance Hello, Style! sample to allow setting styled button background color
+- Fixed issue with `Glimmer::Web::Component::component_element_class` not working in components when programmatically changing the component markup root CSS class
+
 ## 0.4.0
 
-- Support `style {}` block in `Glimmer::Web::Component` that would automatically add style in one place for all components, without repeating style for repeating components
+- Support `style {}` block in `Glimmer::Web::Component` that would automatically add style in one place for all component instances
+- Support `Glimmer::Web::Component::component_element_class` to return CSS class automatically generated for a component based on its name (e.g. `StyledButton` gets `styled-button` CSS class)
+- Hello, Style! Sample: `require 'glimmer-dsl-web/samples/hello/hello_style'`
 - Upgrade to Glimmer DSL for CSS 1.5.0
 - Remove support for including multiple `before_render` and `after_render` blocks in a component as it is not needed and can be confusing
-- Hello, Style! Sample: `require 'glimmer-dsl-web/samples/hello/hello_style'`
 - Optimize performance of Todo MVC by not adding an edit input field to every todo, yet adding it only upon editing a todo.
 - Fix issue with `ElementProxy#add_css_class` and `ElementProxy#remove_css_class` crashing if called before rendering an element
 - Fix issue with Hello, Observer (Data-Binding)! crashing if run after Hello, Observer! due to both samples sharing the same class by mistake

data/README.md

@@ -1,5 +1,5 @@
-# [<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.0 (Beta)
-## Ruby in the Browser Web Frontend Framework
+# [<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)
+## Ruby-in-the-Browser Web Frontend Framework
 ### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-web.svg)](http://badge.fury.io/rb/glimmer-dsl-web)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -8,7 +8,7 @@
 
 **(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) & [Frontend Ruby with Glimmer DSL for Web](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE))**
 
-[![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb)
+[![Todo MVC](/images/glimmer-dsl-web-samples-regular-todo-mvc.gif)](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
 
 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.
 
@@ -1391,7 +1391,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.4.0'
+gem 'glimmer-dsl-web', '~> 0.4.1'
 ```
 
 Run:
@@ -1620,7 +1620,7 @@ Disable the `webpacker` gem line in `Gemfile`:
 Add the following to `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-web', '~> 0.4.0'
+gem 'glimmer-dsl-web', '~> 0.4.1'
 ```
 
 Run:
@@ -1881,7 +1881,11 @@ This external Sample Selector app is built using Rails and Glimmer DSL for Web,
 
 https://github.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app
 
-![Sample Selector](https://raw.githubusercontent.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/master/sample-glimmer-dsl-web-rails7-app.png)
+A deployed version of the Sample Selector app can be accessed over here:
+
+https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/
+
+[![Sample Selector](https://raw.githubusercontent.com/AndyObtiva/sample-glimmer-dsl-web-rails7-app/master/sample-glimmer-dsl-web-rails7-app.png)](https://sample-glimmer-dsl-web-rails7-app-black-sound-6793.fly.dev/)
 
 ### Hello Samples
 

data/VERSION

@@ -1 +1 @@
-0.4.0
+0.4.1

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.0 ruby lib
+# stub: glimmer-dsl-web 0.4.1 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.4.0"
+  s.version = "0.4.1"
 
   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-22"
+  s.date = "2024-07-27"
   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 = [

data/lib/glimmer/web/element_proxy.rb

@@ -372,12 +372,7 @@ module Glimmer
       end
       
       def html_options
-        framework_css_classes = [name, element_id]
-        if component
-          framework_css_classes.prepend(component.class.component_element_class)
-          framework_css_classes.prepend(component.class.component_shortcut_element_class) if component.class.component_shortcut_element_class != component.class.component_element_class
-        end
-        body_class = (framework_css_classes + css_classes.to_a).join(' ')
+        body_class = (base_css_classes + css_classes.to_a).uniq.compact.join(' ')
         html_options = options.dup
         GLIMMER_ATTRIBUTES.each do |attribute|
           next unless html_options.include?(attribute)
@@ -416,8 +411,8 @@ module Glimmer
       
       def class_name=(value)
         if rendered?
-          value = value.is_a?(Array) ? value.join(' ') : value.to_s
-          new_class_name = "#{name} #{element_id} #{value}"
+          values = value.is_a?(Array) ? value : [value.to_s]
+          new_class_name = (base_css_classes + values).uniq.compact.join(' ')
           dom_element.prop('className', new_class_name)
         else
           enqueue_post_render_method_call('class_name=', value)
@@ -831,6 +826,15 @@ module Glimmer
       
       private
       
+      def base_css_classes
+        framework_css_classes = [name, element_id]
+        if component
+          framework_css_classes.prepend(component.class.component_element_class)
+          framework_css_classes.prepend(component.class.component_shortcut_element_class) if component.class.component_shortcut_element_class != component.class.component_element_class
+        end
+        framework_css_classes
+      end
+      
       def valid_js_date_string?(string)
         [REGEX_FORMAT_DATETIME, REGEX_FORMAT_DATE, REGEX_FORMAT_TIME].any? do |format|
           string.match(format)

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

@@ -22,6 +22,7 @@
 require 'glimmer-dsl-web'
 
 class ButtonModel
+  BUTTON_STYLE_ATTRIBUTES = [:width, :height, :font_size, :background_color]
   WIDTH_MIN = 160
   WIDTH_MAX = 960
   HEIGHT_MIN = 100
@@ -29,13 +30,14 @@ class ButtonModel
   FONT_SIZE_MIN = 40
   FONT_SIZE_MAX = 200
   
-  attr_accessor :text, :pushed, :width, :height, :font_size
+  attr_accessor :text, :pushed, *BUTTON_STYLE_ATTRIBUTES
   
   def initialize
     @text = 'Push'
     @width = WIDTH_MIN
     @height = HEIGHT_MIN
     @font_size = FONT_SIZE_MIN
+    @background_color = '#add8e6'
   end
   
   def push
@@ -61,6 +63,16 @@ class ButtonModel
     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
@@ -76,17 +88,11 @@ class StyledButton
                       on_read: ->(pushed) { pushed ? 'pushed' : 'pulled' }
                     ]
       
-      style <= [ button_model, :width,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
-      
-      style <= [ button_model, :height,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
-      
-      style <= [ button_model, :font_size,
-                 on_read: method(:button_style_value) # convert value on read before storing in style
-               ]
+      ButtonModel::BUTTON_STYLE_ATTRIBUTES.each do |attribute|
+        style <= [ button_model, attribute,
+                   on_read: method(:button_style_value) # convert value on read before storing in style
+                 ]
+      end
       
       onclick do
         button_model.push
@@ -94,30 +100,30 @@ class StyledButton
     }
   }
   
-  style {'
-    button {
+  style {"
+    .#{component_element_class} {
       font-family: Courrier New, Courrier;
       border-radius: 5px;
       border-width: 17px;
-      border-color: #ACC7D5;
-      background-color: #ADD8E6;
       margin: 5px;
     }
     
-    button.pulled {
+    .#{component_element_class}.pulled {
       border-style: outset;
     }
     
-    button.pushed {
+    .#{component_element_class}.pushed {
       border-style: inset;
     }
-  '}
+  "}
   
   def button_style_value
     "
       width: #{button_model.width}px;
       height: #{button_model.height}px;
       font-size: #{button_model.font_size}px;
+      background-color: #{button_model.background_color};
+      border-color: #{button_model.border_color};
     "
   end
 end
@@ -137,6 +143,19 @@ class StyledButtonRangeInput
   }
 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
   
@@ -145,32 +164,41 @@ class HelloStyle
   end
   
   markup {
-    div(class: 'hello-style') {
-      div(class: 'form-row') {
-        label('Styled Button Width:', for: 'styled-button-width-input')
+    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')
-      }
-      div(class: 'form-row') {
-        label('Styled Button Height:', for: 'styled-button-height-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')
-      }
-      div(class: 'form-row') {
-        label('Styled Button Font Size:', for: 'styled-button-font-size-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 {'
-    .hello-style {
+  style {"
+    .styled-button-form {
       padding: 20px;
+      display: inline-grid;
+      grid-template-columns: auto auto;
+    }
+    
+    .styled-button-form label, input {
+      display: block;
+      margin: 5px 5px 5px 0;
     }
     
-    .hello-style .form-row {
-      margin: 10px 0;
+    .#{component_element_class} .styled-button {
+      display: block;
     }
-  '}
+  "}
 end
 
 Document.ready? do

data/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_input.rb

@@ -3,7 +3,7 @@ require_relative 'todo_input'
 class NewTodoInput < TodoInput
   option :presenter
   
-  markup { # evaluated against instance as a smart default convention
+  markup { # evaluated against instance as a smart convention
     input(placeholder: "What needs to be done?", autofocus: "") {
       value <=> [presenter.new_todo, :task]
     
@@ -13,10 +13,10 @@ class NewTodoInput < TodoInput
     }
   }
   
-  style { # evaluated against class as a smart default convention (common to all instances)
+  style { # evaluated against class as a smart convention (common to all instances)
     todo_input_styles
     
-    rule(".#{component_element_class}") { # built-in component_class.component_element_class (e.g. NewTodoInput has CSS class as new-todo-input)
+    rule(".#{component_element_class}") { # NewTodoInput has component_element_class as 'new-todo-input'
       padding '16px 16px 16px 60px'
       height '65px'
       border 'none'
@@ -24,7 +24,7 @@ class NewTodoInput < TodoInput
       box_shadow 'inset 0 -2px 1px rgba(0,0,0,0.03)'
     }
     
-    rule(".#{component_element_class}::placeholder") { # built-in component_class.component_element_class (e.g. NewTodoInput has CSS class as new-todo-input)
+    rule(".#{component_element_class}::placeholder") {
       font_style 'italic'
       font_weight '400'
       color 'rgba(0, 0, 0, 0.4)'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-22 00:00:00.000000000 Z
+date: 2024-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer