fix: abstract injection token creation (#56)

This PR adds `createInjectionToken` function to abstract the way we create `InjectionToken`

- `InjectFn` is strongly-typed and has overloads to properly support `{optional: true}`
- `ProvideFn` is strongly-typed version of `{provide, useValue}`
- `ProvideFnExisting` is strongly-typed version of `{provide, useExisting}`
- `TOKEN` is exposed for more manual use-cases

libs/nx/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog.directive.ts.template

@@ -10,7 +10,7 @@ import { HlmCommandDirective } from './hlm-command.directive';
 })
 export class HlmCommandDialogDirective {
   private _stateProvider = injectExposesStateProvider({ host: true });
-  public state = this._stateProvider?.state ?? signal('closed').asReadonly();
+  public state = this._stateProvider.state ?? signal('closed').asReadonly();
   private _renderer = inject(Renderer2);
   private _element = inject(ElementRef);
 

libs/nx/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-content.directive.ts.template

@@ -9,7 +9,7 @@ import { ClassValue } from 'clsx';
 export class HlmDialogContentDirective {
   private _inputs: ClassValue = '';
   private _statusProvider = injectExposesStateProvider({ host: true });
-  public state = this._statusProvider?.state ?? signal('closed').asReadonly();
+  public state = this._statusProvider.state ?? signal('closed').asReadonly();
   private _renderer = inject(Renderer2);
   private _element = inject(ElementRef);
 

libs/nx/src/generators/ui/libs/ui-hover-card-helm/files/lib/hlm-hover-card-content.directive.ts.template

@@ -11,8 +11,8 @@ export class HlmHoverCardContentDirective {
 
   private _inputs: ClassValue = '';
 
-  public readonly state = this._statusProvider?.state ?? signal('closed').asReadonly();
-  public readonly side = this._sideProvider?.side ?? signal('bottom').asReadonly();
+  public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
+  public readonly side = this._sideProvider.side ?? signal('bottom').asReadonly();
 
   constructor() {
     effect(() => {

libs/nx/src/generators/ui/libs/ui-popover-helm/files/lib/hlm-popover-content.directive.ts.template

@@ -9,7 +9,7 @@ import { ClassValue } from 'clsx';
 export class HlmPopoverContentDirective {
   private _inputs: ClassValue = '';
   private _stateProvider = injectExposesStateProvider({ host: true });
-  public state = this._stateProvider?.state ?? signal('closed');
+  public state = this._stateProvider.state ?? signal('closed');
   private _renderer = inject(Renderer2);
   private _element = inject(ElementRef);
 

libs/nx/src/generators/ui/libs/ui-sheet-helm/files/lib/hlm-sheet-content.directive.ts.template

@@ -30,7 +30,7 @@ export class HlmSheetContentDirective {
   private _inputs: ClassValue = '';
   private _stateProvider = injectExposesStateProvider({ host: true });
   private _sideProvider = injectExposedSideProvider({ host: true });
-  public state = this._stateProvider?.state ?? signal('closed');
+  public state = this._stateProvider.state ?? signal('closed');
   private _renderer = inject(Renderer2);
   private _element = inject(ElementRef);
 
@@ -39,7 +39,7 @@ export class HlmSheetContentDirective {
       this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
     });
     effect(() => {
-      this._sideProvider?.side();
+      this._sideProvider.side();
       this._class = this.generateClasses();
     });
   }
@@ -53,6 +53,6 @@ export class HlmSheetContentDirective {
   }
 
   private generateClasses() {
-    return hlm(sheetVariants({ side: this._sideProvider?.side() }), this._inputs);
+    return hlm(sheetVariants({ side: this._sideProvider.side() }), this._inputs);
   }
 }

libs/ui/accordion/brain/src/lib/brn-accordion-content.component.ts

@@ -3,23 +3,17 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	ElementRef,
-	forwardRef,
 	inject,
 	signal,
 	ViewEncapsulation,
 } from '@angular/core';
-import { CustomElementClassSettable, SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core';
+import { CustomElementClassSettable, provideCustomClassSettableExisting } from '@spartan-ng/ui-core';
 import { BrnAccordionItemComponent } from './brn-accordion-item.component';
 
 @Component({
 	selector: 'brn-accordion-content',
 	standalone: true,
-	providers: [
-		{
-			provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN,
-			useExisting: forwardRef(() => BrnAccordionContentComponent),
-		},
-	],
+	providers: [provideCustomClassSettableExisting(() => BrnAccordionContentComponent)],
 	host: {
 		'[attr.data-state]': 'state()',
 		'[attr.aria-labelledby]': 'ariaLabeledBy',

libs/ui/accordion/brain/src/lib/brn-accordion-trigger.component.ts

@@ -1,17 +1,12 @@
-import { Component, ElementRef, forwardRef, inject, signal } from '@angular/core';
-import { CustomElementClassSettable, SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core';
+import { Component, ElementRef, inject, signal } from '@angular/core';
+import { CustomElementClassSettable, provideCustomClassSettableExisting } from '@spartan-ng/ui-core';
 import { BrnAccordionItemComponent } from './brn-accordion-item.component';
 import { BrnAccordionComponent } from './brn-accordion.component';
 
 @Component({
 	selector: 'brn-accordion-trigger',
 	standalone: true,
-	providers: [
-		{
-			provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN,
-			useExisting: forwardRef(() => BrnAccordionTriggerComponent),
-		},
-	],
+	providers: [provideCustomClassSettableExisting(() => BrnAccordionTriggerComponent)],
 	host: {
 		'[attr.data-state]': 'state()',
 		'[attr.aria-expanded]': 'state() === "open"',

libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-content.directive.ts

@@ -1,15 +1,10 @@
-import { Directive, forwardRef } from '@angular/core';
-import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core';
+import { Directive } from '@angular/core';
+import { provideExposesStateProviderExisting } from '@spartan-ng/ui-core';
 import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain';
 
 @Directive({
 	selector: '[brnAlertDialogContent]',
 	standalone: true,
-	providers: [
-		{
-			provide: EXPOSES_STATE_TOKEN,
-			useExisting: forwardRef(() => BrnAlertDialogContentDirective),
-		},
-	],
+	providers: [provideExposesStateProviderExisting(() => BrnAlertDialogContentDirective)],
 })
 export class BrnAlertDialogContentDirective<T> extends BrnDialogContentDirective<T> {}

libs/ui/alert-dialog/brain/src/lib/brn-alert-dialog-overlay.component.ts

@@ -1,16 +1,11 @@
-import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
-import { SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { provideCustomClassSettableExisting } from '@spartan-ng/ui-core';
 import { BrnDialogOverlayComponent } from '@spartan-ng/ui-dialog-brain';
 
 @Component({
 	selector: 'brn-alert-dialog-overlay',
 	standalone: true,
-	providers: [
-		{
-			provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN,
-			useExisting: forwardRef(() => BrnAlertDialogOverlayComponent),
-		},
-	],
+	providers: [provideCustomClassSettableExisting(() => BrnAlertDialogOverlayComponent)],
 	template: ``,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,

libs/ui/command/helm/src/lib/hlm-command-dialog.directive.ts

@@ -10,7 +10,7 @@ import { HlmCommandDirective } from './hlm-command.directive';
 })
 export class HlmCommandDialogDirective {
 	private _stateProvider = injectExposesStateProvider({ host: true });
-	public state = this._stateProvider?.state ?? signal('closed').asReadonly();
+	public state = this._stateProvider.state ?? signal('closed').asReadonly();
 	private _renderer = inject(Renderer2);
 	private _element = inject(ElementRef);
 

libs/ui/core/src/lib/brain/create-injection-token.ts

@@ -0,0 +1,40 @@
+import { InjectionToken, Type, forwardRef, inject, type InjectOptions, type Provider } from '@angular/core';
+
+type InjectFn<TTokenValue> = {
+	(): TTokenValue;
+	(injectOptions: InjectOptions & { optional?: false }): TTokenValue;
+	(injectOptions: InjectOptions & { optional: true }): TTokenValue | null;
+};
+
+type ProvideFn<TTokenValue> = {
+	(value: TTokenValue): Provider;
+};
+
+type ProvideExistingFn<TTokenValue> = {
+	(valueFactory: () => Type<TTokenValue>): Provider;
+};
+
+export type CreateInjectionTokenReturn<TTokenValue> = [
+	InjectFn<TTokenValue>,
+	ProvideFn<TTokenValue>,
+	ProvideExistingFn<TTokenValue>,
+	InjectionToken<TTokenValue>,
+];
+
+export function createInjectionToken<TTokenValue>(description: string): CreateInjectionTokenReturn<TTokenValue> {
+	const token = new InjectionToken<TTokenValue>(description);
+
+	const provideFn = (value: TTokenValue) => {
+		return { provide: token, useValue: value };
+	};
+
+	const provideExistingFn = (value: () => TTokenValue) => {
+		return { provide: token, useExisting: forwardRef(value) };
+	};
+
+	const injectFn = (options: InjectOptions = {}) => {
+		return inject(token, options);
+	};
+
+	return [injectFn, provideFn, provideExistingFn, token] as CreateInjectionTokenReturn<TTokenValue>;
+}

libs/ui/core/src/lib/brain/custom-element-class-settable.ts

@@ -1,10 +1,12 @@
-import { inject, InjectionToken, InjectOptions } from '@angular/core';
+import { createInjectionToken } from './create-injection-token';
 
 export interface CustomElementClassSettable {
 	setClassToCustomElement: (newClass: string) => void;
 }
 
-export const SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN: InjectionToken<CustomElementClassSettable> =
-	new InjectionToken<CustomElementClassSettable>('@spartan-ng SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN');
-
-export const injectCustomClassSettable = (options: InjectOptions) => inject(SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN, options);
+export const [
+	injectCustomClassSettable,
+	provideCustomClassSettable,
+	provideCustomClassSettableExisting,
+	SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN,
+] = createInjectionToken<CustomElementClassSettable>('@spartan-ng SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN');

libs/ui/core/src/lib/brain/exposes-side.ts

@@ -1,11 +1,13 @@
-import { inject, InjectionToken, InjectOptions, Signal } from '@angular/core';
+import type { Signal } from '@angular/core';
+import { createInjectionToken } from './create-injection-token';
 
 export interface ExposesSide {
 	side: Signal<'top' | 'bottom' | 'left' | 'right'>;
 }
 
-export const EXPOSES_SIDE_TOKEN: InjectionToken<ExposesSide> = new InjectionToken<ExposesSide>(
-	'@spartan-ng EXPOSES_SIDE_TOKEN',
-);
-
-export const injectExposedSideProvider = (options: InjectOptions) => inject(EXPOSES_SIDE_TOKEN, options);
+export const [
+	injectExposedSideProvider,
+	provideExposedSideProvider,
+	provideExposedSideProviderExisting,
+	EXPOSES_SIDE_TOKEN,
+] = createInjectionToken<ExposesSide>('@spartan-ng EXPOSES_SIDE_TOKEN');

libs/ui/core/src/lib/brain/exposes-state.ts

@@ -1,11 +1,13 @@
-import { inject, InjectionToken, InjectOptions, Signal } from '@angular/core';
+import { Signal } from '@angular/core';
+import { createInjectionToken } from './create-injection-token';
 
 export interface ExposesState {
 	state: Signal<'open' | 'closed'>;
 }
 
-export const EXPOSES_STATE_TOKEN: InjectionToken<ExposesState> = new InjectionToken<ExposesState>(
-	'@spartan-ng EXPOSES_STATE_TOKEN',
-);
-
-export const injectExposesStateProvider = (options: InjectOptions) => inject(EXPOSES_STATE_TOKEN, options);
+export const [
+	injectExposesStateProvider,
+	provideExposesStateProvider,
+	provideExposesStateProviderExisting,
+	EXPOSES_STATE_TOKEN,
+] = createInjectionToken<ExposesState>('@spartan-ng EXPOSES_STATE_TOKEN');

libs/ui/core/src/lib/brain/table-classes-settable.ts

@@ -1,11 +1,12 @@
-import { inject, InjectionToken, InjectOptions } from '@angular/core';
+import { createInjectionToken } from './create-injection-token';
 
 export interface TableClassesSettable {
 	setTableClasses: (classes: Partial<{ table: string; headerRow: string; bodyRow: string }>) => void;
 }
 
-export const SET_TABLE_CLASSES_TOKEN: InjectionToken<TableClassesSettable> = new InjectionToken<TableClassesSettable>(
-	'@spartan-ng SET_TABLE_CLASSES_TOKEN',
-);
-
-export const injectTableClassesSettable = (options: InjectOptions) => inject(SET_TABLE_CLASSES_TOKEN, options);
+export const [
+	injectTableClassesSettable,
+	provideTableClassesSettable,
+	provideTableClassesSettableExisting,
+	SET_TABLE_CLASSES_TOKEN,
+] = createInjectionToken<TableClassesSettable>('@spartan-ng SET_TABLE_CLASSES_TOKEN');

libs/ui/dialog/brain/src/lib/brn-dialog-content.directive.ts

@@ -1,18 +1,13 @@
-import { Directive, forwardRef, inject, Input, TemplateRef } from '@angular/core';
-import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core';
+import { Directive, inject, Input, TemplateRef } from '@angular/core';
+import { ExposesState, provideExposesStateProviderExisting } from '@spartan-ng/ui-core';
 import { BrnDialogComponent } from './brn-dialog.component';
 
 @Directive({
 	selector: '[brnDialogContent]',
 	standalone: true,
-	providers: [
-		{
-			provide: EXPOSES_STATE_TOKEN,
-			useExisting: forwardRef(() => BrnDialogContentDirective),
-		},
-	],
+	providers: [provideExposesStateProviderExisting(() => BrnDialogContentDirective)],
 })
-export class BrnDialogContentDirective<T> {
+export class BrnDialogContentDirective<T> implements ExposesState {
 	private _brnDialog = inject(BrnDialogComponent);
 	private _template = inject(TemplateRef);
 	public state = this._brnDialog.state;

libs/ui/dialog/brain/src/lib/brn-dialog-overlay.component.ts

@@ -1,21 +1,16 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject, Input, ViewEncapsulation } from '@angular/core';
-import { SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN } from '@spartan-ng/ui-core';
+import { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core';
+import { CustomElementClassSettable, provideCustomClassSettableExisting } from '@spartan-ng/ui-core';
 import { BrnDialogComponent } from './brn-dialog.component';
 
 @Component({
 	selector: 'brn-dialog-overlay',
 	standalone: true,
-	providers: [
-		{
-			provide: SET_CLASS_TO_CUSTOM_ELEMENT_TOKEN,
-			useExisting: forwardRef(() => BrnDialogOverlayComponent),
-		},
-	],
+	providers: [provideCustomClassSettableExisting(() => BrnDialogOverlayComponent)],
 	template: ``,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
-export class BrnDialogOverlayComponent {
+export class BrnDialogOverlayComponent implements CustomElementClassSettable {
 	private _brnDialog = inject(BrnDialogComponent);
 	@Input()
 	set class(newClass: string | null | undefined) {

libs/ui/dialog/helm/src/lib/hlm-dialog-content.directive.ts

@@ -9,7 +9,7 @@ import { ClassValue } from 'clsx';
 export class HlmDialogContentDirective {
 	private _inputs: ClassValue = '';
 	private _statusProvider = injectExposesStateProvider({ host: true });
-	public state = this._statusProvider?.state ?? signal('closed').asReadonly();
+	public state = this._statusProvider.state ?? signal('closed').asReadonly();
 	private _renderer = inject(Renderer2);
 	private _element = inject(ElementRef);
 

libs/ui/hover-card/brain/src/lib/brn-hover-card-content.directive.ts

@@ -1,20 +1,19 @@
-import { Directive, forwardRef, inject, TemplateRef } from '@angular/core';
-import { EXPOSES_SIDE_TOKEN, EXPOSES_STATE_TOKEN, ExposesSide, ExposesState } from '@spartan-ng/ui-core';
+import { Directive, inject, TemplateRef } from '@angular/core';
+import {
+	ExposesSide,
+	ExposesState,
+	provideExposedSideProviderExisting,
+	provideExposesStateProviderExisting,
+} from '@spartan-ng/ui-core';
 import { BrnHoverCardContentService } from './brn-hover-card-content.service';
 
 @Directive({
 	selector: '[brnHoverCardContent]',
 	standalone: true,
 	exportAs: 'brnHoverCardContent',
 	providers: [
-		{
-			provide: EXPOSES_STATE_TOKEN,
-			useExisting: forwardRef(() => BrnHoverCardContentDirective),
-		},
-		{
-			provide: EXPOSES_SIDE_TOKEN,
-			useExisting: forwardRef(() => BrnHoverCardContentDirective),
-		},
+		provideExposedSideProviderExisting(() => BrnHoverCardContentDirective),
+		provideExposesStateProviderExisting(() => BrnHoverCardContentDirective),
 	],
 })
 export class BrnHoverCardContentDirective implements ExposesState, ExposesSide {

libs/ui/hover-card/helm/src/lib/hlm-hover-card-content.directive.ts

@@ -11,8 +11,8 @@ export class HlmHoverCardContentDirective {
 
 	private _inputs: ClassValue = '';
 
-	public readonly state = this._statusProvider?.state ?? signal('closed').asReadonly();
-	public readonly side = this._sideProvider?.side ?? signal('bottom').asReadonly();
+	public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
+	public readonly side = this._sideProvider.side ?? signal('bottom').asReadonly();
 
 	constructor() {
 		effect(() => {

libs/ui/popover/brain/src/lib/brn-popover-content.directive.ts

@@ -1,15 +1,10 @@
-import { Directive, forwardRef } from '@angular/core';
-import { EXPOSES_STATE_TOKEN } from '@spartan-ng/ui-core';
+import { Directive } from '@angular/core';
+import { provideExposesStateProviderExisting } from '@spartan-ng/ui-core';
 import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain';
 
 @Directive({
 	selector: '[brnPopoverContent]',
 	standalone: true,
-	providers: [
-		{
-			provide: EXPOSES_STATE_TOKEN,
-			useExisting: forwardRef(() => BrnPopoverContentDirective),
-		},
-	],
+	providers: [provideExposesStateProviderExisting(() => BrnPopoverContentDirective)],
 })
 export class BrnPopoverContentDirective<T> extends BrnDialogContentDirective<T> {}