fix(useScript): dedupe early connections, server-side only

unjs · Oct 26, 2023 · 90a51b9 · 90a51b9
1 parent b6bb423
commit 90a51b9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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": "",
       }