unhead 1.8.0-beta.9 → 1.8.1

package/dist/index.cjs

@@ -468,6 +468,10 @@ function useServerSeoMeta(input, options) {
   });
 }
 
+const UseScriptDefaults = {
+  defer: true,
+  fetchpriority: "low"
+};
 function useScript(input, _options) {
   const options = _options || {};
   const head = options.head || getActiveHead();
@@ -483,29 +487,53 @@ function useScript(input, _options) {
     await head.hooks.callHook("script:transform", ctx);
     return { script: [ctx.script] };
   }
+  function maybeHintEarlyConnection(rel) {
+    if (
+      // opt-out
+      options.skipEarlyConnections || !input.src.includes("//") || !head.ssr
+    )
+      return;
+    const key2 = `use-script.${id}.early-connection`;
+    head.push({
+      link: [{ key: key2, rel, href: new URL(input.src).origin }]
+    }, { mode: "server" });
+  }
   const script = {
     id,
     status: "awaitingLoad",
     loaded: false,
-    remove: () => {
+    remove() {
       if (script.status === "loaded") {
         script.entry?.dispose();
         script.status = "removed";
         head.hooks.callHook(`script:updated`, hookCtx);
+        delete head._scripts?.[id];
         return true;
       }
       return false;
     },
-    waitForUse: () => new Promise(() => {
-    }),
-    load: () => {
+    waitForLoad() {
+      return new Promise((resolve) => {
+        if (script.status === "loaded")
+          resolve(options.use());
+        function watchForScriptLoaded({ script: script2 }) {
+          if (script2.id === id && script2.status === "loaded") {
+            resolve(options.use?.());
+            head.hooks.removeHook("script:updated", watchForScriptLoaded);
+          }
+        }
+        head.hooks.hook("script:updated", watchForScriptLoaded);
+      });
+    },
+    load() {
       if (script.status !== "awaitingLoad")
-        return script.waitForUse();
+        return script.waitForLoad();
       script.status = "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
       script.entry = head.push({
         script: [
-          { ...input, key }
+          // async by default
+          { ...UseScriptDefaults, ...input, key }
         ]
       }, {
         ...options,
@@ -513,42 +541,47 @@ function useScript(input, _options) {
         transform,
         head
       });
-      return script.waitForUse();
+      return script.waitForLoad();
     }
   };
   const hookCtx = { script };
   shared.NetworkEvents.forEach((fn) => {
     const _fn = typeof input[fn] === "function" ? input[fn].bind({}) : null;
-    if (_fn) {
-      input[fn] = (e) => {
-        script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-        head.hooks.callHook(`script:updated`, hookCtx);
-        _fn && _fn(e);
-      };
-    }
+    input[fn] = (e) => {
+      script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
+      head.hooks.callHook(`script:updated`, hookCtx);
+      _fn && _fn(e);
+    };
   });
   let trigger = options.trigger;
   if (trigger) {
-    trigger === "idle" && (trigger = new Promise((resolve) => requestIdleCallback(() => resolve())));
+    const isIdle = trigger === "idle";
+    if (isIdle) {
+      if (head.ssr)
+        trigger = "manual";
+      else
+        trigger = new Promise((resolve) => requestIdleCallback(() => resolve()));
+    }
     trigger === "manual" && (trigger = new Promise(() => {
     }));
     trigger instanceof Promise && trigger.then(script.load);
+    maybeHintEarlyConnection(isIdle ? "preconnect" : "dns-prefetch");
   } else {
     script.load();
+    maybeHintEarlyConnection("preconnect");
   }
-  script.waitForUse = () => new Promise((resolve) => {
-    if (typeof options.use === "function") {
-      if (script.status === "loaded")
-        resolve(options.use());
-      head.hooks.hook("script:loaded", ({ script: script2 }) => script2.id === id && resolve(options.use()));
-    }
-  });
   function resolveInnerHtmlLoad(ctx) {
     if (ctx.tag.key === key) {
       if (ctx.tag.innerHTML) {
-        script.status = "loaded";
-        head.hooks.callHook("script:updated", hookCtx);
-        typeof input.onload === "function" && input.onload(new Event("load"));
+        setTimeout(
+          () => {
+            script.status = "loaded";
+            head.hooks.callHook("script:updated", hookCtx);
+            typeof input.onload === "function" && input.onload(new Event("load"));
+          },
+          5
+          /* give inline script a chance to run */
+        );
       }
       head.hooks.removeHook("dom:renderTag", resolveInnerHtmlLoad);
     }
@@ -568,7 +601,7 @@ function useScript(input, _options) {
           const api = options.use();
           return api[fn](...args);
         } else {
-          return script.waitForUse().then(
+          return script.waitForLoad().then(
             (api) => {
               api[fn](...args);
             }

package/dist/index.d.cts

@@ -41,6 +41,12 @@ declare function useSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions):
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions): ActiveHeadEntry<any> | void;
 
+/**
+ * Load third-party scripts with SSR support and a proxied API.
+ *
+ * @experimental
+ * @see https://unhead.unjs.io/usage/composables/use-script
+ */
 declare function useScript<T>(input: UseScriptInput, _options?: UseScriptOptions<T>): T & {
     $script: ScriptInstance<T>;
 };

package/dist/index.d.mts

@@ -41,6 +41,12 @@ declare function useSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions):
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions): ActiveHeadEntry<any> | void;
 
+/**
+ * Load third-party scripts with SSR support and a proxied API.
+ *
+ * @experimental
+ * @see https://unhead.unjs.io/usage/composables/use-script
+ */
 declare function useScript<T>(input: UseScriptInput, _options?: UseScriptOptions<T>): T & {
     $script: ScriptInstance<T>;
 };

package/dist/index.d.ts

@@ -41,6 +41,12 @@ declare function useSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions):
 
 declare function useServerSeoMeta(input: UseSeoMetaInput, options?: HeadEntryOptions): ActiveHeadEntry<any> | void;
 
+/**
+ * Load third-party scripts with SSR support and a proxied API.
+ *
+ * @experimental
+ * @see https://unhead.unjs.io/usage/composables/use-script
+ */
 declare function useScript<T>(input: UseScriptInput, _options?: UseScriptOptions<T>): T & {
     $script: ScriptInstance<T>;
 };

package/dist/index.mjs

@@ -467,6 +467,10 @@ function useServerSeoMeta(input, options) {
   });
 }
 
+const UseScriptDefaults = {
+  defer: true,
+  fetchpriority: "low"
+};
 function useScript(input, _options) {
   const options = _options || {};
   const head = options.head || getActiveHead();
@@ -482,29 +486,53 @@ function useScript(input, _options) {
     await head.hooks.callHook("script:transform", ctx);
     return { script: [ctx.script] };
   }
+  function maybeHintEarlyConnection(rel) {
+    if (
+      // opt-out
+      options.skipEarlyConnections || !input.src.includes("//") || !head.ssr
+    )
+      return;
+    const key2 = `use-script.${id}.early-connection`;
+    head.push({
+      link: [{ key: key2, rel, href: new URL(input.src).origin }]
+    }, { mode: "server" });
+  }
   const script = {
     id,
     status: "awaitingLoad",
     loaded: false,
-    remove: () => {
+    remove() {
       if (script.status === "loaded") {
         script.entry?.dispose();
         script.status = "removed";
         head.hooks.callHook(`script:updated`, hookCtx);
+        delete head._scripts?.[id];
         return true;
       }
       return false;
     },
-    waitForUse: () => new Promise(() => {
-    }),
-    load: () => {
+    waitForLoad() {
+      return new Promise((resolve) => {
+        if (script.status === "loaded")
+          resolve(options.use());
+        function watchForScriptLoaded({ script: script2 }) {
+          if (script2.id === id && script2.status === "loaded") {
+            resolve(options.use?.());
+            head.hooks.removeHook("script:updated", watchForScriptLoaded);
+          }
+        }
+        head.hooks.hook("script:updated", watchForScriptLoaded);
+      });
+    },
+    load() {
       if (script.status !== "awaitingLoad")
-        return script.waitForUse();
+        return script.waitForLoad();
       script.status = "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
       script.entry = head.push({
         script: [
-          { ...input, key }
+          // async by default
+          { ...UseScriptDefaults, ...input, key }
         ]
       }, {
         ...options,
@@ -512,42 +540,47 @@ function useScript(input, _options) {
         transform,
         head
       });
-      return script.waitForUse();
+      return script.waitForLoad();
     }
   };
   const hookCtx = { script };
   NetworkEvents.forEach((fn) => {
     const _fn = typeof input[fn] === "function" ? input[fn].bind({}) : null;
-    if (_fn) {
-      input[fn] = (e) => {
-        script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-        head.hooks.callHook(`script:updated`, hookCtx);
-        _fn && _fn(e);
-      };
-    }
+    input[fn] = (e) => {
+      script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
+      head.hooks.callHook(`script:updated`, hookCtx);
+      _fn && _fn(e);
+    };
   });
   let trigger = options.trigger;
   if (trigger) {
-    trigger === "idle" && (trigger = new Promise((resolve) => requestIdleCallback(() => resolve())));
+    const isIdle = trigger === "idle";
+    if (isIdle) {
+      if (head.ssr)
+        trigger = "manual";
+      else
+        trigger = new Promise((resolve) => requestIdleCallback(() => resolve()));
+    }
     trigger === "manual" && (trigger = new Promise(() => {
     }));
     trigger instanceof Promise && trigger.then(script.load);
+    maybeHintEarlyConnection(isIdle ? "preconnect" : "dns-prefetch");
   } else {
     script.load();
+    maybeHintEarlyConnection("preconnect");
   }
-  script.waitForUse = () => new Promise((resolve) => {
-    if (typeof options.use === "function") {
-      if (script.status === "loaded")
-        resolve(options.use());
-      head.hooks.hook("script:loaded", ({ script: script2 }) => script2.id === id && resolve(options.use()));
-    }
-  });
   function resolveInnerHtmlLoad(ctx) {
     if (ctx.tag.key === key) {
       if (ctx.tag.innerHTML) {
-        script.status = "loaded";
-        head.hooks.callHook("script:updated", hookCtx);
-        typeof input.onload === "function" && input.onload(new Event("load"));
+        setTimeout(
+          () => {
+            script.status = "loaded";
+            head.hooks.callHook("script:updated", hookCtx);
+            typeof input.onload === "function" && input.onload(new Event("load"));
+          },
+          5
+          /* give inline script a chance to run */
+        );
       }
       head.hooks.removeHook("dom:renderTag", resolveInnerHtmlLoad);
     }
@@ -567,7 +600,7 @@ function useScript(input, _options) {
           const api = options.use();
           return api[fn](...args);
         } else {
-          return script.waitForUse().then(
+          return script.waitForLoad().then(
             (api) => {
               api[fn](...args);
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "1.8.0-beta.9",
+  "version": "1.8.1",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "hookable": "^5.5.3",
-    "@unhead/dom": "1.8.0-beta.9",
-    "@unhead/schema": "1.8.0-beta.9",
-    "@unhead/shared": "1.8.0-beta.9"
+    "@unhead/dom": "1.8.1",
+    "@unhead/schema": "1.8.1",
+    "@unhead/shared": "1.8.1"
   },
   "scripts": {
     "build": "unbuild .",