@vueuse/head - npm Package Compare versions

Comparing version 0.1.0 to 0.1.3

dist/index.d.ts

 import { App } from 'vue';
 
-declare type HeadObjAttrs = {
+declare type Attrs = {
     [k: string]: any;
@@ -8,7 +8,9 @@ };
     title?: string;
-    meta?: HeadObjAttrs[];
-    link?: HeadObjAttrs[];
-    base?: HeadObjAttrs;
-    style?: HeadObjAttrs[];
-    script?: HeadObjAttrs[];
+    meta?: Attrs[];
+    link?: Attrs[];
+    base?: Attrs;
+    style?: Attrs[];
+    script?: Attrs[];
+    htmlAttrs?: Attrs;
+    bodyAttrs?: Attrs;
 };
@@ -23,3 +25,2 @@ declare type HeadTag = {
     install: (app: App) => void;
-    title: string;
     headTags: HeadTag[];
@@ -33,6 +34,7 @@ addHeadTags: (tags: HeadTag[]) => void;
 declare const renderHeadToString: (head: Head) => {
-    readonly titleTag: string;
     readonly headTags: string;
+    readonly htmlAttrs: string;
+    readonly bodyAttrs: string;
 };
 
 export { createHead, renderHeadToString, useHead };

dist/index.js

@@ -7,3 +7,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
 var HEAD_COUNT_KEY = `head:count`;
-var IGNORED_ATTRS = ["key"];
+var HEAD_ATTRS_KEY = `data-head-attrs`;
 
@@ -15,8 +15,5 @@ // src/create-element.ts
     let value = attrs[key];
-    if (IGNORED_ATTRS.includes(key) || value === false) {
+    if (key === "key" || value === false) {
       continue;
     }
-    if (Array.isArray(value)) {
-      value = value.join(" ");
-    }
     if (key === "children") {
@@ -36,3 +33,3 @@ el.textContent = value;
   for (let [key, value] of Object.entries(attributes)) {
-    if (IGNORED_ATTRS.includes(key)) {
+    if (key === "children" || key === "key") {
       continue;
@@ -43,5 +40,2 @@ }
     }
-    if (Array.isArray(value)) {
-      value = value.join(" ");
-    }
     let attribute = htmlEscape(key);
@@ -82,6 +76,3 @@ if (value !== true) {
     if (key === "title") {
-      tags.push({
-        tag: key,
-        props: {children: obj[key]}
-      });
+      tags.push({tag: key, props: {children: obj[key]}});
     } else if (key === "base") {
@@ -102,2 +93,20 @@ tags.push({tag: key, props: {key: "default", ...obj[key]}});
 };
+var setAttrs = (el, attrs) => {
+  const existingAttrs = el.getAttribute(HEAD_ATTRS_KEY);
+  if (existingAttrs) {
+    for (const key of existingAttrs.split(",")) {
+      el.removeAttribute(key);
+    }
+  }
+  const keys = Object.keys(attrs);
+  for (const key of keys) {
+    const value = attrs[key];
+    if (value === false) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, value);
+    }
+  }
+  el.setAttribute(HEAD_ATTRS_KEY, keys.join(","));
+};
 var insertTags = (tags) => {
@@ -120,6 +129,29 @@ const head = document.head;
   }
-  const newElements = tags.map((tag) => createElement(tag.tag, tag.props));
+  const newElements = [];
+  let title;
+  let htmlAttrs = {};
+  let bodyAttrs = {};
+  for (const tag of tags) {
+    if (tag.tag === "title") {
+      title = tag.props.children;
+      continue;
+    }
+    if (tag.tag === "htmlAttrs") {
+      Object.assign(htmlAttrs, tag.props);
+      continue;
+    }
+    if (tag.tag === "bodyAttrs") {
+      Object.assign(bodyAttrs, tag.props);
+      continue;
+    }
+    newElements.push(createElement(tag.tag, tag.props));
+  }
   oldElements.forEach((el) => {
     el.remove();
   });
+  if (title !== void 0) {
+    document.title = title;
+  }
+  setAttrs(document.documentElement, htmlAttrs);
+  setAttrs(document.body, bodyAttrs);
   newElements.forEach((el) => {
@@ -138,9 +170,4 @@ head.insertBefore(el, headCountEl);
     headTags,
-    title: "",
     addHeadTags(tags) {
       tags.forEach((tag) => {
-        if (tag.tag === "title") {
-          head.title = tag.props.children;
-          return;
-        }
         if (tag.tag === "meta" || tag.tag === "base") {
@@ -176,3 +203,2 @@ const key = getTagKey(tag.props);
     updateDOM() {
-      document.title = head.title;
       insertTags(headTags);
@@ -216,9 +242,33 @@ }
 var renderHeadToString = (head) => {
+  const tags = [];
+  let titleTag = "";
+  let htmlAttrs = {};
+  let bodyAttrs = {};
+  for (const tag of head.headTags) {
+    if (tag.tag === "title") {
+      titleTag = tagToString(tag);
+    } else if (tag.tag === "htmlAttrs") {
+      Object.assign(htmlAttrs, tag.props);
+    } else if (tag.tag === "bodyAttrs") {
+      Object.assign(bodyAttrs, tag.props);
+    } else {
+      tags.push(tagToString(tag));
+    }
+  }
+  tags.push(`<meta name="${HEAD_COUNT_KEY}" content="${tags.length}" />`);
   return {
-    get titleTag() {
-      return `<title>${head.title}</title>`;
+    get headTags() {
+      return titleTag + tags.join("");
     },
-    get headTags() {
-      return `${head.headTags.map((tag) => tagToString(tag)).join("\n")}
-<meta name="${HEAD_COUNT_KEY}" content="${head.headTags.length}" />`;
+    get htmlAttrs() {
+      return stringifyAttrs({
+        ...htmlAttrs,
+        [HEAD_ATTRS_KEY]: Object.keys(htmlAttrs).join(",")
+      });
+    },
+    get bodyAttrs() {
+      return stringifyAttrs({
+        ...bodyAttrs,
+        [HEAD_ATTRS_KEY]: Object.keys(bodyAttrs).join(",")
+      });
     }
@@ -225,0 +275,0 @@ };

package.json

 {
   "name": "@vueuse/head",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "license": "MIT",
@@ -19,2 +19,5 @@ "description": "Document head manager for Vue 3. SSR ready.",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
@@ -35,2 +38,12 @@ "test": "start-server-and-test example http://localhost:3000 test:e2e",
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
@@ -42,2 +55,4 @@ "@egoist/prettier-config": "^0.1.0",
     "esbuild-register": "^1.2.1",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.3",
     "playwright-chromium": "^1.7.1",
@@ -44,0 +59,0 @@ "prettier": "^2.2.1",

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

Worsened metrics

Total package byte prevSize

20719

decreased by-37.49%

Dev dependency count

17

increased by13.33%

Number of package files

7

decreased by-63.16%

Lines of code

565

decreased by-40.65%

No dependency changes