xpine 0.0.32 → 0.0.34

package/README.md

@@ -54,13 +54,16 @@ setupEnv also supports AWS secrets manager. Simply add SECRETS_NAME=your_aws_sec
   - enables cross-origin spa navigation requests (untested)
 
 #### Custom events
-  - spa:updatePageContent
+  - spa-update-page-content
     - sent when the page content has update
-  - spa:updatePageURL
-    - send when the page URL has update
+  - spa-update-page-url
+    - sent when the page URL has update
+  - spa-link-click
+    - sent when link initially gets clicked and when link is done updating content
+    - the "state" value in the event detail will be "start" or "end"
 
 #### Custom scripts for certain pages
 
 1. Add script to src/public/scripts/pages/your_script.ts
 2. Import script into page HTML (e.g. <script src="/scripts/pages/your_script.ts">)
-3. To unload event listeners, use `window.addEventListener('spa:updatePageURL', () => { remove event listeners here})` in the code
+3. To unload event listeners, use `window.addEventListener('spa-update-page-url', () => { remove event listeners here})` in the code

package/TODO

@@ -0,0 +1 @@
+- spa:updatePageURL should return all available information about the URL instead of just the href it's going to

package/dist/src/static/spa.js

@@ -9,11 +9,21 @@ async function updatePageOnLinkClick(e) {
   e.preventDefault();
   const targetHref = e?.target?.closest("a")?.getAttribute("href");
   if (!targetHref) return;
-  if (isExternalURL(targetHref) && !e?.target?.getAttribute("data-spa-crossorigin")) return;
+  const isExternal = isExternalURL(targetHref);
+  if (isExternal && !e?.target?.getAttribute("data-spa-crossorigin")) return;
   e.preventDefault();
   try {
+    if (targetHref === window.location.href) return;
+    const newURL = isExternal ? safeParseURL(targetHref) : safeParseURL(window.location.href);
+    const startEvent = new CustomEvent("spa-link-click", {
+      detail: {
+        state: "start",
+        href: targetHref,
+        url: newURL
+      }
+    });
+    window.dispatchEvent(startEvent);
     await getNewPageContent(targetHref);
-    if (targetHref === window.location.pathname) return;
     window.history.pushState(
       {
         type: "link-click",
@@ -22,12 +32,21 @@ async function updatePageOnLinkClick(e) {
       "",
       targetHref
     );
-    const event = new CustomEvent("spa:updatePageURL", {
+    const event = new CustomEvent("spa-update-page-url", {
       detail: {
-        href: targetHref
+        href: targetHref,
+        url: newURL
       }
     });
     window.dispatchEvent(event);
+    const endEvent = new CustomEvent("spa-link-click", {
+      detail: {
+        state: "end",
+        href: targetHref,
+        url: newURL
+      }
+    });
+    window.dispatchEvent(endEvent);
   } catch (err) {
     console.error(err);
   }
@@ -60,9 +79,10 @@ async function getNewPageContent(href) {
     replaceDocumentContentsWithLinkResponse();
     const newDocumentRoot = document.body.querySelector("#xpine-root");
     for (const script of newScripts) newDocumentRoot.appendChild(script);
-    const event = new CustomEvent("spa:updatePageContent", {
+    const event = new CustomEvent("spa-update-page-content", {
       detail: {
-        href
+        href,
+        url: safeParseURL(res.url)
       }
     });
     window.dispatchEvent(event);
@@ -170,5 +190,12 @@ function isExternalURL(url) {
     return false;
   }
 }
+function safeParseURL(url) {
+  try {
+    return new URL(url);
+  } catch (err) {
+    return {};
+  }
+}
 window.addEventListener("DOMContentLoaded", replaceDocumentContentsWithLinkResponse);
 window.addEventListener("popstate", handleBackButton);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpine",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "main": "dist/index.js",
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.758.0",