change framework version api

packages/overlayscrollbars-ngx/CHANGELOG.md

@@ -14,5 +14,4 @@ Depends on `OverlayScrollbars` version `^2.0.0` and `Angular` version `>=12.0.0`
 ### Breaking Changes
 
 - The `extensions` property is removed from `OverlayScrollbarsComponent`
-- The `osInstance()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `instance()`
+- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `getElement()`
-- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `element()`

packages/overlayscrollbars-ngx/README.md

@@ -125,8 +125,8 @@ onUpdated([instance, onUpdatedArgs]: EventListenerArgs['updated']) {}
 The `ref` of the `OverlayScrollbarsComponent` will give you an object with which you can access the OverlayScrollbars `instance` and the root `element` of the component.  
 The ref object has two properties:
 
-- `instance`: a function which returns the OverlayScrollbars instance.
+- `osInstance`: a function which returns the OverlayScrollbars instance.
-- `element`: a function which returns the root element.
+- `getElement`: a function which returns the root element.
 
 ## Directive
 
@@ -156,8 +156,8 @@ Properties are optional and similar to the `OverlayScrollbarsComponent`.
 
 The `OverlayScrollbarsDirective` exposes two functions:
 
-- `initialize` takes one argument which is the `InitializationTarget` and returns the OverlayScrollbars instance.
+- `osInitialize` takes one argument which is the `InitializationTarget` and returns the OverlayScrollbars instance.
-- `instance` returns the current OverlayScrollbars instance or `null` if not initialized.
+- `osInstance` returns the current OverlayScrollbars instance or `null` if not initialized.
 
 ## License
 

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

@@ -58,21 +58,21 @@ export class OverlayScrollbarsComponent implements OnDestroy, AfterViewInit {
 
   constructor(private targetRef: ElementRef<HTMLElement>) {}
 
-  instance(): OverlayScrollbars | null {
+  osInstance(): OverlayScrollbars | null {
-    return this.osDirective!.instance();
+    return this.osDirective!.osInstance();
   }
 
-  element(): HTMLElement {
+  getElement(): HTMLElement {
     return this.targetRef.nativeElement;
   }
 
   ngAfterViewInit() {
-    const targetElm = this.element();
+    const targetElm = this.getElement();
     const contentElm = this.contentRef!.nativeElement;
 
     /* istanbul ignore else */
     if (targetElm && contentElm) {
-      this.osDirective!.initialize({
+      this.osDirective!.osInitialize({
         target: targetElm,
         elements: {
           viewport: contentElm,
@@ -83,7 +83,7 @@ export class OverlayScrollbarsComponent implements OnDestroy, AfterViewInit {
   }
 
   ngOnDestroy() {
-    this.osDirective?.instance()!.destroy();
+    this.osDirective?.osInstance()!.destroy();
   }
 
   mergeEvents(originalEvents: OverlayScrollbarsComponent['events']) {

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

@@ -17,7 +17,7 @@ export class OverlayScrollbarsDirective implements OnChanges {
 
   constructor(private ngZone: NgZone) {}
 
-  initialize(target: InitializationTarget): OverlayScrollbars {
+  osInitialize(target: InitializationTarget): OverlayScrollbars {
     this.ngZone.runOutsideAngular(() => {
       this.instanceRef = OverlayScrollbars(
         target,
@@ -29,7 +29,7 @@ export class OverlayScrollbarsDirective implements OnChanges {
     return this.instanceRef!;
   }
 
-  instance(): OverlayScrollbars | null {
+  osInstance(): OverlayScrollbars | null {
     return this.instanceRef;
   }
 

packages/overlayscrollbars-ngx/test/overlayscrollbars.component.spec.ts

@@ -101,8 +101,8 @@ describe('OverlayscrollbarsNgxComponent', () => {
   describe('correct rendering', () => {
     it('has instance', async () => {
       expect(component).toBeTruthy();
-      expect(component.element()).toBeDefined();
+      expect(component.getElement()).toBeDefined();
-      expect(OverlayScrollbars.valid(component.instance())).toBe(true);
+      expect(OverlayScrollbars.valid(component.osInstance())).toBe(true);
     });
 
     it('has data-overlayscrollbars-initialize', async () => {
@@ -215,10 +215,10 @@ describe('OverlayscrollbarsNgxComponent', () => {
     const ref = testInstance.ref!;
 
     expect(testInstance.ref).toBeDefined();
-    expect(typeof ref.instance).toBe('function');
+    expect(typeof ref.osInstance).toBe('function');
-    expect(typeof ref.element).toBe('function');
+    expect(typeof ref.getElement).toBe('function');
-    expect(OverlayScrollbars.valid(ref.instance())).toBe(true);
+    expect(OverlayScrollbars.valid(ref.osInstance())).toBe(true);
-    expect(ref.element()).toBe(testFixture.nativeElement.firstElementChild);
+    expect(ref.getElement()).toBe(testFixture.nativeElement.firstElementChild);
   });
 
   it('sets options correctly', async () => {
@@ -228,7 +228,7 @@ describe('OverlayscrollbarsNgxComponent', () => {
     testInstance.options = { paddingAbsolute: true, overflow: { y: 'hidden' } };
     testFixture.detectChanges();
 
-    const instance = testInstance.ref!.instance()!;
+    const instance = testInstance.ref!.osInstance()!;
 
     const opts = instance.options();
     expect(opts.paddingAbsolute).toBe(true);
@@ -260,7 +260,7 @@ describe('OverlayscrollbarsNgxComponent', () => {
     expect(clearedOpts.overflow.y).toBe('scroll');
 
     // instance didn't change
-    expect(instance).toBe(testInstance.ref!.instance()!);
+    expect(instance).toBe(testInstance.ref!.osInstance()!);
   });
 
   it('sets events correctly', async () => {
@@ -272,7 +272,7 @@ describe('OverlayscrollbarsNgxComponent', () => {
     testInstance.events = { updated: onUpdatedInitial };
     testFixture.detectChanges();
 
-    const instance = testInstance.ref!.instance()!;
+    const instance = testInstance.ref!.osInstance()!;
 
     expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
 
@@ -316,12 +316,12 @@ describe('OverlayscrollbarsNgxComponent', () => {
     expect(onUpdated).toHaveBeenCalledTimes(3);
 
     // instance didn't change
-    expect(instance).toBe(testInstance.ref!.instance()!);
+    expect(instance).toBe(testInstance.ref!.osInstance()!);
   });
 
   it('destroys correctly', async () => {
     fixture.destroy();
-    expect(OverlayScrollbars.valid(component.instance())).toBe(false);
+    expect(OverlayScrollbars.valid(component.osInstance())).toBe(false);
   });
 
   it('emits events correctly', async () => {
@@ -377,12 +377,12 @@ describe('OverlayscrollbarsNgxComponent', () => {
     expect(osRef).toBeDefined();
     expect(spanRef).toBeDefined();
 
-    expect(OverlayScrollbars.valid(osRef.instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osRef.osInstance())).toBe(true);
-    expect(OverlayScrollbars.valid(spanRef.instance())).toBe(true);
+    expect(OverlayScrollbars.valid(spanRef.osInstance())).toBe(true);
 
     testFixture.destroy();
 
-    expect(OverlayScrollbars.valid(osRef.instance())).toBe(false);
+    expect(OverlayScrollbars.valid(osRef.osInstance())).toBe(false);
-    expect(OverlayScrollbars.valid(spanRef.instance())).toBe(false);
+    expect(OverlayScrollbars.valid(spanRef.osInstance())).toBe(false);
   });
 });

packages/overlayscrollbars-react/CHANGELOG.md

@@ -14,5 +14,4 @@ The component was rewritten using `hooks`. ([#218](https://github.com/KingSora/O
 ### Breaking Changes
 
 - The `extensions` property is removed from `OverlayScrollbarsComponent`
-- The `osInstance()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `instance()`
+- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `getElement()`
-- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `element()`

packages/overlayscrollbars-react/README.md

@@ -87,8 +87,8 @@ Additionally it has three optional properties: `element`, `options` and `events`
 The `ref` of the `OverlayScrollbarsComponent` will give you an object with which you can access the OverlayScrollbars `instance` and the root `element` of the component.  
 The ref object has two properties:
 
-- `instance`: a function which returns the OverlayScrollbars instance.
+- `osInstance`: a function which returns the OverlayScrollbars instance.
-- `element`: a function which returns the root element.
+- `getElement`: a function which returns the root element.
 
 ## Hook
 

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -16,9 +16,9 @@ export type OverlayScrollbarsComponentProps<T extends keyof JSX.IntrinsicElement
 
 export interface OverlayScrollbarsComponentRef<T extends keyof JSX.IntrinsicElements = 'div'> {
   /** Returns the OverlayScrollbars instance or null if not initialized. */
-  instance(): OverlayScrollbars | null;
+  osInstance(): OverlayScrollbars | null;
   /** Returns the root element. */
-  element(): ElementRef<T> | null;
+  getElement(): ElementRef<T> | null;
 }
 
 const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
@@ -29,13 +29,13 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
   const Tag = element;
   const elementRef = useRef<ElementRef<T>>(null);
   const childrenRef = useRef<HTMLDivElement>(null);
-  const [initialize, instance] = useOverlayScrollbars({ options, events });
+  const [initialize, osInstance] = useOverlayScrollbars({ options, events });
 
   useEffect(() => {
     const { current: elm } = elementRef;
     const { current: childrenElm } = childrenRef;
     if (elm && childrenElm) {
-      const osInstance = initialize({
+      const instance = initialize({
         target: elm as any,
         elements: {
           viewport: childrenElm,
@@ -43,7 +43,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
         },
       });
 
-      return () => osInstance.destroy();
+      return () => instance.destroy();
     }
   }, [initialize, element]);
 
@@ -51,8 +51,8 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
     ref,
     () => {
       return {
-        instance,
+        osInstance,
-        element: () => elementRef.current,
+        getElement: () => elementRef.current,
       };
     },
     []
@@ -60,7 +60,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
 
   return (
     // @ts-ignore
-    <Tag data-overlayscrollbars-initialize="" {...other} ref={elementRef}>
+    <Tag data-overlayscrollbars-initialize="" ref={elementRef} {...other}>
       <div ref={childrenRef}>{children}</div>
     </Tag>
   );

packages/overlayscrollbars-react/src/useOverlayScrollbars.ts

@@ -18,7 +18,7 @@ export type UseOverlayScrollbarsInitialization = (
 ) => OverlayScrollbars;
 
 export type UseOverlayScrollbarsInstance = () => ReturnType<
-  OverlayScrollbarsComponentRef['instance']
+  OverlayScrollbarsComponentRef['osInstance']
 >;
 
 /**

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

@@ -122,11 +122,11 @@ describe('OverlayScrollbarsComponent', () => {
     const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
     const { container } = render(<OverlayScrollbarsComponent ref={ref} />);
 
-    const { instance, element } = ref.current!;
+    const { osInstance, getElement } = ref.current!;
-    expect(instance).toBeTypeOf('function');
+    expect(osInstance).toBeTypeOf('function');
-    expect(element).toBeTypeOf('function');
+    expect(getElement).toBeTypeOf('function');
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
-    expect(element()).toBe(container.firstElementChild);
+    expect(getElement()).toBe(container.firstElementChild);
   });
 
   test('options', () => {
@@ -137,7 +137,7 @@ describe('OverlayScrollbarsComponent', () => {
         ref={ref}
       />
     );
-    const instance = ref.current!.instance()!;
+    const instance = ref.current!.osInstance()!;
 
     const opts = instance.options();
     expect(opts.paddingAbsolute).toBe(true);
@@ -151,7 +151,7 @@ describe('OverlayScrollbarsComponent', () => {
     expect(newOpts.overflow.y).toBe('scroll'); //switches back to default because its not specified in the new options
 
     // instance didn't change
-    expect(instance).toBe(ref.current!.instance());
+    expect(instance).toBe(ref.current!.osInstance());
 
     rerender(
       <OverlayScrollbarsComponent
@@ -161,7 +161,7 @@ describe('OverlayScrollbarsComponent', () => {
       />
     );
 
-    const newElementInstance = ref.current!.instance()!;
+    const newElementInstance = ref.current!.osInstance()!;
     const newElementNewOpts = newElementInstance.options();
     expect(newElementInstance).not.toBe(instance);
     expect(newElementNewOpts.paddingAbsolute).toBe(false);
@@ -178,7 +178,7 @@ describe('OverlayScrollbarsComponent', () => {
     );
 
     const resetOpts = newElementInstance.options();
-    expect(newElementInstance).toBe(ref.current!.instance());
+    expect(newElementInstance).toBe(ref.current!.osInstance());
     expect(resetOpts.paddingAbsolute).toBe(false);
     expect(resetOpts.overflow.x).toBe('scroll');
     expect(resetOpts.overflow.y).toBe('scroll');
@@ -191,7 +191,7 @@ describe('OverlayScrollbarsComponent', () => {
     const { rerender } = render(
       <OverlayScrollbarsComponent events={{ updated: onUpdatedInitial }} ref={ref} />
     );
-    const instance = ref.current!.instance()!;
+    const instance = ref.current!.osInstance()!;
 
     expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
 
@@ -219,7 +219,7 @@ describe('OverlayScrollbarsComponent', () => {
     expect(onUpdated).toHaveBeenCalledTimes(2);
 
     // instance didn't change
-    expect(instance).toBe(ref.current!.instance());
+    expect(instance).toBe(ref.current!.osInstance());
 
     rerender(
       <OverlayScrollbarsComponent
@@ -229,7 +229,7 @@ describe('OverlayScrollbarsComponent', () => {
       />
     );
 
-    const newElementInstance = ref.current!.instance()!;
+    const newElementInstance = ref.current!.osInstance()!;
     expect(newElementInstance).not.toBe(instance);
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
@@ -244,7 +244,7 @@ describe('OverlayScrollbarsComponent', () => {
     );
 
     newElementInstance.update(true);
-    expect(newElementInstance).toBe(ref.current!.instance());
+    expect(newElementInstance).toBe(ref.current!.osInstance());
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
   });
@@ -253,13 +253,13 @@ describe('OverlayScrollbarsComponent', () => {
     const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
     const { unmount } = render(<OverlayScrollbarsComponent ref={ref} />);
 
-    const { instance } = ref.current!;
+    const { osInstance } = ref.current!;
 
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
 
     unmount();
 
-    expect(instance()).toBeDefined();
+    expect(osInstance()).toBeDefined();
-    expect(OverlayScrollbars.valid(instance())).toBe(false);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(false);
   });
 });

packages/overlayscrollbars-vue/CHANGELOG.md

@@ -15,5 +15,4 @@ The component was rewritten using `script setup`.
 ### Breaking Changes
 
 - The `extensions` property is removed from `OverlayScrollbarsComponent`
-- The `osInstance()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `instance()`
+- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `getElement()`
-- The `osTarget()` function from the `OverlayScrollbarsComponent` `ref` is renamed to `element()`

packages/overlayscrollbars-vue/README.md

@@ -102,8 +102,8 @@ Additionally to the `events` property the `OverlayScrollbarsComponent` emits "na
 The `ref` of the `OverlayScrollbarsComponent` will give you an object with which you can access the OverlayScrollbars `instance` and the root `element` of the component.  
 The ref object has two properties:
 
-- `instance`: a function which returns the OverlayScrollbars instance.
+- `osInstance`: a function which returns the OverlayScrollbars instance.
-- `element`: a function which returns the root element.
+- `getElement`: a function which returns the root element.
 
 ## Composable
 

packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.types.ts

@@ -8,7 +8,7 @@ export interface OverlayScrollbarsComponentProps {
 
 export interface OverlayScrollbarsComponentRef {
   /** Returns the OverlayScrollbars instance or null if not initialized. */
-  instance(): OverlayScrollbars | null;
+  osInstance(): OverlayScrollbars | null;
   /** Returns the root element. */
-  element(): HTMLElement | null;
+  getElement(): HTMLElement | null;
 }

packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue

@@ -37,29 +37,29 @@ const elementRef = shallowRef<HTMLElement | null>(null);
 const slotRef = shallowRef<HTMLElement | null>(null);
 const combinedEvents = ref<EventListeners>();
 const { element, options, events } = toRefs(props);
-const [initialize, instance] = useOverlayScrollbars({ options, events: combinedEvents });
+const [initialize, osInstance] = useOverlayScrollbars({ options, events: combinedEvents });
 const exposed: OverlayScrollbarsComponentRef = {
-  instance,
+  osInstance,
-  element: () => elementRef.value,
+  getElement: () => elementRef.value,
 };
 
 defineExpose(exposed);
 
-onUnmounted(() => instance()?.destroy());
+onUnmounted(() => osInstance()?.destroy());
 
 watchPostEffect((onCleanup) => {
   const { value: elm } = elementRef;
   const { value: slotElm } = slotRef;
 
   if (elm && slotElm) {
-    const osInstance = initialize({
+    const instance = initialize({
       target: elm,
       elements: {
         viewport: slotElm,
         content: slotElm,
       },
     });
-    onCleanup(() => osInstance.destroy());
+    onCleanup(() => instance.destroy());
   }
 });
 

packages/overlayscrollbars-vue/src/overlayscrollbars-vue.ts

@@ -1,2 +1,3 @@
 export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';
 export * from './useOverlayScrollbars';
+export * from './OverlayScrollbarsComponent.types';

packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts

@@ -22,7 +22,7 @@ export type UseOverlayScrollbarsInitialization = (
 ) => OverlayScrollbars;
 
 export type UseOverlayScrollbarsInstance = () => ReturnType<
-  OverlayScrollbarsComponentRef['instance']
+  OverlayScrollbarsComponentRef['osInstance']
 >;
 
 /**

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

@@ -131,11 +131,11 @@ describe('OverlayScrollbarsComponent', () => {
       },
     });
 
-    const { instance, element } = osRef.value!;
+    const { osInstance, getElement } = osRef.value!;
-    expect(instance).toBeTypeOf('function');
+    expect(osInstance).toBeTypeOf('function');
-    expect(element).toBeTypeOf('function');
+    expect(getElement).toBeTypeOf('function');
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
-    expect(element()).toBe(container.firstElementChild);
+    expect(getElement()).toBe(container.firstElementChild);
   });
 
   test('options', async () => {
@@ -160,7 +160,7 @@ describe('OverlayScrollbarsComponent', () => {
       }
     );
 
-    const instance = osRef.value!.instance()!;
+    const instance = osRef.value!.osInstance()!;
 
     const opts = instance.options();
     expect(opts.paddingAbsolute).toBe(true);
@@ -174,11 +174,11 @@ describe('OverlayScrollbarsComponent', () => {
     expect(newOpts.overflow.y).toBe('scroll'); //switches back to default because its not specified in the new options
 
     // instance didn't change
-    expect(instance).toBe(osRef.value!.instance());
+    expect(instance).toBe(osRef.value!.osInstance());
 
     await rerender({ element: 'span', options: { overflow: { x: 'hidden', y: 'hidden' } } });
 
-    const newElementInstance = osRef.value!.instance()!;
+    const newElementInstance = osRef.value!.osInstance()!;
     const newElementNewOpts = newElementInstance.options();
     expect(newElementInstance).not.toBe(instance);
     expect(newElementNewOpts.paddingAbsolute).toBe(false);
@@ -189,7 +189,7 @@ describe('OverlayScrollbarsComponent', () => {
     await rerender({ options: undefined });
 
     const clearedOpts = newElementInstance.options();
-    expect(osRef.value!.instance()).toBe(newElementInstance);
+    expect(osRef.value!.osInstance()).toBe(newElementInstance);
     expect(clearedOpts.paddingAbsolute).toBe(false);
     expect(clearedOpts.overflow.x).toBe('scroll');
     expect(clearedOpts.overflow.y).toBe('scroll');
@@ -219,7 +219,7 @@ describe('OverlayScrollbarsComponent', () => {
       }
     );
 
-    const instance = osRef.value!.instance()!;
+    const instance = osRef.value!.osInstance()!;
 
     expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
 
@@ -245,11 +245,11 @@ describe('OverlayScrollbarsComponent', () => {
     expect(onUpdated).toHaveBeenCalledTimes(2);
 
     // instance didn't change
-    expect(instance).toBe(osRef.value!.instance());
+    expect(instance).toBe(osRef.value!.osInstance());
 
     await rerender({ element: 'span', events: { updated: [onUpdated, onUpdatedInitial] } });
 
-    const newElementInstance = osRef.value!.instance()!;
+    const newElementInstance = osRef.value!.osInstance()!;
     expect(newElementInstance).not.toBe(instance);
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
@@ -258,7 +258,7 @@ describe('OverlayScrollbarsComponent', () => {
     await rerender({ events: undefined });
 
     newElementInstance.update(true);
-    expect(newElementInstance).toBe(osRef.value!.instance());
+    expect(newElementInstance).toBe(osRef.value!.osInstance());
     expect(onUpdatedInitial).toHaveBeenCalledTimes(3);
     expect(onUpdated).toHaveBeenCalledTimes(3);
   });
@@ -277,14 +277,14 @@ describe('OverlayScrollbarsComponent', () => {
       },
     });
 
-    const { instance } = osRef.value!;
+    const { osInstance } = osRef.value!;
 
-    expect(OverlayScrollbars.valid(instance())).toBe(true);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(true);
 
     unmount();
 
-    expect(instance()).toBeDefined();
+    expect(osInstance()).toBeDefined();
-    expect(OverlayScrollbars.valid(instance())).toBe(false);
+    expect(OverlayScrollbars.valid(osInstance())).toBe(false);
   });
 
   test('emits', async () => {