@very-simple/ajax 0.4.0 → 0.5.1

package/dist/index.d.ts

@@ -10,10 +10,33 @@ type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'app
 interface Config {
     watchHistory?: boolean;
     merge?: MergeStrategy;
+    morphHeads?: boolean;
+}
+type EventMap = {
+    visit: {
+        url: string;
+        prevUrl: string;
+    };
+    'before-visit': {
+        url: string;
+        prevUrl?: string;
+    };
+    'before-render': {
+        url: string;
+        prevUrl?: string;
+        newDocument: Document;
+    };
+};
+type DomEventMap = {
+    [K in keyof EventMap as `simple-ajax:${K & string}`]: CustomEvent<EventMap[K]>;
+};
+declare global {
+    interface DocumentEventMap extends DomEventMap {
+    }
 }
 
 declare const _default: {
-    start: ({ watchHistory, merge, }?: Config) => void;
+    start: ({ watchHistory, merge, morphHeads, }?: Config) => void;
     visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, autoFocus, }?: VisitOptions) => Promise<void>;
 };
 

package/dist/index.js

@@ -1,17 +1,17 @@
 // src/config.ts
 var globalConfig = {
   watchHistory: true,
+  morphHeads: true,
   merge: "replace"
 };
 
 // src/load.ts
 var parser = new DOMParser();
-var progress = 0;
 var currentLoadController;
 var load = async (url, regionIds) => {
   let progressDelayTimeout;
   try {
-    currentLoadController?.abort();
+    currentLoadController?.abort("cancel");
     currentLoadController = new AbortController();
     setProgress(0);
     progressDelayTimeout = window.setTimeout(() => toggleLoading(true), 500);
@@ -23,18 +23,27 @@ var load = async (url, regionIds) => {
       signal: currentLoadController.signal
     });
     const reader = response.body?.getReader();
-    const length = parseInt(response.headers.get("Content-Length") ?? "0");
+    const contentLengthHeader = response.headers.get("Content-Length");
+    const length = parseInt(contentLengthHeader ?? "0");
     let receivedBytes = 0;
     const stream = new ReadableStream({
       start(controller) {
         const read = async () => {
           const { done, value } = await reader.read();
           if (done) {
+            if (contentLengthHeader && receivedBytes > length) {
+              console.warn(
+                `Server sent more data (${receivedBytes} bytes) than specified in Content-Length header (${length} bytes).`
+              );
+            }
             controller.close();
             return;
           }
           receivedBytes += value.length;
-          setProgress(receivedBytes / length);
+          if (contentLengthHeader) {
+            const progress = Math.min(receivedBytes / length, 1);
+            setProgress(progress);
+          }
           controller.enqueue(value);
           read();
         };
@@ -47,8 +56,7 @@ var load = async (url, regionIds) => {
     return parser.parseFromString(html, "text/html");
   } catch (e) {
     setProgress(0);
-    const isAbortError = e instanceof DOMException && e.name === "AbortError";
-    if (isAbortError || currentLoadController?.signal.aborted) {
+    if (e !== "cancel") {
       window.location.reload();
     }
   } finally {
@@ -56,13 +64,10 @@ var load = async (url, regionIds) => {
     toggleLoading(false);
   }
 };
-var setProgress = (value) => {
-  progress = value;
-  document.documentElement.style.setProperty(
-    "--simple-progress",
-    `${value * 100}%`
-  );
-};
+var setProgress = (value) => document.documentElement.style.setProperty(
+  "--simple-progress",
+  `${Math.round(value * 1e4) / 100}%`
+);
 var toggleLoading = (state) => document.documentElement.toggleAttribute("data-simple-loading", state);
 
 // src/merge.ts
@@ -100,22 +105,27 @@ var merge = (region, newRegion, strategy) => {
 var morph = (container, newContainer) => {
   const manualReplacements = [];
   let autoFocusEls = [];
+  let currentNodeKeepAttributes = [];
   Idiomorph.morph(container, newContainer, {
     callbacks: {
-      afterNodeMorphed(_, newNode) {
-        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.dataset.simpleAutofocus)) {
-          autoFocusEls.push(newNode);
-        }
-      },
       beforeNodeMorphed(oldNode, newNode) {
         if (!(oldNode instanceof HTMLElement)) return true;
         if (!(newNode instanceof HTMLElement)) return true;
+        currentNodeKeepAttributes = oldNode.dataset.simpleKeepAttributes?.split(" ") ?? [];
         if (oldNode.hasAttribute("data-simple-permanent") && oldNode.id === newNode.id)
           return false;
         const oldComponent = oldNode.dataset.simpleComponent;
         const newComponent = newNode.dataset.simpleComponent;
         if (!oldComponent || oldComponent === newComponent) return true;
         manualReplacements.push([oldNode, newNode]);
+      },
+      beforeAttributeUpdated: (name) => {
+        return !currentNodeKeepAttributes.includes(name);
+      },
+      afterNodeMorphed(_, newNode) {
+        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.dataset.simpleAutofocus)) {
+          autoFocusEls.push(newNode);
+        }
       }
     }
   });
@@ -131,26 +141,31 @@ var emit = async (type, payload) => {
   const event = new CustomEvent(`simple-ajax:${type}`, { detail: payload });
   document.dispatchEvent(event);
 };
+var currentUrl = window.location.pathname;
+var prevUrl;
 var visit = async (url, {
   action = "none",
   emitEvents = true,
   isBackForward = false,
-  morphHeads = false,
+  morphHeads = globalConfig.morphHeads,
   merge: mergeStrategy = globalConfig.merge,
   autoFocus = true
 } = {}) => {
-  if (emitEvents) emit("before-visit", { url });
+  prevUrl = currentUrl;
+  currentUrl = url;
+  if (emitEvents) emit("before-visit", { url, prevUrl });
   let newDocument;
   if (isBackForward) {
     newDocument = cache.get(url)?.cloneNode(true);
-  } else {
-    const cacheId = window.location.pathname + window.location.search;
-    cache.set(cacheId, document.cloneNode(true));
   }
   const regions = findRegions(document);
   newDocument ??= await load(url, Array.from(regions.keys()));
   if (!newDocument) return;
-  if (emitEvents) emit("before-render", { url, newDocument });
+  if (emitEvents) emit("before-render", { url, prevUrl, newDocument });
+  if (!isBackForward) {
+    const cacheId = window.location.pathname + window.location.search;
+    cache.set(cacheId, document.cloneNode(true));
+  }
   if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
   const getMergeStrategy = (oldEl, newEl) => newEl.dataset.simpleAjax || oldEl.dataset.simpleAjax || mergeStrategy;
   let autoFocusEl;
@@ -177,7 +192,7 @@ var visit = async (url, {
   if (autoFocus) autoFocusEl?.focus();
   if (action === "replace") history.replaceState(null, "", url);
   else if (action === "push") history.pushState(null, "", url);
-  if (emitEvents) emit("visit", { url });
+  if (emitEvents) emit("visit", { url, prevUrl });
 };
 var findRegions = (doc) => {
   let regions = /* @__PURE__ */ new Map();
@@ -191,13 +206,15 @@ var findRegions = (doc) => {
 // src/start.ts
 var start = ({
   watchHistory = true,
-  merge: merge2 = "replace"
+  merge: merge2 = "replace",
+  morphHeads = true
 } = {}) => {
   globalConfig.merge = merge2;
   globalConfig.watchHistory = watchHistory;
+  globalConfig.morphHeads = morphHeads;
   if (watchHistory) {
-    window.addEventListener("popstate", async () => {
-      await visit(window.location.pathname + window.location.search, {
+    window.addEventListener("popstate", () => {
+      visit(window.location.pathname + window.location.search, {
         action: "none",
         isBackForward: true
       });
@@ -206,7 +223,7 @@ var start = ({
 };
 
 // src/index.ts
-var src_default = { start, visit };
+var index_default = { start, visit };
 export {
-  src_default as default
+  index_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@very-simple/ajax",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A very simple turbolinks inspired library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "url": "https://github.com/very-simple/ajax.git"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsup src/index.ts --dts --format esm",
+    "build": "tsup src/index.ts --dts --format esm",
     "dev": "vite",
     "test": "playwright test",
     "release": "npm run build && npm run test && bumpp"
@@ -23,14 +23,14 @@
   "devDependencies": {
     "@picocss/pico": "^2.0.6",
     "@playwright/test": "^1.48.2",
-    "@types/node": "^18.19.64",
+    "@types/node": "^22.0",
     "@very-simple/components": "^0.6.0",
-    "bumpp": "^9.8.1",
+    "bumpp": "^10.0.0",
     "tsup": "8",
     "typescript": "^5",
-    "vite": "^5"
+    "vite": "^6"
   },
   "dependencies": {
-    "idiomorph": "^0.3.0"
+    "idiomorph": "^0.7.0"
   }
 }