MOBILE-4166 core: Implement CoreDirectivesRegistry and deprecate old one

Author: dpalou

src/addons/mod/quiz/pages/player/player.page.ts

@@ -47,7 +47,7 @@ import { CanLeave } from '@guards/can-leave';
 import { CoreForms } from '@singletons/form';
 import { CoreDom } from '@singletons/dom';
 import { CoreTime } from '@singletons/time';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 
 /**
  * Page that allows attempting a quiz.
@@ -690,7 +690,7 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy, CanLeave {
      */
     protected async scrollToQuestion(slot: number): Promise<void> {
         await CoreUtils.nextTick();
-        await CoreComponentsRegistry.waitComponentsReady(this.elementRef.nativeElement, 'core-question');
+        await CoreDirectivesRegistry.waitDirectivesReady(this.elementRef.nativeElement, 'core-question');
         await CoreDom.scrollToElement(
             this.elementRef.nativeElement,
             '#addon-mod_quiz-question-' + slot,

src/addons/qtype/ddwtos/classes/ddwtos.ts

@@ -15,7 +15,7 @@
 import { CoreFormatTextDirective } from '@directives/format-text';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreUtils } from '@services/utils/utils';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CoreCoordinates, CoreDom } from '@singletons/dom';
 import { CoreEventObserver } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
@@ -427,7 +427,7 @@ export class AddonQtypeDdwtosQuestion {
     protected async waitForReady(): Promise<void> {
         await CoreDom.waitToBeInDOM(this.container);
 
-        await CoreComponentsRegistry.waitComponentsReady(this.container, 'core-format-text', CoreFormatTextDirective);
+        await CoreDirectivesRegistry.waitDirectivesReady(this.container, 'core-format-text', CoreFormatTextDirective);
 
         const drag = Array.from(this.container.querySelectorAll<HTMLElement>(this.selectors.dragHomes()))[0];
 

src/core/classes/async-component.ts renamed to src/core/classes/async-directive.ts

@@ -13,12 +13,12 @@
 // limitations under the License.
 
 /**
- * Component that is not rendered immediately after being mounted.
+ * Directive that is not rendered immediately after being mounted.
  */
-export interface AsyncComponent {
+export interface AsyncDirective {
 
     /**
-     * Wait until the component is fully rendered and ready.
+     * Wait until the directive is fully rendered and ready.
      */
     ready(): Promise<void>;
 }

src/core/classes/page-load-watcher.ts

@@ -15,7 +15,7 @@
 import { CoreSitesReadingStrategy } from '@services/sites';
 import { CoreUtils } from '@services/utils/utils';
 import { Subscription } from 'rxjs';
-import { AsyncComponent } from './async-component';
+import { AsyncDirective } from './async-directive';
 import { PageLoadsManager } from './page-loads-manager';
 import { CorePromisedValue } from './promised-value';
 import { WSObservable } from './site';
@@ -27,7 +27,7 @@ export class PageLoadWatcher {
 
     protected hasChanges = false;
     protected ongoingRequests = 0;
-    protected components = new Set<AsyncComponent>();
+    protected components = new Set<AsyncDirective>();
     protected loadedTimeout?: number;
     protected hasChangesPromises: Promise<boolean>[] = [];
 
@@ -66,7 +66,7 @@ export class PageLoadWatcher {
      *
      * @param component Component instance.
      */
-    async watchComponent(component: AsyncComponent): Promise<void> {
+    async watchComponent(component: AsyncDirective): Promise<void> {
         this.components.add(component);
         clearTimeout(this.loadedTimeout);
 

src/core/classes/page-loads-manager.ts

@@ -16,7 +16,7 @@ import { CoreRefreshButtonModalComponent } from '@components/refresh-button-moda
 import { CoreNavigator } from '@services/navigator';
 import { CoreDomUtils } from '@services/utils/dom';
 import { Subject } from 'rxjs';
-import { AsyncComponent } from './async-component';
+import { AsyncDirective } from './async-directive';
 import { PageLoadWatcher } from './page-load-watcher';
 
 /**
@@ -37,7 +37,7 @@ export class PageLoadsManager {
      * @param staleWhileRevalidate Whether to use stale while revalidate strategy.
      * @returns Load watcher to use.
      */
-    startPageLoad(page: AsyncComponent, staleWhileRevalidate: boolean): PageLoadWatcher {
+    startPageLoad(page: AsyncDirective, staleWhileRevalidate: boolean): PageLoadWatcher {
         this.initialPath = this.initialPath ?? CoreNavigator.getCurrentPath();
         this.currentLoadWatcher = new PageLoadWatcher(this, staleWhileRevalidate);
         this.ongoingLoadWatchers.add(this.currentLoadWatcher);
@@ -53,7 +53,7 @@ export class PageLoadsManager {
      * @param component Component instance.
      * @returns Load watcher to use.
      */
-    startComponentLoad(component: AsyncComponent): PageLoadWatcher {
+    startComponentLoad(component: AsyncDirective): PageLoadWatcher {
         // If a component is loading data without the page loading data, probably the component is reloading/refreshing.
         // In that case, create a load watcher instance but don't store it in currentLoadWatcher because it's not a page load.
         const loadWatcher = this.currentLoadWatcher ?? new PageLoadWatcher(this, false);

src/core/classes/tabs.ts

@@ -37,8 +37,8 @@ import { CoreDom } from '@singletons/dom';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreError } from './errors/error';
 import { CorePromisedValue } from './promised-value';
-import { AsyncComponent } from './async-component';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { AsyncDirective } from './async-directive';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CorePlatform } from '@services/platform';
 
 /**
@@ -47,7 +47,7 @@ import { CorePlatform } from '@services/platform';
 @Component({
     template: '',
 })
-export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, AfterViewInit, OnChanges, OnDestroy, AsyncComponent {
+export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, AfterViewInit, OnChanges, OnDestroy, AsyncDirective {
 
     // Minimum tab's width.
     protected static readonly MIN_TAB_WIDTH = 107;
@@ -99,7 +99,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
 
         this.tabAction = new CoreTabsRoleTab(this);
 
-        CoreComponentsRegistry.register(element.nativeElement, this);
+        CoreDirectivesRegistry.register(element.nativeElement, this);
     }
 
     /**

src/core/components/context-menu/context-menu.ts

@@ -20,7 +20,7 @@ import { CoreUtils } from '@services/utils/utils';
 import { Translate } from '@singletons';
 import { CoreContextMenuItemComponent } from './context-menu-item';
 import { CoreContextMenuPopoverComponent } from './context-menu-popover';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 
 /**
  * This component adds a button (usually in the navigation bar) that displays a context menu popover.
@@ -61,7 +61,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
         // Calculate the unique ID.
         this.uniqueId = 'core-context-menu-' + CoreUtils.getUniqueId('CoreContextMenuComponent');
 
-        CoreComponentsRegistry.register(elementRef.nativeElement, this);
+        CoreDirectivesRegistry.register(elementRef.nativeElement, this);
     }
 
     /**

src/core/components/loading/loading.ts

@@ -18,9 +18,9 @@ import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreAnimations } from '@components/animations';
 import { Translate } from '@singletons';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CorePromisedValue } from '@classes/promised-value';
-import { AsyncComponent } from '@classes/async-component';
+import { AsyncDirective } from '@classes/async-directive';
 import { CoreApp } from '@services/app';
 
 /**
@@ -49,7 +49,7 @@ import { CoreApp } from '@services/app';
     styleUrls: ['loading.scss'],
     animations: [CoreAnimations.SHOW_HIDE],
 })
-export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, AsyncComponent, OnDestroy {
+export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, AsyncDirective, OnDestroy {
 
     @Input() hideUntil: unknown = false; // Determine when should the contents be shown.
     @Input() message?: string; // Message to show while loading.
@@ -65,7 +65,7 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
 
     constructor(element: ElementRef) {
         this.element = element.nativeElement;
-        CoreComponentsRegistry.register(this.element, this);
+        CoreDirectivesRegistry.register(this.element, this);
 
         // Calculate the unique ID.
         this.uniqueId = 'core-loading-content-' + CoreUtils.getUniqueId('CoreLoadingComponent');

src/core/components/navbar-buttons/navbar-buttons.ts

@@ -25,7 +25,7 @@ import {
 import { CoreLogger } from '@singletons/logger';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreContextMenuComponent } from '../context-menu/context-menu';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CoreDom } from '@singletons/dom';
 
 const BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden';
@@ -82,7 +82,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
         this.element = element.nativeElement;
         this.logger = CoreLogger.getInstance('CoreNavBarButtonsComponent');
 
-        CoreComponentsRegistry.register(this.element, this);
+        CoreDirectivesRegistry.register(this.element, this);
     }
 
     /**
@@ -156,11 +156,11 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
         }
 
         const mainContextMenu = buttonsContainer.querySelector('core-context-menu');
-        const secondaryContextMenuInstance = CoreComponentsRegistry.resolve(secondaryContextMenu, CoreContextMenuComponent);
+        const secondaryContextMenuInstance = CoreDirectivesRegistry.resolve(secondaryContextMenu, CoreContextMenuComponent);
         let mainContextMenuInstance: CoreContextMenuComponent | null;
         if (mainContextMenu) {
             // Both containers have a context menu. Merge them to prevent having 2 menus at the same time.
-            mainContextMenuInstance = CoreComponentsRegistry.resolve(mainContextMenu, CoreContextMenuComponent);
+            mainContextMenuInstance = CoreDirectivesRegistry.resolve(mainContextMenu, CoreContextMenuComponent);
         } else {
             // There is a context-menu in these buttons, but there is no main context menu in the header.
             // Create one main context menu dynamically.

src/core/components/tabs-outlet/tabs-outlet.ts

@@ -31,7 +31,7 @@ import { CoreNavBarButtonsComponent } from '../navbar-buttons/navbar-buttons';
 import { StackEvent } from '@ionic/angular/directives/navigation/stack-utils';
 import { CoreNavigator } from '@services/navigator';
 import { CoreTabBase, CoreTabsBaseComponent } from '@classes/tabs';
-import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 
 /**
  * This component displays some top scrollable tabs that will autohide on vertical scroll.
@@ -207,7 +207,7 @@ export class CoreTabsOutletComponent extends CoreTabsBaseComponent<CoreTabsOutle
     protected showHideNavBarButtons(activatedPageName: string): void {
         const elements = this.ionTabs.outlet.nativeEl.querySelectorAll('core-navbar-buttons');
         elements.forEach((element) => {
-            const instance = CoreComponentsRegistry.resolve(element, CoreNavBarButtonsComponent);
+            const instance = CoreDirectivesRegistry.resolve(element, CoreNavBarButtonsComponent);
 
             if (instance) {
                 const pagetagName = element.closest('.ion-page')?.tagName;