Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Alpine.js with JS hooks #818

Open
wants to merge 42 commits into
base: develop
Choose a base branch
from
Open

Conversation

pehbehbeh
Copy link
Member

@pehbehbeh pehbehbeh commented Jan 30, 2025

This completely removes Alpine.js dependency.

  • Trigger from change (validation) on upload entry cancel via JS hook and server sent event. (Current Alpine.js solution was broken btw.)
  • Trigger drag hover styles on upload dropzones via JS hook.
  • Use DaisyUI drawer component for responsive sidebar.
  • Use DaisyUI collapse component for sidebar sections and use localstorage via custom events.
  • Use sticky columns with IntersectionObserver to dynamically display the column shadow.
  • Moves the theme selector stuff to backpex core to ease the installation.

@pehbehbeh pehbehbeh added the feature New feature label Jan 30, 2025
@pehbehbeh pehbehbeh self-assigned this Jan 30, 2025
@pehbehbeh pehbehbeh marked this pull request as draft January 30, 2025 13:05
@pehbehbeh pehbehbeh changed the title Introduce Backpex JS hooks Replace Alpine.js with JS hooks Feb 2, 2025
@pehbehbeh pehbehbeh requested review from Flo0807 and krns February 5, 2025 23:34
@pehbehbeh pehbehbeh marked this pull request as ready for review February 5, 2025 23:34
# Conflicts:
#	demo/package.json
#	guides/upgrading/v0.11.md
Comment on lines -92 to -101
onNodeAdded (node) {
// Mimic autofocus for dynamically inserted elements
if (node.nodeType === window.Node.ELEMENT_NODE && node.hasAttribute('autofocus')) {
node.focus()

if (node.setSelectionRange && node.value) {
const lastIndex = node.value.length
node.setSelectionRange(lastIndex, lastIndex)
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't remember why we added this, but I wanted to add a comment in case this wasn't Alpine's reason (I don't see any Alpine specific code like in onBeforeElUpdated).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not using autofocus in the codebase... so I removed it. Looked like a project-specific thing? But I was wondering about that one, too.

@Flo0807 Flo0807 added the breaking-change A breaking change label Feb 6, 2025
lib/backpex/html/layout.ex Outdated Show resolved Hide resolved
lib/backpex/html/layout.ex Outdated Show resolved Hide resolved
lib/backpex/html/layout.ex Outdated Show resolved Hide resolved
@Flo0807
Copy link
Collaborator

Flo0807 commented Feb 6, 2025

Awesome! 🙌

@Flo0807
Copy link
Collaborator

Flo0807 commented Feb 6, 2025

I noticed a small issue:

If you select rows, the action column is not highlighted.

@pehbehbeh

@Flo0807
Copy link
Collaborator

Flo0807 commented Feb 7, 2025

I added standard as a devDependency to the Backpex package.json. This allows us to lint the JavaScript files in our CI workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking-change A breaking change feature New feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants