Replace Alpine.js with JS hooks

.github/workflows/ci.yml

@@ -38,6 +38,13 @@ jobs:
           otp-version: ${{ matrix.erlang }}
           elixir-version: ${{ matrix.elixir }}
 
+      - name: Setup node
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        with:
+          node-version: 20
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+
       - name: Restore the deps and _build cache
         uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         id: restore-cache
@@ -58,14 +65,17 @@ jobs:
         if: steps.restore-cache.outputs.cache-hit != 'true'
         run: mix deps.compile
 
-      - name: Run tests
-        run: mix test
+      - name: Compile with warnings as errors
+        run: mix compile --warnings-as-errors --force
+
+      - name: Install node dependencies
+        run: yarn install --pure-lockfile
 
       - name: Check formatting
         run: mix format --check-formatted
 
-      - name: Compile with warnings as errors
-        run: mix compile --warnings-as-errors --force
+      - name: JavaScript Standard
+        run: yarn run lint:standard
 
       - name: Build docs with warnings as errors
         run: mix docs --warnings-as-errors
@@ -79,6 +89,9 @@ jobs:
       - name: Deps Unused
         run: mix deps.unlock --check-unused
 
+      - name: Run tests
+        run: mix test
+
       - name: Deps Audit
         continue-on-error: true
         run: mix deps.audit

.gitignore

@@ -18,5 +18,5 @@ backpex-*.tar
 /priv/static/assets/
 /priv/static/cache_manifest.json
 npm-debug.log
-/assets/node_modules/
+/node_modules
 

Dockerfile

@@ -59,6 +59,8 @@ COPY demo/package.json demo/yarn.lock demo/.stylelintrc.json ./
 RUN yarn install --pure-lockfile
 COPY demo/assets assets/
 COPY demo/lib lib/
+COPY assets ../assets/
+COPY package.json ../
 RUN mix assets.deploy
 
 # Copy the rest of the application files

assets/js/backpex.js

@@ -0,0 +1,3 @@
+import * as Hooks from './hooks'
+
+export { Hooks }

assets/js/hooks/_cancel_entry.js

@@ -0,0 +1,18 @@
+/**
+ * This hook dispatches a form change/input event on the hidden upload field when cancelling an entry.
+ * This makes errors validation on upload fields work.
+ */
+export default {
+  mounted () {
+    this.form = this.el.closest('form')
+
+    const uploadKey = this.el.dataset.uploadKey
+    this.handleEvent(`cancel-entry:${uploadKey}`, (e) => { this.dispatchChangeEvent() })
+    this.handleEvent(`cancel-existing-entry:${uploadKey}`, (e) => { this.dispatchChangeEvent() })
+  },
+  dispatchChangeEvent () {
+    if (this.form) {
+      this.el.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+}

assets/js/hooks/_drag_hover.js

@@ -0,0 +1,25 @@
+/**
+ * This hook adds hover styles on the upload dropzone when dragging a file over it.
+ */
+export default {
+  mounted () {
+    this.dragging = 0
+
+    this.dragenterHandler = () => this.dragChange(this.dragging + 1)
+    this.dragleaveHandler = () => this.dragChange(this.dragging - 1)
+    this.dropHandler = () => this.dragChange(0)
+
+    this.el.addEventListener('dragenter', this.dragenterHandler)
+    this.el.addEventListener('dragleave', this.dragleaveHandler)
+    this.el.addEventListener('drop', this.dropHandler)
+  },
+  dragChange (value) {
+    this.dragging = value
+    this.el.firstElementChild.classList.toggle('border-primary', this.dragging > 0)
+  },
+  destroyed () {
+    this.el.removeEventListener('dragenter', this.dragenterHandler)
+    this.el.removeEventListener('dragleave', this.dragleaveHandler)
+    this.el.removeEventListener('drop', this.dropHandler)
+  }
+}

assets/js/hooks/_sidebar_sections.js

@@ -0,0 +1,50 @@
+/**
+ * Handles the initial state of all sidebar sections and saves the state to localstorage on toggle.
+ */
+export default {
+  mounted () {
+    this.initializeSections()
+  },
+  updated () {
+    this.initializeSections()
+  },
+  destroyed () {
+    const sections = this.el.querySelectorAll('[data-section-id]')
+
+    sections.forEach(section => {
+      const toggle = section.querySelector('[data-menu-dropdown-toggle]')
+      toggle.removeEventListener('click', this.handleToggle.bind(this))
+    })
+  },
+  initializeSections () {
+    const sections = this.el.querySelectorAll('[data-section-id]')
+
+    sections.forEach(section => {
+      const sectionId = section.dataset.sectionId
+      const toggle = section.querySelector('[data-menu-dropdown-toggle]')
+      const content = section.querySelector('[data-menu-dropdown-content]')
+
+      const isOpen = localStorage.getItem(`sidebar-section-${sectionId}`) === 'true'
+      if (!isOpen) {
+        toggle.classList.remove('menu-dropdown-show')
+        content.style.display = 'none'
+      }
+
+      section.classList.remove('hidden')
+
+      toggle.addEventListener('click', this.handleToggle.bind(this))
+    })
+  },
+  handleToggle (event) {
+    const section = event.currentTarget.closest('[data-section-id]')
+    const sectionId = section.dataset.sectionId
+    const toggle = section.querySelector('[data-menu-dropdown-toggle]')
+    const content = section.querySelector('[data-menu-dropdown-content]')
+
+    toggle.classList.toggle('menu-dropdown-show')
+    content.style.display = content.style.display === 'none' ? 'block' : 'none'
+
+    const isNowOpen = toggle.classList.contains('menu-dropdown-show')
+    localStorage.setItem(`sidebar-section-${sectionId}`, isNowOpen)
+  }
+}

assets/js/hooks/_sticky_actions.js

@@ -0,0 +1,29 @@
+/**
+ * Hook to determine if a table row is horizontally scrollable (=> actions are sticky).
+ *
+ * Adds a 'stuck' attribute to the sticky element which can then be used for styling.
+ */
+export default {
+  mounted () {
+    this.sticky = this.el.querySelector('.sticky')
+
+    this.observer = new IntersectionObserver(
+      ([entry]) => {
+        this.stuck = entry.intersectionRatio < 1
+        this.toggleStuckAttribute()
+      },
+      { threshold: [1], root: this.el.closest('.overflow-x-auto') }
+    )
+
+    this.observer.observe(this.el)
+  },
+  updated () {
+    this.toggleStuckAttribute()
+  },
+  destroyed () {
+    this.observer.disconnect()
+  },
+  toggleStuckAttribute () {
+    this.sticky.toggleAttribute('stuck', this.stuck)
+  }
+}

assets/js/hooks/_theme_selector.js

@@ -0,0 +1,56 @@
+/**
+ * Hook for selecting a theme.
+ */
+export default {
+  mounted () {
+    const form = document.querySelector('#backpex-theme-selector-form')
+    const storedTheme = window.localStorage.getItem('backpexTheme')
+
+    // Marking current theme as active
+    if (storedTheme != null) {
+      const activeThemeRadio = form.querySelector(
+        `input[name='theme-selector'][value='${storedTheme}']`
+      )
+      activeThemeRadio.checked = true
+    }
+
+    window.addEventListener('backpex:theme-change', this.handleThemeChange.bind(this))
+  },
+  // Event listener that handles the theme changes and store
+  // the selected theme in the session and also in localStorage
+  async handleThemeChange () {
+    const form = document.querySelector('#backpex-theme-selector-form')
+    const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
+    const cookiePath = form.dataset.cookiePath
+    const selectedTheme = form.querySelector(
+      'input[name="theme-selector"]:checked'
+    )
+
+    if (selectedTheme) {
+      window.localStorage.setItem('backpexTheme', selectedTheme.value)
+      document.documentElement.setAttribute(
+        'data-theme',
+        selectedTheme.value
+      )
+      await fetch(cookiePath, {
+        body: `select_theme=${selectedTheme.value}`,
+        method: 'POST',
+        headers: {
+          'Content-type': 'application/x-www-form-urlencoded',
+          'x-csrf-token': csrfToken
+        }
+      })
+    }
+  },
+  // Call this from your app.js as soon as possible to minimize flashes with the old theme in some situations.
+  setStoredTheme () {
+    const storedTheme = window.localStorage.getItem('backpexTheme')
+
+    if (storedTheme != null) {
+      document.documentElement.setAttribute('data-theme', storedTheme)
+    }
+  },
+  destroyed () {
+    window.removeEventListener('backpex:theme-change', this.handleThemeChange.bind(this))
+  }
+}

assets/js/hooks/index.js

@@ -0,0 +1,5 @@
+export { default as BackpexCancelEntry } from './_cancel_entry'
+export { default as BackpexDragHover } from './_drag_hover'
+export { default as BackpexSidebarSections } from './_sidebar_sections'
+export { default as BackpexStickyActions } from './_sticky_actions'
+export { default as BackpexThemeSelector } from './_theme_selector'

demo/assets/js/app.js

@@ -1,15 +1,9 @@
-import Alpine from 'alpinejs'
 import 'phoenix_html'
 import * as Sentry from '@sentry/browser'
 import topbar from 'topbar'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
-
-/**
- * Alpine
- */
-window.Alpine = Alpine
-Alpine.start()
+import { Hooks as BackpexHooks } from 'backpex'
 
 /**
  * Sentry
@@ -27,84 +21,18 @@ window.addEventListener('phx:page-loading-start', _info => topbar.show(250))
 window.addEventListener('phx:page-loading-stop', _info => topbar.hide())
 
 /**
- * theme selector
+ * Theme Selector
  */
-
-const Hooks = {}
-
-// We want this to run as soon as possible to minimize
-// flashes with the old theme in some situations
-const storedTheme = window.localStorage.getItem('backpexTheme')
-if (storedTheme != null) {
-  document.documentElement.setAttribute('data-theme', storedTheme)
-}
-Hooks.BackpexThemeSelector = {
-  mounted () {
-    const form = document.querySelector('#backpex-theme-selector-form')
-    const storedTheme = window.localStorage.getItem('backpexTheme')
-
-    // Marking current theme as active
-    if (storedTheme != null) {
-      const activeThemeRadio = form.querySelector(
-        `input[name='theme-selector'][value='${storedTheme}']`
-      )
-      activeThemeRadio.checked = true
-    }
-
-    // Event listener that handles the theme changes and store
-    // the selected theme in the session and also in localStorage
-    window.addEventListener('backpex:theme-change', async (event) => {
-      const cookiePath = form.dataset.cookiePath
-      const selectedTheme = form.querySelector(
-        'input[name="theme-selector"]:checked'
-      )
-      if (selectedTheme) {
-        window.localStorage.setItem('backpexTheme', selectedTheme.value)
-        document.documentElement.setAttribute(
-          'data-theme',
-          selectedTheme.value
-        )
-        await fetch(cookiePath, {
-          body: `select_theme=${selectedTheme.value}`,
-          method: 'POST',
-          headers: {
-            'Content-type': 'application/x-www-form-urlencoded',
-            'x-csrf-token': csrfToken
-          }
-        })
-      }
-    })
-  }
-}
+BackpexHooks.BackpexThemeSelector.setStoredTheme()
 
 /**
  * phoenix_live_view
  */
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
 
 const liveSocket = new LiveSocket('/live', Socket, {
-  dom: {
-    onBeforeElUpdated (from, to) {
-      if (from._x_dataStack) {
-        window.Alpine.clone(from, to)
-      }
-    },
-    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)
-        }
-      }
-    }
-  },
-  params: {
-    _csrf_token: csrfToken
-  },
-  hooks: Hooks
+  params: { _csrf_token: csrfToken },
+  hooks: { ...BackpexHooks }
 })
 
 liveSocket.connect()

demo/assets/tailwind.config.js

@@ -51,7 +51,8 @@ module.exports = {
     'assets/js/**/*.js',
     'lib/*_web.ex',
     'lib/*_web/**/*.{ex,heex}',
-    '../lib/**/*.*ex'
+    '../lib/**/*.*ex',
+    '../assets/js/**/*.js'
   ],
   safelist: [
     'input'

demo/config/config.exs

@@ -46,7 +46,7 @@ config :esbuild,
   version: "0.24.2",
   default: [
     args:
-      ~w(assets/js/app.js --bundle --target=es2017 --outdir=priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(assets/js/app.js --bundle --target=es2017 --outdir=priv/static/assets --external:/fonts/* --external:/images/* --alias:backpex=/opt/app),
     cd: Path.expand("..", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

demo/lib/demo_web/live/category_live.ex

@@ -11,7 +11,8 @@ defmodule DemoWeb.CategoryLive do
       name: Demo.PubSub,
       topic: "categories",
       event_prefix: "category_"
-    ]
+    ],
+    init_order: %{by: :name, direction: :asc}
 
   @impl Backpex.LiveResource
   def singular_name, do: "Category"

demo/package.json

@@ -20,7 +20,6 @@
   },
   "devDependencies": {
     "@sentry/browser": "8.54.0",
-    "alpinejs": "3.14.8",
     "npm-run-all2": "7.0.2",
     "postcss": "8.5.1",
     "standard": "17.1.2",