@vueuse/head - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

dist/index.d.ts

@@ -100,2 +100,8 @@ import * as vue from 'vue';
 }
+interface DomUpdateCtx {
+    title: string | undefined;
+    htmlAttrs: HeadAttrs;
+    bodyAttrs: HeadAttrs;
+    actualTags: Record<string, HeadTag[]>;
+}
 interface HTMLResult {
@@ -151,3 +157,3 @@ readonly headTags: string;
     removeHeadObjs: (objs: UseHeadInput<T>) => void;
-    updateDOM: (document?: Document) => void;
+    updateDOM: (document?: Document, force?: boolean) => void;
     /**
@@ -176,2 +182,2 @@ * Array of user provided functions to hook into before the DOM is updated.
 
-export { HTMLResult, HandlesDuplicates, HasRenderPriority, HasTextContent, Head, HeadAttrs, HeadClient, HeadEntry, HeadEntryOptions, HeadObject, HeadObjectPlain, HeadTag, HookBeforeDomUpdate, HookTagsResolved, Never, RendersToBody, ResolvedHeadEntry, TagKeys, UseHeadInput, UseHeadRawInput, VueUseHeadSchema, createElement, createHead, escapeHtml, escapeJS, injectHead, isEqualNode, renderHeadToString, resolveHeadEntry, setAttrs, sortTags, stringifyAttrName, stringifyAttrValue, stringifyAttrs, tagDedupeKey, tagToString, updateElements, useHead, useHeadRaw };
+export { DomUpdateCtx, HTMLResult, HandlesDuplicates, HasRenderPriority, HasTextContent, Head, HeadAttrs, HeadClient, HeadEntry, HeadEntryOptions, HeadObject, HeadObjectPlain, HeadTag, HookBeforeDomUpdate, HookTagsResolved, Never, RendersToBody, ResolvedHeadEntry, TagKeys, UseHeadInput, UseHeadRawInput, VueUseHeadSchema, createElement, createHead, escapeHtml, escapeJS, injectHead, isEqualNode, renderHeadToString, resolveHeadEntry, setAttrs, sortTags, stringifyAttrName, stringifyAttrValue, stringifyAttrs, tagDedupeKey, tagToString, updateElements, useHead, useHeadRaw };

dist/index.js

@@ -125,23 +125,2 @@ "use strict";
 
-// src/dom/create-element.ts
-var createElement = (tag, attrs, document) => {
-  const el = document.createElement(tag);
-  for (const key of Object.keys(attrs)) {
-    if (key === "body" && attrs.body === true) {
-      el.setAttribute(BODY_TAG_ATTR_NAME, "true");
-    } else {
-      const value = attrs[key];
-      if (key === "renderPriority" || key === "key" || value === false)
-        continue;
-      if (key === "children" || key === "textContent")
-        el.textContent = value;
-      else if (key === "innerHTML")
-        el.innerHTML = value;
-      else
-        el.setAttribute(key, value);
-    }
-  }
-  return el;
-};
-
 // src/dom/utils.ts
@@ -185,2 +164,23 @@ function isEqualNode(oldTag, newTag) {
 
+// src/dom/create-element.ts
+var createElement = (tag, attrs, document) => {
+  const el = document.createElement(tag);
+  for (const key of Object.keys(attrs)) {
+    if (key === "body" && attrs.body === true) {
+      el.setAttribute(BODY_TAG_ATTR_NAME, "true");
+    } else {
+      const value = attrs[key];
+      if (key === "renderPriority" || key === "key" || value === false)
+        continue;
+      if (key === "children" || key === "textContent")
+        el.textContent = value;
+      else if (key === "innerHTML")
+        el.innerHTML = value;
+      else
+        el.setAttribute(key, value);
+    }
+  }
+  return el;
+};
+
 // src/dom/update-elements.ts
@@ -254,2 +254,17 @@ var updateElements = (document = window.document, type, tags) => {
 
+// src/dom/update-dom.ts
+var updateDOM = ({ domCtx, document, previousTags }) => {
+  if (!document)
+    document = window.document;
+  if (domCtx.title !== void 0)
+    document.title = domCtx.title;
+  setAttrs(document.documentElement, domCtx.htmlAttrs);
+  setAttrs(document.body, domCtx.bodyAttrs);
+  const tags = /* @__PURE__ */ new Set([...Object.keys(domCtx.actualTags), ...previousTags]);
+  for (const tag of tags)
+    updateElements(document, tag, domCtx.actualTags[tag] || []);
+  previousTags.clear();
+  Object.keys(domCtx.actualTags).forEach((i) => previousTags.add(i));
+};
+
 // src/components.ts
@@ -526,2 +541,4 @@ var import_vue2 = require("vue");
     allHeadObjs.push({ input: initHeadObject });
+  let domUpdateTick = null;
+  let domCtx;
   const head = {
@@ -577,39 +594,41 @@ install(app) {
     },
-    updateDOM(document = window.document) {
-      let title;
-      const htmlAttrs = {};
-      const bodyAttrs = {};
-      const actualTags = {};
+    updateDOM: (document, force) => {
+      domCtx = {
+        title: void 0,
+        htmlAttrs: {},
+        bodyAttrs: {},
+        actualTags: {}
+      };
       for (const tag of head.headTags.sort(sortTags)) {
         if (tag.tag === "title") {
-          title = tag.props.textContent;
+          domCtx.title = tag.props.textContent;
           continue;
         }
         if (tag.tag === "htmlAttrs") {
-          Object.assign(htmlAttrs, tag.props);
+          Object.assign(domCtx.htmlAttrs, tag.props);
           continue;
         }
         if (tag.tag === "bodyAttrs") {
-          Object.assign(bodyAttrs, tag.props);
+          Object.assign(domCtx.bodyAttrs, tag.props);
           continue;
         }
-        actualTags[tag.tag] = actualTags[tag.tag] || [];
-        actualTags[tag.tag].push(tag);
+        domCtx.actualTags[tag.tag] = domCtx.actualTags[tag.tag] || [];
+        domCtx.actualTags[tag.tag].push(tag);
       }
-      if (head.hookBeforeDomUpdate) {
-        for (const k in head.hookBeforeDomUpdate) {
-          const res = head.hookBeforeDomUpdate[k](actualTags);
-          if (res === false)
-            return;
+      const doDomUpdate = () => {
+        if (head.hookBeforeDomUpdate) {
+          for (const k in head.hookBeforeDomUpdate) {
+            const res = head.hookBeforeDomUpdate[k](domCtx.actualTags);
+            if (res === false)
+              return;
+          }
         }
+        updateDOM({ domCtx, document, previousTags });
+        domUpdateTick = null;
+      };
+      if (force) {
+        doDomUpdate();
+        return;
       }
-      if (title !== void 0)
-        document.title = title;
-      setAttrs(document.documentElement, htmlAttrs);
-      setAttrs(document.body, bodyAttrs);
-      const tags = /* @__PURE__ */ new Set([...Object.keys(actualTags), ...previousTags]);
-      for (const tag of tags)
-        updateElements(document, tag, actualTags[tag] || []);
-      previousTags.clear();
-      Object.keys(actualTags).forEach((i) => previousTags.add(i));
+      domUpdateTick = domUpdateTick || (0, import_vue3.nextTick)(() => doDomUpdate());
     }
@@ -616,0 +635,0 @@ };

package.json

 {
   "name": "@vueuse/head",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "packageManager": "pnpm@7.5.0",
@@ -5,0 +5,0 @@ "description": "Document head manager for Vue 3. SSR ready.",

README.md

@@ -110,3 +110,3 @@ <h1 align='center'>@vueuse/head</h1>
 
-When inserting raw inner content you should use`innerHTML`.
+When inserting raw inner content you should use `innerHTML`.
 
@@ -113,0 +113,0 @@ ```ts

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

57718

increased by2.25%

Lines of code

1460

increased by3.03%

No dependency changes