From 87f7f4804ef4e3e2eba908109953724c5e411c87 Mon Sep 17 00:00:00 2001
From: Adam Laycock <adam.laycock@gmail.com>
Date: Thu, 27 Nov 2025 15:51:56 -0700
Subject: [PATCH] Prevent double-loading of afterDOMReady scripts (#2213)

Co-authored-by: Adam <adam@canny.io>
---
 quartz/components/renderPage.tsx        | 2 +-
 quartz/components/scripts/spa.inline.ts | 4 ++--
 quartz/util/resources.tsx               | 7 ++++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 2c1bf5e75..8cf54392c 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -294,7 +294,7 @@ export function renderPage(
       </body>
       {pageResources.js
         .filter((resource) => resource.loadTime === "afterDOMReady")
-        .map((res) => JSResourceToScriptElement(res))}
+        .map((res) => JSResourceToScriptElement(res, true))}
     </html>
   )
 
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 22fcd72b4..2898dc419 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -115,9 +115,9 @@ async function _navigate(url: URL, isBack: boolean = false) {
   }
 
   // now, patch head, re-executing scripts
-  const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
+  const elementsToRemove = document.head.querySelectorAll(":not([data-persist])")
   elementsToRemove.forEach((el) => el.remove())
-  const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
+  const elementsToAdd = html.head.querySelectorAll(":not([data-persist])")
   elementsToAdd.forEach((el) => document.head.appendChild(el))
 
   // delay setting the url until now
diff --git a/quartz/util/resources.tsx b/quartz/util/resources.tsx
index d95333e8c..12dd77eee 100644
--- a/quartz/util/resources.tsx
+++ b/quartz/util/resources.tsx
@@ -26,9 +26,10 @@ export type CSSResource = {
 export function JSResourceToScriptElement(resource: JSResource, preserve?: boolean): JSX.Element {
   const scriptType = resource.moduleType ?? "application/javascript"
   const spaPreserve = preserve ?? resource.spaPreserve
+
   if (resource.contentType === "external") {
     return (
-      <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
+      <script key={resource.src} src={resource.src} type={scriptType} data-persist={spaPreserve} />
     )
   } else {
     const content = resource.script
@@ -36,7 +37,7 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
       <script
         key={randomUUID()}
         type={scriptType}
-        spa-preserve={spaPreserve}
+        data-persist={spaPreserve}
         dangerouslySetInnerHTML={{ __html: content }}
       ></script>
     )
@@ -54,7 +55,7 @@ export function CSSResourceToStyleElement(resource: CSSResource, preserve?: bool
         href={resource.content}
         rel="stylesheet"
         type="text/css"
-        spa-preserve={spaPreserve}
+        data-persist={spaPreserve}
       />
     )
   }