Bloated DOM due to state

1

It might be that I’m doing something wrong, but in some instances, my HTML is very bloated due to state.

Example:

<div 
  class="list-group-item list-group-item-action comment-list-item flex-column align-items-start position-relative <%= 'pl-5' unless client_side? %>" 
  id="comment-list-item-<%= list_item.id %>" 
  data-controller="clients--comments--list-item clients--comments--show"
  data-action="click->clients--comments--show#scrollToElement"
  data-target="clients--comments--show.comment"
  data-clients--comments--show-id="<%= list_item.id %>"
  data-clients--comments--list-item-id="<%= list_item.id %>" 
  data-clients--comments--list-item-content="<%= list_item.content %>" 
  data-clients--comments--list-item-author-name="<%= list_item.author_name %>" 
  data-clients--comments--list-item-author-initials="<%= list_item.author_initials %>" 
  data-clients--comments--list-item-file-system-object-id="<%= list_item.file_system_object_id %>" 
  data-clients--comments--list-item-x-pos="<%= list_item.x_pos %>"
  data-clients--comments--list-item-content-swap="<%= list_item.content %>"
>

Would it make more sense to store it like this:

<div 
  class="list-group-item list-group-item-action comment-list-item flex-column align-items-start position-relative <%= 'pl-5' unless client_side? %>" 
  id="comment-list-item-<%= list_item.id %>" 
  data-controller="clients--comments--list-item clients--comments--show"
  data-action="click->clients--comments--show#scrollToMarker"
  data-target="clients--comments--show.comment"
  data-clients--comments--show-id="<%= list_item.id %>"
  data-clients--comments--list-item-json="<%= list_item.to_json %>"
>

And pull the data via:

JSON.parse(this.data.get("json"))

I’m not entirely sure the best way to deal with larger chunks of state like this, but my HTML partials are getting huge… haha

1 Like
2

I’d say that’s a perfectly reasonable thing to do. In fact, we’re adding first class APIs for it in Stimulus 1.2: Coming in Stimulus 1.2: The Classes and Values APIs

2 Likes
3

Ahh I saw that but didn’t think about being able to do values as JSON with the new API. Rock n roll!