Add compress_offline=True

Add preload and compress js/css

Update lock file

Update staticfiles

Add staticfile_finders

Makefile

@@ -18,6 +18,9 @@ tailwind:
 collectstatic:
 	cd ${SRC_DIR} && poetry run python manage.py collectstatic
 
+compress:
+	cd ${SRC_DIR} && poetry run python manage.py compress --force
+
 redis:
 	docker run --rm --name redis-server -p 6379:6379 -v ${PROJECT_DIR}/tmp:/data redis
 

pyproject.toml

@@ -17,6 +17,7 @@ django-environ = "^0.11.2"
 whitenoise = "^6.6.0"
 redis = "^5.0.1"
 gunicorn = "^21.2.0"
+django-compressor = "^4.4"
 
 [tool.poetry.group.dev.dependencies]
 black = "^23.7.0"

src/components/click_to_edit.py

@@ -51,7 +51,7 @@ class ClickToEditComponent(component.Component):
                 <label class="label">Email Address</label>
                 <input class="disabled-input" type="email" value="{{ email }}" disabled>
             </div>
-            <button class="btn-primary" hx-get="{% url 'contact_edit' id=id %}">Edit contact</button>
+            <button class="btn-primary" hx-get="{% url 'contact_edit' id=id %}" preload>Edit contact</button>
         </div>
         {% endif %}
     """

src/components/click_to_load/tbody.py

@@ -21,7 +21,8 @@ class TBodyClickToLoadComponent(component.Component):
                             class='btn-primary' 
                             hx-get="{% url 'tbody_click_to_load' page=page_obj.next_page_number %}"
                             hx-target="#replaceMe"
-                            hx-swap="outerHTML">
+                            hx-swap="outerHTML"
+                            preload>
                             Load more
                         </button>
                     </td>

src/config/settings.py

@@ -55,6 +55,7 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "whitenoise.runserver_nostatic",
+    "compressor",
     "django.contrib.staticfiles",
     "django_components",
     "django_htmx",
@@ -162,12 +163,18 @@
 
 
 # whitenoise config
+STATIC_ROOT = BASE_DIR / "staticfiles"
 STATICFILES_DIRS = [
     BASE_DIR / "components",
     BASE_DIR / "static/output",
     BASE_DIR / "templates",
 ]
-STATIC_ROOT = BASE_DIR / "staticfiles"
+STATICFILES_FINDERS = (
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
+)
+
 STORAGES = {
     "default": {
         "BACKEND": "example.storages.ExtendedFileSystemStorage",
@@ -188,3 +195,5 @@
         },
     }
 }
+
+COMPRESS_OFFLINE = True

src/static/output/preload.js

@@ -0,0 +1,147 @@
+// This adds the "preload" extension to htmx.  By default, this will 
+// preload the targets of any tags with `href` or `hx-get` attributes 
+// if they also have a `preload` attribute as well.  See documentation
+// for more details
+htmx.defineExtension("preload", {
+
+	onEvent: function(name, event) {
+
+		// Only take actions on "htmx:afterProcessNode"
+		if (name !== "htmx:afterProcessNode") {
+			return;
+		}
+
+		// SOME HELPER FUNCTIONS WE'LL NEED ALONG THE WAY
+
+		// attr gets the closest non-empty value from the attribute.
+		var attr = function(node, property) {
+			if (node == undefined) {return undefined;}
+			return node.getAttribute(property) || node.getAttribute("data-" + property) || attr(node.parentElement, property)
+		}
+
+		// load handles the actual HTTP fetch, and uses htmx.ajax in cases where we're 
+		// preloading an htmx resource (this sends the same HTTP headers as a regular htmx request)
+		var load = function(node) {
+
+			// Called after a successful AJAX request, to mark the
+			// content as loaded (and prevent additional AJAX calls.)
+			var done = function(html) {
+				if (!node.preloadAlways) {
+					node.preloadState = "DONE"
+				}
+
+				if (attr(node, "preload-images") == "true") {
+					document.createElement("div").innerHTML = html // create and populate a node to load linked resources, too.
+				}
+			}
+
+			return function() {
+
+				// If this value has already been loaded, then do not try again.
+				if (node.preloadState !== "READY") {
+					return;
+				}
+
+				// Special handling for HX-GET - use built-in htmx.ajax function
+				// so that headers match other htmx requests, then set 
+				// node.preloadState = TRUE so that requests are not duplicated
+				// in the future
+				var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get")
+				if (hxGet) {
+					htmx.ajax("GET", hxGet, {
+						source: node,
+						handler:function(elt, info) {
+							done(info.xhr.responseText);
+						}
+					});
+					return;
+				}
+
+				// Otherwise, perform a standard xhr request, then set 
+				// node.preloadState = TRUE so that requests are not duplicated 
+				// in the future.
+				if (node.getAttribute("href")) {
+					var r = new XMLHttpRequest();
+					r.open("GET", node.getAttribute("href"));
+					r.onload = function() {done(r.responseText);};
+					r.send();
+					return;
+				}
+			}
+		}
+
+		// This function processes a specific node and sets up event handlers.
+		// We'll search for nodes and use it below.
+		var init = function(node) {
+
+			// If this node DOES NOT include a "GET" transaction, then there's nothing to do here.
+			if (node.getAttribute("href") + node.getAttribute("hx-get") + node.getAttribute("data-hx-get") == "") {
+				return;
+			}
+
+			// Guarantee that we only initialize each node once.
+			if (node.preloadState !== undefined) {
+				return;
+			}
+
+			// Get event name from config.
+			var on = attr(node, "preload") || "mousedown"
+			const always = on.indexOf("always") !== -1
+			if (always) {
+				on = on.replace('always', '').trim()
+			}
+
+			// FALL THROUGH to here means we need to add an EventListener
+
+			// Apply the listener to the node
+			node.addEventListener(on, function(evt) {
+				if (node.preloadState === "PAUSE") { // Only add one event listener
+					node.preloadState = "READY"; // Required for the `load` function to trigger
+
+					// Special handling for "mouseover" events.  Wait 100ms before triggering load.
+					if (on === "mouseover") {
+						window.setTimeout(load(node), 100);
+					} else {
+						load(node)() // all other events trigger immediately.
+					}
+				}
+			})
+
+			// Special handling for certain built-in event handlers
+			switch (on) {
+
+				case "mouseover":
+					// Mirror `touchstart` events (fires immediately)
+					node.addEventListener("touchstart", load(node));
+
+					// WHhen the mouse leaves, immediately disable the preload
+					node.addEventListener("mouseout", function(evt) {
+						if ((evt.target === node) && (node.preloadState === "READY")) {
+							node.preloadState = "PAUSE";
+						}
+					})
+					break;
+
+				case "mousedown":
+					 // Mirror `touchstart` events (fires immediately)
+					node.addEventListener("touchstart", load(node));
+					break;
+			}
+
+			// Mark the node as ready to run.
+			node.preloadState = "PAUSE";
+			node.preloadAlways = always;
+			htmx.trigger(node, "preload:init") // This event can be used to load content immediately.
+		}
+
+		// Search for all child nodes that have a "preload" attribute
+		event.target.querySelectorAll("[preload]").forEach(function(node) {
+
+			// Initialize the node with the "preload" attribute
+			init(node)
+
+			// Initialize all child elements that are anchors or have `hx-get` (use with care)
+			node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init)
+		})
+	}
+})

src/staticfiles/CACHE/css/output.685cabbb69df.css

@@ -0,0 +1 @@
+tr.htmx-swapping td{opacity:0;transition:opacity 1s ease-out}

src/staticfiles/CACHE/js/output.41b805ea7ac0.js

@@ -0,0 +1 @@
+;

src/staticfiles/CACHE/js/output.76a70af724a0.js

@@ -0,0 +1,20 @@
+htmx.defineExtension("preload",{onEvent:function(name,event){if(name!=="htmx:afterProcessNode"){return;}
+var attr=function(node,property){if(node==undefined){return undefined;}
+return node.getAttribute(property)||node.getAttribute("data-"+property)||attr(node.parentElement,property)}
+var load=function(node){var done=function(html){if(!node.preloadAlways){node.preloadState="DONE"}
+if(attr(node,"preload-images")=="true"){document.createElement("div").innerHTML=html}}
+return function(){if(node.preloadState!=="READY"){return;}
+var hxGet=node.getAttribute("hx-get")||node.getAttribute("data-hx-get")
+if(hxGet){htmx.ajax("GET",hxGet,{source:node,handler:function(elt,info){done(info.xhr.responseText);}});return;}
+if(node.getAttribute("href")){var r=new XMLHttpRequest();r.open("GET",node.getAttribute("href"));r.onload=function(){done(r.responseText);};r.send();return;}}}
+var init=function(node){if(node.getAttribute("href")+node.getAttribute("hx-get")+node.getAttribute("data-hx-get")==""){return;}
+if(node.preloadState!==undefined){return;}
+var on=attr(node,"preload")||"mousedown"
+const always=on.indexOf("always")!==-1
+if(always){on=on.replace('always','').trim()}
+node.addEventListener(on,function(evt){if(node.preloadState==="PAUSE"){node.preloadState="READY";if(on==="mouseover"){window.setTimeout(load(node),100);}else{load(node)()}}})
+switch(on){case"mouseover":node.addEventListener("touchstart",load(node));node.addEventListener("mouseout",function(evt){if((evt.target===node)&&(node.preloadState==="READY")){node.preloadState="PAUSE";}})
+break;case"mousedown":node.addEventListener("touchstart",load(node));break;}
+node.preloadState="PAUSE";node.preloadAlways=always;htmx.trigger(node,"preload:init")}
+event.target.querySelectorAll("[preload]").forEach(function(node){init(node)
+node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init)})}});