unhead 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,429 @@
+'use strict';
+
+const hookable = require('hookable');
+
+function normaliseTag$1(tagName, input, options = {}) {
+  const tag = { tag: tagName, props: {} };
+  if (tagName === "title")
+    tag.children = String(input);
+  else
+    tag.props = normaliseProps({ ...input });
+  ["children", ...options?.childrenKeys || []].forEach((key) => {
+    if (typeof tag.props[key] !== "undefined") {
+      tag.children = tag.props[key];
+      delete tag.props[key];
+    }
+  });
+  return tag;
+}
+function normaliseProps(props) {
+  for (const k in props) {
+    if (String(props[k]) === "true") {
+      props[k] = "";
+    } else if (String(props[k]) === "false") {
+      delete props[k];
+    }
+  }
+  return props;
+}
+const HasElementTags = [
+  "base",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+const ValidHeadTags = [
+  "title",
+  "titleTemplate",
+  "base",
+  "htmlAttrs",
+  "bodyAttrs",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+
+const sortCriticalTags = (aTag, bTag) => {
+  const tagWeight = (tag) => {
+    switch (tag.tag) {
+      case "base":
+        return -1;
+      case "title":
+        return 1;
+      case "meta":
+        if (tag.props.charset)
+          return -2;
+        if (tag.props["http-equiv"] === "content-security-policy")
+          return 0;
+        return 10;
+      default:
+        return 10;
+    }
+  };
+  return tagWeight(aTag) - tagWeight(bTag);
+};
+
+function tagDedupeKey(tag) {
+  const { props, tag: tagName } = tag;
+  if (["base", "title", "titleTemplate", "bodyAttrs", "htmlAttrs"].includes(tagName))
+    return tagName;
+  if (tagName === "link" && props.rel === "canonical")
+    return "canonical";
+  if (props.charset)
+    return "charset";
+  const name = ["id"];
+  if (tagName === "meta")
+    name.push(...["name", "property", "http-equiv"]);
+  for (const n of name) {
+    if (typeof props[n] !== "undefined") {
+      return `${tagName}:${n}:${props[n]}`;
+    }
+  }
+  return false;
+}
+
+const renderTitleTemplate = (template, title) => {
+  if (template == null)
+    return title || null;
+  if (typeof template === "function")
+    return template(title);
+  return template.replace("%s", title ?? "");
+};
+function resolveTitleTemplateFromTags(tags) {
+  const titleTemplateIdx = tags.findIndex((i) => i.tag === "titleTemplate");
+  const titleIdx = tags.findIndex((i) => i.tag === "title");
+  if (titleIdx !== -1 && titleTemplateIdx !== -1) {
+    const newTitle = renderTitleTemplate(
+      tags[titleTemplateIdx].children,
+      tags[titleIdx].children
+    );
+    if (newTitle !== null) {
+      tags[titleIdx].children = newTitle || tags[titleIdx].children;
+    } else {
+      tags = tags.filter((_, i) => i !== titleIdx);
+    }
+  } else if (titleTemplateIdx !== -1) {
+    const newTitle = renderTitleTemplate(
+      tags[titleTemplateIdx].children
+    );
+    if (newTitle !== null) {
+      tags[titleTemplateIdx].children = newTitle;
+      tags[titleTemplateIdx].tag = "title";
+    }
+  }
+  if (titleTemplateIdx !== -1)
+    tags = tags.filter((_, i) => i !== titleTemplateIdx);
+  return tags;
+}
+
+const DedupesTagsPlugin = (options) => {
+  options = options || {};
+  const dedupeKeys = options.dedupeKeys || ["hid", "vmid", "key"];
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        dedupeKeys.forEach((key) => {
+          if (tag.props[key]) {
+            tag.key = tag.props[key];
+            delete tag.props[key];
+          }
+        });
+        const dedupe = tag.key ? `${tag.tag}:${tag.key}` : tagDedupeKey(tag);
+        if (dedupe)
+          tag._d = dedupe;
+      },
+      "tags:resolve": function(ctx) {
+        const deduping = {};
+        ctx.tags.forEach((tag, i) => {
+          let dedupeKey = tag._d || tag._p || i;
+          const dupedTag = deduping[dedupeKey];
+          if (dupedTag) {
+            let strategy = tag?.tagDuplicateStrategy;
+            if (!strategy && (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs"))
+              strategy = "merge";
+            if (strategy === "merge") {
+              const oldProps = dupedTag.props;
+              ["class", "style"].forEach((key) => {
+                if (tag.props[key] && oldProps[key])
+                  tag.props[key] = `${oldProps[key]} ${tag.props[key]}`;
+              });
+              deduping[dedupeKey].props = {
+                ...oldProps,
+                ...tag.props
+              };
+              return;
+            } else if (tag._e === dupedTag._e) {
+              dedupeKey = `${dedupeKey}:entry(${tag._e}:${tag._p})`;
+              tag._d = dedupeKey;
+            } else {
+              tag._p = dupedTag._p;
+            }
+            if (Object.keys(tag.props).length === 0 && !tag.children) {
+              delete deduping[dedupeKey];
+              return;
+            }
+          }
+          deduping[dedupeKey] = tag;
+        });
+        ctx.tags = Object.values(deduping);
+      }
+    }
+  });
+};
+
+const SortTagsPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tags:resolve": (ctx) => {
+        const tagIndexForKey = (key) => ctx.tags.find((tag) => tag._d === key)?._p;
+        for (const tag of ctx.tags) {
+          if (!tag?.tagPriority)
+            continue;
+          if (typeof tag.tagPriority === "number") {
+            tag._p = tag.tagPriority;
+            continue;
+          }
+          const modifiers = [{ prefix: "before:", offset: -1 }, { prefix: "after:", offset: 1 }];
+          for (const { prefix, offset } of modifiers) {
+            if (tag.tagPriority.startsWith(prefix)) {
+              const key = tag.tagPriority.replace(prefix, "");
+              const index = tagIndexForKey(key);
+              if (typeof index !== "undefined")
+                tag._p = index + offset;
+            }
+          }
+        }
+        ctx.tags.sort((a, b) => a._p - b._p).sort(sortCriticalTags);
+      }
+    }
+  });
+};
+
+const TitleTemplatePlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tags:resolve": (ctx) => {
+        ctx.tags = resolveTitleTemplateFromTags(ctx.tags);
+      }
+    }
+  });
+};
+
+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 HydratesStatePlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": (ctx) => {
+        const { tag, entry } = ctx;
+        if (!HasElementTags.includes(tag.tag))
+          return;
+        if (typeof tag._d === "undefined" && entry._m === "server")
+          return;
+        const hasChildren = tag.children && tag.children.length > 0;
+        tag._s = `data-h-${hashCode(tag._d || tag.tag + (hasChildren ? tag.children : JSON.stringify(tag.props)))}`;
+        tag.props[tag._s] = "";
+      }
+    }
+  });
+};
+
+const IsClient = 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();
+  head.push(input, options);
+}
+function useServerHead(input, options = {}) {
+  useHead(input, { ...options, mode: "server" });
+}
+const useTitle = (title) => {
+  useHead({ title });
+};
+const useMeta = (meta) => {
+  useHead({ meta: [meta] });
+};
+const useLink = (link) => {
+  useHead({ link: [link] });
+};
+const useScript = (script) => {
+  useHead({ script: [script] });
+};
+const useStyle = (style) => {
+  useHead({ style: [style] });
+};
+const useBase = (base) => {
+  useHead({ base });
+};
+const useHtmlAttrs = (attrs) => {
+  useHead({ htmlAttrs: attrs });
+};
+const useBodyAttrs = (attrs) => {
+  useHead({ bodyAttrs: attrs });
+};
+const useTitleTemplate = (titleTemplate) => {
+  useHead({ titleTemplate });
+};
+const useNoscript = (noscript) => {
+  useHead({ noscript: [noscript] });
+};
+
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
+
+function normaliseTag(tagName, input, entry) {
+  const tag = normaliseTag$1(tagName, input, { childrenKeys: ["innerHTML", "textContent"] });
+  tag._e = entry._i;
+  Object.keys(tag.props).filter((k) => TagConfigKeys.includes(k)).forEach((k) => {
+    tag[k] = tag.props[k];
+    delete tag.props[k];
+  });
+  if (typeof tag.props.class === "object" && !Array.isArray(tag.props.class)) {
+    tag.props.class = Object.keys(tag.props.class).filter((k) => tag.props.class[k]);
+  }
+  if (Array.isArray(tag.props.class))
+    tag.props.class = tag.props.class.join(" ");
+  if (tag.props.content && Array.isArray(tag.props.content)) {
+    return tag.props.content.map((v, i) => {
+      const newTag = { ...tag, props: { ...tag.props } };
+      newTag.props.content = v;
+      newTag.key = `${tag.props.name || tag.props.property}:${i}`;
+      return newTag;
+    });
+  }
+  return tag;
+}
+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, e)))
+  ).flat(3).map((t, i) => {
+    t._p = (e._i << 8) + i++;
+    return t;
+  });
+}
+
+async function createHead(options = {}) {
+  let entries = [];
+  let _sde = {};
+  let entryId = 0;
+  const hooks = hookable.createHooks();
+  if (options.hooks)
+    hooks.addHooks(options.hooks);
+  const plugins = [
+    DedupesTagsPlugin(),
+    SortTagsPlugin(),
+    TitleTemplatePlugin()
+  ];
+  plugins.push(...options.plugins || []);
+  plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
+  const head = {
+    _removeQueuedSideEffect(key) {
+      delete _sde[key];
+    },
+    _flushQueuedSideEffects() {
+      Object.values(_sde).forEach((fn) => fn());
+      _sde = {};
+    },
+    headEntries() {
+      return entries;
+    },
+    get hooks() {
+      return hooks;
+    },
+    push(input, options2) {
+      const _i = entryId++;
+      entries.push({
+        _i,
+        input,
+        _sde: {},
+        ...options2
+      });
+      hooks.callHook("entries:updated", head);
+      return {
+        dispose() {
+          entries = entries.filter((e) => {
+            if (e._i !== _i)
+              return true;
+            _sde = { ..._sde, ...e._sde || {} };
+            e._sde = {};
+            return false;
+          });
+          hooks.callHook("entries:updated", head);
+        },
+        patch(input2) {
+          entries = entries.map((e) => {
+            if (e._i === _i) {
+              _sde = { ..._sde, ...e._sde || {} };
+              e._sde = {};
+              e.input = e._i === _i ? input2 : e.input;
+            }
+            return e;
+          });
+          hooks.callHook("entries:updated", head);
+        }
+      };
+    },
+    async resolveTags() {
+      const resolveCtx = { tags: [], entries: [...entries] };
+      await hooks.callHook("entries:resolve", resolveCtx);
+      for (const entry of resolveCtx.entries) {
+        for (const tag of normaliseEntryTags(entry)) {
+          const tagCtx = { tag, entry };
+          await hooks.callHook("tag:normalise", tagCtx);
+          resolveCtx.tags.push(tagCtx.tag);
+        }
+      }
+      await hooks.callHook("tags:resolve", resolveCtx);
+      return resolveCtx.tags;
+    }
+  };
+  await head.hooks.callHook("init", head);
+  setActiveHead(head);
+  return head;
+}
+
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+
+exports.DedupesTagsPlugin = DedupesTagsPlugin;
+exports.HydratesStatePlugin = HydratesStatePlugin;
+exports.SortTagsPlugin = SortTagsPlugin;
+exports.TagConfigKeys = TagConfigKeys;
+exports.TitleTemplatePlugin = TitleTemplatePlugin;
+exports.asArray = asArray;
+exports.createHead = createHead;
+exports.defineHeadPlugin = defineHeadPlugin;
+exports.getActiveHead = getActiveHead;
+exports.normaliseEntryTags = normaliseEntryTags;
+exports.normaliseTag = normaliseTag;
+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.useServerHead = useServerHead;
+exports.useStyle = useStyle;
+exports.useTitle = useTitle;
+exports.useTitleTemplate = useTitleTemplate;

package/dist/index.d.ts

@@ -29,7 +29,7 @@ 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): HeadClient<T>;
+declare function createHead<T extends {} = Head>(options?: CreateHeadOptions): Promise<HeadClient<T>>;
 
 declare function defineHeadPlugin(plugin: HeadPlugin): HeadPlugin;
 

package/dist/index.mjs

@@ -317,7 +317,7 @@ function normaliseEntryTags(e) {
   });
 }
 
-function createHead(options = {}) {
+async function createHead(options = {}) {
   let entries = [];
   let _sde = {};
   let entryId = 0;
@@ -353,6 +353,7 @@ function createHead(options = {}) {
         _sde: {},
         ...options2
       });
+      hooks.callHook("entries:updated", head);
       return {
         dispose() {
           entries = entries.filter((e) => {
@@ -362,6 +363,7 @@ function createHead(options = {}) {
             e._sde = {};
             return false;
           });
+          hooks.callHook("entries:updated", head);
         },
         patch(input2) {
           entries = entries.map((e) => {
@@ -372,6 +374,7 @@ function createHead(options = {}) {
             }
             return e;
           });
+          hooks.callHook("entries:updated", head);
         }
       };
     },
@@ -389,6 +392,7 @@ function createHead(options = {}) {
       return resolveCtx.tags;
     }
   };
+  await head.hooks.callHook("init", head);
   setActiveHead(head);
   return head;
 }

package/package.json

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