feat: use inject

.vscode/settings.json

@@ -86,5 +86,6 @@
   },
   "files.trimTrailingWhitespace": true,
   "files.trimFinalNewlines": false,
-  "otter.extract.styling.prefix": "o3r"
+  "otter.extract.styling.prefix": "o3r",
+  "typescript.tsserver.experimental.useVsCodeWatcher": false
 }

apps/showcase/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, TemplateRef } from '@angular/core';
+import { Component, inject, OnDestroy, TemplateRef } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { NgbOffcanvas, NgbOffcanvasRef } from '@ng-bootstrap/ng-bootstrap';
 import { O3rComponent } from '@o3r/core';
@@ -48,11 +48,11 @@ export class AppComponent implements OnDestroy {
 
   private readonly subscriptions = new Subscription();
 
-  constructor(
-    router: Router,
-    private readonly offcanvasService: NgbOffcanvas
-  ) {
-    const onNavigationEnd$ = router.events.pipe(
+  private readonly router = inject(Router);
+  private readonly offcanvasService = inject(NgbOffcanvas);
+
+  constructor() {
+    const onNavigationEnd$ = this.router.events.pipe(
       filter((event): event is NavigationEnd => event instanceof NavigationEnd),
       share()
     );

apps/showcase/src/app/component-replacement/component-replacement.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
 import { InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/utilities/in-page-nav';
 import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavPresComponent } from '../../components/utilities/in-page-nav/in-page-nav-pres.component';
@@ -18,13 +18,12 @@ import { CopyTextPresComponent } from '../../components/utilities/copy-text/copy
   imports: [RouterModule, InPageNavPresComponent, AsyncPipe, IN_PAGE_NAV_PRES_DIRECTIVES, ComponentReplacementPresComponent, CopyTextPresComponent]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
 
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
 
-  constructor(private readonly inPageNavPresService: InPageNavPresService) { }
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/app/component-replacement/component-replacement.template.html

@@ -18,7 +18,7 @@ <h2 id="component-replacement-example">Example</h2>
       <p>
         Here is an example of a hebrew datepicker which replaces the default datepicker component used in other modules.
       </p>
-      <o3r-component-replacement-pres></o3r-component-replacement-pres>
+      <o3r-component-replacement-pres [config]="{ datePickerCustomKey: 'exampleDatePickerFlavorHebrew' }"></o3r-component-replacement-pres>
       <p class="mt-4">
         Do not hesitate to run the application locally. If not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>.
       </p>

apps/showcase/src/app/configuration/configuration.component.ts

@@ -1,9 +1,7 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, computed, QueryList, signal, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, QueryList, signal, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { ApplicationDevtoolsModule } from '@o3r/application';
-import { ComponentsDevtoolsModule } from '@o3r/components';
-import { ConfigurationBaseServiceModule, ConfigurationDevtoolsMessageService, ConfigurationDevtoolsModule } from '@o3r/configuration';
+import { ConfigurationBaseServiceModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
 import { ConfigurationPresComponent, CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 import { ConfigurationPresConfig } from '../../components/showcase/configuration/configuration-pres.config';
@@ -25,9 +23,6 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
   imports: [
     RouterModule,
     ConfigurationPresComponent,
-    ApplicationDevtoolsModule,
-    ComponentsDevtoolsModule,
-    ConfigurationDevtoolsModule,
     ConfigurationBaseServiceModule,
     CopyTextPresComponent,
     IN_PAGE_NAV_PRES_DIRECTIVES,
@@ -39,6 +34,8 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ConfigurationComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
@@ -54,13 +51,6 @@ export class ConfigurationComponent implements AfterViewInit {
       : '<o3r-configuration-pres></o3r-configuration-pres>';
   });
 
-  constructor(
-    private readonly inPageNavPresService: InPageNavPresService,
-    configurationDevtoolsMessageService: ConfigurationDevtoolsMessageService
-  ) {
-    configurationDevtoolsMessageService.activate();
-  }
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/app/design-token/design-token.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
@@ -21,15 +21,12 @@ import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIREC
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DesignTokenComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
 
-  constructor(
-    private readonly inPageNavPresService: InPageNavPresService
-  ) {
-  }
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/app/dynamic-content/dynamic-content.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
@@ -23,6 +23,8 @@ import { CopyTextPresComponent, DynamicContentPresComponent, IN_PAGE_NAV_PRES_DI
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DynamicContentComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
@@ -33,10 +35,6 @@ export class DynamicContentComponent implements AfterViewInit {
   ...
 </body>`;
 
-  constructor(
-    private readonly inPageNavPresService: InPageNavPresService
-  ) {}
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/app/localization/localization.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService, LocalizationPresComponent } from '../../components/index';
@@ -21,12 +21,12 @@ import { CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPa
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LocalizationComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
 
-  constructor(private readonly inPageNavPresService: InPageNavPresService) {}
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/app/placeholder/placeholder.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { type AfterViewInit, ChangeDetectionStrategy, Component, type QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { type AfterViewInit, ChangeDetectionStrategy, Component, inject, type QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { PlaceholderRulesEngineActionHandler, PlaceholderRulesEngineActionModule } from '@o3r/components/rules-engine';
@@ -31,22 +31,19 @@ import { TripFactsService } from '../../facts';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PlaceholderComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+  private readonly dynamicContentService = inject(DynamicContentService);
+  private readonly store = inject(Store<RulesetsStore>);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
 
-  constructor(
-    private readonly inPageNavPresService: InPageNavPresService,
-    private readonly tripFactsService: TripFactsService,
-    private readonly store: Store<RulesetsStore>,
-    private readonly dynamicContentService: DynamicContentService,
-    rulesEngine: RulesEngineRunnerService,
-    placeholderRulesEngineActionHandler: PlaceholderRulesEngineActionHandler
-  ) {
-    // We recommend to do the 3 next lines in the AppComponent
+  constructor() {
+    // We recommend to do the next lines in the AppComponent
     // Here we do it for the sake of the example
-    this.tripFactsService.register();
-    rulesEngine.actionHandlers.add(placeholderRulesEngineActionHandler);
+    inject(TripFactsService).register();
+    inject(RulesEngineRunnerService).actionHandlers.add(inject(PlaceholderRulesEngineActionHandler));
     void this.loadRuleSet();
   }
 

apps/showcase/src/app/rules-engine/rules-engine.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
@@ -69,6 +69,10 @@ import { CurrentTimeFactsService } from '../../services/current-time-facts.servi
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RulesEngineComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+  private readonly dynamicContentService = inject(DynamicContentService);
+  private readonly store = inject(Store<RulesetsStore>);
+
   public newYorkAvailableRule = '';
   public helloNewYorkRule = '';
   public summerOtterRule = '';
@@ -80,27 +84,19 @@ export class RulesEngineComponent implements AfterViewInit {
 
   public activeRuleTab = 'configuration';
 
-  constructor(
-    private readonly inPageNavPresService: InPageNavPresService,
-    private readonly dynamicContentService: DynamicContentService,
-    private readonly tripFactsService: TripFactsService,
-    public currentTimeFactsService: CurrentTimeFactsService,
-    private readonly store: Store<RulesetsStore>,
-    rulesEngineService: RulesEngineRunnerService,
-    configHandle: ConfigurationRulesEngineActionHandler,
-    assetsHandler: AssetRulesEngineActionHandler,
-    localizationHandler: LocalizationRulesEngineActionHandler
-  ) {
-    // We recommend to do the 9 next lines in the AppComponent
+  constructor() {
+    // We recommend to do the next lines in the AppComponent
     // Here we do it for the sake of the example
-    rulesEngineService.actionHandlers.add(configHandle);
-    rulesEngineService.actionHandlers.add(assetsHandler);
-    rulesEngineService.actionHandlers.add(localizationHandler);
+    const rulesEngineService = inject(RulesEngineRunnerService);
+    rulesEngineService.actionHandlers.add(inject(ConfigurationRulesEngineActionHandler));
+    rulesEngineService.actionHandlers.add(inject(AssetRulesEngineActionHandler));
+    rulesEngineService.actionHandlers.add(inject(LocalizationRulesEngineActionHandler));
     rulesEngineService.engine.upsertOperators([duringSummer] as UnaryOperator[]);
     rulesEngineService.engine.upsertOperators([dateInNextMinutes] as Operator[]);
-    this.tripFactsService.register();
-    this.currentTimeFactsService.register();
-    this.currentTimeFactsService.tick();
+    inject(TripFactsService).register();
+    const currentTimeFactsService = inject(CurrentTimeFactsService);
+    currentTimeFactsService.register();
+    currentTimeFactsService.tick();
     void this.loadRuleSet();
   }
 

apps/showcase/src/app/sdk/sdk.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import {
@@ -28,12 +28,12 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SdkComponent implements AfterViewInit {
+  private readonly inPageNavPresService = inject(InPageNavPresService);
+
   @ViewChildren(InPageNavLinkDirective)
   private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
   public links$ = this.inPageNavPresService.links$;
 
-  constructor(private readonly inPageNavPresService: InPageNavPresService) {}
-
   public ngAfterViewInit() {
     this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
   }

apps/showcase/src/components/showcase/basic/basic-pres.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
 import { formatDate } from '@angular/common';
 import { O3rComponent } from '@o3r/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -20,14 +20,10 @@ export class BasicPresComponent {
   /**
    * Form group
    */
-  public form: FormGroup<{ destination: FormControl<string | null>; outboundDate: FormControl<string | null> }>;
-
-  constructor(fb: FormBuilder) {
-    this.form = fb.group({
-      destination: new FormControl<string | null>(null),
-      outboundDate: new FormControl<string | null>(this.formatDate(Date.now() + 7 * ONE_DAY_IN_MS))
-    });
-  }
+  public form: FormGroup<{ destination: FormControl<string | null>; outboundDate: FormControl<string | null> }> = inject(FormBuilder).group({
+    destination: new FormControl<string | null>(null),
+    outboundDate: new FormControl<string | null>(this.formatDate(Date.now() + 7 * ONE_DAY_IN_MS))
+  });
 
   private formatDate(dateTime: number) {
     return formatDate(dateTime, 'yyyy-MM-dd', 'en-GB');

apps/showcase/src/components/showcase/component-replacement/component-replacement-pres.component.ts

@@ -1,10 +1,10 @@
 import { CommonModule, formatDate } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, OnChanges, Optional, SimpleChanges, Type, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input, type Signal, Type, ViewEncapsulation } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { C11nModule, C11nService } from '@o3r/components';
-import { ConfigObserver, ConfigurationBaseService, ConfigurationObserver, DynamicConfigurable } from '@o3r/configuration';
+import { configSignal, DynamicConfigurableWithSignal, O3rConfig } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
-import { Observable } from 'rxjs';
 import { DatePickerInputPresComponent, DatePickerInputPresContext } from '../../utilities/index';
 import { COMPONENT_REPLACEMENT_PRES_DEFAULT_CONFIG } from './component-replacement-pres.config';
 import { COMPONENT_REPLACEMENT_PRES_CONFIG_ID } from './component-replacement-pres.config';
@@ -22,48 +22,31 @@ const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ComponentReplacementPresComponent implements OnChanges, DynamicConfigurable<ComponentReplacementPresConfig> {
-
-  /** Configuration stream based on the input and the stored configuration*/
-  public config$: Observable<ComponentReplacementPresConfig>;
-
-  @ConfigObserver()
-  private readonly dynamicConfig$: ConfigurationObserver<ComponentReplacementPresConfig>;
+export class ComponentReplacementPresComponent implements DynamicConfigurableWithSignal<ComponentReplacementPresConfig> {
+  private readonly c11nService = inject(C11nService);
 
   /** Input configuration to override the default configuration of the component*/
-  @Input()
-  public config: Partial<ComponentReplacementPresConfig> | undefined;
+  public config = input<Partial<ComponentReplacementPresConfig>>();
 
-  /** Observable of the presenter that we want to use, processed by the c11n directive */
-  public presenter$!: Observable<Type<DatePickerInputPresContext>>;
-
-  public dateFormControl = new FormControl<string | null>(this.formatDate(Date.now() + 7 * ONE_DAY_IN_MS));
+  @O3rConfig()
+  public readonly configSignal = configSignal(
+      this.config,
+      COMPONENT_REPLACEMENT_PRES_CONFIG_ID,
+      COMPONENT_REPLACEMENT_PRES_DEFAULT_CONFIG
+    );
 
-  constructor(
-    private readonly c11nService: C11nService,
-    @Optional() configurationService: ConfigurationBaseService
-  ) {
-    this.dynamicConfig$ = new ConfigurationObserver<ComponentReplacementPresConfig>(COMPONENT_REPLACEMENT_PRES_CONFIG_ID, COMPONENT_REPLACEMENT_PRES_DEFAULT_CONFIG, configurationService);
-    this.config$ = this.dynamicConfig$.asObservable();
-    this.loadPresenter();
-    this.dynamicConfig$.next({ ...this.config, datePickerCustomKey: 'exampleDatePickerFlavorHebrew' });
-  }
+  public datePickerComponent: Signal<Type<DatePickerInputPresContext> | undefined>;
 
-  private formatDate(dateTime: number) {
-    return formatDate(dateTime, 'yyyy-MM-dd', 'en-GB');
-  }
+  public dateFormControl = new FormControl<string | null>(this.formatDate(Date.now() + 7 * ONE_DAY_IN_MS));
 
-  private loadPresenter() {
-    this.presenter$ = this.config$.pipe(
+  constructor() {
+    this.datePickerComponent = toSignal(toObservable(this.configSignal).pipe(
       // Compute which presenter to use according to the configuration and the default presenter that we define here
       this.c11nService.getPresenter(DatePickerInputPresComponent, 'datePickerCustomKey')
-    );
+    ));
   }
 
-  public ngOnChanges(changes: SimpleChanges) {
-    if (changes.config) {
-      this.dynamicConfig$.next(this.config);
-    }
+  private formatDate(dateTime: number) {
+    return formatDate(dateTime, 'yyyy-MM-dd', 'en-GB');
   }
-
 }