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

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,8 +63,8 @@ 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.
@@ -77,6 +78,11 @@ start({
   // 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 },
@@ -87,17 +93,17 @@ 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:
+`head`, `executeScripts` and `viewTransitions` 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({ morphHeads: ({ to }) => !to.state?.isPartial })
+start({ head: ({ to }) => (to.state?.isPartial ? 'append' : 'merge') })
 ```
 
 ### `visit(url, options?)`

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,11 +18,17 @@ 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. A callback decides per visit. */
-    morphHeads?: Resolvable<boolean>;
+    /**
+     * 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>;
     /** Wrap navigations in the View Transitions API, if supported. A callback decides per visit. */
@@ -38,6 +45,13 @@ interface Config {
     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. */
@@ -101,6 +115,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: executeScriptsOption, viewTransitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
+declare const visit: (url: string, { history: historyMode, isBackForward, autoFocus, request, state, regions, head, merge: mergeStrategy, executeScripts: executeScriptsOption, viewTransitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
 
-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 };
+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,13 +1,45 @@
 // src/config.ts
 var config = {
-  morphHeads: true,
+  head: "merge",
   merge: "replace",
   executeScripts: true,
   viewTransitions: false,
   loadingDelay: 500,
   progressHideDelay: 500,
   prefix: "data-ajax-",
-  regions: []
+  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: {
+      "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
@@ -29,7 +61,8 @@ var load = async (url, regions, options) => {
       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: {
         ...options.request?.headers,
@@ -38,7 +71,7 @@ var load = async (url, regions, options) => {
       },
       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 };
@@ -229,7 +262,7 @@ var visit = async (url, {
   request,
   state,
   regions = config.regions,
-  morphHeads = config.morphHeads,
+  head = config.head,
   merge: mergeStrategy = config.merge,
   executeScripts: executeScriptsOption = config.executeScripts,
   viewTransitions = config.viewTransitions,
@@ -239,7 +272,11 @@ var visit = async (url, {
   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;
@@ -254,7 +291,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 };
@@ -275,7 +318,16 @@ var visit = async (url, {
   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 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 useViewTransitions = resolve(viewTransitions);
   const getMergeStrategy = (oldEl, newEl) => newEl.getAttribute(`${config.prefix}merge`) || oldEl.getAttribute(`${config.prefix}merge`) || mergeStrategy;
@@ -324,17 +376,17 @@ var visit = async (url, {
     if (position) window.scrollTo(position);
   };
   if (config.render) {
-    if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
+    updateHead();
     await config.render(newDocument);
   } else if (useViewTransitions && document.startViewTransition) {
     await document.startViewTransition(async () => {
-      if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
+      updateHead();
       await mergeRegions();
       await emit2("after-swap", { from, to, isBackForward, signal });
       applyScrollBehavior();
     }).updateCallbackDone;
   } else {
-    if (shouldMorphHeads) Idiomorph2.morph(document.head, newDocument.head);
+    updateHead();
     await mergeRegions();
     await emit2("after-swap", { from, to, isBackForward, signal });
     applyScrollBehavior();
@@ -350,15 +402,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 HOVER_DELAY = 65;
+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), HOVER_DELAY);
+  });
+  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;
@@ -388,10 +498,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 ?? config.regions,
+      regions: regions ?? config.regions,
       state: event.state
     });
   });
@@ -429,6 +541,7 @@ var start = (options = {}) => {
   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.7",
+  "version": "1.0.0-beta.9",
   "description": "A very simple turbolinks inspired ajax library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",