Execute registered JavaScript after htmx settles

putyourlightson · Aug 20, 2024 · 00ba54d · 00ba54d
1 parent ac6bd8a
commit 00ba54d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Changed
 
 - Components no longer render markup added via `{% html %}`, `{% css %}` and `{% js %}` tags during Sprig requests.
+- The `sprig.registerJs(js)` function now executes the registered JavaScript after htmx settles.
 
 ## 3.3.2 - 2024-08-12
 

diff --git a/src/services/RequestsService.php b/src/services/RequestsService.php
@@ -131,9 +131,15 @@ public function getRegisteredHtml(): string
 
         // Append registered JS to the `beforeend:body` HTML block.
         if (!empty($this->js)) {
-            $content = Html::script(implode('', $this->js));
+            // Execute the JS after htmx settles, at most once.
+            $js = implode(PHP_EOL, $this->js);
+            $content = <<<JS
+                document.addEventListener('htmx:afterSettle', function() {
+                    $js
+                }, { once: true });
+            JS;
             $this->html['beforeend:body'] = $this->html['beforeend:body'] ?? [];
-            $this->html['beforeend:body'][] = $content;
+            $this->html['beforeend:body'][] = Html::script($content);
         }
 
         foreach ($this->html as $swapSelector => $blocks) {