@hotwired/turbo 8.0.0-beta.1 → 8.0.0-beta.3

package/dist/turbo.es2017-esm.js

@@ -1,6 +1,6 @@
 /*!
-Turbo 8.0.0-beta.1
-Copyright © 2023 37signals LLC
+Turbo 8.0.0-beta.3
+Copyright © 2024 37signals LLC
  */
 /**
  * The MIT License (MIT)
@@ -633,13 +633,61 @@ async function around(callback, reader) {
   return [before, after]
 }
 
-function fetch(url, options = {}) {
+function doesNotTargetIFrame(anchor) {
+  if (anchor.hasAttribute("target")) {
+    for (const element of document.getElementsByName(anchor.target)) {
+      if (element instanceof HTMLIFrameElement) return false
+    }
+  }
+
+  return true
+}
+
+function findLinkFromClickTarget(target) {
+  return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])")
+}
+
+function getLocationForLink(link) {
+  return expandURL(link.getAttribute("href") || "")
+}
+
+function debounce(fn, delay) {
+  let timeoutId = null;
+
+  return (...args) => {
+    const callback = () => fn.apply(this, args);
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(callback, delay);
+  }
+}
+
+class LimitedSet extends Set {
+  constructor(maxSize) {
+    super();
+    this.maxSize = maxSize;
+  }
+
+  add(value) {
+    if (this.size >= this.maxSize) {
+      const iterator = this.values();
+      const oldestValue = iterator.next().value;
+      this.delete(oldestValue);
+    }
+    super.add(value);
+  }
+}
+
+const recentRequests = new LimitedSet(20);
+
+const nativeFetch = window.fetch;
+
+function fetchWithTurboHeaders(url, options = {}) {
   const modifiedHeaders = new Headers(options.headers || {});
   const requestUID = uuid();
-  window.Turbo.session.recentRequests.add(requestUID);
+  recentRequests.add(requestUID);
   modifiedHeaders.append("X-Turbo-Request-Id", requestUID);
 
-  return window.fetch(url, {
+  return nativeFetch(url, {
     ...options,
     headers: modifiedHeaders
   })
@@ -763,10 +811,17 @@ class FetchRequest {
   async perform() {
     const { fetchOptions } = this;
     this.delegate.prepareRequest(this);
-    await this.#allowRequestToBeIntercepted(fetchOptions);
+    const event = await this.#allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
-      const response = await fetch(this.url.href, fetchOptions);
+
+      if (event.detail.fetchRequest) {
+        this.response = event.detail.fetchRequest.response;
+      } else {
+        this.response = fetchWithTurboHeaders(this.url.href, fetchOptions);
+      }
+
+      const response = await this.response;
       return await this.receive(response)
     } catch (error) {
       if (error.name !== "AbortError") {
@@ -828,6 +883,8 @@ class FetchRequest {
     });
     this.url = event.detail.url;
     if (event.defaultPrevented) await requestInterception;
+
+    return event
   }
 
   #willDelegateErrorHandling(error) {
@@ -938,6 +995,41 @@ function importStreamElements(fragment) {
   return fragment
 }
 
+const PREFETCH_DELAY = 100;
+
+class PrefetchCache {
+  #prefetchTimeout = null
+  #prefetched = null
+
+  get(url) {
+    if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
+      return this.#prefetched.request
+    }
+  }
+
+  setLater(url, request, ttl) {
+    this.clear();
+
+    this.#prefetchTimeout = setTimeout(() => {
+      request.perform();
+      this.set(url, request, ttl);
+      this.#prefetchTimeout = null;
+    }, PREFETCH_DELAY);
+  }
+
+  set(url, request, ttl) {
+    this.#prefetched = { url, request, expire: new Date(new Date().getTime() + ttl) };
+  }
+
+  clear() {
+    if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout);
+    this.#prefetched = null;
+  }
+}
+
+const cacheTtl = 10 * 1000;
+const prefetchCache = new PrefetchCache();
+
 const FormSubmissionState = {
   initialized: "initialized",
   requesting: "requesting",
@@ -1046,6 +1138,7 @@ class FormSubmission {
     this.state = FormSubmissionState.waiting;
     this.submitter?.setAttribute("disabled", "");
     this.setSubmitsWith();
+    markAsBusy(this.formElement);
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: { formSubmission: this }
@@ -1054,13 +1147,20 @@ class FormSubmission {
   }
 
   requestPreventedHandlingResponse(request, response) {
+    prefetchCache.clear();
+
     this.result = { success: response.succeeded, fetchResponse: response };
   }
 
   requestSucceededWithResponse(request, response) {
     if (response.clientError || response.serverError) {
       this.delegate.formSubmissionFailedWithResponse(this, response);
-    } else if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
+      return
+    }
+
+    prefetchCache.clear();
+
+    if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
       const error = new Error("Form responses must redirect to another location");
       this.delegate.formSubmissionErrored(this, error);
     } else {
@@ -1084,6 +1184,7 @@ class FormSubmission {
     this.state = FormSubmissionState.stopped;
     this.submitter?.removeAttribute("disabled");
     this.resetSubmitterText();
+    clearBusyState(this.formElement);
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: { formSubmission: this, ...this.result }
@@ -1377,7 +1478,7 @@ class View {
 
         const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve));
         const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement };
-        const immediateRender = this.delegate.allowsImmediateRender(snapshot, isPreview, options);
+        const immediateRender = this.delegate.allowsImmediateRender(snapshot, options);
         if (!immediateRender) await renderInterception;
 
         await this.renderSnapshot(renderer);
@@ -1411,6 +1512,14 @@ class View {
     }
   }
 
+  markVisitDirection(direction) {
+    this.element.setAttribute("data-turbo-visit-direction", direction);
+  }
+
+  unmarkVisitDirection() {
+    this.element.removeAttribute("data-turbo-visit-direction");
+  }
+
   async renderSnapshot(renderer) {
     await renderer.render();
   }
@@ -1507,9 +1616,9 @@ class LinkClickObserver {
   clickBubbled = (event) => {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = (event.composedPath && event.composedPath()[0]) || event.target;
-      const link = this.findLinkFromClickTarget(target);
+      const link = findLinkFromClickTarget(target);
       if (link && doesNotTargetIFrame(link)) {
-        const location = this.getLocationForLink(link);
+        const location = getLocationForLink(link);
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault();
           this.delegate.followedLinkToLocation(link, location);
@@ -1529,26 +1638,6 @@ class LinkClickObserver {
       event.shiftKey
     )
   }
-
-  findLinkFromClickTarget(target) {
-    return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])")
-  }
-
-  getLocationForLink(link) {
-    return expandURL(link.getAttribute("href") || "")
-  }
-}
-
-function doesNotTargetIFrame(anchor) {
-  if (anchor.hasAttribute("target")) {
-    for (const element of document.getElementsByName(anchor.target)) {
-      if (element instanceof HTMLIFrameElement) return false
-    }
-
-    return true
-  } else {
-    return true
-  }
 }
 
 class FormLinkClickObserver {
@@ -1565,6 +1654,16 @@ class FormLinkClickObserver {
     this.linkInterceptor.stop();
   }
 
+  // Link hover observer delegate
+
+  canPrefetchRequestToLocation(link, location) {
+    return false
+  }
+
+  prefetchAndCacheRequestToLocation(link, location) {
+    return
+  }
+
   // Link click observer delegate
 
   willFollowLinkToLocation(link, location, originalEvent) {
@@ -1780,14 +1879,14 @@ class FrameRenderer extends Renderer {
   }
 
   async render() {
-    await nextAnimationFrame();
+    await nextRepaint();
     this.preservingPermanentElements(() => {
       this.loadFrameElement();
     });
     this.scrollFrameIntoView();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.focusFirstAutofocusableElement();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.activateScriptElements();
   }
 
@@ -1838,6 +1937,8 @@ function readScrollBehavior(value, defaultValue) {
   }
 }
 
+const ProgressBarID = "turbo-progress-bar";
+
 class ProgressBar {
   static animationDuration = 300 /*ms*/
 
@@ -1942,6 +2043,8 @@ class ProgressBar {
 
   createStylesheetElement() {
     const element = document.createElement("style");
+    element.id = ProgressBarID;
+    element.setAttribute("data-turbo-permanent", "");
     element.type = "text/css";
     element.textContent = ProgressBar.defaultCSS;
     if (this.cspNonce) {
@@ -2213,6 +2316,12 @@ const SystemStatusCode = {
   contentTypeMismatch: -2
 };
 
+const Direction = {
+  advance: "forward",
+  restore: "back",
+  replace: "none"
+};
+
 class Visit {
   identifier = uuid() // Required by turbo-ios
   timingMetrics = {}
@@ -2242,7 +2351,8 @@ class Visit {
       willRender,
       updateHistory,
       shouldCacheSnapshot,
-      acceptsStreamResponse
+      acceptsStreamResponse,
+      direction
     } = {
       ...defaultOptions,
       ...options
@@ -2260,6 +2370,7 @@ class Visit {
     this.scrolled = !willRender;
     this.shouldCacheSnapshot = shouldCacheSnapshot;
     this.acceptsStreamResponse = acceptsStreamResponse;
+    this.direction = direction || Direction[action];
   }
 
   get adapter() {
@@ -2512,7 +2623,7 @@ class Visit {
   // Scrolling
 
   performScroll() {
-    if (!this.scrolled && !this.view.forceReloaded && !this.view.snapshot.shouldPreserveScrollPosition) {
+    if (!this.scrolled && !this.view.forceReloaded && !this.view.shouldPreserveScrollPosition(this)) {
       if (this.action == "restore") {
         this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
       } else {
@@ -2587,9 +2698,7 @@ class Visit {
 
   async render(callback) {
     this.cancelRender();
-    await new Promise((resolve) => {
-      this.frame = requestAnimationFrame(() => resolve());
-    });
+    this.frame = await nextRepaint();
     await callback();
     delete this.frame;
   }
@@ -2867,6 +2976,7 @@ class History {
   restorationData = {}
   started = false
   pageLoaded = false
+  currentIndex = 0
 
   constructor(delegate) {
     this.delegate = delegate;
@@ -2876,6 +2986,7 @@ class History {
     if (!this.started) {
       addEventListener("popstate", this.onPopState, false);
       addEventListener("load", this.onPageLoad, false);
+      this.currentIndex = history.state?.turbo?.restorationIndex || 0;
       this.started = true;
       this.replace(new URL(window.location.href));
     }
@@ -2898,7 +3009,9 @@ class History {
   }
 
   update(method, location, restorationIdentifier = uuid()) {
-    const state = { turbo: { restorationIdentifier } };
+    if (method === history.pushState) ++this.currentIndex;
+
+    const state = { turbo: { restorationIdentifier, restorationIndex: this.currentIndex } };
     method.call(history, state, "", location.href);
     this.location = location;
     this.restorationIdentifier = restorationIdentifier;
@@ -2942,9 +3055,11 @@ class History {
       const { turbo } = event.state || {};
       if (turbo) {
         this.location = new URL(window.location.href);
-        const { restorationIdentifier } = turbo;
+        const { restorationIdentifier, restorationIndex } = turbo;
         this.restorationIdentifier = restorationIdentifier;
-        this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
+        const direction = restorationIndex > this.currentIndex ? "forward" : "back";
+        this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction);
+        this.currentIndex = restorationIndex;
       }
     }
   }
@@ -2966,6 +3081,176 @@ class History {
   }
 }
 
+class LinkPrefetchObserver {
+  started = false
+  hoverTriggerEvent = "mouseenter"
+  touchTriggerEvent = "touchstart"
+
+  constructor(delegate, eventTarget) {
+    this.delegate = delegate;
+    this.eventTarget = eventTarget;
+  }
+
+  start() {
+    if (this.started) return
+
+    if (this.eventTarget.readyState === "loading") {
+      this.eventTarget.addEventListener("DOMContentLoaded", this.#enable, { once: true });
+    } else {
+      this.#enable();
+    }
+  }
+
+  stop() {
+    if (!this.started) return
+
+    this.eventTarget.removeEventListener(this.hoverTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.removeEventListener(this.touchTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.removeEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
+    this.started = false;
+  }
+
+  #enable = () => {
+    this.eventTarget.addEventListener(this.hoverTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.addEventListener(this.touchTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.addEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
+    this.started = true;
+  }
+
+  #tryToPrefetchRequest = (event) => {
+    if (getMetaContent("turbo-prefetch") !== "true") return
+
+    const target = event.target;
+    const isLink = target.matches && target.matches("a[href]:not([target^=_]):not([download])");
+
+    if (isLink && this.#isPrefetchable(target)) {
+      const link = target;
+      const location = getLocationForLink(link);
+
+      if (this.delegate.canPrefetchRequestToLocation(link, location)) {
+        const fetchRequest = new FetchRequest(
+          this,
+          FetchMethod.get,
+          location,
+          new URLSearchParams(),
+          target
+        );
+
+        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl);
+
+        link.addEventListener("mouseleave", () => prefetchCache.clear(), { once: true });
+      }
+    }
+  }
+
+  #tryToUsePrefetchedRequest = (event) => {
+    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+      const cached = prefetchCache.get(event.detail.url.toString());
+
+      if (cached) {
+        // User clicked link, use cache response
+        event.detail.fetchRequest = cached;
+      }
+
+      prefetchCache.clear();
+    }
+  }
+
+  prepareRequest(request) {
+    const link = request.target;
+
+    request.headers["Sec-Purpose"] = "prefetch";
+
+    if (link.dataset.turboFrame && link.dataset.turboFrame !== "_top") {
+      request.headers["Turbo-Frame"] = link.dataset.turboFrame;
+    } else if (link.dataset.turboFrame !== "_top") {
+      const turboFrame = link.closest("turbo-frame");
+
+      if (turboFrame) {
+        request.headers["Turbo-Frame"] = turboFrame.id;
+      }
+    }
+
+    if (link.hasAttribute("data-turbo-stream")) {
+      request.acceptResponseType("text/vnd.turbo-stream.html");
+    }
+  }
+
+  // Fetch request interface
+
+  requestSucceededWithResponse() {}
+
+  requestStarted(fetchRequest) {}
+
+  requestErrored(fetchRequest) {}
+
+  requestFinished(fetchRequest) {}
+
+  requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
+
+  requestFailedWithResponse(fetchRequest, fetchResponse) {}
+
+  get #cacheTtl() {
+    return Number(getMetaContent("turbo-prefetch-cache-time")) || cacheTtl
+  }
+
+  #isPrefetchable(link) {
+    const href = link.getAttribute("href");
+
+    if (!href || href === "#" || link.dataset.turbo === "false" || link.dataset.turboPrefetch === "false") {
+      return false
+    }
+
+    if (link.origin !== document.location.origin) {
+      return false
+    }
+
+    if (!["http:", "https:"].includes(link.protocol)) {
+      return false
+    }
+
+    if (link.pathname + link.search === document.location.pathname + document.location.search) {
+      return false
+    }
+
+    if (link.dataset.turboMethod && link.dataset.turboMethod !== "get") {
+      return false
+    }
+
+    if (targetsIframe(link)) {
+      return false
+    }
+
+    if (link.pathname + link.search === document.location.pathname + document.location.search) {
+      return false
+    }
+
+    const turboPrefetchParent = findClosestRecursively(link, "[data-turbo-prefetch]");
+
+    if (turboPrefetchParent && turboPrefetchParent.dataset.turboPrefetch === "false") {
+      return false
+    }
+
+    return true
+  }
+}
+
+const targetsIframe = (link) => {
+  return !doesNotTargetIFrame(link)
+};
+
 class Navigator {
   constructor(delegate) {
     this.delegate = delegate;
@@ -3281,7 +3566,7 @@ async function withAutofocusFromFragment(fragment, callback) {
   }
 
   callback();
-  await nextAnimationFrame();
+  await nextRepaint();
 
   const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
 
@@ -3436,722 +3721,838 @@ class ErrorRenderer extends Renderer {
   }
 }
 
-let EMPTY_SET = new Set();
+// base IIFE to define idiomorph
+var Idiomorph = (function () {
 
-//=============================================================================
-// Core Morphing Algorithm - morph, morphNormalizedContent, morphOldNodeTo, morphChildren
-//=============================================================================
-function morph(oldNode, newContent, config = {}) {
+        //=============================================================================
+        // AND NOW IT BEGINS...
+        //=============================================================================
+        let EMPTY_SET = new Set();
 
-    if (oldNode instanceof Document) {
-        oldNode = oldNode.documentElement;
-    }
-
-    if (typeof newContent === 'string') {
-        newContent = parseContent(newContent);
-    }
-
-    let normalizedContent = normalizeContent(newContent);
-
-    let ctx = createMorphContext(oldNode, normalizedContent, config);
-
-    return morphNormalizedContent(oldNode, normalizedContent, ctx);
-}
+        // default configuration values, updatable by users now
+        let defaults = {
+            morphStyle: "outerHTML",
+            callbacks : {
+                beforeNodeAdded: noOp,
+                afterNodeAdded: noOp,
+                beforeNodeMorphed: noOp,
+                afterNodeMorphed: noOp,
+                beforeNodeRemoved: noOp,
+                afterNodeRemoved: noOp,
+                beforeAttributeUpdated: noOp,
 
-function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
-    if (ctx.head.block) {
-        let oldHead = oldNode.querySelector('head');
-        let newHead = normalizedNewContent.querySelector('head');
-        if (oldHead && newHead) {
-            let promises = handleHeadElement(newHead, oldHead, ctx);
-            // when head promises resolve, call morph again, ignoring the head tag
-            Promise.all(promises).then(function () {
-                morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
-                    head: {
-                        block: false,
-                        ignore: true
-                    }
-                }));
-            });
-            return;
-        }
-    }
+            },
+            head: {
+                style: 'merge',
+                shouldPreserve: function (elt) {
+                    return elt.getAttribute("im-preserve") === "true";
+                },
+                shouldReAppend: function (elt) {
+                    return elt.getAttribute("im-re-append") === "true";
+                },
+                shouldRemove: noOp,
+                afterHeadMorphed: noOp,
+            }
+        };
 
-    if (ctx.morphStyle === "innerHTML") {
+        //=============================================================================
+        // Core Morphing Algorithm - morph, morphNormalizedContent, morphOldNodeTo, morphChildren
+        //=============================================================================
+        function morph(oldNode, newContent, config = {}) {
 
-        // innerHTML, so we are only updating the children
-        morphChildren(normalizedNewContent, oldNode, ctx);
-        return oldNode.children;
+            if (oldNode instanceof Document) {
+                oldNode = oldNode.documentElement;
+            }
 
-    } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
-        // otherwise find the best element match in the new content, morph that, and merge its siblings
-        // into either side of the best match
-        let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
+            if (typeof newContent === 'string') {
+                newContent = parseContent(newContent);
+            }
 
-        // stash the siblings that will need to be inserted on either side of the best match
-        let previousSibling = bestMatch?.previousSibling;
-        let nextSibling = bestMatch?.nextSibling;
+            let normalizedContent = normalizeContent(newContent);
 
-        // morph it
-        let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
+            let ctx = createMorphContext(oldNode, normalizedContent, config);
 
-        if (bestMatch) {
-            // if there was a best match, merge the siblings in too and return the
-            // whole bunch
-            return insertSiblings(previousSibling, morphedNode, nextSibling);
-        } else {
-            // otherwise nothing was added to the DOM
-            return []
+            return morphNormalizedContent(oldNode, normalizedContent, ctx);
         }
-    } else {
-        throw "Do not understand how to morph style " + ctx.morphStyle;
-    }
-}
-
 
+        function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
+            if (ctx.head.block) {
+                let oldHead = oldNode.querySelector('head');
+                let newHead = normalizedNewContent.querySelector('head');
+                if (oldHead && newHead) {
+                    let promises = handleHeadElement(newHead, oldHead, ctx);
+                    // when head promises resolve, call morph again, ignoring the head tag
+                    Promise.all(promises).then(function () {
+                        morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
+                            head: {
+                                block: false,
+                                ignore: true
+                            }
+                        }));
+                    });
+                    return;
+                }
+            }
 
-/**
- * @param oldNode root node to merge content into
- * @param newContent new content to merge
- * @param ctx the merge context
- * @returns {Element} the element that ended up in the DOM
- */
-function morphOldNodeTo(oldNode, newContent, ctx) {
-    if (ctx.ignoreActive && oldNode === document.activeElement) ; else if (newContent == null) {
-        if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return;
-
-        oldNode.remove();
-        ctx.callbacks.afterNodeRemoved(oldNode);
-        return null;
-    } else if (!isSoftMatch(oldNode, newContent)) {
-        if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return;
-        if (ctx.callbacks.beforeNodeAdded(newContent) === false) return;
-
-        oldNode.parentElement.replaceChild(newContent, oldNode);
-        ctx.callbacks.afterNodeAdded(newContent);
-        ctx.callbacks.afterNodeRemoved(oldNode);
-        return newContent;
-    } else {
-        if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) return;
+            if (ctx.morphStyle === "innerHTML") {
 
-        if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (oldNode instanceof HTMLHeadElement && ctx.head.style !== "morph") {
-            handleHeadElement(newContent, oldNode, ctx);
-        } else {
-            syncNodeFrom(newContent, oldNode);
-            morphChildren(newContent, oldNode, ctx);
-        }
-        ctx.callbacks.afterNodeMorphed(oldNode, newContent);
-        return oldNode;
-    }
-}
+                // innerHTML, so we are only updating the children
+                morphChildren(normalizedNewContent, oldNode, ctx);
+                return oldNode.children;
 
-/**
- * This is the core algorithm for matching up children.  The idea is to use id sets to try to match up
- * nodes as faithfully as possible.  We greedily match, which allows us to keep the algorithm fast, but
- * by using id sets, we are able to better match up with content deeper in the DOM.
- *
- * Basic algorithm is, for each node in the new content:
- *
- * - if we have reached the end of the old parent, append the new content
- * - if the new content has an id set match with the current insertion point, morph
- * - search for an id set match
- * - if id set match found, morph
- * - otherwise search for a "soft" match
- * - if a soft match is found, morph
- * - otherwise, prepend the new node before the current insertion point
- *
- * The two search algorithms terminate if competing node matches appear to outweigh what can be achieved
- * with the current node.  See findIdSetMatch() and findSoftMatch() for details.
- *
- * @param {Element} newParent the parent element of the new content
- * @param {Element } oldParent the old content that we are merging the new content into
- * @param ctx the merge context
- */
-function morphChildren(newParent, oldParent, ctx) {
+            } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
+                // otherwise find the best element match in the new content, morph that, and merge its siblings
+                // into either side of the best match
+                let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
 
-    let nextNewChild = newParent.firstChild;
-    let insertionPoint = oldParent.firstChild;
-    let newChild;
+                // stash the siblings that will need to be inserted on either side of the best match
+                let previousSibling = bestMatch?.previousSibling;
+                let nextSibling = bestMatch?.nextSibling;
 
-    // run through all the new content
-    while (nextNewChild) {
+                // morph it
+                let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
 
-        newChild = nextNewChild;
-        nextNewChild = newChild.nextSibling;
+                if (bestMatch) {
+                    // if there was a best match, merge the siblings in too and return the
+                    // whole bunch
+                    return insertSiblings(previousSibling, morphedNode, nextSibling);
+                } else {
+                    // otherwise nothing was added to the DOM
+                    return []
+                }
+            } else {
+                throw "Do not understand how to morph style " + ctx.morphStyle;
+            }
+        }
 
-        // if we are at the end of the exiting parent's children, just append
-        if (insertionPoint == null) {
-            if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
 
-            oldParent.appendChild(newChild);
-            ctx.callbacks.afterNodeAdded(newChild);
-            removeIdsFromConsideration(ctx, newChild);
-            continue;
+        /**
+         * @param possibleActiveElement
+         * @param ctx
+         * @returns {boolean}
+         */
+        function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
         }
 
-        // if the current node has an id set match then morph
-        if (isIdSetMatch(newChild, insertionPoint, ctx)) {
-            morphOldNodeTo(insertionPoint, newChild, ctx);
-            insertionPoint = insertionPoint.nextSibling;
-            removeIdsFromConsideration(ctx, newChild);
-            continue;
+        /**
+         * @param oldNode root node to merge content into
+         * @param newContent new content to merge
+         * @param ctx the merge context
+         * @returns {Element} the element that ended up in the DOM
+         */
+        function morphOldNodeTo(oldNode, newContent, ctx) {
+            if (ctx.ignoreActive && oldNode === document.activeElement) ; else if (newContent == null) {
+                if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return oldNode;
+
+                oldNode.remove();
+                ctx.callbacks.afterNodeRemoved(oldNode);
+                return null;
+            } else if (!isSoftMatch(oldNode, newContent)) {
+                if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return oldNode;
+                if (ctx.callbacks.beforeNodeAdded(newContent) === false) return oldNode;
+
+                oldNode.parentElement.replaceChild(newContent, oldNode);
+                ctx.callbacks.afterNodeAdded(newContent);
+                ctx.callbacks.afterNodeRemoved(oldNode);
+                return newContent;
+            } else {
+                if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) return oldNode;
+
+                if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (oldNode instanceof HTMLHeadElement && ctx.head.style !== "morph") {
+                    handleHeadElement(newContent, oldNode, ctx);
+                } else {
+                    syncNodeFrom(newContent, oldNode, ctx);
+                    if (!ignoreValueOfActiveElement(oldNode, ctx)) {
+                        morphChildren(newContent, oldNode, ctx);
+                    }
+                }
+                ctx.callbacks.afterNodeMorphed(oldNode, newContent);
+                return oldNode;
+            }
         }
 
-        // otherwise search forward in the existing old children for an id set match
-        let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
+        /**
+         * This is the core algorithm for matching up children.  The idea is to use id sets to try to match up
+         * nodes as faithfully as possible.  We greedily match, which allows us to keep the algorithm fast, but
+         * by using id sets, we are able to better match up with content deeper in the DOM.
+         *
+         * Basic algorithm is, for each node in the new content:
+         *
+         * - if we have reached the end of the old parent, append the new content
+         * - if the new content has an id set match with the current insertion point, morph
+         * - search for an id set match
+         * - if id set match found, morph
+         * - otherwise search for a "soft" match
+         * - if a soft match is found, morph
+         * - otherwise, prepend the new node before the current insertion point
+         *
+         * The two search algorithms terminate if competing node matches appear to outweigh what can be achieved
+         * with the current node.  See findIdSetMatch() and findSoftMatch() for details.
+         *
+         * @param {Element} newParent the parent element of the new content
+         * @param {Element } oldParent the old content that we are merging the new content into
+         * @param ctx the merge context
+         */
+        function morphChildren(newParent, oldParent, ctx) {
+
+            let nextNewChild = newParent.firstChild;
+            let insertionPoint = oldParent.firstChild;
+            let newChild;
+
+            // run through all the new content
+            while (nextNewChild) {
+
+                newChild = nextNewChild;
+                nextNewChild = newChild.nextSibling;
+
+                // if we are at the end of the exiting parent's children, just append
+                if (insertionPoint == null) {
+                    if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
+
+                    oldParent.appendChild(newChild);
+                    ctx.callbacks.afterNodeAdded(newChild);
+                    removeIdsFromConsideration(ctx, newChild);
+                    continue;
+                }
 
-        // if we found a potential match, remove the nodes until that point and morph
-        if (idSetMatch) {
-            insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
-            morphOldNodeTo(idSetMatch, newChild, ctx);
-            removeIdsFromConsideration(ctx, newChild);
-            continue;
-        }
+                // if the current node has an id set match then morph
+                if (isIdSetMatch(newChild, insertionPoint, ctx)) {
+                    morphOldNodeTo(insertionPoint, newChild, ctx);
+                    insertionPoint = insertionPoint.nextSibling;
+                    removeIdsFromConsideration(ctx, newChild);
+                    continue;
+                }
 
-        // no id set match found, so scan forward for a soft match for the current node
-        let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
+                // otherwise search forward in the existing old children for an id set match
+                let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
 
-        // if we found a soft match for the current node, morph
-        if (softMatch) {
-            insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
-            morphOldNodeTo(softMatch, newChild, ctx);
-            removeIdsFromConsideration(ctx, newChild);
-            continue;
-        }
+                // if we found a potential match, remove the nodes until that point and morph
+                if (idSetMatch) {
+                    insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
+                    morphOldNodeTo(idSetMatch, newChild, ctx);
+                    removeIdsFromConsideration(ctx, newChild);
+                    continue;
+                }
 
-        // abandon all hope of morphing, just insert the new child before the insertion point
-        // and move on
-        if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
+                // no id set match found, so scan forward for a soft match for the current node
+                let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
 
-        oldParent.insertBefore(newChild, insertionPoint);
-        ctx.callbacks.afterNodeAdded(newChild);
-        removeIdsFromConsideration(ctx, newChild);
-    }
+                // if we found a soft match for the current node, morph
+                if (softMatch) {
+                    insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
+                    morphOldNodeTo(softMatch, newChild, ctx);
+                    removeIdsFromConsideration(ctx, newChild);
+                    continue;
+                }
 
-    // remove any remaining old nodes that didn't match up with new content
-    while (insertionPoint !== null) {
+                // abandon all hope of morphing, just insert the new child before the insertion point
+                // and move on
+                if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
 
-        let tempNode = insertionPoint;
-        insertionPoint = insertionPoint.nextSibling;
-        removeNode(tempNode, ctx);
-    }
-}
+                oldParent.insertBefore(newChild, insertionPoint);
+                ctx.callbacks.afterNodeAdded(newChild);
+                removeIdsFromConsideration(ctx, newChild);
+            }
 
-//=============================================================================
-// Attribute Syncing Code
-//=============================================================================
+            // remove any remaining old nodes that didn't match up with new content
+            while (insertionPoint !== null) {
 
-/**
- * syncs a given node with another node, copying over all attributes and
- * inner element state from the 'from' node to the 'to' node
- *
- * @param {Element} from the element to copy attributes & state from
- * @param {Element} to the element to copy attributes & state to
- */
-function syncNodeFrom(from, to) {
-    let type = from.nodeType;
-
-    // if is an element type, sync the attributes from the
-    // new node into the new node
-    if (type === 1 /* element type */) {
-        const fromAttributes = from.attributes;
-        const toAttributes = to.attributes;
-        for (const fromAttribute of fromAttributes) {
-            if (to.getAttribute(fromAttribute.name) !== fromAttribute.value) {
-                to.setAttribute(fromAttribute.name, fromAttribute.value);
+                let tempNode = insertionPoint;
+                insertionPoint = insertionPoint.nextSibling;
+                removeNode(tempNode, ctx);
             }
         }
-        for (const toAttribute of toAttributes) {
-            if (!from.hasAttribute(toAttribute.name)) {
-                to.removeAttribute(toAttribute.name);
+
+        //=============================================================================
+        // Attribute Syncing Code
+        //=============================================================================
+
+        /**
+         * @param attr {String} the attribute to be mutated
+         * @param to {Element} the element that is going to be updated
+         * @param updateType {("update"|"remove")}
+         * @param ctx the merge context
+         * @returns {boolean} true if the attribute should be ignored, false otherwise
+         */
+        function ignoreAttribute(attr, to, updateType, ctx) {
+            if(attr === 'value' && ctx.ignoreActiveValue && to === document.activeElement){
+                return true;
             }
+            return ctx.callbacks.beforeAttributeUpdated(attr, to, updateType) === false;
         }
-    }
 
-    // sync text nodes
-    if (type === 8 /* comment */ || type === 3 /* text */) {
-        if (to.nodeValue !== from.nodeValue) {
-            to.nodeValue = from.nodeValue;
-        }
-    }
+        /**
+         * syncs a given node with another node, copying over all attributes and
+         * inner element state from the 'from' node to the 'to' node
+         *
+         * @param {Element} from the element to copy attributes & state from
+         * @param {Element} to the element to copy attributes & state to
+         * @param ctx the merge context
+         */
+        function syncNodeFrom(from, to, ctx) {
+            let type = from.nodeType;
+
+            // if is an element type, sync the attributes from the
+            // new node into the new node
+            if (type === 1 /* element type */) {
+                const fromAttributes = from.attributes;
+                const toAttributes = to.attributes;
+                for (const fromAttribute of fromAttributes) {
+                    if (ignoreAttribute(fromAttribute.name, to, 'update', ctx)) {
+                        continue;
+                    }
+                    if (to.getAttribute(fromAttribute.name) !== fromAttribute.value) {
+                        to.setAttribute(fromAttribute.name, fromAttribute.value);
+                    }
+                }
+                // iterate backwards to avoid skipping over items when a delete occurs
+                for (let i = toAttributes.length - 1; 0 <= i; i--) {
+                    const toAttribute = toAttributes[i];
+                    if (ignoreAttribute(toAttribute.name, to, 'remove', ctx)) {
+                        continue;
+                    }
+                    if (!from.hasAttribute(toAttribute.name)) {
+                        to.removeAttribute(toAttribute.name);
+                    }
+                }
+            }
 
-    // NB: many bothans died to bring us information:
-    //
-    // https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js
-    // https://github.com/choojs/nanomorph/blob/master/lib/morph.jsL113
-
-    // sync input value
-    if (from instanceof HTMLInputElement &&
-        to instanceof HTMLInputElement &&
-        from.type !== 'file') {
-
-        to.value = from.value || '';
-        syncAttribute(from, to, 'value');
-
-        // sync boolean attributes
-        syncAttribute(from, to, 'checked');
-        syncAttribute(from, to, 'disabled');
-    } else if (from instanceof HTMLOptionElement) {
-        syncAttribute(from, to, 'selected');
-    } else if (from instanceof HTMLTextAreaElement && to instanceof HTMLTextAreaElement) {
-        let fromValue = from.value;
-        let toValue = to.value;
-        if (fromValue !== toValue) {
-            to.value = fromValue;
-        }
-        if (to.firstChild && to.firstChild.nodeValue !== fromValue) {
-            to.firstChild.nodeValue = fromValue;
-        }
-    }
-}
+            // sync text nodes
+            if (type === 8 /* comment */ || type === 3 /* text */) {
+                if (to.nodeValue !== from.nodeValue) {
+                    to.nodeValue = from.nodeValue;
+                }
+            }
 
-function syncAttribute(from, to, attributeName) {
-    if (from[attributeName] !== to[attributeName]) {
-        if (from[attributeName]) {
-            to.setAttribute(attributeName, from[attributeName]);
-        } else {
-            to.removeAttribute(attributeName);
+            if (!ignoreValueOfActiveElement(to, ctx)) {
+                // sync input values
+                syncInputValue(from, to, ctx);
+            }
         }
-    }
-}
 
-//=============================================================================
-// the HEAD tag can be handled specially, either w/ a 'merge' or 'append' style
-//=============================================================================
-function handleHeadElement(newHeadTag, currentHead, ctx) {
+        /**
+         * @param from {Element} element to sync the value from
+         * @param to {Element} element to sync the value to
+         * @param attributeName {String} the attribute name
+         * @param ctx the merge context
+         */
+        function syncBooleanAttribute(from, to, attributeName, ctx) {
+            if (from[attributeName] !== to[attributeName]) {
+                let ignoreUpdate = ignoreAttribute(attributeName, to, 'update', ctx);
+                if (!ignoreUpdate) {
+                    to[attributeName] = from[attributeName];
+                }
+                if (from[attributeName]) {
+                    if (!ignoreUpdate) {
+                        to.setAttribute(attributeName, from[attributeName]);
+                    }
+                } else {
+                    if (!ignoreAttribute(attributeName, to, 'remove', ctx)) {
+                        to.removeAttribute(attributeName);
+                    }
+                }
+            }
+        }
 
-    let added = [];
-    let removed = [];
-    let preserved = [];
-    let nodesToAppend = [];
+        /**
+         * NB: many bothans died to bring us information:
+         *
+         *  https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js
+         *  https://github.com/choojs/nanomorph/blob/master/lib/morph.jsL113
+         *
+         * @param from {Element} the element to sync the input value from
+         * @param to {Element} the element to sync the input value to
+         * @param ctx the merge context
+         */
+        function syncInputValue(from, to, ctx) {
+            if (from instanceof HTMLInputElement &&
+                to instanceof HTMLInputElement &&
+                from.type !== 'file') {
+
+                let fromValue = from.value;
+                let toValue = to.value;
+
+                // sync boolean attributes
+                syncBooleanAttribute(from, to, 'checked', ctx);
+                syncBooleanAttribute(from, to, 'disabled', ctx);
+
+                if (!from.hasAttribute('value')) {
+                    if (!ignoreAttribute('value', to, 'remove', ctx)) {
+                        to.value = '';
+                        to.removeAttribute('value');
+                    }
+                } else if (fromValue !== toValue) {
+                    if (!ignoreAttribute('value', to, 'update', ctx)) {
+                        to.setAttribute('value', fromValue);
+                        to.value = fromValue;
+                    }
+                }
+            } else if (from instanceof HTMLOptionElement) {
+                syncBooleanAttribute(from, to, 'selected', ctx);
+            } else if (from instanceof HTMLTextAreaElement && to instanceof HTMLTextAreaElement) {
+                let fromValue = from.value;
+                let toValue = to.value;
+                if (ignoreAttribute('value', to, 'update', ctx)) {
+                    return;
+                }
+                if (fromValue !== toValue) {
+                    to.value = fromValue;
+                }
+                if (to.firstChild && to.firstChild.nodeValue !== fromValue) {
+                    to.firstChild.nodeValue = fromValue;
+                }
+            }
+        }
 
-    let headMergeStyle = ctx.head.style;
+        //=============================================================================
+        // the HEAD tag can be handled specially, either w/ a 'merge' or 'append' style
+        //=============================================================================
+        function handleHeadElement(newHeadTag, currentHead, ctx) {
 
-    // put all new head elements into a Map, by their outerHTML
-    let srcToNewHeadNodes = new Map();
-    for (const newHeadChild of newHeadTag.children) {
-        srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
-    }
+            let added = [];
+            let removed = [];
+            let preserved = [];
+            let nodesToAppend = [];
 
-    // for each elt in the current head
-    for (const currentHeadElt of currentHead.children) {
+            let headMergeStyle = ctx.head.style;
 
-        // If the current head element is in the map
-        let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
-        let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
-        let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
-        if (inNewContent || isPreserved) {
-            if (isReAppended) {
-                // remove the current version and let the new version replace it and re-execute
-                removed.push(currentHeadElt);
-            } else {
-                // this element already exists and should not be re-appended, so remove it from
-                // the new content map, preserving it in the DOM
-                srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
-                preserved.push(currentHeadElt);
+            // put all new head elements into a Map, by their outerHTML
+            let srcToNewHeadNodes = new Map();
+            for (const newHeadChild of newHeadTag.children) {
+                srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
             }
-        } else {
-            if (headMergeStyle === "append") {
-                // we are appending and this existing element is not new content
-                // so if and only if it is marked for re-append do we do anything
-                if (isReAppended) {
-                    removed.push(currentHeadElt);
-                    nodesToAppend.push(currentHeadElt);
+
+            // for each elt in the current head
+            for (const currentHeadElt of currentHead.children) {
+
+                // If the current head element is in the map
+                let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
+                let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
+                let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
+                if (inNewContent || isPreserved) {
+                    if (isReAppended) {
+                        // remove the current version and let the new version replace it and re-execute
+                        removed.push(currentHeadElt);
+                    } else {
+                        // this element already exists and should not be re-appended, so remove it from
+                        // the new content map, preserving it in the DOM
+                        srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
+                        preserved.push(currentHeadElt);
+                    }
+                } else {
+                    if (headMergeStyle === "append") {
+                        // we are appending and this existing element is not new content
+                        // so if and only if it is marked for re-append do we do anything
+                        if (isReAppended) {
+                            removed.push(currentHeadElt);
+                            nodesToAppend.push(currentHeadElt);
+                        }
+                    } else {
+                        // if this is a merge, we remove this content since it is not in the new head
+                        if (ctx.head.shouldRemove(currentHeadElt) !== false) {
+                            removed.push(currentHeadElt);
+                        }
+                    }
                 }
-            } else {
-                // if this is a merge, we remove this content since it is not in the new head
-                if (ctx.head.shouldRemove(currentHeadElt) !== false) {
-                    removed.push(currentHeadElt);
+            }
+
+            // Push the remaining new head elements in the Map into the
+            // nodes to append to the head tag
+            nodesToAppend.push(...srcToNewHeadNodes.values());
+
+            let promises = [];
+            for (const newNode of nodesToAppend) {
+                let newElt = document.createRange().createContextualFragment(newNode.outerHTML).firstChild;
+                if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
+                    if (newElt.href || newElt.src) {
+                        let resolve = null;
+                        let promise = new Promise(function (_resolve) {
+                            resolve = _resolve;
+                        });
+                        newElt.addEventListener('load', function () {
+                            resolve();
+                        });
+                        promises.push(promise);
+                    }
+                    currentHead.appendChild(newElt);
+                    ctx.callbacks.afterNodeAdded(newElt);
+                    added.push(newElt);
                 }
             }
-        }
-    }
 
-    // Push the remaining new head elements in the Map into the
-    // nodes to append to the head tag
-    nodesToAppend.push(...srcToNewHeadNodes.values());
-
-    let promises = [];
-    for (const newNode of nodesToAppend) {
-        let newElt = document.createRange().createContextualFragment(newNode.outerHTML).firstChild;
-        if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
-            if (newElt.href || newElt.src) {
-                let resolve = null;
-                let promise = new Promise(function (_resolve) {
-                    resolve = _resolve;
-                });
-                newElt.addEventListener('load',function() {
-                    resolve();
-                });
-                promises.push(promise);
+            // remove all removed elements, after we have appended the new elements to avoid
+            // additional network requests for things like style sheets
+            for (const removedElement of removed) {
+                if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
+                    currentHead.removeChild(removedElement);
+                    ctx.callbacks.afterNodeRemoved(removedElement);
+                }
             }
-            currentHead.appendChild(newElt);
-            ctx.callbacks.afterNodeAdded(newElt);
-            added.push(newElt);
-        }
-    }
 
-    // remove all removed elements, after we have appended the new elements to avoid
-    // additional network requests for things like style sheets
-    for (const removedElement of removed) {
-        if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
-            currentHead.removeChild(removedElement);
-            ctx.callbacks.afterNodeRemoved(removedElement);
+            ctx.head.afterHeadMorphed(currentHead, {added: added, kept: preserved, removed: removed});
+            return promises;
         }
-    }
 
-    ctx.head.afterHeadMorphed(currentHead, {added: added, kept: preserved, removed: removed});
-    return promises;
-}
+        function noOp() {
+        }
 
-function noOp() {}
+        /*
+          Deep merges the config object and the Idiomoroph.defaults object to
+          produce a final configuration object
+         */
+        function mergeDefaults(config) {
+            let finalConfig = {};
+            // copy top level stuff into final config
+            Object.assign(finalConfig, defaults);
+            Object.assign(finalConfig, config);
+
+            // copy callbacks into final config (do this to deep merge the callbacks)
+            finalConfig.callbacks = {};
+            Object.assign(finalConfig.callbacks, defaults.callbacks);
+            Object.assign(finalConfig.callbacks, config.callbacks);
+
+            // copy head config into final config  (do this to deep merge the head)
+            finalConfig.head = {};
+            Object.assign(finalConfig.head, defaults.head);
+            Object.assign(finalConfig.head, config.head);
+            return finalConfig;
+        }
 
-function createMorphContext(oldNode, newContent, config) {
-    return {
-        target:oldNode,
-        newContent: newContent,
-        config: config,
-        morphStyle : config.morphStyle,
-        ignoreActive : config.ignoreActive,
-        idMap: createIdMap(oldNode, newContent),
-        deadIds: new Set(),
-        callbacks: Object.assign({
-            beforeNodeAdded: noOp,
-            afterNodeAdded : noOp,
-            beforeNodeMorphed: noOp,
-            afterNodeMorphed : noOp,
-            beforeNodeRemoved: noOp,
-            afterNodeRemoved : noOp,
-
-        }, config.callbacks),
-        head: Object.assign({
-            style: 'merge',
-            shouldPreserve : function(elt) {
-                return elt.getAttribute("im-preserve") === "true";
-            },
-            shouldReAppend : function(elt) {
-                return elt.getAttribute("im-re-append") === "true";
-            },
-            shouldRemove : noOp,
-            afterHeadMorphed : noOp,
-        }, config.head),
-    }
-}
+        function createMorphContext(oldNode, newContent, config) {
+            config = mergeDefaults(config);
+            return {
+                target: oldNode,
+                newContent: newContent,
+                config: config,
+                morphStyle: config.morphStyle,
+                ignoreActive: config.ignoreActive,
+                ignoreActiveValue: config.ignoreActiveValue,
+                idMap: createIdMap(oldNode, newContent),
+                deadIds: new Set(),
+                callbacks: config.callbacks,
+                head: config.head
+            }
+        }
 
-function isIdSetMatch(node1, node2, ctx) {
-    if (node1 == null || node2 == null) {
-        return false;
-    }
-    if (node1.nodeType === node2.nodeType && node1.tagName === node2.tagName) {
-        if (node1.id !== "" && node1.id === node2.id) {
-            return true;
-        } else {
-            return getIdIntersectionCount(ctx, node1, node2) > 0;
+        function isIdSetMatch(node1, node2, ctx) {
+            if (node1 == null || node2 == null) {
+                return false;
+            }
+            if (node1.nodeType === node2.nodeType && node1.tagName === node2.tagName) {
+                if (node1.id !== "" && node1.id === node2.id) {
+                    return true;
+                } else {
+                    return getIdIntersectionCount(ctx, node1, node2) > 0;
+                }
+            }
+            return false;
         }
-    }
-    return false;
-}
 
-function isSoftMatch(node1, node2) {
-    if (node1 == null || node2 == null) {
-        return false;
-    }
-    return node1.nodeType === node2.nodeType && node1.tagName === node2.tagName
-}
+        function isSoftMatch(node1, node2) {
+            if (node1 == null || node2 == null) {
+                return false;
+            }
+            return node1.nodeType === node2.nodeType && node1.tagName === node2.tagName
+        }
 
-function removeNodesBetween(startInclusive, endExclusive, ctx) {
-    while (startInclusive !== endExclusive) {
-        let tempNode = startInclusive;
-        startInclusive = startInclusive.nextSibling;
-        removeNode(tempNode, ctx);
-    }
-    removeIdsFromConsideration(ctx, endExclusive);
-    return endExclusive.nextSibling;
-}
+        function removeNodesBetween(startInclusive, endExclusive, ctx) {
+            while (startInclusive !== endExclusive) {
+                let tempNode = startInclusive;
+                startInclusive = startInclusive.nextSibling;
+                removeNode(tempNode, ctx);
+            }
+            removeIdsFromConsideration(ctx, endExclusive);
+            return endExclusive.nextSibling;
+        }
 
-//=============================================================================
-// Scans forward from the insertionPoint in the old parent looking for a potential id match
-// for the newChild.  We stop if we find a potential id match for the new child OR
-// if the number of potential id matches we are discarding is greater than the
-// potential id matches for the new child
-//=============================================================================
-function findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+        //=============================================================================
+        // Scans forward from the insertionPoint in the old parent looking for a potential id match
+        // for the newChild.  We stop if we find a potential id match for the new child OR
+        // if the number of potential id matches we are discarding is greater than the
+        // potential id matches for the new child
+        //=============================================================================
+        function findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+
+            // max id matches we are willing to discard in our search
+            let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
+
+            let potentialMatch = null;
+
+            // only search forward if there is a possibility of an id match
+            if (newChildPotentialIdCount > 0) {
+                let potentialMatch = insertionPoint;
+                // if there is a possibility of an id match, scan forward
+                // keep track of the potential id match count we are discarding (the
+                // newChildPotentialIdCount must be greater than this to make it likely
+                // worth it)
+                let otherMatchCount = 0;
+                while (potentialMatch != null) {
+
+                    // If we have an id match, return the current potential match
+                    if (isIdSetMatch(newChild, potentialMatch, ctx)) {
+                        return potentialMatch;
+                    }
 
-    // max id matches we are willing to discard in our search
-    let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
+                    // computer the other potential matches of this new content
+                    otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
+                    if (otherMatchCount > newChildPotentialIdCount) {
+                        // if we have more potential id matches in _other_ content, we
+                        // do not have a good candidate for an id match, so return null
+                        return null;
+                    }
 
-    let potentialMatch = null;
+                    // advanced to the next old content child
+                    potentialMatch = potentialMatch.nextSibling;
+                }
+            }
+            return potentialMatch;
+        }
 
-    // only search forward if there is a possibility of an id match
-    if (newChildPotentialIdCount > 0) {
-        let potentialMatch = insertionPoint;
-        // if there is a possibility of an id match, scan forward
-        // keep track of the potential id match count we are discarding (the
-        // newChildPotentialIdCount must be greater than this to make it likely
-        // worth it)
-        let otherMatchCount = 0;
-        while (potentialMatch != null) {
+        //=============================================================================
+        // Scans forward from the insertionPoint in the old parent looking for a potential soft match
+        // for the newChild.  We stop if we find a potential soft match for the new child OR
+        // if we find a potential id match in the old parents children OR if we find two
+        // potential soft matches for the next two pieces of new content
+        //=============================================================================
+        function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
 
-            // If we have an id match, return the current potential match
-            if (isIdSetMatch(newChild, potentialMatch, ctx)) {
-                return potentialMatch;
-            }
+            let potentialSoftMatch = insertionPoint;
+            let nextSibling = newChild.nextSibling;
+            let siblingSoftMatchCount = 0;
 
-            // computer the other potential matches of this new content
-            otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
-            if (otherMatchCount > newChildPotentialIdCount) {
-                // if we have more potential id matches in _other_ content, we
-                // do not have a good candidate for an id match, so return null
-                return null;
-            }
+            while (potentialSoftMatch != null) {
 
-            // advanced to the next old content child
-            potentialMatch = potentialMatch.nextSibling;
-        }
-    }
-    return potentialMatch;
-}
+                if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
+                    // the current potential soft match has a potential id set match with the remaining new
+                    // content so bail out of looking
+                    return null;
+                }
 
-//=============================================================================
-// Scans forward from the insertionPoint in the old parent looking for a potential soft match
-// for the newChild.  We stop if we find a potential soft match for the new child OR
-// if we find a potential id match in the old parents children OR if we find two
-// potential soft matches for the next two pieces of new content
-//=============================================================================
-function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+                // if we have a soft match with the current node, return it
+                if (isSoftMatch(newChild, potentialSoftMatch)) {
+                    return potentialSoftMatch;
+                }
 
-    let potentialSoftMatch = insertionPoint;
-    let nextSibling = newChild.nextSibling;
-    let siblingSoftMatchCount = 0;
+                if (isSoftMatch(nextSibling, potentialSoftMatch)) {
+                    // the next new node has a soft match with this node, so
+                    // increment the count of future soft matches
+                    siblingSoftMatchCount++;
+                    nextSibling = nextSibling.nextSibling;
 
-    while (potentialSoftMatch != null) {
+                    // If there are two future soft matches, bail to allow the siblings to soft match
+                    // so that we don't consume future soft matches for the sake of the current node
+                    if (siblingSoftMatchCount >= 2) {
+                        return null;
+                    }
+                }
 
-        if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
-            // the current potential soft match has a potential id set match with the remaining new
-            // content so bail out of looking
-            return null;
-        }
+                // advanced to the next old content child
+                potentialSoftMatch = potentialSoftMatch.nextSibling;
+            }
 
-        // if we have a soft match with the current node, return it
-        if (isSoftMatch(newChild, potentialSoftMatch)) {
             return potentialSoftMatch;
         }
 
-        if (isSoftMatch(nextSibling, potentialSoftMatch)) {
-            // the next new node has a soft match with this node, so
-            // increment the count of future soft matches
-            siblingSoftMatchCount++;
-            nextSibling = nextSibling.nextSibling;
-
-            // If there are two future soft matches, bail to allow the siblings to soft match
-            // so that we don't consume future soft matches for the sake of the current node
-            if (siblingSoftMatchCount >= 2) {
-                return null;
+        function parseContent(newContent) {
+            let parser = new DOMParser();
+
+            // remove svgs to avoid false-positive matches on head, etc.
+            let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
+
+            // if the newContent contains a html, head or body tag, we can simply parse it w/o wrapping
+            if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
+                let content = parser.parseFromString(newContent, "text/html");
+                // if it is a full HTML document, return the document itself as the parent container
+                if (contentWithSvgsRemoved.match(/<\/html>/)) {
+                    content.generatedByIdiomorph = true;
+                    return content;
+                } else {
+                    // otherwise return the html element as the parent container
+                    let htmlElement = content.firstChild;
+                    if (htmlElement) {
+                        htmlElement.generatedByIdiomorph = true;
+                        return htmlElement;
+                    } else {
+                        return null;
+                    }
+                }
+            } else {
+                // if it is partial HTML, wrap it in a template tag to provide a parent element and also to help
+                // deal with touchy tags like tr, tbody, etc.
+                let responseDoc = parser.parseFromString("<body><template>" + newContent + "</template></body>", "text/html");
+                let content = responseDoc.body.querySelector('template').content;
+                content.generatedByIdiomorph = true;
+                return content
             }
         }
 
-        // advanced to the next old content child
-        potentialSoftMatch = potentialSoftMatch.nextSibling;
-    }
-
-    return potentialSoftMatch;
-}
-
-function parseContent(newContent) {
-    let parser = new DOMParser();
-
-    // remove svgs to avoid false-positive matches on head, etc.
-    let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
-
-    // if the newContent contains a html, head or body tag, we can simply parse it w/o wrapping
-    if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
-        let content = parser.parseFromString(newContent, "text/html");
-        // if it is a full HTML document, return the document itself as the parent container
-        if (contentWithSvgsRemoved.match(/<\/html>/)) {
-            content.generatedByIdiomorph = true;
-            return content;
-        } else {
-            // otherwise return the html element as the parent container
-            let htmlElement = content.firstChild;
-            if (htmlElement) {
-                htmlElement.generatedByIdiomorph = true;
-                return htmlElement;
+        function normalizeContent(newContent) {
+            if (newContent == null) {
+                // noinspection UnnecessaryLocalVariableJS
+                const dummyParent = document.createElement('div');
+                return dummyParent;
+            } else if (newContent.generatedByIdiomorph) {
+                // the template tag created by idiomorph parsing can serve as a dummy parent
+                return newContent;
+            } else if (newContent instanceof Node) {
+                // a single node is added as a child to a dummy parent
+                const dummyParent = document.createElement('div');
+                dummyParent.append(newContent);
+                return dummyParent;
             } else {
-                return null;
+                // all nodes in the array or HTMLElement collection are consolidated under
+                // a single dummy parent element
+                const dummyParent = document.createElement('div');
+                for (const elt of [...newContent]) {
+                    dummyParent.append(elt);
+                }
+                return dummyParent;
             }
         }
-    } else {
-        // if it is partial HTML, wrap it in a template tag to provide a parent element and also to help
-        // deal with touchy tags like tr, tbody, etc.
-        let responseDoc = parser.parseFromString("<body><template>" + newContent + "</template></body>", "text/html");
-        let content = responseDoc.body.querySelector('template').content;
-        content.generatedByIdiomorph = true;
-        return content
-    }
-}
-
-function normalizeContent(newContent) {
-    if (newContent == null) {
-        // noinspection UnnecessaryLocalVariableJS
-        const dummyParent = document.createElement('div');
-        return dummyParent;
-    } else if (newContent.generatedByIdiomorph) {
-        // the template tag created by idiomorph parsing can serve as a dummy parent
-        return newContent;
-    } else if (newContent instanceof Node) {
-        // a single node is added as a child to a dummy parent
-        const dummyParent = document.createElement('div');
-        dummyParent.append(newContent);
-        return dummyParent;
-    } else {
-        // all nodes in the array or HTMLElement collection are consolidated under
-        // a single dummy parent element
-        const dummyParent = document.createElement('div');
-        for (const elt of [...newContent]) {
-            dummyParent.append(elt);
-        }
-        return dummyParent;
-    }
-}
 
-function insertSiblings(previousSibling, morphedNode, nextSibling) {
-    let stack = [];
-    let added = [];
-    while (previousSibling != null) {
-        stack.push(previousSibling);
-        previousSibling = previousSibling.previousSibling;
-    }
-    while (stack.length > 0) {
-        let node = stack.pop();
-        added.push(node); // push added preceding siblings on in order and insert
-        morphedNode.parentElement.insertBefore(node, morphedNode);
-    }
-    added.push(morphedNode);
-    while (nextSibling != null) {
-        stack.push(nextSibling);
-        added.push(nextSibling); // here we are going in order, so push on as we scan, rather than add
-        nextSibling = nextSibling.nextSibling;
-    }
-    while (stack.length > 0) {
-        morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
-    }
-    return added;
-}
+        function insertSiblings(previousSibling, morphedNode, nextSibling) {
+            let stack = [];
+            let added = [];
+            while (previousSibling != null) {
+                stack.push(previousSibling);
+                previousSibling = previousSibling.previousSibling;
+            }
+            while (stack.length > 0) {
+                let node = stack.pop();
+                added.push(node); // push added preceding siblings on in order and insert
+                morphedNode.parentElement.insertBefore(node, morphedNode);
+            }
+            added.push(morphedNode);
+            while (nextSibling != null) {
+                stack.push(nextSibling);
+                added.push(nextSibling); // here we are going in order, so push on as we scan, rather than add
+                nextSibling = nextSibling.nextSibling;
+            }
+            while (stack.length > 0) {
+                morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
+            }
+            return added;
+        }
 
-function findBestNodeMatch(newContent, oldNode, ctx) {
-    let currentElement;
-    currentElement = newContent.firstChild;
-    let bestElement = currentElement;
-    let score = 0;
-    while (currentElement) {
-        let newScore = scoreElement(currentElement, oldNode, ctx);
-        if (newScore > score) {
-            bestElement = currentElement;
-            score = newScore;
+        function findBestNodeMatch(newContent, oldNode, ctx) {
+            let currentElement;
+            currentElement = newContent.firstChild;
+            let bestElement = currentElement;
+            let score = 0;
+            while (currentElement) {
+                let newScore = scoreElement(currentElement, oldNode, ctx);
+                if (newScore > score) {
+                    bestElement = currentElement;
+                    score = newScore;
+                }
+                currentElement = currentElement.nextSibling;
+            }
+            return bestElement;
         }
-        currentElement = currentElement.nextSibling;
-    }
-    return bestElement;
-}
 
-function scoreElement(node1, node2, ctx) {
-    if (isSoftMatch(node1, node2)) {
-        return .5 + getIdIntersectionCount(ctx, node1, node2);
-    }
-    return 0;
-}
+        function scoreElement(node1, node2, ctx) {
+            if (isSoftMatch(node1, node2)) {
+                return .5 + getIdIntersectionCount(ctx, node1, node2);
+            }
+            return 0;
+        }
 
-function removeNode(tempNode, ctx) {
-    removeIdsFromConsideration(ctx, tempNode);
-    if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
+        function removeNode(tempNode, ctx) {
+            removeIdsFromConsideration(ctx, tempNode);
+            if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
 
-    tempNode.remove();
-    ctx.callbacks.afterNodeRemoved(tempNode);
-}
+            tempNode.remove();
+            ctx.callbacks.afterNodeRemoved(tempNode);
+        }
 
-//=============================================================================
-// ID Set Functions
-//=============================================================================
+        //=============================================================================
+        // ID Set Functions
+        //=============================================================================
 
-function isIdInConsideration(ctx, id) {
-    return !ctx.deadIds.has(id);
-}
+        function isIdInConsideration(ctx, id) {
+            return !ctx.deadIds.has(id);
+        }
 
-function idIsWithinNode(ctx, id, targetNode) {
-    let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
-    return idSet.has(id);
-}
+        function idIsWithinNode(ctx, id, targetNode) {
+            let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
+            return idSet.has(id);
+        }
 
-function removeIdsFromConsideration(ctx, node) {
-    let idSet = ctx.idMap.get(node) || EMPTY_SET;
-    for (const id of idSet) {
-        ctx.deadIds.add(id);
-    }
-}
+        function removeIdsFromConsideration(ctx, node) {
+            let idSet = ctx.idMap.get(node) || EMPTY_SET;
+            for (const id of idSet) {
+                ctx.deadIds.add(id);
+            }
+        }
 
-function getIdIntersectionCount(ctx, node1, node2) {
-    let sourceSet = ctx.idMap.get(node1) || EMPTY_SET;
-    let matchCount = 0;
-    for (const id of sourceSet) {
-        // a potential match is an id in the source and potentialIdsSet, but
-        // that has not already been merged into the DOM
-        if (isIdInConsideration(ctx, id) && idIsWithinNode(ctx, id, node2)) {
-            ++matchCount;
+        function getIdIntersectionCount(ctx, node1, node2) {
+            let sourceSet = ctx.idMap.get(node1) || EMPTY_SET;
+            let matchCount = 0;
+            for (const id of sourceSet) {
+                // a potential match is an id in the source and potentialIdsSet, but
+                // that has not already been merged into the DOM
+                if (isIdInConsideration(ctx, id) && idIsWithinNode(ctx, id, node2)) {
+                    ++matchCount;
+                }
+            }
+            return matchCount;
         }
-    }
-    return matchCount;
-}
 
-/**
- * A bottom up algorithm that finds all elements with ids inside of the node
- * argument and populates id sets for those nodes and all their parents, generating
- * a set of ids contained within all nodes for the entire hierarchy in the DOM
- *
- * @param node {Element}
- * @param {Map<Node, Set<String>>} idMap
- */
-function populateIdMapForNode(node, idMap) {
-    let nodeParent = node.parentElement;
-    // find all elements with an id property
-    let idElements = node.querySelectorAll('[id]');
-    for (const elt of idElements) {
-        let current = elt;
-        // walk up the parent hierarchy of that element, adding the id
-        // of element to the parent's id set
-        while (current !== nodeParent && current != null) {
-            let idSet = idMap.get(current);
-            // if the id set doesn't exist, create it and insert it in the  map
-            if (idSet == null) {
-                idSet = new Set();
-                idMap.set(current, idSet);
+        /**
+         * A bottom up algorithm that finds all elements with ids inside of the node
+         * argument and populates id sets for those nodes and all their parents, generating
+         * a set of ids contained within all nodes for the entire hierarchy in the DOM
+         *
+         * @param node {Element}
+         * @param {Map<Node, Set<String>>} idMap
+         */
+        function populateIdMapForNode(node, idMap) {
+            let nodeParent = node.parentElement;
+            // find all elements with an id property
+            let idElements = node.querySelectorAll('[id]');
+            for (const elt of idElements) {
+                let current = elt;
+                // walk up the parent hierarchy of that element, adding the id
+                // of element to the parent's id set
+                while (current !== nodeParent && current != null) {
+                    let idSet = idMap.get(current);
+                    // if the id set doesn't exist, create it and insert it in the  map
+                    if (idSet == null) {
+                        idSet = new Set();
+                        idMap.set(current, idSet);
+                    }
+                    idSet.add(elt.id);
+                    current = current.parentElement;
+                }
             }
-            idSet.add(elt.id);
-            current = current.parentElement;
         }
-    }
-}
 
-/**
- * This function computes a map of nodes to all ids contained within that node (inclusive of the
- * node).  This map can be used to ask if two nodes have intersecting sets of ids, which allows
- * for a looser definition of "matching" than tradition id matching, and allows child nodes
- * to contribute to a parent nodes matching.
- *
- * @param {Element} oldContent  the old content that will be morphed
- * @param {Element} newContent  the new content to morph to
- * @returns {Map<Node, Set<String>>} a map of nodes to id sets for the
- */
-function createIdMap(oldContent, newContent) {
-    let idMap = new Map();
-    populateIdMapForNode(oldContent, idMap);
-    populateIdMapForNode(newContent, idMap);
-    return idMap;
-}
+        /**
+         * This function computes a map of nodes to all ids contained within that node (inclusive of the
+         * node).  This map can be used to ask if two nodes have intersecting sets of ids, which allows
+         * for a looser definition of "matching" than tradition id matching, and allows child nodes
+         * to contribute to a parent nodes matching.
+         *
+         * @param {Element} oldContent  the old content that will be morphed
+         * @param {Element} newContent  the new content to morph to
+         * @returns {Map<Node, Set<String>>} a map of nodes to id sets for the
+         */
+        function createIdMap(oldContent, newContent) {
+            let idMap = new Map();
+            populateIdMapForNode(oldContent, idMap);
+            populateIdMapForNode(newContent, idMap);
+            return idMap;
+        }
 
-//=============================================================================
-// This is what ends up becoming the Idiomorph export
-//=============================================================================
-var idiomorph = { morph };
+        //=============================================================================
+        // This is what ends up becoming the Idiomorph global object
+        //=============================================================================
+        return {
+            morph,
+            defaults
+        }
+    })();
 
 class MorphRenderer extends Renderer {
   async render() {
@@ -4179,7 +4580,7 @@ class MorphRenderer extends Renderer {
   #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
     this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
 
-    idiomorph.morph(currentElement, newElement, {
+    Idiomorph.morph(currentElement, newElement, {
       morphStyle: morphStyle,
       callbacks: {
         beforeNodeAdded: this.#shouldAddElement,
@@ -4311,8 +4712,13 @@ class PageRenderer extends Renderer {
     const mergedHeadElements = this.mergeProvisionalElements();
     const newStylesheetElements = this.copyNewHeadStylesheetElements();
     this.copyNewHeadScriptElements();
+
     await mergedHeadElements;
     await newStylesheetElements;
+
+    if (this.willRender) {
+      this.removeUnusedHeadStylesheetElements();
+    }
   }
 
   async replaceBody() {
@@ -4344,6 +4750,12 @@ class PageRenderer extends Renderer {
     }
   }
 
+  removeUnusedHeadStylesheetElements() {
+    for (const element of this.unusedHeadStylesheetElements) {
+      document.head.removeChild(element);
+    }
+  }
+
   async mergeProvisionalElements() {
     const newHeadElements = [...this.newHeadProvisionalElements];
 
@@ -4409,6 +4821,20 @@ class PageRenderer extends Renderer {
     await this.renderElement(this.currentElement, this.newElement);
   }
 
+  get unusedHeadStylesheetElements() {
+    return this.oldHeadStylesheetElements.filter((element) => {
+      return !(element.hasAttribute("data-turbo-permanent") ||
+        // Trix dynamically adds styles to the head that we want to keep around which have a
+        // `data-tag-name` attribute. Long term we should moves those styles to Trix's CSS file
+        // but for now we'll just skip removing them
+        element.hasAttribute("data-tag-name"))
+    })
+  }
+
+  get oldHeadStylesheetElements() {
+    return this.currentHeadSnapshot.getStylesheetElementsNotInSnapshot(this.newHeadSnapshot)
+  }
+
   get newHeadStylesheetElements() {
     return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot)
   }
@@ -4535,7 +4961,11 @@ class PageView extends View {
   }
 
   isPageRefresh(visit) {
-    return !visit || (this.lastRenderedLocation.href === visit.location.href && visit.action === "replace")
+    return !visit || (this.lastRenderedLocation.pathname === visit.location.pathname && visit.action === "replace")
+  }
+
+  shouldPreserveScrollPosition(visit) {
+    return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition
   }
 
   get snapshot() {
@@ -4546,27 +4976,28 @@ class PageView extends View {
 class Preloader {
   selector = "a[data-turbo-preload]"
 
-  constructor(delegate) {
+  constructor(delegate, snapshotCache) {
     this.delegate = delegate;
-  }
-
-  get snapshotCache() {
-    return this.delegate.navigator.view.snapshotCache
+    this.snapshotCache = snapshotCache;
   }
 
   start() {
     if (document.readyState === "loading") {
-      return document.addEventListener("DOMContentLoaded", () => {
-        this.preloadOnLoadLinksForView(document.body);
-      })
+      document.addEventListener("DOMContentLoaded", this.#preloadAll);
     } else {
       this.preloadOnLoadLinksForView(document.body);
     }
   }
 
+  stop() {
+    document.removeEventListener("DOMContentLoaded", this.#preloadAll);
+  }
+
   preloadOnLoadLinksForView(element) {
     for (const link of element.querySelectorAll(this.selector)) {
-      this.preloadURL(link);
+      if (this.delegate.shouldPreloadLink(link)) {
+        this.preloadURL(link);
+      }
     }
   }
 
@@ -4577,31 +5008,39 @@ class Preloader {
       return
     }
 
+    const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams(), link);
+    await fetchRequest.perform();
+  }
+
+  // Fetch request delegate
+
+  prepareRequest(fetchRequest) {
+    fetchRequest.headers["Sec-Purpose"] = "prefetch";
+  }
+
+  async requestSucceededWithResponse(fetchRequest, fetchResponse) {
     try {
-      const response = await fetch(location.toString(), { headers: { "Sec-Purpose": "prefetch", Accept: "text/html" } });
-      const responseText = await response.text();
-      const snapshot = PageSnapshot.fromHTMLString(responseText);
+      const responseHTML = await fetchResponse.responseHTML;
+      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
 
-      this.snapshotCache.put(location, snapshot);
+      this.snapshotCache.put(fetchRequest.url, snapshot);
     } catch (_) {
       // If we cannot preload that is ok!
     }
   }
-}
 
-class LimitedSet extends Set {
-  constructor(maxSize) {
-    super();
-    this.maxSize = maxSize;
-  }
+  requestStarted(fetchRequest) {}
 
-  add(value) {
-    if (this.size >= this.maxSize) {
-      const iterator = this.values();
-      const oldestValue = iterator.next().value;
-      this.delete(oldestValue);
-    }
-    super.add(value);
+  requestErrored(fetchRequest) {}
+
+  requestFinished(fetchRequest) {}
+
+  requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
+
+  requestFailedWithResponse(fetchRequest, fetchResponse) {}
+
+  #preloadAll = () => {
+    this.preloadOnLoadLinksForView(document.body);
   }
 }
 
@@ -4634,12 +5073,12 @@ class Cache {
 class Session {
   navigator = new Navigator(this)
   history = new History(this)
-  preloader = new Preloader(this)
   view = new PageView(this, document.documentElement)
   adapter = new BrowserAdapter(this)
 
   pageObserver = new PageObserver(this)
   cacheObserver = new CacheObserver()
+  linkPrefetchObserver = new LinkPrefetchObserver(this, document)
   linkClickObserver = new LinkClickObserver(this, window)
   formSubmitObserver = new FormSubmitObserver(this, document)
   scrollObserver = new ScrollObserver(this)
@@ -4648,18 +5087,26 @@ class Session {
   frameRedirector = new FrameRedirector(this, document.documentElement)
   streamMessageRenderer = new StreamMessageRenderer()
   cache = new Cache(this)
-  recentRequests = new LimitedSet(20)
 
   drive = true
   enabled = true
   progressBarDelay = 500
   started = false
   formMode = "on"
+  #pageRefreshDebouncePeriod = 150
+
+  constructor(recentRequests) {
+    this.recentRequests = recentRequests;
+    this.preloader = new Preloader(this, this.view.snapshotCache);
+    this.debouncedRefresh = this.refresh;
+    this.pageRefreshDebouncePeriod = this.pageRefreshDebouncePeriod;
+  }
 
   start() {
     if (!this.started) {
       this.pageObserver.start();
       this.cacheObserver.start();
+      this.linkPrefetchObserver.start();
       this.formLinkClickObserver.start();
       this.linkClickObserver.start();
       this.formSubmitObserver.start();
@@ -4681,6 +5128,7 @@ class Session {
     if (this.started) {
       this.pageObserver.stop();
       this.cacheObserver.stop();
+      this.linkPrefetchObserver.stop();
       this.formLinkClickObserver.stop();
       this.linkClickObserver.stop();
       this.formSubmitObserver.stop();
@@ -4688,6 +5136,7 @@ class Session {
       this.streamObserver.stop();
       this.frameRedirector.stop();
       this.history.stop();
+      this.preloader.stop();
       this.started = false;
     }
   }
@@ -4747,13 +5196,42 @@ class Session {
     return this.history.restorationIdentifier
   }
 
+  get pageRefreshDebouncePeriod() {
+    return this.#pageRefreshDebouncePeriod
+  }
+
+  set pageRefreshDebouncePeriod(value) {
+    this.refresh = debounce(this.debouncedRefresh.bind(this), value);
+    this.#pageRefreshDebouncePeriod = value;
+  }
+
+  // Preloader delegate
+
+  shouldPreloadLink(element) {
+    const isUnsafe = element.hasAttribute("data-turbo-method");
+    const isStream = element.hasAttribute("data-turbo-stream");
+    const frameTarget = element.getAttribute("data-turbo-frame");
+    const frame = frameTarget == "_top" ?
+      null :
+      document.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame:not([disabled])");
+
+    if (isUnsafe || isStream || frame instanceof FrameElement) {
+      return false
+    } else {
+      const location = new URL(element.href);
+
+      return this.elementIsNavigatable(element) && locationIsVisitable(location, this.snapshot.rootLocation)
+    }
+  }
+
   // History delegate
 
-  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
+  historyPoppedToLocationWithRestorationIdentifierAndDirection(location, restorationIdentifier, direction) {
     if (this.enabled) {
       this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
-        historyChanged: true
+        historyChanged: true,
+        direction
       });
     } else {
       this.adapter.pageInvalidated({
@@ -4776,6 +5254,15 @@ class Session {
 
   submittedFormLinkToLocation() {}
 
+  // Link hover observer delegate
+
+  canPrefetchRequestToLocation(link, location) {
+    return (
+      this.elementIsNavigatable(link) &&
+        locationIsVisitable(location, this.snapshot.rootLocation)
+    )
+  }
+
   // Link click observer delegate
 
   willFollowLinkToLocation(link, location, event) {
@@ -4809,6 +5296,7 @@ class Session {
   visitStarted(visit) {
     if (!visit.acceptsStreamResponse) {
       markAsBusy(document.documentElement);
+      this.view.markVisitDirection(visit.direction);
     }
     extendURLWithDeprecatedProperties(visit.location);
     if (!visit.silent) {
@@ -4817,6 +5305,7 @@ class Session {
   }
 
   visitCompleted(visit) {
+    this.view.unmarkVisitDirection();
     clearBusyState(document.documentElement);
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
@@ -4873,8 +5362,8 @@ class Session {
     }
   }
 
-  allowsImmediateRender({ element }, isPreview, options) {
-    const event = this.notifyApplicationBeforeRender(element, isPreview, options);
+  allowsImmediateRender({ element }, options) {
+    const event = this.notifyApplicationBeforeRender(element, options);
     const {
       defaultPrevented,
       detail: { render }
@@ -4887,9 +5376,9 @@ class Session {
     return !defaultPrevented
   }
 
-  viewRenderedSnapshot(_snapshot, isPreview, renderMethod) {
+  viewRenderedSnapshot(_snapshot, _isPreview, renderMethod) {
     this.view.lastRenderedLocation = this.history.location;
-    this.notifyApplicationAfterRender(isPreview, renderMethod);
+    this.notifyApplicationAfterRender(renderMethod);
   }
 
   preloadOnLoadLinksForView(element) {
@@ -4945,15 +5434,15 @@ class Session {
     return dispatch("turbo:before-cache")
   }
 
-  notifyApplicationBeforeRender(newBody, isPreview, options) {
+  notifyApplicationBeforeRender(newBody, options) {
     return dispatch("turbo:before-render", {
-      detail: { newBody, isPreview, ...options },
+      detail: { newBody, ...options },
       cancelable: true
     })
   }
 
-  notifyApplicationAfterRender(isPreview, renderMethod) {
-    return dispatch("turbo:render", { detail: { isPreview, renderMethod } })
+  notifyApplicationAfterRender(renderMethod) {
+    return dispatch("turbo:render", { detail: { renderMethod } })
   }
 
   notifyApplicationAfterPageLoad(timing = {}) {
@@ -5055,7 +5544,7 @@ const deprecatedLocationPropertyDescriptors = {
   }
 };
 
-const session = new Session();
+const session = new Session(recentRequests);
 const { cache, navigator: navigator$1 } = session;
 
 /**
@@ -5165,7 +5654,7 @@ var Turbo = /*#__PURE__*/Object.freeze({
   PageRenderer: PageRenderer,
   PageSnapshot: PageSnapshot,
   FrameRenderer: FrameRenderer,
-  fetch: fetch,
+  fetch: fetchWithTurboHeaders,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -5413,7 +5902,7 @@ class FrameController {
 
   // View delegate
 
-  allowsImmediateRender({ element: newFrame }, _isPreview, options) {
+  allowsImmediateRender({ element: newFrame }, options) {
     const event = dispatch("turbo:before-frame-render", {
       target: this.element,
       detail: { newFrame, ...options },
@@ -6034,7 +6523,7 @@ if (customElements.get("turbo-stream-source") === undefined) {
   }
 })();
 
-window.Turbo = Turbo;
+window.Turbo = { ...Turbo, StreamActions };
 start();
 
-export { FetchEnctype, FetchMethod, FetchRequest, FetchResponse, FrameElement, FrameLoadingStyle, FrameRenderer, PageRenderer, PageSnapshot, StreamActions, StreamElement, StreamSourceElement, cache, clearCache, connectStreamSource, disconnectStreamSource, fetch, fetchEnctypeFromString, fetchMethodFromString, isSafe, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, setProgressBarDelay, start, visit };
+export { FetchEnctype, FetchMethod, FetchRequest, FetchResponse, FrameElement, FrameLoadingStyle, FrameRenderer, PageRenderer, PageSnapshot, StreamActions, StreamElement, StreamSourceElement, cache, clearCache, connectStreamSource, disconnectStreamSource, fetchWithTurboHeaders as fetch, fetchEnctypeFromString, fetchMethodFromString, isSafe, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, setProgressBarDelay, start, visit };