Use HTMX for Front End JS

[Copilot]

General Info

• Pivotal Tracker Story
• Breaking?

Changes

Integrates HTMX 2.0.8 into the Rails importmap pipeline and migrates all appropriate AJAX interactions from hand-written Stimulus fetch calls to declarative HTMX attributes.

Installation

• Vendored htmx.org.js (ESM build) at vendor/javascript/htmx.org.js
• Pinned as "htmx.org" in config/importmap.rb
• Imported and exposed as window.htmx in application.js

Rails CSRF + Flash bridge (application.js)

• htmx:configRequest → injects X-CSRF-Token into every HTMX request
• htmx:afterRequest → parses HX-Trigger response header and fires CustomEvent("flash") consumed by the existing flash Stimulus controller
• htmx:sendError → rolls back checkbox state and shows network-error flash (distinct from per-element hx-on::htmx:response-error which handles non-2xx HTTP responses)

Front-end interactions converted to HTMX

Interaction	Change
Assignment enable/disable toggle	hx-patch + hx-vals='js:{...}'; hx-on::htmx:response-error rolls back checkbox
Assignment sync button	hx-post + server HX-Refresh: true
Enrollment extended-requests toggle	Same pattern as assignment toggle
Enrollment sync button	Same pattern as assignment sync

DataTables initialization, Bootstrap modals, local date calculations, and sidebar/color-mode logic stay in Stimulus — no HTMX replacement makes sense there.

Server-side (fully backward-compatible)

Controllers detect HX-Request header and branch accordingly:

# AssignmentsController / UserToCoursesController
if request.headers["HX-Request"]
  head_with_flash(:ok, :notice, "Assignment updated successfully.")
else
  render json: { success: true }, status: :ok
end

# CoursesController sync actions
if request.headers["HX-Request"]
  flash[:notice] = "Assignments synced successfully."
  head :ok, "HX-Refresh" => "true"
else
  render json: { message: "Assignments synced successfully." }, status: :ok
end

Non-HTMX callers (existing RSpec controller tests, API consumers) receive the original JSON responses unchanged.

Stimulus controllers cleaned up — removed toggleAssignment, sync, toggleExtended, and _dispatchFlash from assignment_controller.js and enrollments_controller.js; DataTables init remains.

Testing

Existing RSpec controller specs for AssignmentsController, UserToCoursesController, and CoursesController cover the non-HTMX code paths and are unmodified. The HTMX-specific paths (CSRF injection, HX-Trigger flash, HX-Refresh) are exercised through the browser; no headless JS test infrastructure is currently in place for Stimulus/HTMX interaction tests.

Documentation

No additional documentation required. HTMX attributes are self-documenting in the HTML and the HTMX docs cover all used attributes.

Checklist

• Name of branch corresponds to story

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdn.jsdelivr.net
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)
• cdn.skypack.dev
  • Triggering command: /usr/bin/curl curl -sv REDACTED -o /tmp/htmx.test.js (dns block)
• esm.sh
  • Triggering command: /usr/bin/curl curl -sv REDACTED -o /tmp/htmx.test2.js (dns block)
• ga.jspm.io
  • Triggering command: /usr/bin/curl curl -sv REDACTED -o /tmp/htmx.min.js (dns block)
• https://api.github.com/repos/bigskysoftware/htmx/releases/latest
  • Triggering command: /usr/bin/curl curl -s REDACTED (http block)
• unpkg.com
  • Triggering command: /usr/bin/curl curl -sI REDACTED (dns block)
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[superconductor-for-github]

✅ @Copilot — Superconductor finished — View implementation | App Preview

---

Standing by for instructions.

[cycomachead]

Interesting draft, but closing for now.