@very-simple/ajax 0.7.1 → 1.0.0-beta.10

package/README.md

@@ -3,7 +3,7 @@
 A very simple turbolinks inspired library based on [Idiomorph](https://github.com/bigskysoftware/idiomorph).
 You can use it for progressive enhancements and to give your multi-page websites a SPA-like feel.
 
-💾 only ~3kb (minify and gzip)
+💾 only ~6kb (minify and gzip)
 
 ## Installation
 
@@ -13,4 +13,246 @@ npm install @very-simple/ajax
 
 ## Usage
 
-Checkout the `/examples` folder for more examples. Better documentation coming soon...
+```ts
+import { start } from '@very-simple/ajax'
+start()
+```
+
+```html
+<a href="/about">About</a>
+```
+
+Clicking the link now fetches `/about`, morphs the browser history and
+replaces the page content, without a full page reload.
+
+Checkout the `/examples` folder for more examples.
+
+### Attributes
+
+Add these attributes to a link or form to tweak how its visit behaves,
+without writing any JavaScript:
+
+| Attribute           | Description                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------ |
+| `data-ajax-reload`  | Opt out of interception entirely; the browser performs a normal navigation/submit.   |
+| `data-ajax-regions` | Comma separated list of selectors to swap instead of the whole `<body>`.             |
+| `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 -->
+<a href="/about" data-ajax-regions="#content" data-ajax-merge="morph">About</a>
+
+<!-- opt out of ajax handling for this link, e.g. to force a full reload -->
+<a href="/logout" data-ajax-reload>Logout</a>
+```
+
+> The `data-ajax-` prefix can be customized via the `prefix` option in `start()`.
+
+### `start(options?)`
+
+Call this once when your app boots. It intercepts same-origin link clicks and
+form submissions and turns them into ajax visits, and hooks into browser
+back/forward navigation.
+
+```ts
+import { start } from '@very-simple/ajax'
+
+start({
+  // Strategy used to merge the swapped content into the current DOM.
+  merge: 'replace',
+  // How to update the `<head>`: 'merge', 'append', 'morph' or 'none'.
+  head: 'merge',
+  // Re-execute `<script>` tags found in the swapped content.
+  executeScripts: true,
+  // `'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 },
+  // Called after an element is added to the DOM by a merge.
+  mount: (el) => {},
+  // Called before an element is removed from the DOM by a merge.
+  unmount: (el) => {},
+})
+```
+
+`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
+response to a custom event or timer instead of a link click:
+
+```ts
+import { visit } from '@very-simple/ajax'
+
+visit('/about', {
+  // History mode to use: `push`, `replace` or `none`.
+  history: 'push',
+  // Selectors to swap instead of the whole `<body>`.
+  regions: ['#content'],
+  // State to store in `history.state` for this visit.
+  state: {},
+  // Options passed through to the underlying `fetch()` call.
+  request: {},
+  // Focus the first element with `autofocus` in the swapped content.
+  autoFocus: true,
+  // ... You can also overwrite any option set in `start()` an a per-visit bases here.
+})
+```
+
+### Events
+
+Every visit fires a series of `CustomEvent`s on `document`, each namespaced
+with `ajax:`:
+
+| Event               | Description                                                                |
+| ------------------- | -------------------------------------------------------------------------- |
+| `ajax:before-visit` | Fired before the new page is fetched.                                      |
+| `ajax:before-swap`  | Fired after the new document has been loaded, right before it's merged in. |
+| `ajax:after-swap`   | Fired right after the new content has been merged in.                      |
+| `ajax:load`         | Fired once the whole visit (including scroll/focus handling) has finished. |
+
+#### Async listeners
+
+Use `event.detail.waitUntil(promise)` on those same events to delay the
+visit until the given promise settles, e.g. to run an animation before
+continuing:
+
+```ts
+document.addEventListener('ajax:before-swap', (e) => {
+  e.detail.waitUntil(animateIn())
+})
+```
+
+#### Aborting
+
+`before-visit`, `before-swap` and `after-swap` carry an `AbortSignal` in
+`event.detail.signal`, which is aborted if the visit gets superseded by a
+newer one (e.g. the user clicks another link while yours is still running).
+If your listener does anything that isn't automatically cancelled, like a
+manual animation loop, check `signal.aborted` (or listen for the signal's
+`abort` event) to stop it early:
+
+```ts
+document.addEventListener('ajax:before-swap', (e) => {
+  const { signal } = e.detail
+  const stopWhenAborted = () => (running = false)
+  signal.addEventListener('abort', stopWhenAborted)
+
+  let running = true
+  const loop = () => {
+    if (!running) return
+    // ...do some animation work...
+    requestAnimationFrame(loop)
+  }
+  loop()
+})
+```
+
+## Common patterns
+
+### Load more
+
+Turn a "load more" link into an infinite-scroll-like list by appending the
+new region into the existing one and replacing the link itself with the next
+page's link:
+
+```html
+<div id="posts" data-ajax-merge="append">
+  <article>1. Lorem Ipsum</article>
+  <article>2. Lorem Ipsum</article>
+</div>
+
+<a
+  id="load-more"
+  href="/posts?page=2"
+  data-ajax-history="none"
+  data-ajax-regions="#posts, #load-more"
+>
+  More
+</a>
+```
+
+Since `#load-more` is one of the swapped regions, the response's `#load-more`
+link (pointing to page 3) replaces this one, so clicking it again keeps
+loading further pages.
+
+### Loading content into a dialog
+
+Regions aren't limited to the elements currently visible on the page. You can
+target a hidden `<dialog>` and only swap its content, leaving the rest of the
+page untouched:
+
+```html
+<dialog id="preview"></dialog>
+
+<a href="/posts/1" data-ajax-regions="#preview" data-ajax-history="none">
+  Preview
+</a>
+```
+
+The response for `/posts/1` provides its own `#preview` region and opens
+itself via an inline script, since `executeScripts` re-runs `<script>` tags
+found in the swapped content:
+
+```html
+<dialog id="preview">
+  <h2>Post 1</h2>
+  <script>
+    document.getElementById('preview').showModal()
+  </script>
+</dialog>
+```
+
+### Permanent elements
+
+Mark an element with `data-ajax-permanent` (and give it a stable `id`) to
+keep it alive across visits instead of replacing it, e.g. a currently
+playing `<audio>`/`<video>` element or anything else with state that
+shouldn't be reset:
+
+```html
+<div id="player" data-ajax-permanent>
+  <audio src="/song.mp3" controls></audio>
+</div>
+```
+
+As long as an element with the same `id` exists in both the old and the new
+document, it's kept instead of being replaced.
+
+> With the default `replace`/`update` merge strategies the permanent element
+> is still moved to wherever it appears in the new content, which can cause a
+> visible flash for things like playing animations. Use `merge: 'morph'`
+> instead (globally or via `data-ajax-merge`) so the element is truly left
+> untouched in place.

package/dist/index.d.ts

@@ -1,49 +1,123 @@
-interface VisitOptions {
-    action?: 'push' | 'replace' | 'none';
-    emitEvents?: boolean;
+interface AjaxState extends Record<string, unknown> {
+    regions?: string[];
+    index?: number;
+}
+/** Also accepts all `Config` options, e.g. `merge`, `scrollBehavior`, etc. */
+interface VisitOptions extends Config {
+    history?: 'push' | 'replace' | 'none';
     isBackForward?: boolean;
-    merge?: MergeStrategy;
-    morphHeads?: boolean;
     autoFocus?: boolean;
+    request?: RequestInit;
+    regions?: string[];
+    state?: Omit<AjaxState, 'regions' | 'index'>;
+}
+type StartOptions = Config;
+interface LoadingOptions {
     loadingDelay?: number;
     progressHideDelay?: number;
     request?: RequestInit;
-    regions?: string[];
 }
 type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
+/** `true` is `'merge'`, `false` is `'none'`. */
+type HeadMode = 'merge' | 'append' | 'morph' | 'none' | boolean;
 interface Config {
-    watchHistory?: boolean;
+    /** Strategy used to merge the swapped content into the current DOM. */
     merge?: MergeStrategy;
-    morphHeads?: 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>;
+    /**
+     * `'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. */
     loadingDelay?: number;
+    /** Delay (ms) before hiding the loading indicator again. */
     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;
+};
+type ScrollBehavior = (info: {
+    from: PageState;
+    to: PageState;
+    isBackForward: boolean;
+    savedPosition?: ScrollPosition;
+}) => ScrollPosition | false | undefined;
+type WaitUntil = (promise: Promise<unknown>) => void;
+type PageState = {
+    url: string;
+    state?: AjaxState;
+    document?: Document;
+};
+type Payload = {
+    from: PageState;
+    to: PageState;
+    isBackForward: boolean;
+    signal: AbortSignal;
+    waitUntil: WaitUntil;
+};
 type EventMap = {
-    visit: {
-        url: string;
-        prevUrl: string;
+    load: {
+        from: PageState;
+        to: PageState;
+        isBackForward: boolean;
     };
-    'before-visit': {
-        url: string;
-        prevUrl?: string;
-    };
-    'before-render': {
-        url: string;
-        prevUrl?: string;
-        newDocument: Document;
+    '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 `simple-ajax:${K & string}`]: CustomEvent<EventMap[K]>;
+    [K in keyof EventMap as `ajax:${K & string}`]: CustomEvent<EventMap[K]>;
 };
 declare global {
     interface DocumentEventMap extends DomEventMap {
     }
 }
 
-declare const _default: {
-    start: ({ watchHistory, merge, morphHeads, loadingDelay, }?: Config) => void;
-    visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, request, regions, }?: VisitOptions) => Promise<void>;
-};
+declare const start: (options?: StartOptions) => void;
+
+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, head, merge: mergeStrategy, executeScripts: executeScriptsOption, transitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
 
-export { _default as default };
+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,159 +1,337 @@
 // src/config.ts
-var globalConfig = {
-  watchHistory: true,
-  morphHeads: true,
+var config = {
+  head: "merge",
   merge: "replace",
+  executeScripts: true,
+  transitions: false,
   loadingDelay: 500,
-  progressHideDelay: 500
+  progressHideDelay: 500,
+  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: {
+      "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: {
         ...options.request?.headers,
-        "X-Very-Simple-Request": "true",
-        "X-Very-Simple-Regions": regions.join(" ")
+        "X-Very-Simple-Ajax": "true",
+        "X-Very-Simple-Ajax-Regions": regions.join(" ")
       },
       signal: currentLoadController.signal
     });
-    const html = await response.text();
-    const document2 = parser.parseFromString(html, "text/html");
+    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(
-    "--simple-progress",
-    `${Math.round(value * 1e4) / 100}%`
-  );
+  emit("progress", { progress: value });
 };
-var toggleProgress = (state) => document.documentElement.toggleAttribute("data-simple-progress", state);
-var toggleLoading = (state) => document.documentElement.toggleAttribute("data-simple-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;
-  if (strategy === "replace") {
-    region.replaceWith(newRegion);
+  const { prefix, mount, unmount } = config;
+  const escapedPrefix = CSS.escape(prefix);
+  if (strategy === "replace" || strategy === "update") {
+    const permanents = /* @__PURE__ */ new Map();
+    Array.from(
+      newRegion.querySelectorAll(`[${escapedPrefix}permanent][id]`)
+    ).forEach((el) => {
+      const original = region.querySelector(`#${CSS.escape(el.id)}`);
+      if (original) {
+        permanents.set(el.id, original);
+        original.remove();
+      }
+    });
+    unmount?.(region);
+    if (strategy === "replace") region.replaceWith(newRegion);
+    else region.replaceChildren(...Array.from(newRegion.children));
+    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?.(target);
   } else if (strategy === "before") {
     region.insertAdjacentElement("beforebegin", newRegion);
+    mount?.(newRegion);
   } else if (strategy === "after") {
     region.insertAdjacentElement("afterend", newRegion);
+    mount?.(newRegion);
   } else if (strategy === "prepend") {
     region.insertAdjacentElement("afterbegin", newRegion);
+    mount?.(newRegion);
   } else if (strategy === "append") {
     region.insertAdjacentElement("beforeend", newRegion);
-  } else if (strategy === "update") {
-    region.replaceChildren(...Array.from(newRegion.children));
+    mount?.(newRegion);
   } else if (strategy === "morph") {
     const result = morph(region, newRegion);
     autoFocusEl = result.autoFocusEl;
   }
-  if (strategy !== "morph") {
-    newRegion.querySelectorAll("[data-simple-permanent][id]").forEach((el) => {
-      const originalEL = region.querySelector(`#${el.id}`);
-      if (originalEL) el.replaceWith(originalEL);
-    });
-  }
-  if (newRegion.hasAttribute("data-simple-autofocus") || newRegion.autofocus) {
-    autoFocusEl ??= newRegion;
-  }
-  autoFocusEl ??= newRegion.querySelector("[data-simple-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: {
       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)
+        if (!(oldNode instanceof Element)) return true;
+        if (!(newNode instanceof Element)) return true;
+        currentNodeKeepAttributes = oldNode.getAttribute(`${prefix}keep-attributes`)?.split(" ") ?? [];
+        if (oldNode.hasAttribute(`${prefix}permanent`) && oldNode.id === newNode.id)
           return false;
-        const oldComponent = oldNode.dataset.simpleComponent;
-        const newComponent = newNode.dataset.simpleComponent;
-        if (!oldComponent || oldComponent === newComponent) return true;
+        const oldIsComponent = oldNode.hasAttribute(`${prefix}component`);
+        const newIsComponent = newNode.hasAttribute(`${prefix}component`);
+        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);
       },
-      afterNodeMorphed(_, newNode) {
-        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.dataset.simpleAutofocus)) {
-          autoFocusEls.push(newNode);
+      beforeNodeRemoved(node) {
+        if (node instanceof Element && !node.hasAttribute(`${prefix}permanent`)) {
+          unmount?.(node);
+        }
+        return true;
+      },
+      afterNodeAdded(node) {
+        if (node instanceof Element && node.hasAttribute(`${prefix}component`)) {
+          mount?.(node);
+        }
+      },
+      afterNodeMorphed(oldNode) {
+        if (oldNode instanceof HTMLElement && (oldNode.autofocus || oldNode.hasAttribute(`${prefix}autofocus`))) {
+          autoFocusEls.push(oldNode);
         }
       }
     }
   });
-  for (const [oldEl, newEl] of manualReplacements) oldEl.replaceWith(newEl);
-  const autoFocusEl = autoFocusEls.find((el) => el.dataset.simpleAutofocus) ?? autoFocusEls.find((el) => el.autofocus);
+  for (const [oldEl, newEl] of manualReplacements) {
+    unmount?.(oldEl);
+    oldEl.replaceWith(newEl);
+    mount?.(newEl);
+  }
+  const autoFocusEl = autoFocusEls.find((el) => el.hasAttribute(`${prefix}autofocus`)) ?? autoFocusEls.find((el) => el.autofocus);
   return { autoFocusEl };
 };
 
+// src/scripts.ts
+var executeScripts = (container) => {
+  const marker = `${config.prefix}script-executed`;
+  const waiting = [];
+  for (const script of container.querySelectorAll("script")) {
+    if (script.hasAttribute(marker)) continue;
+    const type = script.getAttribute("type");
+    if (type && type !== "module" && type !== "text/javascript") continue;
+    const newScript = document.createElement("script");
+    newScript.textContent = script.textContent;
+    for (const attr of script.attributes) {
+      newScript.setAttribute(attr.name, attr.value);
+    }
+    newScript.setAttribute(marker, "");
+    if (newScript.src) {
+      waiting.push(
+        new Promise((resolve) => {
+          newScript.onload = newScript.onerror = resolve;
+        })
+      );
+    }
+    script.replaceWith(newScript);
+  }
+  return Promise.all(waiting);
+};
+
 // src/visit.ts
 import { Idiomorph as Idiomorph2 } from "idiomorph/dist/idiomorph.esm.js";
-var cache = /* @__PURE__ */ new Map();
-var emit = async (type, payload) => {
-  const event = new CustomEvent(`simple-ajax:${type}`, { detail: payload });
+var normalizeUrl = (url) => {
+  try {
+    const urlObj = new URL(url, window.location.origin);
+    return urlObj.pathname + urlObj.search;
+  } catch {
+    return url;
+  }
+};
+var emit2 = (type, payload) => {
+  const waiting = [];
+  const waitUntil = (promise) => waiting.push(Promise.resolve(promise));
+  payload = { ...payload, waitUntil };
+  const event = new CustomEvent(`ajax:${type}`, { detail: payload });
   document.dispatchEvent(event);
+  if (waiting.length) return Promise.allSettled(waiting);
 };
-var currentUrl = window.location.pathname;
-var prevUrl;
+var currentUrl = window.location.pathname + window.location.search;
+var currentState = history.state;
+var currentVisitController;
+var scrollPositions = /* @__PURE__ */ new Map();
 var visit = async (url, {
-  action = "none",
-  emitEvents = true,
+  history: historyMode = "none",
   isBackForward = false,
-  morphHeads = globalConfig.morphHeads,
-  merge: mergeStrategy = globalConfig.merge,
-  loadingDelay = globalConfig.loadingDelay,
-  progressHideDelay = globalConfig.progressHideDelay,
   autoFocus = true,
   request,
-  regions = []
+  state,
+  regions = config.regions,
+  head = config.head,
+  merge: mergeStrategy = config.merge,
+  executeScripts: executeScriptsOption = config.executeScripts,
+  transitions = config.transitions,
+  loadingDelay = config.loadingDelay,
+  progressHideDelay = config.progressHideDelay
 } = {}) => {
-  if (emitEvents) emit("before-visit", { url, prevUrl });
+  url = normalizeUrl(url);
+  const fromUrl = currentUrl;
+  const fromState = currentState;
+  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 emit2("before-visit", {
+    from: { url: fromUrl, state: fromState, document },
+    to: { url, state },
+    signal,
+    isBackForward
+  });
+  if (signal.aborted) return;
   let newDocument;
   if (isBackForward) {
-    newDocument = cache.get(url)?.cloneNode(true);
+    const html = cache.get(url);
+    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 };
@@ -164,64 +342,251 @@ var visit = async (url, {
     }
   }
   if (!newDocument) return;
-  prevUrl = currentUrl;
+  if (signal.aborted) return;
   currentUrl = url;
-  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.simpleMerge || oldEl.dataset.simpleMerge || mergeStrategy;
+  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 emit2("before-swap", { from, to, isBackForward, signal });
+  if (signal.aborted) return;
+  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(
     (selector) => document.querySelector(selector) && newDocument.querySelector(selector)
   );
-  if (hasMatchingRegions) {
-    for (const id of regions) {
-      const region = document.querySelector(id);
-      const newRegion = newDocument.querySelector(id);
-      if (!region || !newRegion) continue;
+  const mergeRegions = async () => {
+    const scriptPromises = [];
+    if (hasMatchingRegions) {
+      for (const id of regions) {
+        const region = document.querySelector(id);
+        const parsedRegion = newDocument.querySelector(id);
+        if (!region || !parsedRegion) continue;
+        const newRegion = document.importNode(parsedRegion, true);
+        const strategy = getMergeStrategy(region, newRegion);
+        const result = await merge(
+          region,
+          newRegion,
+          strategy,
+          signal,
+          transition === "css"
+        );
+        autoFocusEl ??= result.autoFocusEl;
+        if (shouldExecuteScripts) {
+          const finalRegion = document.querySelector(id);
+          if (finalRegion) scriptPromises.push(executeScripts(finalRegion));
+        }
+      }
+    } else {
+      const region = document.body;
+      const newRegion = document.importNode(newDocument.body, true);
       const strategy = getMergeStrategy(region, newRegion);
-      const result = merge(region, newRegion, strategy);
-      autoFocusEl ??= result.autoFocusEl;
+      const result = await merge(region, newRegion, strategy, signal);
+      autoFocusEl = result.autoFocusEl;
+      if (shouldExecuteScripts) {
+        scriptPromises.push(executeScripts(document.body));
+      }
     }
+    if (scriptPromises.length) await Promise.all(scriptPromises);
+  };
+  if (fromUrl) scrollPositions.set(fromUrl, { top: window.scrollY });
+  const applyScrollBehavior = () => {
+    if (!config.scrollBehavior) return;
+    const savedPosition = isBackForward ? scrollPositions.get(url) : void 0;
+    const position = config.scrollBehavior({
+      from,
+      to,
+      isBackForward,
+      savedPosition
+    });
+    if (position) window.scrollTo(position);
+  };
+  if (transition === "view" && document.startViewTransition) {
+    await document.startViewTransition(async () => {
+      updateHead();
+      await mergeRegions();
+      await emit2("after-swap", { from, to, isBackForward, signal });
+      applyScrollBehavior();
+    }).updateCallbackDone;
   } else {
-    const region = document.body;
-    const newRegion = newDocument.body;
-    const strategy = getMergeStrategy(region, newRegion);
-    const result = merge(region, newRegion, strategy);
-    autoFocusEl = result.autoFocusEl;
+    updateHead();
+    await mergeRegions();
+    await emit2("after-swap", { from, to, isBackForward, signal });
+    applyScrollBehavior();
   }
-  if (autoFocus) autoFocusEl?.focus();
-  if (action === "replace") history.replaceState(null, "", url);
-  else if (action === "push") history.pushState(null, "", url);
-  if (emitEvents) emit("visit", { url, prevUrl });
+  if (signal.aborted) return;
+  if (autoFocus) autoFocusEl?.focus({ preventScroll: true });
+  emit2("load", { from, to, isBackForward });
 };
 
-// src/start.ts
-var start = ({
-  watchHistory = true,
-  merge: merge2 = "replace",
-  morphHeads = true,
-  loadingDelay = 500
-} = {}) => {
-  globalConfig.merge = merge2;
-  globalConfig.watchHistory = watchHistory;
-  globalConfig.morphHeads = morphHeads;
-  globalConfig.loadingDelay = loadingDelay;
-  if (watchHistory) {
-    window.addEventListener("popstate", () => {
-      visit(window.location.pathname + window.location.search, {
-        action: "none",
-        isBackForward: true
-      });
+// src/intercept.ts
+var interceptLinks = () => {
+  document.addEventListener("click", (e) => {
+    if (e.defaultPrevented || isModifiedClick(e)) return;
+    const target = e.composedPath ? e.composedPath()[0] : e.target;
+    const link = target?.closest?.("a");
+    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;
+    if (e.defaultPrevented || !(form instanceof HTMLFormElement) || form.hasAttribute(`${config.prefix}reload`))
+      return;
+    const submitter = e.submitter;
+    const formAction = typeof form.action === "string" ? form.action : form.getAttribute("action");
+    const formMethod = typeof form.method === "string" ? form.method : form.getAttribute("method");
+    const method = (submitter?.getAttribute("formmethod") ?? formMethod ?? "get").toLowerCase();
+    if (method === "dialog") return;
+    const action = submitter?.getAttribute("formaction") ?? formAction ?? location.href;
+    if (!isSameOrigin(action)) return;
+    const formData = new FormData(form, submitter ?? void 0);
+    let url = action;
+    const request = { method };
+    if (method === "get") {
+      const urlObj = new URL(action, location.href);
+      urlObj.search = new URLSearchParams(formData).toString();
+      url = urlObj.toString();
+    } else {
+      request.body = formData;
+    }
+    e.preventDefault();
+    visit(url, { history: "push", ...getVisitOptions(form), request });
+  });
+};
+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: regions ?? config.regions,
+      state: event.state
     });
+  });
+};
+var isSameOrigin = (url) => new URL(url, location.href).origin === location.origin;
+var isModifiedClick = (e) => e.button !== 0 || e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
+var getVisitOptions = (el) => {
+  const prefix = config.prefix;
+  const options = {};
+  const historyAttr = el.getAttribute(`${prefix}history`);
+  if (historyAttr) options.history = historyAttr;
+  const regions = el.getAttribute(`${prefix}regions`);
+  if (regions) {
+    options.regions = regions.split(",").map((region) => region.trim()).filter(Boolean);
+  }
+  const state = el.getAttribute(`${prefix}state`);
+  if (state) {
+    try {
+      options.state = JSON.parse(state);
+    } catch {
+      console.error(`Invalid ${prefix}state on`, el);
+    }
   }
+  const merge2 = el.getAttribute(`${prefix}merge`);
+  if (merge2) options.merge = merge2;
+  return options;
 };
 
-// src/index.ts
-var index_default = { start, visit };
+// 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"));
+    });
+  }
+};
 export {
-  index_default as default
+  scrollPositions,
+  start,
+  visit
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@very-simple/ajax",
-  "version": "0.7.1",
-  "description": "A very simple turbolinks inspired library",
+  "version": "1.0.0-beta.10",
+  "description": "A very simple turbolinks inspired ajax library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -10,12 +10,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/very-simple/ajax.git"
+    "url": "https://github.com/arnoson/very-simple-ajax.git"
   },
   "scripts": {
     "build": "tsup src/index.ts --dts --format esm",
     "dev": "vite",
     "test": "playwright test",
+    "test:types": "tsc --noEmit",
+    "size": "esbuild src/index.ts --bundle --minify --format=esm | gzip -c | wc -c",
     "release": "npm run build && npm run test && bumpp"
   },
   "author": "arnoson",
@@ -23,12 +25,11 @@
   "devDependencies": {
     "@picocss/pico": "^2.0.6",
     "@playwright/test": "^1.48.2",
-    "@types/node": "^22.0",
-    "@very-simple/components": "^0.6.0",
+    "@types/node": "^24",
     "bumpp": "^10.0.0",
     "tsup": "8",
-    "typescript": "^5",
-    "vite": "^6"
+    "typescript": "^6",
+    "vite": "^8"
   },
   "dependencies": {
     "idiomorph": "^0.7.0"