unhead 0.1.4 → 0.2.3

package/dist/index.cjs

@@ -26,10 +26,11 @@ const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
 
 function normaliseTag(tagName, input) {
   const tag = { tag: tagName, props: {} };
-  if (tagName === "title")
-    tag.children = String(input);
-  else
-    tag.props = normaliseProps({ ...input });
+  if (tagName === "title" || tagName === "titleTemplate") {
+    tag.children = input;
+    return tag;
+  }
+  tag.props = normaliseProps({ ...input });
   ["children", "innerHtml", "innerHTML"].forEach((key) => {
     if (typeof tag.props[key] !== "undefined") {
       tag.children = tag.props[key];
@@ -66,6 +67,146 @@ function normaliseProps(props) {
   return props;
 }
 
+function unpackToArray(input, options) {
+  const unpacked = [];
+  const kFn = options.resolveKeyData || ((ctx) => ctx.key);
+  const vFn = options.resolveValueData || ((ctx) => ctx.value);
+  for (const [k, v] of Object.entries(input)) {
+    unpacked.push(...(Array.isArray(v) ? v : [v]).map((i) => {
+      const ctx = { key: k, value: i };
+      const val = vFn(ctx);
+      if (typeof val === "object")
+        return unpackToArray(val, options);
+      if (Array.isArray(val))
+        return val;
+      return {
+        [typeof options.key === "function" ? options.key(ctx) : options.key]: kFn(ctx),
+        [typeof options.value === "function" ? options.value(ctx) : options.value]: val
+      };
+    }).flat());
+  }
+  return unpacked;
+}
+
+function unpackToString(value, options) {
+  return Object.entries(value).map(([key, value2]) => {
+    if (typeof value2 === "object")
+      value2 = unpackToString(value2, options);
+    if (options.resolve) {
+      const resolved = options.resolve({ key, value: value2 });
+      if (resolved)
+        return resolved;
+    }
+    if (typeof value2 === "number")
+      value2 = value2.toString();
+    if (typeof value2 === "string" && options.wrapValue) {
+      value2 = value2.replace(new RegExp(options.wrapValue, "g"), `\\${options.wrapValue}`);
+      value2 = `${options.wrapValue}${value2}${options.wrapValue}`;
+    }
+    return `${key}${options.keyValueSeparator || ""}${value2}`;
+  }).join(options.entrySeparator || "");
+}
+
+const MetaPackingSchema = {
+  robots: {
+    unpack: {
+      keyValueSeparator: ":"
+    }
+  },
+  contentSecurityPolicy: {
+    unpack: {
+      keyValueSeparator: " ",
+      entrySeparator: "; "
+    },
+    metaKey: "http-equiv"
+  },
+  fbAppId: {
+    keyValue: "fb:app_id",
+    metaKey: "property"
+  },
+  msapplicationTileImage: {
+    keyValue: "msapplication-TileImage"
+  },
+  msapplicationTileColor: {
+    keyValue: "msapplication-TileColor"
+  },
+  msapplicationConfig: {
+    keyValue: "msapplication-Config"
+  },
+  charset: {
+    metaKey: "charset"
+  },
+  contentType: {
+    metaKey: "http-equiv"
+  },
+  defaultStyle: {
+    metaKey: "http-equiv"
+  },
+  xUaCompatible: {
+    metaKey: "http-equiv"
+  },
+  refresh: {
+    metaKey: "http-equiv"
+  }
+};
+function resolveMetaKeyType(key) {
+  return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
+}
+
+function unpackMeta(input) {
+  return unpackToArray(input, {
+    key({ key }) {
+      return resolveMetaKeyType(key);
+    },
+    value({ key }) {
+      return key === "charset" ? "charset" : "content";
+    },
+    resolveKeyData({ key }) {
+      return MetaPackingSchema[key]?.keyValue || fixKeyCase(key);
+    },
+    resolveValueData({ value, key }) {
+      if (typeof value === "object") {
+        const definition = MetaPackingSchema[key];
+        if (key === "refresh")
+          return `${value.seconds};url=${value.url}`;
+        return unpackToString(
+          changeKeyCasingDeep(value),
+          {
+            entrySeparator: ", ",
+            keyValueSeparator: "=",
+            resolve({ value: value2, key: key2 }) {
+              if (typeof value2 === "boolean")
+                return `${key2}`;
+            },
+            ...definition?.unpack
+          }
+        );
+      }
+      return typeof value === "number" ? value.toString() : value;
+    }
+  });
+}
+
+const PropertyPrefixKeys = /^(og|twitter|fb)/;
+function fixKeyCase(key) {
+  key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  if (PropertyPrefixKeys.test(key)) {
+    key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
+  }
+  return key;
+}
+function changeKeyCasingDeep(input) {
+  if (Array.isArray(input)) {
+    return input.map((entry) => changeKeyCasingDeep(entry));
+  }
+  if (typeof input !== "object" || Array.isArray(input))
+    return input;
+  const output = {};
+  for (const [key, value] of Object.entries(input))
+    output[fixKeyCase(key)] = changeKeyCasingDeep(value);
+  return output;
+}
+
 const tagWeight = (tag) => {
   if (typeof tag.tagPriority === "number")
     return tag.tagPriority;
@@ -125,7 +266,7 @@ function resolveTitleTemplateFromTags(tags) {
     if (newTitle !== null) {
       tags[titleIdx].children = newTitle || tags[titleIdx].children;
     } else {
-      tags = tags.filter((_, i) => i !== titleIdx);
+      delete tags[titleIdx];
     }
   } else if (titleTemplateIdx !== -1) {
     const newTitle = renderTitleTemplate(
@@ -136,9 +277,10 @@ function resolveTitleTemplateFromTags(tags) {
       tags[titleTemplateIdx].tag = "title";
     }
   }
-  if (titleTemplateIdx !== -1)
-    tags = tags.filter((_, i) => i !== titleTemplateIdx);
-  return tags;
+  if (titleTemplateIdx !== -1) {
+    delete tags[titleTemplateIdx];
+  }
+  return tags.filter(Boolean);
 }
 
 const DedupesTagsPlugin = (options) => {
@@ -230,6 +372,23 @@ const TitleTemplatePlugin = () => {
   });
 };
 
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+
+const DeprecatedTagAttrPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        if (tag.props.body) {
+          tag.tagPosition = "bodyClose";
+          delete tag.props.body;
+        }
+      }
+    }
+  });
+};
+
 function hashCode(s) {
   let h = 9;
   for (let i = 0; i < s.length; )
@@ -254,6 +413,10 @@ const HydratesStatePlugin = () => {
   });
 };
 
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
 const IsClient = typeof window !== "undefined";
 
 exports.activeHead = void 0;
@@ -266,26 +429,29 @@ function useHead(input, options = {}) {
   const head = getActiveHead();
   head.push(input, options);
 }
-function useServerHead(input, options = {}) {
-  useHead(input, { ...options, mode: "server" });
-}
-const useTitle = (title) => {
+const useTagTitle = (title) => {
   useHead({ title });
 };
-const useMeta = (meta) => {
-  useHead({ meta: [meta] });
+const useTagBase = (base) => {
+  useHead({ base });
 };
-const useLink = (link) => {
-  useHead({ link: [link] });
+const useTagMeta = (meta) => {
+  useHead({ meta: asArray(meta) });
 };
-const useScript = (script) => {
-  useHead({ script: [script] });
+const useTagMetaFlat = (meta) => {
+  useTagMeta(unpackMeta(meta));
 };
-const useStyle = (style) => {
-  useHead({ style: [style] });
+const useTagLink = (link) => {
+  useHead({ link: asArray(link) });
 };
-const useBase = (base) => {
-  useHead({ base });
+const useTagScript = (script) => {
+  useHead({ script: asArray(script) });
+};
+const useTagStyle = (style) => {
+  useHead({ style: asArray(style) });
+};
+const useTagNoscript = (noscript) => {
+  useHead({ noscript: asArray(noscript) });
 };
 const useHtmlAttrs = (attrs) => {
   useHead({ htmlAttrs: attrs });
@@ -296,13 +462,43 @@ const useBodyAttrs = (attrs) => {
 const useTitleTemplate = (titleTemplate) => {
   useHead({ titleTemplate });
 };
-const useNoscript = (noscript) => {
-  useHead({ noscript: [noscript] });
-};
 
-function asArray(value) {
-  return Array.isArray(value) ? value : [value];
+function useServerHead(input, options = {}) {
+  useHead(input, { ...options, mode: "server" });
 }
+const useServerTagTitle = (title) => {
+  useServerHead({ title });
+};
+const useServerTagBase = (base) => {
+  useServerHead({ base });
+};
+const useServerTagMeta = (meta) => {
+  useServerHead({ meta: asArray(meta) });
+};
+const useServerTagMetaFlat = (meta) => {
+  useServerTagMeta(unpackMeta(meta));
+};
+const useServerTagLink = (link) => {
+  useServerHead({ link: asArray(link) });
+};
+const useServerTagScript = (script) => {
+  useServerHead({ script: asArray(script) });
+};
+const useServerTagStyle = (style) => {
+  useServerHead({ style: asArray(style) });
+};
+const useServerTagNoscript = (noscript) => {
+  useServerHead({ noscript: asArray(noscript) });
+};
+const useServerHtmlAttrs = (attrs) => {
+  useServerHead({ htmlAttrs: attrs });
+};
+const useServerBodyAttrs = (attrs) => {
+  useServerHead({ bodyAttrs: attrs });
+};
+const useServerTitleTemplate = (titleTemplate) => {
+  useServerHead({ titleTemplate });
+};
 
 function normaliseEntryTags(e) {
   return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
@@ -314,7 +510,7 @@ function normaliseEntryTags(e) {
   });
 }
 
-async function createHead(options = {}) {
+function createHead(options = {}) {
   let entries = [];
   let _sde = {};
   let entryId = 0;
@@ -322,12 +518,14 @@ async function createHead(options = {}) {
   if (options.hooks)
     hooks.addHooks(options.hooks);
   const plugins = [
+    DeprecatedTagAttrPlugin(),
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin()
   ];
   plugins.push(...options.plugins || []);
   plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
+  const triggerUpdate = () => hooks.callHook("entries:updated", head);
   const head = {
     _removeQueuedSideEffect(key) {
       delete _sde[key];
@@ -350,28 +548,29 @@ async function createHead(options = {}) {
         _sde: {},
         ...options2
       });
-      hooks.callHook("entries:updated", head);
+      triggerUpdate();
+      const queueSideEffects = (e) => {
+        _sde = { ..._sde, ...e._sde || {} };
+        e._sde = {};
+        triggerUpdate();
+      };
       return {
         dispose() {
           entries = entries.filter((e) => {
             if (e._i !== _i)
               return true;
-            _sde = { ..._sde, ...e._sde || {} };
-            e._sde = {};
+            queueSideEffects(e);
             return false;
           });
-          hooks.callHook("entries:updated", head);
         },
         patch(input2) {
           entries = entries.map((e) => {
             if (e._i === _i) {
-              _sde = { ..._sde, ...e._sde || {} };
-              e._sde = {};
+              queueSideEffects(e);
               e.input = e._i === _i ? input2 : e.input;
             }
             return e;
           });
-          hooks.callHook("entries:updated", head);
         }
       };
     },
@@ -389,16 +588,13 @@ async function createHead(options = {}) {
       return resolveCtx.tags;
     }
   };
-  await head.hooks.callHook("init", head);
+  head.hooks.callHook("init", head);
   setActiveHead(head);
   return head;
 }
 
-function defineHeadPlugin(plugin) {
-  return plugin;
-}
-
 exports.DedupesTagsPlugin = DedupesTagsPlugin;
+exports.DeprecatedTagAttrPlugin = DeprecatedTagAttrPlugin;
 exports.HydratesStatePlugin = HydratesStatePlugin;
 exports.SortTagsPlugin = SortTagsPlugin;
 exports.TitleTemplatePlugin = TitleTemplatePlugin;
@@ -408,15 +604,27 @@ exports.defineHeadPlugin = defineHeadPlugin;
 exports.getActiveHead = getActiveHead;
 exports.normaliseEntryTags = normaliseEntryTags;
 exports.setActiveHead = setActiveHead;
-exports.useBase = useBase;
 exports.useBodyAttrs = useBodyAttrs;
 exports.useHead = useHead;
 exports.useHtmlAttrs = useHtmlAttrs;
-exports.useLink = useLink;
-exports.useMeta = useMeta;
-exports.useNoscript = useNoscript;
-exports.useScript = useScript;
+exports.useServerBodyAttrs = useServerBodyAttrs;
 exports.useServerHead = useServerHead;
-exports.useStyle = useStyle;
-exports.useTitle = useTitle;
+exports.useServerHtmlAttrs = useServerHtmlAttrs;
+exports.useServerTagBase = useServerTagBase;
+exports.useServerTagLink = useServerTagLink;
+exports.useServerTagMeta = useServerTagMeta;
+exports.useServerTagMetaFlat = useServerTagMetaFlat;
+exports.useServerTagNoscript = useServerTagNoscript;
+exports.useServerTagScript = useServerTagScript;
+exports.useServerTagStyle = useServerTagStyle;
+exports.useServerTagTitle = useServerTagTitle;
+exports.useServerTitleTemplate = useServerTitleTemplate;
+exports.useTagBase = useTagBase;
+exports.useTagLink = useTagLink;
+exports.useTagMeta = useTagMeta;
+exports.useTagMetaFlat = useTagMetaFlat;
+exports.useTagNoscript = useTagNoscript;
+exports.useTagScript = useTagScript;
+exports.useTagStyle = useTagStyle;
+exports.useTagTitle = useTagTitle;
 exports.useTitleTemplate = useTitleTemplate;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _unhead_schema from '@unhead/schema';
-import { Head, HeadEntryOptions, Meta, Link, Script, Style, Base, HtmlAttributes, BodyAttributes, Noscript, HeadClient, CreateHeadOptions, HeadPlugin, HeadEntry, HeadTag } from '@unhead/schema';
+import { Head, HeadEntryOptions, ActiveHeadEntry, Title, Base, Meta, MetaFlatInput, Link, Script, Style, Noscript, HtmlAttributes, BodyAttributes, TitleTemplate, HeadClient, CreateHeadOptions, HeadPlugin, HeadEntry, HeadTag } from '@unhead/schema';
 
 interface DedupesTagsPluginOptions {
     dedupeKeys?: string[];
@@ -10,32 +10,47 @@ declare const SortTagsPlugin: () => _unhead_schema.HeadPlugin;
 
 declare const TitleTemplatePlugin: () => _unhead_schema.HeadPlugin;
 
+declare const DeprecatedTagAttrPlugin: () => _unhead_schema.HeadPlugin;
+
 declare const HydratesStatePlugin: () => _unhead_schema.HeadPlugin;
 
-declare function useHead<T extends Head>(input: T, options?: HeadEntryOptions): void;
-declare function useServerHead<T extends Head>(input: T, options?: HeadEntryOptions): void;
-declare const useTitle: (title: string) => void;
-declare const useMeta: (meta: Meta) => void;
-declare const useLink: (link: Link) => void;
-declare const useScript: (script: Script) => void;
-declare const useStyle: (style: Style) => void;
-declare const useBase: (base: Base) => void;
+declare type Arrayable<T> = T | Array<T>;
+declare function asArray<T>(value: Arrayable<T>): T[];
+
+declare function useHead<T extends Head>(input: T, options?: HeadEntryOptions): ActiveHeadEntry<T> | void;
+declare const useTagTitle: (title: Title) => void;
+declare const useTagBase: (base: Base) => void;
+declare const useTagMeta: (meta: Arrayable<Meta>) => void;
+declare const useTagMetaFlat: (meta: MetaFlatInput) => void;
+declare const useTagLink: (link: Arrayable<Link>) => void;
+declare const useTagScript: (script: Arrayable<Script>) => void;
+declare const useTagStyle: (style: Arrayable<Style>) => void;
+declare const useTagNoscript: (noscript: Arrayable<Noscript>) => void;
 declare const useHtmlAttrs: (attrs: HtmlAttributes) => void;
 declare const useBodyAttrs: (attrs: BodyAttributes) => void;
-declare const useTitleTemplate: (titleTemplate: string) => void;
-declare const useNoscript: (noscript: Noscript) => void;
+declare const useTitleTemplate: (titleTemplate: TitleTemplate) => void;
+
+declare function useServerHead<T extends Head>(input: T, options?: HeadEntryOptions): ActiveHeadEntry<T> | void;
+declare const useServerTagTitle: (title: Title) => void;
+declare const useServerTagBase: (base: Base) => void;
+declare const useServerTagMeta: (meta: Arrayable<Meta>) => void;
+declare const useServerTagMetaFlat: (meta: MetaFlatInput) => void;
+declare const useServerTagLink: (link: Arrayable<Link>) => void;
+declare const useServerTagScript: (script: Arrayable<Script>) => void;
+declare const useServerTagStyle: (style: Arrayable<Style>) => void;
+declare const useServerTagNoscript: (noscript: Arrayable<Noscript>) => void;
+declare const useServerHtmlAttrs: (attrs: HtmlAttributes) => void;
+declare const useServerBodyAttrs: (attrs: BodyAttributes) => void;
+declare const useServerTitleTemplate: (titleTemplate: TitleTemplate) => void;
 
 declare let activeHead: HeadClient<any> | undefined;
 declare const setActiveHead: <T extends HeadClient<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>>(head: T | undefined) => T | undefined;
 declare const getActiveHead: <T extends HeadClient<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>>() => T;
 
-declare function createHead<T extends {} = Head>(options?: CreateHeadOptions): Promise<HeadClient<T>>;
+declare function createHead<T extends {} = Head>(options?: CreateHeadOptions): HeadClient<T>;
 
 declare function defineHeadPlugin(plugin: HeadPlugin): HeadPlugin;
 
 declare function normaliseEntryTags<T extends {} = Head>(e: HeadEntry<T>): HeadTag[];
 
-declare type Arrayable<T> = T | Array<T>;
-declare function asArray<T>(value: Arrayable<T>): T[];
-
-export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, HydratesStatePlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { Arrayable, DedupesTagsPlugin, DedupesTagsPluginOptions, DeprecatedTagAttrPlugin, HydratesStatePlugin, 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

@@ -24,10 +24,11 @@ const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
 
 function normaliseTag(tagName, input) {
   const tag = { tag: tagName, props: {} };
-  if (tagName === "title")
-    tag.children = String(input);
-  else
-    tag.props = normaliseProps({ ...input });
+  if (tagName === "title" || tagName === "titleTemplate") {
+    tag.children = input;
+    return tag;
+  }
+  tag.props = normaliseProps({ ...input });
   ["children", "innerHtml", "innerHTML"].forEach((key) => {
     if (typeof tag.props[key] !== "undefined") {
       tag.children = tag.props[key];
@@ -64,6 +65,146 @@ function normaliseProps(props) {
   return props;
 }
 
+function unpackToArray(input, options) {
+  const unpacked = [];
+  const kFn = options.resolveKeyData || ((ctx) => ctx.key);
+  const vFn = options.resolveValueData || ((ctx) => ctx.value);
+  for (const [k, v] of Object.entries(input)) {
+    unpacked.push(...(Array.isArray(v) ? v : [v]).map((i) => {
+      const ctx = { key: k, value: i };
+      const val = vFn(ctx);
+      if (typeof val === "object")
+        return unpackToArray(val, options);
+      if (Array.isArray(val))
+        return val;
+      return {
+        [typeof options.key === "function" ? options.key(ctx) : options.key]: kFn(ctx),
+        [typeof options.value === "function" ? options.value(ctx) : options.value]: val
+      };
+    }).flat());
+  }
+  return unpacked;
+}
+
+function unpackToString(value, options) {
+  return Object.entries(value).map(([key, value2]) => {
+    if (typeof value2 === "object")
+      value2 = unpackToString(value2, options);
+    if (options.resolve) {
+      const resolved = options.resolve({ key, value: value2 });
+      if (resolved)
+        return resolved;
+    }
+    if (typeof value2 === "number")
+      value2 = value2.toString();
+    if (typeof value2 === "string" && options.wrapValue) {
+      value2 = value2.replace(new RegExp(options.wrapValue, "g"), `\\${options.wrapValue}`);
+      value2 = `${options.wrapValue}${value2}${options.wrapValue}`;
+    }
+    return `${key}${options.keyValueSeparator || ""}${value2}`;
+  }).join(options.entrySeparator || "");
+}
+
+const MetaPackingSchema = {
+  robots: {
+    unpack: {
+      keyValueSeparator: ":"
+    }
+  },
+  contentSecurityPolicy: {
+    unpack: {
+      keyValueSeparator: " ",
+      entrySeparator: "; "
+    },
+    metaKey: "http-equiv"
+  },
+  fbAppId: {
+    keyValue: "fb:app_id",
+    metaKey: "property"
+  },
+  msapplicationTileImage: {
+    keyValue: "msapplication-TileImage"
+  },
+  msapplicationTileColor: {
+    keyValue: "msapplication-TileColor"
+  },
+  msapplicationConfig: {
+    keyValue: "msapplication-Config"
+  },
+  charset: {
+    metaKey: "charset"
+  },
+  contentType: {
+    metaKey: "http-equiv"
+  },
+  defaultStyle: {
+    metaKey: "http-equiv"
+  },
+  xUaCompatible: {
+    metaKey: "http-equiv"
+  },
+  refresh: {
+    metaKey: "http-equiv"
+  }
+};
+function resolveMetaKeyType(key) {
+  return PropertyPrefixKeys.test(key) ? "property" : MetaPackingSchema[key]?.metaKey || "name";
+}
+
+function unpackMeta(input) {
+  return unpackToArray(input, {
+    key({ key }) {
+      return resolveMetaKeyType(key);
+    },
+    value({ key }) {
+      return key === "charset" ? "charset" : "content";
+    },
+    resolveKeyData({ key }) {
+      return MetaPackingSchema[key]?.keyValue || fixKeyCase(key);
+    },
+    resolveValueData({ value, key }) {
+      if (typeof value === "object") {
+        const definition = MetaPackingSchema[key];
+        if (key === "refresh")
+          return `${value.seconds};url=${value.url}`;
+        return unpackToString(
+          changeKeyCasingDeep(value),
+          {
+            entrySeparator: ", ",
+            keyValueSeparator: "=",
+            resolve({ value: value2, key: key2 }) {
+              if (typeof value2 === "boolean")
+                return `${key2}`;
+            },
+            ...definition?.unpack
+          }
+        );
+      }
+      return typeof value === "number" ? value.toString() : value;
+    }
+  });
+}
+
+const PropertyPrefixKeys = /^(og|twitter|fb)/;
+function fixKeyCase(key) {
+  key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  if (PropertyPrefixKeys.test(key)) {
+    key = key.replace("secure-url", "secure_url").replace(/-/g, ":");
+  }
+  return key;
+}
+function changeKeyCasingDeep(input) {
+  if (Array.isArray(input)) {
+    return input.map((entry) => changeKeyCasingDeep(entry));
+  }
+  if (typeof input !== "object" || Array.isArray(input))
+    return input;
+  const output = {};
+  for (const [key, value] of Object.entries(input))
+    output[fixKeyCase(key)] = changeKeyCasingDeep(value);
+  return output;
+}
+
 const tagWeight = (tag) => {
   if (typeof tag.tagPriority === "number")
     return tag.tagPriority;
@@ -123,7 +264,7 @@ function resolveTitleTemplateFromTags(tags) {
     if (newTitle !== null) {
       tags[titleIdx].children = newTitle || tags[titleIdx].children;
     } else {
-      tags = tags.filter((_, i) => i !== titleIdx);
+      delete tags[titleIdx];
     }
   } else if (titleTemplateIdx !== -1) {
     const newTitle = renderTitleTemplate(
@@ -134,9 +275,10 @@ function resolveTitleTemplateFromTags(tags) {
       tags[titleTemplateIdx].tag = "title";
     }
   }
-  if (titleTemplateIdx !== -1)
-    tags = tags.filter((_, i) => i !== titleTemplateIdx);
-  return tags;
+  if (titleTemplateIdx !== -1) {
+    delete tags[titleTemplateIdx];
+  }
+  return tags.filter(Boolean);
 }
 
 const DedupesTagsPlugin = (options) => {
@@ -228,6 +370,23 @@ const TitleTemplatePlugin = () => {
   });
 };
 
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+
+const DeprecatedTagAttrPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        if (tag.props.body) {
+          tag.tagPosition = "bodyClose";
+          delete tag.props.body;
+        }
+      }
+    }
+  });
+};
+
 function hashCode(s) {
   let h = 9;
   for (let i = 0; i < s.length; )
@@ -252,6 +411,10 @@ const HydratesStatePlugin = () => {
   });
 };
 
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
 const IsClient = typeof window !== "undefined";
 
 let activeHead;
@@ -264,26 +427,29 @@ function useHead(input, options = {}) {
   const head = getActiveHead();
   head.push(input, options);
 }
-function useServerHead(input, options = {}) {
-  useHead(input, { ...options, mode: "server" });
-}
-const useTitle = (title) => {
+const useTagTitle = (title) => {
   useHead({ title });
 };
-const useMeta = (meta) => {
-  useHead({ meta: [meta] });
+const useTagBase = (base) => {
+  useHead({ base });
 };
-const useLink = (link) => {
-  useHead({ link: [link] });
+const useTagMeta = (meta) => {
+  useHead({ meta: asArray(meta) });
 };
-const useScript = (script) => {
-  useHead({ script: [script] });
+const useTagMetaFlat = (meta) => {
+  useTagMeta(unpackMeta(meta));
 };
-const useStyle = (style) => {
-  useHead({ style: [style] });
+const useTagLink = (link) => {
+  useHead({ link: asArray(link) });
 };
-const useBase = (base) => {
-  useHead({ base });
+const useTagScript = (script) => {
+  useHead({ script: asArray(script) });
+};
+const useTagStyle = (style) => {
+  useHead({ style: asArray(style) });
+};
+const useTagNoscript = (noscript) => {
+  useHead({ noscript: asArray(noscript) });
 };
 const useHtmlAttrs = (attrs) => {
   useHead({ htmlAttrs: attrs });
@@ -294,13 +460,43 @@ const useBodyAttrs = (attrs) => {
 const useTitleTemplate = (titleTemplate) => {
   useHead({ titleTemplate });
 };
-const useNoscript = (noscript) => {
-  useHead({ noscript: [noscript] });
-};
 
-function asArray(value) {
-  return Array.isArray(value) ? value : [value];
+function useServerHead(input, options = {}) {
+  useHead(input, { ...options, mode: "server" });
 }
+const useServerTagTitle = (title) => {
+  useServerHead({ title });
+};
+const useServerTagBase = (base) => {
+  useServerHead({ base });
+};
+const useServerTagMeta = (meta) => {
+  useServerHead({ meta: asArray(meta) });
+};
+const useServerTagMetaFlat = (meta) => {
+  useServerTagMeta(unpackMeta(meta));
+};
+const useServerTagLink = (link) => {
+  useServerHead({ link: asArray(link) });
+};
+const useServerTagScript = (script) => {
+  useServerHead({ script: asArray(script) });
+};
+const useServerTagStyle = (style) => {
+  useServerHead({ style: asArray(style) });
+};
+const useServerTagNoscript = (noscript) => {
+  useServerHead({ noscript: asArray(noscript) });
+};
+const useServerHtmlAttrs = (attrs) => {
+  useServerHead({ htmlAttrs: attrs });
+};
+const useServerBodyAttrs = (attrs) => {
+  useServerHead({ bodyAttrs: attrs });
+};
+const useServerTitleTemplate = (titleTemplate) => {
+  useServerHead({ titleTemplate });
+};
 
 function normaliseEntryTags(e) {
   return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
@@ -312,7 +508,7 @@ function normaliseEntryTags(e) {
   });
 }
 
-async function createHead(options = {}) {
+function createHead(options = {}) {
   let entries = [];
   let _sde = {};
   let entryId = 0;
@@ -320,12 +516,14 @@ async function createHead(options = {}) {
   if (options.hooks)
     hooks.addHooks(options.hooks);
   const plugins = [
+    DeprecatedTagAttrPlugin(),
     DedupesTagsPlugin(),
     SortTagsPlugin(),
     TitleTemplatePlugin()
   ];
   plugins.push(...options.plugins || []);
   plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
+  const triggerUpdate = () => hooks.callHook("entries:updated", head);
   const head = {
     _removeQueuedSideEffect(key) {
       delete _sde[key];
@@ -348,28 +546,29 @@ async function createHead(options = {}) {
         _sde: {},
         ...options2
       });
-      hooks.callHook("entries:updated", head);
+      triggerUpdate();
+      const queueSideEffects = (e) => {
+        _sde = { ..._sde, ...e._sde || {} };
+        e._sde = {};
+        triggerUpdate();
+      };
       return {
         dispose() {
           entries = entries.filter((e) => {
             if (e._i !== _i)
               return true;
-            _sde = { ..._sde, ...e._sde || {} };
-            e._sde = {};
+            queueSideEffects(e);
             return false;
           });
-          hooks.callHook("entries:updated", head);
         },
         patch(input2) {
           entries = entries.map((e) => {
             if (e._i === _i) {
-              _sde = { ..._sde, ...e._sde || {} };
-              e._sde = {};
+              queueSideEffects(e);
               e.input = e._i === _i ? input2 : e.input;
             }
             return e;
           });
-          hooks.callHook("entries:updated", head);
         }
       };
     },
@@ -387,13 +586,9 @@ async function createHead(options = {}) {
       return resolveCtx.tags;
     }
   };
-  await head.hooks.callHook("init", head);
+  head.hooks.callHook("init", head);
   setActiveHead(head);
   return head;
 }
 
-function defineHeadPlugin(plugin) {
-  return plugin;
-}
-
-export { DedupesTagsPlugin, HydratesStatePlugin, SortTagsPlugin, TitleTemplatePlugin, activeHead, asArray, createHead, defineHeadPlugin, getActiveHead, normaliseEntryTags, setActiveHead, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useServerHead, useStyle, useTitle, useTitleTemplate };
+export { DedupesTagsPlugin, DeprecatedTagAttrPlugin, HydratesStatePlugin, 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.1.4",
+  "version": "0.2.3",
   "packageManager": "pnpm@7.14.0",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
@@ -30,11 +30,11 @@
     "dist"
   ],
   "dependencies": {
-    "@unhead/schema": "0.1.4",
+    "@unhead/schema": "0.2.3",
     "hookable": "^5.4.1"
   },
   "devDependencies": {
-    "zhead": "1.0.0-beta.5"
+    "zhead": "1.0.0-beta.10"
   },
   "scripts": {
     "build": "unbuild .",