From 568d5cfcd63ac9e75e8b570a260c8572879ce1f4 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Fri, 28 Oct 2022 22:04:44 +0200 Subject: [PATCH] improve overlayscrollbars-react and repo setup --- package-lock.json | 42 ++++++++++++++++--- package.json | 2 - .../overlayscrollbars-ngx/ng-package.json | 5 ++- packages/overlayscrollbars-ngx/package.json | 4 +- .../src/overlayscrollbars.component.ts | 3 ++ .../overlayscrollbars-ngx/src/public-api.ts | 4 -- packages/overlayscrollbars-react/package.json | 5 ++- .../src/OverlayScrollbarsComponent.tsx | 2 +- .../test/OverlayScrollbarsComponent.test.tsx | 38 ++++++++++++++++- .../overlayscrollbars-react/vite.config.js | 3 +- packages/overlayscrollbars/package.json | 4 ++ packages/overlayscrollbars/rollup.config.js | 2 +- .../src/support/eventListeners.ts | 9 ++-- 13 files changed, 99 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0a20053..8ee6cfd 100644 --- a/package-lock.json +++ b/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" } } }, diff --git a/package.json b/package.json index 971b76b..8ae29c4 100644 --- a/package.json +++ b/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", diff --git a/packages/overlayscrollbars-ngx/ng-package.json b/packages/overlayscrollbars-ngx/ng-package.json index d09e497..60fe2f0 100644 --- a/packages/overlayscrollbars-ngx/ng-package.json +++ b/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" + } } } diff --git a/packages/overlayscrollbars-ngx/package.json b/packages/overlayscrollbars-ngx/package.json index f359a93..a671d38 100644 --- a/packages/overlayscrollbars-ngx/package.json +++ b/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" diff --git a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts b/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts index d382dbb..55a7aed 100644 --- a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts +++ b/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: `

overlayscrollbars-ngx works!

`, diff --git a/packages/overlayscrollbars-ngx/src/public-api.ts b/packages/overlayscrollbars-ngx/src/public-api.ts index e8895f2..0ec3b1a 100644 --- a/packages/overlayscrollbars-ngx/src/public-api.ts +++ b/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'; diff --git a/packages/overlayscrollbars-react/package.json b/packages/overlayscrollbars-react/package.json index 33c4209..aac06ae 100644 --- a/packages/overlayscrollbars-react/package.json +++ b/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" diff --git a/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx b/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx index 240d6b6..c44e31a 100644 --- a/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx +++ b/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx @@ -28,7 +28,7 @@ const OverlayScrollbarsComponent = ( 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(); diff --git a/packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx b/packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx index f943ac7..27236af 100644 --- a/packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx +++ b/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 = { current: null }; + const onUpdatedInitial = vitest.fn(); + const onUpdated = vitest.fn(); + const { rerender } = render( + + ); + + expect(onUpdatedInitial).toHaveBeenCalledTimes(1); + + rerender(); + + expect(onUpdated).not.toHaveBeenCalled(); + + ref.current?.osInstance()?.update(true); + expect(onUpdatedInitial).toHaveBeenCalledTimes(1); + expect(onUpdated).toHaveBeenCalledTimes(1); + + rerender( + + ); + + ref.current?.osInstance()?.update(true); + expect(onUpdatedInitial).toHaveBeenCalledTimes(2); + expect(onUpdated).toHaveBeenCalledTimes(2); + + // unregister works with `[]`, `null` or `undefined` + rerender(); + + ref.current?.osInstance()?.update(true); + expect(onUpdatedInitial).toHaveBeenCalledTimes(2); + expect(onUpdated).toHaveBeenCalledTimes(2); + }); }); diff --git a/packages/overlayscrollbars-react/vite.config.js b/packages/overlayscrollbars-react/vite.config.js index 9d42c49..27cab02 100644 --- a/packages/overlayscrollbars-react/vite.config.js +++ b/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', }, }, }, diff --git a/packages/overlayscrollbars/package.json b/packages/overlayscrollbars/package.json index d3679fd..5d86e59 100644 --- a/packages/overlayscrollbars/package.json +++ b/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", diff --git a/packages/overlayscrollbars/rollup.config.js b/packages/overlayscrollbars/rollup.config.js index d66996f..87236c9 100644 --- a/packages/overlayscrollbars/rollup.config.js +++ b/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', diff --git a/packages/overlayscrollbars/src/support/eventListeners.ts b/packages/overlayscrollbars/src/support/eventListeners.ts index ed4bc21..39a23cc 100644 --- a/packages/overlayscrollbars/src/support/eventListeners.ts +++ b/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, N extends keyo ) => void; export type EventListeners> = { - [K in keyof EventMap]?: EventListener | EventListener[]; + [K in keyof EventMap]?: EventListener | EventListener[] | null; }; export type RemoveEvent> = { @@ -73,7 +73,7 @@ export const createEventListenerHub = >( 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 = >( const eventListenerKeys = keys(nameOrEventListeners) as (keyof EventListeners)[]; const offFns: (() => void)[] = []; each(eventListenerKeys, (key) => { - push(offFns, addEvent(key, (nameOrEventListeners as EventListeners)[key])); + const eventListener = (nameOrEventListeners as EventListeners)[key]; + eventListener && push(offFns, addEvent(key, eventListener)); }); return runEachAndClear.bind(0, offFns);