@vueuse/integrations - npm Package Compare versions

Comparing version 4.0.10 to 4.0.11

dist/index.cjs.js

@@ -9,2 +9,3 @@ 'use strict';
 var Cookie = require('universal-cookie');
+var jwt_decode = require('jwt-decode');
 var nprogress = require('nprogress');
@@ -17,2 +18,3 @@ var QRCode = require('qrcode');
 var Cookie__default = /*#__PURE__*/_interopDefaultLegacy(Cookie);
+var jwt_decode__default = /*#__PURE__*/_interopDefaultLegacy(jwt_decode);
 var nprogress__default = /*#__PURE__*/_interopDefaultLegacy(nprogress);
@@ -135,2 +137,28 @@ var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
 /**
+ * Reactive decoded jwt token.
+ *
+ * @see {@link https://vueuse.js.org/useJwt}
+ * @param jwt
+ */
+function useJwt(encodedJwt, options = {}) {
+    const encodedJwtRef = vueDemi.ref(encodedJwt);
+    const { onError, fallbackValue = null, } = options;
+    const decodeWithFallback = (encodedJwt, options) => {
+        try {
+            return jwt_decode__default['default'](encodedJwt, options);
+        }
+        catch (err) {
+            onError === null || onError === void 0 ? void 0 : onError(err);
+            return fallbackValue;
+        }
+    };
+    const header = vueDemi.computed(() => decodeWithFallback(encodedJwtRef.value, { header: true }));
+    const payload = vueDemi.computed(() => decodeWithFallback(encodedJwtRef.value));
+    return {
+        header,
+        payload,
+    };
+}
+
+/**
  * Reactive progress bar.
@@ -194,3 +222,4 @@ *
 exports.useCookies = useCookies;
+exports.useJwt = useJwt;
 exports.useNProgress = useNProgress;
 exports.useQRCode = useQRCode;

dist/index.d.ts

@@ -1,7 +0,8 @@
-import { Ref, WritableComputedRef } from 'vue-demi';
+import { Ref, ComputedRef, WritableComputedRef } from 'vue-demi';
 import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
 import universal_cookie, { CookieGetOptions, CookieSetOptions, CookieChangeListener } from 'universal-cookie';
 import { IncomingMessage } from 'http';
+import { MaybeRef } from '@vueuse/shared';
+import { InvalidTokenError, JwtPayload, JwtHeader } from 'jwt-decode';
 import nprogress, { NProgressOptions } from 'nprogress';
-import { MaybeRef } from '@vueuse/shared';
 import QRCode from 'qrcode';
@@ -74,3 +75,27 @@
 
+interface JwtOptions<Fallback> {
+    /**
+     * Value returned when encounter error on decoding
+     *
+     * @default null
+     */
+    fallbackValue?: Fallback;
+    /**
+     * Error callback for decoding
+     */
+    onError?: (error: InvalidTokenError) => void;
+}
+interface JwtResult<Payload, Header, Fallback> {
+    header: ComputedRef<Header | Fallback>;
+    payload: ComputedRef<Payload | Fallback>;
+}
 /**
+ * Reactive decoded jwt token.
+ *
+ * @see {@link https://vueuse.js.org/useJwt}
+ * @param jwt
+ */
+declare function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader, Fallback = null>(encodedJwt: MaybeRef<string>, options?: JwtOptions<Fallback>): JwtResult<Payload, Header, Fallback>;
+
+/**
  * Reactive progress bar.
@@ -99,2 +124,2 @@ *
 
-export { createCookies, useAxios, useCookies, useNProgress, useQRCode };
+export { JwtOptions, JwtResult, createCookies, useAxios, useCookies, useJwt, useNProgress, useQRCode };

dist/index.esm.js

@@ -1,5 +0,6 @@
-import { ref, isRef, computed, watchEffect, watch } from 'vue-demi';
+import { ref, computed, isRef, watchEffect, watch } from 'vue-demi';
 import axios from 'axios';
 import { tryOnMounted, tryOnUnmounted, isNumber, isClient } from '@vueuse/shared';
 import Cookie from 'universal-cookie';
+import jwt_decode from 'jwt-decode';
 import nprogress from 'nprogress';
@@ -122,2 +123,28 @@ import QRCode from 'qrcode';
 /**
+ * Reactive decoded jwt token.
+ *
+ * @see {@link https://vueuse.js.org/useJwt}
+ * @param jwt
+ */
+function useJwt(encodedJwt, options = {}) {
+    const encodedJwtRef = ref(encodedJwt);
+    const { onError, fallbackValue = null, } = options;
+    const decodeWithFallback = (encodedJwt, options) => {
+        try {
+            return jwt_decode(encodedJwt, options);
+        }
+        catch (err) {
+            onError === null || onError === void 0 ? void 0 : onError(err);
+            return fallbackValue;
+        }
+    };
+    const header = computed(() => decodeWithFallback(encodedJwtRef.value, { header: true }));
+    const payload = computed(() => decodeWithFallback(encodedJwtRef.value));
+    return {
+        header,
+        payload,
+    };
+}
+
+/**
  * Reactive progress bar.
@@ -178,2 +205,2 @@ *
 
-export { createCookies, useAxios, useCookies, useNProgress, useQRCode };
+export { createCookies, useAxios, useCookies, useJwt, useNProgress, useQRCode };

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-demi'), require('axios'), require('@vueuse/shared'), require('universal-cookie'), require('nprogress'), require('qrcode')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue-demi', 'axios', '@vueuse/shared', 'universal-cookie', 'nprogress', 'qrcode'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueUseIntegrations = {}, global.VueDemi, global.axios, global.VueUseShared, global.UniversalCookie, global.nprogress, global.QRCode));
-}(this, (function (exports, vueDemi, axios, shared, Cookie, nprogress, QRCode) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-demi'), require('axios'), require('@vueuse/shared'), require('universal-cookie'), require('jwt-decode'), require('nprogress'), require('qrcode')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue-demi', 'axios', '@vueuse/shared', 'universal-cookie', 'jwt-decode', 'nprogress', 'qrcode'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueUseIntegrations = {}, global.VueDemi, global.axios, global.VueUseShared, global.UniversalCookie, global.jwt_decode, global.nprogress, global.QRCode));
+}(this, (function (exports, vueDemi, axios, shared, Cookie, jwt_decode, nprogress, QRCode) { 'use strict';
 
@@ -11,2 +11,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var Cookie__default = /*#__PURE__*/_interopDefaultLegacy(Cookie);
+  var jwt_decode__default = /*#__PURE__*/_interopDefaultLegacy(jwt_decode);
   var nprogress__default = /*#__PURE__*/_interopDefaultLegacy(nprogress);
@@ -129,2 +130,28 @@ var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
   /**
+   * Reactive decoded jwt token.
+   *
+   * @see {@link https://vueuse.js.org/useJwt}
+   * @param jwt
+   */
+  function useJwt(encodedJwt, options = {}) {
+      const encodedJwtRef = vueDemi.ref(encodedJwt);
+      const { onError, fallbackValue = null, } = options;
+      const decodeWithFallback = (encodedJwt, options) => {
+          try {
+              return jwt_decode__default['default'](encodedJwt, options);
+          }
+          catch (err) {
+              onError === null || onError === void 0 ? void 0 : onError(err);
+              return fallbackValue;
+          }
+      };
+      const header = vueDemi.computed(() => decodeWithFallback(encodedJwtRef.value, { header: true }));
+      const payload = vueDemi.computed(() => decodeWithFallback(encodedJwtRef.value));
+      return {
+          header,
+          payload,
+      };
+  }
+
+  /**
    * Reactive progress bar.
@@ -188,2 +215,3 @@ *
   exports.useCookies = useCookies;
+  exports.useJwt = useJwt;
   exports.useNProgress = useNProgress;
@@ -190,0 +218,0 @@ exports.useQRCode = useQRCode;

dist/index.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue-demi"),require("axios"),require("@vueuse/shared"),require("universal-cookie"),require("nprogress"),require("qrcode")):"function"==typeof define&&define.amd?define(["exports","vue-demi","axios","@vueuse/shared","universal-cookie","nprogress","qrcode"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueUseIntegrations={},e.VueDemi,e.axios,e.VueUseShared,e.UniversalCookie,e.nprogress,e.QRCode)}(this,(function(e,t,n,o,r,a,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n),i=s(r),d=s(a),f=s(u);function c(e,{doNotParse:n=!1,autoUpdateDependencies:r=!1}={},a=new i.default){const u=r?[...e||[]]:e;let s=a.getAll({doNotParse:!0});const l=t.ref(0),d=()=>{const e=a.getAll({doNotParse:!0});(function(e,t,n){if(!e)return!0;for(const o of e)if(t[o]!==n[o])return!0;return!1})(u||null,e,s)&&l.value++,s=e};return o.tryOnMounted((()=>{a.addChangeListener(d)})),o.tryOnUnmounted((()=>{a.removeChangeListener(d)})),{get:(...e)=>(r&&u&&!u.includes(e[0])&&u.push(e[0]),l.value,a.get(e[0],Object.assign({doNotParse:n},e[1]))),getAll:(...e)=>(l.value,a.getAll(Object.assign({doNotParse:n},e[0]))),set:(...e)=>a.set(...e),remove:(...e)=>a.remove(...e),addChangeListener:(...e)=>a.addChangeListener(...e),removeChangeListener:(...e)=>a.removeChangeListener(...e)}}e.createCookies=function(e){const t=new i.default(e?e.headers.cookie:null);return(e,{doNotParse:n=!1,autoUpdateDependencies:o=!1}={})=>c(e,{doNotParse:n,autoUpdateDependencies:o},t)},e.useAxios=function(e,n){const o=t.ref(null),r=t.ref(void 0),a=t.ref(!1),u=t.ref(!1),s=t.ref(),i=l.default.CancelToken.source();return l.default(e,Object.assign(Object.assign({},n),{cancelToken:i.token})).then((e=>{o.value=e,r.value=e.data,a.value=!0})).catch((e=>{s.value=e,a.value=!0})),{response:o,data:r,error:s,finished:a,cancel:e=>{i.cancel(e),u.value=!0},canceled:u}},e.useCookies=c,e.useNProgress=function(e=null,n){const r=t.isRef(e)?e:t.ref(e),a=t.computed({set:e=>e?d.default.start():d.default.done(),get:()=>o.isNumber(r.value)&&r.value<1});n&&d.default.configure(n);const u=d.default.set;return d.default.set=e=>(r.value=e,u.call(d.default,e)),t.watchEffect((()=>{o.isNumber(r.value)&&u.call(d.default,r.value)})),o.tryOnUnmounted(d.default.remove),{isLoading:a,progress:r,start:d.default.start,done:d.default.done,remove:()=>{r.value=null,d.default.remove()}}},e.useQRCode=function(e,n){const r=t.ref(e),a=t.ref("");return t.watch(r,(async e=>{r.value&&o.isClient&&(a.value=await f.default.toDataURL(e,n))}),{immediate:!0}),a},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue-demi"),require("axios"),require("@vueuse/shared"),require("universal-cookie"),require("jwt-decode"),require("nprogress"),require("qrcode")):"function"==typeof define&&define.amd?define(["exports","vue-demi","axios","@vueuse/shared","universal-cookie","jwt-decode","nprogress","qrcode"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueUseIntegrations={},e.VueDemi,e.axios,e.VueUseShared,e.UniversalCookie,e.jwt_decode,e.nprogress,e.QRCode)}(this,(function(e,t,n,r,o,a,u,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(n),i=l(o),c=l(a),f=l(u),v=l(s);function g(e,{doNotParse:n=!1,autoUpdateDependencies:o=!1}={},a=new i.default){const u=o?[...e||[]]:e;let s=a.getAll({doNotParse:!0});const l=t.ref(0),d=()=>{const e=a.getAll({doNotParse:!0});(function(e,t,n){if(!e)return!0;for(const r of e)if(t[r]!==n[r])return!0;return!1})(u||null,e,s)&&l.value++,s=e};return r.tryOnMounted((()=>{a.addChangeListener(d)})),r.tryOnUnmounted((()=>{a.removeChangeListener(d)})),{get:(...e)=>(o&&u&&!u.includes(e[0])&&u.push(e[0]),l.value,a.get(e[0],Object.assign({doNotParse:n},e[1]))),getAll:(...e)=>(l.value,a.getAll(Object.assign({doNotParse:n},e[0]))),set:(...e)=>a.set(...e),remove:(...e)=>a.remove(...e),addChangeListener:(...e)=>a.addChangeListener(...e),removeChangeListener:(...e)=>a.removeChangeListener(...e)}}e.createCookies=function(e){const t=new i.default(e?e.headers.cookie:null);return(e,{doNotParse:n=!1,autoUpdateDependencies:r=!1}={})=>g(e,{doNotParse:n,autoUpdateDependencies:r},t)},e.useAxios=function(e,n){const r=t.ref(null),o=t.ref(void 0),a=t.ref(!1),u=t.ref(!1),s=t.ref(),l=d.default.CancelToken.source();return d.default(e,Object.assign(Object.assign({},n),{cancelToken:l.token})).then((e=>{r.value=e,o.value=e.data,a.value=!0})).catch((e=>{s.value=e,a.value=!0})),{response:r,data:o,error:s,finished:a,cancel:e=>{l.cancel(e),u.value=!0},canceled:u}},e.useCookies=g,e.useJwt=function(e,n={}){const r=t.ref(e),{onError:o,fallbackValue:a=null}=n,u=(e,t)=>{try{return c.default(e,t)}catch(e){return null==o||o(e),a}};return{header:t.computed((()=>u(r.value,{header:!0}))),payload:t.computed((()=>u(r.value)))}},e.useNProgress=function(e=null,n){const o=t.isRef(e)?e:t.ref(e),a=t.computed({set:e=>e?f.default.start():f.default.done(),get:()=>r.isNumber(o.value)&&o.value<1});n&&f.default.configure(n);const u=f.default.set;return f.default.set=e=>(o.value=e,u.call(f.default,e)),t.watchEffect((()=>{r.isNumber(o.value)&&u.call(f.default,o.value)})),r.tryOnUnmounted(f.default.remove),{isLoading:a,progress:o,start:f.default.start,done:f.default.done,remove:()=>{o.value=null,f.default.remove()}}},e.useQRCode=function(e,n){const o=t.ref(e),a=t.ref("");return t.watch(o,(async e=>{o.value&&r.isClient&&(a.value=await v.default.toDataURL(e,n))}),{immediate:!0}),a},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@vueuse/integrations",
   "description": "Integration wrappers for utility libraries",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "main": "./dist/index.cjs.js",
@@ -28,5 +28,5 @@ "types": "./dist/index.d.ts",
   },
-  "homepage": "https://github.com/vueuse/vueuse/tree/master/packages/integrations#readme",
+  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/integrations#readme",
   "dependencies": {
-    "@vueuse/shared": "4.0.10",
+    "@vueuse/shared": "4.0.11",
     "vue-demi": "latest"
@@ -36,2 +36,3 @@ },
     "axios": "^0.21.1",
+    "jwt-decode": "^3.1.2",
     "nprogress": "^0.2.0",
@@ -38,0 +39,0 @@ "qrcode": "^1.4.4",

README.md

@@ -19,2 +19,3 @@ # @vueuse/integrations
   - [`useCookies`](https://vueuse.js.org/integrations/useCookies/) — wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie)
+  - [`useJwt`](https://vueuse.js.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
   - [`useNProgress`](https://vueuse.js.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
@@ -21,0 +22,0 @@ - [`useQRCode`](https://vueuse.js.org/integrations/useQRCode/) — wrapper for [`qrcode`](https://github.com/soldair/node-qrcode)

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

36348

increased by12.77%

Lines of code

747

increased by16.54%

Number of lines in readme file

29

increased by3.57%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@vueuse/shared@4.0.11(transitive)

• + Addedjwt-decode@3.1.2(transitive)

• - Removed@vueuse/shared@4.0.10(transitive)

• Updated@vueuse/shared@4.0.11