Don't add new [data-turbo-permanent] elements when they already exist…

… in the page.

It can happen that a same element exists but that idiomorph won't match it
because some JS moved the element to another position. This will handle such
scenarios automatically.

src/core/drive/morph_renderer.js

@@ -31,13 +31,30 @@ export class MorphRenderer extends Renderer {
     Idiomorph.morph(currentElement, newElement, {
       morphStyle: morphStyle,
       callbacks: {
+        beforeNodeAdded: this.#shouldAddElement,
         beforeNodeMorphed: this.#shouldMorphElement,
         beforeNodeRemoved: this.#shouldRemoveElement,
         afterNodeMorphed: this.#reloadStimulusControllers
       }
     })
   }
 
+  #shouldAddElement = (node) => {
+    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
+  }
+
+  #shouldMorphElement = (node) => {
+    if (node instanceof HTMLElement) {
+      return !node.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isRemoteFrame(node))
+    } else {
+      return true
+    }
+  }
+
+  #shouldRemoveElement = (node) => {
+    return this.#shouldMorphElement(node)
+  }
+
   #reloadRemoteFrames() {
     this.#remoteFrames().forEach((frame) => {
       if (this.#isRemoteFrame(frame)) {
@@ -61,18 +78,6 @@ export class MorphRenderer extends Renderer {
     this.#morphElements(currentElement, newElement.children, "innerHTML")
   }
 
-  #shouldRemoveElement = (node) => {
-    return this.#shouldMorphElement(node)
-  }
-
-  #shouldMorphElement = (node) => {
-    if (node instanceof HTMLElement) {
-      return !node.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isRemoteFrame(node))
-    } else {
-      return true
-    }
-  }
-
   #reloadStimulusControllers = async (node) => {
     if (node instanceof HTMLElement && node.hasAttribute("data-controller")) {
       const originalAttribute = node.getAttribute("data-controller")

src/tests/fixtures/page_refresh.html

@@ -48,5 +48,8 @@ <h3>Element with Stimulus controller</h3>
       <input type="hidden" name="sleep" value="50">
       <input id="form-submit" type="submit" value="form[method=post]">
     </form>
+
+    <div id="container">
+    </div>
   </body>
 </html>

src/tests/functional/page_refresh_tests.js

@@ -109,6 +109,24 @@ test("it preserves data-turbo-permanent elements", async ({ page }) => {
   await expect(page.locator("#preserve-me")).toHaveText("Preserve me, I have a family!")
 })
 
+test("it preserves data-turbo-permanent elements that don't match when their ids do", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  await page.evaluate(() => {
+    const element = document.getElementById("preserve-me")
+
+    element.textContent = "Preserve me, I have a family!"
+    document.getElementById("container").append(element)
+  })
+
+  await expect(page.locator("#preserve-me")).toHaveText("Preserve me, I have a family!")
+
+  await page.click("#form-submit")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  await expect(page.locator("#preserve-me")).toHaveText("Preserve me, I have a family!")
+})
+
 test("it reloads data-controller attributes after a morph", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")