djhtmx 1.2.8__tar.gz → 1.2.9__tar.gz

{djhtmx-1.2.8 → djhtmx-1.2.9}/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.9] - 2026-01-07
+
+### Added
+- **ScrollIntoView Command**: New command that scrolls elements into view with configurable behavior (`auto`, `smooth`, `instant`) and block alignment (`start`, `center`, `end`, `nearest`). Includes WebSocket and HTTP trigger support with strict Python typing via Literal types.
+
+### Changed
+- **Import Error Handling**: Import errors during HTMX module autodiscovery are no longer suppressed. This change improves error visibility and helps catch import issues in user code earlier. Previously, import errors were silently caught, which could hide configuration or dependency problems.
+- Refactored `django.js` to use modern JavaScript patterns (for...of loops, const declarations) for improved code quality and maintainability
+
 ## [1.2.8] - 2026-01-06
 
 ### Added

{djhtmx-1.2.8 → djhtmx-1.2.9}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: djhtmx
-Version: 1.2.8
+Version: 1.2.9
 Summary: Interactive UI Components for Django using HTMX
 Project-URL: Homepage, https://github.com/edelvalle/djhtmx
 Project-URL: Documentation, https://github.com/edelvalle/djhtmx#readme

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/__init__.py

@@ -1,4 +1,4 @@
 from .middleware import middleware
 
-__version__ = "1.2.8"
+__version__ = "1.2.9"
 __all__ = ("middleware",)

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/command_queue.py

@@ -16,6 +16,7 @@ from .component import (
     Open,
     Redirect,
     Render,
+    ScrollIntoView,
     Signal,
     SkipRender,
 )
@@ -86,6 +87,7 @@ class CommandQueue:
                     | Emit()
                     | SkipRender()
                     | Focus()
+                    | ScrollIntoView()
                     | Redirect()
                     | DispatchDOMEvent()
                     | Open()
@@ -139,7 +141,15 @@ class CommandQueue:
                     return 6, component.id, timestamp
                 else:
                     return 7, component.id, timestamp
-            case Focus() | Redirect() | DispatchDOMEvent() | Open() | ReplaceURL() | PushURL():
+            case (
+                Focus()
+                | ScrollIntoView()
+                | Redirect()
+                | DispatchDOMEvent()
+                | Open()
+                | ReplaceURL()
+                | PushURL()
+            ):
                 return 8, "", 0
             case _ as unreachable:
                 assert_never(unreachable)

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/component.py

@@ -89,6 +89,16 @@ class Focus:
     command: Literal["focus"] = "focus"
 
 
+@dataclass(slots=True)
+class ScrollIntoView:
+    "Scrolls the browser element that matches `selector` into view"
+
+    selector: str
+    behavior: Literal["auto", "smooth", "instant"] = "smooth"
+    block: Literal["start", "center", "end", "nearest"] = "center"
+    command: Literal["scroll_into_view"] = "scroll_into_view"
+
+
 @dataclass(slots=True)
 class Execute:
     component_id: str
@@ -126,34 +136,62 @@ class BuildAndRender:
 
     @classmethod
     def append(
-        cls, target_: str, component_: type[HtmxComponent], parent_id: str | None = None, **state
+        cls,
+        target_: str,
+        component_: type[HtmxComponent],
+        parent_id: str | None = None,
+        **state,
     ):
         return cls(
-            component=component_, state=state, oob=f"beforeend: {target_}", parent_id=parent_id
+            component=component_,
+            state=state,
+            oob=f"beforeend: {target_}",
+            parent_id=parent_id,
         )
 
     @classmethod
     def prepend(
-        cls, target_: str, component_: type[HtmxComponent], parent_id: str | None = None, **state
+        cls,
+        target_: str,
+        component_: type[HtmxComponent],
+        parent_id: str | None = None,
+        **state,
     ):
         return cls(
-            component=component_, state=state, oob=f"afterbegin: {target_}", parent_id=parent_id
+            component=component_,
+            state=state,
+            oob=f"afterbegin: {target_}",
+            parent_id=parent_id,
         )
 
     @classmethod
     def after(
-        cls, target_: str, component_: type[HtmxComponent], parent_id: str | None = None, **state
+        cls,
+        target_: str,
+        component_: type[HtmxComponent],
+        parent_id: str | None = None,
+        **state,
     ):
         return cls(
-            component=component_, state=state, oob=f"afterend: {target_}", parent_id=parent_id
+            component=component_,
+            state=state,
+            oob=f"afterend: {target_}",
+            parent_id=parent_id,
         )
 
     @classmethod
     def before(
-        cls, target_: str, component_: type[HtmxComponent], parent_id: str | None = None, **state
+        cls,
+        target_: str,
+        component_: type[HtmxComponent],
+        parent_id: str | None = None,
+        **state,
     ):
         return cls(
-            component=component_, state=state, oob=f"beforebegin: {target_}", parent_id=parent_id
+            component=component_,
+            state=state,
+            oob=f"beforebegin: {target_}",
+            parent_id=parent_id,
         )
 
     @classmethod
@@ -191,6 +229,7 @@ Command = (
     Destroy
     | Redirect
     | Focus
+    | ScrollIntoView
     | DispatchDOMEvent
     | SkipRender
     | BuildAndRender
@@ -249,7 +288,10 @@ def get_template(template: str) -> RenderFunction:  # pragma: no cover
         return cast(RenderFunction, _compose(loader.get_template(template).render, mark_safe))
     else:
         if (render := RENDER_FUNC.get(template)) is None:
-            render = cast(RenderFunction, _compose(loader.get_template(template).render, mark_safe))
+            render = cast(
+                RenderFunction,
+                _compose(loader.get_template(template).render, mark_safe),
+            )
             RENDER_FUNC[template] = render
         return render
 

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/consumer.py

@@ -6,7 +6,7 @@ from pydantic import BaseModel, TypeAdapter
 
 from . import json
 from .commands import PushURL, ReplaceURL, SendHtml
-from .component import Command, Destroy, DispatchDOMEvent, Focus, Open, Redirect
+from .component import Command, Destroy, DispatchDOMEvent, Focus, Open, Redirect, ScrollIntoView
 from .introspection import parse_request_data
 from .repo import Repository
 from .utils import get_params
@@ -58,6 +58,7 @@ class Consumer(AsyncJsonWebsocketConsumer):
                         Destroy()
                         | Redirect()
                         | Focus()
+                        | ScrollIntoView()
                         | DispatchDOMEvent()
                         | PushURL()
                         | Open()

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/repo.py

@@ -35,6 +35,7 @@ from .component import (
     Open,
     Redirect,
     Render,
+    ScrollIntoView,
     Signal,
     SkipRender,
     _get_query_patchers,
@@ -56,7 +57,15 @@ logger = logging.getLogger(__name__)
 
 
 ProcessedCommand = (
-    Destroy | Redirect | Open | Focus | DispatchDOMEvent | SendHtml | PushURL | ReplaceURL
+    Destroy
+    | Redirect
+    | Open
+    | Focus
+    | ScrollIntoView
+    | DispatchDOMEvent
+    | SendHtml
+    | PushURL
+    | ReplaceURL
 )
 
 
@@ -296,6 +305,7 @@ class Repository:
                 | PushURL()
                 | Redirect()
                 | Focus()
+                | ScrollIntoView()
                 | DispatchDOMEvent() as command
             ):
                 commands.processing_component_id = ""

djhtmx-1.2.9/src/djhtmx/static/htmx/django.js

@@ -0,0 +1,222 @@
+(() => {
+	// WebSocket Management
+	const sentComponents = new Set();
+
+	function sendRemovedComponents(event) {
+		const removedComponents = Array.from(sentComponents).filter(
+			(id) => !document.getElementById(id),
+		);
+		for (const id of removedComponents) {
+			sentComponents.delete(id);
+		}
+		if (removedComponents.length) {
+			event.detail.socketWrapper.send(
+				JSON.stringify({
+					type: "removed",
+					component_ids: removedComponents,
+				}),
+			);
+		}
+	}
+
+	function sendAddedComponents(event) {
+		const states = [];
+		const subscriptions = new Map();
+		const ids = new Set();
+
+		for (const element of Array.from(
+			document.querySelectorAll("[data-hx-state]"),
+		).filter((el) => !sentComponents.has(el.id))) {
+			const hxSubscriptions = element.dataset.hxSubscriptions;
+			if (hxSubscriptions !== undefined) {
+				subscriptions[element.id] = element.dataset.hxSubscriptions;
+			}
+			states.push(element.dataset.hxState);
+			ids.add(element.id);
+		}
+		for (const id of ids) {
+			sentComponents.add(id);
+		}
+
+		if (ids.size) {
+			event.detail.socketWrapper.send(
+				JSON.stringify({
+					type: "added",
+					states,
+					subscriptions,
+				}),
+			);
+		}
+	}
+
+	function removeHtmxIndicator() {
+		// remove indicator
+		for (const el of document.querySelectorAll(".htmx-request")) {
+			el.classList.remove("htmx-request");
+		}
+	}
+
+	document.addEventListener("htmx:wsOpen", (event) => {
+		console.log("OPEN", event);
+		sentComponents.clear();
+		removeHtmxIndicator();
+	});
+
+	document.addEventListener("htmx:wsClose", (event) => {
+		console.log("CLOSE", event);
+		sentComponents.clear();
+		removeHtmxIndicator();
+	});
+
+	document.addEventListener("htmx:wsConfigSend", (event) => {
+		// add indicator
+		const indicatorSelector = event.detail.elt
+			.closest("[hx-indicator]")
+			?.getAttribute("hx-indicator");
+		if (indicatorSelector) {
+			for (const el of document.querySelectorAll(indicatorSelector)) {
+				el.classList.add("htmx-request");
+			}
+		}
+
+		// send current state
+		sendRemovedComponents(event);
+		sendAddedComponents(event);
+
+		// enrich event message
+		event.detail.headers["HX-Component-Id"] =
+			event.detail.elt.closest("[data-hx-state]").id;
+		event.detail.headers["HX-Component-Handler"] =
+			event.detail.elt.getAttribute("ws-send");
+	});
+
+	document.addEventListener("htmx:wsBeforeMessage", (event) => {
+		removeHtmxIndicator();
+
+		// process message
+		if (event.detail.message.startsWith("{")) {
+			const commandData = JSON.parse(event.detail.message);
+			event.preventDefault();
+			const { command } = commandData;
+			switch (command) {
+				case "destroy": {
+					const { component_id } = commandData;
+					document.getElementById(component_id)?.remove();
+					break;
+				}
+				case "focus": {
+					const { selector } = commandData;
+					document.querySelector(selector)?.focus();
+					break;
+				}
+				case "scroll_into_view": {
+					const { selector, behavior = "smooth", block = "center" } = commandData;
+					document.querySelector(selector)?.scrollIntoView({
+						behavior,
+						block,
+					});
+					break;
+				}
+				case "redirect": {
+					const { url } = commandData;
+					location.assign(url);
+					break;
+				}
+				case "dispatch_event": {
+					const { target, detail, buubles, cancelable, composed } = commandData;
+					document.querySelector(target)?.dispatchEvent(
+						new CustomEvent(event, {
+							detail,
+							buubles,
+							cancelable,
+							composed,
+						}),
+					);
+					break;
+				}
+				case "send_state": {
+					const { component_id, state } = commandData;
+					const component = document.getElementById(component_id);
+					if (component) {
+						component.dataset.hxState = state;
+					}
+					break;
+				}
+				case "push_url": {
+					const { url } = commandData;
+					history.pushState({}, document.title, url);
+					break;
+				}
+
+				default:
+					console.error("Can't process command:", event.detail.message);
+					break;
+			}
+		}
+	});
+
+	document.addEventListener("hxDispatchDOMEvent", (event) => {
+		for (const {
+			event: eventName,
+			target,
+			detail,
+			bubbles,
+			cancelable,
+			composed,
+		} of event.detail.value) {
+			const el = document.querySelector(target);
+			if (el) {
+				// This setTimeout basically queues the dispatch of the event
+				// to avoid dispatching events within events handlers.
+				setTimeout(
+					() =>
+						el.dispatchEvent(
+							new CustomEvent(eventName, {
+								detail,
+								bubbles,
+								cancelable,
+								composed,
+							}),
+						),
+					0,
+				);
+			}
+		}
+	});
+
+	document.addEventListener("hxFocus", (event) => {
+		for (const selector of event.detail.value) {
+			document.querySelector(selector).focus();
+		}
+	});
+
+	document.addEventListener("hxScrollIntoView", (event) => {
+		for (const item of event.detail.value) {
+			const selector = typeof item === "string" ? item : item.selector;
+			const behavior = typeof item === "object" ? item.behavior || "smooth" : "smooth";
+			const block = typeof item === "object" ? item.block || "center" : "center";
+			document.querySelector(selector)?.scrollIntoView({
+				behavior,
+				block,
+			});
+		}
+	});
+
+	document.addEventListener("hxOpenURL", (event) => {
+		for (const { url, name, target, rel } of event.detail.value) {
+			const link = document.createElement("a");
+			link.href = url;
+			link.target = target || "_blank";
+			if (name) {
+				link.download = name;
+			}
+			if (rel) {
+				link.rel = rel;
+			}
+			link.click();
+		}
+	});
+})();
+// Local Variables:
+// js-indent-level: 4
+// End:

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/testing.py

@@ -13,7 +13,15 @@ from pygments.lexers import HtmlLexer
 
 from . import json
 from .commands import PushURL, ReplaceURL, SendHtml
-from .component import Destroy, DispatchDOMEvent, Focus, HtmxComponent, Open, Redirect
+from .component import (
+    Destroy,
+    DispatchDOMEvent,
+    Focus,
+    HtmxComponent,
+    Open,
+    Redirect,
+    ScrollIntoView,
+)
 from .introspection import parse_request_data
 from .repo import Repository, Session, signer
 from .utils import get_params
@@ -187,7 +195,7 @@ class Htmx:
                     self.path = parsed_url.path
                     self.query_string = parsed_url.query
 
-                case Focus() | DispatchDOMEvent():
+                case Focus() | ScrollIntoView() | DispatchDOMEvent():
                     pass
 
         if navigate_to_url:

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/urls.py

@@ -11,7 +11,16 @@ from django.utils.html import format_html
 from django.views.decorators.csrf import csrf_exempt
 
 from .commands import PushURL, ReplaceURL, SendHtml
-from .component import REGISTRY, Destroy, DispatchDOMEvent, Focus, Open, Redirect, Triggers
+from .component import (
+    REGISTRY,
+    Destroy,
+    DispatchDOMEvent,
+    Focus,
+    Open,
+    Redirect,
+    ScrollIntoView,
+    Triggers,
+)
 from .consumer import Consumer
 from .introspection import parse_request_data
 from .repo import Repository
@@ -53,6 +62,11 @@ def endpoint(request: HttpRequest, component_name: str, component_id: str, event
                     headers["HX-Redirect"] = url
                 case Focus(selector):
                     triggers.after_settle("hxFocus", selector)
+                case ScrollIntoView(selector, behavior, block):
+                    triggers.after_settle(
+                        "hxScrollIntoView",
+                        {"selector": selector, "behavior": behavior, "block": block},
+                    )
                 case Open(url, name, target, rel):
                     triggers.after_settle(
                         "hxOpenURL",

{djhtmx-1.2.8 → djhtmx-1.2.9}/src/djhtmx/utils.py

@@ -1,5 +1,5 @@
-import contextlib
 import importlib
+import logging
 import pkgutil
 import typing as t
 from urllib.parse import urlparse
@@ -129,17 +129,20 @@ def autodiscover_htmx_modules():
     - htmx.py files (like standard autodiscover_modules("htmx"))
     - All Python files under htmx/ directories in apps (recursively)
     """
-
-    def _import_modules_recursively(module_name):
-        """Recursively import a module and all its submodules."""
-        with contextlib.suppress(ImportError):
-            module = importlib.import_module(module_name)
-
-            # If this is a package, recursively import all modules in it
-            if hasattr(module, "__path__"):
-                for _finder, submodule_name, _is_pkg in pkgutil.iter_modules(module.__path__):
-                    _import_modules_recursively(f"{module_name}.{submodule_name}")
-
     for app_config in apps.get_app_configs():
-        # Import htmx module and all its submodules recursively
-        _import_modules_recursively(f"{app_config.name}.htmx")
+        module_name = f"{app_config.module.__name__}.htmx"
+        try:
+            module = importlib.import_module(module_name)
+        except ImportError:
+            logger.warning("Could not import %s", module_name)
+            continue
+        if hasattr(module, "__path__"):
+            # If it's a package, recursively walk it importing all modules and packages.
+            for info in pkgutil.walk_packages(module.__path__, prefix=module_name + "."):
+                if not info.ispkg:
+                    # `walk_packages` only imports packages, not modules; we need to import them
+                    # all.
+                    importlib.import_module(info.name)
+
+
+logger = logging.getLogger(__name__)

djhtmx-1.2.8/src/djhtmx/static/htmx/django.js

@@ -1,198 +0,0 @@
-(function () {
-    // WebSocket Management
-    let sentComponents = new Set();
-
-    function sendRemovedComponents(event) {
-        let removedComponents = Array.from(sentComponents).filter(
-            (id) => !document.getElementById(id),
-        );
-        removedComponents.forEach((id) => sentComponents.delete(id));
-        if (removedComponents.length) {
-            event.detail.socketWrapper.send(
-                JSON.stringify({
-                    type: "removed",
-                    component_ids: removedComponents,
-                }),
-            );
-        }
-    }
-
-    function sendAddedComponents(event) {
-        let states = [];
-        let subscriptions = new Map();
-        let ids = new Set();
-
-        Array.from(document.querySelectorAll("[data-hx-state]"))
-            .filter((el) => !sentComponents.has(el.id))
-            .forEach((element) => {
-                let hxSubscriptions = element.dataset.hxSubscriptions;
-                if (hxSubscriptions !== undefined) {
-                    subscriptions[element.id] = element.dataset.hxSubscriptions;
-                }
-                states.push(element.dataset.hxState);
-                ids.add(element.id);
-            });
-        ids.forEach((id) => sentComponents.add(id));
-
-        if (ids.size) {
-            event.detail.socketWrapper.send(
-                JSON.stringify({
-                    type: "added",
-                    states,
-                    subscriptions,
-                }),
-            );
-        }
-    }
-
-    function removeHtmxIndicator() {
-        // remove indicator
-        document
-            .querySelectorAll(".htmx-request")
-            .forEach((el) => el.classList.remove("htmx-request"));
-    }
-
-    document.addEventListener("htmx:wsOpen", (event) => {
-        console.log("OPEN", event);
-        sentComponents.clear();
-        removeHtmxIndicator();
-    });
-
-    document.addEventListener("htmx:wsClose", (event) => {
-        console.log("CLOSE", event);
-        sentComponents.clear();
-        removeHtmxIndicator();
-    });
-
-    document.addEventListener("htmx:wsConfigSend", (event) => {
-        // add indicator
-        let indicatorSelector = event.detail.elt
-            .closest("[hx-indicator]")
-            ?.getAttribute("hx-indicator");
-        if (indicatorSelector) {
-            document
-                .querySelectorAll(indicatorSelector)
-                .forEach((el) => el.classList.add("htmx-request"));
-        }
-
-        // send current state
-        sendRemovedComponents(event);
-        sendAddedComponents(event);
-
-        // enrich event message
-        event.detail.headers["HX-Component-Id"] =
-            event.detail.elt.closest("[data-hx-state]").id;
-        event.detail.headers["HX-Component-Handler"] =
-            event.detail.elt.getAttribute("ws-send");
-    });
-
-    document.addEventListener("htmx:wsBeforeMessage", (event) => {
-        removeHtmxIndicator();
-
-        // process message
-        if (event.detail.message.startsWith("{")) {
-            let commandData = JSON.parse(event.detail.message);
-            event.preventDefault();
-            let { command } = commandData;
-            switch (command) {
-                case "destroy": {
-                    let { component_id } = commandData;
-                    document.getElementById(component_id)?.remove();
-                    break;
-                }
-                case "focus": {
-                    let { selector } = commandData;
-                    document.querySelector(selector)?.focus();
-                    break;
-                }
-                case "redirect": {
-                    let { url } = commandData;
-                    location.assign(url);
-                    break;
-                }
-                case "dispatch_event": {
-                    let = { target, detail, buubles, cancelable, composed } =
-                        commandData;
-                    document.querySelector(target)?.dispatchEvent(
-                        new CustomEvent(event, {
-                            detail,
-                            buubles,
-                            cancelable,
-                            composed,
-                        }),
-                    );
-                    break;
-                }
-                case "send_state": {
-                    let { component_id, state } = commandData;
-                    let component = document.getElementById(component_id);
-                    if (component) {
-                        component.dataset.hxState = state;
-                    }
-                    break;
-                }
-                case "push_url": {
-                    let { url } = commandData;
-                    history.pushState({}, document.title, url);
-                    break;
-                }
-
-                default:
-                    console.error(
-                        "Can't process command:",
-                        event.detail.message,
-                    );
-                    break;
-            }
-        }
-    });
-
-    document.addEventListener("hxDispatchDOMEvent", (event) => {
-        event.detail.value.map(
-            ({ event, target, detail, bubbles, cancelable, composed }) => {
-                let el = document.querySelector(target);
-                if (typeof el != "undefined" && el != null) {
-                    // This setTimeout basically queues the dispatch of the event
-                    // to avoid dispatching events within events handlers.
-                    setTimeout(
-                        () =>
-                            el.dispatchEvent(
-                                new CustomEvent(event, {
-                                    detail,
-                                    bubbles,
-                                    cancelable,
-                                    composed,
-                                }),
-                            ),
-                        0,
-                    );
-                }
-            },
-        );
-    });
-
-    document.addEventListener("hxFocus", (event) => {
-        event.detail.value.map((selector) => {
-            document.querySelector(selector).focus();
-        });
-    });
-
-    document.addEventListener("hxOpenURL", (event) => {
-        event.detail.value.map(({ url, name, target, rel }) => {
-            const link = document.createElement('a');
-            link.href = url;
-            link.target = !!target ? target : '_blank';
-            if (name) {
-                link.download = name;
-            }
-            if (rel) {
-                link.rel = rel;
-            }
-            link.click();
-        });
-    });
-
-})();
-// Local Variables:
-// js-indent-level: 4
-// End: