improve overlayscrollbars-react and repo setup

package-lock.json

@@ -58,8 +58,6 @@
         "prettier": "^2.6.2",
         "rollup": "^2.75.5",
         "rollup-plugin-esbuild-resolve": "^1.0.0",
-        "rollup-plugin-summary": "^1.4.3",
-        "rollup-plugin-terser": "^7.0.2",
         "should": "^13.2.3",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
@@ -29888,7 +29886,11 @@
     },
     "packages/overlayscrollbars": {
       "version": "2.0.0-beta.3",
-      "license": "MIT"
+      "license": "MIT",
+      "devDependencies": {
+        "rollup-plugin-summary": "^1.4.3",
+        "rollup-plugin-terser": "^7.0.2"
+      }
     },
     "packages/overlayscrollbars-ngx": {
       "version": "0.4.0",
@@ -29916,13 +29918,15 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
         "ng-packagr": "^12.0.0",
+        "overlayscrollbars": "file:./../overlayscrollbars/dist",
         "rxjs": "~6.6.0",
         "typescript": "~4.3.5",
         "zone.js": "~0.11.4"
       },
       "peerDependencies": {
         "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0"
+        "@angular/core": ">=12.0.0",
+        "overlayscrollbars": "^2.0.0"
       }
     },
     "packages/overlayscrollbars-ngx/node_modules/@ampproject/remapping": {
@@ -31105,6 +31109,10 @@
         "node": ">= 6"
       }
     },
+    "packages/overlayscrollbars-ngx/node_modules/overlayscrollbars": {
+      "resolved": "packages/overlayscrollbars/dist",
+      "link": true
+    },
     "packages/overlayscrollbars-ngx/node_modules/postcss": {
       "version": "8.3.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
@@ -31426,11 +31434,13 @@
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
         "@vitejs/plugin-react": "^2.1.0",
+        "overlayscrollbars": "file:./../overlayscrollbars/dist",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "typescript": "^4.8.4"
       },
       "peerDependencies": {
+        "overlayscrollbars": "^2.0.0",
         "react": ">=16.4.0"
       }
     },
@@ -31440,6 +31450,10 @@
       "integrity": "sha512-JkRpuVz3xCNCWaeQ5EHLR/6woMbHZz/jZ7Kmc63AkU+1HxnoUugzSWMck7dsR4DvNYX8jp9wTi9K7WvnxOIQZQ==",
       "dev": true
     },
+    "packages/overlayscrollbars-react/node_modules/overlayscrollbars": {
+      "resolved": "packages/overlayscrollbars/dist",
+      "link": true
+    },
     "packages/overlayscrollbars-svelte": {
       "version": "0.4.0",
       "devDependencies": {
@@ -31666,6 +31680,12 @@
         "node": ">=4.2.0"
       }
     },
+    "packages/overlayscrollbars/dist": {
+      "name": "overlayscrollbars",
+      "version": "2.0.0-beta.3",
+      "dev": true,
+      "license": "MIT"
+    },
     "packages/test": {
       "name": "node-starter",
       "version": "0.0.0",
@@ -47009,7 +47029,11 @@
       "dev": true
     },
     "overlayscrollbars": {
-      "version": "file:packages/overlayscrollbars"
+      "version": "file:packages/overlayscrollbars",
+      "requires": {
+        "rollup-plugin-summary": "^1.4.3",
+        "rollup-plugin-terser": "^7.0.2"
+      }
     },
     "overlayscrollbars-ngx": {
       "version": "file:packages/overlayscrollbars-ngx",
@@ -47034,6 +47058,7 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
         "ng-packagr": "^12.0.0",
+        "overlayscrollbars": "file:../overlayscrollbars/dist",
         "rxjs": "~6.6.0",
         "tslib": "^2.4.0",
         "typescript": "~4.3.5",
@@ -47896,6 +47921,9 @@
           "optional": true,
           "peer": true
         },
+        "overlayscrollbars": {
+          "version": "file:packages/overlayscrollbars/dist"
+        },
         "postcss": {
           "version": "8.3.6",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
@@ -48127,6 +48155,7 @@
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
         "@vitejs/plugin-react": "^2.1.0",
+        "overlayscrollbars": "file:../overlayscrollbars/dist",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "typescript": "^4.8.4"
@@ -48137,6 +48166,9 @@
           "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.68.tgz",
           "integrity": "sha512-JkRpuVz3xCNCWaeQ5EHLR/6woMbHZz/jZ7Kmc63AkU+1HxnoUugzSWMck7dsR4DvNYX8jp9wTi9K7WvnxOIQZQ==",
           "dev": true
+        },
+        "overlayscrollbars": {
+          "version": "file:packages/overlayscrollbars/dist"
         }
       }
     },

package.json

@@ -54,8 +54,6 @@
     "prettier": "^2.6.2",
     "rollup": "^2.75.5",
     "rollup-plugin-esbuild-resolve": "^1.0.0",
-    "rollup-plugin-summary": "^1.4.3",
-    "rollup-plugin-terser": "^7.0.2",
     "should": "^13.2.3",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",

packages/overlayscrollbars-ngx/ng-package.json

@@ -2,6 +2,9 @@
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
   "dest": "./dist",
   "lib": {
-    "entryFile": "src/public-api.ts"
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "overlayscrollbars": "OverlayScrollbarsGlobal"
+    }
   }
 }

packages/overlayscrollbars-ngx/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
-    "@angular/core": ">=12.0.0"
+    "@angular/core": ">=12.0.0",
+    "overlayscrollbars": "^2.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^12.0.0",
@@ -27,6 +28,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "ng-packagr": "^12.0.0",
+    "overlayscrollbars": "file:./../overlayscrollbars/dist",
     "rxjs": "~6.6.0",
     "typescript": "~4.3.5",
     "zone.js": "~0.11.4"

packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
+import { OverlayScrollbars } from 'overlayscrollbars';
 import type { OnInit } from '@angular/core';
 
+console.log(OverlayScrollbars);
+
 @Component({
   selector: 'overlay-scrollbars',
   template: ` <p>overlayscrollbars-ngx works!</p> `,

packages/overlayscrollbars-ngx/src/public-api.ts

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of overlayscrollbars
- */
-
 export * from './overlayscrollbars.service';
 export * from './overlayscrollbars.component';
 export * from './overlayscrollbars.module';

packages/overlayscrollbars-react/package.json

@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.4.0",
   "files": [
-    "src",
     "dist",
     "README.md"
   ],
@@ -11,7 +10,8 @@
   "module": "./dist/overlayscrollbars-react.es.js",
   "types": "./dist/overlayscrollbars-react.d.ts",
   "peerDependencies": {
-    "react": ">=16.4.0"
+    "react": ">=16.4.0",
+    "overlayscrollbars": "^2.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",
@@ -19,6 +19,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
+    "overlayscrollbars": "file:./../overlayscrollbars/dist",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.8.4"

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -28,7 +28,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
   useEffect(() => {
     const { current: target } = osTargetRef;
     if (target) {
-      const instance = OverlayScrollbars(target as any, options || {});
+      const instance = OverlayScrollbars(target as any, options || {}, events);
       osInstanceRef.current = instance;
 
       return () => instance.destroy();

packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx

@@ -1,9 +1,9 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vitest } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
-import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 import type { RefObject } from 'react';
+import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 
 describe('OverlayScrollbarsComponent', () => {
   describe('correct rendering', () => {
@@ -88,4 +88,38 @@ describe('OverlayScrollbarsComponent', () => {
     expect(newOpts.overflow.y).toBe('scroll'); //switches back to default because its not specified in the new options
     expect(newOpts.overflow.x).toBe('hidden');
   });
+
+  test('events', () => {
+    const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
+    const onUpdatedInitial = vitest.fn();
+    const onUpdated = vitest.fn();
+    const { rerender } = render(
+      <OverlayScrollbarsComponent events={{ updated: onUpdatedInitial }} ref={ref} />
+    );
+
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
+
+    rerender(<OverlayScrollbarsComponent events={{ updated: onUpdated }} ref={ref} />);
+
+    expect(onUpdated).not.toHaveBeenCalled();
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
+    expect(onUpdated).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <OverlayScrollbarsComponent events={{ updated: [onUpdated, onUpdatedInitial] }} ref={ref} />
+    );
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(2);
+    expect(onUpdated).toHaveBeenCalledTimes(2);
+
+    // unregister works with `[]`, `null` or `undefined`
+    rerender(<OverlayScrollbarsComponent events={{ updated: null }} ref={ref} />);
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(2);
+    expect(onUpdated).toHaveBeenCalledTimes(2);
+  });
 });

packages/overlayscrollbars-react/vite.config.js

@@ -13,10 +13,11 @@ export default defineConfig({
       fileName: (format) => `overlayscrollbars-react.${format}.js`,
     },
     rollupOptions: {
-      external: ['react'],
+      external: ['react', 'overlayscrollbars'],
       output: {
         globals: {
           react: 'React',
+          overlayscrollbars: 'OverlayScrollbarsGlobal',
         },
       },
     },

packages/overlayscrollbars/package.json

@@ -41,6 +41,10 @@
     "./overlayscrollbars.scss": "./src/index.scss"
   },
   "sideEffects": ["*.css", "*.scss", "*.sass"],
+  "devDependencies": {
+    "rollup-plugin-summary": "^1.4.3",
+    "rollup-plugin-terser": "^7.0.2"
+  },
   "scripts": {
     "build": "rollup -c",
     "test": "jest --coverage",

packages/overlayscrollbars/rollup.config.js

@@ -33,7 +33,7 @@ module.exports = createRollupConfig({
         keywords,
         main: 'overlayscrollbars.cjs.js',
         module: 'overlayscrollbars.esm.js',
-        types: 'overlayscrollbars.d.ts',
+        types: 'types/overlayscrollbars.d.ts',
         exports: {
           '.': {
             require: './overlayscrollbars.cjs',

packages/overlayscrollbars/src/support/eventListeners.ts

@@ -1,4 +1,4 @@
-import { isArray, isString } from '~/support/utils/types';
+import { isArray, isFunction, isString } from '~/support/utils/types';
 import { keys } from '~/support/utils/object';
 import { each, push, from, isEmptyArray, runEachAndClear } from '~/support/utils/array';
 
@@ -7,7 +7,7 @@ export type EventListener<EventMap extends Record<string, any[]>, N extends keyo
 ) => void;
 
 export type EventListeners<EventMap extends Record<string, any[]>> = {
-  [K in keyof EventMap]?: EventListener<EventMap, K> | EventListener<EventMap, K>[];
+  [K in keyof EventMap]?: EventListener<EventMap, K> | EventListener<EventMap, K>[] | null;
 };
 
 export type RemoveEvent<EventMap extends Record<string, any[]>> = {
@@ -73,7 +73,7 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
       events.set(nameOrEventListeners, eventSet);
 
       manageListener((currListener) => {
-        currListener && eventSet.add(currListener);
+        isFunction(currListener) && eventSet.add(currListener);
       }, listener as any);
 
       return removeEvent.bind(0, nameOrEventListeners as any, listener as any);
@@ -82,7 +82,8 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
     const eventListenerKeys = keys(nameOrEventListeners) as (keyof EventListeners<EventMap>)[];
     const offFns: (() => void)[] = [];
     each(eventListenerKeys, (key) => {
-      push(offFns, addEvent(key, (nameOrEventListeners as EventListeners<EventMap>)[key]));
+      const eventListener = (nameOrEventListeners as EventListeners<EventMap>)[key];
+      eventListener && push(offFns, addEvent(key, eventListener));
     });
 
     return runEachAndClear.bind(0, offFns);