@very-simple/ajax 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/index.d.ts

@@ -74,6 +74,11 @@ type EventMap = {
     'before-visit': Payload;
     'before-swap': Payload;
     'after-swap': Payload;
+    'progress-start': Record<string, never>;
+    progress: {
+        progress: number;
+    };
+    'progress-end': Record<string, never>;
 };
 type DomEventMap = {
     [K in keyof EventMap as `ajax:${K & string}`]: CustomEvent<EventMap[K]>;

package/dist/index.js

@@ -13,18 +13,20 @@ var config = {
 // src/load.ts
 var parser = new DOMParser();
 var currentLoadController;
+var progressDelayTimeout;
 var progress = 0;
 var trickleInterval;
+var emit = (type, payload) => document.dispatchEvent(new CustomEvent(`ajax:${type}`, { detail: payload }));
 var cache = /* @__PURE__ */ new Map();
 var load = async (url, regions, options) => {
-  let progressDelayTimeout;
+  let aborted = false;
   try {
     currentLoadController?.abort();
+    clearTimeout(progressDelayTimeout);
     currentLoadController = new AbortController();
     setProgress(0);
     progressDelayTimeout = window.setTimeout(() => {
-      toggleLoading(true);
-      toggleProgress(true);
+      emit("progress-start", {});
       startTrickle();
     }, options.loadingDelay);
     const response = await fetch(url, {
@@ -41,17 +43,18 @@ var load = async (url, regions, options) => {
     const document2 = parseHtml(html);
     return { document: document2, response };
   } catch (e) {
-    setProgress(0);
-    const isAbortError = e instanceof DOMException && e.name === "AbortError";
-    if (!isAbortError) {
+    aborted = e instanceof DOMException && e.name === "AbortError";
+    if (!aborted) {
+      setProgress(0);
       window.location.reload();
     }
   } finally {
-    clearTimeout(progressDelayTimeout);
-    stopTrickle();
-    setProgress(1);
-    toggleLoading(false);
-    setTimeout(() => toggleProgress(false), options.progressHideDelay);
+    if (!aborted) {
+      clearTimeout(progressDelayTimeout);
+      stopTrickle();
+      setProgress(1);
+      setTimeout(() => emit("progress-end", {}), options.progressHideDelay);
+    }
   }
 };
 var parseHtml = (html) => parser.parseFromString(html, "text/html");
@@ -59,17 +62,18 @@ var trickle = () => {
   const amount = -0.095 * progress + 0.1;
   setProgress(progress + Math.random() * amount);
 };
-var startTrickle = () => trickleInterval = window.setInterval(trickle, 300);
-var stopTrickle = () => clearInterval(trickleInterval);
+var startTrickle = () => {
+  stopTrickle();
+  trickleInterval = window.setInterval(trickle, 300);
+};
+var stopTrickle = () => {
+  clearInterval(trickleInterval);
+  trickleInterval = void 0;
+};
 var setProgress = (value) => {
   progress = value;
-  document.documentElement.style.setProperty(
-    "--ajax-progress",
-    `${Math.round(value * 1e4) / 100}%`
-  );
+  emit("progress", { progress: value });
 };
-var toggleProgress = (state) => document.documentElement.toggleAttribute(`${config.prefix}progress`, state);
-var toggleLoading = (state) => document.documentElement.toggleAttribute(`${config.prefix}loading`, state);
 
 // src/merge.ts
 import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js";
@@ -82,7 +86,7 @@ var merge = (region, newRegion, strategy) => {
     Array.from(
       newRegion.querySelectorAll(`[${escapedPrefix}permanent][id]`)
     ).forEach((el) => {
-      const original = region.querySelector(`#${el.id}`);
+      const original = region.querySelector(`#${CSS.escape(el.id)}`);
       if (original) {
         permanents.set(el.id, original);
         original.remove();
@@ -91,13 +95,12 @@ var merge = (region, newRegion, strategy) => {
     unmount?.(region);
     if (strategy === "replace") region.replaceWith(newRegion);
     else region.replaceChildren(...Array.from(newRegion.children));
-    Array.from(
-      newRegion.querySelectorAll(`[${escapedPrefix}permanent][id]`)
-    ).forEach((el) => {
+    const target = strategy === "replace" ? newRegion : region;
+    target.querySelectorAll(`[${escapedPrefix}permanent][id]`).forEach((el) => {
       const original = permanents.get(el.id);
       if (original) el.replaceWith(original);
     });
-    mount?.(strategy === "replace" ? newRegion : region);
+    mount?.(target);
   } else if (strategy === "before") {
     region.insertAdjacentElement("beforebegin", newRegion);
     mount?.(newRegion);
@@ -114,6 +117,7 @@ var merge = (region, newRegion, strategy) => {
     const result = morph(region, newRegion);
     autoFocusEl = result.autoFocusEl;
   }
+  if (strategy === "morph") return { autoFocusEl };
   if (newRegion.hasAttribute(`${prefix}autofocus`) || newRegion.autofocus) {
     autoFocusEl ??= newRegion;
   }
@@ -123,7 +127,7 @@ var merge = (region, newRegion, strategy) => {
 var morph = (container, newContainer) => {
   const { prefix, mount, unmount } = config;
   const manualReplacements = [];
-  let autoFocusEls = [];
+  const autoFocusEls = [];
   let currentNodeKeepAttributes = [];
   Idiomorph.morph(container, newContainer, {
     callbacks: {
@@ -138,6 +142,7 @@ var morph = (container, newContainer) => {
         const isSameComponent = oldIsComponent && newIsComponent && oldNode.getAttribute(`${prefix}component`) === newNode.getAttribute(`${prefix}component`);
         if (!oldIsComponent || isSameComponent) return true;
         manualReplacements.push([oldNode, newNode]);
+        return false;
       },
       beforeAttributeUpdated: (name) => {
         return !currentNodeKeepAttributes.includes(name);
@@ -153,9 +158,9 @@ var morph = (container, newContainer) => {
           mount?.(node);
         }
       },
-      afterNodeMorphed(_, newNode) {
-        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.hasAttribute(`${prefix}autofocus`))) {
-          autoFocusEls.push(newNode);
+      afterNodeMorphed(oldNode) {
+        if (oldNode instanceof HTMLElement && (oldNode.autofocus || oldNode.hasAttribute(`${prefix}autofocus`))) {
+          autoFocusEls.push(oldNode);
         }
       }
     }
@@ -205,7 +210,7 @@ var normalizeUrl = (url) => {
     return url;
   }
 };
-var emit = (type, payload) => {
+var emit2 = (type, payload) => {
   const waiting = [];
   const waitUntil = (promise) => waiting.push(Promise.resolve(promise));
   payload = { ...payload, waitUntil };
@@ -213,7 +218,7 @@ var emit = (type, payload) => {
   document.dispatchEvent(event);
   if (waiting.length) return Promise.allSettled(waiting);
 };
-var currentUrl = window.location.pathname;
+var currentUrl = window.location.pathname + window.location.search;
 var currentState = history.state;
 var currentVisitController;
 var scrollPositions = /* @__PURE__ */ new Map();
@@ -239,7 +244,7 @@ var visit = async (url, {
   currentVisitController = new AbortController();
   const { signal } = currentVisitController;
   if (url === currentUrl) historyMode = "none";
-  await emit("before-visit", {
+  await emit2("before-visit", {
     from: { url: fromUrl, state: fromState, document },
     to: { url, state },
     signal,
@@ -260,13 +265,14 @@ var visit = async (url, {
     }
   }
   if (!newDocument) return;
+  if (signal.aborted) return;
   currentUrl = url;
   currentState = state;
   if (historyMode === "replace") history.replaceState(state, "", url);
   else if (historyMode === "push") history.pushState(state, "", url);
   const from = { url: fromUrl, state: fromState, document };
   const to = { url, state, document: newDocument };
-  await emit("before-swap", { from, to, isBackForward, signal });
+  await emit2("before-swap", { from, to, isBackForward, signal });
   if (signal.aborted) return;
   const getMergeStrategy = (oldEl, newEl) => newEl.getAttribute(`${config.prefix}merge`) || oldEl.getAttribute(`${config.prefix}merge`) || mergeStrategy;
   let autoFocusEl;
@@ -278,8 +284,9 @@ var visit = async (url, {
     if (hasMatchingRegions) {
       for (const id of regions) {
         const region = document.querySelector(id);
-        const newRegion = newDocument.querySelector(id);
-        if (!region || !newRegion) continue;
+        const parsedRegion = newDocument.querySelector(id);
+        if (!region || !parsedRegion) continue;
+        const newRegion = document.importNode(parsedRegion, true);
         const strategy = getMergeStrategy(region, newRegion);
         const result = merge(region, newRegion, strategy);
         autoFocusEl ??= result.autoFocusEl;
@@ -290,7 +297,7 @@ var visit = async (url, {
       }
     } else {
       const region = document.body;
-      const newRegion = newDocument.body;
+      const newRegion = document.importNode(newDocument.body, true);
       const strategy = getMergeStrategy(region, newRegion);
       const result = merge(region, newRegion, strategy);
       autoFocusEl = result.autoFocusEl;
@@ -319,18 +326,18 @@ var visit = async (url, {
     await document.startViewTransition(async () => {
       if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
       await mergeRegions();
-      await emit("after-swap", { from, to, isBackForward, signal });
+      await emit2("after-swap", { from, to, isBackForward, signal });
       applyScrollBehavior();
-    }).ready;
+    }).updateCallbackDone;
   } else {
     if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
     await mergeRegions();
-    await emit("after-swap", { from, to, isBackForward, signal });
+    await emit2("after-swap", { from, to, isBackForward, signal });
     applyScrollBehavior();
   }
   if (signal.aborted) return;
   if (autoFocus) autoFocusEl?.focus({ preventScroll: true });
-  emit("load", { from, to, isBackForward });
+  emit2("load", { from, to, isBackForward });
 };
 
 // src/intercept.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@very-simple/ajax",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "A very simple turbolinks inspired ajax library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",