unhead 0.3.1 → 0.4.2

package/dist/index.cjs

@@ -301,8 +301,8 @@ const DedupesTagsPlugin = (options) => {
       },
       "tags:resolve": function(ctx) {
         const deduping = {};
-        ctx.tags.forEach((tag, i) => {
-          let dedupeKey = tag._d || tag._p || i;
+        ctx.tags.forEach((tag) => {
+          let dedupeKey = tag._d || tag._p;
           const dupedTag = deduping[dedupeKey];
           if (dupedTag) {
             let strategy = tag?.tagDuplicateStrategy;
@@ -323,13 +323,12 @@ const DedupesTagsPlugin = (options) => {
               };
               return;
             } else if (tag._e === dupedTag._e) {
-              dedupeKey = `${dedupeKey}:entry(${tag._e}:${tag._p})`;
-              if (dupedTag._s) {
+              dedupeKey = tag._d = `${dedupeKey}:${tag._p}`;
+              if (dupedTag._s && typeof dupedTag.props[dupedTag._s] !== "undefined") {
                 delete tag.props[dupedTag._s];
-                tag._s = dupedTag._s + tag._p;
+                tag._s = `${dupedTag._s}${tag._p}`;
                 tag.props[tag._s] = "";
               }
-              tag._d = dedupeKey;
             }
             if (Object.keys(tag.props).length === 0 && !tag.children) {
               delete deduping[dedupeKey];
@@ -397,18 +396,16 @@ function hashCode(s) {
     h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
   return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 7).toLowerCase();
 }
-
-const HydratesStatePlugin = () => {
+const HydrateStateFromSSRPlugin = () => {
   return defineHeadPlugin({
     hooks: {
       "tag:normalise": (ctx) => {
         const { tag, entry } = ctx;
-        if (!HasElementTags.includes(tag.tag))
-          return;
-        if (typeof tag._d === "undefined" && entry._m === "server")
+        if (!HasElementTags.includes(tag.tag) || typeof tag._d === "undefined")
           return;
-        tag._s = `data-h-${hashCode(tag._d || JSON.stringify({ tag: tag.tag, props: tag.props, children: tag.children }))}`;
-        tag.props[tag._s] = "";
+        tag._s = `data-h-${hashCode(tag._d)}`;
+        if (entry._m === "server")
+          tag.props[tag._s] = "";
       }
     }
   });
@@ -431,20 +428,67 @@ 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];
 }
 
-const IsClient = typeof window !== "undefined";
+const IsBrowser = typeof window !== "undefined";
 
 exports.activeHead = void 0;
 const setActiveHead = (head) => exports.activeHead = head;
 const getActiveHead = () => exports.activeHead;
 
 function useHead(input, options = {}) {
-  if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
-    return;
   const head = getActiveHead();
+  const isBrowser = IsBrowser || head.resolvedOptions?.document;
+  if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
+    return;
   head.push(input, options);
 }
 const useTagTitle = (title) => {
@@ -518,12 +562,14 @@ const useServerTitleTemplate = (titleTemplate) => {
   useServerHead({ titleTemplate });
 };
 
+const TagEntityBits = 10;
+
 function normaliseEntryTags(e) {
   return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
     ([k, value]) => asArray(value).map((props) => asArray(normaliseTag(k, props)))
   ).flat(3).map((t, i) => {
     t._e = e._i;
-    t._p = (e._i << 8) + i++;
+    t._p = (e._i << TagEntityBits) + i;
     return t;
   });
 }
@@ -531,21 +577,23 @@ function normaliseEntryTags(e) {
 function createHead(options = {}) {
   let entries = [];
   let _sde = {};
-  let entryId = 0;
+  let _eid = 0;
   const hooks = hookable.createHooks();
   if (options?.hooks)
     hooks.addHooks(options.hooks);
-  const plugins = [
+  options.plugins = [
     DeprecatedTagAttrPlugin(),
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    EventHandlersPlugin(),
+    ...options?.plugins || []
   ];
-  plugins.push(...options.plugins || []);
-  plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
-  const triggerUpdate = () => hooks.callHook("entries:updated", head);
+  options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
+  const triggerUpdateHook = () => hooks.callHook("entries:updated", head);
   const head = {
+    resolvedOptions: options,
     _popSideEffectQueue() {
       const sde = { ..._sde };
       _sde = {};
@@ -558,23 +606,24 @@ function createHead(options = {}) {
       return hooks;
     },
     push(input, options2) {
-      const _i = entryId++;
-      entries.push({
-        _i,
+      const activeEntry = {
+        _i: _eid++,
         input,
-        _sde: {},
-        ...options2
-      });
-      triggerUpdate();
+        _sde: {}
+      };
+      if (options2?.mode)
+        activeEntry._m = options2?.mode;
+      entries.push(activeEntry);
+      triggerUpdateHook();
       const queueSideEffects = (e) => {
         _sde = { ..._sde, ...e._sde || {} };
         e._sde = {};
-        triggerUpdate();
+        triggerUpdateHook();
       };
       return {
         dispose() {
           entries = entries.filter((e) => {
-            if (e._i !== _i)
+            if (e._i !== activeEntry._i)
               return true;
             queueSideEffects(e);
             return false;
@@ -582,9 +631,10 @@ function createHead(options = {}) {
         },
         patch(input2) {
           entries = entries.map((e) => {
-            if (e._i === _i) {
+            if (e._i === activeEntry._i) {
               queueSideEffects(e);
-              e.input = e._i === _i ? input2 : e.input;
+              activeEntry.input = e.input = input2;
+              activeEntry._i = e._i = _eid++;
             }
             return e;
           });
@@ -616,7 +666,8 @@ function defineHeadPlugin(plugin) {
 
 exports.DedupesTagsPlugin = DedupesTagsPlugin;
 exports.DeprecatedTagAttrPlugin = DeprecatedTagAttrPlugin;
-exports.HydratesStatePlugin = HydratesStatePlugin;
+exports.EventHandlersPlugin = EventHandlersPlugin;
+exports.HydrateStateFromSSRPlugin = HydrateStateFromSSRPlugin;
 exports.PatchDomOnEntryUpdatesPlugin = PatchDomOnEntryUpdatesPlugin;
 exports.SortTagsPlugin = SortTagsPlugin;
 exports.TitleTemplatePlugin = TitleTemplatePlugin;
@@ -624,6 +675,7 @@ exports.asArray = asArray;
 exports.createHead = createHead;
 exports.defineHeadPlugin = defineHeadPlugin;
 exports.getActiveHead = getActiveHead;
+exports.hashCode = hashCode;
 exports.normaliseEntryTags = normaliseEntryTags;
 exports.setActiveHead = setActiveHead;
 exports.useBodyAttrs = useBodyAttrs;

package/dist/index.d.ts

@@ -13,13 +13,21 @@ declare const TitleTemplatePlugin: () => _unhead_schema.HeadPlugin;
 
 declare const DeprecatedTagAttrPlugin: () => _unhead_schema.HeadPlugin;
 
-declare const HydratesStatePlugin: () => _unhead_schema.HeadPlugin;
+declare function hashCode(s: string): string;
+declare const HydrateStateFromSSRPlugin: () => _unhead_schema.HeadPlugin;
 
 interface TriggerDomPatchingOnUpdatesPluginOptions extends RenderDomHeadOptions {
     delayFn?: (fn: () => void) => void;
 }
 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 +67,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, HydrateStateFromSSRPlugin, PatchDomOnEntryUpdatesPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, hashCode, 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

@@ -299,8 +299,8 @@ const DedupesTagsPlugin = (options) => {
       },
       "tags:resolve": function(ctx) {
         const deduping = {};
-        ctx.tags.forEach((tag, i) => {
-          let dedupeKey = tag._d || tag._p || i;
+        ctx.tags.forEach((tag) => {
+          let dedupeKey = tag._d || tag._p;
           const dupedTag = deduping[dedupeKey];
           if (dupedTag) {
             let strategy = tag?.tagDuplicateStrategy;
@@ -321,13 +321,12 @@ const DedupesTagsPlugin = (options) => {
               };
               return;
             } else if (tag._e === dupedTag._e) {
-              dedupeKey = `${dedupeKey}:entry(${tag._e}:${tag._p})`;
-              if (dupedTag._s) {
+              dedupeKey = tag._d = `${dedupeKey}:${tag._p}`;
+              if (dupedTag._s && typeof dupedTag.props[dupedTag._s] !== "undefined") {
                 delete tag.props[dupedTag._s];
-                tag._s = dupedTag._s + tag._p;
+                tag._s = `${dupedTag._s}${tag._p}`;
                 tag.props[tag._s] = "";
               }
-              tag._d = dedupeKey;
             }
             if (Object.keys(tag.props).length === 0 && !tag.children) {
               delete deduping[dedupeKey];
@@ -395,18 +394,16 @@ function hashCode(s) {
     h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
   return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 7).toLowerCase();
 }
-
-const HydratesStatePlugin = () => {
+const HydrateStateFromSSRPlugin = () => {
   return defineHeadPlugin({
     hooks: {
       "tag:normalise": (ctx) => {
         const { tag, entry } = ctx;
-        if (!HasElementTags.includes(tag.tag))
-          return;
-        if (typeof tag._d === "undefined" && entry._m === "server")
+        if (!HasElementTags.includes(tag.tag) || typeof tag._d === "undefined")
           return;
-        tag._s = `data-h-${hashCode(tag._d || JSON.stringify({ tag: tag.tag, props: tag.props, children: tag.children }))}`;
-        tag.props[tag._s] = "";
+        tag._s = `data-h-${hashCode(tag._d)}`;
+        if (entry._m === "server")
+          tag.props[tag._s] = "";
       }
     }
   });
@@ -429,20 +426,67 @@ 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];
 }
 
-const IsClient = typeof window !== "undefined";
+const IsBrowser = typeof window !== "undefined";
 
 let activeHead;
 const setActiveHead = (head) => activeHead = head;
 const getActiveHead = () => activeHead;
 
 function useHead(input, options = {}) {
-  if (options.mode === "server" && IsClient || options.mode === "client" && !IsClient)
-    return;
   const head = getActiveHead();
+  const isBrowser = IsBrowser || head.resolvedOptions?.document;
+  if (options.mode === "server" && isBrowser || options.mode === "client" && !isBrowser)
+    return;
   head.push(input, options);
 }
 const useTagTitle = (title) => {
@@ -516,12 +560,14 @@ const useServerTitleTemplate = (titleTemplate) => {
   useServerHead({ titleTemplate });
 };
 
+const TagEntityBits = 10;
+
 function normaliseEntryTags(e) {
   return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
     ([k, value]) => asArray(value).map((props) => asArray(normaliseTag(k, props)))
   ).flat(3).map((t, i) => {
     t._e = e._i;
-    t._p = (e._i << 8) + i++;
+    t._p = (e._i << TagEntityBits) + i;
     return t;
   });
 }
@@ -529,21 +575,23 @@ function normaliseEntryTags(e) {
 function createHead(options = {}) {
   let entries = [];
   let _sde = {};
-  let entryId = 0;
+  let _eid = 0;
   const hooks = createHooks();
   if (options?.hooks)
     hooks.addHooks(options.hooks);
-  const plugins = [
+  options.plugins = [
     DeprecatedTagAttrPlugin(),
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn })
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    EventHandlersPlugin(),
+    ...options?.plugins || []
   ];
-  plugins.push(...options.plugins || []);
-  plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
-  const triggerUpdate = () => hooks.callHook("entries:updated", head);
+  options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
+  const triggerUpdateHook = () => hooks.callHook("entries:updated", head);
   const head = {
+    resolvedOptions: options,
     _popSideEffectQueue() {
       const sde = { ..._sde };
       _sde = {};
@@ -556,23 +604,24 @@ function createHead(options = {}) {
       return hooks;
     },
     push(input, options2) {
-      const _i = entryId++;
-      entries.push({
-        _i,
+      const activeEntry = {
+        _i: _eid++,
         input,
-        _sde: {},
-        ...options2
-      });
-      triggerUpdate();
+        _sde: {}
+      };
+      if (options2?.mode)
+        activeEntry._m = options2?.mode;
+      entries.push(activeEntry);
+      triggerUpdateHook();
       const queueSideEffects = (e) => {
         _sde = { ..._sde, ...e._sde || {} };
         e._sde = {};
-        triggerUpdate();
+        triggerUpdateHook();
       };
       return {
         dispose() {
           entries = entries.filter((e) => {
-            if (e._i !== _i)
+            if (e._i !== activeEntry._i)
               return true;
             queueSideEffects(e);
             return false;
@@ -580,9 +629,10 @@ function createHead(options = {}) {
         },
         patch(input2) {
           entries = entries.map((e) => {
-            if (e._i === _i) {
+            if (e._i === activeEntry._i) {
               queueSideEffects(e);
-              e.input = e._i === _i ? input2 : e.input;
+              activeEntry.input = e.input = input2;
+              activeEntry._i = e._i = _eid++;
             }
             return e;
           });
@@ -612,4 +662,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, HydrateStateFromSSRPlugin, PatchDomOnEntryUpdatesPlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, hashCode, 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.2",
   "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.2",
+    "@unhead/schema": "0.4.2",
     "hookable": "^5.4.1"
   },
   "devDependencies": {
-    "zhead": "1.0.0-beta.10"
+    "zhead": "1.0.0-beta.11"
   },
   "scripts": {
     "build": "unbuild .",