turbo-rails 2.0.0.pre.beta.1 → 2.0.0.pre.beta.3

data/app/assets/javascripts/turbo.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(prototype) {
   if (typeof prototype.requestSubmit == "function") return;
@@ -485,12 +485,57 @@ async function around(callback, reader) {
   return [ before, after ];
 }
 
-function fetch(url, options = {}) {
+function doesNotTargetIFrame(anchor) {
+  if (anchor.hasAttribute("target")) {
+    for (const element of document.getElementsByName(anchor.target)) {
+      if (element instanceof HTMLIFrameElement) return false;
+    }
+  }
+  return true;
+}
+
+function findLinkFromClickTarget(target) {
+  return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])");
+}
+
+function getLocationForLink(link) {
+  return expandURL(link.getAttribute("href") || "");
+}
+
+function debounce(fn, delay) {
+  let timeoutId = null;
+  return (...args) => {
+    const callback = () => fn.apply(this, args);
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(callback, delay);
+  };
+}
+
+class LimitedSet extends Set {
+  constructor(maxSize) {
+    super();
+    this.maxSize = maxSize;
+  }
+  add(value) {
+    if (this.size >= this.maxSize) {
+      const iterator = this.values();
+      const oldestValue = iterator.next().value;
+      this.delete(oldestValue);
+    }
+    super.add(value);
+  }
+}
+
+const recentRequests = new LimitedSet(20);
+
+const nativeFetch = window.fetch;
+
+function fetchWithTurboHeaders(url, options = {}) {
   const modifiedHeaders = new Headers(options.headers || {});
   const requestUID = uuid();
-  window.Turbo.session.recentRequests.add(requestUID);
+  recentRequests.add(requestUID);
   modifiedHeaders.append("X-Turbo-Request-Id", requestUID);
-  return window.fetch(url, {
+  return nativeFetch(url, {
     ...options,
     headers: modifiedHeaders
   });
@@ -606,10 +651,15 @@ class FetchRequest {
   async perform() {
     const {fetchOptions: 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") {
@@ -667,6 +717,7 @@ class FetchRequest {
     });
     this.url = event.detail.url;
     if (event.defaultPrevented) await requestInterception;
+    return event;
   }
   #willDelegateErrorHandling(error) {
     const event = dispatch("turbo:fetch-request-error", {
@@ -762,6 +813,41 @@ function importStreamElements(fragment) {
   return fragment;
 }
 
+const PREFETCH_DELAY = 100;
+
+class PrefetchCache {
+  #prefetchTimeout=null;
+  #prefetched=null;
+  get(url) {
+    if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
+      return this.#prefetched.request;
+    }
+  }
+  setLater(url, request, ttl) {
+    this.clear();
+    this.#prefetchTimeout = setTimeout((() => {
+      request.perform();
+      this.set(url, request, ttl);
+      this.#prefetchTimeout = null;
+    }), PREFETCH_DELAY);
+  }
+  set(url, request, ttl) {
+    this.#prefetched = {
+      url: url,
+      request: request,
+      expire: new Date((new Date).getTime() + ttl)
+    };
+  }
+  clear() {
+    if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout);
+    this.#prefetched = null;
+  }
+}
+
+const cacheTtl = 10 * 1e3;
+
+const prefetchCache = new PrefetchCache;
+
 const FormSubmissionState = {
   initialized: "initialized",
   requesting: "requesting",
@@ -848,6 +934,7 @@ class FormSubmission {
     this.state = FormSubmissionState.waiting;
     this.submitter?.setAttribute("disabled", "");
     this.setSubmitsWith();
+    markAsBusy(this.formElement);
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -857,6 +944,7 @@ class FormSubmission {
     this.delegate.formSubmissionStarted(this);
   }
   requestPreventedHandlingResponse(request, response) {
+    prefetchCache.clear();
     this.result = {
       success: response.succeeded,
       fetchResponse: response
@@ -865,7 +953,10 @@ class FormSubmission {
   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 {
@@ -895,6 +986,7 @@ class FormSubmission {
     this.state = FormSubmissionState.stopped;
     this.submitter?.removeAttribute("disabled");
     this.resetSubmitterText();
+    clearBusyState(this.formElement);
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: {
@@ -1147,7 +1239,7 @@ class View {
           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);
         this.delegate.viewRenderedSnapshot(snapshot, isPreview, this.renderer.renderMethod);
@@ -1176,6 +1268,12 @@ class View {
       this.element.removeAttribute("data-turbo-preview");
     }
   }
+  markVisitDirection(direction) {
+    this.element.setAttribute("data-turbo-visit-direction", direction);
+  }
+  unmarkVisitDirection() {
+    this.element.removeAttribute("data-turbo-visit-direction");
+  }
   async renderSnapshot(renderer) {
     await renderer.render();
   }
@@ -1259,9 +1357,9 @@ class LinkClickObserver {
   clickBubbled=event => {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = event.composedPath && event.composedPath()[0] || event.target;
-      const link = this.findLinkFromClickTarget(target);
+      const link = findLinkFromClickTarget(target);
       if (link && doesNotTargetIFrame(link)) {
-        const location = this.getLocationForLink(link);
+        const location = getLocationForLink(link);
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault();
           this.delegate.followedLinkToLocation(link, location);
@@ -1272,23 +1370,6 @@ class LinkClickObserver {
   clickEventIsSignificant(event) {
     return !(event.target && event.target.isContentEditable || event.defaultPrevented || event.which > 1 || event.altKey || event.ctrlKey || event.metaKey || 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 {
@@ -1302,6 +1383,12 @@ class FormLinkClickObserver {
   stop() {
     this.linkInterceptor.stop();
   }
+  canPrefetchRequestToLocation(link, location) {
+    return false;
+  }
+  prefetchAndCacheRequestToLocation(link, location) {
+    return;
+  }
   willFollowLinkToLocation(link, location, originalEvent) {
     return this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) && (link.hasAttribute("data-turbo-method") || link.hasAttribute("data-turbo-stream"));
   }
@@ -1480,14 +1567,14 @@ class FrameRenderer extends Renderer {
     return true;
   }
   async render() {
-    await nextAnimationFrame();
+    await nextRepaint();
     this.preservingPermanentElements((() => {
       this.loadFrameElement();
     }));
     this.scrollFrameIntoView();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.focusFirstAutofocusableElement();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.activateScriptElements();
   }
   loadFrameElement() {
@@ -1536,6 +1623,8 @@ function readScrollBehavior(value, defaultValue) {
   }
 }
 
+const ProgressBarID = "turbo-progress-bar";
+
 class ProgressBar {
   static animationDuration=300;
   static get defaultCSS() {
@@ -1623,6 +1712,8 @@ class ProgressBar {
   }
   createStylesheetElement() {
     const element = document.createElement("style");
+    element.id = ProgressBarID;
+    element.setAttribute("data-turbo-permanent", "");
     element.type = "text/css";
     element.textContent = ProgressBar.defaultCSS;
     if (this.cspNonce) {
@@ -1846,6 +1937,12 @@ const SystemStatusCode = {
   contentTypeMismatch: -2
 };
 
+const Direction = {
+  advance: "forward",
+  restore: "back",
+  replace: "none"
+};
+
 class Visit {
   identifier=uuid();
   timingMetrics={};
@@ -1861,7 +1958,7 @@ class Visit {
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse} = {
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse, direction: direction} = {
       ...defaultOptions,
       ...options
     };
@@ -1878,6 +1975,7 @@ class Visit {
     this.scrolled = !willRender;
     this.shouldCacheSnapshot = shouldCacheSnapshot;
     this.acceptsStreamResponse = acceptsStreamResponse;
+    this.direction = direction || Direction[action];
   }
   get adapter() {
     return this.delegate.adapter;
@@ -2098,7 +2196,7 @@ class Visit {
     this.finishRequest();
   }
   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 {
@@ -2162,9 +2260,7 @@ class Visit {
   }
   async render(callback) {
     this.cancelRender();
-    await new Promise((resolve => {
-      this.frame = requestAnimationFrame((() => resolve()));
-    }));
+    this.frame = await nextRepaint();
     await callback();
     delete this.frame;
   }
@@ -2386,6 +2482,7 @@ class History {
   restorationData={};
   started=false;
   pageLoaded=false;
+  currentIndex=0;
   constructor(delegate) {
     this.delegate = delegate;
   }
@@ -2393,6 +2490,7 @@ class History {
     if (!this.started) {
       addEventListener("popstate", this.onPopState, false);
       addEventListener("load", this.onPageLoad, false);
+      this.currentIndex = history.state?.turbo?.restorationIndex || 0;
       this.started = true;
       this.replace(new URL(window.location.href));
     }
@@ -2411,9 +2509,11 @@ class History {
     this.update(history.replaceState, location, restorationIdentifier);
   }
   update(method, location, restorationIdentifier = uuid()) {
+    if (method === history.pushState) ++this.currentIndex;
     const state = {
       turbo: {
-        restorationIdentifier: restorationIdentifier
+        restorationIdentifier: restorationIdentifier,
+        restorationIndex: this.currentIndex
       }
     };
     method.call(history, state, "", location.href);
@@ -2448,9 +2548,11 @@ class History {
       const {turbo: turbo} = event.state || {};
       if (turbo) {
         this.location = new URL(window.location.href);
-        const {restorationIdentifier: restorationIdentifier} = turbo;
+        const {restorationIdentifier: restorationIdentifier, restorationIndex: 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;
       }
     }
   };
@@ -2466,6 +2568,131 @@ class History {
   }
 }
 
+class LinkPrefetchObserver {
+  started=false;
+  hoverTriggerEvent="mouseenter";
+  touchTriggerEvent="touchstart";
+  constructor(delegate, eventTarget) {
+    this.delegate = delegate;
+    this.eventTarget = eventTarget;
+  }
+  start() {
+    if (this.started) return;
+    if (this.eventTarget.readyState === "loading") {
+      this.eventTarget.addEventListener("DOMContentLoaded", this.#enable, {
+        once: true
+      });
+    } else {
+      this.#enable();
+    }
+  }
+  stop() {
+    if (!this.started) return;
+    this.eventTarget.removeEventListener(this.hoverTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.removeEventListener(this.touchTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.removeEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
+    this.started = false;
+  }
+  #enable=() => {
+    this.eventTarget.addEventListener(this.hoverTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.addEventListener(this.touchTriggerEvent, this.#tryToPrefetchRequest, {
+      capture: true,
+      passive: true
+    });
+    this.eventTarget.addEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
+    this.started = true;
+  };
+  #tryToPrefetchRequest=event => {
+    if (getMetaContent("turbo-prefetch") !== "true") return;
+    const target = event.target;
+    const isLink = target.matches && target.matches("a[href]:not([target^=_]):not([download])");
+    if (isLink && this.#isPrefetchable(target)) {
+      const link = target;
+      const location = getLocationForLink(link);
+      if (this.delegate.canPrefetchRequestToLocation(link, location)) {
+        const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams, target);
+        prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl);
+        link.addEventListener("mouseleave", (() => prefetchCache.clear()), {
+          once: true
+        });
+      }
+    }
+  };
+  #tryToUsePrefetchedRequest=event => {
+    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+      const cached = prefetchCache.get(event.detail.url.toString());
+      if (cached) {
+        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");
+    }
+  }
+  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 => !doesNotTargetIFrame(link);
+
 class Navigator {
   constructor(delegate) {
     this.delegate = delegate;
@@ -2725,7 +2952,7 @@ async function withAutofocusFromFragment(fragment, callback) {
     elementWithAutofocus.id = willAutofocusId;
   }
   callback();
-  await nextAnimationFrame();
+  await nextRepaint();
   const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
   if (hasNoActiveElement && willAutofocusId) {
     const elementToAutofocus = document.getElementById(willAutofocusId);
@@ -2856,504 +3083,545 @@ class ErrorRenderer extends Renderer {
   }
 }
 
-let EMPTY_SET = new Set;
-
-function morph(oldNode, newContent, config = {}) {
-  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);
-}
-
-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);
-      Promise.all(promises).then((function() {
-        morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
-          head: {
-            block: false,
-            ignore: true
-          }
+var Idiomorph = function() {
+  let EMPTY_SET = new Set;
+  let defaults = {
+    morphStyle: "outerHTML",
+    callbacks: {
+      beforeNodeAdded: noOp,
+      afterNodeAdded: noOp,
+      beforeNodeMorphed: noOp,
+      afterNodeMorphed: noOp,
+      beforeNodeRemoved: noOp,
+      afterNodeRemoved: noOp,
+      beforeAttributeUpdated: noOp
+    },
+    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
+    }
+  };
+  function morph(oldNode, newContent, config = {}) {
+    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);
+  }
+  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);
+        Promise.all(promises).then((function() {
+          morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
+            head: {
+              block: false,
+              ignore: true
+            }
+          }));
         }));
-      }));
-      return;
+        return;
+      }
     }
-  }
-  if (ctx.morphStyle === "innerHTML") {
-    morphChildren(normalizedNewContent, oldNode, ctx);
-    return oldNode.children;
-  } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
-    let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
-    let previousSibling = bestMatch?.previousSibling;
-    let nextSibling = bestMatch?.nextSibling;
-    let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
-    if (bestMatch) {
-      return insertSiblings(previousSibling, morphedNode, nextSibling);
+    if (ctx.morphStyle === "innerHTML") {
+      morphChildren(normalizedNewContent, oldNode, ctx);
+      return oldNode.children;
+    } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
+      let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
+      let previousSibling = bestMatch?.previousSibling;
+      let nextSibling = bestMatch?.nextSibling;
+      let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
+      if (bestMatch) {
+        return insertSiblings(previousSibling, morphedNode, nextSibling);
+      } else {
+        return [];
+      }
     } else {
-      return [];
+      throw "Do not understand how to morph style " + ctx.morphStyle;
     }
-  } else {
-    throw "Do not understand how to morph style " + ctx.morphStyle;
   }
-}
-
-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 (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;
+  function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
+    return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
   }
-}
-
-function morphChildren(newParent, oldParent, ctx) {
-  let nextNewChild = newParent.firstChild;
-  let insertionPoint = oldParent.firstChild;
-  let newChild;
-  while (nextNewChild) {
-    newChild = nextNewChild;
-    nextNewChild = newChild.nextSibling;
-    if (insertionPoint == null) {
+  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;
+    }
+  }
+  function morphChildren(newParent, oldParent, ctx) {
+    let nextNewChild = newParent.firstChild;
+    let insertionPoint = oldParent.firstChild;
+    let newChild;
+    while (nextNewChild) {
+      newChild = nextNewChild;
+      nextNewChild = newChild.nextSibling;
+      if (insertionPoint == null) {
+        if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
+        oldParent.appendChild(newChild);
+        ctx.callbacks.afterNodeAdded(newChild);
+        removeIdsFromConsideration(ctx, newChild);
+        continue;
+      }
+      if (isIdSetMatch(newChild, insertionPoint, ctx)) {
+        morphOldNodeTo(insertionPoint, newChild, ctx);
+        insertionPoint = insertionPoint.nextSibling;
+        removeIdsFromConsideration(ctx, newChild);
+        continue;
+      }
+      let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
+      if (idSetMatch) {
+        insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
+        morphOldNodeTo(idSetMatch, newChild, ctx);
+        removeIdsFromConsideration(ctx, newChild);
+        continue;
+      }
+      let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
+      if (softMatch) {
+        insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
+        morphOldNodeTo(softMatch, newChild, ctx);
+        removeIdsFromConsideration(ctx, newChild);
+        continue;
+      }
       if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
-      oldParent.appendChild(newChild);
+      oldParent.insertBefore(newChild, insertionPoint);
       ctx.callbacks.afterNodeAdded(newChild);
       removeIdsFromConsideration(ctx, newChild);
-      continue;
     }
-    if (isIdSetMatch(newChild, insertionPoint, ctx)) {
-      morphOldNodeTo(insertionPoint, newChild, ctx);
+    while (insertionPoint !== null) {
+      let tempNode = insertionPoint;
       insertionPoint = insertionPoint.nextSibling;
-      removeIdsFromConsideration(ctx, newChild);
-      continue;
+      removeNode(tempNode, ctx);
     }
-    let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
-    if (idSetMatch) {
-      insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
-      morphOldNodeTo(idSetMatch, newChild, ctx);
-      removeIdsFromConsideration(ctx, newChild);
-      continue;
-    }
-    let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
-    if (softMatch) {
-      insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
-      morphOldNodeTo(softMatch, newChild, ctx);
-      removeIdsFromConsideration(ctx, newChild);
-      continue;
-    }
-    if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
-    oldParent.insertBefore(newChild, insertionPoint);
-    ctx.callbacks.afterNodeAdded(newChild);
-    removeIdsFromConsideration(ctx, newChild);
   }
-  while (insertionPoint !== null) {
-    let tempNode = insertionPoint;
-    insertionPoint = insertionPoint.nextSibling;
-    removeNode(tempNode, ctx);
+  function ignoreAttribute(attr, to, updateType, ctx) {
+    if (attr === "value" && ctx.ignoreActiveValue && to === document.activeElement) {
+      return true;
+    }
+    return ctx.callbacks.beforeAttributeUpdated(attr, to, updateType) === false;
   }
-}
-
-function syncNodeFrom(from, to) {
-  let type = from.nodeType;
-  if (type === 1) {
-    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);
+  function syncNodeFrom(from, to, ctx) {
+    let type = from.nodeType;
+    if (type === 1) {
+      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);
+        }
+      }
+      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);
+        }
       }
     }
-    for (const toAttribute of toAttributes) {
-      if (!from.hasAttribute(toAttribute.name)) {
-        to.removeAttribute(toAttribute.name);
+    if (type === 8 || type === 3) {
+      if (to.nodeValue !== from.nodeValue) {
+        to.nodeValue = from.nodeValue;
       }
     }
-  }
-  if (type === 8 || type === 3) {
-    if (to.nodeValue !== from.nodeValue) {
-      to.nodeValue = from.nodeValue;
+    if (!ignoreValueOfActiveElement(to, ctx)) {
+      syncInputValue(from, to, ctx);
     }
   }
-  if (from instanceof HTMLInputElement && to instanceof HTMLInputElement && from.type !== "file") {
-    to.value = from.value || "";
-    syncAttribute(from, to, "value");
-    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;
+  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);
+        }
+      }
     }
   }
-}
-
-function syncAttribute(from, to, attributeName) {
-  if (from[attributeName] !== to[attributeName]) {
-    if (from[attributeName]) {
-      to.setAttribute(attributeName, from[attributeName]);
-    } else {
-      to.removeAttribute(attributeName);
+  function syncInputValue(from, to, ctx) {
+    if (from instanceof HTMLInputElement && to instanceof HTMLInputElement && from.type !== "file") {
+      let fromValue = from.value;
+      let toValue = to.value;
+      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;
+      }
     }
   }
-}
-
-function handleHeadElement(newHeadTag, currentHead, ctx) {
-  let added = [];
-  let removed = [];
-  let preserved = [];
-  let nodesToAppend = [];
-  let headMergeStyle = ctx.head.style;
-  let srcToNewHeadNodes = new Map;
-  for (const newHeadChild of newHeadTag.children) {
-    srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
-  }
-  for (const currentHeadElt of currentHead.children) {
-    let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
-    let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
-    let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
-    if (inNewContent || isPreserved) {
-      if (isReAppended) {
-        removed.push(currentHeadElt);
-      } else {
-        srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
-        preserved.push(currentHeadElt);
-      }
-    } else {
-      if (headMergeStyle === "append") {
+  function handleHeadElement(newHeadTag, currentHead, ctx) {
+    let added = [];
+    let removed = [];
+    let preserved = [];
+    let nodesToAppend = [];
+    let headMergeStyle = ctx.head.style;
+    let srcToNewHeadNodes = new Map;
+    for (const newHeadChild of newHeadTag.children) {
+      srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
+    }
+    for (const currentHeadElt of currentHead.children) {
+      let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
+      let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
+      let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
+      if (inNewContent || isPreserved) {
         if (isReAppended) {
           removed.push(currentHeadElt);
-          nodesToAppend.push(currentHeadElt);
+        } else {
+          srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
+          preserved.push(currentHeadElt);
         }
       } else {
-        if (ctx.head.shouldRemove(currentHeadElt) !== false) {
-          removed.push(currentHeadElt);
+        if (headMergeStyle === "append") {
+          if (isReAppended) {
+            removed.push(currentHeadElt);
+            nodesToAppend.push(currentHeadElt);
+          }
+        } else {
+          if (ctx.head.shouldRemove(currentHeadElt) !== false) {
+            removed.push(currentHeadElt);
+          }
         }
       }
     }
-  }
-  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);
+    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);
       }
-      currentHead.appendChild(newElt);
-      ctx.callbacks.afterNodeAdded(newElt);
-      added.push(newElt);
     }
-  }
-  for (const removedElement of removed) {
-    if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
-      currentHead.removeChild(removedElement);
-      ctx.callbacks.afterNodeRemoved(removedElement);
+    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;
+  }
+  function noOp() {}
+  function mergeDefaults(config) {
+    let finalConfig = {};
+    Object.assign(finalConfig, defaults);
+    Object.assign(finalConfig, config);
+    finalConfig.callbacks = {};
+    Object.assign(finalConfig.callbacks, defaults.callbacks);
+    Object.assign(finalConfig.callbacks, config.callbacks);
+    finalConfig.head = {};
+    Object.assign(finalConfig.head, defaults.head);
+    Object.assign(finalConfig.head, config.head);
+    return finalConfig;
+  }
+  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
+    };
   }
-  ctx.head.afterHeadMorphed(currentHead, {
-    added: added,
-    kept: preserved,
-    removed: removed
-  });
-  return promises;
-}
-
-function noOp() {}
-
-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 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;
     }
-  }
-  return false;
-}
-
-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 findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
-  let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
-  let potentialMatch = null;
-  if (newChildPotentialIdCount > 0) {
-    let potentialMatch = insertionPoint;
-    let otherMatchCount = 0;
-    while (potentialMatch != null) {
-      if (isIdSetMatch(newChild, potentialMatch, ctx)) {
-        return potentialMatch;
-      }
-      otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
-      if (otherMatchCount > newChildPotentialIdCount) {
-        return null;
+    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;
       }
-      potentialMatch = potentialMatch.nextSibling;
     }
+    return false;
   }
-  return potentialMatch;
-}
-
-function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
-  let potentialSoftMatch = insertionPoint;
-  let nextSibling = newChild.nextSibling;
-  let siblingSoftMatchCount = 0;
-  while (potentialSoftMatch != null) {
-    if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
-      return null;
-    }
-    if (isSoftMatch(newChild, potentialSoftMatch)) {
-      return potentialSoftMatch;
+  function isSoftMatch(node1, node2) {
+    if (node1 == null || node2 == null) {
+      return false;
     }
-    if (isSoftMatch(nextSibling, potentialSoftMatch)) {
-      siblingSoftMatchCount++;
-      nextSibling = nextSibling.nextSibling;
-      if (siblingSoftMatchCount >= 2) {
-        return null;
+    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 findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+    let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
+    let potentialMatch = null;
+    if (newChildPotentialIdCount > 0) {
+      let potentialMatch = insertionPoint;
+      let otherMatchCount = 0;
+      while (potentialMatch != null) {
+        if (isIdSetMatch(newChild, potentialMatch, ctx)) {
+          return potentialMatch;
+        }
+        otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
+        if (otherMatchCount > newChildPotentialIdCount) {
+          return null;
+        }
+        potentialMatch = potentialMatch.nextSibling;
       }
     }
-    potentialSoftMatch = potentialSoftMatch.nextSibling;
+    return potentialMatch;
   }
-  return potentialSoftMatch;
-}
-
-function parseContent(newContent) {
-  let parser = new DOMParser;
-  let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, "");
-  if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
-    let content = parser.parseFromString(newContent, "text/html");
-    if (contentWithSvgsRemoved.match(/<\/html>/)) {
+  function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
+    let potentialSoftMatch = insertionPoint;
+    let nextSibling = newChild.nextSibling;
+    let siblingSoftMatchCount = 0;
+    while (potentialSoftMatch != null) {
+      if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
+        return null;
+      }
+      if (isSoftMatch(newChild, potentialSoftMatch)) {
+        return potentialSoftMatch;
+      }
+      if (isSoftMatch(nextSibling, potentialSoftMatch)) {
+        siblingSoftMatchCount++;
+        nextSibling = nextSibling.nextSibling;
+        if (siblingSoftMatchCount >= 2) {
+          return null;
+        }
+      }
+      potentialSoftMatch = potentialSoftMatch.nextSibling;
+    }
+    return potentialSoftMatch;
+  }
+  function parseContent(newContent) {
+    let parser = new DOMParser;
+    let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, "");
+    if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
+      let content = parser.parseFromString(newContent, "text/html");
+      if (contentWithSvgsRemoved.match(/<\/html>/)) {
+        content.generatedByIdiomorph = true;
+        return content;
+      } else {
+        let htmlElement = content.firstChild;
+        if (htmlElement) {
+          htmlElement.generatedByIdiomorph = true;
+          return htmlElement;
+        } else {
+          return null;
+        }
+      }
+    } else {
+      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) {
+      const dummyParent = document.createElement("div");
+      return dummyParent;
+    } else if (newContent.generatedByIdiomorph) {
+      return newContent;
+    } else if (newContent instanceof Node) {
+      const dummyParent = document.createElement("div");
+      dummyParent.append(newContent);
+      return dummyParent;
     } else {
-      let htmlElement = content.firstChild;
-      if (htmlElement) {
-        htmlElement.generatedByIdiomorph = true;
-        return htmlElement;
-      } else {
-        return null;
+      const dummyParent = document.createElement("div");
+      for (const elt of [ ...newContent ]) {
+        dummyParent.append(elt);
       }
+      return dummyParent;
     }
-  } else {
-    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) {
-    const dummyParent = document.createElement("div");
-    return dummyParent;
-  } else if (newContent.generatedByIdiomorph) {
-    return newContent;
-  } else if (newContent instanceof Node) {
-    const dummyParent = document.createElement("div");
-    dummyParent.append(newContent);
-    return dummyParent;
-  } else {
-    const dummyParent = document.createElement("div");
-    for (const elt of [ ...newContent ]) {
-      dummyParent.append(elt);
+  }
+  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);
+      morphedNode.parentElement.insertBefore(node, morphedNode);
+    }
+    added.push(morphedNode);
+    while (nextSibling != null) {
+      stack.push(nextSibling);
+      added.push(nextSibling);
+      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;
+      }
+      currentElement = currentElement.nextSibling;
     }
-    return dummyParent;
+    return bestElement;
   }
-}
-
-function insertSiblings(previousSibling, morphedNode, nextSibling) {
-  let stack = [];
-  let added = [];
-  while (previousSibling != null) {
-    stack.push(previousSibling);
-    previousSibling = previousSibling.previousSibling;
+  function scoreElement(node1, node2, ctx) {
+    if (isSoftMatch(node1, node2)) {
+      return .5 + getIdIntersectionCount(ctx, node1, node2);
+    }
+    return 0;
   }
-  while (stack.length > 0) {
-    let node = stack.pop();
-    added.push(node);
-    morphedNode.parentElement.insertBefore(node, morphedNode);
+  function removeNode(tempNode, ctx) {
+    removeIdsFromConsideration(ctx, tempNode);
+    if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
+    tempNode.remove();
+    ctx.callbacks.afterNodeRemoved(tempNode);
   }
-  added.push(morphedNode);
-  while (nextSibling != null) {
-    stack.push(nextSibling);
-    added.push(nextSibling);
-    nextSibling = nextSibling.nextSibling;
+  function isIdInConsideration(ctx, id) {
+    return !ctx.deadIds.has(id);
   }
-  while (stack.length > 0) {
-    morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
+  function idIsWithinNode(ctx, id, targetNode) {
+    let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
+    return idSet.has(id);
   }
-  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 removeIdsFromConsideration(ctx, node) {
+    let idSet = ctx.idMap.get(node) || EMPTY_SET;
+    for (const id of idSet) {
+      ctx.deadIds.add(id);
     }
-    currentElement = currentElement.nextSibling;
-  }
-  return bestElement;
-}
-
-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;
-  tempNode.remove();
-  ctx.callbacks.afterNodeRemoved(tempNode);
-}
-
-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 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) {
-    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) {
+      if (isIdInConsideration(ctx, id) && idIsWithinNode(ctx, id, node2)) {
+        ++matchCount;
+      }
     }
-  }
-  return matchCount;
-}
-
-function populateIdMapForNode(node, idMap) {
-  let nodeParent = node.parentElement;
-  let idElements = node.querySelectorAll("[id]");
-  for (const elt of idElements) {
-    let current = elt;
-    while (current !== nodeParent && current != null) {
-      let idSet = idMap.get(current);
-      if (idSet == null) {
-        idSet = new Set;
-        idMap.set(current, idSet);
+    return matchCount;
+  }
+  function populateIdMapForNode(node, idMap) {
+    let nodeParent = node.parentElement;
+    let idElements = node.querySelectorAll("[id]");
+    for (const elt of idElements) {
+      let current = elt;
+      while (current !== nodeParent && current != null) {
+        let idSet = idMap.get(current);
+        if (idSet == null) {
+          idSet = new Set;
+          idMap.set(current, idSet);
+        }
+        idSet.add(elt.id);
+        current = current.parentElement;
       }
-      idSet.add(elt.id);
-      current = current.parentElement;
     }
   }
-}
-
-function createIdMap(oldContent, newContent) {
-  let idMap = new Map;
-  populateIdMapForNode(oldContent, idMap);
-  populateIdMapForNode(newContent, idMap);
-  return idMap;
-}
-
-var idiomorph = {
-  morph: morph
-};
+  function createIdMap(oldContent, newContent) {
+    let idMap = new Map;
+    populateIdMapForNode(oldContent, idMap);
+    populateIdMapForNode(newContent, idMap);
+    return idMap;
+  }
+  return {
+    morph: morph,
+    defaults: defaults
+  };
+}();
 
 class MorphRenderer extends Renderer {
   async render() {
@@ -3374,7 +3642,7 @@ class MorphRenderer extends Renderer {
   }
   #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
     this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
-    idiomorph.morph(currentElement, newElement, {
+    Idiomorph.morph(currentElement, newElement, {
       morphStyle: morphStyle,
       callbacks: {
         beforeNodeAdded: this.#shouldAddElement,
@@ -3487,6 +3755,9 @@ class PageRenderer extends Renderer {
     this.copyNewHeadScriptElements();
     await mergedHeadElements;
     await newStylesheetElements;
+    if (this.willRender) {
+      this.removeUnusedHeadStylesheetElements();
+    }
   }
   async replaceBody() {
     await this.preservingPermanentElements((async () => {
@@ -3510,6 +3781,11 @@ class PageRenderer extends Renderer {
       document.head.appendChild(activateScriptElement(element));
     }
   }
+  removeUnusedHeadStylesheetElements() {
+    for (const element of this.unusedHeadStylesheetElements) {
+      document.head.removeChild(element);
+    }
+  }
   async mergeProvisionalElements() {
     const newHeadElements = [ ...this.newHeadProvisionalElements ];
     for (const element of this.currentHeadProvisionalElements) {
@@ -3562,6 +3838,12 @@ class PageRenderer extends Renderer {
   async assignNewBody() {
     await this.renderElement(this.currentElement, this.newElement);
   }
+  get unusedHeadStylesheetElements() {
+    return this.oldHeadStylesheetElements.filter((element => !(element.hasAttribute("data-turbo-permanent") || element.hasAttribute("data-tag-name"))));
+  }
+  get oldHeadStylesheetElements() {
+    return this.currentHeadSnapshot.getStylesheetElementsNotInSnapshot(this.newHeadSnapshot);
+  }
   get newHeadStylesheetElements() {
     return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot);
   }
@@ -3663,7 +3945,10 @@ class PageView extends View {
     return this.snapshotCache.get(location);
   }
   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() {
     return PageSnapshot.fromElement(this.element);
@@ -3672,24 +3957,25 @@ class PageView extends View {
 
 class Preloader {
   selector="a[data-turbo-preload]";
-  constructor(delegate) {
+  constructor(delegate, snapshotCache) {
     this.delegate = delegate;
-  }
-  get snapshotCache() {
-    return this.delegate.navigator.view.snapshotCache;
+    this.snapshotCache = snapshotCache;
   }
   start() {
     if (document.readyState === "loading") {
-      return document.addEventListener("DOMContentLoaded", (() => {
-        this.preloadOnLoadLinksForView(document.body);
-      }));
+      document.addEventListener("DOMContentLoaded", this.#preloadAll);
     } else {
       this.preloadOnLoadLinksForView(document.body);
     }
   }
+  stop() {
+    document.removeEventListener("DOMContentLoaded", this.#preloadAll);
+  }
   preloadOnLoadLinksForView(element) {
     for (const link of element.querySelectorAll(this.selector)) {
-      this.preloadURL(link);
+      if (this.delegate.shouldPreloadLink(link)) {
+        this.preloadURL(link);
+      }
     }
   }
   async preloadURL(link) {
@@ -3697,33 +3983,27 @@ class Preloader {
     if (this.snapshotCache.has(location)) {
       return;
     }
-    try {
-      const response = await fetch(location.toString(), {
-        headers: {
-          "Sec-Purpose": "prefetch",
-          Accept: "text/html"
-        }
-      });
-      const responseText = await response.text();
-      const snapshot = PageSnapshot.fromHTMLString(responseText);
-      this.snapshotCache.put(location, snapshot);
-    } catch (_) {}
+    const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams, link);
+    await fetchRequest.perform();
   }
-}
-
-class LimitedSet extends Set {
-  constructor(maxSize) {
-    super();
-    this.maxSize = maxSize;
+  prepareRequest(fetchRequest) {
+    fetchRequest.headers["Sec-Purpose"] = "prefetch";
   }
-  add(value) {
-    if (this.size >= this.maxSize) {
-      const iterator = this.values();
-      const oldestValue = iterator.next().value;
-      this.delete(oldestValue);
-    }
-    super.add(value);
+  async requestSucceededWithResponse(fetchRequest, fetchResponse) {
+    try {
+      const responseHTML = await fetchResponse.responseHTML;
+      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
+      this.snapshotCache.put(fetchRequest.url, snapshot);
+    } catch (_) {}
   }
+  requestStarted(fetchRequest) {}
+  requestErrored(fetchRequest) {}
+  requestFinished(fetchRequest) {}
+  requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
+  requestFailedWithResponse(fetchRequest, fetchResponse) {}
+  #preloadAll=() => {
+    this.preloadOnLoadLinksForView(document.body);
+  };
 }
 
 class Cache {
@@ -3750,11 +4030,11 @@ class Cache {
 class Session {
   navigator=new Navigator(this);
   history=new History(this);
-  preloader=new Preloader(this);
   view=new PageView(this, document.documentElement);
   adapter=new BrowserAdapter(this);
   pageObserver=new PageObserver(this);
   cacheObserver=new CacheObserver;
+  linkPrefetchObserver=new LinkPrefetchObserver(this, document);
   linkClickObserver=new LinkClickObserver(this, window);
   formSubmitObserver=new FormSubmitObserver(this, document);
   scrollObserver=new ScrollObserver(this);
@@ -3763,16 +4043,23 @@ class Session {
   frameRedirector=new FrameRedirector(this, document.documentElement);
   streamMessageRenderer=new StreamMessageRenderer;
   cache=new Cache(this);
-  recentRequests=new LimitedSet(20);
   drive=true;
   enabled=true;
   progressBarDelay=500;
   started=false;
   formMode="on";
+  #pageRefreshDebouncePeriod=150;
+  constructor(recentRequests) {
+    this.recentRequests = recentRequests;
+    this.preloader = new Preloader(this, this.view.snapshotCache);
+    this.debouncedRefresh = this.refresh;
+    this.pageRefreshDebouncePeriod = this.pageRefreshDebouncePeriod;
+  }
   start() {
     if (!this.started) {
       this.pageObserver.start();
       this.cacheObserver.start();
+      this.linkPrefetchObserver.start();
       this.formLinkClickObserver.start();
       this.linkClickObserver.start();
       this.formSubmitObserver.start();
@@ -3792,6 +4079,7 @@ class Session {
     if (this.started) {
       this.pageObserver.stop();
       this.cacheObserver.stop();
+      this.linkPrefetchObserver.stop();
       this.formLinkClickObserver.stop();
       this.linkClickObserver.stop();
       this.formSubmitObserver.stop();
@@ -3799,6 +4087,7 @@ class Session {
       this.streamObserver.stop();
       this.frameRedirector.stop();
       this.history.stop();
+      this.preloader.stop();
       this.started = false;
     }
   }
@@ -3847,11 +4136,31 @@ class Session {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
+  get pageRefreshDebouncePeriod() {
+    return this.#pageRefreshDebouncePeriod;
+  }
+  set pageRefreshDebouncePeriod(value) {
+    this.refresh = debounce(this.debouncedRefresh.bind(this), value);
+    this.#pageRefreshDebouncePeriod = value;
+  }
+  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);
+    }
+  }
+  historyPoppedToLocationWithRestorationIdentifierAndDirection(location, restorationIdentifier, direction) {
     if (this.enabled) {
       this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
-        historyChanged: true
+        historyChanged: true,
+        direction: direction
       });
     } else {
       this.adapter.pageInvalidated({
@@ -3868,6 +4177,9 @@ class Session {
     return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation);
   }
   submittedFormLinkToLocation() {}
+  canPrefetchRequestToLocation(link, location) {
+    return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation);
+  }
   willFollowLinkToLocation(link, location, event) {
     return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation) && this.applicationAllowsFollowingLinkToLocation(link, location, event);
   }
@@ -3889,6 +4201,7 @@ class Session {
   visitStarted(visit) {
     if (!visit.acceptsStreamResponse) {
       markAsBusy(document.documentElement);
+      this.view.markVisitDirection(visit.direction);
     }
     extendURLWithDeprecatedProperties(visit.location);
     if (!visit.silent) {
@@ -3896,6 +4209,7 @@ class Session {
     }
   }
   visitCompleted(visit) {
+    this.view.unmarkVisitDirection();
     clearBusyState(document.documentElement);
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
@@ -3930,17 +4244,17 @@ class Session {
       this.notifyApplicationBeforeCachingSnapshot();
     }
   }
-  allowsImmediateRender({element: element}, isPreview, options) {
-    const event = this.notifyApplicationBeforeRender(element, isPreview, options);
+  allowsImmediateRender({element: element}, options) {
+    const event = this.notifyApplicationBeforeRender(element, options);
     const {defaultPrevented: defaultPrevented, detail: {render: render}} = event;
     if (this.view.renderer && render) {
       this.view.renderer.renderElement = render;
     }
     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) {
     this.preloader.preloadOnLoadLinksForView(element);
@@ -3991,20 +4305,18 @@ class Session {
   notifyApplicationBeforeCachingSnapshot() {
     return dispatch("turbo:before-cache");
   }
-  notifyApplicationBeforeRender(newBody, isPreview, options) {
+  notifyApplicationBeforeRender(newBody, options) {
     return dispatch("turbo:before-render", {
       detail: {
         newBody: newBody,
-        isPreview: isPreview,
         ...options
       },
       cancelable: true
     });
   }
-  notifyApplicationAfterRender(isPreview, renderMethod) {
+  notifyApplicationAfterRender(renderMethod) {
     return dispatch("turbo:render", {
       detail: {
-        isPreview: isPreview,
         renderMethod: renderMethod
       }
     });
@@ -4086,7 +4398,7 @@ const deprecatedLocationPropertyDescriptors = {
   }
 };
 
-const session = new Session;
+const session = new Session(recentRequests);
 
 const {cache: cache, navigator: navigator$1} = session;
 
@@ -4139,7 +4451,7 @@ var Turbo = Object.freeze({
   PageRenderer: PageRenderer,
   PageSnapshot: PageSnapshot,
   FrameRenderer: FrameRenderer,
-  fetch: fetch,
+  fetch: fetchWithTurboHeaders,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -4332,7 +4644,7 @@ class FrameController {
   formSubmissionFinished({formElement: formElement}) {
     clearBusyState(formElement, this.#findFrameElement(formElement));
   }
-  allowsImmediateRender({element: newFrame}, _isPreview, options) {
+  allowsImmediateRender({element: newFrame}, options) {
     const event = dispatch("turbo:before-frame-render", {
       target: this.element,
       detail: {
@@ -4806,11 +5118,14 @@ if (customElements.get("turbo-stream-source") === undefined) {
   }
 })();
 
-window.Turbo = Turbo;
+window.Turbo = {
+  ...Turbo,
+  StreamActions: StreamActions
+};
 
 start();
 
-var turbo_es2017Esm = Object.freeze({
+var Turbo$1 = Object.freeze({
   __proto__: null,
   FetchEnctype: FetchEnctype,
   FetchMethod: FetchMethod,
@@ -4828,7 +5143,7 @@ var turbo_es2017Esm = Object.freeze({
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
-  fetch: fetch,
+  fetch: fetchWithTurboHeaders,
   fetchEnctypeFromString: fetchEnctypeFromString,
   fetchMethodFromString: fetchMethodFromString,
   isSafe: isSafe,
@@ -4979,6 +5294,8 @@ function isBodyInit(body) {
   return body instanceof FormData || body instanceof URLSearchParams;
 }
 
+window.Turbo = Turbo$1;
+
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {
@@ -5514,4 +5831,4 @@ var index = Object.freeze({
   getConfig: getConfig
 });
 
-export { turbo_es2017Esm as Turbo, cable };
+export { Turbo$1 as Turbo, cable };