unhead 0.4.4 → 0.4.6

package/dist/index.cjs

@@ -229,9 +229,26 @@ const sortTags = (aTag, bTag) => {
   return tagWeight(aTag) - tagWeight(bTag);
 };
 
+const UniqueTags = ["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"];
+const ArrayMetaProperties = [
+  "og:image",
+  "og:video",
+  "og:audio",
+  "og:locale:alternate",
+  "video:actor",
+  "video:director",
+  "video:writer",
+  "video:tag",
+  "article:author",
+  "article:tag",
+  "book:tag",
+  "book:author",
+  "music:album",
+  "music:musician"
+];
 function tagDedupeKey(tag) {
   const { props, tag: tagName } = tag;
-  if (["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"].includes(tagName))
+  if (UniqueTags.includes(tagName))
     return tagName;
   if (tagName === "link" && props.rel === "canonical")
     return "canonical";
@@ -241,7 +258,7 @@ function tagDedupeKey(tag) {
   if (tagName === "meta")
     name.push(...["name", "property", "http-equiv"]);
   for (const n of name) {
-    if (typeof props[n] !== "undefined") {
+    if (typeof props[n] !== "undefined" && !ArrayMetaProperties.findIndex((p) => !props[n].startsWith(p))) {
       return `${tagName}:${n}:${props[n]}`;
     }
   }
@@ -324,13 +341,9 @@ const DedupesTagsPlugin = (options) => {
               return;
             } else if (tag._e === dupedTag._e) {
               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.props[tag._s] = "";
-              }
             }
-            if (Object.keys(tag.props).length === 0 && !tag.children) {
+            const propCount = Object.keys(tag.props).length;
+            if ((propCount === 0 || propCount === 1 && typeof tag.props["data-h-key"] !== "undefined") && !tag.children) {
               delete deduping[dedupeKey];
               return;
             }
@@ -390,22 +403,18 @@ const DeprecatedTagAttrPlugin = () => {
   });
 };
 
-function hashCode(s) {
-  let h = 9;
-  for (let i = 0; i < s.length; )
-    h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
-  return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 7).toLowerCase();
-}
-const HydrateStateFromSSRPlugin = () => {
+const IsBrowser = typeof window !== "undefined";
+
+const ProvideTagHashPlugin = () => {
   return defineHeadPlugin({
     hooks: {
       "tag:normalise": (ctx) => {
         const { tag, entry } = ctx;
-        if (!HasElementTags.includes(tag.tag) || typeof tag._d === "undefined")
+        if (!HasElementTags.includes(tag.tag))
           return;
-        tag._s = `data-h-${hashCode(tag._d)}`;
-        if (entry._m === "server" || tag.key)
-          tag.props[tag._s] = "";
+        const isBrowser = IsBrowser || getActiveHead()?.resolvedOptions?.document;
+        if (!isBrowser && entry._m === "server" && tag.key)
+          tag.props["data-h-key"] = tag._d;
       }
     }
   });
@@ -442,7 +451,7 @@ const EventHandlersPlugin = () => {
   };
   return defineHeadPlugin({
     hooks: {
-      "ssr:beforeRender": function(ctx) {
+      "ssr:render": function(ctx) {
         ctx.tags = ctx.tags.map((tag) => {
           tag.props = stripEventHandlers(tag).props;
           return tag;
@@ -460,7 +469,7 @@ const EventHandlersPlugin = () => {
         if (!ctx.tag._eventHandlers || !$el)
           return;
         Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
-          const sdeKey = `${ctx.tag._s || ctx.tag._p}:${k}`;
+          const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
           const eventName = k.slice(2).toLowerCase();
           const handler = value;
           $el?.addEventListener(eventName, handler);
@@ -478,8 +487,6 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const IsBrowser = typeof window !== "undefined";
-
 exports.activeHead = void 0;
 const setActiveHead = (head) => exports.activeHead = head;
 const getActiveHead = () => exports.activeHead;
@@ -586,8 +593,9 @@ function createHead(options = {}) {
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
     EventHandlersPlugin(),
+    ProvideTagHashPlugin(),
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
     ...options?.plugins || []
   ];
   options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
@@ -667,15 +675,14 @@ function defineHeadPlugin(plugin) {
 exports.DedupesTagsPlugin = DedupesTagsPlugin;
 exports.DeprecatedTagAttrPlugin = DeprecatedTagAttrPlugin;
 exports.EventHandlersPlugin = EventHandlersPlugin;
-exports.HydrateStateFromSSRPlugin = HydrateStateFromSSRPlugin;
 exports.PatchDomOnEntryUpdatesPlugin = PatchDomOnEntryUpdatesPlugin;
+exports.ProvideTagHashPlugin = ProvideTagHashPlugin;
 exports.SortTagsPlugin = SortTagsPlugin;
 exports.TitleTemplatePlugin = TitleTemplatePlugin;
 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,8 +13,7 @@ declare const TitleTemplatePlugin: () => _unhead_schema.HeadPlugin;
 
 declare const DeprecatedTagAttrPlugin: () => _unhead_schema.HeadPlugin;
 
-declare function hashCode(s: string): string;
-declare const HydrateStateFromSSRPlugin: () => _unhead_schema.HeadPlugin;
+declare const ProvideTagHashPlugin: () => _unhead_schema.HeadPlugin;
 
 interface TriggerDomPatchingOnUpdatesPluginOptions extends RenderDomHeadOptions {
     delayFn?: (fn: () => void) => void;
@@ -67,4 +66,4 @@ declare function defineHeadPlugin(plugin: HeadPlugin): HeadPlugin;
 
 declare function normaliseEntryTags<T extends {} = Head>(e: HeadEntry<T>): HeadTag[];
 
-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 };
+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 };

package/dist/index.mjs

@@ -227,9 +227,26 @@ const sortTags = (aTag, bTag) => {
   return tagWeight(aTag) - tagWeight(bTag);
 };
 
+const UniqueTags = ["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"];
+const ArrayMetaProperties = [
+  "og:image",
+  "og:video",
+  "og:audio",
+  "og:locale:alternate",
+  "video:actor",
+  "video:director",
+  "video:writer",
+  "video:tag",
+  "article:author",
+  "article:tag",
+  "book:tag",
+  "book:author",
+  "music:album",
+  "music:musician"
+];
 function tagDedupeKey(tag) {
   const { props, tag: tagName } = tag;
-  if (["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"].includes(tagName))
+  if (UniqueTags.includes(tagName))
     return tagName;
   if (tagName === "link" && props.rel === "canonical")
     return "canonical";
@@ -239,7 +256,7 @@ function tagDedupeKey(tag) {
   if (tagName === "meta")
     name.push(...["name", "property", "http-equiv"]);
   for (const n of name) {
-    if (typeof props[n] !== "undefined") {
+    if (typeof props[n] !== "undefined" && !ArrayMetaProperties.findIndex((p) => !props[n].startsWith(p))) {
       return `${tagName}:${n}:${props[n]}`;
     }
   }
@@ -322,13 +339,9 @@ const DedupesTagsPlugin = (options) => {
               return;
             } else if (tag._e === dupedTag._e) {
               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.props[tag._s] = "";
-              }
             }
-            if (Object.keys(tag.props).length === 0 && !tag.children) {
+            const propCount = Object.keys(tag.props).length;
+            if ((propCount === 0 || propCount === 1 && typeof tag.props["data-h-key"] !== "undefined") && !tag.children) {
               delete deduping[dedupeKey];
               return;
             }
@@ -388,22 +401,18 @@ const DeprecatedTagAttrPlugin = () => {
   });
 };
 
-function hashCode(s) {
-  let h = 9;
-  for (let i = 0; i < s.length; )
-    h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
-  return ((h ^ h >>> 9) + 65536).toString(16).substring(1, 7).toLowerCase();
-}
-const HydrateStateFromSSRPlugin = () => {
+const IsBrowser = typeof window !== "undefined";
+
+const ProvideTagHashPlugin = () => {
   return defineHeadPlugin({
     hooks: {
       "tag:normalise": (ctx) => {
         const { tag, entry } = ctx;
-        if (!HasElementTags.includes(tag.tag) || typeof tag._d === "undefined")
+        if (!HasElementTags.includes(tag.tag))
           return;
-        tag._s = `data-h-${hashCode(tag._d)}`;
-        if (entry._m === "server" || tag.key)
-          tag.props[tag._s] = "";
+        const isBrowser = IsBrowser || getActiveHead()?.resolvedOptions?.document;
+        if (!isBrowser && entry._m === "server" && tag.key)
+          tag.props["data-h-key"] = tag._d;
       }
     }
   });
@@ -440,7 +449,7 @@ const EventHandlersPlugin = () => {
   };
   return defineHeadPlugin({
     hooks: {
-      "ssr:beforeRender": function(ctx) {
+      "ssr:render": function(ctx) {
         ctx.tags = ctx.tags.map((tag) => {
           tag.props = stripEventHandlers(tag).props;
           return tag;
@@ -458,7 +467,7 @@ const EventHandlersPlugin = () => {
         if (!ctx.tag._eventHandlers || !$el)
           return;
         Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
-          const sdeKey = `${ctx.tag._s || ctx.tag._p}:${k}`;
+          const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
           const eventName = k.slice(2).toLowerCase();
           const handler = value;
           $el?.addEventListener(eventName, handler);
@@ -476,8 +485,6 @@ function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
 
-const IsBrowser = typeof window !== "undefined";
-
 let activeHead;
 const setActiveHead = (head) => activeHead = head;
 const getActiveHead = () => activeHead;
@@ -584,8 +591,9 @@ function createHead(options = {}) {
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin(),
-    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
     EventHandlersPlugin(),
+    ProvideTagHashPlugin(),
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
     ...options?.plugins || []
   ];
   options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
@@ -662,4 +670,4 @@ function defineHeadPlugin(plugin) {
   return plugin;
 }
 
-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 };
+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 };

package/package.json

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