@unhead/vue 0.6.2 → 0.6.4

package/dist/index.cjs

@@ -1,24 +1,541 @@
 'use strict';
 
-const shared = require('@vueuse/shared');
 const vue = require('vue');
-const unhead = require('unhead');
-const dom = require('@unhead/dom');
+const hookable = require('hookable');
 
-function resolveUnrefHeadInput(ref) {
-  const root = shared.resolveUnref(ref);
+const ValidHeadTags = [
+  "title",
+  "titleTemplate",
+  "base",
+  "htmlAttrs",
+  "bodyAttrs",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+const TagConfigKeys = ["tagPosition", "tagPriority", "tagDuplicateStrategy"];
+
+function normaliseTag(tagName, input) {
+  const tag = { tag: tagName, props: {} };
+  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];
+      delete tag.props[key];
+    }
+  });
+  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 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 tagWeight = (tag) => {
+  if (typeof tag.tagPriority === "number")
+    return tag.tagPriority;
+  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;
+  }
+};
+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 (UniqueTags.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") {
+      const val = String(props[n]);
+      if (ArrayMetaProperties.findIndex((p) => val.startsWith(p)) !== -1)
+        return false;
+      return `${tagName}:${n}:${val}`;
+    }
+  }
+  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 {
+      delete tags[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) {
+    delete tags[titleTemplateIdx];
+  }
+  return tags.filter(Boolean);
+}
+
+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) => {
+          let dedupeKey = tag._d || tag._p;
+          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]) {
+                  if (key === "style" && !oldProps[key].endsWith(";"))
+                    oldProps[key] += ";";
+                  tag.props[key] = `${oldProps[key]} ${tag.props[key]}`;
+                }
+              });
+              deduping[dedupeKey].props = {
+                ...oldProps,
+                ...tag.props
+              };
+              return;
+            } else if (tag._e === dupedTag._e) {
+              dedupeKey = tag._d = `${dedupeKey}:${tag._p}`;
+            }
+            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;
+            }
+          }
+          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 || typeof tag.tagPriority === "number")
+            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(sortTags);
+      }
+    }
+  });
+};
+
+const TitleTemplatePlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tags:resolve": (ctx) => {
+        ctx.tags = resolveTitleTemplateFromTags(ctx.tags);
+      }
+    }
+  });
+};
+
+const DeprecatedTagAttrPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": function({ tag }) {
+        if (typeof tag.props.body !== "undefined") {
+          tag.tagPosition = "bodyClose";
+          delete tag.props.body;
+        }
+      }
+    }
+  });
+};
+
+const IsBrowser$1 = typeof window !== "undefined";
+
+const ProvideTagHashPlugin = () => {
+  return defineHeadPlugin({
+    hooks: {
+      "tag:normalise": (ctx) => {
+        const { tag, entry } = ctx;
+        const isDynamic = typeof tag.props._dynamic !== "undefined";
+        if (!HasElementTags.includes(tag.tag) || !tag.key)
+          return;
+        tag._hash = hashCode(JSON.stringify({ tag: tag.tag, key: tag.key }));
+        if (IsBrowser$1 || getActiveHead()?.resolvedOptions?.document)
+          return;
+        if (entry._m === "server" || isDynamic) {
+          tag.props[`data-h-${tag._hash}`] = "";
+        }
+      },
+      "tags:resolve": (ctx) => {
+        ctx.tags = ctx.tags.map((t) => {
+          delete t.props._dynamic;
+          return t;
+        });
+      }
+    }
+  });
+};
+
+const PatchDomOnEntryUpdatesPlugin = (options) => {
+  return defineHeadPlugin({
+    hooks: {
+      "entries:updated": function(head) {
+        if (typeof options?.document === "undefined" && typeof window === "undefined")
+          return;
+        let delayFn = options?.delayFn;
+        if (!delayFn && typeof requestAnimationFrame !== "undefined")
+          delayFn = requestAnimationFrame;
+        import('./chunks/index.cjs').then(({ debouncedRenderDOMHead }) => {
+          debouncedRenderDOMHead(head, { document: options?.document || window.document, delayFn });
+        });
+      }
+    }
+  });
+};
+
+const EventHandlersPlugin = () => {
+  const stripEventHandlers = (mode, 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;
+    });
+    let delayedSrc;
+    if (mode === "dom" && tag.tag === "script" && typeof props.src === "string" && typeof eventHandlers.onload !== "undefined") {
+      delayedSrc = props.src;
+      delete props.src;
+    }
+    return { props, eventHandlers, delayedSrc };
+  };
+  return defineHeadPlugin({
+    hooks: {
+      "ssr:render": function(ctx) {
+        ctx.tags = ctx.tags.map((tag) => {
+          tag.props = stripEventHandlers("ssr", tag).props;
+          return tag;
+        });
+      },
+      "dom:beforeRenderTag": function(ctx) {
+        const { props, eventHandlers, delayedSrc } = stripEventHandlers("dom", ctx.tag);
+        if (!Object.keys(eventHandlers).length)
+          return;
+        ctx.tag.props = props;
+        ctx.tag._eventHandlers = eventHandlers;
+        ctx.tag._delayedSrc = delayedSrc;
+      },
+      "dom:renderTag": function(ctx) {
+        const $el = ctx.$el;
+        if (!ctx.tag._eventHandlers || !$el)
+          return;
+        const $eventListenerTarget = ctx.tag.tag === "bodyAttrs" && typeof window !== "undefined" ? window : $el;
+        Object.entries(ctx.tag._eventHandlers).forEach(([k, value]) => {
+          const sdeKey = `${ctx.tag._d || ctx.tag._p}:${k}`;
+          const eventName = k.slice(2).toLowerCase();
+          const eventDedupeKey = `data-h-${eventName}`;
+          delete ctx.queuedSideEffects[sdeKey];
+          if ($el.hasAttribute(eventDedupeKey))
+            return;
+          const handler = value;
+          $el.setAttribute(eventDedupeKey, "");
+          $eventListenerTarget.addEventListener(eventName, handler);
+          ctx.entry._sde[sdeKey] = () => {
+            $eventListenerTarget.removeEventListener(eventName, handler);
+            $el.removeAttribute(eventDedupeKey);
+          };
+        });
+        if (ctx.tag._delayedSrc) {
+          $el.setAttribute("src", ctx.tag._delayedSrc);
+        }
+      }
+    }
+  });
+};
+
+function asArray$1(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, 8).toLowerCase();
+}
+const HasElementTags = [
+  "base",
+  "meta",
+  "link",
+  "style",
+  "script",
+  "noscript"
+];
+
+let activeHead;
+const setActiveHead = (head) => activeHead = head;
+const getActiveHead = () => activeHead;
+
+const TagEntityBits = 10;
+
+function normaliseEntryTags(e) {
+  return Object.entries(e.input).filter(([k, v]) => typeof v !== "undefined" && ValidHeadTags.includes(k)).map(
+    ([k, value]) => asArray$1(value).map((props) => asArray$1(normaliseTag(k, props)))
+  ).flat(3).map((t, i) => {
+    t._e = e._i;
+    t._p = (e._i << TagEntityBits) + i;
+    return t;
+  });
+}
+
+function createHead$1(options = {}) {
+  let entries = [];
+  let _sde = {};
+  let _eid = 0;
+  const hooks = hookable.createHooks();
+  if (options?.hooks)
+    hooks.addHooks(options.hooks);
+  options.plugins = [
+    DeprecatedTagAttrPlugin(),
+    DedupesTagsPlugin(),
+    SortTagsPlugin(),
+    TitleTemplatePlugin(),
+    EventHandlersPlugin(),
+    ProvideTagHashPlugin(),
+    PatchDomOnEntryUpdatesPlugin({ document: options?.document, delayFn: options?.domDelayFn }),
+    ...options?.plugins || []
+  ];
+  options.plugins.forEach((p) => p.hooks && hooks.addHooks(p.hooks));
+  const triggerUpdateHook = () => hooks.callHook("entries:updated", head);
+  const head = {
+    resolvedOptions: options,
+    headEntries() {
+      return entries;
+    },
+    get hooks() {
+      return hooks;
+    },
+    push(input, options2) {
+      const activeEntry = {
+        _i: _eid++,
+        input,
+        _sde: {}
+      };
+      if (options2?.mode)
+        activeEntry._m = options2?.mode;
+      entries.push(activeEntry);
+      triggerUpdateHook();
+      const queueSideEffects = (e) => {
+        _sde = { ..._sde, ...e._sde || {} };
+        e._sde = {};
+        triggerUpdateHook();
+      };
+      return {
+        dispose() {
+          entries = entries.filter((e) => {
+            if (e._i !== activeEntry._i)
+              return true;
+            queueSideEffects(e);
+            return false;
+          });
+        },
+        patch(input2) {
+          entries = entries.map((e) => {
+            if (e._i === activeEntry._i) {
+              queueSideEffects(e);
+              activeEntry.input = e.input = input2;
+              activeEntry._i = e._i = _eid++;
+            }
+            return e;
+          });
+        }
+      };
+    },
+    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;
+    },
+    _elMap: {},
+    _popSideEffectQueue() {
+      const sde = { ..._sde };
+      _sde = {};
+      return sde;
+    }
+  };
+  head.hooks.callHook("init", head);
+  setActiveHead(head);
+  return head;
+}
+
+function defineHeadPlugin(plugin) {
+  return plugin;
+}
+const composableNames = [
+  "useHead",
+  "useTagTitle",
+  "useTagBase",
+  "useTagMeta",
+  "useTagMetaFlat",
+  "useTagLink",
+  "useTagScript",
+  "useTagStyle",
+  "useTagNoscript",
+  "useHtmlAttrs",
+  "useBodyAttrs",
+  "useTitleTemplate",
+  "useServerHead",
+  "useServerTagTitle",
+  "useServerTagBase",
+  "useServerTagMeta",
+  "useServerTagMetaFlat",
+  "useServerTagLink",
+  "useServerTagScript",
+  "useServerTagStyle",
+  "useServerTagNoscript",
+  "useServerHtmlAttrs",
+  "useServerBodyAttrs",
+  "useServerTitleTemplate"
+];
+
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : vue.unref(r);
+}
+function resolveUnrefHeadInput(ref, lastKey = "") {
+  const root = resolveUnref(ref);
   if (!ref || !root)
     return root;
   if (Array.isArray(root))
-    return root.map(resolveUnrefHeadInput);
+    return root.map((r) => resolveUnrefHeadInput(r, lastKey));
   if (typeof root === "object") {
-    return Object.fromEntries(
+    const unrefdObj = Object.fromEntries(
       Object.entries(root).map(([key, value]) => {
         if (key === "titleTemplate" || key.startsWith("on"))
           return [key, vue.unref(value)];
-        return [key, resolveUnrefHeadInput(value)];
+        return [key, resolveUnrefHeadInput(value, key)];
       })
     );
+    if (HasElementTags.includes(String(lastKey)) && JSON.stringify(unrefdObj) !== JSON.stringify(root))
+      unrefdObj._dynamic = true;
+    return unrefdObj;
   }
   return root;
 }
@@ -31,14 +548,14 @@ const IsBrowser = typeof window !== "undefined";
 
 const headSymbol = "usehead";
 function injectHead() {
-  return vue.getCurrentInstance() && vue.inject(headSymbol) || unhead.getActiveHead();
+  return vue.getCurrentInstance() && vue.inject(headSymbol) || getActiveHead();
 }
 function createHead(options = {}) {
   const plugins = [
     VueReactiveUseHeadPlugin(),
     ...options?.plugins || []
   ];
-  const head = unhead.createHead({
+  const head = createHead$1({
     ...options,
     domDelayFn: (fn) => setTimeout(() => vue.nextTick(() => fn()), 10),
     plugins
@@ -69,7 +586,7 @@ const VueHeadMixin = {
 };
 
 const VueReactiveUseHeadPlugin = () => {
-  return unhead.defineHeadPlugin({
+  return defineHeadPlugin({
     hooks: {
       "entries:resolve": function(ctx) {
         for (const entry of ctx.entries)
@@ -313,7 +830,7 @@ const coreComposableNames = [
 const unheadVueComposablesImports = [
   {
     from: "@unhead/vue",
-    imports: [...coreComposableNames, ...unhead.composableNames]
+    imports: [...coreComposableNames, ...composableNames]
   }
 ];
 
@@ -350,6 +867,3 @@ exports.useTagScript = useTagScript;
 exports.useTagStyle = useTagStyle;
 exports.useTagTitle = useTagTitle;
 exports.useTitleTemplate = useTitleTemplate;
-for (const k in dom) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = dom[k];
-}

package/dist/index.d.ts

@@ -1,11 +1,10 @@
-import { MaybeComputedRef, MaybeRef } from '@vueuse/shared';
-export { MaybeComputedRef } from '@vueuse/shared';
 import * as _unhead_schema from '@unhead/schema';
 import { Title as Title$1, TitleTemplate as TitleTemplate$1, EntryAugmentation, Base as Base$1, Link as Link$1, Meta as Meta$1, Style as Style$1, Script as Script$1, Noscript as Noscript$1, DataKeys, SchemaAugmentations, DefinedValueOrEmptyObject, MergeHead, BaseHtmlAttr, MaybeArray, BaseBodyAttr, Unhead, CreateHeadOptions, HeadEntryOptions, MetaFlatInput, ActiveHeadEntry } from '@unhead/schema';
 export { ActiveHeadEntry, Head, HeadEntryOptions, HeadTag, MergeHead, Unhead } from '@unhead/schema';
-import { Plugin } from 'vue';
-export * from '@unhead/dom';
+import { ComputedRef, Ref, Plugin } from 'vue';
 
+declare type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
+declare type MaybeComputedRef<T> = T | MaybeReadonlyRef<T> | Ref<T>;
 declare type MaybeComputedRefEntries<T> = MaybeComputedRef<T> | {
     [key in keyof T]?: MaybeComputedRef<T[key]>;
 };
@@ -28,7 +27,7 @@ interface BodyAttr extends Omit<BaseBodyAttr, 'class'> {
     class?: MaybeArray<MaybeComputedRef<string>> | Record<string, MaybeComputedRef<boolean>>;
 }
 declare type Title = MaybeComputedRef<Title$1>;
-declare type TitleTemplate = MaybeRef<TitleTemplate$1> | ((title?: string) => TitleTemplate$1);
+declare type TitleTemplate = TitleTemplate$1 | Ref<TitleTemplate$1> | ((title?: string) => TitleTemplate$1);
 declare type Base<E extends EntryAugmentation = {}> = MaybeComputedRef<MaybeComputedRefEntries<Base$1<E>>>;
 declare type Link<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Link$1<E>>;
 declare type Meta<E extends EntryAugmentation = {}> = MaybeComputedRefEntries<Meta$1<E>>;
@@ -105,7 +104,7 @@ interface ReactiveHead<E extends MergeHead = MergeHead> {
 }
 declare type UseHeadInput<T extends MergeHead = {}> = MaybeComputedRef<ReactiveHead<T>>;
 
-declare function resolveUnrefHeadInput(ref: any): any;
+declare function resolveUnrefHeadInput(ref: any, lastKey?: string | number): any;
 declare function asArray<T>(value: Arrayable<T>): T[];
 
 declare type VueHeadClient<T extends MergeHead> = Unhead<MaybeComputedRef<ReactiveHead<T>>> & Plugin;
@@ -152,4 +151,4 @@ declare const unheadVueComposablesImports: {
     imports: string[];
 }[];
 
-export { Arrayable, Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRefEntries, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, 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, Base, BodyAttributes, HtmlAttributes, Link, MaybeComputedRef, MaybeComputedRefEntries, MaybeReadonlyRef, Meta, Noscript, ReactiveHead, Script, Style, Title, TitleTemplate, UseHeadInput, Vue2ProvideUnheadPlugin, VueHeadClient, VueHeadMixin, VueReactiveUseHeadPlugin, asArray, createHead, headSymbol, injectHead, resolveUnrefHeadInput, unheadVueComposablesImports, useBodyAttrs, useHead, useHtmlAttrs, useServerBodyAttrs, useServerHead, useServerHtmlAttrs, useServerTagBase, useServerTagLink, useServerTagMeta, useServerTagMetaFlat, useServerTagNoscript, useServerTagScript, useServerTagStyle, useServerTagTitle, useServerTitleTemplate, useTagBase, useTagLink, useTagMeta, useTagMetaFlat, useTagNoscript, useTagScript, useTagStyle, useTagTitle, useTitleTemplate };