@vueuse/head - npm Package Compare versions

Comparing version 0.7.7 to 0.7.8

dist/index.d.ts

@@ -23,2 +23,3 @@ import * as vue from 'vue';
     props: {
+        body?: boolean;
         [k: string]: any;
@@ -38,2 +39,3 @@ };
     readonly bodyAttrs: string;
+    readonly bodyTags: string;
 }
@@ -40,0 +42,0 @@ /**

dist/index.js

@@ -53,2 +53,3 @@ var __defProp = Object.defineProperty;
 var SELF_CLOSING_TAGS = ["meta", "link", "base"];
+var BODY_TAG_ATTR_NAME = `data-meta-body`;
 
@@ -59,10 +60,14 @@ // src/create-element.ts
   for (const key of Object.keys(attrs)) {
-    let value = attrs[key];
-    if (key === "key" || value === false) {
-      continue;
-    }
-    if (key === "children") {
-      el.textContent = value;
+    if (key === "body" && attrs.body === true) {
+      el.setAttribute(BODY_TAG_ATTR_NAME, "true");
     } else {
-      el.setAttribute(key, value);
+      let value = attrs[key];
+      if (key === "key" || value === false) {
+        continue;
+      }
+      if (key === "children") {
+        el.textContent = value;
+      } else {
+        el.setAttribute(key, value);
+      }
     }
@@ -185,11 +190,21 @@ }
 var updateElements = (document = window.document, type, tags) => {
-  var _a;
+  var _a, _b;
   const head = document.head;
+  const body = document.body;
   let headCountEl = head.querySelector(`meta[name="${HEAD_COUNT_KEY}"]`);
+  let bodyMetaElements = body.querySelectorAll(`[${BODY_TAG_ATTR_NAME}]`);
   const headCount = headCountEl ? Number(headCountEl.getAttribute("content")) : 0;
-  const oldElements = [];
+  const oldHeadElements = [];
+  const oldBodyElements = [];
+  if (bodyMetaElements) {
+    for (let i = 0; i < bodyMetaElements.length; i++) {
+      if (bodyMetaElements[i] && ((_a = bodyMetaElements[i].tagName) == null ? void 0 : _a.toLowerCase()) === type) {
+        oldBodyElements.push(bodyMetaElements[i]);
+      }
+    }
+  }
   if (headCountEl) {
     for (let i = 0, j = headCountEl.previousElementSibling; i < headCount; i++, j = (j == null ? void 0 : j.previousElementSibling) || null) {
-      if (((_a = j == null ? void 0 : j.tagName) == null ? void 0 : _a.toLowerCase()) === type) {
-        oldElements.push(j);
+      if (((_b = j == null ? void 0 : j.tagName) == null ? void 0 : _b.toLowerCase()) === type) {
+        oldHeadElements.push(j);
       }
@@ -203,8 +218,11 @@ }
   }
-  let newElements = tags.map((tag) => createElement(tag.tag, tag.props, document));
+  let newElements = tags.map((tag) => ({
+    element: createElement(tag.tag, tag.props, document),
+    body: tag.props.body ?? false
+  }));
   newElements = newElements.filter((newEl) => {
-    for (let i = 0; i < oldElements.length; i++) {
-      const oldEl = oldElements[i];
-      if (isEqualNode(oldEl, newEl)) {
-        oldElements.splice(i, 1);
+    for (let i = 0; i < oldHeadElements.length; i++) {
+      const oldEl = oldHeadElements[i];
+      if (isEqualNode(oldEl, newEl.element)) {
+        oldHeadElements.splice(i, 1);
         return false;
@@ -215,10 +233,18 @@ }
   });
-  oldElements.forEach((t) => {
+  oldBodyElements.forEach((t) => {
     var _a2;
     return (_a2 = t.parentNode) == null ? void 0 : _a2.removeChild(t);
   });
+  oldHeadElements.forEach((t) => {
+    var _a2;
+    return (_a2 = t.parentNode) == null ? void 0 : _a2.removeChild(t);
+  });
   newElements.forEach((t) => {
-    head.insertBefore(t, headCountEl);
+    if (t.body === true) {
+      body.insertAdjacentElement("beforeend", t.element);
+    } else {
+      head.insertBefore(t.element, headCountEl);
+    }
   });
-  headCountEl.setAttribute("content", "" + (headCount - oldElements.length + newElements.length));
+  headCountEl.setAttribute("content", "" + (headCount - oldHeadElements.length + newElements.filter((t) => !t.body).length));
 };
@@ -319,7 +345,12 @@ var createHead = () => {
 var tagToString = (tag) => {
+  let isBodyTag = false;
+  if (tag.props.body) {
+    isBodyTag = true;
+    delete tag.props.body;
+  }
   let attrs = stringifyAttrs(tag.props);
   if (SELF_CLOSING_TAGS.includes(tag.tag)) {
-    return `<${tag.tag}${attrs}>`;
+    return `<${tag.tag}${attrs}${isBodyTag ? " " + BODY_TAG_ATTR_NAME : ""}>`;
   }
-  return `<${tag.tag}${attrs}>${tag.props.children || ""}</${tag.tag}>`;
+  return `<${tag.tag}${attrs}${isBodyTag ? " " + BODY_TAG_ATTR_NAME : ""}>${tag.props.children || ""}</${tag.tag}>`;
 };
@@ -331,2 +362,3 @@ var renderHeadToString = (head) => {
   let bodyAttrs = {};
+  let bodyTags = [];
   for (const tag of head.headTags) {
@@ -339,2 +371,4 @@ if (tag.tag === "title") {
       Object.assign(bodyAttrs, tag.props);
+    } else if (tag.props.body) {
+      bodyTags.push(tagToString(tag));
     } else {
@@ -358,2 +392,5 @@ tags.push(tagToString(tag));
       }));
+    },
+    get bodyTags() {
+      return bodyTags.join("");
     }
@@ -360,0 +397,0 @@ };

package.json

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

README.md

@@ -73,3 +73,3 @@ # @vueuse/head
 // `head` is created from `createHead()`
-const { headTags, htmlAttrs, bodyAttrs } = renderHeadToString(head)
+const { headTags, htmlAttrs, bodyAttrs, bodyTags } = renderHeadToString(head)
 
@@ -85,2 +85,3 @@ const finalHTML = `
     <div id="app">${appHTML}</div>
+    ${bodyTags}
   </body>
@@ -137,2 +138,15 @@
 
+To render tags at the end of the `<body>`, set `body: true` in a HeadAttrs Object.
+
+```ts
+useHead({
+  script: [
+    {
+      children: `console.log('Hello world!')`,
+      body: true
+    },
+  ],
+})
+```
+
 To set the `textContent` of an element, use the `children` attribute:
@@ -192,3 +206,3 @@
 ```ts
-interface HTMLResult {
+export interface HTMLResult {
   // Tags in `<head>`
@@ -200,2 +214,4 @@ readonly headTags: string
   readonly bodyAttrs: string
+  // Tags in `<body>`
+  readonly bodyTags: string
 }
@@ -202,0 +218,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

36279

increased by8.72%

Lines of code

947

increased by8.73%

Number of lines in readme file

224

increased by7.69%

No dependency changes