ContentFillerController

[AliOsm]

When we cache a partial or a view that contains dynamic values like user email, usually we either put this value in the cache key (If the number of unique values are small, e.g. user roles), or render the content of this value outside the cached partial/view, then replace the content of the partial/view using JS after the page loads.

I found the second approach very useful and repeated in multiple applications that I'm working on. So, I created this simple Stimulus controller that take a source (meta tag name of HTML tag ID) and replaces the current element content with the source content:

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="content-filler"
export default class extends Controller {
  static values = {
    // meta tag name or HTML tag ID.
    source: String,
    // 'auto', 'meta', or 'element'.
    sourceType: { type: String, default: 'auto' }
  }

  connect() {
    const metaContent = document.querySelector(`meta[name="${this.sourceValue}"]`)?.content
    const elementContent = document.getElementById(this.sourceValue)?.innerHTML

    if (this.sourceTypeValue === 'auto') {
      if (metaContent != undefined) {
        this.element.innerHTML = metaContent
      } else if (elementContent != undefined) {
        this.element.innerHTML = elementContent
      }
    } else if (this.sourceTypeValue === 'meta') {
      this.element.innerHTML = metaContent
    } else if (this.sourceTypeValue === 'element') {
      this.element.innerHTML = elementContent
    }
  }
}

To use it you simply need to add data-controller="content-filler" attribute to connect to the controller, and data-content-filler-source-value="meta tag name of HTML tag ID" to point the controller to the target content.

You can also specify the source type with data-content-filler-source-type-value, which is either 'auto', 'meta', or 'element', where 'auto' is the default value. 'meta' and 'element' will force the controller to use meta tag name or HTML tag ID respectively. 'auto' will try to fill the content from a meta tag first, if it didn't find meta tag with name matching source, it will try to fill the content from an HTML tag.

I thought about submitted this controller to be added to Stimulus Components, so I don't need to copy/paste it for each application :)

[guillaumebriday]

hum, if you cache your partial that have dynamic content, the key should reflect it so you don't have dynamic values issue, right?

I think Stimulus (or any JS) should be responsible for that

[AliOsm]

You are right, if you don't mind about memory. For example, if you have users dropdown with user name and email, caching the dropdown will produce a cache entry for each user, and you will fill your cache with non-useful data.

On the other side, you can put the user name and email as meta data, and read them in different partials.

[guillaumebriday]

Got it, but isn't caching a dropdown a little bit overkill? Do you really need that? If you use Turbo, it might be much easier to reload only specific frame and avoid this problem at all

[AliOsm]

The user dropdown is just an example.

[guillaumebriday]

Got it! But my point with Turbo and turbo-frames is still valid 👍

Thanks for the suggestion though! 🙏