@hotwired/turbo 8.0.3 → 8.0.5

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.3
+Turbo 8.0.5
 Copyright © 2024 37signals LLC
  */
 /**
@@ -126,7 +126,7 @@ class FrameElement extends HTMLElement {
   loaded = Promise.resolve()
 
   static get observedAttributes() {
-    return ["disabled", "complete", "loading", "src"]
+    return ["disabled", "loading", "src"]
   }
 
   constructor() {
@@ -149,11 +149,9 @@ class FrameElement extends HTMLElement {
   attributeChangedCallback(name) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged();
-    } else if (name == "complete") {
-      this.delegate.completeChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
-    } else {
+    } else if (name == "disabled") {
       this.delegate.disabledChanged();
     }
   }
@@ -633,14 +631,18 @@ async function around(callback, reader) {
   return [before, after]
 }
 
-function doesNotTargetIFrame(anchor) {
-  if (anchor.hasAttribute("target")) {
-    for (const element of document.getElementsByName(anchor.target)) {
+function doesNotTargetIFrame(name) {
+  if (name === "_blank") {
+    return false
+  } else if (name) {
+    for (const element of document.getElementsByName(name)) {
       if (element instanceof HTMLIFrameElement) return false
     }
-  }
 
-  return true
+    return true
+  } else {
+    return true
+  }
 }
 
 function findLinkFromClickTarget(target) {
@@ -746,7 +748,7 @@ class FetchRequest {
     this.fetchOptions = {
       credentials: "same-origin",
       redirect: "follow",
-      method: method,
+      method: method.toUpperCase(),
       headers: { ...this.defaultHeaders },
       body: body,
       signal: this.abortSignal,
@@ -769,7 +771,7 @@ class FetchRequest {
 
     this.url = url;
     this.fetchOptions.body = body;
-    this.fetchOptions.method = fetchMethod;
+    this.fetchOptions.method = fetchMethod.toUpperCase();
   }
 
   get headers() {
@@ -1400,17 +1402,9 @@ function submissionDoesNotDismissDialog(form, submitter) {
 }
 
 function submissionDoesNotTargetIFrame(form, submitter) {
-  if (submitter?.hasAttribute("formtarget") || form.hasAttribute("target")) {
-    const target = submitter?.getAttribute("formtarget") || form.target;
-
-    for (const element of document.getElementsByName(target)) {
-      if (element instanceof HTMLIFrameElement) return false
-    }
+  const target = submitter?.getAttribute("formtarget") || form.getAttribute("target");
 
-    return true
-  } else {
-    return true
-  }
+  return doesNotTargetIFrame(target)
 }
 
 class View {
@@ -1563,7 +1557,7 @@ class LinkInterceptor {
   }
 
   clickBubbled = (event) => {
-    if (this.respondsToEventTarget(event.target)) {
+    if (this.clickEventIsSignificant(event)) {
       this.clickEvent = event;
     } else {
       delete this.clickEvent;
@@ -1571,7 +1565,7 @@ class LinkInterceptor {
   }
 
   linkClicked = (event) => {
-    if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+    if (this.clickEvent && this.clickEventIsSignificant(event)) {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault();
         event.preventDefault();
@@ -1585,9 +1579,11 @@ class LinkInterceptor {
     delete this.clickEvent;
   }
 
-  respondsToEventTarget(target) {
-    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-    return element && element.closest("turbo-frame, html") == this.element
+  clickEventIsSignificant(event) {
+    const target = event.composed ? event.target?.parentElement : event.target;
+    const element = findLinkFromClickTarget(target) || target;
+
+    return element instanceof Element && element.closest("turbo-frame, html") == this.element
   }
 }
 
@@ -1622,7 +1618,7 @@ class LinkClickObserver {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = (event.composedPath && event.composedPath()[0]) || event.target;
       const link = findLinkFromClickTarget(target);
-      if (link && doesNotTargetIFrame(link)) {
+      if (link && doesNotTargetIFrame(link.target)) {
         const location = getLocationForLink(link);
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault();
@@ -1791,6 +1787,10 @@ class Renderer {
     return true
   }
 
+  get shouldAutofocus() {
+    return true
+  }
+
   get reloadReason() {
     return
   }
@@ -1815,9 +1815,11 @@ class Renderer {
   }
 
   focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement;
-    if (element) {
-      element.focus();
+    if (this.shouldAutofocus) {
+      const element = this.connectedSnapshot.firstAutofocusableElement;
+      if (element) {
+        element.focus();
+      }
     }
   }
 
@@ -3168,7 +3170,7 @@ class LinkPrefetchObserver {
   }
 
   #tryToUsePrefetchedRequest = (event) => {
-    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
       const cached = prefetchCache.get(event.detail.url.toString());
 
       if (cached) {
@@ -3385,6 +3387,7 @@ class Navigator {
 
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
+    delete this.currentVisit;
   }
 
   locationWithActionIsSamePage(location, action) {
@@ -4567,6 +4570,81 @@ var Idiomorph = (function () {
         }
     })();
 
+function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
+  Idiomorph.morph(currentElement, newElement, {
+    ...options,
+    callbacks: new DefaultIdiomorphCallbacks(callbacks)
+  });
+}
+
+function morphChildren(currentElement, newElement) {
+  morphElements(currentElement, newElement.children, {
+    morphStyle: "innerHTML"
+  });
+}
+
+class DefaultIdiomorphCallbacks {
+  #beforeNodeMorphed
+
+  constructor({ beforeNodeMorphed } = {}) {
+    this.#beforeNodeMorphed = beforeNodeMorphed || (() => true);
+  }
+
+  beforeNodeAdded = (node) => {
+    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
+  }
+
+  beforeNodeMorphed = (currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
+        const event = dispatch("turbo:before-morph-element", {
+          cancelable: true,
+          target: currentElement,
+          detail: { currentElement, newElement }
+        });
+
+        return !event.defaultPrevented
+      } else {
+        return false
+      }
+    }
+  }
+
+  beforeAttributeUpdated = (attributeName, target, mutationType) => {
+    const event = dispatch("turbo:before-morph-attribute", {
+      cancelable: true,
+      target,
+      detail: { attributeName, mutationType }
+    });
+
+    return !event.defaultPrevented
+  }
+
+  beforeNodeRemoved = (node) => {
+    return this.beforeNodeMorphed(node)
+  }
+
+  afterNodeMorphed = (currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      dispatch("turbo:morph-element", {
+        target: currentElement,
+        detail: { currentElement, newElement }
+      });
+    }
+  }
+}
+
+class MorphingFrameRenderer extends FrameRenderer {
+  static renderElement(currentElement, newElement) {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    });
+
+    morphChildren(currentElement, newElement);
+  }
+}
+
 class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
@@ -4779,119 +4857,47 @@ class PageRenderer extends Renderer {
   }
 }
 
-class MorphRenderer extends PageRenderer {
-  async render() {
-    if (this.willRender) await this.#morphBody();
-  }
-
-  get renderMethod() {
-    return "morph"
-  }
-
-  // Private
-
-  async #morphBody() {
-    this.#morphElements(this.currentElement, this.newElement);
-    this.#reloadRemoteFrames();
-
-    dispatch("turbo:morph", {
-      detail: {
-        currentElement: this.currentElement,
-        newElement: this.newElement
-      }
-    });
-  }
-
-  #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
-    this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
-
-    Idiomorph.morph(currentElement, newElement, {
-      morphStyle: morphStyle,
+class MorphingPageRenderer extends PageRenderer {
+  static renderElement(currentElement, newElement) {
+    morphElements(currentElement, newElement, {
       callbacks: {
-        beforeNodeAdded: this.#shouldAddElement,
-        beforeNodeMorphed: this.#shouldMorphElement,
-        beforeAttributeUpdated: this.#shouldUpdateAttribute,
-        beforeNodeRemoved: this.#shouldRemoveElement,
-        afterNodeMorphed: this.#didMorphElement
+        beforeNodeMorphed: element => !canRefreshFrame(element)
       }
     });
-  }
 
-  #shouldAddElement = (node) => {
-    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-  }
-
-  #shouldMorphElement = (oldNode, newNode) => {
-    if (oldNode instanceof HTMLElement) {
-      if (!oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))) {
-        const event = dispatch("turbo:before-morph-element", {
-          cancelable: true,
-          target: oldNode,
-          detail: {
-            newElement: newNode
-          }
-        });
-
-        return !event.defaultPrevented
-      } else {
-        return false
-      }
+    for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+      if (canRefreshFrame(frame)) refreshFrame(frame);
     }
-  }
-
-  #shouldUpdateAttribute = (attributeName, target, mutationType) => {
-    const event = dispatch("turbo:before-morph-attribute", { cancelable: true, target, detail: { attributeName, mutationType } });
 
-    return !event.defaultPrevented
+    dispatch("turbo:morph", { detail: { currentElement, newElement } });
   }
 
-  #didMorphElement = (oldNode, newNode) => {
-    if (newNode instanceof HTMLElement) {
-      dispatch("turbo:morph-element", {
-        target: oldNode,
-        detail: {
-          newElement: newNode
-        }
-      });
-    }
-  }
-
-  #shouldRemoveElement = (node) => {
-    return this.#shouldMorphElement(node)
+  async preservingPermanentElements(callback) {
+    return await callback()
   }
 
-  #reloadRemoteFrames() {
-    this.#remoteFrames().forEach((frame) => {
-      if (this.#isFrameReloadedWithMorph(frame)) {
-        this.#renderFrameWithMorph(frame);
-        frame.reload();
-      }
-    });
+  get renderMethod() {
+    return "morph"
   }
 
-  #renderFrameWithMorph(frame) {
-    frame.addEventListener("turbo:before-frame-render", (event) => {
-      event.detail.render = this.#morphFrameUpdate;
-    }, { once: true });
+  get shouldAutofocus() {
+    return false
   }
+}
 
-  #morphFrameUpdate = (currentElement, newElement) => {
-    dispatch("turbo:before-frame-morph", {
-      target: currentElement,
-      detail: { currentElement, newElement }
-    });
-    this.#morphElements(currentElement, newElement.children, "innerHTML");
-  }
+function canRefreshFrame(frame) {
+  return frame instanceof FrameElement &&
+    frame.src &&
+    frame.refresh === "morph" &&
+    !frame.closest("[data-turbo-permanent]")
+}
 
-  #isFrameReloadedWithMorph(element) {
-    return element.src && element.refresh === "morph"
-  }
+function refreshFrame(frame) {
+  frame.addEventListener("turbo:before-frame-render", ({ detail }) => {
+    detail.render = MorphingFrameRenderer.renderElement;
+  }, { once: true });
 
-  #remoteFrames() {
-    return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
-      return !frame.closest('[data-turbo-permanent]')
-    })
-  }
+  frame.reload();
 }
 
 class SnapshotCache {
@@ -4960,9 +4966,9 @@ class PageView extends View {
 
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
     const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
-    const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer;
+    const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
 
-    const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender);
+    const renderer = new rendererClass(this.snapshot, snapshot, rendererClass.renderElement, isPreview, willRender);
 
     if (!renderer.shouldRender) {
       this.forceReloaded = true;
@@ -5198,7 +5204,7 @@ class Session {
 
   refresh(url, requestId) {
     const isRecentRequest = requestId && this.recentRequests.has(requestId);
-    if (!isRecentRequest) {
+    if (!isRecentRequest && !this.navigator.currentVisit) {
       this.visit(url, { action: "replace", shouldCacheSnapshot: false });
     }
   }
@@ -5773,20 +5779,12 @@ class FrameController {
 
   sourceURLReloaded() {
     const { src } = this.element;
-    this.#ignoringChangesToAttribute("complete", () => {
-      this.element.removeAttribute("complete");
-    });
+    this.element.removeAttribute("complete");
     this.element.src = null;
     this.element.src = src;
     return this.element.loaded
   }
 
-  completeChanged() {
-    if (this.#isIgnoringChangesTo("complete")) return
-
-    this.#loadSourceURL();
-  }
-
   loadingStyleChanged() {
     if (this.loadingStyle == FrameLoadingStyle.lazy) {
       this.appearanceObserver.start();
@@ -6211,13 +6209,11 @@ class FrameController {
   }
 
   set complete(value) {
-    this.#ignoringChangesToAttribute("complete", () => {
-      if (value) {
-        this.element.setAttribute("complete", "");
-      } else {
-        this.element.removeAttribute("complete");
-      }
-    });
+    if (value) {
+      this.element.setAttribute("complete", "");
+    } else {
+      this.element.removeAttribute("complete");
+    }
   }
 
   get isActive() {
@@ -6298,13 +6294,27 @@ const StreamActions = {
   },
 
   replace() {
-    this.targetElements.forEach((e) => e.replaceWith(this.templateContent));
+    const method = this.getAttribute("method");
+
+    this.targetElements.forEach((targetElement) => {
+      if (method === "morph") {
+        morphElements(targetElement, this.templateContent);
+      } else {
+        targetElement.replaceWith(this.templateContent);
+      }
+    });
   },
 
   update() {
+    const method = this.getAttribute("method");
+
     this.targetElements.forEach((targetElement) => {
-      targetElement.innerHTML = "";
-      targetElement.append(this.templateContent);
+      if (method === "morph") {
+        morphChildren(targetElement, this.templateContent);
+      } else {
+        targetElement.innerHTML = "";
+        targetElement.append(this.templateContent);
+      }
     });
   },
 
@@ -6318,20 +6328,22 @@ const StreamActions = {
 /**
  * Renders updates to the page from a stream of messages.
  *
- * Using the `action` attribute, this can be configured one of four ways:
+ * Using the `action` attribute, this can be configured one of eight ways:
  *
- * - `append` - appends the result to the container
- * - `prepend` - prepends the result to the container
- * - `replace` - replaces the contents of the container
- * - `remove` - removes the container
- * - `before` - inserts the result before the target
  * - `after` - inserts the result after the target
+ * - `append` - appends the result to the target
+ * - `before` - inserts the result before the target
+ * - `prepend` - prepends the result to the target
+ * - `refresh` - initiates a page refresh
+ * - `remove` - removes the target
+ * - `replace` - replaces the outer HTML of the target
+ * - `update` - replaces the inner HTML of the target
  *
  * @customElement turbo-stream
  * @example
  *   <turbo-stream action="append" target="dom_id">
  *     <template>
- *       Content to append to container designated with the dom_id.
+ *       Content to append to target designated with the dom_id.
  *     </template>
  *   </turbo-stream>
  */

package/dist/turbo.es2017-umd.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.3
+Turbo 8.0.5
 Copyright © 2024 37signals LLC
  */
 (function (global, factory) {
@@ -132,7 +132,7 @@ Copyright © 2024 37signals LLC
     loaded = Promise.resolve()
 
     static get observedAttributes() {
-      return ["disabled", "complete", "loading", "src"]
+      return ["disabled", "loading", "src"]
     }
 
     constructor() {
@@ -155,11 +155,9 @@ Copyright © 2024 37signals LLC
     attributeChangedCallback(name) {
       if (name == "loading") {
         this.delegate.loadingStyleChanged();
-      } else if (name == "complete") {
-        this.delegate.completeChanged();
       } else if (name == "src") {
         this.delegate.sourceURLChanged();
-      } else {
+      } else if (name == "disabled") {
         this.delegate.disabledChanged();
       }
     }
@@ -639,14 +637,18 @@ Copyright © 2024 37signals LLC
     return [before, after]
   }
 
-  function doesNotTargetIFrame(anchor) {
-    if (anchor.hasAttribute("target")) {
-      for (const element of document.getElementsByName(anchor.target)) {
+  function doesNotTargetIFrame(name) {
+    if (name === "_blank") {
+      return false
+    } else if (name) {
+      for (const element of document.getElementsByName(name)) {
         if (element instanceof HTMLIFrameElement) return false
       }
-    }
 
-    return true
+      return true
+    } else {
+      return true
+    }
   }
 
   function findLinkFromClickTarget(target) {
@@ -752,7 +754,7 @@ Copyright © 2024 37signals LLC
       this.fetchOptions = {
         credentials: "same-origin",
         redirect: "follow",
-        method: method,
+        method: method.toUpperCase(),
         headers: { ...this.defaultHeaders },
         body: body,
         signal: this.abortSignal,
@@ -775,7 +777,7 @@ Copyright © 2024 37signals LLC
 
       this.url = url;
       this.fetchOptions.body = body;
-      this.fetchOptions.method = fetchMethod;
+      this.fetchOptions.method = fetchMethod.toUpperCase();
     }
 
     get headers() {
@@ -1406,17 +1408,9 @@ Copyright © 2024 37signals LLC
   }
 
   function submissionDoesNotTargetIFrame(form, submitter) {
-    if (submitter?.hasAttribute("formtarget") || form.hasAttribute("target")) {
-      const target = submitter?.getAttribute("formtarget") || form.target;
-
-      for (const element of document.getElementsByName(target)) {
-        if (element instanceof HTMLIFrameElement) return false
-      }
+    const target = submitter?.getAttribute("formtarget") || form.getAttribute("target");
 
-      return true
-    } else {
-      return true
-    }
+    return doesNotTargetIFrame(target)
   }
 
   class View {
@@ -1569,7 +1563,7 @@ Copyright © 2024 37signals LLC
     }
 
     clickBubbled = (event) => {
-      if (this.respondsToEventTarget(event.target)) {
+      if (this.clickEventIsSignificant(event)) {
         this.clickEvent = event;
       } else {
         delete this.clickEvent;
@@ -1577,7 +1571,7 @@ Copyright © 2024 37signals LLC
     }
 
     linkClicked = (event) => {
-      if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+      if (this.clickEvent && this.clickEventIsSignificant(event)) {
         if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
           this.clickEvent.preventDefault();
           event.preventDefault();
@@ -1591,9 +1585,11 @@ Copyright © 2024 37signals LLC
       delete this.clickEvent;
     }
 
-    respondsToEventTarget(target) {
-      const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-      return element && element.closest("turbo-frame, html") == this.element
+    clickEventIsSignificant(event) {
+      const target = event.composed ? event.target?.parentElement : event.target;
+      const element = findLinkFromClickTarget(target) || target;
+
+      return element instanceof Element && element.closest("turbo-frame, html") == this.element
     }
   }
 
@@ -1628,7 +1624,7 @@ Copyright © 2024 37signals LLC
       if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
         const target = (event.composedPath && event.composedPath()[0]) || event.target;
         const link = findLinkFromClickTarget(target);
-        if (link && doesNotTargetIFrame(link)) {
+        if (link && doesNotTargetIFrame(link.target)) {
           const location = getLocationForLink(link);
           if (this.delegate.willFollowLinkToLocation(link, location, event)) {
             event.preventDefault();
@@ -1797,6 +1793,10 @@ Copyright © 2024 37signals LLC
       return true
     }
 
+    get shouldAutofocus() {
+      return true
+    }
+
     get reloadReason() {
       return
     }
@@ -1821,9 +1821,11 @@ Copyright © 2024 37signals LLC
     }
 
     focusFirstAutofocusableElement() {
-      const element = this.connectedSnapshot.firstAutofocusableElement;
-      if (element) {
-        element.focus();
+      if (this.shouldAutofocus) {
+        const element = this.connectedSnapshot.firstAutofocusableElement;
+        if (element) {
+          element.focus();
+        }
       }
     }
 
@@ -3174,7 +3176,7 @@ Copyright © 2024 37signals LLC
     }
 
     #tryToUsePrefetchedRequest = (event) => {
-      if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+      if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
         const cached = prefetchCache.get(event.detail.url.toString());
 
         if (cached) {
@@ -3391,6 +3393,7 @@ Copyright © 2024 37signals LLC
 
     visitCompleted(visit) {
       this.delegate.visitCompleted(visit);
+      delete this.currentVisit;
     }
 
     locationWithActionIsSamePage(location, action) {
@@ -4573,6 +4576,81 @@ Copyright © 2024 37signals LLC
           }
       })();
 
+  function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
+    Idiomorph.morph(currentElement, newElement, {
+      ...options,
+      callbacks: new DefaultIdiomorphCallbacks(callbacks)
+    });
+  }
+
+  function morphChildren(currentElement, newElement) {
+    morphElements(currentElement, newElement.children, {
+      morphStyle: "innerHTML"
+    });
+  }
+
+  class DefaultIdiomorphCallbacks {
+    #beforeNodeMorphed
+
+    constructor({ beforeNodeMorphed } = {}) {
+      this.#beforeNodeMorphed = beforeNodeMorphed || (() => true);
+    }
+
+    beforeNodeAdded = (node) => {
+      return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
+    }
+
+    beforeNodeMorphed = (currentElement, newElement) => {
+      if (currentElement instanceof Element) {
+        if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
+          const event = dispatch("turbo:before-morph-element", {
+            cancelable: true,
+            target: currentElement,
+            detail: { currentElement, newElement }
+          });
+
+          return !event.defaultPrevented
+        } else {
+          return false
+        }
+      }
+    }
+
+    beforeAttributeUpdated = (attributeName, target, mutationType) => {
+      const event = dispatch("turbo:before-morph-attribute", {
+        cancelable: true,
+        target,
+        detail: { attributeName, mutationType }
+      });
+
+      return !event.defaultPrevented
+    }
+
+    beforeNodeRemoved = (node) => {
+      return this.beforeNodeMorphed(node)
+    }
+
+    afterNodeMorphed = (currentElement, newElement) => {
+      if (currentElement instanceof Element) {
+        dispatch("turbo:morph-element", {
+          target: currentElement,
+          detail: { currentElement, newElement }
+        });
+      }
+    }
+  }
+
+  class MorphingFrameRenderer extends FrameRenderer {
+    static renderElement(currentElement, newElement) {
+      dispatch("turbo:before-frame-morph", {
+        target: currentElement,
+        detail: { currentElement, newElement }
+      });
+
+      morphChildren(currentElement, newElement);
+    }
+  }
+
   class PageRenderer extends Renderer {
     static renderElement(currentElement, newElement) {
       if (document.body && newElement instanceof HTMLBodyElement) {
@@ -4785,119 +4863,47 @@ Copyright © 2024 37signals LLC
     }
   }
 
-  class MorphRenderer extends PageRenderer {
-    async render() {
-      if (this.willRender) await this.#morphBody();
-    }
-
-    get renderMethod() {
-      return "morph"
-    }
-
-    // Private
-
-    async #morphBody() {
-      this.#morphElements(this.currentElement, this.newElement);
-      this.#reloadRemoteFrames();
-
-      dispatch("turbo:morph", {
-        detail: {
-          currentElement: this.currentElement,
-          newElement: this.newElement
-        }
-      });
-    }
-
-    #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
-      this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
-
-      Idiomorph.morph(currentElement, newElement, {
-        morphStyle: morphStyle,
+  class MorphingPageRenderer extends PageRenderer {
+    static renderElement(currentElement, newElement) {
+      morphElements(currentElement, newElement, {
         callbacks: {
-          beforeNodeAdded: this.#shouldAddElement,
-          beforeNodeMorphed: this.#shouldMorphElement,
-          beforeAttributeUpdated: this.#shouldUpdateAttribute,
-          beforeNodeRemoved: this.#shouldRemoveElement,
-          afterNodeMorphed: this.#didMorphElement
+          beforeNodeMorphed: element => !canRefreshFrame(element)
         }
       });
-    }
 
-    #shouldAddElement = (node) => {
-      return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-    }
-
-    #shouldMorphElement = (oldNode, newNode) => {
-      if (oldNode instanceof HTMLElement) {
-        if (!oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))) {
-          const event = dispatch("turbo:before-morph-element", {
-            cancelable: true,
-            target: oldNode,
-            detail: {
-              newElement: newNode
-            }
-          });
-
-          return !event.defaultPrevented
-        } else {
-          return false
-        }
+      for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+        if (canRefreshFrame(frame)) refreshFrame(frame);
       }
-    }
-
-    #shouldUpdateAttribute = (attributeName, target, mutationType) => {
-      const event = dispatch("turbo:before-morph-attribute", { cancelable: true, target, detail: { attributeName, mutationType } });
 
-      return !event.defaultPrevented
+      dispatch("turbo:morph", { detail: { currentElement, newElement } });
     }
 
-    #didMorphElement = (oldNode, newNode) => {
-      if (newNode instanceof HTMLElement) {
-        dispatch("turbo:morph-element", {
-          target: oldNode,
-          detail: {
-            newElement: newNode
-          }
-        });
-      }
-    }
-
-    #shouldRemoveElement = (node) => {
-      return this.#shouldMorphElement(node)
+    async preservingPermanentElements(callback) {
+      return await callback()
     }
 
-    #reloadRemoteFrames() {
-      this.#remoteFrames().forEach((frame) => {
-        if (this.#isFrameReloadedWithMorph(frame)) {
-          this.#renderFrameWithMorph(frame);
-          frame.reload();
-        }
-      });
+    get renderMethod() {
+      return "morph"
     }
 
-    #renderFrameWithMorph(frame) {
-      frame.addEventListener("turbo:before-frame-render", (event) => {
-        event.detail.render = this.#morphFrameUpdate;
-      }, { once: true });
+    get shouldAutofocus() {
+      return false
     }
+  }
 
-    #morphFrameUpdate = (currentElement, newElement) => {
-      dispatch("turbo:before-frame-morph", {
-        target: currentElement,
-        detail: { currentElement, newElement }
-      });
-      this.#morphElements(currentElement, newElement.children, "innerHTML");
-    }
+  function canRefreshFrame(frame) {
+    return frame instanceof FrameElement &&
+      frame.src &&
+      frame.refresh === "morph" &&
+      !frame.closest("[data-turbo-permanent]")
+  }
 
-    #isFrameReloadedWithMorph(element) {
-      return element.src && element.refresh === "morph"
-    }
+  function refreshFrame(frame) {
+    frame.addEventListener("turbo:before-frame-render", ({ detail }) => {
+      detail.render = MorphingFrameRenderer.renderElement;
+    }, { once: true });
 
-    #remoteFrames() {
-      return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
-        return !frame.closest('[data-turbo-permanent]')
-      })
-    }
+    frame.reload();
   }
 
   class SnapshotCache {
@@ -4966,9 +4972,9 @@ Copyright © 2024 37signals LLC
 
     renderPage(snapshot, isPreview = false, willRender = true, visit) {
       const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
-      const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer;
+      const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
 
-      const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender);
+      const renderer = new rendererClass(this.snapshot, snapshot, rendererClass.renderElement, isPreview, willRender);
 
       if (!renderer.shouldRender) {
         this.forceReloaded = true;
@@ -5204,7 +5210,7 @@ Copyright © 2024 37signals LLC
 
     refresh(url, requestId) {
       const isRecentRequest = requestId && this.recentRequests.has(requestId);
-      if (!isRecentRequest) {
+      if (!isRecentRequest && !this.navigator.currentVisit) {
         this.visit(url, { action: "replace", shouldCacheSnapshot: false });
       }
     }
@@ -5779,20 +5785,12 @@ Copyright © 2024 37signals LLC
 
     sourceURLReloaded() {
       const { src } = this.element;
-      this.#ignoringChangesToAttribute("complete", () => {
-        this.element.removeAttribute("complete");
-      });
+      this.element.removeAttribute("complete");
       this.element.src = null;
       this.element.src = src;
       return this.element.loaded
     }
 
-    completeChanged() {
-      if (this.#isIgnoringChangesTo("complete")) return
-
-      this.#loadSourceURL();
-    }
-
     loadingStyleChanged() {
       if (this.loadingStyle == FrameLoadingStyle.lazy) {
         this.appearanceObserver.start();
@@ -6217,13 +6215,11 @@ Copyright © 2024 37signals LLC
     }
 
     set complete(value) {
-      this.#ignoringChangesToAttribute("complete", () => {
-        if (value) {
-          this.element.setAttribute("complete", "");
-        } else {
-          this.element.removeAttribute("complete");
-        }
-      });
+      if (value) {
+        this.element.setAttribute("complete", "");
+      } else {
+        this.element.removeAttribute("complete");
+      }
     }
 
     get isActive() {
@@ -6304,13 +6300,27 @@ Copyright © 2024 37signals LLC
     },
 
     replace() {
-      this.targetElements.forEach((e) => e.replaceWith(this.templateContent));
+      const method = this.getAttribute("method");
+
+      this.targetElements.forEach((targetElement) => {
+        if (method === "morph") {
+          morphElements(targetElement, this.templateContent);
+        } else {
+          targetElement.replaceWith(this.templateContent);
+        }
+      });
     },
 
     update() {
+      const method = this.getAttribute("method");
+
       this.targetElements.forEach((targetElement) => {
-        targetElement.innerHTML = "";
-        targetElement.append(this.templateContent);
+        if (method === "morph") {
+          morphChildren(targetElement, this.templateContent);
+        } else {
+          targetElement.innerHTML = "";
+          targetElement.append(this.templateContent);
+        }
       });
     },
 
@@ -6324,20 +6334,22 @@ Copyright © 2024 37signals LLC
   /**
    * Renders updates to the page from a stream of messages.
    *
-   * Using the `action` attribute, this can be configured one of four ways:
+   * Using the `action` attribute, this can be configured one of eight ways:
    *
-   * - `append` - appends the result to the container
-   * - `prepend` - prepends the result to the container
-   * - `replace` - replaces the contents of the container
-   * - `remove` - removes the container
-   * - `before` - inserts the result before the target
    * - `after` - inserts the result after the target
+   * - `append` - appends the result to the target
+   * - `before` - inserts the result before the target
+   * - `prepend` - prepends the result to the target
+   * - `refresh` - initiates a page refresh
+   * - `remove` - removes the target
+   * - `replace` - replaces the outer HTML of the target
+   * - `update` - replaces the inner HTML of the target
    *
    * @customElement turbo-stream
    * @example
    *   <turbo-stream action="append" target="dom_id">
    *     <template>
-   *       Content to append to container designated with the dom_id.
+   *       Content to append to target designated with the dom_id.
    *     </template>
    *   </turbo-stream>
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo",
-  "version": "8.0.3",
+  "version": "8.0.5",
   "description": "The speed of a single-page web application without having to write any JavaScript",
   "module": "dist/turbo.es2017-esm.js",
   "main": "dist/turbo.es2017-umd.js",