From 2a96034fcab66fe904d94d21ae577b7106c277cd Mon Sep 17 00:00:00 2001 From: schreifuchs Date: Tue, 29 Sep 2026 11:03:38 +0200 Subject: [PATCH] chore(htmx): upgrade htmx to v4 --- Dockerfile | 2 +- go.mod | 2 +- package.json | 4 +- pnpm-lock.yaml | 31 ++------ scripts/build.mjs | 4 +- web/components/modal.templ | 9 ++- web/layouts/base.templ | 11 +-- web/pages/gallery.templ | 4 +- web/pages/index.templ | 3 +- web/src/js/preload-links.js | 109 ++++++++++++++++------------- web/static/css/output.css | 2 +- web/static/js/head-support.min.js | 1 - web/static/js/htmx.min.js | 2 +- web/static/js/hx-head.min.js | 1 + web/static/js/hx-preload.min.js | 1 + web/static/js/preload-links.min.js | 2 +- web/static/js/preload.min.js | 1 - 17 files changed, 94 insertions(+), 95 deletions(-) delete mode 100644 web/static/js/head-support.min.js create mode 100644 web/static/js/hx-head.min.js create mode 100644 web/static/js/hx-preload.min.js delete mode 100644 web/static/js/preload.min.js diff --git a/Dockerfile b/Dockerfile index 04dac9e..f9ad427 100644 --- a/Dockerfile +++ b/Dockerfile @@ -26,7 +26,7 @@ COPY . . # Copy built frontend assets from the previous stage COPY --from=frontend-builder /app/web/static/css/output.css ./web/static/css/ -COPY --from=frontend-builder /app/web/static/js/htmx.min.js ./web/static/js/ +COPY --from=frontend-builder /app/web/static/js/ ./web/static/js/ # Generate templ files using the tool defined in go.mod RUN go tool templ generate diff --git a/go.mod b/go.mod index 252bfa3..b15222c 100644 --- a/go.mod +++ b/go.mod @@ -5,6 +5,7 @@ go 1.26 tool github.com/a-h/templ/cmd/templ require ( + github.com/InfinityTools/go-binpack2d v1.0.0 github.com/a-h/templ v0.3.977 github.com/alicebob/miniredis/v2 v2.36.1 github.com/gomarkdown/markdown v0.0.0-20260217112301-37c66b85d6ab @@ -18,7 +19,6 @@ require ( ) require ( - github.com/InfinityTools/go-binpack2d v1.0.0 // indirect github.com/a-h/parse v0.0.0-20250122154542-74294addb73e // indirect github.com/andybalholm/brotli v1.1.0 // indirect github.com/cenkalti/backoff/v4 v4.3.0 // indirect diff --git a/package.json b/package.json index 781bc6b..74932b0 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,6 @@ "tailwindcss": "^4.1.18" }, "dependencies": { - "htmx-ext-head-support": "^2.0.5", - "htmx-ext-preload": "^2.1.2", - "htmx.org": "^2.0.8" + "htmx.org": "^4.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3f54a1f..999e31c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,15 +8,9 @@ importers: .: dependencies: - htmx-ext-head-support: - specifier: ^2.0.5 - version: 2.0.5 - htmx-ext-preload: - specifier: ^2.1.2 - version: 2.1.2 htmx.org: - specifier: ^2.0.8 - version: 2.0.8 + specifier: ^4.0.0 + version: 4.0.0 devDependencies: '@tailwindcss/cli': specifier: ^4.1.18 @@ -447,14 +441,9 @@ packages: graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} - htmx-ext-head-support@2.0.5: - resolution: {integrity: sha512-fTzqnCw7OnMijiS48CCBFBHTuOMvycbX0nEFRL0lkRxyu5DFWX90IV1SwXpQ92fJf02IzkXcRNyjXn3j0QtYxA==} - - htmx-ext-preload@2.1.2: - resolution: {integrity: sha512-foD06XAITUUQApCUQnPexyJ6B7+4vFGMQ+t42unTVTGRu/CYHdAAt6oHg7eekPHT7NRnbM5hjnGVKtClryPabg==} - - htmx.org@2.0.8: - resolution: {integrity: sha512-fm297iru0iWsNJlBrjvtN7V9zjaxd+69Oqjh4F/Vq9Wwi2kFisLcrLCiv5oBX0KLfOX/zG8AUo9ROMU5XUB44Q==} + htmx.org@4.0.0: + resolution: {integrity: sha512-T/171FUY93Kdfp8t+DnHdk45QvKRiBhVhhrwSzrXgUi4pHKvhp77dUA/qg8FAjsFWPIHNbmUuIdCrcVHuiZWng==} + hasBin: true is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} @@ -900,15 +889,7 @@ snapshots: graceful-fs@4.2.11: {} - htmx-ext-head-support@2.0.5: - dependencies: - htmx.org: 2.0.8 - - htmx-ext-preload@2.1.2: - dependencies: - htmx.org: 2.0.8 - - htmx.org@2.0.8: {} + htmx.org@4.0.0: {} is-extglob@2.1.1: {} diff --git a/scripts/build.mjs b/scripts/build.mjs index 2ef0020..44d7dc5 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -4,8 +4,8 @@ import path from "node:path"; const filesToCopy = [ "node_modules/htmx.org/dist/htmx.min.js", - "node_modules/htmx-ext-preload/dist/preload.min.js", - "node_modules/htmx-ext-head-support/dist/head-support.min.js", + "node_modules/htmx.org/dist/ext/hx-preload.min.js", + "node_modules/htmx.org/dist/ext/hx-head.min.js", ]; const filesToMinifyRoot = "web/src/js"; diff --git a/web/components/modal.templ b/web/components/modal.templ index 05c2010..99ea6ad 100644 --- a/web/components/modal.templ +++ b/web/components/modal.templ @@ -6,11 +6,18 @@ package components // innerHTML would replace the wrapper below (centering + close button) and // break the layout. Content is swapped into the inner element with id // "-content" instead. +// +// In htmx 4 "htmx:after:swap" fires on the requesting element, which lives +// outside this dialog (e.g. gallery grid buttons). The listener is therefore +// attached document-wide via the bare hx-on form with "from:body" (the +// hx-on: form cannot carry trigger specs: attribute names may not +// contain spaces) and guarded by ctx.target so only swaps into this dialog's +// content open it. templ Modal(id string) {