x-govuk / html-attributes-utils Goto Github PK
View Code? Open in Web Editor NEWA small collection of utilities to ease working with hashes of HTML attributes
License: MIT License
A small collection of utilities to ease working with hashes of HTML attributes
License: MIT License
We'd like to use this library for managing attributes in ViewComponent models that use Turbo and Stimulus. We'd be happy to contribute PRs if this is in line with your project goals, but want to get your input first.
We have three blockers currently:
Input:
def default_attributes
{ data: { controller: "default", action: "click->extra#event" }}
end
...
Component.new(data: { controller: "extra", action: "click->extra#event" })
Desired output:
<div data-controller="default extra" data-action="click->default#event click->extra#event">
... Rails accepts them as arrays so there's no need to convert back to strings.
Adding custom configuration for the above attributes reveals that the documentation is not correct in general.
deep_tidy_html_attributes
removes empty stringsThis is in line with the documented behaviour, but it's surprising given that the usual behaviour of Rails tag rendering is that an attribute with an empty string becomes a bare attribute, e.g.
Input:
tag.div(hidden: "", data: { turbo_stream: "" })
Output:
<div hidden data-turbo-stream>
Rails will remove attributes with nil
values, but empty string attributes are usually rendered.
Could you perhaps explain the reasoning for removing empty attributes via deep_tidy_html_attributes
? It's not clear from the documentation why this feature is helpful.
If you'd be happy to accept PRs for any or all of these suggested enhancements please let us know.
In Rails there are two ways of setting data
and aria
attributes when using the tag
and content_tag
helpers. These are to set the attribute by its full name data-controller: "abc", data-response: "xyz"
or to use a nested hash: data: { controller: "abc", response: "xyz" }
.This library, and both the components and form builder assume people are using the latter. Using the former might lead to unintended consequences.
It might make sense to detect the full name variant and either apply a conversion or provide some kind of warning to the developer. As this only applies to data-
and aria-
prefixed attributes the conversion should be straightforward.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.