update onload to always be called when element gets rendered again

cli/htmgo/watcher.go

@@ -42,11 +42,12 @@ func startWatcher(cb func(version string, file []*fsnotify.Event)) {
 				}
 
 				if event.Has(fsnotify.Remove) {
-					err = watcher.Remove(event.Name)
+					info, err := os.Stat(event.Name)
 					if err != nil {
-						slog.Error("Error removing directory from watcher:", slog.String("path", event.Name), slog.String("error", err.Error()))
-					} else {
-						slog.Debug("Stopped watching directory:", slog.String("path", event.Name))
+						continue
+					}
+					if info.IsDir() {
+						_ = watcher.Remove(event.Name)
 					}
 				}
 

examples/hackernews/partials/sidebar.go

@@ -3,7 +3,6 @@ package partials
 import (
 	"fmt"
 	"github.com/maddalax/htmgo/framework/h"
-	"github.com/maddalax/htmgo/framework/hx"
 	"hackernews/components"
 	"hackernews/internal/news"
 	"hackernews/internal/parse"
@@ -11,7 +10,6 @@ import (
 	"time"
 )
 
-// @lang js
 var ScrollJs = `
 	const scrollContainer = self;
     let isDown = false;
@@ -101,8 +99,7 @@ func SidebarTitle(defaultCategory string) *h.Element {
 			h.Text("Hacker News"),
 		),
 		h.Div(
-			h.OnEvent(hx.LoadDomEvent, h.EvalJs(ScrollJs)),
-			h.OnEvent(hx.LoadEvent, h.EvalJs(ScrollJs)),
+			h.OnLoad(h.EvalJs(ScrollJs)),
 			h.Class("scroll-container mt-2 flex gap-1 no-scrollbar overflow-y-hidden whitespace-nowrap overflow-x-auto"),
 			h.List(news.Categories, func(item news.Category, index int) *h.Element {
 				return CategoryBadge(defaultCategory, item)

framework/assets/js/htmgo.ts

@@ -8,22 +8,6 @@ import "./htmxextensions/livereload"
 import "./htmxextensions/htmgo";
 import "./htmxextensions/sse"
 
-/**
- * Browser doesn't support onload for all elements, so we need to manually trigger it
- * this is useful for locality of behavior
- */
-window.onload = function() {
-  const ignored = ['SCRIPT', 'LINK', 'STYLE', 'META', 'BASE', 'TITLE', 'HEAD', 'HTML', 'BODY'];
-  for (let element of Array.from(document.querySelectorAll(`[onload]`))) {
-    if(element != null && element instanceof HTMLElement) {
-      if(ignored.includes(element.tagName)) {
-         continue
-      }
-      element.onload!(new Event("load"));
-    }
-  }
-}
-
 // @ts-ignore
 window.htmx = htmx;
 

framework/assets/js/htmxextensions/htmgo.ts

@@ -8,9 +8,30 @@ htmx.defineExtension("htmgo", {
        if(name === "htmx:beforeCleanupElement" && evt.target) {
            removeAssociatedScripts(evt.target as HTMLElement);
        }
+       if(name === "htmx:load" && evt.target) {
+          invokeOnLoad(evt.target as HTMLElement);
+       }
     },
 });
 
+/**
+ * Browser doesn't support onload for all elements, so we need to manually trigger it
+ * this is useful for locality of behavior
+ */
+function invokeOnLoad(element : Element) {
+    if(element == null || !(element instanceof HTMLElement)) {
+        return
+    }
+    const ignored = ['SCRIPT', 'LINK', 'STYLE', 'META', 'BASE', 'TITLE', 'HEAD', 'HTML', 'BODY'];
+    if(!ignored.includes(element.tagName)) {
+        if(element.hasAttribute("onload")) {
+            element.onload!(new Event("load"));
+        }
+    }
+    // check its children
+    element.querySelectorAll('[onload]').forEach(invokeOnLoad)
+}
+
 export function removeAssociatedScripts(element: HTMLElement) {
    const attributes = Array.from(element.attributes)
     for (let attribute of attributes) {

framework/h/lifecycle.go

@@ -51,6 +51,7 @@ func (l *LifeCycle) OnEvent(event hx.Event, cmd ...Command) *LifeCycle {
 	return l
 }
 
+// OnLoad This will work on any element because of the htmgo htmx extension to trigger it, instead of the browser.
 func OnLoad(cmd ...Command) *LifeCycle {
 	return NewLifeCycle().OnEvent(hx.LoadDomEvent, cmd...)
 }

framework/hx/htmx.go

@@ -86,7 +86,6 @@ const (
 	HistoryCacheMissLoadEvent  Event = "htmx:historyCacheMissLoad"
 	HistoryRestoreEvent        Event = "htmx:historyRestore"
 	BeforeHistorySaveEvent     Event = "htmx:beforeHistorySave"
-	LoadEvent                  Event = "htmx:load"
 	NoSSESourceErrorEvent      Event = "htmx:noSSESourceError"
 	OnLoadErrorEvent           Event = "htmx:onLoadError"
 	OobAfterSwapEvent          Event = "htmx:oobAfterSwap"
@@ -131,6 +130,7 @@ const (
 	KeyPressEvent    Event = "onkeypress"
 	SubmitEvent      Event = "onsubmit"
 	LoadDomEvent     Event = "onload"
+	LoadEvent        Event = "onload"
 	UnloadEvent      Event = "onunload"
 	ResizeEvent      Event = "onresize"
 	ScrollEvent      Event = "onscroll"