@hotwired/turbo 8.0.0-beta.4 → 8.0.0-rc.2

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.0-beta.4
+Turbo 8.0.0-rc.2
 Copyright © 2024 37signals LLC
  */
 /**
@@ -1469,7 +1469,12 @@ class View {
   // Rendering
 
   async render(renderer) {
-    const { isPreview, shouldRender, newSnapshot: snapshot } = renderer;
+    const { isPreview, shouldRender, willRender, newSnapshot: snapshot } = renderer;
+
+    // A workaround to ignore tracked element mismatch reloads when performing
+    // a promoted Visit from a frame navigation
+    const shouldInvalidate = willRender;
+
     if (shouldRender) {
       try {
         this.renderPromise = new Promise((resolve) => (this.#resolveRenderPromise = resolve));
@@ -1477,7 +1482,7 @@ class View {
         await this.prepareToRenderSnapshot(renderer);
 
         const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve));
-        const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement };
+        const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement, renderMethod: this.renderer.renderMethod };
         const immediateRender = this.delegate.allowsImmediateRender(snapshot, options);
         if (!immediateRender) await renderInterception;
 
@@ -1490,7 +1495,7 @@ class View {
         this.#resolveRenderPromise(undefined);
         delete this.renderPromise;
       }
-    } else {
+    } else if (shouldInvalidate) {
       this.invalidate(renderer.reloadReason);
     }
   }
@@ -2360,6 +2365,7 @@ class Visit {
     this.snapshotHTML = snapshotHTML;
     this.response = response;
     this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
+    this.isPageRefresh = this.view.isPageRefresh(this);
     this.visitCachedSnapshot = visitCachedSnapshot;
     this.willRender = willRender;
     this.updateHistory = updateHistory;
@@ -2525,7 +2531,7 @@ class Visit {
       const isPreview = this.shouldIssueRequest();
       this.render(async () => {
         this.cacheSnapshot();
-        if (this.isSamePage) {
+        if (this.isSamePage || this.isPageRefresh) {
           this.adapter.visitRendered(this);
         } else {
           if (this.view.renderPromise) await this.view.renderPromise;
@@ -3167,7 +3173,7 @@ class LinkPrefetchObserver {
   prepareRequest(request) {
     const link = request.target;
 
-    request.headers["Sec-Purpose"] = "prefetch";
+    request.headers["X-Sec-Purpose"] = "prefetch";
 
     const turboFrame = link.closest("turbo-frame");
     const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id;
@@ -3177,7 +3183,7 @@ class LinkPrefetchObserver {
     }
 
     if (link.hasAttribute("data-turbo-stream")) {
-      request.acceptResponseType("text/vnd.turbo-stream.html");
+      request.acceptResponseType(StreamMessage.contentType);
     }
   }
 
@@ -3202,7 +3208,7 @@ class LinkPrefetchObserver {
   #isPrefetchable(link) {
     const href = link.getAttribute("href");
 
-    if (!href || href === "#" || link.dataset.turbo === "false" || link.dataset.turboPrefetch === "false") {
+    if (!href || href === "#" || link.getAttribute("data-turbo") === "false" || link.getAttribute("data-turbo-prefetch") === "false") {
       return false
     }
 
@@ -3218,7 +3224,8 @@ class LinkPrefetchObserver {
       return false
     }
 
-    if (link.dataset.turboMethod && link.dataset.turboMethod !== "get") {
+    const turboMethod = link.getAttribute("data-turbo-method");
+    if (turboMethod && turboMethod !== "get") {
       return false
     }
 
@@ -3226,13 +3233,9 @@ class LinkPrefetchObserver {
       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") {
+    if (turboPrefetchParent && turboPrefetchParent.getAttribute("data-turbo-prefetch") === "false") {
       return false
     }
 
@@ -3825,7 +3828,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -4547,92 +4550,6 @@ var Idiomorph = (function () {
         }
     })();
 
-class MorphRenderer extends Renderer {
-  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,
-      callbacks: {
-        beforeNodeAdded: this.#shouldAddElement,
-        beforeNodeMorphed: this.#shouldMorphElement,
-        beforeNodeRemoved: this.#shouldRemoveElement
-      }
-    });
-  }
-
-  #shouldAddElement = (node) => {
-    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-  }
-
-  #shouldMorphElement = (oldNode, newNode) => {
-    if (oldNode instanceof HTMLElement) {
-      return !oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))
-    } else {
-      return true
-    }
-  }
-
-  #shouldRemoveElement = (node) => {
-    return this.#shouldMorphElement(node)
-  }
-
-  #reloadRemoteFrames() {
-    this.#remoteFrames().forEach((frame) => {
-      if (this.#isFrameReloadedWithMorph(frame)) {
-        this.#renderFrameWithMorph(frame);
-        frame.reload();
-      }
-    });
-  }
-
-  #renderFrameWithMorph(frame) {
-    frame.addEventListener("turbo:before-frame-render", (event) => {
-      event.detail.render = this.#morphFrameUpdate;
-    }, { once: true });
-  }
-
-  #morphFrameUpdate = (currentElement, newElement) => {
-    dispatch("turbo:before-frame-morph", {
-      target: currentElement,
-      detail: { currentElement, newElement }
-    });
-    this.#morphElements(currentElement, newElement.children, "innerHTML");
-  }
-
-  #isFrameReloadedWithMorph(element) {
-    return element.src && element.refresh === "morph"
-  }
-
-  #remoteFrames() {
-    return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
-      return !frame.closest('[data-turbo-permanent]')
-    })
-  }
-}
-
 class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
@@ -4845,6 +4762,122 @@ 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, {
+      ignoreActiveValue: true,
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeAdded: this.#shouldAddElement,
+        beforeNodeMorphed: this.#shouldMorphElement,
+        beforeAttributeUpdated: this.#shouldUpdateAttribute,
+        beforeNodeRemoved: this.#shouldRemoveElement,
+        afterNodeMorphed: this.#didMorphElement
+      }
+    });
+  }
+
+  #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
+      }
+    }
+  }
+
+  #shouldUpdateAttribute = (attributeName, target, mutationType) => {
+    const event = dispatch("turbo:before-morph-attribute", { cancelable: true, target, detail: { attributeName, mutationType } });
+
+    return !event.defaultPrevented
+  }
+
+  #didMorphElement = (oldNode, newNode) => {
+    if (newNode instanceof HTMLElement) {
+      dispatch("turbo:morph-element", {
+        target: oldNode,
+        detail: {
+          newElement: newNode
+        }
+      });
+    }
+  }
+
+  #shouldRemoveElement = (node) => {
+    return this.#shouldMorphElement(node)
+  }
+
+  #reloadRemoteFrames() {
+    this.#remoteFrames().forEach((frame) => {
+      if (this.#isFrameReloadedWithMorph(frame)) {
+        this.#renderFrameWithMorph(frame);
+        frame.reload();
+      }
+    });
+  }
+
+  #renderFrameWithMorph(frame) {
+    frame.addEventListener("turbo:before-frame-render", (event) => {
+      event.detail.render = this.#morphFrameUpdate;
+    }, { once: true });
+  }
+
+  #morphFrameUpdate = (currentElement, newElement) => {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    });
+    this.#morphElements(currentElement, newElement.children, "innerHTML");
+  }
+
+  #isFrameReloadedWithMorph(element) {
+    return element.src && element.refresh === "morph"
+  }
+
+  #remoteFrames() {
+    return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
+      return !frame.closest('[data-turbo-permanent]')
+    })
+  }
+}
+
 class SnapshotCache {
   keys = []
   snapshots = {}
@@ -5004,7 +5037,7 @@ class Preloader {
   // Fetch request delegate
 
   prepareRequest(fetchRequest) {
-    fetchRequest.headers["Sec-Purpose"] = "prefetch";
+    fetchRequest.headers["X-Sec-Purpose"] = "prefetch";
   }
 
   async requestSucceededWithResponse(fetchRequest, fetchResponse) {
@@ -5138,8 +5171,10 @@ class Session {
     const frameElement = options.frame ? document.getElementById(options.frame) : null;
 
     if (frameElement instanceof FrameElement) {
+      const action = options.action || getVisitAction(frameElement);
+
+      frameElement.delegate.proposeVisitIfNavigatedWithAction(frameElement, action);
       frameElement.src = location.toString();
-      frameElement.loaded;
     } else {
       this.navigator.proposeVisit(expandURL(location), options);
     }
@@ -5780,7 +5815,7 @@ class FrameController {
   // Appearance observer delegate
 
   elementAppearedInViewport(element) {
-    this.proposeVisitIfNavigatedWithAction(element, element);
+    this.proposeVisitIfNavigatedWithAction(element, getVisitAction(element));
     this.#loadSourceURL();
   }
 
@@ -5868,7 +5903,7 @@ class FrameController {
   formSubmissionSucceededWithResponse(formSubmission, response) {
     const frame = this.#findFrameElement(formSubmission.formElement, formSubmission.submitter);
 
-    frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
+    frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(formSubmission.submitter, formSubmission.formElement, frame));
     frame.delegate.loadResponse(response);
 
     if (!formSubmission.isSafe) {
@@ -5973,15 +6008,15 @@ class FrameController {
   #navigateFrame(element, url, submitter) {
     const frame = this.#findFrameElement(element, submitter);
 
-    frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
+    frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(submitter, element, frame));
 
     this.#withCurrentNavigationElement(element, () => {
       frame.src = url;
     });
   }
 
-  proposeVisitIfNavigatedWithAction(frame, element, submitter) {
-    this.action = getVisitAction(submitter, element, frame);
+  proposeVisitIfNavigatedWithAction(frame, action = null) {
+    this.action = action;
 
     if (this.action) {
       const pageSnapshot = PageSnapshot.fromElement(frame).clone();

package/dist/turbo.es2017-umd.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.0-beta.4
+Turbo 8.0.0-rc.2
 Copyright © 2024 37signals LLC
  */
 (function (global, factory) {
@@ -1475,7 +1475,12 @@ Copyright © 2024 37signals LLC
     // Rendering
 
     async render(renderer) {
-      const { isPreview, shouldRender, newSnapshot: snapshot } = renderer;
+      const { isPreview, shouldRender, willRender, newSnapshot: snapshot } = renderer;
+
+      // A workaround to ignore tracked element mismatch reloads when performing
+      // a promoted Visit from a frame navigation
+      const shouldInvalidate = willRender;
+
       if (shouldRender) {
         try {
           this.renderPromise = new Promise((resolve) => (this.#resolveRenderPromise = resolve));
@@ -1483,7 +1488,7 @@ Copyright © 2024 37signals LLC
           await this.prepareToRenderSnapshot(renderer);
 
           const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve));
-          const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement };
+          const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement, renderMethod: this.renderer.renderMethod };
           const immediateRender = this.delegate.allowsImmediateRender(snapshot, options);
           if (!immediateRender) await renderInterception;
 
@@ -1496,7 +1501,7 @@ Copyright © 2024 37signals LLC
           this.#resolveRenderPromise(undefined);
           delete this.renderPromise;
         }
-      } else {
+      } else if (shouldInvalidate) {
         this.invalidate(renderer.reloadReason);
       }
     }
@@ -2366,6 +2371,7 @@ Copyright © 2024 37signals LLC
       this.snapshotHTML = snapshotHTML;
       this.response = response;
       this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
+      this.isPageRefresh = this.view.isPageRefresh(this);
       this.visitCachedSnapshot = visitCachedSnapshot;
       this.willRender = willRender;
       this.updateHistory = updateHistory;
@@ -2531,7 +2537,7 @@ Copyright © 2024 37signals LLC
         const isPreview = this.shouldIssueRequest();
         this.render(async () => {
           this.cacheSnapshot();
-          if (this.isSamePage) {
+          if (this.isSamePage || this.isPageRefresh) {
             this.adapter.visitRendered(this);
           } else {
             if (this.view.renderPromise) await this.view.renderPromise;
@@ -3173,7 +3179,7 @@ Copyright © 2024 37signals LLC
     prepareRequest(request) {
       const link = request.target;
 
-      request.headers["Sec-Purpose"] = "prefetch";
+      request.headers["X-Sec-Purpose"] = "prefetch";
 
       const turboFrame = link.closest("turbo-frame");
       const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id;
@@ -3183,7 +3189,7 @@ Copyright © 2024 37signals LLC
       }
 
       if (link.hasAttribute("data-turbo-stream")) {
-        request.acceptResponseType("text/vnd.turbo-stream.html");
+        request.acceptResponseType(StreamMessage.contentType);
       }
     }
 
@@ -3208,7 +3214,7 @@ Copyright © 2024 37signals LLC
     #isPrefetchable(link) {
       const href = link.getAttribute("href");
 
-      if (!href || href === "#" || link.dataset.turbo === "false" || link.dataset.turboPrefetch === "false") {
+      if (!href || href === "#" || link.getAttribute("data-turbo") === "false" || link.getAttribute("data-turbo-prefetch") === "false") {
         return false
       }
 
@@ -3224,7 +3230,8 @@ Copyright © 2024 37signals LLC
         return false
       }
 
-      if (link.dataset.turboMethod && link.dataset.turboMethod !== "get") {
+      const turboMethod = link.getAttribute("data-turbo-method");
+      if (turboMethod && turboMethod !== "get") {
         return false
       }
 
@@ -3232,13 +3239,9 @@ Copyright © 2024 37signals LLC
         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") {
+      if (turboPrefetchParent && turboPrefetchParent.getAttribute("data-turbo-prefetch") === "false") {
         return false
       }
 
@@ -3831,7 +3834,7 @@ Copyright © 2024 37signals LLC
            * @returns {boolean}
            */
           function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-              return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+              return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
           }
 
           /**
@@ -4553,92 +4556,6 @@ Copyright © 2024 37signals LLC
           }
       })();
 
-  class MorphRenderer extends Renderer {
-    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,
-        callbacks: {
-          beforeNodeAdded: this.#shouldAddElement,
-          beforeNodeMorphed: this.#shouldMorphElement,
-          beforeNodeRemoved: this.#shouldRemoveElement
-        }
-      });
-    }
-
-    #shouldAddElement = (node) => {
-      return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-    }
-
-    #shouldMorphElement = (oldNode, newNode) => {
-      if (oldNode instanceof HTMLElement) {
-        return !oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))
-      } else {
-        return true
-      }
-    }
-
-    #shouldRemoveElement = (node) => {
-      return this.#shouldMorphElement(node)
-    }
-
-    #reloadRemoteFrames() {
-      this.#remoteFrames().forEach((frame) => {
-        if (this.#isFrameReloadedWithMorph(frame)) {
-          this.#renderFrameWithMorph(frame);
-          frame.reload();
-        }
-      });
-    }
-
-    #renderFrameWithMorph(frame) {
-      frame.addEventListener("turbo:before-frame-render", (event) => {
-        event.detail.render = this.#morphFrameUpdate;
-      }, { once: true });
-    }
-
-    #morphFrameUpdate = (currentElement, newElement) => {
-      dispatch("turbo:before-frame-morph", {
-        target: currentElement,
-        detail: { currentElement, newElement }
-      });
-      this.#morphElements(currentElement, newElement.children, "innerHTML");
-    }
-
-    #isFrameReloadedWithMorph(element) {
-      return element.src && element.refresh === "morph"
-    }
-
-    #remoteFrames() {
-      return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
-        return !frame.closest('[data-turbo-permanent]')
-      })
-    }
-  }
-
   class PageRenderer extends Renderer {
     static renderElement(currentElement, newElement) {
       if (document.body && newElement instanceof HTMLBodyElement) {
@@ -4851,6 +4768,122 @@ 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, {
+        ignoreActiveValue: true,
+        morphStyle: morphStyle,
+        callbacks: {
+          beforeNodeAdded: this.#shouldAddElement,
+          beforeNodeMorphed: this.#shouldMorphElement,
+          beforeAttributeUpdated: this.#shouldUpdateAttribute,
+          beforeNodeRemoved: this.#shouldRemoveElement,
+          afterNodeMorphed: this.#didMorphElement
+        }
+      });
+    }
+
+    #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
+        }
+      }
+    }
+
+    #shouldUpdateAttribute = (attributeName, target, mutationType) => {
+      const event = dispatch("turbo:before-morph-attribute", { cancelable: true, target, detail: { attributeName, mutationType } });
+
+      return !event.defaultPrevented
+    }
+
+    #didMorphElement = (oldNode, newNode) => {
+      if (newNode instanceof HTMLElement) {
+        dispatch("turbo:morph-element", {
+          target: oldNode,
+          detail: {
+            newElement: newNode
+          }
+        });
+      }
+    }
+
+    #shouldRemoveElement = (node) => {
+      return this.#shouldMorphElement(node)
+    }
+
+    #reloadRemoteFrames() {
+      this.#remoteFrames().forEach((frame) => {
+        if (this.#isFrameReloadedWithMorph(frame)) {
+          this.#renderFrameWithMorph(frame);
+          frame.reload();
+        }
+      });
+    }
+
+    #renderFrameWithMorph(frame) {
+      frame.addEventListener("turbo:before-frame-render", (event) => {
+        event.detail.render = this.#morphFrameUpdate;
+      }, { once: true });
+    }
+
+    #morphFrameUpdate = (currentElement, newElement) => {
+      dispatch("turbo:before-frame-morph", {
+        target: currentElement,
+        detail: { currentElement, newElement }
+      });
+      this.#morphElements(currentElement, newElement.children, "innerHTML");
+    }
+
+    #isFrameReloadedWithMorph(element) {
+      return element.src && element.refresh === "morph"
+    }
+
+    #remoteFrames() {
+      return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
+        return !frame.closest('[data-turbo-permanent]')
+      })
+    }
+  }
+
   class SnapshotCache {
     keys = []
     snapshots = {}
@@ -5010,7 +5043,7 @@ Copyright © 2024 37signals LLC
     // Fetch request delegate
 
     prepareRequest(fetchRequest) {
-      fetchRequest.headers["Sec-Purpose"] = "prefetch";
+      fetchRequest.headers["X-Sec-Purpose"] = "prefetch";
     }
 
     async requestSucceededWithResponse(fetchRequest, fetchResponse) {
@@ -5144,8 +5177,10 @@ Copyright © 2024 37signals LLC
       const frameElement = options.frame ? document.getElementById(options.frame) : null;
 
       if (frameElement instanceof FrameElement) {
+        const action = options.action || getVisitAction(frameElement);
+
+        frameElement.delegate.proposeVisitIfNavigatedWithAction(frameElement, action);
         frameElement.src = location.toString();
-        frameElement.loaded;
       } else {
         this.navigator.proposeVisit(expandURL(location), options);
       }
@@ -5786,7 +5821,7 @@ Copyright © 2024 37signals LLC
     // Appearance observer delegate
 
     elementAppearedInViewport(element) {
-      this.proposeVisitIfNavigatedWithAction(element, element);
+      this.proposeVisitIfNavigatedWithAction(element, getVisitAction(element));
       this.#loadSourceURL();
     }
 
@@ -5874,7 +5909,7 @@ Copyright © 2024 37signals LLC
     formSubmissionSucceededWithResponse(formSubmission, response) {
       const frame = this.#findFrameElement(formSubmission.formElement, formSubmission.submitter);
 
-      frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
+      frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(formSubmission.submitter, formSubmission.formElement, frame));
       frame.delegate.loadResponse(response);
 
       if (!formSubmission.isSafe) {
@@ -5979,15 +6014,15 @@ Copyright © 2024 37signals LLC
     #navigateFrame(element, url, submitter) {
       const frame = this.#findFrameElement(element, submitter);
 
-      frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter);
+      frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(submitter, element, frame));
 
       this.#withCurrentNavigationElement(element, () => {
         frame.src = url;
       });
     }
 
-    proposeVisitIfNavigatedWithAction(frame, element, submitter) {
-      this.action = getVisitAction(submitter, element, frame);
+    proposeVisitIfNavigatedWithAction(frame, action = null) {
+      this.action = action;
 
       if (this.action) {
         const pageSnapshot = PageSnapshot.fromElement(frame).clone();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-rc.2",
   "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",
@@ -44,7 +44,7 @@
     "chai": "~4.3.4",
     "eslint": "^8.13.0",
     "express": "^4.18.2",
-    "idiomorph": "^0.3.0",
+    "idiomorph": "https://github.com/bigskysoftware/idiomorph.git",
     "multer": "^1.4.2",
     "rollup": "^2.35.1"
   },