glimmer-dsl-web 0.8.1 → 0.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c41a710ea68b7c1e82d5a11f4a3199ad7a13e5bcbe360dcca1e329d14b4290e
-  data.tar.gz: b99ec986f4538d9b1808bdc0d117e7cf5dbd793897197d46aae0dc9d65212290
+  metadata.gz: 2875fc22d0ceddd1882af12356ce4d9cbacb2cc8bc77b11fd0a3b736b621e37b
+  data.tar.gz: 8476f4388e5f02088328865b2a5609dad2306d5e0dc2412d4ee74cd1377bbf41
 SHA512:
-  metadata.gz: 1ec419eb0abf5490a56576256facbfc18a02a5743ef9bb1344186a95df5cf014535e962a5d88f1598c23243e07e691d264545a906aba761c88d93245564e08aa
-  data.tar.gz: 52005399abe94f026d634fc5e73bca0e6d508dddce246e858adaa8e8c798a7f4c90e751695f1c2fdce707c77d49a5b0916a09987607fa78d4835f6069038ca69
+  metadata.gz: b971fce2ac7742dc27ee0b75ea79c21e699fe2bce442f962ee0f1ecfabb437af31863174523b0dc3a15266130efadae6e17ea4ad16055e66d741323656c3e623
+  data.tar.gz: af8aa0386ddef4569f621aa2db14174684a9f09f1fc256f6c3ee424accfe3fa2506aa949b07b7c65233105617cb91ef1127ba43b3b8734a90e8363d6aa341290

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.8.3
+
+- Raise an error when attempting to define a component that shadows an HTML element
+- Raise an error when attempting to define a component slot that shadows an HTML element
+
+## 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 +18,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/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2023-2025 Andy Maleh
+Copyright (c) 2023-2026 Andy Maleh
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -1,15 +1,19 @@
-# [<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.3 (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!!!
 [![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)
 
+**UPCOMING APRIL 17, 2026 WORKSHOP: "Building Rails SPAs in Frontend Ruby with Glimmer DSL for Web" at [wroclove.rb 2026 Ruby Conference](https://wrocloverb.com/), in Wroclaw, Poland**
+
+**UPCOMING MAY 30, 2026 TALK: "Frontend Ruby on Rails with Glimmer DSL for Web" at [RubyConf Austria 2026](https://rubyconf.at/), in Vienna, Austria**
+
 **(Based on Original [Glimmer](https://github.com/AndyObtiva/glimmer) Library Handling World’s Ruby GUI Needs Since 2007. Beware of Imitators!)**
 
 **([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 +125,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 +1422,7 @@ rails new glimmer_app_server
 Add the following to `Gemfile`:
 
 ```
-gem 'glimmer-dsl-web', '~> 0.8.1'
+gem 'glimmer-dsl-web', '~> 0.8.3'
 ```
 
 Run:
@@ -1642,9 +1646,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 +1718,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 +1900,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 +4811,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.
@@ -4869,7 +4877,7 @@ These features have been suggested. You might see them in a future version of Gl
 
 [MIT](https://opensource.org/licenses/MIT)
 
-Copyright (c) 2023-2025 - Andy Maleh.
+Copyright (c) 2023-2026 - Andy Maleh.
 See [LICENSE.txt](LICENSE.txt) for further details.
 
 --

data/VERSION

@@ -1 +1 @@
-0.8.1
+0.8.3

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.3 ruby lib
 
 Gem::Specification.new do |s|
   s.name = "glimmer-dsl-web".freeze
-  s.version = "0.8.1".freeze
+  s.version = "0.8.3".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/component.rb

@@ -171,6 +171,11 @@ module Glimmer
       class << self
         def included(klass)
           if !klass.ancestors.include?(GlimmerSupersedable)
+            if !klass.to_s.include?('::') && Glimmer::Web::ElementProxy::ELEMENT_KEYWORDS.include?(klass.to_s.underscore)
+              raise "Cannot define the Glimmer::Web::Component class \"#{klass.to_s}\" because it shadows the HTML element \"#{klass.to_s.underscore}\"! " +
+                    "Either rename the class (e.g. \"MyApp#{klass.to_s}\") to avoid conflicting with an existing HTML element name or " +
+                    "nest it within a namespace module/class (e.g. \"MyApp::#{klass.to_s}\")!"
+            end
             klass.extend(ClassMethods)
             klass.include(Glimmer)
             klass.prepend(GlimmerSupersedable)

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',
@@ -191,6 +221,7 @@ module Glimmer
         end
         @slot = options['slot'] || options[:slot]
         @slot = @slot.to_sym if @slot
+        validate_slot!
         ancestor_component.slot_elements[@slot] = self if @slot && ancestor_component
         @args = args
         @block = block
@@ -489,9 +520,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
       
@@ -1072,6 +1117,15 @@ module Glimmer
           style_value.to_s
         end
       end
+      
+      def validate_slot!
+        slot_name = @slot.to_s
+        if Glimmer::Web::ElementProxy::ELEMENT_KEYWORDS.include?(slot_name)
+          raise "Cannot define the Component Slot \"#{slot_name}\" because it shadows the HTML element \"#{slot_name}\"! " +
+                "Rename the Component Slot (e.g. \"my_app_#{slot_name}\") to avoid conflicting with an existing HTML element name!"
+        end
+      end
+      
     end
   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.3
 platform: ruby
 authors:
 - Andy Maleh