@vueuse/head - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { UnwrapRef, App, Ref } from 'vue';
+import { UnwrapRef, App, Ref, DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
 
@@ -24,3 +24,3 @@ declare type MaybeRef<T> = T | Ref<T>;
 };
-declare type Head = {
+declare type HeadClient = {
     install: (app: App) => void;
@@ -32,3 +32,3 @@ headTags: HeadTag[];
 };
-interface HTMLResult {
+interface HTMLobj {
     readonly headTags: string;
@@ -42,7 +42,8 @@ readonly htmlAttrs: string;
  */
-declare const injectHead: () => Head;
-declare const createHead: () => Head;
-declare const useHead: (obj: HeadObject | Ref<HeadObject>) => void;
-declare const renderHeadToString: (head: Head) => HTMLResult;
+declare const injectHead: () => HeadClient;
+declare const createHead: () => HeadClient;
+declare const useHead: (obj: MaybeRef<HeadObject>) => void;
+declare const renderHeadToString: (head: HeadClient) => HTMLobj;
+declare const Head: DefineComponent<{}, () => null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{} & {}>, {}>;
 
-export { HTMLResult, Head, HeadAttrs, HeadObject, HeadObjectPlain, HeadTag, createHead, injectHead, renderHeadToString, useHead };
+export { HTMLobj, Head, HeadAttrs, HeadClient, HeadObject, HeadObjectPlain, HeadTag, createHead, injectHead, renderHeadToString, useHead };

dist/index.js

@@ -7,2 +7,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
 
+
 var _vue = require('vue');
@@ -41,3 +42,3 @@
     }
-    if (value === false) {
+    if (value === false || value == null) {
       continue;
@@ -89,2 +90,4 @@ }
   for (const key of Object.keys(obj)) {
+    if (obj[key] == null)
+      continue;
     if (key === "title") {
@@ -114,5 +117,7 @@ tags.push({tag: key, props: {children: obj[key]}});
   }
-  const keys = Object.keys(attrs);
-  for (const key of keys) {
+  const keys = [];
+  for (const key in attrs) {
     const value = attrs[key];
+    if (value == null)
+      continue;
     if (value === false) {
@@ -123,2 +128,3 @@ el.removeAttribute(key);
     }
+    keys.push(key);
   }
@@ -284,2 +290,61 @@ if (keys.length) {
 };
+var vnodesToHeadObj = (nodes) => {
+  const obj = {
+    title: void 0,
+    htmlAttrs: void 0,
+    bodyAttrs: void 0,
+    base: void 0,
+    meta: [],
+    link: [],
+    style: [],
+    script: []
+  };
+  for (const node of nodes) {
+    const type = node.type === "html" ? "htmlAttrs" : node.type === "body" ? "bodyAttrs" : node.type;
+    if (typeof type !== "string" || !(type in obj))
+      continue;
+    const props = {
+      ...node.props,
+      children: Array.isArray(node.children) ? node.children[0].children : node.children
+    };
+    if (Array.isArray(obj[type])) {
+      ;
+      obj[type].push(props);
+    } else if (type === "title") {
+      obj.title = props.children;
+    } else {
+      ;
+      obj[type] = props;
+    }
+  }
+  return obj;
+};
+var Head = _vue.defineComponent.call(void 0, {
+  name: "Head",
+  setup(_, {slots}) {
+    const head = injectHead();
+    let obj;
+    _vue.onBeforeUnmount.call(void 0, () => {
+      if (obj) {
+        head.removeHeadObjs(obj);
+        head.updateDOM();
+      }
+    });
+    return () => {
+      _vue.watchEffect.call(void 0, () => {
+        if (!slots.default)
+          return;
+        if (obj) {
+          head.removeHeadObjs(obj);
+        }
+        obj = _vue.ref.call(void 0, vnodesToHeadObj(slots.default()));
+        head.addHeadObjs(obj);
+        if (IS_BROWSER) {
+          head.updateDOM();
+        }
+      });
+      return null;
+    };
+  }
+});
 
@@ -290,2 +355,3 @@
 
-exports.createHead = createHead; exports.injectHead = injectHead; exports.renderHeadToString = renderHeadToString; exports.useHead = useHead;
+
+exports.Head = Head; exports.createHead = createHead; exports.injectHead = injectHead; exports.renderHeadToString = renderHeadToString; exports.useHead = useHead;

package.json

 {
   "name": "@vueuse/head",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
@@ -61,3 +61,5 @@ "description": "Document head manager for Vue 3. SSR ready.",
     "@types/node-fetch": "^2.5.8",
+    "@vitejs/plugin-vue": "^1.1.5",
     "@vitejs/plugin-vue-jsx": "^1.0.2",
+    "@vue/compiler-sfc": "^3.0.7",
     "@vue/server-renderer": "^3.0.5",
@@ -75,3 +77,3 @@ "ava": "^3.15.0",
     "tsup": "^4.6.1",
-    "typescript": "^4.2.2",
+    "typescript": "^4.2.3",
     "vite": "^2.0.5",
@@ -78,0 +80,0 @@ "vue": "^3.0.5",

README.md

@@ -158,2 +158,22 @@ # @vueuse/head
 
+### `<Head>`
+
+Besides `useHead`, you can also manipulate head tags using the `<Head>` component:
+
+```vue
+<script setup lang="ts">
+import { Head } from '@vueuse/head'
+</script>
+
+<template>
+  <Head>
+    <title>Hello World</title>
+    <base href="/base" />
+    <html lang="en-US" class="theme-dark" />
+  </Head>
+</template>
+```
+
+Note that you need to use `<html>` and `<body>` to set `htmlAttrs` and `bodyAttrs` respectively, children for these two tags and self-closing tags like `<meta>`, `<link>` and `<base>` are also ignored.
+
 ### `renderHeadToString(head: Head)`
@@ -160,0 +180,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

26594

increased by17.35%

Lines of code

724

increased by22.09%

Number of lines in readme file

198

increased by11.24%

Worsened metrics

Dev dependency count

21

increased by10.53%

No dependency changes