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

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,222 @@ 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.                       |
+
+```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',
+  // Morph the `<head>` instead of leaving it untouched.
+  morphHeads: true,
+  // Re-execute `<script>` tags found in the swapped content.
+  executeScripts: true,
+  // Wrap navigations in the View Transitions API, if supported.
+  viewTransitions: 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-',
+  // 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) => {},
+})
+```
+
+### `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,93 @@
-interface VisitOptions {
-    action?: 'push' | 'replace' | 'none';
-    emitEvents?: boolean;
+interface AjaxState extends Record<string, unknown> {
+    regions?: string[];
+}
+/** 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'>;
+}
+type StartOptions = Config;
+interface LoadingOptions {
     loadingDelay?: number;
     progressHideDelay?: number;
     request?: RequestInit;
-    regions?: string[];
 }
 type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
 interface Config {
-    watchHistory?: boolean;
+    /** 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;
+    /** 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;
+    /** 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;
 }
+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;
-    };
-    'before-visit': {
-        url: string;
-        prevUrl?: string;
-    };
-    'before-render': {
-        url: string;
-        prevUrl?: string;
-        newDocument: Document;
+    load: {
+        from: PageState;
+        to: PageState;
+        isBackForward: boolean;
     };
+    'before-visit': Payload;
+    'before-swap': Payload;
+    'after-swap': Payload;
 };
 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, morphHeads, merge: mergeStrategy, executeScripts: shouldExecuteScripts, viewTransitions, loadingDelay, progressHideDelay, }?: VisitOptions) => Promise<void>;
 
-export { _default as default };
+export { type AjaxState, type Config, type EventMap, type LoadingOptions, type MergeStrategy, type PageState, type ScrollBehavior, type ScrollPosition, type StartOptions, type VisitOptions, scrollPositions, start, visit };

package/dist/index.js

@@ -1,10 +1,12 @@
 // src/config.ts
-var globalConfig = {
-  watchHistory: true,
+var config = {
   morphHeads: true,
   merge: "replace",
+  executeScripts: true,
+  viewTransitions: false,
   loadingDelay: 500,
-  progressHideDelay: 500
+  progressHideDelay: 500,
+  prefix: "data-ajax-"
 };
 
 // src/load.ts
@@ -12,6 +14,7 @@ var parser = new DOMParser();
 var currentLoadController;
 var progress = 0;
 var trickleInterval;
+var cache = /* @__PURE__ */ new Map();
 var load = async (url, regions, options) => {
   let progressDelayTimeout;
   try {
@@ -27,14 +30,15 @@ var load = async (url, regions, options) => {
       ...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");
-    return { document: document2, url: response.url };
+    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";
@@ -49,6 +53,7 @@ var load = async (url, regions, options) => {
     setTimeout(() => toggleProgress(false), options.progressHideDelay);
   }
 };
+var parseHtml = (html) => parser.parseFromString(html, "text/html");
 var trickle = () => {
   const amount = -0.095 * progress + 0.1;
   setProgress(progress + Math.random() * amount);
@@ -58,167 +63,364 @@ var stopTrickle = () => clearInterval(trickleInterval);
 var setProgress = (value) => {
   progress = value;
   document.documentElement.style.setProperty(
-    "--simple-progress",
+    "--ajax-progress",
     `${Math.round(value * 1e4) / 100}%`
   );
 };
-var toggleProgress = (state) => document.documentElement.toggleAttribute("data-simple-progress", state);
-var toggleLoading = (state) => document.documentElement.toggleAttribute("data-simple-loading", state);
+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) => {
   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(`#${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));
+    Array.from(
+      newRegion.querySelectorAll(`[${escapedPrefix}permanent][id]`)
+    ).forEach((el) => {
+      const original = permanents.get(el.id);
+      if (original) el.replaceWith(original);
+    });
+    mount?.(strategy === "replace" ? newRegion : region);
   } 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) {
+  if (newRegion.hasAttribute(`${prefix}autofocus`) || newRegion.autofocus) {
     autoFocusEl ??= newRegion;
   }
-  autoFocusEl ??= newRegion.querySelector("[data-simple-autofocus]") ?? newRegion.querySelector("[autofocus]") ?? void 0;
+  autoFocusEl ??= newRegion.querySelector(`[${escapedPrefix}autofocus]`) ?? newRegion.querySelector("[autofocus]") ?? void 0;
   return { autoFocusEl };
 };
 var morph = (container, newContainer) => {
+  const { prefix, mount, unmount } = config;
   const manualReplacements = [];
   let 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]);
       },
       beforeAttributeUpdated: (name) => {
         return !currentNodeKeepAttributes.includes(name);
       },
+      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(_, newNode) {
-        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.dataset.simpleAutofocus)) {
+        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.hasAttribute(`${prefix}autofocus`))) {
           autoFocusEls.push(newNode);
         }
       }
     }
   });
-  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 emit = (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 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 = [],
+  morphHeads = config.morphHeads,
+  merge: mergeStrategy = config.merge,
+  executeScripts: shouldExecuteScripts = config.executeScripts,
+  viewTransitions = config.viewTransitions,
+  loadingDelay = config.loadingDelay,
+  progressHideDelay = config.progressHideDelay
 } = {}) => {
-  prevUrl = currentUrl;
-  currentUrl = url;
-  if (emitEvents) emit("before-visit", { url, prevUrl });
+  url = normalizeUrl(url);
+  const fromUrl = currentUrl;
+  const fromState = currentState;
+  state = { ...state, regions };
+  currentVisitController?.abort();
+  currentVisitController = new AbortController();
+  const { signal } = currentVisitController;
+  if (url === currentUrl) historyMode = "none";
+  await emit("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) newDocument = parseHtml(html);
   }
   if (!newDocument) {
     const options = { loadingDelay, progressHideDelay, request };
     const result = await load(url, regions, options);
-    if (result) ({ url, document: newDocument } = result);
+    if (result) {
+      newDocument = result.document;
+      url = result.response.redirected ? result.response.url : url;
+    }
   }
   if (!newDocument) return;
-  if (emitEvents) emit("before-render", { url, prevUrl, newDocument });
-  if (!isBackForward) {
-    const cacheId = window.location.pathname + window.location.search;
-    cache.set(cacheId, document.cloneNode(true));
-  }
+  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 });
+  if (signal.aborted) return;
   if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
-  const getMergeStrategy = (oldEl, newEl) => newEl.dataset.simpleMerge || oldEl.dataset.simpleMerge || mergeStrategy;
+  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 newRegion = newDocument.querySelector(id);
+        if (!region || !newRegion) continue;
+        const strategy = getMergeStrategy(region, newRegion);
+        const result = merge(region, newRegion, strategy);
+        autoFocusEl ??= result.autoFocusEl;
+        if (shouldExecuteScripts) {
+          const finalRegion = document.querySelector(id);
+          if (finalRegion) scriptPromises.push(executeScripts(finalRegion));
+        }
+      }
+    } else {
+      const region = document.body;
+      const newRegion = newDocument.body;
       const strategy = getMergeStrategy(region, newRegion);
       const result = merge(region, newRegion, strategy);
-      autoFocusEl ??= result.autoFocusEl;
+      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 (config.render) {
+    await config.render(newDocument);
+  } else if (viewTransitions && document.startViewTransition) {
+    await document.startViewTransition(async () => {
+      await mergeRegions();
+      await emit("after-swap", { from, to, isBackForward, signal });
+      applyScrollBehavior();
+    }).ready;
   } else {
-    const region = document.body;
-    const newRegion = newDocument.body;
-    const strategy = getMergeStrategy(region, newRegion);
-    const result = merge(region, newRegion, strategy);
-    autoFocusEl = result.autoFocusEl;
+    await mergeRegions();
+    await emit("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 });
+  emit("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 || !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;
+    e.preventDefault();
+    visit(link.href, { history: "push", ...getVisitOptions(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;
+    visit(window.location.href, {
+      history: "none",
+      isBackForward: true,
+      regions: currentState?.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);
+  if (config.scrollBehavior) history.scrollRestoration = "manual";
+  interceptLinks();
+  interceptForms();
+  interceptHistory();
+  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.0",
-  "description": "A very simple turbolinks inspired library",
+  "version": "1.0.0-beta.1",
+  "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"