idiomorph stuff (hopefully this dont break)

splashcat-ink · Nov 30, 2023 · 89c472e · 89c472e
1 parent 7fd8118
commit 89c472e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 36 deletions.
diff --git a/assistant/templates/assistant/htmx/messages_list.html b/assistant/templates/assistant/htmx/messages_list.html
@@ -2,7 +2,7 @@
 {% load static %}
 {% load markdownify %}
 <div class="flex flex-col gap-2" hx-get="{% url 'assistant:get_thread_messages' thread.id %}"
-     hx-trigger="load delay:5s" hx-swap="outerHTML" id="messages-list" hx-indicator="#htmx-request-indicator"
+     hx-trigger="load delay:5s" hx-swap="morph:outerHTML" id="messages-list" hx-indicator="#htmx-request-indicator"
      hx-vals='{"isDisablingInput": "{{ message_sending_disabled }}"}'>
     {% for message in thread_messages %}
         <div class="w-full rounded bg-gray-800/90 p-4 flex flex-row gap-2 overflow-x-auto">

diff --git a/assistant/templates/assistant/view_thread.html b/assistant/templates/assistant/view_thread.html
@@ -5,7 +5,7 @@ <h1 class="text-2xl font-splatoon1">
         {% block title %}Viewing Thread from {{ thread.created_date }}{% endblock %}
     </h1>
 
-    <div class="flex flex-col gap-2" id="entire-thread-container">
+    <div class="flex flex-col gap-2" id="entire-thread-container" hx-ext="morph">
         {% include 'assistant/htmx/thread_container.html' %}
     </div>
 

diff --git a/assistant/views.py b/assistant/views.py
@@ -124,7 +124,9 @@ def get_thread_messages(request, thread_id):
                            'message_sending_disabled': not is_currently_done, })
 
         django_htmx.http.retarget(response, '#entire-thread-container')
-        django_htmx.http.reswap(response, 'innerHTML')
+        # noinspection PyTypeChecker
+        # morph:innerHTML is allowed, just part of an extension
+        django_htmx.http.reswap(response, 'morph:innerHTML')
 
         return response
 

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,49 +1,65 @@
 // Global JS ran on every page
 import * as htmx from "htmx.org";
 import {browserInit as initHyperscript} from "hyperscript.org";
+import Idiomorph from "idiomorph";
 
 initHyperscript();
 window.htmx = htmx;
 
+// copied from idiomorph/dist/idiomorh-ext.js
+htmx.defineExtension('morph', {
+	isInlineSwap: function (swapStyle) {
+		return swapStyle === 'morph';
+	},
+	handleSwap: function (swapStyle, target, fragment) {
+		if (swapStyle === 'morph' || swapStyle === 'morph:outerHTML') {
+			return Idiomorph.morph(target, fragment.children);
+		} else if (swapStyle === 'morph:innerHTML') {
+			return Idiomorph.morph(target, fragment.children, {morphStyle: 'innerHTML'});
+		}
+	}
+});
+
+
 async function webShare(url) {
-    if (navigator.share) {
-        try {
-            await navigator.share({
-                url,
-            });
-        } catch (err) {
-            console.log(err);
-        }
-    }
+	if (navigator.share) {
+		try {
+			await navigator.share({
+				url,
+			});
+		} catch (err) {
+			console.log(err);
+		}
+	}
 }
 
 async function copyToClipboard(text) {
-    try {
-        await navigator.clipboard.writeText(text);
-    } catch (err) {
-        console.error(err.name, err.message);
-    }
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch (err) {
+		console.error(err.name, err.message);
+	}
 }
 
 const shareButtons = document.querySelectorAll("button.share-button");
 for (const button of shareButtons) {
-    if (button.dataset.shareType === "webShare") {
-        if (!navigator.share) {
-            button.style.display = "none";
-        }
-        button.addEventListener("click", (event) => {
-            event.preventDefault();
-            window.plausible('Share', {props: {type: button.dataset.contentType, shareType: button.dataset.shareType}});
-            webShare(button.dataset.url);
-        });
-    } else if (button.dataset.shareType === "clipboard") {
-        button.addEventListener("click", async (event) => {
-            event.preventDefault();
-            window.plausible('Share', {props: {type: button.dataset.contentType, shareType: button.dataset.shareType}});
-            await copyToClipboard(button.dataset.url);
-            button.classList.add("copy-tooltipped");
-        });
-        button.addEventListener("mouseleave", () => button.classList.remove("copy-tooltipped"));
-        button.addEventListener("blur", () => button.classList.remove("copy-tooltipped"));
-    }
+	if (button.dataset.shareType === "webShare") {
+		if (!navigator.share) {
+			button.style.display = "none";
+		}
+		button.addEventListener("click", (event) => {
+			event.preventDefault();
+			window.plausible('Share', {props: {type: button.dataset.contentType, shareType: button.dataset.shareType}});
+			webShare(button.dataset.url);
+		});
+	} else if (button.dataset.shareType === "clipboard") {
+		button.addEventListener("click", async (event) => {
+			event.preventDefault();
+			window.plausible('Share', {props: {type: button.dataset.contentType, shareType: button.dataset.shareType}});
+			await copyToClipboard(button.dataset.url);
+			button.classList.add("copy-tooltipped");
+		});
+		button.addEventListener("mouseleave", () => button.classList.remove("copy-tooltipped"));
+		button.addEventListener("blur", () => button.classList.remove("copy-tooltipped"));
+	}
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "autoprefixer": "^10.4.14",
     "htmx.org": "^1.9.2",
     "hyperscript.org": "^0.9.8",
+    "idiomorph": "github:rzane/idiomorph#commonjs",
     "tailwindcss": "^3.3.1"
   },
   "devDependencies": {