unhead 1.9.1 → 1.9.3

package/dist/index.cjs

@@ -100,12 +100,10 @@ const EventHandlersPlugin = shared.defineHeadPlugin((head) => ({
       for (const tag of ctx.tags.filter((t) => ValidEventTags.includes(t.tag))) {
         Object.entries(tag.props).forEach(([key, value]) => {
           if (key.startsWith("on") && typeof value === "function") {
-            if (head.ssr && shared.NetworkEvents.includes(key)) {
-              tag.props[key] = `this.dataset.${key} = true`;
-              tag.props["data-unhead-events"] = "";
-            } else {
+            if (head.ssr && shared.NetworkEvents.includes(key))
+              tag.props[key] = `this.dataset.${key}fired = true`;
+            else
               delete tag.props[key];
-            }
             tag._eventHandlers = tag._eventHandlers || {};
             tag._eventHandlers[key] = value;
           }
@@ -114,19 +112,10 @@ const EventHandlersPlugin = shared.defineHeadPlugin((head) => ({
           tag.key = tag.key || shared.hashCode(tag.props.src || tag.props.href);
       }
     },
-    "dom:renderTag": function(ctx) {
-      const $el = ctx.$el;
-      if (!$el?.dataset || !("unheadEvents" in $el.dataset))
-        return;
-      delete $el.dataset.unheadEvents;
-      const handler = (k) => ctx.tag._eventHandlers?.[k]?.call(ctx.$el, new Event(k.replace("on", "")));
-      for (const k of Object.keys($el.dataset).filter((k2) => shared.NetworkEvents.includes(k2)))
-        handler(k);
-      if (typeof MutationObserver !== "undefined") {
-        const observer = new MutationObserver((e) => {
-          e.filter((m) => m.attributeName && shared.NetworkEvents.includes(m.attributeName.replace("data-", ""))).map((m) => m.attributeName.replace("data-", "")).map(handler);
-        });
-        observer.observe(ctx.$el, { attributes: true });
+    "dom:renderTag": function({ $el, tag }) {
+      for (const k of Object.keys($el?.dataset || {}).filter((k2) => shared.NetworkEvents.some((e) => `${e}fired` === k2))) {
+        const ek = k.replace("fired", "");
+        tag._eventHandlers?.[ek]?.call($el, new Event(ek.replace("on", "")));
       }
     }
   }
@@ -471,6 +460,25 @@ function useScript(_input, _options) {
     script.status = s;
     head.hooks.callHook(`script:updated`, hookCtx);
   };
+  const trigger = options.trigger;
+  shared.ScriptNetworkEvents.forEach((fn) => {
+    const _fn = typeof input[fn] === "function" ? input[fn].bind(options.eventContext) : null;
+    input[fn] = (e) => {
+      syncStatus(fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading");
+      _fn?.(e);
+    };
+  });
+  const loadPromise = new Promise((resolve, reject) => {
+    const cleanUp = head.hooks.hook("script:updated", ({ script: script2 }) => {
+      if (script2.id === id && (script2.status === "loaded" || script2.status === "error")) {
+        if (script2.status === "loaded")
+          resolve(options.use?.());
+        else if (script2.status === "error")
+          reject(new Error(`Failed to load script: ${input.src}`));
+        cleanUp();
+      }
+    });
+  });
   const script = {
     id,
     status: "awaitingLoad",
@@ -491,31 +499,18 @@ function useScript(_input, _options) {
           script: [{ defer: true, fetchpriority: "low", ...input, key }]
         }, options);
       }
-      return script.loadPromise;
+      return 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.ScriptNetworkEvents.forEach((fn) => {
-    const _fn = typeof input[fn] === "function" ? input[fn].bind(options.eventContext) : null;
-    input[fn] = (e) => {
-      syncStatus(fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading");
-      _fn?.(e);
-    };
-  });
-  const trigger = options.trigger;
-  if (options.trigger)
-    trigger instanceof Promise && trigger.then(script.load);
-  else
+  if (trigger) {
+    if (trigger instanceof Promise)
+      trigger.then(script.load);
+    else if (typeof trigger === "function")
+      trigger(script.load);
+  } else {
     script.load();
+  }
   const removeHook = head.hooks.hook("dom:renderTag", (ctx) => {
     if (ctx.tag.key !== key)
       return;
@@ -533,7 +528,7 @@ function useScript(_input, _options) {
   });
   const instance = new Proxy({}, {
     get(_, fn) {
-      const $script = Object.assign(script.loadPromise, script);
+      const $script = Object.assign(loadPromise, script);
       const stub = options.stub?.({ script: $script, fn });
       if (stub)
         return stub;
@@ -544,7 +539,7 @@ function useScript(_input, _options) {
         head.hooks.callHook("script:instance-fn", hookCtx2);
         if (head.ssr || !options.use)
           return;
-        return script.status === "loaded" ? options.use()[fn](...args) : script.loadPromise.then((api) => api[fn](...args));
+        return script.status === "loaded" ? options.use()[fn]?.(...args) : loadPromise.then((api) => api[fn]?.(...args));
       };
     }
   });

package/dist/index.mjs

@@ -99,12 +99,10 @@ const EventHandlersPlugin = defineHeadPlugin((head) => ({
       for (const tag of ctx.tags.filter((t) => ValidEventTags.includes(t.tag))) {
         Object.entries(tag.props).forEach(([key, value]) => {
           if (key.startsWith("on") && typeof value === "function") {
-            if (head.ssr && NetworkEvents.includes(key)) {
-              tag.props[key] = `this.dataset.${key} = true`;
-              tag.props["data-unhead-events"] = "";
-            } else {
+            if (head.ssr && NetworkEvents.includes(key))
+              tag.props[key] = `this.dataset.${key}fired = true`;
+            else
               delete tag.props[key];
-            }
             tag._eventHandlers = tag._eventHandlers || {};
             tag._eventHandlers[key] = value;
           }
@@ -113,19 +111,10 @@ const EventHandlersPlugin = defineHeadPlugin((head) => ({
           tag.key = tag.key || hashCode(tag.props.src || tag.props.href);
       }
     },
-    "dom:renderTag": function(ctx) {
-      const $el = ctx.$el;
-      if (!$el?.dataset || !("unheadEvents" in $el.dataset))
-        return;
-      delete $el.dataset.unheadEvents;
-      const handler = (k) => ctx.tag._eventHandlers?.[k]?.call(ctx.$el, new Event(k.replace("on", "")));
-      for (const k of Object.keys($el.dataset).filter((k2) => NetworkEvents.includes(k2)))
-        handler(k);
-      if (typeof MutationObserver !== "undefined") {
-        const observer = new MutationObserver((e) => {
-          e.filter((m) => m.attributeName && NetworkEvents.includes(m.attributeName.replace("data-", ""))).map((m) => m.attributeName.replace("data-", "")).map(handler);
-        });
-        observer.observe(ctx.$el, { attributes: true });
+    "dom:renderTag": function({ $el, tag }) {
+      for (const k of Object.keys($el?.dataset || {}).filter((k2) => NetworkEvents.some((e) => `${e}fired` === k2))) {
+        const ek = k.replace("fired", "");
+        tag._eventHandlers?.[ek]?.call($el, new Event(ek.replace("on", "")));
       }
     }
   }
@@ -470,6 +459,25 @@ function useScript(_input, _options) {
     script.status = s;
     head.hooks.callHook(`script:updated`, hookCtx);
   };
+  const trigger = options.trigger;
+  ScriptNetworkEvents.forEach((fn) => {
+    const _fn = typeof input[fn] === "function" ? input[fn].bind(options.eventContext) : null;
+    input[fn] = (e) => {
+      syncStatus(fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading");
+      _fn?.(e);
+    };
+  });
+  const loadPromise = new Promise((resolve, reject) => {
+    const cleanUp = head.hooks.hook("script:updated", ({ script: script2 }) => {
+      if (script2.id === id && (script2.status === "loaded" || script2.status === "error")) {
+        if (script2.status === "loaded")
+          resolve(options.use?.());
+        else if (script2.status === "error")
+          reject(new Error(`Failed to load script: ${input.src}`));
+        cleanUp();
+      }
+    });
+  });
   const script = {
     id,
     status: "awaitingLoad",
@@ -490,31 +498,18 @@ function useScript(_input, _options) {
           script: [{ defer: true, fetchpriority: "low", ...input, key }]
         }, options);
       }
-      return script.loadPromise;
+      return 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 };
-  ScriptNetworkEvents.forEach((fn) => {
-    const _fn = typeof input[fn] === "function" ? input[fn].bind(options.eventContext) : null;
-    input[fn] = (e) => {
-      syncStatus(fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading");
-      _fn?.(e);
-    };
-  });
-  const trigger = options.trigger;
-  if (options.trigger)
-    trigger instanceof Promise && trigger.then(script.load);
-  else
+  if (trigger) {
+    if (trigger instanceof Promise)
+      trigger.then(script.load);
+    else if (typeof trigger === "function")
+      trigger(script.load);
+  } else {
     script.load();
+  }
   const removeHook = head.hooks.hook("dom:renderTag", (ctx) => {
     if (ctx.tag.key !== key)
       return;
@@ -532,7 +527,7 @@ function useScript(_input, _options) {
   });
   const instance = new Proxy({}, {
     get(_, fn) {
-      const $script = Object.assign(script.loadPromise, script);
+      const $script = Object.assign(loadPromise, script);
       const stub = options.stub?.({ script: $script, fn });
       if (stub)
         return stub;
@@ -543,7 +538,7 @@ function useScript(_input, _options) {
         head.hooks.callHook("script:instance-fn", hookCtx2);
         if (head.ssr || !options.use)
           return;
-        return script.status === "loaded" ? options.use()[fn](...args) : script.loadPromise.then((api) => api[fn](...args));
+        return script.status === "loaded" ? options.use()[fn]?.(...args) : loadPromise.then((api) => api[fn]?.(...args));
       };
     }
   });

package/package.json

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