Merge branch 'hotwired:main' into ishtml_refresh

.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "singleQuote": false,
   "printWidth": 120,
-  "semi": false
+  "semi": false,
+  "trailingComma" : "none"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwired/turbo",
-  "version": "8.0.4",
+  "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",

src/core/drive/morphing_page_renderer.js

@@ -0,0 +1,48 @@
+import { FrameElement } from "../../elements/frame_element"
+import { MorphingFrameRenderer } from "../frames/morphing_frame_renderer"
+import { PageRenderer } from "./page_renderer"
+import { dispatch } from "../../util"
+import { morphElements } from "../morphing"
+
+export class MorphingPageRenderer extends PageRenderer {
+  static renderElement(currentElement, newElement) {
+    morphElements(currentElement, newElement, {
+      callbacks: {
+        beforeNodeMorphed: element => !canRefreshFrame(element)
+      }
+    })
+
+    for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+      if (canRefreshFrame(frame)) refreshFrame(frame)
+    }
+
+    dispatch("turbo:morph", { detail: { currentElement, newElement } })
+  }
+
+  async preservingPermanentElements(callback) {
+    return await callback()
+  }
+
+  get renderMethod() {
+    return "morph"
+  }
+
+  get shouldAutofocus() {
+    return false
+  }
+}
+
+function canRefreshFrame(frame) {
+  return frame instanceof FrameElement &&
+    frame.src &&
+    frame.refresh === "morph" &&
+    !frame.closest("[data-turbo-permanent]")
+}
+
+function refreshFrame(frame) {
+  frame.addEventListener("turbo:before-frame-render", ({ detail }) => {
+    detail.render = MorphingFrameRenderer.renderElement
+  }, { once: true })
+
+  frame.reload()
+}

src/core/drive/navigator.js

@@ -125,6 +125,7 @@ export class Navigator {
 
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit)
+    delete this.currentVisit
   }
 
   locationWithActionIsSamePage(location, action) {

src/core/drive/page_view.js

@@ -1,7 +1,7 @@
 import { nextEventLoopTick } from "../../util"
 import { View } from "../view"
 import { ErrorRenderer } from "./error_renderer"
-import { MorphRenderer } from "./morph_renderer"
+import { MorphingPageRenderer } from "./morphing_page_renderer"
 import { PageRenderer } from "./page_renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { SnapshotCache } from "./snapshot_cache"
@@ -17,9 +17,9 @@ export 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

src/core/frames/link_interceptor.js

@@ -1,3 +1,5 @@
+import { findLinkFromClickTarget } from "../../util"
+
 export class LinkInterceptor {
   constructor(delegate, element) {
     this.delegate = delegate
@@ -17,15 +19,15 @@ export class LinkInterceptor {
   }
 
   clickBubbled = (event) => {
-    if (this.respondsToEventTarget(event.target)) {
+    if (this.clickEventIsSignificant(event)) {
       this.clickEvent = event
     } else {
       delete this.clickEvent
     }
   }
 
   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()
@@ -39,8 +41,10 @@ export 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
   }
 }

src/core/frames/morphing_frame_renderer.js

@@ -0,0 +1,14 @@
+import { FrameRenderer } from "./frame_renderer"
+import { morphChildren } from "../morphing"
+import { dispatch } from "../../util"
+
+export class MorphingFrameRenderer extends FrameRenderer {
+  static renderElement(currentElement, newElement) {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: { currentElement, newElement }
+    })
+
+    morphChildren(currentElement, newElement)
+  }
+}

src/core/morphing.js

@@ -0,0 +1,66 @@
+import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js"
+import { dispatch } from "../util"
+
+export function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
+  Idiomorph.morph(currentElement, newElement, {
+    ...options,
+    callbacks: new DefaultIdiomorphCallbacks(callbacks)
+  })
+}
+
+export 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 }
+      })
+    }
+  }
+}

src/core/renderer.js

@@ -16,6 +16,10 @@ export class Renderer {
     return true
   }
 
+  get shouldAutofocus() {
+    return true
+  }
+
   get reloadReason() {
     return
   }
@@ -40,9 +44,11 @@ export class Renderer {
   }
 
   focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement
-    if (element) {
-      element.focus()
+    if (this.shouldAutofocus) {
+      const element = this.connectedSnapshot.firstAutofocusableElement
+      if (element) {
+        element.focus()
+      }
     }
   }
 

src/core/session.js

@@ -109,7 +109,7 @@ export 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 })
     }
   }