Complete wip: New Application Architecture

Add support for client side routing and updating without loading the AppShell

index.tsx

@@ -11,8 +11,8 @@ const index = new Elysia()
     console.log(`Request ${request.method} ${request.url}`);
   })
   .onAfterHandle(({ request, responseValue }) => {
-    if (request.headers.get("hx-request") === "true") {
-      return responseValue; // Return the <main> element if the request is an HTMX request
+    if (request.headers.get("shell-loaded") === "true") {
+      return responseValue; // Return the <main> element if the AppShell has already been loaded
     }
     return AppShell(responseValue); // Return the <main> element wrapped by the AppShell
   })

src/frontend/blog.tsx

@@ -4,6 +4,7 @@ export function Blog() {
     return (
         <main>
             <h1>Blog</h1>
+            <a href="/">Home</a>
         </main>
     )
 }

src/frontend/home.tsx

@@ -4,6 +4,7 @@ export function Home() {
     return (
         <main>
             <h1>Home</h1>
+            <a href="/blog">Blog</a>
         </main>
     )
 }

src/public/head.ts

@@ -9,4 +9,3 @@
         logPageInfo();
     }
 })();
-

src/public/onLoad.ts

@@ -1,16 +1,43 @@
 // Client-side script that runs on page load
 // Example: TypeScript with type annotations
-(() => {
-    const setupPage = (): void => {
-        const links: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('a');
-        console.log(`Found ${links.length} links on the page`);
-    };
-    
-    // Run setup when DOM is ready
-    if (document.readyState !== 'loading') {
-        setupPage();
-    } else {
-        document.addEventListener('DOMContentLoaded', setupPage);
-    }
-})();
 
+async function loadContent(url: string) {
+    const response = await fetch(url, {
+        headers: {
+            'shell-loaded': 'true'
+        }
+    });
+    const html = await response.text();
+    const mainElement = document.querySelector('main');
+    if (mainElement) {
+        mainElement.outerHTML = html;
+        // Re-attach handlers to new links after content swap
+        attachLinkHandlers();
+    }
+}
+
+function attachLinkHandlers() {
+    const links: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('a');
+    console.log('Found links:', links.length);
+    
+    links.forEach(link => {
+        console.log('Attaching listener to:', link.href);
+        link.onclick = async (e) => {
+            console.log('clicked', link.href);
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            window.history.pushState({}, '', link.href);
+            await loadContent(link.href);
+        }
+    });
+}
+
+// Listen for back/forward button clicks
+window.addEventListener('popstate', async (event) => {
+    await loadContent(window.location.href);
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    attachLinkHandlers();
+});