feat(core): allow a component to register nesting components

In a large project, a component can have dependencies on other components.
This feature makes it easier to mount required components to the application.

Signed-off-by: Raymond Feng <enjoyjava@gmail.com>

Author: Raymond Feng

packages/core/src/__tests__/acceptance/application.acceptance.ts

@@ -5,7 +5,7 @@
 
 import {Constructor, inject, Provider} from '@loopback/context';
 import {expect} from '@loopback/testlab';
-import {Application, ControllerClass} from '../..';
+import {Application, Component, ControllerClass} from '../..';
 
 describe('Bootstrapping the application', () => {
   context('with user-defined components', () => {
@@ -20,6 +20,29 @@ describe('Bootstrapping the application', () => {
       expect(componentInstance).to.be.instanceOf(AuditComponent);
     });
 
+    it('register all child components from a component', () => {
+      let componentACreated = 0;
+      class ComponentA implements Component {
+        constructor() {
+          componentACreated++;
+        }
+      }
+      class ComponentB implements Component {}
+      class ParentComponent implements Component {
+        components = [ComponentA, ComponentB];
+      }
+      const app = new Application();
+      app.component(ParentComponent);
+      const componentKeys = app.find('components.*').map(b => b.key);
+      expect(componentKeys).to.containEql('components.ComponentA');
+      expect(componentKeys).to.containEql('components.ComponentB');
+      expect(componentKeys).to.containEql('components.ParentComponent');
+
+      // Re-registration of ComponentA does not have side effects
+      app.component(ComponentA);
+      expect(componentACreated).to.eql(1);
+    });
+
     it('registers all providers from components', () => {
       class FooProvider {
         value() {

packages/core/src/application.ts

@@ -470,6 +470,11 @@ export class Application extends Context implements LifeCycleObserver {
       defaultScope: BindingScope.SINGLETON,
       ...toOptions(nameOrOptions),
     });
+    // Check if the component is already bound
+    const found = this.registry.get(binding.key);
+    if (found?.valueConstructor === binding.valueConstructor) {
+      return binding;
+    }
     if (isLifeCycleObserverClass(componentCtor)) {
       binding.apply(asLifeCycleObserver);
     }

packages/core/src/component.ts

@@ -91,6 +91,11 @@ export interface Component {
    */
   bindings?: Binding[];
 
+  /**
+   * An array of component classes
+   */
+  components?: Constructor<Component>[];
+
   /**
    * Other properties
    */
@@ -152,4 +157,11 @@ export function mountComponent(app: Application, component: Component) {
       app.service(service);
     }
   }
+
+  if (component.components) {
+    for (const c of component.components) {
+      if (c === component) continue;
+      app.component(c);
+    }
+  }
 }