improve code

packages/overlayscrollbars-react/package.json

@@ -16,6 +16,7 @@
     "overlayscrollbars",
     "react",
     "component",
+    "hook",
     "hooks",
     "styleable",
     "scrollbar",

packages/overlayscrollbars-svelte/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 0.4.0
+
+The component was created.  
+Depends on `OverlayScrollbars` version `^2.0.0` and `Svelte` version `^3.44.0`.

packages/overlayscrollbars-vue/README.md

@@ -115,9 +115,26 @@ import { useOverlayScrollbars } from "overlayscrollbars-vue";
 // example usage
 const Component = {
   setup() {
+    const div = ref(null);
     const reactiveParams = reactive({ options, events });
     const [initialize, instance] = useOverlayScrollbars(reactiveParams);
-    const div = ref(null);
+
+    /** 
+     * or:
+     * 
+     * const params = ref<{ options?: PartialOptions; events?: EventListeners } | undefined>();
+     * const [initialize, instance] = useOverlayScrollbars(params);
+     * 
+     * or:
+     * 
+     * const options = ref<PartialOptions | undefined>();
+     * const events = ref<EventListeners | undefined>();
+     * const [initialize, instance] = useOverlayScrollbars({
+     *   options,
+     *   events,
+     * });
+     * 
+     */
 
     onMounted(() => {
       initialize({ target: div.value });

packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts

@@ -1,20 +1,21 @@
 import { shallowRef, unref, watch } from 'vue';
 import { OverlayScrollbars } from 'overlayscrollbars';
-import type { Ref } from 'vue';
+import type { Ref, UnwrapRef } from 'vue';
 import type { InitializationTarget } from 'overlayscrollbars';
 import type {
   OverlayScrollbarsComponentProps,
   OverlayScrollbarsComponentRef,
 } from './OverlayScrollbarsComponent.types';
 
-type Options = OverlayScrollbarsComponentProps['options'];
-type Events = OverlayScrollbarsComponentProps['events'];
-
 export interface UseOverlayScrollbarsParams {
   /** OverlayScrollbars options. */
-  options?: Options | Ref<Options | undefined>;
+  options?:
+    | OverlayScrollbarsComponentProps['options']
+    | Ref<OverlayScrollbarsComponentProps['options']>;
   /** OverlayScrollbars events. */
-  events?: Events | Ref<Events | undefined>;
+  events?:
+    | OverlayScrollbarsComponentProps['events']
+    | Ref<OverlayScrollbarsComponentProps['events']>;
 }
 
 export type UseOverlayScrollbarsInitialization = (
@@ -33,25 +34,17 @@ export type UseOverlayScrollbarsInstance = () => ReturnType<
  * The second value is a function which returns the current OverlayScrollbars instance or `null` if not initialized.
  */
 export const useOverlayScrollbars = (
-  params?: UseOverlayScrollbarsParams | Ref<UseOverlayScrollbarsParams>
+  params?: UseOverlayScrollbarsParams | Ref<UseOverlayScrollbarsParams | undefined>
 ): [UseOverlayScrollbarsInitialization, UseOverlayScrollbarsInstance] => {
+  let instance: ReturnType<UseOverlayScrollbarsInstance> = null;
+  let options: UnwrapRef<UseOverlayScrollbarsParams['options']>;
+  let events: UnwrapRef<UseOverlayScrollbarsParams['events']>;
   const paramsRef = shallowRef(params || {});
-  const variables = shallowRef<{
-    instance: ReturnType<UseOverlayScrollbarsInstance>;
-    options?: Options;
-    events?: Events;
-  }>({
-    instance: null,
-  });
 
   watch(
-    () => unref(paramsRef.value.options),
+    () => unref(paramsRef.value?.options),
-    (options) => {
+    (currOptions) => {
-      const {
+      options = currOptions;
-        value: { instance },
-      } = variables;
-
-      variables.value.options = options;
 
       if (OverlayScrollbars.valid(instance)) {
         instance.options(options || {}, true);
@@ -61,13 +54,9 @@ export const useOverlayScrollbars = (
   );
 
   watch(
-    () => unref(paramsRef.value.events),
+    () => unref(paramsRef.value?.events),
-    (events) => {
+    (currEvents) => {
-      const {
+      events = currEvents;
-        value: { instance },
-      } = variables;
-
-      variables.value.events = events;
 
       if (OverlayScrollbars.valid(instance)) {
         instance.on(
@@ -83,23 +72,12 @@ export const useOverlayScrollbars = (
   return [
     (target: InitializationTarget): OverlayScrollbars => {
       // if already initialized return the current instance
-      const {
-        value: { instance, options, events },
-      } = variables;
       if (OverlayScrollbars.valid(instance)) {
         return instance;
       }
 
-      const currOptions = options || {};
+      return (instance = OverlayScrollbars(target, options || {}, events || {}));
-      const currEvents = events || {};
-      const osInstance = (variables.value.instance = OverlayScrollbars(
-        target,
-        currOptions,
-        currEvents
-      ));
-
-      return osInstance;
     },
-    () => variables.value.instance,
+    () => instance,
   ];
 };

packages/overlayscrollbars-vue/test/useOverlayScrollbars.test.tsx

@@ -100,7 +100,7 @@ describe('useOverlayScrollbars', () => {
     render({
       setup() {
         const div = ref<HTMLElement | null>(null);
-        const params = ref<{ options?: PartialOptions; events?: EventListeners }>({});
+        const params = ref<{ options?: PartialOptions; events?: EventListeners } | undefined>();
         const [initialize, instance] = useOverlayScrollbars(params);
 
         onMounted(() => {
@@ -108,7 +108,7 @@ describe('useOverlayScrollbars', () => {
         });
 
         watchPostEffect(() => {
-          if (params.value.events?.updated) {
+          if (params.value?.events?.updated) {
             instance()?.update(true);
           }
         });
@@ -118,6 +118,7 @@ describe('useOverlayScrollbars', () => {
             <div ref={div} />
             <button
               onClick={() => {
+                params.value = {};
                 params.value.options = {};
                 params.value.events = {};
                 params.value.options.paddingAbsolute = true;