From 90a51b9da6e3a3c4ee23d9461fd93ba1f23275ac Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 26 Oct 2023 10:41:39 +0900
Subject: [PATCH] fix(useScript): dedupe early connections, server-side only

---
 docs/content/1.usage/2.composables/4.use-script.md | 6 ++++++
 packages/unhead/src/composables/useScript.ts       | 5 +++--
 test/unhead/ssr/useScript.test.ts                  | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/content/1.usage/2.composables/4.use-script.md b/docs/content/1.usage/2.composables/4.use-script.md
index a7a82dec..5e6a8e0e 100644
--- a/docs/content/1.usage/2.composables/4.use-script.md
+++ b/docs/content/1.usage/2.composables/4.use-script.md
@@ -114,6 +114,12 @@ useScript({
 
 ### options
 
+- `skipEarlyConnections`
+
+Used to skip early connections such as `dns-prefetch` and `preconnect`.
+
+Useful when you're loading a script from your own domain.
+
 - `use`
 
 A function that resolves the scripts API. This is only called client-side.
diff --git a/packages/unhead/src/composables/useScript.ts b/packages/unhead/src/composables/useScript.ts
index 8501c4d1..fcbd337f 100644
--- a/packages/unhead/src/composables/useScript.ts
+++ b/packages/unhead/src/composables/useScript.ts
@@ -36,9 +36,10 @@ export function useScript<T>(input: UseScriptInput, _options?: UseScriptOptions<
       !head!.ssr
     )
       return
+    const key = `use-script.${id}.early-connection`
     head!.push({
-      link: [{ rel, href: new URL(input.src).origin }]
-    })
+      link: [{ key, rel, href: new URL(input.src).origin }]
+    }, { mode: 'server' })
   }
 
   const script: ScriptInstance<T> = {
diff --git a/test/unhead/ssr/useScript.test.ts b/test/unhead/ssr/useScript.test.ts
index f1b0a053..49bfaba3 100644
--- a/test/unhead/ssr/useScript.test.ts
+++ b/test/unhead/ssr/useScript.test.ts
@@ -16,7 +16,7 @@ describe('dom useScript', () => {
         "bodyAttrs": "",
         "bodyTags": "",
         "bodyTagsOpen": "",
-        "headTags": "<link rel=\\"preconnect\\" href=\\"https://cdn.example.com\\">
+        "headTags": "<link rel=\\"preconnect\\" href=\\"https://cdn.example.com\\" data-hid=\\"7b546a7\\">
       <script async fetchpriority=\\"low\\" src=\\"https://cdn.example.com/script.js\\" onload=\\"this.dataset.onload = true\\" onerror=\\"this.dataset.onerror = true\\" onabort=\\"this.dataset.onabort = true\\" onprogress=\\"this.dataset.onprogress = true\\" onloadstart=\\"this.dataset.onloadstart = true\\" data-hid=\\"438d65b\\"></script>",
         "htmlAttrs": "",
       }