@very-simple/ajax 1.0.0-beta.1 → 1.0.0-beta.11

package/README.md

@@ -39,6 +39,7 @@ without writing any JavaScript:
 | `data-ajax-history` | History mode to use: `push`, `replace` or `none`.                                    |
 | `data-ajax-merge`   | Merge strategy for the swapped content, e.g. `morph`, `replace`, `before`, `append`. |
 | `data-ajax-state`   | JSON encoded state to store in `history.state` for this visit.                       |
+| `data-ajax-prefetch` | Prefetch the link before it's clicked: `hover`, `mousedown` or `false` to opt out. Without a value the `prefetch` option is used, falling back to `hover`. |
 
 ```html
 <!-- only swap #content, preserving the merge strategy for that region -->
@@ -62,18 +63,28 @@ import { start } from '@very-simple/ajax'
 start({
   // Strategy used to merge the swapped content into the current DOM.
   merge: 'replace',
-  // Morph the `<head>` instead of leaving it untouched.
-  morphHeads: true,
+  // How to update the `<head>`: 'merge', 'append', 'morph' or 'none'.
+  head: 'merge',
   // Re-execute `<script>` tags found in the swapped content.
   executeScripts: true,
-  // Wrap navigations in the View Transitions API, if supported.
-  viewTransitions: false,
+  // `'view'` wraps the swap in the View Transitions API (if supported), `'css'`
+  // keeps the old and new region in the DOM and sets `data-ajax-leaving` /
+  // `data-ajax-entering` for CSS transitions (only for the `replace` merge).
+  transitions: false,
   // Delay (ms) before showing a loading indicator on slow visits.
   loadingDelay: 500,
   // Delay (ms) before hiding the loading indicator again.
   progressHideDelay: 500,
   // Prefix used for the `data-ajax-*` attributes.
   prefix: 'data-ajax-',
+  // Default selectors to swap instead of the whole `<body>`, used for visits
+  // that don't specify their own `regions` (e.g. via `data-ajax-regions`).
+  regions: [],
+  // Default prefetch strategy for links: false, 'hover' (hover/focus) or
+  // 'mousedown' (press). Touch always prefetches on touchstart.
+  prefetch: false,
+  // How long (ms) a prefetched response stays usable.
+  prefetchTtl: 30000,
   // Custom scroll handling, e.g. restoring position on back/forward visits.
   scrollBehavior: ({ isBackForward, savedPosition }) =>
     isBackForward ? savedPosition : { top: 0 },
@@ -84,6 +95,19 @@ start({
 })
 ```
 
+`head`, `executeScripts` and `transitions` also accept a callback
+receiving `{ from, to, isBackForward }`. Combined with `data-ajax-state` this
+allows deciding per link, e.g. to only add new `<head>` elements (scripts,
+styles) without removing existing ones when loading a partial:
+
+```html
+<a href="/partial" data-ajax-state='{"isPartial": true}'>Partial</a>
+```
+
+```ts
+start({ head: ({ to }) => (to.state?.isPartial ? 'append' : 'merge') })
+```
+
 ### `visit(url, options?)`
 
 A lower-level API for triggering a visit programmatically, e.g. in

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 interface AjaxState extends Record<string, unknown> {
     regions?: string[];
+    index?: number;
 }
 /** Also accepts all `Config` options, e.g. `merge`, `scrollBehavior`, etc. */
 interface VisitOptions extends Config {
@@ -8,7 +9,7 @@ interface VisitOptions extends Config {
     autoFocus?: boolean;
     request?: RequestInit;
     regions?: string[];
-    state?: Omit<AjaxState, 'regions'>;
+    state?: Omit<AjaxState, 'regions' | 'index'>;
 }
 type StartOptions = Config;
 interface LoadingOptions {
@@ -17,17 +18,26 @@ interface LoadingOptions {
     request?: RequestInit;
 }
 type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
+/** `true` is `'merge'`, `false` is `'none'`. */
+type HeadMode = 'merge' | 'append' | 'morph' | 'none' | boolean;
 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;
-    /** Called instead of the default merge to render the new document. */
-    render?: (newDocument: Document) => Promise<void> | void;
+    /**
+     * How to update the `<head>`: `'merge'` adds new and removes stale elements,
+     * `'append'` only adds new ones, `'morph'` morphs it like any element and
+     * `'none'` leaves it untouched. A callback decides per visit.
+     */
+    head?: Resolvable<HeadMode>;
+    /** Re-execute `<script>` tags found in the swapped content. A callback decides per visit. */
+    executeScripts?: Resolvable<boolean>;
+    /**
+     * `'view'` wraps the swap in the View Transitions API (if supported), `'css'`
+     * keeps the old and new region in the DOM and sets `data-ajax-leaving` /
+     * `data-ajax-entering` so CSS can animate them (only for `replace`). A
+     * callback decides per visit.
+     */
+    transitions?: Resolvable<false | 'view' | 'css'>;
     /** Custom scroll handling, e.g. restoring position on back/forward visits. */
     scrollBehavior?: ScrollBehavior;
     /** Delay (ms) before showing a loading indicator on slow visits. */
@@ -36,11 +46,26 @@ interface Config {
     progressHideDelay?: number;
     /** Prefix used for the `data-ajax-*` attributes. */
     prefix?: string;
+    /** Default regions used for visits that don't specify their own. */
+    regions?: string[];
+    /**
+     * Default prefetch strategy for links: `'hover'` on hover/focus, `'mousedown'`
+     * on press. Links can override it with `data-ajax-prefetch`.
+     */
+    prefetch?: false | 'hover' | 'mousedown';
+    /** How long (ms) a prefetched response stays usable. */
+    prefetchTtl?: number;
     /** Called after an element is added to the DOM by a merge. */
     mount?: (el: Element) => void;
     /** 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;
 };
@@ -72,6 +97,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]>;
@@ -88,6 +118,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, head, merge: mergeStrategy, executeScripts: executeScriptsOption, transitions, 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 HeadMode, type LoadingOptions, type MergeStrategy, type PageState, type Resolvable, type ScrollBehavior, type ScrollPosition, type StartOptions, type VisitOptions, scrollPositions, start, visit };

package/dist/index.js

@@ -1,78 +1,156 @@
 // src/config.ts
 var config = {
-  morphHeads: true,
+  head: "merge",
   merge: "replace",
   executeScripts: true,
-  viewTransitions: false,
+  transitions: false,
   loadingDelay: 500,
   progressHideDelay: 500,
-  prefix: "data-ajax-"
+  prefix: "data-ajax-",
+  regions: [],
+  prefetch: false,
+  prefetchTtl: 3e4
+};
+
+// src/prefetch.ts
+var store = /* @__PURE__ */ new Map();
+var keyOf = (url, regions) => `${url}
+${regions.join(" ")}`;
+var isFresh = (time) => Date.now() - time < config.prefetchTtl;
+var prefetch = (url, regions) => {
+  for (const [key2, entry] of store) if (!isFresh(entry.time)) store.delete(key2);
+  const key = keyOf(url, regions);
+  if (store.has(key)) return;
+  const promise = fetch(url, {
+    headers: {
+      Accept: "text/html",
+      "X-Very-Simple-Ajax": "true",
+      "X-Very-Simple-Ajax-Regions": regions.join(" ")
+    }
+  }).then(async (response) => {
+    if (!response.ok) return void 0;
+    return { html: await response.text(), response };
+  }).catch(() => void 0).then((result) => {
+    if (!result) store.delete(key);
+    return result;
+  });
+  store.set(key, { time: Date.now(), promise });
+};
+var takePrefetched = (url, regions) => {
+  const key = keyOf(url, regions);
+  const entry = store.get(key);
+  store.delete(key);
+  return entry && isFresh(entry.time) ? entry.promise : void 0;
 };
 
 // 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, {
+    const prefetched = await takePrefetched(url, regions);
+    const response = prefetched?.response ?? await fetch(url, {
       ...options.request,
       headers: {
+        Accept: "text/html",
         ...options.request?.headers,
         "X-Very-Simple-Ajax": "true",
         "X-Very-Simple-Ajax-Regions": regions.join(" ")
       },
       signal: currentLoadController.signal
     });
-    const html = await response.text();
+    const html = prefetched?.html ?? await response.text();
     if (response.ok) cache.set(url, html);
     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");
 var trickle = () => {
-  const amount = -0.095 * progress + 0.1;
-  setProgress(progress + Math.random() * amount);
+  setProgress(progress + Math.random() * 0.1 * (1 - progress));
+};
+var startTrickle = () => {
+  stopTrickle();
+  trickleInterval = window.setInterval(trickle, 300);
+};
+var stopTrickle = () => {
+  clearInterval(trickleInterval);
+  trickleInterval = void 0;
 };
-var startTrickle = () => trickleInterval = window.setInterval(trickle, 300);
-var stopTrickle = () => clearInterval(trickleInterval);
 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";
-var merge = (region, newRegion, strategy) => {
+var merge = async (region, newRegion, strategy, signal, useCssTransition = false) => {
+  if (useCssTransition && strategy === "replace") {
+    return replaceWithTransition(region, newRegion, signal);
+  }
+  return mergeBuiltIn(region, newRegion, strategy);
+};
+var replaceWithTransition = async (region, newRegion, signal) => {
+  const { prefix, mount, unmount } = config;
+  const escapedPrefix = CSS.escape(prefix);
+  newRegion.querySelectorAll(`[${escapedPrefix}permanent][id]`).forEach((el) => {
+    const original = region.querySelector(`#${CSS.escape(el.id)}`);
+    if (original) el.replaceWith(original);
+  });
+  newRegion.setAttribute(`${prefix}entering`, "");
+  region.before(newRegion);
+  mount?.(newRegion);
+  newRegion.getBoundingClientRect();
+  newRegion.removeAttribute(`${prefix}entering`);
+  region.setAttribute(`${prefix}leaving`, "");
+  region.inert = true;
+  const animations = [region, newRegion].flatMap(
+    (el) => el.getAnimations({ subtree: true })
+  );
+  const finish = () => animations.forEach((a) => a.finish());
+  signal.addEventListener("abort", finish, { once: true });
+  await Promise.allSettled(animations.map((a) => a.finished));
+  signal.removeEventListener("abort", finish);
+  unmount?.(region);
+  region.remove();
+  return { autoFocusEl: findAutoFocus(newRegion) };
+};
+var findAutoFocus = (newRegion) => {
+  const { prefix } = config;
+  const escapedPrefix = CSS.escape(prefix);
+  if (newRegion.hasAttribute(`${prefix}autofocus`) || newRegion.autofocus) {
+    return newRegion;
+  }
+  return newRegion.querySelector(`[${escapedPrefix}autofocus]`) ?? newRegion.querySelector("[autofocus]") ?? void 0;
+};
+var mergeBuiltIn = (region, newRegion, strategy) => {
   let autoFocusEl;
   const { prefix, mount, unmount } = config;
   const escapedPrefix = CSS.escape(prefix);
@@ -81,7 +159,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();
@@ -90,13 +168,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);
@@ -113,16 +190,13 @@ var merge = (region, newRegion, strategy) => {
     const result = morph(region, newRegion);
     autoFocusEl = result.autoFocusEl;
   }
-  if (newRegion.hasAttribute(`${prefix}autofocus`) || newRegion.autofocus) {
-    autoFocusEl ??= newRegion;
-  }
-  autoFocusEl ??= newRegion.querySelector(`[${escapedPrefix}autofocus]`) ?? newRegion.querySelector("[autofocus]") ?? void 0;
-  return { autoFocusEl };
+  if (strategy === "morph") return { autoFocusEl };
+  return { autoFocusEl: findAutoFocus(newRegion) };
 };
 var morph = (container, newContainer) => {
   const { prefix, mount, unmount } = config;
   const manualReplacements = [];
-  let autoFocusEls = [];
+  const autoFocusEls = [];
   let currentNodeKeepAttributes = [];
   Idiomorph.morph(container, newContainer, {
     callbacks: {
@@ -137,6 +211,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);
@@ -152,9 +227,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);
         }
       }
     }
@@ -204,7 +279,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 };
@@ -212,7 +287,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();
@@ -222,23 +297,27 @@ var visit = async (url, {
   autoFocus = true,
   request,
   state,
-  regions = [],
-  morphHeads = config.morphHeads,
+  regions = config.regions,
+  head = config.head,
   merge: mergeStrategy = config.merge,
-  executeScripts: shouldExecuteScripts = config.executeScripts,
-  viewTransitions = config.viewTransitions,
+  executeScripts: executeScriptsOption = config.executeScripts,
+  transitions = config.transitions,
   loadingDelay = config.loadingDelay,
   progressHideDelay = config.progressHideDelay
 } = {}) => {
   url = normalizeUrl(url);
   const fromUrl = currentUrl;
   const fromState = currentState;
-  state = { ...state, regions };
+  if (!(isBackForward && state)) {
+    const currentIndex = currentState?.index ?? 0;
+    const index = historyMode === "push" ? currentIndex + 1 : currentIndex;
+    state = { ...state, regions, index };
+  }
   currentVisitController?.abort();
   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,
@@ -248,7 +327,13 @@ var visit = async (url, {
   let newDocument;
   if (isBackForward) {
     const html = cache.get(url);
-    if (html) newDocument = parseHtml(html);
+    if (html) {
+      const cached = parseHtml(html);
+      const isComplete = regions.every(
+        (selector) => !document.querySelector(selector) || cached.querySelector(selector)
+      );
+      if (isComplete) newDocument = cached;
+    }
   }
   if (!newDocument) {
     const options = { loadingDelay, progressHideDelay, request };
@@ -259,15 +344,28 @@ 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;
-  if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
+  const resolve = (option) => typeof option === "function" ? option({ from, to, isBackForward }) : option;
+  const resolvedHead = resolve(head);
+  let headStyle = resolvedHead;
+  if (headStyle === true) headStyle = "merge";
+  else if (headStyle === false) headStyle = "none";
+  const updateHead = () => {
+    if (headStyle === "none") return;
+    Idiomorph2.morph(document.head, newDocument.head, {
+      head: { style: headStyle }
+    });
+  };
+  const shouldExecuteScripts = resolve(executeScriptsOption);
+  const transition = resolve(transitions);
   const getMergeStrategy = (oldEl, newEl) => newEl.getAttribute(`${config.prefix}merge`) || oldEl.getAttribute(`${config.prefix}merge`) || mergeStrategy;
   let autoFocusEl;
   const hasMatchingRegions = regions?.some(
@@ -278,10 +376,17 @@ 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);
+        const result = await merge(
+          region,
+          newRegion,
+          strategy,
+          signal,
+          transition === "css"
+        );
         autoFocusEl ??= result.autoFocusEl;
         if (shouldExecuteScripts) {
           const finalRegion = document.querySelector(id);
@@ -290,9 +395,9 @@ 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);
+      const result = await merge(region, newRegion, strategy, signal);
       autoFocusEl = result.autoFocusEl;
       if (shouldExecuteScripts) {
         scriptPromises.push(executeScripts(document.body));
@@ -312,22 +417,22 @@ var visit = async (url, {
     });
     if (position) window.scrollTo(position);
   };
-  if (config.render) {
-    await config.render(newDocument);
-  } else if (viewTransitions && document.startViewTransition) {
+  if (transition === "view" && document.startViewTransition) {
     await document.startViewTransition(async () => {
+      updateHead();
       await mergeRegions();
-      await emit("after-swap", { from, to, isBackForward, signal });
+      await emit2("after-swap", { from, to, isBackForward, signal });
       applyScrollBehavior();
-    }).ready;
+    }).updateCallbackDone;
   } else {
+    updateHead();
     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
@@ -336,15 +441,73 @@ var interceptLinks = () => {
     if (e.defaultPrevented || isModifiedClick(e)) return;
     const target = e.composedPath ? e.composedPath()[0] : e.target;
     const link = target?.closest?.("a");
-    if (!link || !link.href) return;
-    const isOptOut = link.hasAttribute(`${config.prefix}reload`);
-    const isExternalTarget = link.target && link.target !== "_self";
-    if (isOptOut || link.hasAttribute("download") || isExternalTarget || !isSameOrigin(link.href))
-      return;
+    if (!link || !isInterceptable(link)) return;
     e.preventDefault();
     visit(link.href, { history: "push", ...getVisitOptions(link) });
   });
 };
+var isInterceptable = (link) => {
+  if (!link.href) return false;
+  const isExternalTarget = link.target && link.target !== "_self";
+  return !(link.hasAttribute(`${config.prefix}reload`) || link.hasAttribute("download") || isExternalTarget || !isSameOrigin(link.href));
+};
+var hoverDelay = 100;
+var getPrefetchStrategy = (link) => {
+  const attr = link.getAttribute(`${config.prefix}prefetch`);
+  if (attr === null) return config.prefetch;
+  if (attr === "false") return false;
+  if (attr === "hover" || attr === "mousedown") return attr;
+  return config.prefetch || "hover";
+};
+var interceptPrefetch = () => {
+  let hoverTimeout;
+  let hoverLink;
+  const run = (link) => {
+    if (navigator.connection?.saveData) return;
+    const url = normalizeUrl(link.href);
+    if (url === currentUrl) return;
+    const regions = getVisitOptions(link).regions ?? config.regions;
+    prefetch(url, regions);
+  };
+  const findLink = (e) => {
+    const link = e.target?.closest?.("a");
+    if (!link || !getPrefetchStrategy(link) || !isInterceptable(link)) return;
+    return link;
+  };
+  const clearHover = () => {
+    clearTimeout(hoverTimeout);
+    hoverLink = void 0;
+  };
+  document.addEventListener("mouseover", (e) => {
+    const link = findLink(e);
+    if (!link || link === hoverLink || getPrefetchStrategy(link) !== "hover")
+      return;
+    clearHover();
+    hoverLink = link;
+    hoverTimeout = window.setTimeout(() => run(link), hoverDelay);
+  });
+  document.addEventListener("mouseout", (e) => {
+    const to = e.relatedTarget;
+    if (hoverLink && !(to && hoverLink.contains(to))) clearHover();
+  });
+  document.addEventListener("focusin", (e) => {
+    const link = findLink(e);
+    if (link && getPrefetchStrategy(link) === "hover") run(link);
+  });
+  document.addEventListener(
+    "touchstart",
+    (e) => {
+      const link = findLink(e);
+      if (link) run(link);
+    },
+    { passive: true }
+  );
+  document.addEventListener("mousedown", (e) => {
+    if (e.button !== 0) return;
+    const link = findLink(e);
+    if (link) run(link);
+  });
+};
 var interceptForms = () => {
   document.addEventListener("submit", (e) => {
     const form = e.target;
@@ -374,10 +537,12 @@ var interceptForms = () => {
 var interceptHistory = () => {
   window.addEventListener("popstate", (event) => {
     if (normalizeUrl(window.location.href) === normalizeUrl(currentUrl)) return;
+    const isBack = (event.state?.index ?? 0) < (currentState?.index ?? 0);
+    const regions = isBack ? currentState?.regions : event.state?.regions;
     visit(window.location.href, {
       history: "none",
       isBackForward: true,
-      regions: currentState?.regions ?? [],
+      regions: regions ?? config.regions,
       state: event.state
     });
   });
@@ -409,10 +574,13 @@ var getVisitOptions = (el) => {
 // src/start.ts
 var start = (options = {}) => {
   Object.assign(config, options);
+  const url = normalizeUrl(window.location.href);
+  if (!cache.has(url)) cache.set(url, document.documentElement.outerHTML);
   if (config.scrollBehavior) history.scrollRestoration = "manual";
   interceptLinks();
   interceptForms();
   interceptHistory();
+  interceptPrefetch();
   if (import.meta.env.DEV) {
     document.addEventListener("ajax:before-visit", () => {
       document.head.querySelectorAll("style[data-vite-dev-id]").forEach((el) => el.setAttribute("im-preserve", "true"));

package/package.json

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