unhead 0.0.1

package/dist/client.d.ts

@@ -0,0 +1,11 @@
+import { a as HeadClient } from './types-e30878c0.js';
+import 'hookable';
+import '@unhead/schema';
+
+interface RenderDomHeadOptions {
+    document?: Document;
+}
+declare const renderDOMHead: <T extends HeadClient<any>>(head: T, options?: RenderDomHeadOptions) => Promise<void>;
+declare const debouncedUpdateDom: <T extends HeadClient<any>>(delayedFn: (fn: () => void) => void, head: T, options?: RenderDomHeadOptions) => Promise<void>;
+
+export { RenderDomHeadOptions, debouncedUpdateDom, renderDOMHead };

package/dist/client.mjs

@@ -0,0 +1,95 @@
+import { createElement } from 'zhead';
+
+const setAttributes = ($el, tag) => {
+  const sideEffects = {};
+  const attrs = tag.props || {};
+  for (const k in attrs) {
+    if (k === "class") {
+      for (const c of attrs[k].split(" ")) {
+        if (!$el.classList.contains(c)) {
+          $el.classList.add(c);
+          sideEffects[`${tag._p}:attr:class:remove:${c}`] = () => {
+            $el.classList.remove(c);
+          };
+        }
+      }
+      continue;
+    }
+    $el.setAttribute(k, String(attrs[k]));
+    if (!k.startsWith("data-h-")) {
+      sideEffects[`${tag._p}:attr:${k}:remove`] = () => {
+        $el.removeAttribute(k);
+      };
+    }
+  }
+  return sideEffects;
+};
+
+let domUpdatePromise = null;
+const renderDOMHead = async (head, options = {}) => {
+  const dom = options.document || window.document;
+  const tags = await head.resolveTags();
+  await head.hooks.callHook("dom:beforeRender", { head, tags, document: dom });
+  head._flushDomSideEffects();
+  const sideEffectMap = {};
+  for (const tag of tags) {
+    sideEffectMap[tag._e] = sideEffectMap[tag._e] || {};
+    let $el = tag._s ? dom.querySelector(`[${tag._s}]`) : null;
+    const renderCtx = { tag, document: dom, $el, head };
+    await head.hooks.callHook("dom:renderTag", renderCtx);
+    if ($el) {
+      if (Object.keys(tag.props).length === 0) {
+        $el.remove();
+        continue;
+      }
+      sideEffectMap[tag._e] = {
+        ...sideEffectMap[tag._e],
+        ...setAttributes($el, tag)
+      };
+      $el.innerHTML = tag.children || "";
+      sideEffectMap[tag._e][`${tag._p}:el:remove`] = () => $el?.remove();
+      continue;
+    }
+    if (tag.tag === "title" && tag.children) {
+      dom.title = tag.children;
+      continue;
+    }
+    if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
+      sideEffectMap[tag._e] = {
+        ...sideEffectMap[tag._e],
+        ...setAttributes(dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"], tag)
+      };
+      continue;
+    }
+    $el = createElement(tag, dom);
+    switch (tag.tagPosition) {
+      case "bodyClose":
+        dom.body.appendChild($el);
+        break;
+      case "bodyOpen":
+        dom.body.insertBefore($el, dom.body.firstChild);
+        break;
+      case "head":
+      default:
+        dom.head.appendChild($el);
+        break;
+    }
+    sideEffectMap[tag._e][`${tag._p}:el:remove`] = () => $el?.remove();
+  }
+  for (const k in sideEffectMap) {
+    const entry = head.headEntries().find((e) => e._i === Number(k));
+    entry._sde = {
+      ...entry._sde,
+      ...sideEffectMap[k]
+    };
+  }
+};
+const debouncedUpdateDom = async (delayedFn, head, options = {}) => {
+  function doDomUpdate() {
+    domUpdatePromise = null;
+    return renderDOMHead(head, options);
+  }
+  return domUpdatePromise = domUpdatePromise || new Promise((resolve) => delayedFn(() => resolve(doDomUpdate())));
+};
+
+export { debouncedUpdateDom, renderDOMHead };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as _unhead_schema from '@unhead/schema';
+import { Head, Meta, Link, Script, Style, Base, HtmlAttributes, BodyAttributes, Noscript } from '@unhead/schema';
+import { H as HeadPlugin, C as CreateHeadOptions, a as HeadClient, b as HeadEntryOptions } from './types-e30878c0.js';
+export { A as ActiveHeadEntry, C as CreateHeadOptions, D as DomRenderTagContext, a as HeadClient, c as HeadEntry, b as HeadEntryOptions, e as HeadHooks, H as HeadPlugin, R as RuntimeMode, S as SideEffectsRecord, d as defineHeadPlugin } from './types-e30878c0.js';
+import 'hookable';
+
+declare const dedupePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+
+declare const sortPlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+
+declare const titleTemplatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+
+declare const hydratesStatePlugin: HeadPlugin<_unhead_schema.Head<_unhead_schema.SchemaAugmentations>>;
+
+declare function createHead<T extends {} = Head>(options?: CreateHeadOptions<T>): HeadClient<T>;
+
+declare function useHead<T>(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 const useHtmlAttrs: (attrs: HtmlAttributes) => void;
+declare const useBodyAttrs: (attrs: BodyAttributes) => void;
+declare const useTitleTemplate: (titleTemplate: string) => void;
+declare const useNoscript: (noscript: Noscript) => void;
+
+declare let activeHead: HeadClient<any> | undefined;
+declare const setActiveHead: <T>(head: HeadClient<T> | undefined) => HeadClient<T> | undefined;
+declare const getActiveHead: <T>() => HeadClient<T>;
+
+declare type Arrayable<T> = T | Array<T>;
+declare function asArray<T>(value: Arrayable<T>): T[];
+declare function hashCode(s: string): string;
+
+export { Arrayable, activeHead, asArray, createHead, dedupePlugin, getActiveHead, hashCode, hydratesStatePlugin, setActiveHead, sortPlugin, titleTemplatePlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };

package/dist/index.mjs

@@ -0,0 +1,250 @@
+import { createHooks } from 'hookable';
+import { tagDedupeKey, sortCriticalTags, resolveTitleTemplateFromTags, HasElementTags, ValidHeadTags, normaliseTag as normaliseTag$1 } from 'zhead';
+
+let activeHead;
+const setActiveHead = (head) => activeHead = head;
+const getActiveHead = () => activeHead;
+
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+
+const dedupePlugin = defineHeadPlugin({
+  hooks: {
+    "tag:normalise": function({ tag }) {
+      ["hid", "vmid", "key"].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) {
+          if (tag?.tagDuplicateStrategy === "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 sortPlugin = 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 = defineHeadPlugin({
+  hooks: {
+    "tags:resolve": (ctx) => {
+      ctx.tags = resolveTitleTemplateFromTags(ctx.tags);
+    }
+  }
+});
+
+function asArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+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 = defineHeadPlugin({
+  hooks: {
+    "tag:normalise": (ctx) => {
+      const { tag, entry } = ctx;
+      if (!HasElementTags.includes(tag.tag))
+        return;
+      if (typeof tag._d === "undefined" && entry.mode === "server")
+        return;
+      tag._s = `data-h-${hashCode(tag._d || tag.tag + JSON.stringify(tag.props))}`;
+      tag.props[tag._s] = "";
+    }
+  }
+});
+
+function normaliseTag(tagName, input, entry) {
+  const tag = normaliseTag$1(tagName, input, { childrenKeys: ["innerHTML", "textContent"] });
+  tag._e = entry._i;
+  Object.keys(tag.props).filter((k) => k.startsWith("tag")).forEach((k) => {
+    tag[k] = tag.props[k];
+    delete tag.props[k];
+  });
+  if (tag.props.content && Array.isArray(tag.props.content)) {
+    return tag.props.content.map((v) => {
+      const newTag = { ...tag, props: { ...tag.props } };
+      newTag.props.content = v;
+      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;
+  });
+}
+
+function createHead(options = {}) {
+  let entries = [];
+  let _sde = {};
+  let entryId = 0;
+  const hooks = createHooks();
+  if (options.hooks)
+    hooks.addHooks(options.hooks);
+  const plugins = [
+    dedupePlugin,
+    sortPlugin,
+    titleTemplatePlugin
+  ];
+  plugins.push(...options.plugins || []);
+  plugins.forEach((plugin) => hooks.addHooks(plugin.hooks || {}));
+  const head = {
+    entries,
+    _flushDomSideEffects() {
+      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
+      });
+      return {
+        dispose() {
+          entries = entries.filter((e) => {
+            if (e._i !== _i)
+              return true;
+            _sde = {
+              ..._sde,
+              ...e._sde || {}
+            };
+            return false;
+          });
+        },
+        patch(input2) {
+          entries = entries.map((e) => {
+            e.input = e._i === _i ? input2 : e.input;
+            return e;
+          });
+        }
+      };
+    },
+    async resolveTags() {
+      await hooks.callHook("entries:resolve", head);
+      const tags = entries.map((entry) => normaliseEntryTags(entry)).flat();
+      for (const k in tags) {
+        const tagCtx = { tag: tags[k], entry: entries.find((e) => e._i === tags[k]._e) };
+        await hooks.callHook("tag:normalise", tagCtx);
+        tags[k] = tagCtx.tag;
+      }
+      const ctx = { tags };
+      await hooks.callHook("tags:beforeResolve", ctx);
+      await hooks.callHook("tags:resolve", ctx);
+      return ctx.tags;
+    }
+  };
+  setActiveHead(head);
+  return head;
+}
+
+function useHead(input, options = {}) {
+  const head = getActiveHead();
+  head.push(input, options);
+}
+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] });
+};
+
+export { activeHead, asArray, createHead, dedupePlugin, defineHeadPlugin, getActiveHead, hashCode, hydratesStatePlugin, setActiveHead, sortPlugin, titleTemplatePlugin, useBase, useBodyAttrs, useHead, useHtmlAttrs, useLink, useMeta, useNoscript, useScript, useStyle, useTitle, useTitleTemplate };

package/dist/server.d.ts

@@ -0,0 +1,3 @@
+export { f as SSRHeadPayload, r as renderSSRHead } from './types-e30878c0.js';
+import 'hookable';
+import '@unhead/schema';

package/dist/server.mjs

@@ -0,0 +1,13 @@
+import { ssrRenderTags } from 'zhead';
+
+const renderSSRHead = async (ctx) => {
+  const tags = await ctx.resolveTags();
+  const beforeRenderCtx = { tags };
+  await ctx.hooks.callHook("ssr:beforeRender", beforeRenderCtx);
+  const html = ssrRenderTags(beforeRenderCtx.tags);
+  const renderCXx = { tags, html };
+  await ctx.hooks.callHook("ssr:render", renderCXx);
+  return renderCXx.html;
+};
+
+export { renderSSRHead };

package/dist/types-e30878c0.d.ts

@@ -0,0 +1,91 @@
+import { NestedHooks, Hookable } from 'hookable';
+import { Head, HeadTag } from '@unhead/schema';
+
+declare type HeadPlugin<O> = Omit<CreateHeadOptions<O>, 'plugins'>;
+declare function defineHeadPlugin<O = Head>(plugin: HeadPlugin<O>): HeadPlugin<O>;
+
+interface SSRHeadPayload {
+    headTags: string;
+    bodyTags: string;
+    bodyTagsOpen: string;
+    htmlAttrs: string;
+    bodyAttrs: string;
+}
+declare const renderSSRHead: <T extends HeadClient<any>>(ctx: T) => Promise<SSRHeadPayload>;
+
+interface ActiveHeadEntry<T> {
+    patch: (resolvedInput: T) => void;
+    dispose: () => void;
+}
+declare type SideEffectsRecord = Record<string, () => void>;
+declare type RuntimeMode = 'server' | 'client' | 'all';
+interface HeadEntry<T> {
+    mode?: RuntimeMode;
+    input: T;
+    /**
+     * Head entry index
+     *
+     * @internal
+     */
+    _i: number;
+    /**
+     * Side effects
+     *
+     * @internal
+     */
+    _sde?: SideEffectsRecord;
+}
+declare type HookResult = Promise<void> | void;
+interface DomRenderTagContext {
+    head: HeadClient;
+    tag: HeadTag;
+    $el: Element | null;
+    document: Document;
+}
+interface HeadHooks<T> {
+    'entries:resolve': (head: HeadClient<T>) => HookResult;
+    'tag:normalise': (ctx: {
+        tag: HeadTag;
+        entry: HeadEntry<T>;
+    }) => HookResult;
+    'tags:beforeResolve': (ctx: {
+        tags: HeadTag[];
+    }) => HookResult;
+    'tags:resolve': (ctx: {
+        tags: HeadTag[];
+    }) => HookResult;
+    'render': (ctx: any) => HookResult;
+    'dom:renderTag': (ctx: DomRenderTagContext) => HookResult;
+    'dom:beforeRender': (ctx: {
+        head: HeadClient;
+        tags: HeadTag[];
+        document: Document;
+    }) => HookResult;
+    'ssr:beforeRender': (ctx: {
+        tags: HeadTag[];
+    }) => HookResult;
+    'ssr:render': (ctx: {
+        tags: HeadTag[];
+        html: SSRHeadPayload;
+    }) => HookResult;
+}
+interface CreateHeadOptions<T> {
+    plugins?: HeadPlugin<any>[];
+    hooks?: NestedHooks<HeadHooks<T>>;
+}
+interface HeadEntryOptions {
+    mode?: RuntimeMode;
+}
+interface HeadClient<T = Head> {
+    entries: HeadEntry<T>[];
+    hooks: Hookable<HeadHooks<T>>;
+    headEntries: () => HeadEntry<T>[];
+    push: (entry: T, options?: HeadEntryOptions) => ActiveHeadEntry<T>;
+    resolveTags: () => Promise<HeadTag[]>;
+    /**
+     * @internal
+     */
+    _flushDomSideEffects: () => void;
+}
+
+export { ActiveHeadEntry as A, CreateHeadOptions as C, DomRenderTagContext as D, HeadPlugin as H, RuntimeMode as R, SideEffectsRecord as S, HeadClient as a, HeadEntryOptions as b, HeadEntry as c, defineHeadPlugin as d, HeadHooks as e, SSRHeadPayload as f, renderSSRHead as r };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "unhead",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@7.14.0",
+  "author": "Harlan Wilton <harlan@harlanzw.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/harlan-zw",
+  "homepage": "https://github.com/harlan-zw/unhead#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harlan-zw/unhead.git",
+    "directory": "packages/unhead"
+  },
+  "bugs": {
+    "url": "https://github.com/harlan-zw/unhead/issues"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.mjs"
+    }
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@unhead/schema": "0.0.1",
+    "hookable": "^5.4.1",
+    "unctx": "^2.0.2",
+    "zhead": "1.0.0-beta.4"
+  },
+  "scripts": {
+    "build": "unbuild .",
+    "stub": "unbuild . --stub"
+  }
+}