Is it possible to for the `ht-attrs` property to automatically set names and values based on key-value pairs from an Object?

HyperTemplates
1

Is it possible to for the ht-attrs property to automatically set key-value pairs based on the key-value pairings of the object being provided? E.g. if the properties are valid JSON/YAML properties, and the values are String, Boolean, or Number types, could HT assume that, if not given a name, each property name should be used with each value being assigned to said property?

To illustrate… I’d love for the following to work. If given an object like:

link:
  content: Example
  attrs: 
    href: "/example"
    class: "button-primary"
    aria-current: "page"

I’d love to write

<a href='#' ht-content='text:link.content' ht-attrs='link.attrs'>…</a>

and have the output be

<a href='/example' aria-current="page" class="button-primary">Example</a>

Right now it outputs:

<a href='#' data-attr-0="map[aria-current:page class:button-primary href:/example]">Example</a>

Hopefully that makes sense?

1 Like
2

I didn’t understand at first what the ask is here, but the examples help a lot. It’s a good idea!

In fact, those numbered attributes are an evidence of some unfinished work in the ht-attrs implementation. I wanted ht-attrs to be robust enough to handle incorrectly formatted directives (i.e. an attribute with no name), but I also thought no one would find those data-attr-x numbered attributes to be useful, haha. I was basically hoping they would prompt some feedback that could steer me in the right direction. And it has!

Let me think on this one, but my hot take is that this is a really good idea and it feels kinda obvious (in hindsight) that I should have done this in the first place. :sweat_smile:

Thanks for this!

3

I’m going to hold off on posting the announcement until tomorrow, but I just cut a v0.18.0 release of hyperctl that includes support for attribute maps!

Let me know what you think about this approach. I hope it helps!

4

Nice! I noticed that data mappings like this

example_data:
  image:
    src: "https://example.com/img"
    alt: 
    aria-describedby: "example..."

Any null values are pulled into the HTML element as <nil>.

So given the following HyperTemplates attribute:

<img ht-attrs="example_data.image" >

The output would be like so:

<img alt="<nil>" aria-describedby="example..." src="https://example.com/img" >

Instead of passing <nil> as a string value, would it make more sense for the empty key-value pair (in this example, example_data.image.alt) to be handled in one of the following manners?

  1. Add alt to the element without setting a value: <img alt ...> (might show a warning in the browser developer tools.)
  2. Add alt to the element with an empty value: <img alt="" ...> (should not show a warning in the browser developer tools.)
  3. Do not add alt to the element: <img ...> (For certain elements, like the img element, might show a warning in the browser developer tools.)

I like option 3 the best.

I noticed right now that if I want to set an attribute like disabled to input elements I need to pass the key-value pairing like so: disabled: "" (this becomes a standalone disabled attribute on the element)

1 Like