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

package/dist/turbo.es2017-esm.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.0-beta.3
+Turbo 8.0.0-rc.1
 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);
     }
   }
@@ -1937,8 +1942,6 @@ function readScrollBehavior(value, defaultValue) {
   }
 }
 
-const ProgressBarID = "turbo-progress-bar";
-
 class ProgressBar {
   static animationDuration = 300 /*ms*/
 
@@ -2043,8 +2046,6 @@ 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) {
@@ -2364,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;
@@ -2529,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;
@@ -3171,20 +3173,17 @@ class LinkPrefetchObserver {
   prepareRequest(request) {
     const link = request.target;
 
-    request.headers["Sec-Purpose"] = "prefetch";
+    request.headers["X-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");
+    const turboFrame = link.closest("turbo-frame");
+    const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id;
 
-      if (turboFrame) {
-        request.headers["Turbo-Frame"] = turboFrame.id;
-      }
+    if (turboFrameTarget && turboFrameTarget !== "_top") {
+      request.headers["Turbo-Frame"] = turboFrameTarget;
     }
 
     if (link.hasAttribute("data-turbo-stream")) {
-      request.acceptResponseType("text/vnd.turbo-stream.html");
+      request.acceptResponseType(StreamMessage.contentType);
     }
   }
 
@@ -3209,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
     }
 
@@ -3225,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
     }
 
@@ -3233,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
     }
 
@@ -4554,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) {
@@ -4717,7 +4627,7 @@ class PageRenderer extends Renderer {
     await newStylesheetElements;
 
     if (this.willRender) {
-      this.removeUnusedHeadStylesheetElements();
+      this.removeUnusedDynamicStylesheetElements();
     }
   }
 
@@ -4750,8 +4660,8 @@ class PageRenderer extends Renderer {
     }
   }
 
-  removeUnusedHeadStylesheetElements() {
-    for (const element of this.unusedHeadStylesheetElements) {
+  removeUnusedDynamicStylesheetElements() {
+    for (const element of this.unusedDynamicStylesheetElements) {
       document.head.removeChild(element);
     }
   }
@@ -4821,13 +4731,9 @@ class PageRenderer extends Renderer {
     await this.renderElement(this.currentElement, this.newElement);
   }
 
-  get unusedHeadStylesheetElements() {
+  get unusedDynamicStylesheetElements() {
     return this.oldHeadStylesheetElements.filter((element) => {
-      return !(element.hasAttribute("data-turbo-permanent") ||
-        // Trix dynamically adds styles to the head that we want to keep around which have a
-        // `data-tag-name` attribute. Long term we should moves those styles to Trix's CSS file
-        // but for now we'll just skip removing them
-        element.hasAttribute("data-tag-name"))
+      return element.getAttribute("data-turbo-track") === "dynamic"
     })
   }
 
@@ -4856,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 = {}
@@ -5015,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) {
@@ -5149,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);
     }
@@ -5791,7 +5815,7 @@ class FrameController {
   // Appearance observer delegate
 
   elementAppearedInViewport(element) {
-    this.proposeVisitIfNavigatedWithAction(element, element);
+    this.proposeVisitIfNavigatedWithAction(element, getVisitAction(element));
     this.#loadSourceURL();
   }
 
@@ -5879,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) {
@@ -5984,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.3
+Turbo 8.0.0-rc.1
 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);
       }
     }
@@ -1943,8 +1948,6 @@ Copyright © 2024 37signals LLC
     }
   }
 
-  const ProgressBarID = "turbo-progress-bar";
-
   class ProgressBar {
     static animationDuration = 300 /*ms*/
 
@@ -2049,8 +2052,6 @@ Copyright © 2024 37signals LLC
 
     createStylesheetElement() {
       const element = document.createElement("style");
-      element.id = ProgressBarID;
-      element.setAttribute("data-turbo-permanent", "");
       element.type = "text/css";
       element.textContent = ProgressBar.defaultCSS;
       if (this.cspNonce) {
@@ -2370,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;
@@ -2535,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;
@@ -3177,20 +3179,17 @@ Copyright © 2024 37signals LLC
     prepareRequest(request) {
       const link = request.target;
 
-      request.headers["Sec-Purpose"] = "prefetch";
+      request.headers["X-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");
+      const turboFrame = link.closest("turbo-frame");
+      const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id;
 
-        if (turboFrame) {
-          request.headers["Turbo-Frame"] = turboFrame.id;
-        }
+      if (turboFrameTarget && turboFrameTarget !== "_top") {
+        request.headers["Turbo-Frame"] = turboFrameTarget;
       }
 
       if (link.hasAttribute("data-turbo-stream")) {
-        request.acceptResponseType("text/vnd.turbo-stream.html");
+        request.acceptResponseType(StreamMessage.contentType);
       }
     }
 
@@ -3215,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
       }
 
@@ -3231,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
       }
 
@@ -3239,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
       }
 
@@ -4560,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) {
@@ -4723,7 +4633,7 @@ Copyright © 2024 37signals LLC
       await newStylesheetElements;
 
       if (this.willRender) {
-        this.removeUnusedHeadStylesheetElements();
+        this.removeUnusedDynamicStylesheetElements();
       }
     }
 
@@ -4756,8 +4666,8 @@ Copyright © 2024 37signals LLC
       }
     }
 
-    removeUnusedHeadStylesheetElements() {
-      for (const element of this.unusedHeadStylesheetElements) {
+    removeUnusedDynamicStylesheetElements() {
+      for (const element of this.unusedDynamicStylesheetElements) {
         document.head.removeChild(element);
       }
     }
@@ -4827,13 +4737,9 @@ Copyright © 2024 37signals LLC
       await this.renderElement(this.currentElement, this.newElement);
     }
 
-    get unusedHeadStylesheetElements() {
+    get unusedDynamicStylesheetElements() {
       return this.oldHeadStylesheetElements.filter((element) => {
-        return !(element.hasAttribute("data-turbo-permanent") ||
-          // Trix dynamically adds styles to the head that we want to keep around which have a
-          // `data-tag-name` attribute. Long term we should moves those styles to Trix's CSS file
-          // but for now we'll just skip removing them
-          element.hasAttribute("data-tag-name"))
+        return element.getAttribute("data-turbo-track") === "dynamic"
       })
     }
 
@@ -4862,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 = {}
@@ -5021,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) {
@@ -5155,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);
       }
@@ -5797,7 +5821,7 @@ Copyright © 2024 37signals LLC
     // Appearance observer delegate
 
     elementAppearedInViewport(element) {
-      this.proposeVisitIfNavigatedWithAction(element, element);
+      this.proposeVisitIfNavigatedWithAction(element, getVisitAction(element));
       this.#loadSourceURL();
     }
 
@@ -5885,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) {
@@ -5990,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.3",
+  "version": "8.0.0-rc.1",
   "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"
   },