glimmer-dsl-web 0.8.1 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c41a710ea68b7c1e82d5a11f4a3199ad7a13e5bcbe360dcca1e329d14b4290e
-  data.tar.gz: b99ec986f4538d9b1808bdc0d117e7cf5dbd793897197d46aae0dc9d65212290
+  metadata.gz: c0a02a921d8cd4c8a63d77cca2780e2a117e5291ad3243915e5591174e5ebd26
+  data.tar.gz: adc5e55869e5996a41bff34b71725167e458a7d25d6e2dd10bca437502c7b34c
 SHA512:
-  metadata.gz: 1ec419eb0abf5490a56576256facbfc18a02a5743ef9bb1344186a95df5cf014535e962a5d88f1598c23243e07e691d264545a906aba761c88d93245564e08aa
-  data.tar.gz: 52005399abe94f026d634fc5e73bca0e6d508dddce246e858adaa8e8c798a7f4c90e751695f1c2fdce707c77d49a5b0916a09987607fa78d4835f6069038ca69
+  metadata.gz: 6b84989eb95043c9f239d23f8605322ec8b96f0e19f32bbd327c9f1e8ea33571d755ba4764c758e6ee2471a5c01026374da185e57abbe1316acc2f8a1c19ff4d
+  data.tar.gz: a8c0153c7959af52e7fd8d4e98cad02eb7b9daa32bf2b0f1772d0b54cbefe54e6ee5e63f85c9ce837d337bee8b683836d1193947b04aa7fdb45d8a09fe74a58e

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.8.2
+
+- Support value-less boolean attributes in HTML elements (e.g. input(:required, :autofocus, id: 'name-field') / p('Hello', :hidden, id: 'product-description')), by passing as symbols before the attributes hash, but after content string if any
+- Fix issue in Hello, Component Slots! that was causing multiple renders of address_footer
+
 ## 0.8.1
 
 - Implement `Glimmer::Web::ElementProxy#inspect` method that includes element ID, keyword, args, and parent and prevents recursing through multiple parent levels to improve readability for troubleshooting.
@@ -8,7 +13,7 @@
 ## 0.8.0
 
 - Support formatting-paragraph-elements (e.g. 'br', 'strong', 'em') as stand-alone elements (not inside p)
-- Render void tags (<br>, <hr>, <img>, <input>, <meta>, <link>) as a single tag without generating a closing tag (e.g. NOT <br></br>).
+- Render void tags (\<br\>, \<hr\>, \<img\>, \<input\>, \<meta\>, \<link\>) as a single tag without generating a closing tag (e.g. NOT \<br\>\</br\>).
 
 ## 0.7.3
 

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.8.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.8.2 (Beta)
 ## Ruby-in-the-Browser Web Frontend Framework
 ### The "Rails" of Frontend Frameworks!!! ([Fukuoka Award Winning](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html))
 #### Finally, Ruby Developer Productivity, Happiness, and Fun in the Frontend!!!
@@ -9,7 +9,7 @@
 
 **([Fukuoka Prefecture Future IT Initiative 2025 Money Forward Award Winner](https://andymaleh.blogspot.com/2025/01/glimmer-dsl-for-web-wins-in-fukuoka.html)) [(Award Announcement)](https://digitalfukuoka.jp/news/info/528/)**
 
-**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4))**
+**(Talk Videos: [Intro to Ruby in the Browser](https://youtu.be/4AdcfbI6A4c?si=MmxOrkhIXTDHQoYi) / [Frontend Ruby with Glimmer DSL for Web \[Montreal.rb\]](https://youtu.be/rIZ-ILUv9ME?si=raygUXVPd_7ypWuE) / [Frontend Ruby with Glimmer DSL for Web \[/dev/mtl 2024\]](https://www.youtube.com/watch?v=J2VIY9DMJo4)) / [Frontend Ruby with Glimmer DSL for Web at Ruby on Rio 2025-06-06 Talk](https://www.youtube.com/watch?v=LY6ulYICuzE)**
 
 **(Ruby Rogues Podcast: [Building Better Ruby Apps: Glimmer Component Slots and More](https://topenddevs.com/podcasts/ruby-rogues/episodes/building-better-ruby-apps-glimmer-s-component-slots-and-more-ruby-653))**
 
@@ -121,12 +121,12 @@ Document.ready? do
     form {
       div {
         label('Name: ', for: 'name-field')
-        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true)
+        @name_input = input(:required, :autofocus, type: 'text', id: 'name-field')
       }
       
       div {
         label('Email: ', for: 'email-field')
-        @email_input = input(type: 'email', id: 'email-field', required: true)
+        @email_input = input(:required, type: 'email', id: 'email-field')
       }
       
       div {
@@ -1418,7 +1418,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.8.1'
+gem 'glimmer-dsl-web', '~> 0.8.2'
 ```
 
 Run:
@@ -1642,9 +1642,9 @@ Under the hood, HTML element DSL keywords are invoked as Ruby methods.
 
 2- **Arguments (HTML Attributes + Text Content)**
 
-You can set any HTML element attributes by passing as keyword arguments to element methods like `div(id: 'container', class: 'stack')` or `input(type: 'email', required: true)`
+You can set any HTML element attributes by passing as keyword arguments to element methods like `div(id: 'container', class: 'stack')` or `input(:required, type: 'email')`
 
-Also, if the element has a little bit of text content that can fit in one line, it can be passed as the 1st argument like `label('Name: ', for: 'name_field')`, `button('Calculate', class: 'round-button')`, or `span('Mr')`
+Also, if the element has a little bit of text content that can fit in one line, it can be passed as the 1st argument like `label('Name: ', for: 'name_field')`, `button('Calculate', :disabled, class: 'round-button')`, or `span('Mr')`
 
 3- **Content Block (Properties + Listeners + Nested Elements + Text Content)**
 
@@ -1714,8 +1714,8 @@ the `Rails::ResourceService` class source code to find out what its API is. It c
 if Developers would rather not write the Backend by hand.
 
 `Rails::ResourceService` API:
-- `index(resource: nil, resource_class: nil, singular_resource_name: nil, plural_resource_name: nil, index_resource_url: nil, params: nil) { |response| ... }`
-- `show(resource: nil, resource_class: nil, resource_id: nil, singular_resource_name: nil, plural_resource_name: nil, show_resource_url: nil, params: nil) { |response| ... }`
+- `index(resource: nil, resource_class: nil, singular_resource_name: nil, plural_resource_name: nil, index_resource_url: nil, params: nil) { |response, resources| ... }`
+- `show(resource: nil, resource_class: nil, resource_id: nil, singular_resource_name: nil, plural_resource_name: nil, show_resource_url: nil, params: nil) { |response, resource| ... }`
 - `create(resource: nil, resource_class: nil, resource_attributes: nil, singular_resource_name: nil, plural_resource_name: nil, create_resource_url: nil, params: nil) { |response, created_resource, errors| ... }`
 - `update(resource: nil, resource_class: nil, resource_id: nil, resource_attributes: nil, singular_resource_name: nil, plural_resource_name: nil, update_resource_url: nil, params: nil) { |response, updated_resource, errors| ... }`
 - `destroy(resource: nil, resource_class: nil, resource_id: nil, singular_resource_name: nil, plural_resource_name: nil, destroy_resource_url: nil, params: nil) { |response| ... }`
@@ -1896,12 +1896,12 @@ Document.ready? do
     form {
       div {
         label('Name: ', for: 'name-field')
-        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true)
+        @name_input = input(:required, :autofocus, type: 'text', id: 'name-field')
       }
       
       div {
         label('Email: ', for: 'email-field')
-        @email_input = input(type: 'email', id: 'email-field', required: true)
+        @email_input = input(:required, type: 'email', id: 'email-field')
       }
       
       div {
@@ -4807,6 +4807,10 @@ Learn more by reading the [GPG](https://github.com/AndyObtiva/glimmer/blob/maste
 
 F.A.Q. (Frequently Asked Questions):
 
+#### Can I build a modern UI with a modern style/look/feel using Glimmer DSL for Web?
+
+Yes, 100%. Glimmer DSL for Web enables building highly advanced interactions with the simplest code possible. And, styling is just CSS, which is an orthogonal concern. You can apply any CSS style to Glimmer elements given that Glimmer produces real HTML, meaning 100% of what's possible in CSS outside of Glimmer is also possible within Glimmer. Glimmer DSL for Web supports applying CSS using CSS/SCSS/SASS files, embedding CSS inside Glimmer Web Components directly with a Ruby CSS DSL, and a hybrid approach when it is useful to combine multiple styling options (like keeping general styles in CSS files and adding specific styles in Glimmer Web Components). Also, you can integrate with any CSS framework (e.g. Tailwind/Bootstrap) if needed. As a result, you can create any modern UI with any modern style/look/feel when using Glimmer DSL for Web.
+
 #### Can I reuse JavaScript libraries from Glimmer DSL for Web in Ruby?
 
 Absolutely. Glimmer DSL for Web can integrate with any JavaScript libraries. You can either load the JavaScript libraries in advance by linking to them in the Rails View/Layout (e.g. linking to JS library CDN URLs) or by including JavaScript files in the lookup directories of Opal Ruby, and adding a Ruby `require('path_to_js_lib')` call in the code. In Ruby, the `$$` global variable gives access to the top-level JavaScript global scope, which enables invocations on any JavaScript objects. For example, `$$.hljs` gives access to the loaded `window.hljs` object for the Highlight.js library, and that enables invoking any functions from that library as needed, like `$$.hljs.highlightAll` to activate code syntax highlighting.

data/VERSION

@@ -1 +1 @@
-0.8.1
+0.8.2

data/glimmer-dsl-web.gemspec

@@ -2,11 +2,11 @@
 # DO NOT EDIT THIS FILE DIRECTLY
 # Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
 # -*- encoding: utf-8 -*-
-# stub: glimmer-dsl-web 0.8.1 ruby lib
+# stub: glimmer-dsl-web 0.8.2 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.8.1".freeze
+  s.version = "0.8.2".freeze
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
   s.require_paths = ["lib".freeze]

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

@@ -9,6 +9,8 @@ module Glimmer
       class ElementExpression < Expression
         include GeneralElementExpression
         
+        REGEXP_ARG_TYPE_STRING = /(String)*(Hash)?/
+        
         def can_interpret?(parent, keyword, *args, &block)
           slot = keyword.to_s.to_sym
           Glimmer::Web::ElementProxy.keyword_supported?(keyword) &&
@@ -21,9 +23,7 @@ module Glimmer
                   !(parent.slot_elements.keys.include?(slot) || parent.slot_elements.keys.include?(slot.to_s))
                 )
               ) ||
-              args.size == 1 && args.first.is_a?(String) ||
-              args.size == 1 && args.first.is_a?(Hash) ||
-              args.size == 2 && args.first.is_a?(String) && args.last.is_a?(Hash)
+              valid_element_args?(args)
             ) &&
             (
               keyword != 'title' ||
@@ -36,6 +36,20 @@ module Glimmer
               parent.find_ancestor(include_self: true) { |ancestor| ancestor.keyword == 'svg' }
             )
         end
+        
+        def valid_element_args?(args)
+          arg_types = args.map do |arg|
+            if arg.is_a?(String)
+              'String'
+            elsif arg.is_a?(Hash)
+              'Hash'
+            else
+              'Unsupported'
+            end
+          end
+          arg_type_string = arg_types.join
+          arg_type_string.match(REGEXP_ARG_TYPE_STRING)
+        end
       end
     end
   end

data/lib/glimmer/web/element_proxy.rb

@@ -64,6 +64,13 @@ module Glimmer
           Glimmer::Web::ElementProxy
         end
         
+        def element_boolean_attribute?(keyword, attribute)
+          attribute = attribute.to_s
+          keyword = keyword.to_s
+          HTML_ELEMENT_GLOBAL_BOOLEAN_ATTRIBUTES.include?(attribute) ||
+            HTML_ELEMENT_BOOLEAN_ATTRIBUTES[keyword]&.include?(attribute)
+        end
+        
         def next_id_number_for(name)
           @max_id_numbers[name] = max_id_number_for(name) + 1
         end
@@ -88,16 +95,17 @@ module Glimmer
           @@widget_handling_listener
         end
         
-        def render_html(element, attributes, content = nil)
-          attributes = attributes.reduce('') do |output, option_pair|
+        def render_html(element, attributes:, boolean_attributes: [], content: nil)
+          attributes_string = attributes.reduce('') do |output, option_pair|
             attribute, value = option_pair
             value = value.to_s.sub('"', '"').sub("'", ''')
             output += " #{attribute}=\"#{value}\""
           end
+          boolean_attributes_string = boolean_attributes.to_a.map(&:to_s).join(' ')
           if html_void_keyword?(element)
-            "<#{element}#{attributes}>"
+            "<#{element}#{attributes_string} #{boolean_attributes_string}>"
           else
-            "<#{element}#{attributes}>#{content}</#{element}>"
+            "<#{element}#{attributes_string} #{boolean_attributes_string}>#{content}</#{element}>"
           end
         end
         
@@ -148,7 +156,29 @@ module Glimmer
       
       # title is a special attribute because it matches an element tag name (needs special treatment)
       HTML_ELEMENT_SPECIAL_ATTRIBUTES = ['title']
-
+      
+      HTML_ELEMENT_GLOBAL_BOOLEAN_ATTRIBUTES = ['hidden', 'inert', 'contenteditable', 'spellcheck']
+      HTML_ELEMENT_BOOLEAN_ATTRIBUTES = {
+        'audio' => ['autoplay', 'controls', 'loop', 'muted'],
+        'button' => ['autofocus', 'disabled', 'formnovalidate'],
+        'details' => ['open'],
+        'dialog' => ['open'],
+        'fieldset' => ['disabled'],
+        'form' => ['novalidate'],
+        'iframe' => ['allowfullscreen'],
+        'img' => ['ismap'],
+        'input' => ['alpha', 'autofocus', 'checked', 'disabled', 'formnovalidate', 'multiple', 'readonly', 'required'],
+        'ol' => ['reversed'],
+        'optgroup' => ['disabled'],
+        'option' => ['disabled', 'selected'],
+        'script' => ['async', 'defer', 'nomodule'],
+        'select' => ['autofocus', 'disabled', 'multiple', 'required'],
+        'template' => ['shadowrootclonable', 'shadowrootdelegatesfocus', 'shadowrootserializable', 'shadowrootcustomelementregistry'],
+        'textarea' => ['autofocus', 'disabled', 'readonly', 'required'],
+        'track' => ['default'],
+        'video' => ['autoplay', 'controls', 'loop', 'muted', 'playsinline']
+      }
+      
       GLIMMER_ATTRIBUTES = [:parent]
       PROPERTY_ALIASES = {
         'inner_html' => 'innerHTML',
@@ -489,9 +519,23 @@ module Glimmer
         # 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 ||= begin
-          content = args.first.is_a?(String) ? args.first : ''
+          if args.first.is_a?(String)
+            if !Glimmer::Web::ElementProxy.element_boolean_attribute?(keyword, args.first)
+              content = args.first
+              remaining_args = args[1, args.size - 1]
+            else
+              content = ''
+              remaining_args = args
+            end
+          else
+            content = ''
+            remaining_args = args
+          end
+          remaining_args = remaining_args.to_a
           content += children_dom_content if bulk_render?
-          ElementProxy.render_html(keyword, html_options, content)
+          remaining_args = remaining_args[0...-1] if remaining_args.last.is_a?(Hash)
+          boolean_attributes = remaining_args
+          ElementProxy.render_html(keyword, attributes: html_options, boolean_attributes:, content:)
         end
       end
       

data/lib/glimmer/web/formatting_element_proxy.rb

@@ -44,13 +44,21 @@ module Glimmer
       
         def format(keyword, *args, &block)
           content = nil
+          boolean_attributes = []
           if block_given?
             content = block.call.to_s
-          elsif args.any? && !args.first.is_a?(Hash)
+          elsif args.any? && !args.first.is_a?(Hash) && !Glimmer::Web::ElementProxy.element_boolean_attribute?(keyword, args.first)
             content = args.first.to_s
+            args = args[1, args.size - 1]
           end
-          attribute_hash = args.last.is_a?(Hash) ? args.last : {}
-          ElementProxy.render_html(keyword, attribute_hash, content)
+          if args.last.is_a?(Hash)
+            attribute_hash = args.last
+            boolean_attributes = args[0, args.size - 1]
+          else
+            attribute_hash = {}
+            boolean_attributes = args
+          end
+          ElementProxy.render_html(keyword, attributes: attribute_hash, boolean_attributes:, content:)
         end
       end
       

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

@@ -165,7 +165,9 @@ class HelloComponentSlots
           legend('This is the address that is used for shipping your purchase.', style: {margin_bottom: 10})
         }
         address_footer { # contribute elements to the address_footer component slot
-          p(sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}"))
+          p {
+            sub("#{strong('Note:')} #{em('Purchase will be returned if the Shipping Address does not accept it in one week.')}")
+          }
         }
       }
       
@@ -175,7 +177,9 @@ class HelloComponentSlots
           legend('This is the address that is used for your billing method (e.g. credit card).', style: {margin_bottom: 10})
         }
         address_footer { # contribute elements to the address_footer component slot
-          p(sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}"))
+          p {
+            sub("#{strong('Note:')} #{em('Payment will fail if payment method does not match the Billing Address.')}")
+          }
         }
       }
     }

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

@@ -32,12 +32,12 @@ Document.ready? do
     form {
       div {
         label('Name: ', for: 'name-field')
-        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true)
+        @name_input = input(:required, :autofocus, type: 'text', id: 'name-field')
       }
       
       div {
         label('Email: ', for: 'email-field')
-        @email_input = input(type: 'email', id: 'email-field', required: true)
+        @email_input = input(:required, type: 'email', id: 'email-field')
       }
       
       div {

data/lib/glimmer-dsl-web/samples/hello/hello_form_mvp/views/contact_form.rb

@@ -7,14 +7,14 @@ class ContactForm
     form {
       div {
         label('Name: ', for: 'name-field')
-        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true) {
+        @name_input = input(:required, :autofocus, type: 'text', id: 'name-field') {
           value <=> [presenter.new_contact, :name]
         }
       }
       
       div {
         label('Email: ', for: 'email-field')
-        @email_input = input(type: 'email', id: 'email-field', required: true) {
+        @email_input = input(:required, type: 'email', id: 'email-field') {
           value <=> [presenter.new_contact, :email]
         }
       }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-web
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - Andy Maleh