improve overlayscrollbars-react and repo setup

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);