unhead 1.3.2 → 1.3.4

package/dist/index.cjs

@@ -71,6 +71,23 @@ const DedupePlugin = shared.defineHeadPlugin({
   }
 });
 
+const PayloadPlugin = shared.defineHeadPlugin((head) => ({
+  mode: "server",
+  hooks: {
+    "tags:resolve": function(ctx) {
+      const csrPayload = {};
+      ctx.tags.filter((tag) => ["titleTemplate", "templateParams"].includes(tag.tag) && tag._m === "server").forEach((tag) => {
+        csrPayload[tag.tag] = tag.tag === "titleTemplate" ? tag.textContent : tag.props;
+      });
+      Object.keys(csrPayload).length && ctx.tags.push({
+        tag: "script",
+        innerHTML: JSON.stringify(csrPayload),
+        props: { type: "text/javascript", id: "unhead:payload" }
+      });
+    }
+  }
+}));
+
 const ValidEventTags = ["script", "link", "bodyAttrs"];
 function stripEventHandlers(tag) {
   const props = {};
@@ -134,7 +151,7 @@ const EventHandlersPlugin = shared.defineHeadPlugin({
 });
 
 const DupeableTags = ["link", "style", "script", "noscript"];
-const HashKeyedPLugin = shared.defineHeadPlugin({
+const HashKeyedPlugin = shared.defineHeadPlugin({
   hooks: {
     "tag:normalise": ({ tag }) => {
       if (tag.key && DupeableTags.includes(tag.tag)) {
@@ -144,7 +161,7 @@ const HashKeyedPLugin = shared.defineHeadPlugin({
   }
 });
 
-const SortPLugin = shared.defineHeadPlugin({
+const SortPlugin = shared.defineHeadPlugin({
   hooks: {
     "tags:resolve": (ctx) => {
       const tagPositionForKey = (key) => ctx.tags.find((tag) => tag._d === key)?._p;
@@ -231,28 +248,30 @@ const TitleTemplatePlugin = shared.defineHeadPlugin({
 let activeHead;
 function createHead(options = {}) {
   const head = createHeadCore(options);
-  if (!head.ssr)
-    head.use(dom.PatchDomOnEntryUpdatesPlugin());
+  head.use(dom.DomPlugin());
   return activeHead = head;
 }
 function createServerHead(options = {}) {
   return activeHead = createHeadCore(options);
 }
+function filterMode(mode, ssr) {
+  return !mode || mode === "server" && ssr || mode === "client" && !ssr;
+}
 function createHeadCore(options = {}) {
   const hooks = hookable.createHooks();
   hooks.addHooks(options.hooks || {});
+  options.document = options.document || (shared.IsBrowser ? document : void 0);
+  const ssr = !options.document;
   options.plugins = [
     DedupePlugin,
+    PayloadPlugin,
     EventHandlersPlugin,
-    HashKeyedPLugin,
-    SortPLugin,
+    HashKeyedPlugin,
+    SortPlugin,
     TemplateParamsPlugin,
     TitleTemplatePlugin,
     ...options?.plugins || []
   ];
-  options.plugins.forEach((p) => hooks.addHooks(p.hooks || {}));
-  options.document = options.document || (shared.IsBrowser ? document : void 0);
-  const ssr = !options.document;
   const updated = () => hooks.callHook("entries:updated", head);
   let entryCount = 0;
   let entries = [];
@@ -262,34 +281,31 @@ function createHeadCore(options = {}) {
     headEntries() {
       return entries;
     },
-    use(plugin) {
-      if (plugin.hooks)
-        hooks.addHooks(plugin.hooks);
+    use(p) {
+      const plugin = typeof p === "function" ? p(head) : p;
+      filterMode(plugin.mode, ssr) && hooks.addHooks(plugin.hooks || {});
     },
     push(input, entryOptions) {
-      const activeEntry = {
+      const entry = {
         _i: entryCount++,
         input,
         ...entryOptions
       };
-      const mode = activeEntry?.mode;
-      if (mode)
-        activeEntry.mode = mode;
-      if (!mode || mode === "server" && ssr || mode === "client" && !ssr) {
-        entries.push(activeEntry);
+      if (filterMode(entry.mode, ssr)) {
+        entries.push(entry);
         updated();
       }
       return {
         dispose() {
-          entries = entries.filter((e) => e._i !== activeEntry._i);
+          entries = entries.filter((e) => e._i !== entry._i);
           hooks.callHook("entries:updated", head);
           updated();
         },
         // a patch is the same as creating a new entry, just a nice DX
         patch(input2) {
           entries = entries.map((e) => {
-            if (e._i === activeEntry._i) {
-              activeEntry.input = e.input = input2;
+            if (e._i === entry._i) {
+              e.input = entry.input = input2;
             }
             return e;
           });
@@ -317,6 +333,7 @@ function createHeadCore(options = {}) {
     },
     ssr
   };
+  options.plugins.forEach((p) => head.use(p));
   head.hooks.callHook("init", head);
   return head;
 }
@@ -335,10 +352,7 @@ function HashHydrationPlugin() {
           dirty = true;
       },
       "tags:resolve": function({ tags }) {
-        const nonServerTags = tags.filter((tag) => {
-          const entry = head.headEntries().find((e) => e._i === tag._e);
-          return entry && entry.mode !== "server";
-        });
+        const nonServerTags = tags.filter((tag) => tag._m !== "server");
         const hash = !nonServerTags.length ? false : shared.hashCode(
           nonServerTags.map((tag) => shared.hashTag(tag)).join("")
         );

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createHooks } from 'hookable';
-import { PatchDomOnEntryUpdatesPlugin } from '@unhead/dom';
+import { DomPlugin } from '@unhead/dom';
 import { defineHeadPlugin, tagDedupeKey, tagWeight, HasElementTags, hashCode, SortModifiers, processTemplateParams, resolveTitleTemplate, IsBrowser, normaliseEntryTags, hashTag, composableNames, whitelistSafeInput, unpackMeta } from '@unhead/shared';
 export { composableNames } from '@unhead/shared';
 
@@ -70,6 +70,23 @@ const DedupePlugin = defineHeadPlugin({
   }
 });
 
+const PayloadPlugin = defineHeadPlugin((head) => ({
+  mode: "server",
+  hooks: {
+    "tags:resolve": function(ctx) {
+      const csrPayload = {};
+      ctx.tags.filter((tag) => ["titleTemplate", "templateParams"].includes(tag.tag) && tag._m === "server").forEach((tag) => {
+        csrPayload[tag.tag] = tag.tag === "titleTemplate" ? tag.textContent : tag.props;
+      });
+      Object.keys(csrPayload).length && ctx.tags.push({
+        tag: "script",
+        innerHTML: JSON.stringify(csrPayload),
+        props: { type: "text/javascript", id: "unhead:payload" }
+      });
+    }
+  }
+}));
+
 const ValidEventTags = ["script", "link", "bodyAttrs"];
 function stripEventHandlers(tag) {
   const props = {};
@@ -133,7 +150,7 @@ const EventHandlersPlugin = defineHeadPlugin({
 });
 
 const DupeableTags = ["link", "style", "script", "noscript"];
-const HashKeyedPLugin = defineHeadPlugin({
+const HashKeyedPlugin = defineHeadPlugin({
   hooks: {
     "tag:normalise": ({ tag }) => {
       if (tag.key && DupeableTags.includes(tag.tag)) {
@@ -143,7 +160,7 @@ const HashKeyedPLugin = defineHeadPlugin({
   }
 });
 
-const SortPLugin = defineHeadPlugin({
+const SortPlugin = defineHeadPlugin({
   hooks: {
     "tags:resolve": (ctx) => {
       const tagPositionForKey = (key) => ctx.tags.find((tag) => tag._d === key)?._p;
@@ -230,28 +247,30 @@ const TitleTemplatePlugin = defineHeadPlugin({
 let activeHead;
 function createHead(options = {}) {
   const head = createHeadCore(options);
-  if (!head.ssr)
-    head.use(PatchDomOnEntryUpdatesPlugin());
+  head.use(DomPlugin());
   return activeHead = head;
 }
 function createServerHead(options = {}) {
   return activeHead = createHeadCore(options);
 }
+function filterMode(mode, ssr) {
+  return !mode || mode === "server" && ssr || mode === "client" && !ssr;
+}
 function createHeadCore(options = {}) {
   const hooks = createHooks();
   hooks.addHooks(options.hooks || {});
+  options.document = options.document || (IsBrowser ? document : void 0);
+  const ssr = !options.document;
   options.plugins = [
     DedupePlugin,
+    PayloadPlugin,
     EventHandlersPlugin,
-    HashKeyedPLugin,
-    SortPLugin,
+    HashKeyedPlugin,
+    SortPlugin,
     TemplateParamsPlugin,
     TitleTemplatePlugin,
     ...options?.plugins || []
   ];
-  options.plugins.forEach((p) => hooks.addHooks(p.hooks || {}));
-  options.document = options.document || (IsBrowser ? document : void 0);
-  const ssr = !options.document;
   const updated = () => hooks.callHook("entries:updated", head);
   let entryCount = 0;
   let entries = [];
@@ -261,34 +280,31 @@ function createHeadCore(options = {}) {
     headEntries() {
       return entries;
     },
-    use(plugin) {
-      if (plugin.hooks)
-        hooks.addHooks(plugin.hooks);
+    use(p) {
+      const plugin = typeof p === "function" ? p(head) : p;
+      filterMode(plugin.mode, ssr) && hooks.addHooks(plugin.hooks || {});
     },
     push(input, entryOptions) {
-      const activeEntry = {
+      const entry = {
         _i: entryCount++,
         input,
         ...entryOptions
       };
-      const mode = activeEntry?.mode;
-      if (mode)
-        activeEntry.mode = mode;
-      if (!mode || mode === "server" && ssr || mode === "client" && !ssr) {
-        entries.push(activeEntry);
+      if (filterMode(entry.mode, ssr)) {
+        entries.push(entry);
         updated();
       }
       return {
         dispose() {
-          entries = entries.filter((e) => e._i !== activeEntry._i);
+          entries = entries.filter((e) => e._i !== entry._i);
           hooks.callHook("entries:updated", head);
           updated();
         },
         // a patch is the same as creating a new entry, just a nice DX
         patch(input2) {
           entries = entries.map((e) => {
-            if (e._i === activeEntry._i) {
-              activeEntry.input = e.input = input2;
+            if (e._i === entry._i) {
+              e.input = entry.input = input2;
             }
             return e;
           });
@@ -316,6 +332,7 @@ function createHeadCore(options = {}) {
     },
     ssr
   };
+  options.plugins.forEach((p) => head.use(p));
   head.hooks.callHook("init", head);
   return head;
 }
@@ -334,10 +351,7 @@ function HashHydrationPlugin() {
           dirty = true;
       },
       "tags:resolve": function({ tags }) {
-        const nonServerTags = tags.filter((tag) => {
-          const entry = head.headEntries().find((e) => e._i === tag._e);
-          return entry && entry.mode !== "server";
-        });
+        const nonServerTags = tags.filter((tag) => tag._m !== "server");
         const hash = !nonServerTags.length ? false : hashCode(
           nonServerTags.map((tag) => hashTag(tag)).join("")
         );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unhead",
   "type": "module",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "hookable": "^5.5.3",
-    "@unhead/dom": "1.3.2",
-    "@unhead/schema": "1.3.2",
-    "@unhead/shared": "1.3.2"
+    "@unhead/dom": "1.3.4",
+    "@unhead/schema": "1.3.4",
+    "@unhead/shared": "1.3.4"
   },
   "scripts": {
     "build": "unbuild .",