unhead 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -431,6 +431,52 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
   });
 };
 
+const EventHandlersPlugin = () => {
+  const stripEventHandlers = (tag) => {
+    const props = {};
+    const eventHandlers = {};
+    Object.entries(tag.props).forEach(([key, value]) => {
+      if (key.startsWith("on") && typeof value === "function")
+        eventHandlers[key] = value;
+      else
+        props[key] = value;
+    });
+    return { props, eventHandlers };
+  };
+  return defineHeadPlugin({
+    hooks: {
+      "ssr:beforeRender": function(ctx) {
+        ctx.tags = ctx.tags.map((tag) => {
+          tag.props = stripEventHandlers(tag).props;
+          return tag;
+        });
+      },
+      "dom:beforeRenderTag": function(ctx) {
+        const { props, eventHandlers } = stripEventHandlers(ctx.tag);
+        if (!Object.keys(eventHandlers).length)
+          return;
+        ctx.tag.props = props;
+        ctx.tag._eventHandlers = eventHandlers;
+      },
+      "dom:renderTag": function(ctx) {
+        const $el = ctx.$el;
+        if (!ctx.tag._eventHandlers || !$el)
+          return;
+        Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
+          const sdeKey = `${ctx.tag._s || ctx.tag._p}:${k}`;
+          const eventName = k.slice(2).toLowerCase();
+          const handler = value;
+          $el?.addEventListener(eventName, handler);
+          ctx.entry._sde[sdeKey] = () => {
+            $el.removeEventListener(eventName, handler);
+          };
+          delete ctx.queuedSideEffects[sdeKey];
+        });
+      }
+    }
+  });
+};
+
 function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
@@ -540,7 +586,8 @@ function createHead(options = {}) {
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    EventHandlersPlugin()
   ];
   plugins.push(...options.plugins || []);
   plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
@@ -616,6 +663,7 @@ function defineHeadPlugin(plugin) {
 
 exports.DedupesTagsPlugin = DedupesTagsPlugin;
 exports.DeprecatedTagAttrPlugin = DeprecatedTagAttrPlugin;
+exports.EventHandlersPlugin = EventHandlersPlugin;
 exports.HydratesStatePlugin = HydratesStatePlugin;
 exports.PatchDomOnEntryUpdatesPlugin = PatchDomOnEntryUpdatesPlugin;
 exports.SortTagsPlugin = SortTagsPlugin;

package/dist/index.d.ts

@@ -20,6 +20,13 @@ interface TriggerDomPatchingOnUpdatesPluginOptions extends RenderDomHeadOptions
 }
 declare const PatchDomOnEntryUpdatesPlugin: (options?: TriggerDomPatchingOnUpdatesPluginOptions) => _unhead_schema.HeadPlugin;
 
+/**
+ * Supports DOM event handlers (i.e `onload`) as functions.
+ *
+ * When SSR we need to strip out these values. On CSR we
+ */
+declare const EventHandlersPlugin: () => _unhead_schema.HeadPlugin;
+
 declare type Arrayable<T> = T | Array<T>;
 declare function asArray<T>(value: Arrayable<T>): T[];
 
@@ -59,4 +66,4 @@ declare function defineHeadPlugin(plugin: HeadPlugin): HeadPlugin;
 
 declare function normaliseEntryTags<T extends {} = Head>(e: HeadEntry<T>): HeadTag[];
 
-export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, DeprecatedTagAttrPlugin, HydratesStatePlugin, PatchDomOnEntryUpdatesPlugin, 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 };
+export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, DeprecatedTagAttrPlugin, EventHandlersPlugin, HydratesStatePlugin, PatchDomOnEntryUpdatesPlugin, 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 };

package/dist/index.mjs

@@ -429,6 +429,52 @@ const PatchDomOnEntryUpdatesPlugin = (options) => {
   });
 };
 
+const EventHandlersPlugin = () => {
+  const stripEventHandlers = (tag) => {
+    const props = {};
+    const eventHandlers = {};
+    Object.entries(tag.props).forEach(([key, value]) => {
+      if (key.startsWith("on") && typeof value === "function")
+        eventHandlers[key] = value;
+      else
+        props[key] = value;
+    });
+    return { props, eventHandlers };
+  };
+  return defineHeadPlugin({
+    hooks: {
+      "ssr:beforeRender": function(ctx) {
+        ctx.tags = ctx.tags.map((tag) => {
+          tag.props = stripEventHandlers(tag).props;
+          return tag;
+        });
+      },
+      "dom:beforeRenderTag": function(ctx) {
+        const { props, eventHandlers } = stripEventHandlers(ctx.tag);
+        if (!Object.keys(eventHandlers).length)
+          return;
+        ctx.tag.props = props;
+        ctx.tag._eventHandlers = eventHandlers;
+      },
+      "dom:renderTag": function(ctx) {
+        const $el = ctx.$el;
+        if (!ctx.tag._eventHandlers || !$el)
+          return;
+        Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
+          const sdeKey = `${ctx.tag._s || ctx.tag._p}:${k}`;
+          const eventName = k.slice(2).toLowerCase();
+          const handler = value;
+          $el?.addEventListener(eventName, handler);
+          ctx.entry._sde[sdeKey] = () => {
+            $el.removeEventListener(eventName, handler);
+          };
+          delete ctx.queuedSideEffects[sdeKey];
+        });
+      }
+    }
+  });
+};
+
 function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
@@ -538,7 +584,8 @@ function createHead(options = {}) {
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    EventHandlersPlugin()
   ];
   plugins.push(...options.plugins || []);
   plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
@@ -612,4 +659,4 @@ function defineHeadPlugin(plugin) {
   return plugin;
 }
 
-export { DedupesTagsPlugin, DeprecatedTagAttrPlugin, HydratesStatePlugin, PatchDomOnEntryUpdatesPlugin, 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 };
+export { DedupesTagsPlugin, DeprecatedTagAttrPlugin, EventHandlersPlugin, HydratesStatePlugin, PatchDomOnEntryUpdatesPlugin, 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -30,12 +30,12 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/dom": "0.3.1",
-    "@unhead/schema": "0.3.1",
+    "@unhead/dom": "0.4.1",
+    "@unhead/schema": "0.4.1",
     "hookable": "^5.4.1"
   },
   "devDependencies": {
-    "zhead": "1.0.0-beta.10"
+    "zhead": "1.0.0-beta.11"
   },
   "scripts": {
     "build": "unbuild .",