unhead 0.4.8 → 0.6.0

package/dist/index.cjs

@@ -441,7 +441,7 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
 };
 
 const EventHandlersPlugin = () => {
-  const stripEventHandlers = (tag) => {
+  const stripEventHandlers = (mode, tag) => {
     const props = {};
     const eventHandlers = {};
     Object.entries(tag.props).forEach(([key, value]) => {
@@ -450,37 +450,52 @@ const EventHandlersPlugin = () => {
       else
         props[key] = value;
     });
-    return { props, eventHandlers };
+    let delayedSrc;
+    if (mode === "dom" && tag.tag === "script" && typeof props.src === "string" && typeof eventHandlers.onload !== "undefined") {
+      delayedSrc = props.src;
+      delete props.src;
+    }
+    return { props, eventHandlers, delayedSrc };
   };
   return defineHeadPlugin({
     hooks: {
       "ssr:render": function(ctx) {
         ctx.tags = ctx.tags.map((tag) => {
-          tag.props = stripEventHandlers(tag).props;
+          tag.props = stripEventHandlers("ssr", tag).props;
           return tag;
         });
       },
       "dom:beforeRenderTag": function(ctx) {
-        const { props, eventHandlers } = stripEventHandlers(ctx.tag);
+        const { props, eventHandlers, delayedSrc } = stripEventHandlers("dom", ctx.tag);
         if (!Object.keys(eventHandlers).length)
           return;
         ctx.tag.props = props;
         ctx.tag._eventHandlers = eventHandlers;
+        ctx.tag._delayedSrc = delayedSrc;
       },
       "dom:renderTag": function(ctx) {
         const $el = ctx.$el;
         if (!ctx.tag._eventHandlers || !$el)
           return;
+        const $eventListenerTarget = ctx.tag.tag === "bodyAttrs" && typeof window !== "undefined" ? window : $el;
         Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
           const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
           const eventName = k.slice(2).toLowerCase();
+          const eventDedupeKey = `data-h-${eventName}`;
+          delete ctx.queuedSideEffects[sdeKey];
+          if ($el.hasAttribute(eventDedupeKey))
+            return;
           const handler = value;
-          $el?.addEventListener(eventName, handler);
+          $el.setAttribute(eventDedupeKey, "");
+          $eventListenerTarget.addEventListener(eventName, handler);
           ctx.entry._sde[sdeKey] = () => {
-            $el.removeEventListener(eventName, handler);
+            $eventListenerTarget.removeEventListener(eventName, handler);
+            $el.removeAttribute(eventDedupeKey);
           };
-          delete ctx.queuedSideEffects[sdeKey];
         });
+        if (ctx.tag._delayedSrc) {
+          $el.setAttribute("src", ctx.tag._delayedSrc);
+        }
       }
     }
   });
@@ -675,6 +690,42 @@ function defineHeadPlugin(plugin) {
   return plugin;
 }
 
+const coreComposableNames = [
+  "getActiveHead"
+];
+const composableNames = [
+  "useHead",
+  "useTagTitle",
+  "useTagBase",
+  "useTagMeta",
+  "useTagMetaFlat",
+  "useTagLink",
+  "useTagScript",
+  "useTagStyle",
+  "useTagNoscript",
+  "useHtmlAttrs",
+  "useBodyAttrs",
+  "useTitleTemplate",
+  "useServerHead",
+  "useServerTagTitle",
+  "useServerTagBase",
+  "useServerTagMeta",
+  "useServerTagMetaFlat",
+  "useServerTagLink",
+  "useServerTagScript",
+  "useServerTagStyle",
+  "useServerTagNoscript",
+  "useServerHtmlAttrs",
+  "useServerBodyAttrs",
+  "useServerTitleTemplate"
+];
+const unheadComposablesImports = [
+  {
+    from: "unhead",
+    imports: [...coreComposableNames, ...composableNames]
+  }
+];
+
 exports.DedupesTagsPlugin = DedupesTagsPlugin;
 exports.DeprecatedTagAttrPlugin = DeprecatedTagAttrPlugin;
 exports.EventHandlersPlugin = EventHandlersPlugin;
@@ -683,11 +734,13 @@ exports.ProvideTagHashPlugin = ProvideTagHashPlugin;
 exports.SortTagsPlugin = SortTagsPlugin;
 exports.TitleTemplatePlugin = TitleTemplatePlugin;
 exports.asArray = asArray;
+exports.composableNames = composableNames;
 exports.createHead = createHead;
 exports.defineHeadPlugin = defineHeadPlugin;
 exports.getActiveHead = getActiveHead;
 exports.normaliseEntryTags = normaliseEntryTags;
 exports.setActiveHead = setActiveHead;
+exports.unheadComposablesImports = unheadComposablesImports;
 exports.useBodyAttrs = useBodyAttrs;
 exports.useHead = useHead;
 exports.useHtmlAttrs = useHtmlAttrs;

package/dist/index.d.ts

@@ -66,4 +66,10 @@ declare function defineHeadPlugin(plugin: HeadPlugin): HeadPlugin;
 
 declare function normaliseEntryTags<T extends {} = Head>(e: HeadEntry<T>): HeadTag[];
 
-export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, DeprecatedTagAttrPlugin, EventHandlersPlugin, PatchDomOnEntryUpdatesPlugin, ProvideTagHashPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
+declare const composableNames: string[];
+declare const unheadComposablesImports: {
+    from: string;
+    imports: string[];
+}[];
+
+export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, DeprecatedTagAttrPlugin, EventHandlersPlugin, PatchDomOnEntryUpdatesPlugin, ProvideTagHashPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, composableNames, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, unheadComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };

package/dist/index.mjs

@@ -439,7 +439,7 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
 };
 
 const EventHandlersPlugin = () => {
-  const stripEventHandlers = (tag) => {
+  const stripEventHandlers = (mode, tag) => {
     const props = {};
     const eventHandlers = {};
     Object.entries(tag.props).forEach(([key, value]) => {
@@ -448,37 +448,52 @@ const EventHandlersPlugin = () => {
       else
         props[key] = value;
     });
-    return { props, eventHandlers };
+    let delayedSrc;
+    if (mode === "dom" && tag.tag === "script" && typeof props.src === "string" && typeof eventHandlers.onload !== "undefined") {
+      delayedSrc = props.src;
+      delete props.src;
+    }
+    return { props, eventHandlers, delayedSrc };
   };
   return defineHeadPlugin({
     hooks: {
       "ssr:render": function(ctx) {
         ctx.tags = ctx.tags.map((tag) => {
-          tag.props = stripEventHandlers(tag).props;
+          tag.props = stripEventHandlers("ssr", tag).props;
           return tag;
         });
       },
       "dom:beforeRenderTag": function(ctx) {
-        const { props, eventHandlers } = stripEventHandlers(ctx.tag);
+        const { props, eventHandlers, delayedSrc } = stripEventHandlers("dom", ctx.tag);
         if (!Object.keys(eventHandlers).length)
           return;
         ctx.tag.props = props;
         ctx.tag._eventHandlers = eventHandlers;
+        ctx.tag._delayedSrc = delayedSrc;
       },
       "dom:renderTag": function(ctx) {
         const $el = ctx.$el;
         if (!ctx.tag._eventHandlers || !$el)
           return;
+        const $eventListenerTarget = ctx.tag.tag === "bodyAttrs" && typeof window !== "undefined" ? window : $el;
         Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
           const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
           const eventName = k.slice(2).toLowerCase();
+          const eventDedupeKey = `data-h-${eventName}`;
+          delete ctx.queuedSideEffects[sdeKey];
+          if ($el.hasAttribute(eventDedupeKey))
+            return;
           const handler = value;
-          $el?.addEventListener(eventName, handler);
+          $el.setAttribute(eventDedupeKey, "");
+          $eventListenerTarget.addEventListener(eventName, handler);
           ctx.entry._sde[sdeKey] = () => {
-            $el.removeEventListener(eventName, handler);
+            $eventListenerTarget.removeEventListener(eventName, handler);
+            $el.removeAttribute(eventDedupeKey);
           };
-          delete ctx.queuedSideEffects[sdeKey];
         });
+        if (ctx.tag._delayedSrc) {
+          $el.setAttribute("src", ctx.tag._delayedSrc);
+        }
       }
     }
   });
@@ -673,4 +688,40 @@ function defineHeadPlugin(plugin) {
   return plugin;
 }
 
-export { DedupesTagsPlugin, DeprecatedTagAttrPlugin, EventHandlersPlugin, PatchDomOnEntryUpdatesPlugin, ProvideTagHashPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };
+const coreComposableNames = [
+  "getActiveHead"
+];
+const composableNames = [
+  "useHead",
+  "useTagTitle",
+  "useTagBase",
+  "useTagMeta",
+  "useTagMetaFlat",
+  "useTagLink",
+  "useTagScript",
+  "useTagStyle",
+  "useTagNoscript",
+  "useHtmlAttrs",
+  "useBodyAttrs",
+  "useTitleTemplate",
+  "useServerHead",
+  "useServerTagTitle",
+  "useServerTagBase",
+  "useServerTagMeta",
+  "useServerTagMetaFlat",
+  "useServerTagLink",
+  "useServerTagScript",
+  "useServerTagStyle",
+  "useServerTagNoscript",
+  "useServerHtmlAttrs",
+  "useServerBodyAttrs",
+  "useServerTitleTemplate"
+];
+const unheadComposablesImports = [
+  {
+    from: "unhead",
+    imports: [...coreComposableNames, ...composableNames]
+  }
+];
+
+export { DedupesTagsPlugin, DeprecatedTagAttrPlugin, EventHandlersPlugin, PatchDomOnEntryUpdatesPlugin, ProvideTagHashPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, composableNames, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, unheadComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "0.4.8",
+  "version": "0.6.0",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/dom": "0.4.8",
-    "@unhead/schema": "0.4.8",
+    "@unhead/dom": "0.6.0",
+    "@unhead/schema": "0.6.0",
     "hookable": "^5.4.1"
   },
   "devDependencies": {