Skip to content

Commit

Permalink
refactor: do not export config entry and do some cleanups
Browse files Browse the repository at this point in the history
In this commit, we avoid re-exporting items from the config entry point to prevent bundling
these libraries together. Additionally, some functions have been removed because they are
only used once. The `OnPush` strategy has also been improved to make it more automatic.
  • Loading branch information
arturovt committed Jan 1, 2025
1 parent 9156202 commit aed43fc
Show file tree
Hide file tree
Showing 9 changed files with 35 additions and 51 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,8 @@ export const tooltipVariation = {
### Use `Component` as content

```ts
import { injectTippyRef, TippyInstance } from '@ngneat/helipopper/config';
import type { TippyInstance } from '@ngneat/helipopper/config';
import { injectTippyRef } from '@ngneat/helipopper';

@Component()
class MyComponent {
Expand Down Expand Up @@ -315,7 +316,8 @@ tpVisible = new EventEmitter<boolean>();
### Create `tippy` Programmatically

```typescript
import { TippyService, TippyInstance } from '@ngneat/helipopper';
import type { TippyInstance } from '@ngneat/helipopper/config';
import { TippyService } from '@ngneat/helipopper';

class Component {
@ViewChild('inputName') inputName: ElementRef;
Expand Down
2 changes: 0 additions & 2 deletions projects/ngneat/helipopper/config/src/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ export {
TippyConfig,
TippyLoader,
TIPPY_LOADER,
TIPPY_REF,
TIPPY_CONFIG,
} from './tippy.types';
export { provideTippyLoader, provideTippyConfig } from './providers';
export { injectTippyRef } from './inject-tippy';
8 changes: 0 additions & 8 deletions projects/ngneat/helipopper/config/src/tippy.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import type { Instance, Props } from 'tippy.js';
import { ElementRef, InjectionToken } from '@angular/core';
import type { ResolveViewRef, ViewOptions } from '@ngneat/overview';

export const enum TippyErrorCode {
TippyNotProvided = 1,
}

export interface CreateOptions extends Partial<TippyProps>, ViewOptions {
variation: string;
preserveView: boolean;
Expand Down Expand Up @@ -43,10 +39,6 @@ export const TIPPY_LOADER = new InjectionToken<TippyLoader>(
typeof ngDevMode !== 'undefined' && ngDevMode ? 'TIPPY_LOADER' : ''
);

export const TIPPY_REF = /* @__PURE__ */ new InjectionToken<TippyInstance>(
typeof ngDevMode !== 'undefined' && ngDevMode ? 'TIPPY_REF' : ''
);

export const TIPPY_CONFIG = new InjectionToken<TippyConfig>(
typeof ngDevMode !== 'undefined' && ngDevMode ? 'TIPPY_CONFIG' : ''
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { inject } from '@angular/core';
import { inject, InjectionToken } from '@angular/core';
import type { TippyInstance } from '@ngneat/helipopper/config';

import { TIPPY_REF, TippyErrorCode, type TippyInstance } from './tippy.types';
import { TippyErrorCode } from './utils';

export const TIPPY_REF = /* @__PURE__ */ new InjectionToken<TippyInstance>(
typeof ngDevMode !== 'undefined' && ngDevMode ? 'TIPPY_REF' : ''
);

export function injectTippyRef(): TippyInstance {
const instance = inject(TIPPY_REF, { optional: true });
Expand Down
17 changes: 11 additions & 6 deletions projects/ngneat/helipopper/src/lib/tippy.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,13 @@ import {
} from './utils';
import {
TIPPY_CONFIG,
TIPPY_REF,
TippyConfig,
TippyInstance,
TippyProps,
} from '@ngneat/helipopper/config';
import { TippyFactory } from './tippy.factory';
import { coerceBooleanAttribute } from './coercion';
import { TIPPY_REF } from './inject-tippy';

// These are the default values used by `tippy.js`.
// We are providing them as default input values.
Expand Down Expand Up @@ -184,8 +184,6 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnInit {
alias: 'tpHideOnEscape',
});

readonly detectChangesComponent = input(true, { alias: 'tpDetectChangesComponent' });

readonly popperWidth = input<number | string | undefined>(undefined, {
alias: 'tpPopperWidth',
});
Expand Down Expand Up @@ -491,9 +489,16 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnInit {
...this.viewOptions$,
});

// We need to call detectChanges for onPush components to update the content
if (this.detectChangesComponent() && isComponent(content)) {
this.viewRef.detectChanges();
// We need to call `detectChanges` for OnPush components to update their content.
if (isComponent(content)) {
// `ɵcmp` is a component defition set for any component.
// Checking the `onPush` property of the component definition is a
// smarter way to determine whether we need to call `detectChanges()`,
// as users may be unaware of setting the binding.
const isOnPush = (content as { ɵcmp?: { onPush: boolean } }).ɵcmp?.onPush;
if (isOnPush) {
this.viewRef.detectChanges();
}
}

let newContent = this.viewRef.getElement();
Expand Down
5 changes: 3 additions & 2 deletions projects/ngneat/helipopper/src/lib/tippy.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ import {
CreateOptions,
ExtendedTippyInstance,
TIPPY_CONFIG,
TIPPY_REF,
TippyConfig,
TippyInstance,
} from '@ngneat/helipopper/config';
import { normalizeClassName, onlyTippyProps } from './utils';

import { TIPPY_REF } from './inject-tippy';
import { TippyFactory } from './tippy.factory';
import { normalizeClassName, onlyTippyProps } from './utils';

@Injectable({ providedIn: 'root' })
export class TippyService {
Expand Down
22 changes: 7 additions & 15 deletions projects/ngneat/helipopper/src/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ if (typeof window !== 'undefined') {
supportsResizeObserver = 'ResizeObserver' in window;
}

export const enum TippyErrorCode {
TippyNotProvided = 1,
}

export function inView(
host: TippyElement,
options: IntersectionObserverInit = {
Expand Down Expand Up @@ -66,11 +70,7 @@ export function overflowChanges(host: TippyElement) {
}

export function dimensionsChanges(target: HTMLElement) {
return resizeObserverStrategy(target);
}

function resizeObserverStrategy(target: HTMLElement): Observable<boolean> {
return new Observable((subscriber) => {
return new Observable<boolean>((subscriber) => {
if (!supportsResizeObserver) {
subscriber.next();
subscriber.complete();
Expand Down Expand Up @@ -122,27 +122,19 @@ export function onlyTippyProps(allProps: any) {
}

export function normalizeClassName(className: string | string[]): string[] {
const classes = isString(className) ? className.split(' ') : className;
const classes = typeof className === 'string' ? className.split(' ') : className;

return classes.map((klass) => klass?.trim()).filter(Boolean);
}

export function coerceCssPixelValue<T>(value: T): string {
if (isNil(value)) {
if (value == null) {
return '';
}

return typeof value === 'string' ? value : `${value}px`;
}

function isString(value: unknown): value is string {
return typeof value === 'string';
}

function isNil(value: any): value is undefined | null {
return value === undefined || value === null;
}

function coerceElement(element: TippyElement) {
return element instanceof ElementRef ? element.nativeElement : element;
}
Expand Down
14 changes: 1 addition & 13 deletions projects/ngneat/helipopper/src/public-api.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
export { TippyDirective } from './lib/tippy.directive';
export { TippyService } from './lib/tippy.service';
export { inView, overflowChanges } from './lib/utils';

export {
ExtendedTippyInstance,
TippyInstance,
TIPPY_REF,
TippyConfig,
TIPPY_CONFIG,
tooltipVariation,
popperVariation,
withContextMenuVariation,
provideTippyConfig,
injectTippyRef,
} from '@ngneat/helipopper/config';
export { TIPPY_REF, injectTippyRef } from './lib/inject-tippy';
3 changes: 2 additions & 1 deletion src/app/playground/playground.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
import { toSignal } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
import { ExampleComponent } from '../example/example.component';
import { TippyDirective, TippyInstance, TippyService } from '@ngneat/helipopper';
import type { TippyInstance } from '@ngneat/helipopper/config';
import { TippyDirective, TippyService } from '@ngneat/helipopper';
import type { Placement } from 'tippy.js';
import { startWith } from 'rxjs';
import { CommonModule } from '@angular/common';
Expand Down

0 comments on commit aed43fc

Please sign in to comment.