Figure out how to relay attributes to components while retaining props

[bebraw]

Use case:

  {
    "type": "SiteLink",
    "attributes": {
      "aria-label": "Read more about Seminole tax hike"
    },
    "props": {
      "children": "Buy tickets",
      "href": "https://ti.to/future-frontend/2023"
    }
  }

There are times when it would make sense to amend a component with specific attributes that are not bound. I.e., in this case aria-label should be connected to SiteLink root element while props should be controlled by explicit bindings.

The open question is how to model this using HTML syntax. Most likely some kind of prefix would work to signify a prop binding.

[bebraw]

This one is challenging because on consumer side it's <SiteLink href="blog" aria-label="blog">Blog</SiteLink>. The code would have to introspect SiteLink to be able to write attributes separately. Likely attributes should be written as props.attributes so prop scoping can be used during the lookup as it exists already.

On component side, it might have to look something like this:

<a
  &class[0]="(id underline)"
  &class[1]="(pick (equals (get props href) (trim (get context pagePath) /)) font-bold)"
  &href="(validateUrl (get props href))"
  &children="(render (get props children))"
  ...attributes
/>

Then ...attributes would get expanded to some type of syntax that would handle the mapping internally. The benefit of ...attributes is that it can be plugged anywhere in the structure. Maybe that could be called expandAttributes: true to signify where to plug.

[bebraw]

Likely this needs something like attributes lookup at the component level and a way to expand that where wanted. For example <div ...(get attributes)>.... This needs some thinking as it's easy to end up with something unusable.