CableCar + web component

cable_car_example.html

<cable-car href="/cc/cable_car" csrf-token="94IkWdvagUHWPGVkD+VeBFVjGoM0zXAf6tgm6BPU+kEpOj2BTtI6bXJQzEDXGAF+R6Dc1ek7oNouatTMrbUy">
  <button
    onclick="this.closest('cable-car').post(this, {extra: 123})"
    data-x="1"
    output="#show-the-things"
  >
    Do a thing!
  </button>

  <section id="show-the-things"></section>
</cable-car>

<script type="module">
  import CableReady from "https://cdn.skypack.dev/cable_ready"
  import { v4 } from "https://cdn.skypack.dev/uuid"
  
  window.cableCarConfig = {
    csrfHeader: "X-CSRF-Token"
  }

  class CableCar extends HTMLElement {
    connectedCallback() {
      this.id = `uuid-${v4()}`
    }
    post(fromElement, params = {}) {
      params.cable_car_dispatcher = {
        uuid: this.id,
        tag: fromElement.localName,
        attributes: Object.fromEntries(Array.from(fromElement.attributes).map(attr => [attr.name, attr.value])),
        dataset: fromElement.dataset
      }

      fetch(this.getAttribute("href"), {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          [window.cableCarConfig.csrfHeader]: this.getAttribute("csrf-token")
        },
        body: JSON.stringify(params)
      })
        .then(response => response.json())
        .then(data => {
          if (window.cableCarConfig.debug) {
            console.log("CableCar Response:", data)
          }
          CableReady.perform(data)
        })
    }
  }
  customElements.define("cable-car", CableCar)
</script>