@very-simple/ajax 1.0.0-beta.5 → 1.0.0-beta.7

package/README.md

@@ -87,6 +87,19 @@ start({
 })
 ```
 
+`morphHeads`, `executeScripts` and `viewTransitions` also accept a callback
+receiving `{ from, to, isBackForward }` and returning a boolean. Combined with
+`data-ajax-state` this allows deciding per link, e.g. to skip morphing the
+`<head>` when loading a partial:
+
+```html
+<a href="/partial" data-ajax-state='{"isPartial": true}'>Partial</a>
+```
+
+```ts
+start({ morphHeads: ({ to }) => !to.state?.isPartial })
+```
+
 ### `visit(url, options?)`
 
 A lower-level API for triggering a visit programmatically, e.g. in

package/dist/index.d.ts

@@ -20,12 +20,12 @@ type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'app
 interface Config {
     /** Strategy used to merge the swapped content into the current DOM. */
     merge?: MergeStrategy;
-    /** Morph the `<head>` instead of leaving it untouched. */
-    morphHeads?: boolean;
-    /** Re-execute `<script>` tags found in the swapped content. */
-    executeScripts?: boolean;
-    /** Wrap navigations in the View Transitions API, if supported. */
-    viewTransitions?: boolean;
+    /** Morph the `<head>` instead of leaving it untouched. A callback decides per visit. */
+    morphHeads?: Resolvable<boolean>;
+    /** Re-execute `<script>` tags found in the swapped content. A callback decides per visit. */
+    executeScripts?: Resolvable<boolean>;
+    /** Wrap navigations in the View Transitions API, if supported. A callback decides per visit. */
+    viewTransitions?: Resolvable<boolean>;
     /** Called instead of the default merge to render the new document. */
     render?: (newDocument: Document) => Promise<void> | void;
     /** Custom scroll handling, e.g. restoring position on back/forward visits. */
@@ -43,6 +43,12 @@ interface Config {
     /** Called before an element is removed from the DOM by a merge. */
     unmount?: (el: Element) => void;
 }
+/** A value, or a callback resolving it right before the swap. */
+type Resolvable<T> = T | ((info: {
+    from: PageState;
+    to: PageState;
+    isBackForward: boolean;
+}) => T);
 type ScrollPosition = {
     top: number;
 };
@@ -95,6 +101,6 @@ declare const scrollPositions: Map<string, ScrollPosition>;
  * Load a new page, merge the regions/bodies and add a new history entry
  * according to the history mode.
  */
-declare const visit: (url: string, { history: historyMode, isBackForward, autoFocus, request, state, regions, morphHeads, merge: mergeStrategy, executeScripts: shouldExecuteScripts, viewTransitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
+declare const visit: (url: string, { history: historyMode, isBackForward, autoFocus, request, state, regions, morphHeads, merge: mergeStrategy, executeScripts: executeScriptsOption, viewTransitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
 
-export { type AjaxState, type Config, type EventMap, type LoadingOptions, type MergeStrategy, type PageState, type ScrollBehavior, type ScrollPosition, type StartOptions, type VisitOptions, scrollPositions, start, visit };
+export { type AjaxState, type Config, type EventMap, type LoadingOptions, type MergeStrategy, type PageState, type Resolvable, type ScrollBehavior, type ScrollPosition, type StartOptions, type VisitOptions, scrollPositions, start, visit };

package/dist/index.js

@@ -13,14 +13,16 @@ 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(() => {
@@ -41,16 +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);
-    setTimeout(() => emit("progress-end", {}), options.progressHideDelay);
+    if (!aborted) {
+      clearTimeout(progressDelayTimeout);
+      stopTrickle();
+      setProgress(1);
+      setTimeout(() => emit("progress-end", {}), options.progressHideDelay);
+    }
   }
 };
 var parseHtml = (html) => parser.parseFromString(html, "text/html");
@@ -58,8 +62,14 @@ 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;
   emit("progress", { progress: value });
@@ -76,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();
@@ -85,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);
@@ -108,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;
   }
@@ -117,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: {
@@ -132,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);
@@ -147,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);
         }
       }
     }
@@ -207,7 +218,7 @@ var emit2 = (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();
@@ -220,7 +231,7 @@ var visit = async (url, {
   regions = config.regions,
   morphHeads = config.morphHeads,
   merge: mergeStrategy = config.merge,
-  executeScripts: shouldExecuteScripts = config.executeScripts,
+  executeScripts: executeScriptsOption = config.executeScripts,
   viewTransitions = config.viewTransitions,
   loadingDelay = config.loadingDelay,
   progressHideDelay = config.progressHideDelay
@@ -254,6 +265,7 @@ var visit = async (url, {
     }
   }
   if (!newDocument) return;
+  if (signal.aborted) return;
   currentUrl = url;
   currentState = state;
   if (historyMode === "replace") history.replaceState(state, "", url);
@@ -262,6 +274,10 @@ var visit = async (url, {
   const to = { url, state, document: newDocument };
   await emit2("before-swap", { from, to, isBackForward, signal });
   if (signal.aborted) return;
+  const resolve = (option) => typeof option === "function" ? option({ from, to, isBackForward }) : option;
+  const shouldMorphHeads = resolve(morphHeads);
+  const shouldExecuteScripts = resolve(executeScriptsOption);
+  const useViewTransitions = resolve(viewTransitions);
   const getMergeStrategy = (oldEl, newEl) => newEl.getAttribute(`${config.prefix}merge`) || oldEl.getAttribute(`${config.prefix}merge`) || mergeStrategy;
   let autoFocusEl;
   const hasMatchingRegions = regions?.some(
@@ -272,8 +288,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;
@@ -284,7 +301,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;
@@ -307,17 +324,17 @@ var visit = async (url, {
     if (position) window.scrollTo(position);
   };
   if (config.render) {
-    if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
+    if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
     await config.render(newDocument);
-  } else if (viewTransitions && document.startViewTransition) {
+  } else if (useViewTransitions && document.startViewTransition) {
     await document.startViewTransition(async () => {
-      if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
+      if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
       await mergeRegions();
       await emit2("after-swap", { from, to, isBackForward, signal });
       applyScrollBehavior();
-    }).ready;
+    }).updateCallbackDone;
   } else {
-    if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
+    if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
     await mergeRegions();
     await emit2("after-swap", { from, to, isBackForward, signal });
     applyScrollBehavior();

package/package.json

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