feat: implement the new service to project

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -1,13 +1,12 @@
 import { Component, Injector, Optional, SkipSelf, Type } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Store } from '@ngxs/store';
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import { LocalizationService } from '../services/localization.service';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 import { RoutesService } from '../services/routes.service';
 import { SubscriptionService } from '../services/subscription.service';
-import { ReplaceableComponentsState } from '../states/replaceable-components.state';
 import { findRoute, getRoutePath } from '../utils/route-utils';
 import { TreeNode } from '../utils/tree-utils';
 
@@ -37,7 +36,7 @@ export class DynamicLayoutComponent {
   constructor(
     injector: Injector,
     private localizationService: LocalizationService,
-    private store: Store,
+    private replaceableComponents: ReplaceableComponentsService,
     private subscription: SubscriptionService,
     @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
   ) {
@@ -67,7 +66,7 @@ export class DynamicLayoutComponent {
         if (!expectedLayout) expectedLayout = eLayoutType.empty;
 
         const key = this.layouts.get(expectedLayout);
-        this.layout = this.getComponent(key).component;
+        this.layout = this.getComponent(key)?.component;
       }
     });
 
@@ -82,6 +81,6 @@ export class DynamicLayoutComponent {
   }
 
   private getComponent(key: string): ReplaceableComponents.ReplaceableComponent {
-    return this.store.selectSnapshot(ReplaceableComponentsState.getComponent(key));
+    return this.replaceableComponents.get(key);
   }
 }

npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, Type } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Store } from '@ngxs/store';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { ReplaceableComponents } from '../models/replaceable-components';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 import { SubscriptionService } from '../services/subscription.service';
-import { ReplaceableComponentsState } from '../states/replaceable-components.state';
 
 @Component({
   selector: 'abp-replaceable-route-container',
@@ -22,7 +21,7 @@ export class ReplaceableRouteContainerComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private store: Store,
+    private replaceableComponents: ReplaceableComponentsService,
     private subscription: SubscriptionService,
   ) {}
 
@@ -31,8 +30,8 @@ export class ReplaceableRouteContainerComponent implements OnInit {
     this.componentKey = (this.route.snapshot.data
       .replaceableComponent as ReplaceableComponents.RouteData).key;
 
-    const component$ = this.store
-      .select(ReplaceableComponentsState.getComponent(this.componentKey))
+    const component$ = this.replaceableComponents
+      .get$(this.componentKey)
       .pipe(distinctUntilChanged());
 
     this.subscription.addOne(

npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts

@@ -10,15 +10,14 @@ import {
   Type,
   ViewContainerRef,
 } from '@angular/core';
-import { Store } from '@ngxs/store';
 import compare from 'just-compare';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import snq from 'snq';
 import { ABP } from '../models/common';
 import { ReplaceableComponents } from '../models/replaceable-components';
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
 import { SubscriptionService } from '../services/subscription.service';
-import { ReplaceableComponentsState } from '../states/replaceable-components.state';
 
 @Directive({ selector: '[abpReplaceableTemplate]', providers: [SubscriptionService] })
 export class ReplaceableTemplateDirective implements OnInit, OnChanges {
@@ -45,7 +44,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
     private templateRef: TemplateRef<any>,
     private cfRes: ComponentFactoryResolver,
     private vcRef: ViewContainerRef,
-    private store: Store,
+    private replaceableComponents: ReplaceableComponentsService,
     private subscription: SubscriptionService,
   ) {
     this.context = {
@@ -58,8 +57,8 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    const component$ = this.store
-      .select(ReplaceableComponentsState.getComponent(this.data.componentKey))
+    const component$ = this.replaceableComponents
+      .get$(this.data.componentKey)
       .pipe(
         filter(
           (res = {} as ReplaceableComponents.ReplaceableComponent) =>

npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts

@@ -7,7 +7,11 @@ import { NEVER } from 'rxjs';
 import { DynamicLayoutComponent, RouterOutletComponent } from '../components';
 import { eLayoutType } from '../enums/common';
 import { ABP } from '../models';
-import { ApplicationConfigurationService, RoutesService } from '../services';
+import {
+  ApplicationConfigurationService,
+  RoutesService,
+  ReplaceableComponentsService,
+} from '../services';
 import { ReplaceableComponentsState } from '../states';
 
 @Component({
@@ -78,33 +82,7 @@ const routes: ABP.Route[] = [
   },
 ];
 
-const storeData = {
-  ReplaceableComponentsState: {
-    replaceableComponents: [
-      {
-        key: 'Theme.ApplicationLayoutComponent',
-        component: DummyApplicationLayoutComponent,
-      },
-      {
-        key: 'Theme.AccountLayoutComponent',
-        component: DummyAccountLayoutComponent,
-      },
-      {
-        key: 'Theme.EmptyLayoutComponent',
-        component: DummyEmptyLayoutComponent,
-      },
-    ],
-  },
-};
-
 describe('DynamicLayoutComponent', () => {
-  const mockActions: Actions = NEVER;
-  const mockStore = ({
-    selectSnapshot() {
-      return true;
-    },
-  } as unknown) as Store;
-
   const createComponent = createRoutingFactory({
     component: RouterOutletComponent,
     stubsEnabled: false,
@@ -113,10 +91,16 @@ describe('DynamicLayoutComponent', () => {
     providers: [
       {
         provide: RoutesService,
-        useFactory: () => new RoutesService(mockActions, mockStore),
+        useFactory: () =>
+          new RoutesService(NEVER, ({
+            selectSnapshot() {
+              return true;
+            },
+          } as unknown) as Store),
       },
+      ReplaceableComponentsService,
     ],
-    imports: [RouterModule, DummyLayoutModule, NgxsModule.forRoot([ReplaceableComponentsState])],
+    imports: [RouterModule, DummyLayoutModule, NgxsModule.forRoot()],
     routes: [
       { path: '', component: RouterOutletComponent },
       {
@@ -163,15 +147,26 @@ describe('DynamicLayoutComponent', () => {
   });
 
   let spectator: SpectatorRouting<RouterOutletComponent>;
-  let store: Store;
+  let replaceableComponents: ReplaceableComponentsService;
 
   beforeEach(async () => {
     spectator = createComponent();
-    store = spectator.inject(Store);
+    replaceableComponents = spectator.inject(ReplaceableComponentsService);
     const routesService = spectator.inject(RoutesService);
     routesService.add(routes);
 
-    store.reset(storeData);
+    replaceableComponents.add({
+      key: 'Theme.ApplicationLayoutComponent',
+      component: DummyApplicationLayoutComponent,
+    });
+    replaceableComponents.add({
+      key: 'Theme.AccountLayoutComponent',
+      component: DummyAccountLayoutComponent,
+    });
+    replaceableComponents.add({
+      key: 'Theme.EmptyLayoutComponent',
+      component: DummyEmptyLayoutComponent,
+    });
   });
 
   it('should handle application layout from parent abp route and display it', async () => {
@@ -204,8 +199,8 @@ describe('DynamicLayoutComponent', () => {
   });
 
   it('should not display any layout when layouts are empty', async () => {
-    store.reset({ ...storeData, ReplaceableComponentsState: {} });
-
+    const spy = jest.spyOn(replaceableComponents, 'get');
+    spy.mockReturnValue(null);
     spectator.detectChanges();
 
     spectator.router.navigateByUrl('/withoutLayout');

npm/ng-packs/packages/theme-basic/src/lib/providers/styles.provider.ts

@@ -1,4 +1,4 @@
-import { AddReplaceableComponent, CONTENT_STRATEGY, DomInsertionService } from '@abp/ng.core';
+import { ReplaceableComponentsService, CONTENT_STRATEGY, DomInsertionService } from '@abp/ng.core';
 import { APP_INITIALIZER } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
@@ -11,32 +11,33 @@ export const BASIC_THEME_STYLES_PROVIDERS = [
   {
     provide: APP_INITIALIZER,
     useFactory: configureStyles,
-    deps: [DomInsertionService, Store],
+    deps: [DomInsertionService, ReplaceableComponentsService],
     multi: true,
   },
 ];
 
-export function configureStyles(domInsertion: DomInsertionService, store: Store) {
+export function configureStyles(
+  domInsertion: DomInsertionService,
+  replaceableComponents: ReplaceableComponentsService,
+) {
   return () => {
     domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
 
-    initLayouts(store);
+    initLayouts(replaceableComponents);
   };
 }
 
-function initLayouts(store: Store) {
-  store.dispatch([
-    new AddReplaceableComponent({
-      key: eThemeBasicComponents.ApplicationLayout,
-      component: ApplicationLayoutComponent,
-    }),
-    new AddReplaceableComponent({
-      key: eThemeBasicComponents.AccountLayout,
-      component: AccountLayoutComponent,
-    }),
-    new AddReplaceableComponent({
-      key: eThemeBasicComponents.EmptyLayout,
-      component: EmptyLayoutComponent,
-    }),
-  ]);
+function initLayouts(replaceableComponents: ReplaceableComponentsService) {
+  replaceableComponents.add({
+    key: eThemeBasicComponents.ApplicationLayout,
+    component: ApplicationLayoutComponent,
+  });
+  replaceableComponents.add({
+    key: eThemeBasicComponents.AccountLayout,
+    component: AccountLayoutComponent,
+  });
+  replaceableComponents.add({
+    key: eThemeBasicComponents.EmptyLayout,
+    component: EmptyLayoutComponent,
+  });
 }