@vueuse/head - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

CHANGELOG.md

@@ -0,1 +1,17 @@
+# [0.2.0](https://github.com/vueuse/head/compare/v0.1.3...v0.2.0) (2021-01-19)
+
+
+### Bug Fixes
+
+* reset head in onBeforeUnmount instead ([87efe1a](https://github.com/vueuse/head/commit/87efe1a9f6189173765e2199901bf6039a8f512d))
+
+
+### Features
+
+* make `document` of updateDOM configurable ([#7](https://github.com/vueuse/head/issues/7)) ([b48809a](https://github.com/vueuse/head/commit/b48809a8f005159bca7a09f32bdd3ec3213d7024))
+* useHead accepts more types of argument ([#6](https://github.com/vueuse/head/issues/6)) ([76cdda7](https://github.com/vueuse/head/commit/76cdda75a1d69fa7bc8205b079c84af51be29862))
+* **types:** expose types ([#5](https://github.com/vueuse/head/issues/5)) ([081c4a8](https://github.com/vueuse/head/commit/081c4a80e4ab3a8b1513d0a2297877a29a0441fb))
+
+
+
 ## [0.1.3](https://github.com/vueuse/head/compare/v0.1.2...v0.1.3) (2021-01-18)
@@ -2,0 +18,0 @@

dist/index.d.ts

@@ -1,16 +0,18 @@
-import { App } from 'vue';
+import { UnwrapRef, App, Ref } from 'vue';
 
-declare type Attrs = {
+declare type MaybeRef<T> = T | Ref<T>;
+declare type HeadAttrs = {
     [k: string]: any;
 };
-declare type HeadObj = {
-    title?: string;
-    meta?: Attrs[];
-    link?: Attrs[];
-    base?: Attrs;
-    style?: Attrs[];
-    script?: Attrs[];
-    htmlAttrs?: Attrs;
-    bodyAttrs?: Attrs;
+declare type HeadObject = {
+    title?: MaybeRef<string>;
+    meta?: MaybeRef<HeadAttrs[]>;
+    link?: MaybeRef<HeadAttrs[]>;
+    base?: MaybeRef<HeadAttrs>;
+    style?: MaybeRef<HeadAttrs[]>;
+    script?: MaybeRef<HeadAttrs[]>;
+    htmlAttrs?: MaybeRef<HeadAttrs>;
+    bodyAttrs?: MaybeRef<HeadAttrs>;
 };
+declare type HeadObjectPlain = UnwrapRef<HeadObject>;
 declare type HeadTag = {
@@ -27,12 +29,13 @@ tag: string;
     removeHeadTags: (tags: HeadTag[]) => void;
-    updateDOM: () => void;
+    updateDOM: (document?: Document) => void;
 };
-declare const createHead: () => Head;
-declare const useHead: (fn: () => HeadObj) => void;
-declare const renderHeadToString: (head: Head) => {
+interface HTMLResult {
     readonly headTags: string;
     readonly htmlAttrs: string;
     readonly bodyAttrs: string;
-};
+}
+declare const createHead: () => Head;
+declare const useHead: (obj: HeadObject | Ref<HeadObject> | (() => HeadObject)) => void;
+declare const renderHeadToString: (head: Head) => HTMLResult;
 
-export { createHead, renderHeadToString, useHead };
+export { HTMLResult, Head, HeadAttrs, HeadObject, HeadObjectPlain, HeadTag, createHead, renderHeadToString, useHead };

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
+
+
+
+
+
+
 var _vue = require('vue');
@@ -106,4 +112,4 @@
 };
-var insertTags = (tags) => {
-  const head = document.head;
+var insertTags = (tags, document2 = window.document) => {
+  const head = document2.head;
   let headCountEl = head.querySelector(`meta[name="${HEAD_COUNT_KEY}"]`);
@@ -119,3 +125,3 @@ const headCount = headCountEl ? Number(headCountEl.getAttribute("content")) : 0;
   } else {
-    headCountEl = document.createElement("meta");
+    headCountEl = document2.createElement("meta");
     headCountEl.setAttribute("name", HEAD_COUNT_KEY);
@@ -148,6 +154,6 @@ headCountEl.setAttribute("content", "0");
   if (title !== void 0) {
-    document.title = title;
+    document2.title = title;
   }
-  setAttrs(document.documentElement, htmlAttrs);
-  setAttrs(document.body, bodyAttrs);
+  setAttrs(document2.documentElement, htmlAttrs);
+  setAttrs(document2.body, bodyAttrs);
   newElements.forEach((el) => {
@@ -197,4 +203,4 @@ head.insertBefore(el, headCountEl);
     },
-    updateDOM() {
-      insertTags(headTags);
+    updateDOM(document2) {
+      insertTags(headTags, document2);
     }
@@ -205,3 +211,4 @@ };
 var IS_BROWSER = typeof window !== "undefined";
-var useHead = (fn) => {
+var useHead = (obj) => {
+  const headObj = typeof obj === "function" ? _vue.computed.call(void 0, obj) : _vue.ref.call(void 0, obj);
   const head = injectHead();
@@ -214,8 +221,7 @@ if (IS_BROWSER) {
       }
-      const headObj2 = fn();
-      tags = headObjToTags(headObj2);
+      tags = headObjToTags(headObj.value);
       head.addHeadTags(tags);
       head.updateDOM();
     });
-    _vue.onUnmounted.call(void 0, () => {
+    _vue.onBeforeUnmount.call(void 0, () => {
       if (tags) {
@@ -226,6 +232,5 @@ head.removeHeadTags(tags);
     });
-    return;
+  } else {
+    head.addHeadTags(headObjToTags(headObj.value));
   }
-  const headObj = fn();
-  head.addHeadTags(headObjToTags(headObj));
 };
@@ -232,0 +237,0 @@ var tagToString = (tag) => {

package.json

 {
   "name": "@vueuse/head",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
@@ -57,3 +57,3 @@ "description": "Document head manager for Vue 3. SSR ready.",
     "prettier": "^2.2.1",
-    "shipjs": "^0.23.0",
+    "shipjs": "0.23.0",
     "start-server-and-test": "^1.11.7",
@@ -60,0 +60,0 @@ "tsup": "^3.11.0",

README.md

@@ -5,2 +5,4 @@ # @vueuse/head
 
+[![NPM version](https://img.shields.io/npm/v/@vueuse/head?color=a1b858)](https://www.npmjs.com/package/@vueuse/head)
+
 **💛 Support the ongoing development of this project by [becoming a GitHub Sponsor](https://github.com/sponsors/egoist)**.
@@ -41,3 +43,3 @@
   setup() {
-    useHead(() => ({
+    useHead({
       title: `Website title`,
@@ -50,3 +52,3 @@ meta: [
       ],
-    }))
+    })
   },
@@ -89,17 +91,17 @@ })
 
-### `useHead(() => HeadObj)`
+### `useHead(head: HeadObject | Ref<HeadObject> | (() => HeadObject))`
 
 ```ts
-interface HeadObj {
-  title?: string
-  base?: Attrs
-  meta?: Attrs[]
-  link?: Attrs[]
-  style?: Attrs[]
-  script?: Attrs[]
-  htmlAttrs?: Attrs
-  bodyAttrs?: Attrs
+interface HeadObject {
+  title?: MaybeRef<string>
+  meta?: MaybeRef<HeadAttrs[]>
+  link?: MaybeRef<HeadAttrs[]>
+  base?: MaybeRef<HeadAttrs>
+  style?: MaybeRef<HeadAttrs[]>
+  script?: MaybeRef<HeadAttrs[]>
+  htmlAttrs?: MaybeRef<HeadAttrs>
+  bodyAttrs?: MaybeRef<HeadAttrs>
 }
 
-interface Attrs {
+interface HeadAttrs {
   [attrName: string]: any
@@ -140,8 +142,20 @@ }
 
+`useHead` also takes reactive object or ref as the argument, for example:
+
+```ts
+const head = reactive({ title: 'Website Title' })
+useHead(head)
+```
+
+```ts
+const title = ref('Website Title')
+useHead({ title })
+```
+
 ### `renderHeadToString(head: Head)`
 
-- Returns: `HtmlResult`
+- Returns: `HTMLResult`
 
 ```ts
-interface HtmlResult {
+interface HTMLResult {
   // Tags in `<head>`
@@ -148,0 +162,0 @@ readonly headTags: string

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

22610

increased by9.13%

Lines of code

572

increased by1.24%

Number of lines in readme file

170

increased by8.97%

No dependency changes