@vueuse/head - npm Package Compare versions

Comparing version 0.7.8 to 0.7.9

dist/index.d.ts

@@ -10,2 +10,3 @@ import * as vue from 'vue';
     title?: MaybeRef<string>;
+    titleTemplate?: MaybeRef<string> | ((title?: string) => string);
     meta?: MaybeRef<HeadAttrs[]>;
@@ -46,3 +47,3 @@ link?: MaybeRef<HeadAttrs[]>;
 declare const injectHead: () => HeadClient;
-declare const createHead: () => HeadClient;
+declare const createHead: (initHeadObject?: MaybeRef<HeadObjectPlain>) => HeadClient;
 declare const useHead: (obj: MaybeRef<HeadObject>) => void;
@@ -49,0 +50,0 @@ declare const renderHeadToString: (head: HeadClient) => HTMLResult;

dist/index.js

@@ -138,20 +138,37 @@ var __defProp = Object.defineProperty;
 ];
+var renderTemplate = (template, title) => {
+  if (template == null)
+    return "";
+  if (typeof template === "string") {
+    return template.replace("%s", title ?? "");
+  }
+  return template((0, import_vue.unref)(title));
+};
 var headObjToTags = (obj) => {
   const tags = [];
-  for (const key of Object.keys(obj)) {
+  const keys = Object.keys(obj);
+  for (const key of keys) {
     if (obj[key] == null)
       continue;
-    if (key === "title") {
-      tags.push({ tag: key, props: { children: obj[key] } });
-    } else if (key === "base") {
-      tags.push({ tag: key, props: __spreadValues({ key: "default" }, obj[key]) });
-    } else if (acceptFields.includes(key)) {
-      const value = obj[key];
-      if (Array.isArray(value)) {
-        value.forEach((item) => {
-          tags.push({ tag: key, props: item });
-        });
-      } else if (value) {
-        tags.push({ tag: key, props: value });
-      }
+    switch (key) {
+      case "title":
+        tags.push({ tag: key, props: { children: obj[key] } });
+        break;
+      case "titleTemplate":
+        break;
+      case "base":
+        tags.push({ tag: key, props: __spreadValues({ key: "default" }, obj[key]) });
+        break;
+      default:
+        if (acceptFields.includes(key)) {
+          const value = obj[key];
+          if (Array.isArray(value)) {
+            value.forEach((item) => {
+              tags.push({ tag: key, props: item });
+            });
+          } else if (value) {
+            tags.push({ tag: key, props: value });
+          }
+        }
+        break;
     }
@@ -228,2 +245,9 @@ }
     }
+    for (let i = 0; i < oldBodyElements.length; i++) {
+      const oldEl = oldBodyElements[i];
+      if (isEqualNode(oldEl, newEl.element)) {
+        oldBodyElements.splice(i, 1);
+        return false;
+      }
+    }
     return true;
@@ -248,5 +272,8 @@ });
 };
-var createHead = () => {
+var createHead = (initHeadObject) => {
   let allHeadObjs = [];
   let previousTags = /* @__PURE__ */ new Set();
+  if (initHeadObject) {
+    allHeadObjs.push((0, import_vue.shallowRef)(initHeadObject));
+  }
   const head = {
@@ -259,4 +286,5 @@ install(app) {
       const deduped = [];
+      const titleTemplate = allHeadObjs.map((i) => (0, import_vue.unref)(i).titleTemplate).reverse().find((i) => i != null);
       allHeadObjs.forEach((objs) => {
-        const tags = headObjToTags(objs.value);
+        const tags = headObjToTags((0, import_vue.unref)(objs));
         tags.forEach((tag) => {
@@ -281,2 +309,5 @@ if (tag.tag === "meta" || tag.tag === "base" || tag.tag === "script") {
           }
+          if (titleTemplate && tag.tag === "title") {
+            tag.props.children = renderTemplate(titleTemplate, tag.props.children);
+          }
           deduped.push(tag);
@@ -331,4 +362,4 @@ });
 var useHead = (obj) => {
+  const head = injectHead();
   const headObj = (0, import_vue.ref)(obj);
-  const head = injectHead();
   head.addHeadObjs(headObj);
@@ -353,5 +384,5 @@ if (IS_BROWSER) {
   if (SELF_CLOSING_TAGS.includes(tag.tag)) {
-    return `<${tag.tag}${attrs}${isBodyTag ? " " + BODY_TAG_ATTR_NAME : ""}>`;
+    return `<${tag.tag}${attrs}${isBodyTag ? `  ${BODY_TAG_ATTR_NAME}="true"` : ""}>`;
   }
-  return `<${tag.tag}${attrs}${isBodyTag ? " " + BODY_TAG_ATTR_NAME : ""}>${tag.props.children || ""}</${tag.tag}>`;
+  return `<${tag.tag}${attrs}${isBodyTag ? ` ${BODY_TAG_ATTR_NAME}="true"` : ""}>${tag.props.children || ""}</${tag.tag}>`;
 };
@@ -358,0 +389,0 @@ var renderHeadToString = (head) => {

package.json

 {
   "name": "@vueuse/head",
   "packageManager": "pnpm@7.5.0",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "license": "MIT",
@@ -6,0 +6,0 @@ "description": "Document head manager for Vue 3. SSR ready.",

README.md

@@ -24,4 +24,4 @@ # @vueuse/head
 ```ts
-import { createApp } from 'vue'
-import { createHead } from '@vueuse/head'
+import { createApp } from "vue"
+import { createHead } from "@vueuse/head"
 
@@ -33,3 +33,3 @@ const app = createApp()
 
-app.mount('#app')
+app.mount("#app")
 ```
@@ -41,4 +41,4 @@
 <script>
-import { defineComponent, computed, reactive } from 'vue'
-import { useHead } from '@vueuse/head'
+import { defineComponent, computed, reactive } from "vue"
+import { useHead } from "@vueuse/head"
 
@@ -70,4 +70,4 @@ export default defineComponent({
 ```ts
-import { renderToString } from '@vue/server-renderer'
-import { renderHeadToString } from '@vueuse/head'
+import { renderToString } from "@vue/server-renderer"
+import { renderHeadToString } from "@vueuse/head"
 
@@ -97,3 +97,3 @@ const appHTML = await renderToString(yourVueApp)
 
-### `createHead()`
+### `createHead(head?: HeadObject | Ref<HeadObject>)`
 
@@ -107,2 +107,3 @@ Create the head manager instance.
   title?: MaybeRef<string>
+  titleTemplate?: MaybeRef<string> | ((title?: string) => string)
   meta?: MaybeRef<HeadAttrs[]>
@@ -129,10 +130,10 @@ link?: MaybeRef<HeadAttrs[]>
     {
-      property: 'og:locale:alternate',
-      content: 'zh',
-      key: 'zh',
+      property: "og:locale:alternate",
+      content: "zh",
+      key: "zh",
     },
     {
-      property: 'og:locale:alternate',
-      content: 'en',
-      key: 'en',
+      property: "og:locale:alternate",
+      content: "en",
+      key: "en",
     },
@@ -150,3 +151,3 @@ ],
       children: `console.log('Hello world!')`,
-      body: true
+      body: true,
     },
@@ -177,3 +178,3 @@ ],
 ```ts
-const head = reactive({ title: 'Website Title' })
+const head = reactive({ title: "Website Title" })
 useHead(head)
@@ -183,3 +184,3 @@ ```
 ```ts
-const title = ref('Website Title')
+const title = ref("Website Title")
 useHead({ title })
@@ -194,3 +195,3 @@ ```
 <script setup lang="ts">
-import { Head } from '@vueuse/head'
+import { Head } from "@vueuse/head"
 </script>
@@ -197,0 +198,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38493

increased by6.1%

Lines of code

1012

increased by6.86%

Number of lines in readme file

225

increased by0.45%

No dependency changes