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

package/dist/turbo.es2017-umd.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
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
@@ -639,13 +639,61 @@ Copyright © 2023 37signals LLC
     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
     })
@@ -769,10 +817,17 @@ Copyright © 2023 37signals LLC
     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") {
@@ -834,6 +889,8 @@ Copyright © 2023 37signals LLC
       });
       this.url = event.detail.url;
       if (event.defaultPrevented) await requestInterception;
+
+      return event
     }
 
     #willDelegateErrorHandling(error) {
@@ -944,6 +1001,41 @@ Copyright © 2023 37signals LLC
     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",
@@ -1052,6 +1144,7 @@ Copyright © 2023 37signals LLC
       this.state = FormSubmissionState.waiting;
       this.submitter?.setAttribute("disabled", "");
       this.setSubmitsWith();
+      markAsBusy(this.formElement);
       dispatch("turbo:submit-start", {
         target: this.formElement,
         detail: { formSubmission: this }
@@ -1060,13 +1153,20 @@ Copyright © 2023 37signals LLC
     }
 
     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 {
@@ -1090,6 +1190,7 @@ Copyright © 2023 37signals LLC
       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 }
@@ -1383,7 +1484,7 @@ Copyright © 2023 37signals LLC
 
           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);
@@ -1417,6 +1518,14 @@ Copyright © 2023 37signals LLC
       }
     }
 
+    markVisitDirection(direction) {
+      this.element.setAttribute("data-turbo-visit-direction", direction);
+    }
+
+    unmarkVisitDirection() {
+      this.element.removeAttribute("data-turbo-visit-direction");
+    }
+
     async renderSnapshot(renderer) {
       await renderer.render();
     }
@@ -1513,9 +1622,9 @@ Copyright © 2023 37signals LLC
     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);
@@ -1535,26 +1644,6 @@ Copyright © 2023 37signals LLC
         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 {
@@ -1571,6 +1660,16 @@ Copyright © 2023 37signals LLC
       this.linkInterceptor.stop();
     }
 
+    // Link hover observer delegate
+
+    canPrefetchRequestToLocation(link, location) {
+      return false
+    }
+
+    prefetchAndCacheRequestToLocation(link, location) {
+      return
+    }
+
     // Link click observer delegate
 
     willFollowLinkToLocation(link, location, originalEvent) {
@@ -1786,14 +1885,14 @@ Copyright © 2023 37signals LLC
     }
 
     async render() {
-      await nextAnimationFrame();
+      await nextRepaint();
       this.preservingPermanentElements(() => {
         this.loadFrameElement();
       });
       this.scrollFrameIntoView();
-      await nextAnimationFrame();
+      await nextRepaint();
       this.focusFirstAutofocusableElement();
-      await nextAnimationFrame();
+      await nextRepaint();
       this.activateScriptElements();
     }
 
@@ -1844,6 +1943,8 @@ Copyright © 2023 37signals LLC
     }
   }
 
+  const ProgressBarID = "turbo-progress-bar";
+
   class ProgressBar {
     static animationDuration = 300 /*ms*/
 
@@ -1948,6 +2049,8 @@ Copyright © 2023 37signals LLC
 
     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) {
@@ -2219,6 +2322,12 @@ Copyright © 2023 37signals LLC
     contentTypeMismatch: -2
   };
 
+  const Direction = {
+    advance: "forward",
+    restore: "back",
+    replace: "none"
+  };
+
   class Visit {
     identifier = uuid() // Required by turbo-ios
     timingMetrics = {}
@@ -2248,7 +2357,8 @@ Copyright © 2023 37signals LLC
         willRender,
         updateHistory,
         shouldCacheSnapshot,
-        acceptsStreamResponse
+        acceptsStreamResponse,
+        direction
       } = {
         ...defaultOptions,
         ...options
@@ -2266,6 +2376,7 @@ Copyright © 2023 37signals LLC
       this.scrolled = !willRender;
       this.shouldCacheSnapshot = shouldCacheSnapshot;
       this.acceptsStreamResponse = acceptsStreamResponse;
+      this.direction = direction || Direction[action];
     }
 
     get adapter() {
@@ -2518,7 +2629,7 @@ Copyright © 2023 37signals LLC
     // 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 {
@@ -2593,9 +2704,7 @@ Copyright © 2023 37signals LLC
 
     async render(callback) {
       this.cancelRender();
-      await new Promise((resolve) => {
-        this.frame = requestAnimationFrame(() => resolve());
-      });
+      this.frame = await nextRepaint();
       await callback();
       delete this.frame;
     }
@@ -2873,6 +2982,7 @@ Copyright © 2023 37signals LLC
     restorationData = {}
     started = false
     pageLoaded = false
+    currentIndex = 0
 
     constructor(delegate) {
       this.delegate = delegate;
@@ -2882,6 +2992,7 @@ Copyright © 2023 37signals LLC
       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));
       }
@@ -2904,7 +3015,9 @@ Copyright © 2023 37signals LLC
     }
 
     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;
@@ -2948,9 +3061,11 @@ Copyright © 2023 37signals LLC
         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;
         }
       }
     }
@@ -2972,6 +3087,176 @@ Copyright © 2023 37signals LLC
     }
   }
 
+  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;
@@ -3287,7 +3572,7 @@ Copyright © 2023 37signals LLC
     }
 
     callback();
-    await nextAnimationFrame();
+    await nextRepaint();
 
     const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
 
@@ -3442,722 +3727,838 @@ Copyright © 2023 37signals LLC
     }
   }
 
-  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() {
@@ -4185,7 +4586,7 @@ Copyright © 2023 37signals LLC
     #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
       this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
 
-      idiomorph.morph(currentElement, newElement, {
+      Idiomorph.morph(currentElement, newElement, {
         morphStyle: morphStyle,
         callbacks: {
           beforeNodeAdded: this.#shouldAddElement,
@@ -4317,8 +4718,13 @@ Copyright © 2023 37signals LLC
       const mergedHeadElements = this.mergeProvisionalElements();
       const newStylesheetElements = this.copyNewHeadStylesheetElements();
       this.copyNewHeadScriptElements();
+
       await mergedHeadElements;
       await newStylesheetElements;
+
+      if (this.willRender) {
+        this.removeUnusedHeadStylesheetElements();
+      }
     }
 
     async replaceBody() {
@@ -4350,6 +4756,12 @@ Copyright © 2023 37signals LLC
       }
     }
 
+    removeUnusedHeadStylesheetElements() {
+      for (const element of this.unusedHeadStylesheetElements) {
+        document.head.removeChild(element);
+      }
+    }
+
     async mergeProvisionalElements() {
       const newHeadElements = [...this.newHeadProvisionalElements];
 
@@ -4415,6 +4827,20 @@ Copyright © 2023 37signals LLC
       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)
     }
@@ -4541,7 +4967,11 @@ Copyright © 2023 37signals LLC
     }
 
     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() {
@@ -4552,27 +4982,28 @@ Copyright © 2023 37signals LLC
   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);
+        }
       }
     }
 
@@ -4583,31 +5014,39 @@ Copyright © 2023 37signals LLC
         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);
     }
   }
 
@@ -4640,12 +5079,12 @@ Copyright © 2023 37signals LLC
   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)
@@ -4654,18 +5093,26 @@ Copyright © 2023 37signals LLC
     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();
@@ -4687,6 +5134,7 @@ Copyright © 2023 37signals LLC
       if (this.started) {
         this.pageObserver.stop();
         this.cacheObserver.stop();
+        this.linkPrefetchObserver.stop();
         this.formLinkClickObserver.stop();
         this.linkClickObserver.stop();
         this.formSubmitObserver.stop();
@@ -4694,6 +5142,7 @@ Copyright © 2023 37signals LLC
         this.streamObserver.stop();
         this.frameRedirector.stop();
         this.history.stop();
+        this.preloader.stop();
         this.started = false;
       }
     }
@@ -4753,13 +5202,42 @@ Copyright © 2023 37signals LLC
       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({
@@ -4782,6 +5260,15 @@ Copyright © 2023 37signals LLC
 
     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) {
@@ -4815,6 +5302,7 @@ Copyright © 2023 37signals LLC
     visitStarted(visit) {
       if (!visit.acceptsStreamResponse) {
         markAsBusy(document.documentElement);
+        this.view.markVisitDirection(visit.direction);
       }
       extendURLWithDeprecatedProperties(visit.location);
       if (!visit.silent) {
@@ -4823,6 +5311,7 @@ Copyright © 2023 37signals LLC
     }
 
     visitCompleted(visit) {
+      this.view.unmarkVisitDirection();
       clearBusyState(document.documentElement);
       this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
     }
@@ -4879,8 +5368,8 @@ Copyright © 2023 37signals LLC
       }
     }
 
-    allowsImmediateRender({ element }, isPreview, options) {
-      const event = this.notifyApplicationBeforeRender(element, isPreview, options);
+    allowsImmediateRender({ element }, options) {
+      const event = this.notifyApplicationBeforeRender(element, options);
       const {
         defaultPrevented,
         detail: { render }
@@ -4893,9 +5382,9 @@ Copyright © 2023 37signals LLC
       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) {
@@ -4951,15 +5440,15 @@ Copyright © 2023 37signals LLC
       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 = {}) {
@@ -5061,7 +5550,7 @@ Copyright © 2023 37signals LLC
     }
   };
 
-  const session = new Session();
+  const session = new Session(recentRequests);
   const { cache, navigator: navigator$1 } = session;
 
   /**
@@ -5171,7 +5660,7 @@ Copyright © 2023 37signals LLC
     PageRenderer: PageRenderer,
     PageSnapshot: PageSnapshot,
     FrameRenderer: FrameRenderer,
-    fetch: fetch,
+    fetch: fetchWithTurboHeaders,
     start: start,
     registerAdapter: registerAdapter,
     visit: visit,
@@ -5419,7 +5908,7 @@ Copyright © 2023 37signals LLC
 
     // View delegate
 
-    allowsImmediateRender({ element: newFrame }, _isPreview, options) {
+    allowsImmediateRender({ element: newFrame }, options) {
       const event = dispatch("turbo:before-frame-render", {
         target: this.element,
         detail: { newFrame, ...options },
@@ -6040,7 +6529,7 @@ Copyright © 2023 37signals LLC
     }
   })();
 
-  window.Turbo = Turbo;
+  window.Turbo = { ...Turbo, StreamActions };
   start();
 
   exports.FetchEnctype = FetchEnctype;
@@ -6059,7 +6548,7 @@ Copyright © 2023 37signals LLC
   exports.clearCache = clearCache;
   exports.connectStreamSource = connectStreamSource;
   exports.disconnectStreamSource = disconnectStreamSource;
-  exports.fetch = fetch;
+  exports.fetch = fetchWithTurboHeaders;
   exports.fetchEnctypeFromString = fetchEnctypeFromString;
   exports.fetchMethodFromString = fetchMethodFromString;
   exports.isSafe = isSafe;