Replace Hotwire with htmx and Stimulus with Alpine.js#362
Closed
C4ptainCrunch wants to merge 1 commit intomainfrom
Closed
Replace Hotwire with htmx and Stimulus with Alpine.js#362C4ptainCrunch wants to merge 1 commit intomainfrom
C4ptainCrunch wants to merge 1 commit intomainfrom
Conversation
Migrate the full frontend interactivity stack from Hotwire to HTMX/Alpine.js,
reducing JS bundle size and aligning with the Django-HTMX ecosystem.
Frontend libraries:
- Replace @hotwired/turbo with htmx.org (hx-boost for SPA navigation)
- Replace @hotwired/stimulus with Alpine.js for client-side controllers
- Remove stimulus-autocomplete dependency
Template changes:
- Convert <turbo-frame> elements to HTMX partials ({% partialdef %}/{% partial %})
using Django 6.0's native template partials feature
- Replace data-turbo="false" with hx-boost="false" on download/admin links
- Replace data-turbo-confirm with hx-confirm for confirmation dialogs
- Replace Stimulus data-controller/data-action/data-*-target attributes
with Alpine.js x-data/x-ref/@event directives
- Convert home page autocomplete from stimulus-autocomplete to native
HTMX hx-get/hx-trigger/hx-target
View changes:
- document_vote returns HTMX partial via render("viewer.html#vote") for
htmx requests, keeping redirect fallback for non-HTMX
- set_follow_course returns HTMX partial via render("course.html#favorite")
for htmx requests
JavaScript (main.js):
- Rewrite 9 Stimulus controllers as 4 Alpine.js components (courseFilter,
upload, share, modalTrigger) + plain JS (PDF viewer, tom-select init)
- Use htmx:afterSettle event for post-swap initialization
Dependencies:
- Add django-htmx with HtmxMiddleware (provides request.htmx)
- Update CLAUDE.md to reflect new stack preferences
https://claude.ai/code/session_0159hvaDdYbNvvWfCi4hdaun
Contributor
Author
|
This was a failed experiment with Claude code, closing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR migrates the frontend from Hotwire (Turbo + Stimulus) to htmx and Alpine.js, aligning with the project's philosophy of preferring simpler patterns and minimal dependencies.
Key Changes
hx-post,hx-get,hx-target,hx-swap)x-data,@click,@input, etc.)data-turbo="false"→hx-boost="false"data-turbo-confirm→hx-confirmdata-controller→x-datadata-action→@eventlistenersdata-*-target→x-refor@eventhandlersImplementation Details
request.htmxand return targeted partial templates instead of full page reloadsx-datadefinitions with methods for state management<dialog>element with Alpine.js event handlinghttps://claude.ai/code/session_0159hvaDdYbNvvWfCi4hdaun