bigskysoftware / bigskysoftware/htmx

New Feature Proposal: External File Attribute Mapping in htmx

Open
#2,243 5 comments 11 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

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.

Contributor guide

Open the contributing guide

Research direction

Begin with htmx's config or meta option and the class-attribute parsing described in the proposal. Define and validate the external file or JSON mapping behavior for hx-prefixed class, name, or id references, including multiple classes; done means mapped htmx attributes are applied to associated elements without repeated inline declarations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.