unhead 1.9.0 → 1.9.2

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", "")));
       }
     }
   }
@@ -467,63 +456,68 @@ function useScript(_input, _options) {
   const key = `use-script.${id}`;
   if (head._scripts?.[id])
     return head._scripts[id];
+  const syncStatus = (s) => {
+    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 script = {
     id,
     status: "awaitingLoad",
     loaded: false,
     remove() {
-      if (script.status === "loaded") {
-        script.entry?.dispose();
-        script.status = "removed";
-        head.hooks.callHook(`script:updated`, hookCtx);
+      if (script.entry) {
+        script.entry.dispose();
+        syncStatus("removed");
         delete head._scripts?.[id];
         return true;
       }
       return false;
     },
     load() {
-      if (script.status !== "awaitingLoad")
-        return script.loadPromise;
-      script.status = "loading";
-      head.hooks.callHook(`script:updated`, hookCtx);
-      script.entry = head.push({
-        script: [
-          { defer: true, fetchpriority: "low", ...input, key }
-        ]
-      }, options);
+      if (!script.entry) {
+        syncStatus("loading");
+        script.entry = head.push({
+          script: [{ defer: true, fetchpriority: "low", ...input, key }]
+        }, 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}`));
+        if (script2.status === "loaded")
+          resolve(options.use?.());
+        else if (script2.status === "error")
+          reject(new Error(`Failed to load script: ${input.src}`));
         removeHook2();
       }
     });
   });
   const hookCtx = { script };
-  shared.ScriptNetworkEvents.forEach((fn) => {
-    input[fn] = (e) => {
-      script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-      head.hooks.callHook(`script:updated`, hookCtx);
-      typeof input[fn] === "function" && input[fn].call(options.eventContext, 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;
     if (ctx.tag.innerHTML) {
       setTimeout(
         () => {
-          script.status = "loaded";
-          head.hooks.callHook("script:updated", hookCtx);
+          syncStatus("loaded");
           typeof input.onload === "function" && input.onload.call(options.eventContext, new Event("load"));
         },
         5

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", "")));
       }
     }
   }
@@ -466,63 +455,68 @@ function useScript(_input, _options) {
   const key = `use-script.${id}`;
   if (head._scripts?.[id])
     return head._scripts[id];
+  const syncStatus = (s) => {
+    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 script = {
     id,
     status: "awaitingLoad",
     loaded: false,
     remove() {
-      if (script.status === "loaded") {
-        script.entry?.dispose();
-        script.status = "removed";
-        head.hooks.callHook(`script:updated`, hookCtx);
+      if (script.entry) {
+        script.entry.dispose();
+        syncStatus("removed");
         delete head._scripts?.[id];
         return true;
       }
       return false;
     },
     load() {
-      if (script.status !== "awaitingLoad")
-        return script.loadPromise;
-      script.status = "loading";
-      head.hooks.callHook(`script:updated`, hookCtx);
-      script.entry = head.push({
-        script: [
-          { defer: true, fetchpriority: "low", ...input, key }
-        ]
-      }, options);
+      if (!script.entry) {
+        syncStatus("loading");
+        script.entry = head.push({
+          script: [{ defer: true, fetchpriority: "low", ...input, key }]
+        }, 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}`));
+        if (script2.status === "loaded")
+          resolve(options.use?.());
+        else if (script2.status === "error")
+          reject(new Error(`Failed to load script: ${input.src}`));
         removeHook2();
       }
     });
   });
   const hookCtx = { script };
-  ScriptNetworkEvents.forEach((fn) => {
-    input[fn] = (e) => {
-      script.status = fn === "onload" ? "loaded" : fn === "onerror" ? "error" : "loading";
-      head.hooks.callHook(`script:updated`, hookCtx);
-      typeof input[fn] === "function" && input[fn].call(options.eventContext, 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;
     if (ctx.tag.innerHTML) {
       setTimeout(
         () => {
-          script.status = "loaded";
-          head.hooks.callHook("script:updated", hookCtx);
+          syncStatus("loaded");
           typeof input.onload === "function" && input.onload.call(options.eventContext, new Event("load"));
         },
         5

package/package.json

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