frame_cache_controller.js

frame_cache_controller.js

import { Controller } from "@hotwired/stimulus"
import store from "lib/cache_store"

export default class extends Controller {
  static targets = []
  static values = { expiresAt: Number }

  async connect() {
    const deferredSrc = this.element.getAttribute("deferred-src")
    if (!deferredSrc) return

    await this.get(this.element.id)
  }

  async set(event) {
    const frameElement = await this.#parseHtml(event)

    if (frameElement) {
      await store.write(this.element.id, frameElement.outerHTML, this.expiresAtValue)
    }
  }

  async get(key) {
    try {
      const cache = await store.fetch(key)

      if (cache) {
        const parser = new DOMParser()
        const doc = parser.parseFromString(cache, "text/html")
        const frameElement = doc.querySelector(`turbo-frame#${key}`)

        if (frameElement) {
          this.element.innerHTML = frameElement.innerHTML
          this.element.setAttribute("complete", "")
        }
      } else {
        this.#setSrc()
      }
    } catch (error) {
      this.#setSrc()
    }
  }

  async #parseHtml(event) {
    const html = await event.detail.fetchResponse.responseHTML
    const parser = new DOMParser()
    const doc = parser.parseFromString(html, "text/html")
    const frameElement = doc.querySelector(`turbo-frame#${this.element.id}`)
    return frameElement
  }

  #setSrc() {
    this.element.src = this.element.getAttribute("deferred-src")
  }
}