overlayscrollbars-vue - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

 # Changelog
 
+## 0.5.0
+
+### Features
+
+Added the possibility to `defer` the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) 
+- `OverlayScrollbarsComponent` accepts now the `defer` property
+- `useOverlayScrollbars` params accept now the `defer` key
+- `useOverlayScrollbars` will now always try to destroy the instance if the component unmounts.
+
+### Breaking Changes
+
+- Because initialization can be deferred now, the `initialize` function of the `useOverlayScrollbars` composable isn't returning the instance anymore. Use the `instance` function of the `useOverlayScrollbars` composable instead.
+
 ## 0.4.0
@@ -4,0 +17,0 @@

overlayscrollbars-vue.es.js

@@ -1,23 +0,53 @@
-import { shallowRef as m, watch as f, unref as d, defineComponent as h, ref as k, toRefs as w, onUnmounted as z, watchPostEffect as C, openBlock as x, createBlock as g, resolveDynamicComponent as B, withCtx as D, createElementVNode as I, renderSlot as U } from "vue";
-import { OverlayScrollbars as c } from "overlayscrollbars";
-const j = (u) => {
-  let t = null, s, r;
-  const l = m(u || {});
-  return f(
+import { shallowRef as I, watch as b, unref as m, onUnmounted as k, defineComponent as E, ref as R, toRefs as A, watchPostEffect as D, openBlock as h, createBlock as z, resolveDynamicComponent as j, withCtx as q, createElementVNode as x, renderSlot as B } from "vue";
+import { OverlayScrollbars as y } from "overlayscrollbars";
+const F = () => {
+  if (typeof window > "u") {
+    const r = () => {
+    };
+    return [r, r];
+  }
+  let i, t;
+  const o = window, l = typeof o.requestIdleCallback == "function", s = o.requestAnimationFrame, n = o.cancelAnimationFrame, a = l ? o.requestIdleCallback : s, c = l ? o.cancelIdleCallback : n, e = () => {
+    c(i), n(t);
+  };
+  return [
+    (r, v) => {
+      e(), i = a(
+        l ? () => {
+          e(), t = s(r);
+        } : r,
+        typeof v == "object" ? v : { timeout: 2233 }
+      );
+    },
+    e
+  ];
+}, g = (i) => {
+  let t = null, o, l, s;
+  const n = I(i || {}), [a, c] = F();
+  return b(
     () => {
       var e;
-      return d((e = l.value) == null ? void 0 : e.options);
+      return m((e = n.value) == null ? void 0 : e.defer);
     },
     (e) => {
-      s = e, c.valid(t) && t.options(s || {}, !0);
+      s = e;
     },
     { deep: !0, immediate: !0 }
-  ), f(
+  ), b(
     () => {
       var e;
-      return d((e = l.value) == null ? void 0 : e.events);
+      return m((e = n.value) == null ? void 0 : e.options);
     },
     (e) => {
-      r = e, c.valid(t) && t.on(
-        r || {},
+      o = e, y.valid(t) && t.options(o || {}, !0);
+    },
+    { deep: !0, immediate: !0 }
+  ), b(
+    () => {
+      var e;
+      return m((e = n.value) == null ? void 0 : e.events);
+    },
+    (e) => {
+      l = e, y.valid(t) && t.on(
+        l || {},
         !0
@@ -27,7 +57,14 @@ );
     { deep: !0, immediate: !0 }
-  ), [
-    (e) => c.valid(t) ? t : t = c(e, s || {}, r || {}),
+  ), k(() => {
+    c(), t == null || t.destroy();
+  }), [
+    (e) => {
+      if (y.valid(t))
+        return t;
+      const r = () => t = y(e, o || {}, l || {});
+      s ? a(r, s) : r();
+    },
     () => t
   ];
-}, P = /* @__PURE__ */ h({
+}, P = /* @__PURE__ */ E({
   __name: "OverlayScrollbarsComponent",
@@ -40,7 +77,8 @@ props: {
     options: { type: Object },
-    events: { type: Object }
+    events: { type: Object },
+    defer: { type: [Boolean, Object] }
   },
   emits: ["osInitialized", "osUpdated", "osDestroyed", "osScroll"],
-  setup(u, { expose: t, emit: s }) {
-    const r = u, l = {
+  setup(i, { expose: t, emit: o }) {
+    const l = i, s = {
       initialized: "osInitialized",
@@ -50,48 +88,45 @@ updated: "osUpdated",
       scroll: "osScroll"
-    }, e = m(null), v = m(null), y = k(), { element: S, options: _, events: E } = w(r), [O, b] = j({ options: _, events: y });
+    }, n = I(null), a = I(null), c = R(), { element: e, options: r, events: v, defer: C } = A(l), [O, S] = g({ options: r, events: c, defer: C });
     return t({
-      osInstance: b,
-      getElement: () => e.value
-    }), z(() => {
-      var o;
-      return (o = b()) == null ? void 0 : o.destroy();
-    }), C((o) => {
-      const { value: i } = e, { value: n } = v;
-      if (i && n) {
-        const a = O({
-          target: i,
-          elements: {
-            viewport: n,
-            content: n
-          }
-        });
-        o(() => a.destroy());
-      }
-    }), f(
-      () => d(E),
-      (o) => {
-        const i = o || {};
-        y.value = Object.keys(l).reduce((n, a) => {
-          const p = i[a];
-          return n[a] = [
-            (...R) => s(
-              l[a],
-              ...R
+      osInstance: S,
+      getElement: () => n.value
+    }), D((f) => {
+      const { value: p } = n, { value: d } = a;
+      p && d && (O({
+        target: p,
+        elements: {
+          viewport: d,
+          content: d
+        }
+      }), f(() => {
+        var u;
+        return (u = S()) == null ? void 0 : u.destroy();
+      }));
+    }), b(
+      () => m(v),
+      (f) => {
+        const p = f || {};
+        c.value = Object.keys(s).reduce((d, u) => {
+          const w = p[u];
+          return d[u] = [
+            (..._) => o(
+              s[u],
+              ..._
             ),
-            ...(Array.isArray(p) ? p : [p]).filter(Boolean)
-          ], n;
+            ...(Array.isArray(w) ? w : [w]).filter(Boolean)
+          ], d;
         }, {});
       },
       { deep: !0, immediate: !0 }
-    ), (o, i) => (x(), g(B(d(S)), {
+    ), (f, p) => (h(), z(j(m(e)), {
       "data-overlayscrollbars-initialize": "",
       ref_key: "elementRef",
-      ref: e
+      ref: n
     }, {
-      default: D(() => [
-        I("div", {
+      default: q(() => [
+        x("div", {
           ref_key: "slotRef",
-          ref: v
+          ref: a
         }, [
-          U(o.$slots, "default")
+          B(f.$slots, "default")
         ], 512)
@@ -105,4 +140,4 @@ ]),
   P as OverlayScrollbarsComponent,
-  j as useOverlayScrollbars
+  g as useOverlayScrollbars
 };
 //# sourceMappingURL=overlayscrollbars-vue.es.js.map

overlayscrollbars-vue.umd.js

@@ -1,2 +0,2 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("overlayscrollbars")):typeof define=="function"&&define.amd?define(["exports","vue","overlayscrollbars"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.OverlayScrollbarsVue={},n.Vue,n.OverlayScrollbarsGlobal))})(this,function(n,e,f){"use strict";const m=u=>{let o=null,s,i;const a=e.shallowRef(u||{});return e.watch(()=>{var t;return e.unref((t=a.value)==null?void 0:t.options)},t=>{s=t,f.OverlayScrollbars.valid(o)&&o.options(s||{},!0)},{deep:!0,immediate:!0}),e.watch(()=>{var t;return e.unref((t=a.value)==null?void 0:t.events)},t=>{i=t,f.OverlayScrollbars.valid(o)&&o.on(i||{},!0)},{deep:!0,immediate:!0}),[t=>f.OverlayScrollbars.valid(o)?o:o=f.OverlayScrollbars(t,s||{},i||{}),()=>o]},b=e.defineComponent({__name:"OverlayScrollbarsComponent",props:{element:{type:String,default:"div"},options:{type:Object},events:{type:Object}},emits:["osInitialized","osUpdated","osDestroyed","osScroll"],setup(u,{expose:o,emit:s}){const i=u,a={initialized:"osInitialized",updated:"osUpdated",destroyed:"osDestroyed",scroll:"osScroll"},t=e.shallowRef(null),y=e.shallowRef(null),v=e.ref(),{element:O,options:h,events:_}=e.toRefs(i),[w,S]=m({options:h,events:v});return o({osInstance:S,getElement:()=>t.value}),e.onUnmounted(()=>{var r;return(r=S())==null?void 0:r.destroy()}),e.watchPostEffect(r=>{const{value:c}=t,{value:l}=y;if(c&&l){const d=w({target:c,elements:{viewport:l,content:l}});r(()=>d.destroy())}}),e.watch(()=>e.unref(_),r=>{const c=r||{};v.value=Object.keys(a).reduce((l,d)=>{const p=c[d];return l[d]=[(...R)=>s(a[d],...R),...(Array.isArray(p)?p:[p]).filter(Boolean)],l},{})},{deep:!0,immediate:!0}),(r,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(O)),{"data-overlayscrollbars-initialize":"",ref_key:"elementRef",ref:t},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"slotRef",ref:y},[e.renderSlot(r.$slots,"default")],512)]),_:3},512))}});n.OverlayScrollbarsComponent=b,n.useOverlayScrollbars=m,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("overlayscrollbars")):typeof define=="function"&&define.amd?define(["exports","vue","overlayscrollbars"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.OverlayScrollbarsVue={},s.Vue,s.OverlayScrollbarsGlobal))})(this,function(s,e,b){"use strict";const h=()=>{if(typeof window>"u"){const l=()=>{};return[l,l]}let c,o;const r=window,i=typeof r.requestIdleCallback=="function",a=r.requestAnimationFrame,n=r.cancelAnimationFrame,d=i?r.requestIdleCallback:a,f=i?r.cancelIdleCallback:n,t=()=>{f(c),n(o)};return[(l,S)=>{t(),c=d(i?()=>{t(),o=a(l)}:l,typeof S=="object"?S:{timeout:2233})},t]},w=c=>{let o=null,r,i,a;const n=e.shallowRef(c||{}),[d,f]=h();return e.watch(()=>{var t;return e.unref((t=n.value)==null?void 0:t.defer)},t=>{a=t},{deep:!0,immediate:!0}),e.watch(()=>{var t;return e.unref((t=n.value)==null?void 0:t.options)},t=>{r=t,b.OverlayScrollbars.valid(o)&&o.options(r||{},!0)},{deep:!0,immediate:!0}),e.watch(()=>{var t;return e.unref((t=n.value)==null?void 0:t.events)},t=>{i=t,b.OverlayScrollbars.valid(o)&&o.on(i||{},!0)},{deep:!0,immediate:!0}),e.onUnmounted(()=>{f(),o==null||o.destroy()}),[t=>{if(b.OverlayScrollbars.valid(o))return o;const l=()=>o=b.OverlayScrollbars(t,r||{},i||{});a?d(l,a):l()},()=>o]},I=e.defineComponent({__name:"OverlayScrollbarsComponent",props:{element:{type:String,default:"div"},options:{type:Object},events:{type:Object},defer:{type:[Boolean,Object]}},emits:["osInitialized","osUpdated","osDestroyed","osScroll"],setup(c,{expose:o,emit:r}){const i=c,a={initialized:"osInitialized",updated:"osUpdated",destroyed:"osDestroyed",scroll:"osScroll"},n=e.shallowRef(null),d=e.shallowRef(null),f=e.ref(),{element:t,options:l,events:S,defer:_}=e.toRefs(i),[R,O]=w({options:l,events:f,defer:_});return o({osInstance:O,getElement:()=>n.value}),e.watchPostEffect(m=>{const{value:y}=n,{value:u}=d;y&&u&&(R({target:y,elements:{viewport:u,content:u}}),m(()=>{var p;return(p=O())==null?void 0:p.destroy()}))}),e.watch(()=>e.unref(S),m=>{const y=m||{};f.value=Object.keys(a).reduce((u,p)=>{const v=y[p];return u[p]=[(...C)=>r(a[p],...C),...(Array.isArray(v)?v:[v]).filter(Boolean)],u},{})},{deep:!0,immediate:!0}),(m,y)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(t)),{"data-overlayscrollbars-initialize":"",ref_key:"elementRef",ref:n},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"slotRef",ref:d},[e.renderSlot(m.$slots,"default")],512)]),_:3},512))}});s.OverlayScrollbarsComponent=I,s.useOverlayScrollbars=w,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=overlayscrollbars-vue.umd.js.map

package.json

 {
   "name": "overlayscrollbars-vue",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "OverlayScrollbars for Vue.",
@@ -5,0 +5,0 @@ "author": "Rene Haas | KingSora",

README.md

@@ -60,3 +60,3 @@ <div align="center">
 
-<OverlayScrollbarsComponent>
+<OverlayScrollbarsComponent defer>
   example content
@@ -68,3 +68,3 @@ </OverlayScrollbarsComponent>
 
-It has three optional properties: `element`, `options` and `events`.
+It has optional properties:
 
@@ -74,3 +74,6 @@ - `element`: accepts a `string` which represents the tag of the root element.
 - `events`: accepts an `object` which represents the OverlayScrollbars events.
+- `defer`: accepts an `boolean` or `object`. Defers the initialization to a point in time when the browser is idle.
 
+> __Note__: Its **highly recommended** to use the `defer` option whenever possible to defer the initialization to a browser's idle period.
+
 ```jsx
@@ -82,2 +85,3 @@ // example usage
   events={{ scroll: () => { /* ... */ } }}
+  defer
 />
@@ -123,3 +127,3 @@ ```
     const div = ref(null);
-    const reactiveParams = reactive({ options, events });
+    const reactiveParams = reactive({ options, events, defer });
     const [initialize, instance] = useOverlayScrollbars(reactiveParams);
@@ -140,2 +144,3 @@
      *   events,
+     *   defer,
      * });
@@ -163,8 +168,9 @@ *
 Parameters are optional and similar to the `OverlayScrollbarsComponent`.
-Its an `object` with two optional properties:
+Its an `object` with optional properties:
 
 - `options`: accepts an `object` which represents the OverlayScrollbars options.
 - `events`: accepts an `object` which represents the OverlayScrollbars events.
+- `defer`: accepts an `boolean` or `object`. Defers the initialization to a point in time when the browser is idle.
 
-> __Note__: The object can be a normal, `reactive` or `ref` object. This also applies to the `options` and `events` fields.
+> __Note__: The object can be a normal, `reactive` or `ref` object. This also applies to all fields.
 
@@ -171,0 +177,0 @@ ### Return

types/OverlayScrollbarsComponent.types.d.ts

@@ -6,2 +6,3 @@ import type { OverlayScrollbars, PartialOptions, EventListeners } from 'overlayscrollbars';
     events?: EventListeners | false | null;
+    defer?: boolean | IdleRequestOptions;
 }
@@ -8,0 +9,0 @@ export interface OverlayScrollbarsComponentRef {

types/OverlayScrollbarsComponent.vue.d.ts

@@ -46,2 +46,5 @@ import type { PropType } from 'vue';
             };
+            defer: {
+                type: PropType<boolean | IdleRequestOptions | undefined>;
+            };
         }>> & {
@@ -104,2 +107,5 @@ onOsInitialized?: ((instance: import("overlayscrollbars").OverlayScrollbars) => any) | undefined;
             };
+            defer: {
+                type: PropType<boolean | IdleRequestOptions | undefined>;
+            };
         }>> & {
@@ -181,2 +187,5 @@ onOsInitialized?: ((instance: import("overlayscrollbars").OverlayScrollbars) => any) | undefined;
         };
+        defer: {
+            type: PropType<boolean | IdleRequestOptions | undefined>;
+        };
     }>> & {
@@ -232,2 +241,5 @@ onOsInitialized?: ((instance: import("overlayscrollbars").OverlayScrollbars) => any) | undefined;
     };
+    defer: {
+        type: PropType<boolean | IdleRequestOptions | undefined>;
+    };
 }>> & {
@@ -234,0 +246,0 @@ onOsInitialized?: ((instance: import("overlayscrollbars").OverlayScrollbars) => any) | undefined;

types/useOverlayScrollbars.d.ts

@@ -1,2 +0,1 @@
-import { OverlayScrollbars } from 'overlayscrollbars';
 import type { Ref } from 'vue';
@@ -10,4 +9,6 @@ import type { InitializationTarget } from 'overlayscrollbars';
     events?: OverlayScrollbarsComponentProps['events'] | Ref<OverlayScrollbarsComponentProps['events']>;
+    /** Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) */
+    defer?: OverlayScrollbarsComponentProps['defer'] | Ref<OverlayScrollbarsComponentProps['defer']>;
 }
-export declare type UseOverlayScrollbarsInitialization = (target: InitializationTarget) => OverlayScrollbars;
+export declare type UseOverlayScrollbarsInitialization = (target: InitializationTarget) => void;
 export declare type UseOverlayScrollbarsInstance = () => ReturnType<OverlayScrollbarsComponentRef['osInstance']>;
@@ -14,0 +15,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58437

increased by18.88%

Lines of code

457

increased by12.56%

Number of lines in readme file

180

increased by3.45%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes