New Feature Proposal: External File Attribute Mapping in htmx

[Ghenimi]

I propose the integration of the External Attribute Mapping feature for htmx, aiming to introduce a mechanism that allows developers to define and manage htmx attributes for HTML elements in an external file, similar to the separation of styles in CSS.

This is achieved by utilizing the class, name or id attributes with a specific prefix, such as hx-, to indicate a connection to the external attribute file. For instance, if a developer wants to associate a set of attributes with a particular HTML element, they can assign a class to that element, like hx-link1. This class acts as a reference, signaling htmx to dynamically fetch and apply attributes from that file or json reply.

The implementation involves a constant in the config of htmx or in the meta then htmx parsing the class attribute, recognizing the hx- prefix, and searching for a corresponding file that contains the attributes associated with that class. These attributes can include various htmx-related functionalities, allowing developers to define behavior, events, and other characteristics for specific HTML components moreover a html element can be attached to many classes enabling the reduction of lines codes and application total size.

This feature serves a dual purpose. Firstly, it provides a modular and organized way to manage attributes, facilitating a separation of concerns and enhancing code maintainability. Secondly, it addresses the issue of redundancy in HTML, particularly evident in scenarios like checkbox or radio lists where developers often need to repeat hx-put declarations for individual inputs.

By introducing External Attribute Mapping, htmx embraces a more scalable and clean approach to web development. It enables developers to centralize and manage attributes efficiently, promoting better organization and reducing the need for repetitive attribute declarations in HTML code.

The proposed feature aligns with established practices in web development, offering a powerful yet lightweight extension to htmx's functionality.

[jay23606]

I just happened to write an extension today that can do this using YAML and I call the new attribute hx-class

https://github.com/jay23606/minimal-htmx/blob/main/hx-class.js

https://github.com/jay23606/minimal-htmx/blob/main/ex3.html

https://raw.githack.com/jay23606/minimal-htmx/master/ex3.html

I used YAML because I thought it looked nicer than JSON but you have to be careful with tabs/spaces

It may need some work because I am not sure I handled events correctly

[Ghenimi]

You've done a great job, thank you. I see that in the HTML structure, you've employed only the class name, and htmx attributes are appropriately positioned separately, that is very nice and extraordinary !

However, during execution, when we inspect the element, it reveals that the htmx attributes are aligned with the HTML due to your use of applyClassAttributes. I appreciate your hard work, but I thin this is only a partial implementation of my suggestion. To achieve cleaner HTML code in both coding and execution, I believe it's necessary to avoid using an extension and instead integrate this in the htmx.js file. This integration should force htmx to read the hx- attributes from a distinct location, not directly from the HTML element.

Can you work on htmx.js file and provide a new one ? I think there are many things to do like changing the fonction :

function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
                var boostedSelector = ", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";
                var results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit'], [hx-sse], [data-hx-sse], [hx-ws]," +
                    " [data-hx-ws], [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger], [hx-on], [data-hx-on]");
                return results;
            } else {
                return [];
            }
        }

and add to the results variable : [class^='hx-']

I want to express my gratitude for your prompt response and genuine interest in this matter. Your collaboration on this technical refinement is highly valued, and I look forward to further discussions on its implementation.

[jay23606]

I just added it as an extension because I assumed it might not be so useful in all situations. Feel free to use it and change it to suit your needs. It would be fairly easy to always look for hx-class whether it exists inside hx-ext="hx-class" or not. I only started using htmx about a week ago and the first thing I did was create my own minimal implementation of htmx based on my understanding of it (which is still very high level and have not read the book yet). I created this extension based off another question someone wrote on discord about duplication of attributes however I think there are ways to avoid it with inheritance. Based on your timestamp of this issue I think you may have had this idea before I did.

[Ghenimi]

I really thank you jay23606, I posit that the initial contributor undertaking the enhancement of the htmx.js file integrating a separate reading mechanism will likely emerge as a notable figure in the realm of web development, drawing parallels to the influence of the trailblazer behind the .css file, "Håkon Wium Lie." In the nascent stages of web development, the styling of web pages involved direct implementation within HTML tags, utilizing attributes such as color=red and width=100px (just like htmx currently does).

Our present scenario signifies a crucial juncture in the evolution of web development, distinguished by the impressive capabilities of htmx. The shift from direct coding within HTML to a more sophisticated and modular approach signifies the maturation of web technologies. I extend my genuine appreciation to Carson Gross, the inventor of htmx, for his pivotal contributions to this transformative journey.

[jay23606]

@khalilghenimi thanks for your feedback. I added hx-class to my own version of htmx and also added a my own custom YAML parser so that there are no external dependencies.

The code (minified it comes in at under 2500 bytes): https://github.com/jay23606/minimal-htmx/blob/main/mhtmx.js

A demo: https://raw.githack.com/jay23606/minimal-htmx/master/ex4.html

Also added some documentation:

https://github.com/jay23606/minimal-htmx