unhead 1.8.19 → 1.9.0

package/dist/index.cjs

@@ -457,48 +457,16 @@ function useServerSeoMeta(input, options) {
   });
 }
 
-const UseScriptDefaults = {
-  defer: true,
-  fetchpriority: "low"
-};
-const requestIdleCallback = typeof window === "undefined" ? () => {
-} : globalThis.requestIdleCallback || ((cb) => {
-  const start = Date.now();
-  const idleDeadline = {
-    didTimeout: false,
-    timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-  };
-  return setTimeout(() => {
-    cb(idleDeadline);
-  }, 1);
-});
 function useScript(_input, _options) {
   const input = typeof _input === "string" ? { src: _input } : _input;
   const options = _options || {};
   const head = options.head || getActiveHead();
   if (!head)
-    throw new Error("No active head found, please provide a head instance or use the useHead composable");
+    throw new Error("Missing Unhead context.");
   const id = input.key || shared.hashCode(input.src || (typeof input.innerHTML === "string" ? input.innerHTML : ""));
   const key = `use-script.${id}`;
   if (head._scripts?.[id])
     return head._scripts[id];
-  async function transform(entry) {
-    const script2 = await (options.transform || ((input2) => input2))(entry.script[0]);
-    const ctx = { script: script2 };
-    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",
@@ -513,109 +481,78 @@ function useScript(_input, _options) {
       }
       return false;
     },
-    waitForLoad() {
-      return new Promise((resolve) => {
-        if (script.status === "loaded")
-          resolve(options.use?.());
-        function watchForScriptLoaded({ script: script2 }) {
-          if (script2.id === id && script2.status === "loaded") {
-            script2.loaded = true;
-            resolve(options.use?.());
-            head.hooks.removeHook("script:updated", watchForScriptLoaded);
-          }
-        }
-        head.hooks.hook("script:updated", watchForScriptLoaded);
-      });
-    },
     load() {
       if (script.status !== "awaitingLoad")
-        return script.waitForLoad();
+        return script.loadPromise;
       script.status = "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
       script.entry = head.push({
         script: [
-          // async by default
-          { ...UseScriptDefaults, ...input, key }
+          { defer: true, fetchpriority: "low", ...input, key }
         ]
-      }, {
-        ...options,
-        // @ts-expect-error untyped
-        transform,
-        head
-      });
-      return script.waitForLoad();
+      }, options);
+      return script.loadPromise;
     }
   };
+  script.loadPromise = new Promise((resolve, reject) => {
+    const removeHook2 = head.hooks.hook("script:updated", ({ script: script2 }) => {
+      if (script2.id === id && (script2.status === "loaded" || script2.status === "error")) {
+        script2.status === "loaded" && resolve(options.use?.());
+        script2.status === "error" && reject(new Error(`Failed to load script: ${input.src}`));
+        removeHook2();
+      }
+    });
+  });
   const hookCtx = { script };
-  shared.NetworkEvents.forEach((fn) => {
-    const _fn = typeof input[fn] === "function" ? input[fn].bind({}) : null;
+  shared.ScriptNetworkEvents.forEach((fn) => {
     input[fn] = (e) => {
       script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
-      _fn && _fn(e);
+      typeof input[fn] === "function" && input[fn].call(options.eventContext, e);
     };
   });
-  let trigger = options.trigger;
-  if (trigger) {
-    const isIdle = trigger === "idle";
-    if (isIdle) {
-      if (head.ssr)
-        trigger = "manual";
-      else
-        trigger = new Promise((resolve) => requestIdleCallback(() => resolve()));
-    }
-    trigger === "manual" && (trigger = new Promise(() => {
-    }));
+  const trigger = options.trigger;
+  if (options.trigger)
     trigger instanceof Promise && trigger.then(script.load);
-    maybeHintEarlyConnection(isIdle ? "preconnect" : "dns-prefetch");
-  } else {
+  else
     script.load();
-    maybeHintEarlyConnection("preconnect");
-  }
-  function resolveInnerHtmlLoad(ctx) {
-    if (ctx.tag.key === key) {
-      if (ctx.tag.innerHTML) {
-        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);
+  const removeHook = head.hooks.hook("dom:renderTag", (ctx) => {
+    if (ctx.tag.key !== key)
+      return;
+    if (ctx.tag.innerHTML) {
+      setTimeout(
+        () => {
+          script.status = "loaded";
+          head.hooks.callHook("script:updated", hookCtx);
+          typeof input.onload === "function" && input.onload.call(options.eventContext, new Event("load"));
+        },
+        5
+        /* give inline script a chance to run */
+      );
     }
-  }
-  head.hooks.hook("dom:renderTag", resolveInnerHtmlLoad);
+    removeHook();
+  });
   const instance = new Proxy({}, {
     get(_, fn) {
-      const stub = options.stub?.({ script, fn });
+      const $script = Object.assign(script.loadPromise, script);
+      const stub = options.stub?.({ script: $script, fn });
       if (stub)
         return stub;
       if (fn === "$script")
-        return script;
+        return $script;
       return (...args) => {
         const hookCtx2 = { script, fn, args };
         head.hooks.callHook("script:instance-fn", hookCtx2);
         if (head.ssr || !options.use)
           return;
-        if (script.loaded) {
-          const api = options.use();
-          return api[fn](...args);
-        } else {
-          return script.waitForLoad().then(
-            (api) => {
-              return api[fn](...args);
-            }
-          );
-        }
+        return script.status === "loaded" ? options.use()[fn](...args) : script.loadPromise.then((api) => api[fn](...args));
       };
     }
   });
-  head._scripts = head._scripts || {};
-  head._scripts[id] = instance;
+  head._scripts = Object.assign(
+    head._scripts || {},
+    { [id]: instance }
+  );
   return instance;
 }
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createHooks } from 'hookable';
 import { DomPlugin } from '@unhead/dom';
-import { defineHeadPlugin, tagDedupeKey, tagWeight, HasElementTags, NetworkEvents, hashCode, SortModifiers, processTemplateParams, resolveTitleTemplate, IsBrowser, normaliseEntryTags, composableNames, whitelistSafeInput, unpackMeta } from '@unhead/shared';
+import { defineHeadPlugin, tagDedupeKey, tagWeight, HasElementTags, NetworkEvents, hashCode, SortModifiers, processTemplateParams, resolveTitleTemplate, IsBrowser, normaliseEntryTags, composableNames, whitelistSafeInput, unpackMeta, ScriptNetworkEvents } from '@unhead/shared';
 export { composableNames } from '@unhead/shared';
 
 const UsesMergeStrategy = ["templateParams", "htmlAttrs", "bodyAttrs"];
@@ -456,48 +456,16 @@ function useServerSeoMeta(input, options) {
   });
 }
 
-const UseScriptDefaults = {
-  defer: true,
-  fetchpriority: "low"
-};
-const requestIdleCallback = typeof window === "undefined" ? () => {
-} : globalThis.requestIdleCallback || ((cb) => {
-  const start = Date.now();
-  const idleDeadline = {
-    didTimeout: false,
-    timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-  };
-  return setTimeout(() => {
-    cb(idleDeadline);
-  }, 1);
-});
 function useScript(_input, _options) {
   const input = typeof _input === "string" ? { src: _input } : _input;
   const options = _options || {};
   const head = options.head || getActiveHead();
   if (!head)
-    throw new Error("No active head found, please provide a head instance or use the useHead composable");
+    throw new Error("Missing Unhead context.");
   const id = input.key || hashCode(input.src || (typeof input.innerHTML === "string" ? input.innerHTML : ""));
   const key = `use-script.${id}`;
   if (head._scripts?.[id])
     return head._scripts[id];
-  async function transform(entry) {
-    const script2 = await (options.transform || ((input2) => input2))(entry.script[0]);
-    const ctx = { script: script2 };
-    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",
@@ -512,109 +480,78 @@ function useScript(_input, _options) {
       }
       return false;
     },
-    waitForLoad() {
-      return new Promise((resolve) => {
-        if (script.status === "loaded")
-          resolve(options.use?.());
-        function watchForScriptLoaded({ script: script2 }) {
-          if (script2.id === id && script2.status === "loaded") {
-            script2.loaded = true;
-            resolve(options.use?.());
-            head.hooks.removeHook("script:updated", watchForScriptLoaded);
-          }
-        }
-        head.hooks.hook("script:updated", watchForScriptLoaded);
-      });
-    },
     load() {
       if (script.status !== "awaitingLoad")
-        return script.waitForLoad();
+        return script.loadPromise;
       script.status = "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
       script.entry = head.push({
         script: [
-          // async by default
-          { ...UseScriptDefaults, ...input, key }
+          { defer: true, fetchpriority: "low", ...input, key }
         ]
-      }, {
-        ...options,
-        // @ts-expect-error untyped
-        transform,
-        head
-      });
-      return script.waitForLoad();
+      }, options);
+      return script.loadPromise;
     }
   };
+  script.loadPromise = new Promise((resolve, reject) => {
+    const removeHook2 = head.hooks.hook("script:updated", ({ script: script2 }) => {
+      if (script2.id === id && (script2.status === "loaded" || script2.status === "error")) {
+        script2.status === "loaded" && resolve(options.use?.());
+        script2.status === "error" && reject(new Error(`Failed to load script: ${input.src}`));
+        removeHook2();
+      }
+    });
+  });
   const hookCtx = { script };
-  NetworkEvents.forEach((fn) => {
-    const _fn = typeof input[fn] === "function" ? input[fn].bind({}) : null;
+  ScriptNetworkEvents.forEach((fn) => {
     input[fn] = (e) => {
       script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
       head.hooks.callHook(`script:updated`, hookCtx);
-      _fn && _fn(e);
+      typeof input[fn] === "function" && input[fn].call(options.eventContext, e);
     };
   });
-  let trigger = options.trigger;
-  if (trigger) {
-    const isIdle = trigger === "idle";
-    if (isIdle) {
-      if (head.ssr)
-        trigger = "manual";
-      else
-        trigger = new Promise((resolve) => requestIdleCallback(() => resolve()));
-    }
-    trigger === "manual" && (trigger = new Promise(() => {
-    }));
+  const trigger = options.trigger;
+  if (options.trigger)
     trigger instanceof Promise && trigger.then(script.load);
-    maybeHintEarlyConnection(isIdle ? "preconnect" : "dns-prefetch");
-  } else {
+  else
     script.load();
-    maybeHintEarlyConnection("preconnect");
-  }
-  function resolveInnerHtmlLoad(ctx) {
-    if (ctx.tag.key === key) {
-      if (ctx.tag.innerHTML) {
-        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);
+  const removeHook = head.hooks.hook("dom:renderTag", (ctx) => {
+    if (ctx.tag.key !== key)
+      return;
+    if (ctx.tag.innerHTML) {
+      setTimeout(
+        () => {
+          script.status = "loaded";
+          head.hooks.callHook("script:updated", hookCtx);
+          typeof input.onload === "function" && input.onload.call(options.eventContext, new Event("load"));
+        },
+        5
+        /* give inline script a chance to run */
+      );
     }
-  }
-  head.hooks.hook("dom:renderTag", resolveInnerHtmlLoad);
+    removeHook();
+  });
   const instance = new Proxy({}, {
     get(_, fn) {
-      const stub = options.stub?.({ script, fn });
+      const $script = Object.assign(script.loadPromise, script);
+      const stub = options.stub?.({ script: $script, fn });
       if (stub)
         return stub;
       if (fn === "$script")
-        return script;
+        return $script;
       return (...args) => {
         const hookCtx2 = { script, fn, args };
         head.hooks.callHook("script:instance-fn", hookCtx2);
         if (head.ssr || !options.use)
           return;
-        if (script.loaded) {
-          const api = options.use();
-          return api[fn](...args);
-        } else {
-          return script.waitForLoad().then(
-            (api) => {
-              return api[fn](...args);
-            }
-          );
-        }
+        return script.status === "loaded" ? options.use()[fn](...args) : script.loadPromise.then((api) => api[fn](...args));
       };
     }
   });
-  head._scripts = head._scripts || {};
-  head._scripts[id] = instance;
+  head._scripts = Object.assign(
+    head._scripts || {},
+    { [id]: instance }
+  );
   return instance;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "1.8.19",
+  "version": "1.9.0",
   "author": {
     "name": "Harlan Wilton",
     "email": "harlan@harlanzw.com",
@@ -34,9 +34,9 @@
   ],
   "dependencies": {
     "hookable": "^5.5.3",
-    "@unhead/dom": "1.8.19",
-    "@unhead/schema": "1.8.19",
-    "@unhead/shared": "1.8.19"
+    "@unhead/schema": "1.9.0",
+    "@unhead/shared": "1.9.0",
+    "@unhead/dom": "1.9.0"
   },
   "scripts": {
     "build": "unbuild .",