feat(modules): split every directive into separate module

And remove required static module methods. This together allows greater tree-shaking abilities. All changes to public API are done in deprecation manner - meaning nothing should be done to update. However it is recommended to get rid of deprecated APIs to prepare for next major version.
gund · Mar 13, 2020 · 5f2985b · 5f2985b
1 parent fb3a680
commit 5f2985b
Show file tree

Hide file tree

Showing 33 changed files with 286 additions and 143 deletions.
diff --git a/projects/ng-dynamic-component/src/lib/component-injector.ts b/projects/ng-dynamic-component/src/lib/component-injector.ts
diff --git a/...mponent-outlet-injector.directive.spec.ts → ...mponent-outlet-injector.directive.spec.ts b/...mponent-outlet-injector.directive.spec.ts → ...mponent-outlet-injector.directive.spec.ts
@@ -6,7 +6,7 @@ import {
   InjectedComponent,
   TestComponent as TestComponentBase,
   TestModule,
-} from '../test';
+} from '../../test';
 import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
 
 @Component({

diff --git a/...ib/component-outlet-injector.directive.ts → ...or/component-outlet-injector.directive.ts b/...ib/component-outlet-injector.directive.ts → ...or/component-outlet-injector.directive.ts
@@ -1,14 +1,24 @@
 import { NgComponentOutlet } from '@angular/common';
 import { ComponentRef, Directive, Host } from '@angular/core';
 
-import { ComponentInjector } from './component-injector';
+import {
+  DynamicComponentInjector,
+  DynamicComponentInjectorToken,
+} from './token';
 
 @Directive({
   // tslint:disable-next-line: directive-selector
   selector: '[ngComponentOutlet]',
   exportAs: 'ndcComponentOutletInjector',
+  providers: [
+    {
+      provide: DynamicComponentInjectorToken,
+      useExisting: ComponentOutletInjectorDirective,
+    },
+  ],
 })
-export class ComponentOutletInjectorDirective implements ComponentInjector {
+export class ComponentOutletInjectorDirective
+  implements DynamicComponentInjector {
   get componentRef(): ComponentRef<any> {
     return (this.componentOutlet as any)._componentRef;
   }

diff --git a/projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.module.ts b/projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ComponentOutletInjectorDirective],
+  declarations: [ComponentOutletInjectorDirective],
+})
+export class ComponentOutletInjectorModule {}
diff --git a/projects/ng-dynamic-component/src/lib/component-injector/index.ts b/projects/ng-dynamic-component/src/lib/component-injector/index.ts
@@ -0,0 +1,3 @@
+export * from './token';
+export * from './component-outlet-injector.directive';
+export * from './component-outlet-injector.module';
diff --git a/projects/ng-dynamic-component/src/lib/component-injector/token.ts b/projects/ng-dynamic-component/src/lib/component-injector/token.ts
@@ -0,0 +1,20 @@
+import { ComponentRef, InjectionToken } from '@angular/core';
+
+export interface DynamicComponentInjector {
+  componentRef: ComponentRef<any> | null;
+}
+
+/**
+ * @deprecated Since v6.0.0 - Use {@link DynamicComponentInjector} instead
+ */
+export type ComponentInjector = DynamicComponentInjector;
+
+export const DynamicComponentInjectorToken = new InjectionToken<
+  DynamicComponentInjector
+>('DynamicComponentInjector');
+
+/**
+ * @deprecated Since v6.0.0 - Use {@link DynamicComponentInjectorToken} instead
+ * and provide component class via `useExisting` instead of `useValue`
+ */
+export const COMPONENT_INJECTOR = DynamicComponentInjectorToken;
diff --git a/.../lib/dynamic-attributes.directive.spec.ts → ...utes/dynamic-attributes.directive.spec.ts b/.../lib/dynamic-attributes.directive.spec.ts → ...utes/dynamic-attributes.directive.spec.ts
@@ -5,18 +5,20 @@ import { By } from '@angular/platform-browser';
 
 import {
   AnotherInjectedComponent,
+  getByPredicate,
   InjectedComponent,
   TestComponent as TestComponentBase,
   TestModule,
-  getByPredicate,
-} from '../test';
-import { COMPONENT_INJECTOR } from './component-injector';
-import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+} from '../../test';
+import {
+  ComponentOutletInjectorDirective,
+  DynamicComponentInjectorToken,
+} from '../component-injector';
+import { DynamicComponent } from '../dynamic.component';
 import {
   AttributesMap,
   DynamicAttributesDirective,
 } from './dynamic-attributes.directive';
-import { DynamicComponent } from './dynamic.component';
 
 const getInjectedComponentFrom = getByPredicate<InjectedComponent>(
   By.directive(InjectedComponent),
@@ -51,7 +53,10 @@ describe('DynamicAttributesDirective', () => {
           ComponentOutletInjectorDirective,
         ],
         providers: [
-          { provide: COMPONENT_INJECTOR, useValue: DynamicComponent },
+          {
+            provide: DynamicComponentInjectorToken,
+            useExisting: DynamicComponent,
+          },
         ],
       }).compileComponents();
 
@@ -241,7 +246,10 @@ describe('DynamicAttributesDirective', () => {
           ComponentOutletInjectorDirective,
         ],
         providers: [
-          { provide: COMPONENT_INJECTOR, useValue: DynamicComponent },
+          {
+            provide: DynamicComponentInjectorToken,
+            useExisting: DynamicComponent,
+          },
         ],
       }).compileComponents();
 
@@ -292,7 +300,10 @@ describe('DynamicAttributesDirective', () => {
           TestComponent,
         ],
         providers: [
-          { provide: COMPONENT_INJECTOR, useValue: DynamicComponent },
+          {
+            provide: DynamicComponentInjectorToken,
+            useExisting: DynamicComponent,
+          },
         ],
       }).compileComponents();
 
@@ -336,7 +347,10 @@ describe('DynamicAttributesDirective', () => {
           ComponentOutletInjectorDirective,
         ],
         providers: [
-          { provide: COMPONENT_INJECTOR, useValue: DynamicComponent },
+          {
+            provide: DynamicComponentInjectorToken,
+            useExisting: DynamicComponent,
+          },
         ],
       }).compileComponents();
 

diff --git a/...t/src/lib/dynamic-attributes.directive.ts → ...ttributes/dynamic-attributes.directive.ts b/...t/src/lib/dynamic-attributes.directive.ts → ...ttributes/dynamic-attributes.directive.ts
@@ -12,8 +12,11 @@ import {
   Type,
 } from '@angular/core';
 
-import { COMPONENT_INJECTOR, ComponentInjector } from './component-injector';
-import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+import {
+  ComponentOutletInjectorDirective,
+  DynamicComponentInjector,
+  DynamicComponentInjectorToken,
+} from '../component-injector';
 
 export interface AttributesMap {
   [key: string]: string;
@@ -35,10 +38,6 @@ export class DynamicAttributesDirective implements DoCheck {
   ngComponentOutletNdcDynamicAttributes: AttributesMap;
 
   private attrsDiffer = this.differs.find({}).create<string, string>();
-  private componentInjector = this.injector.get(
-    this.componentInjectorType,
-    null,
-  );
   private lastCompType: Type<any>;
   private lastAttrActions: AttributeActions;
 
@@ -78,11 +77,12 @@ export class DynamicAttributesDirective implements DoCheck {
     private renderer: Renderer2,
     private differs: KeyValueDiffers,
     private injector: Injector,
-    @Inject(COMPONENT_INJECTOR)
-    private componentInjectorType: Type<ComponentInjector>,
+    @Inject(DynamicComponentInjectorToken)
     @Optional()
+    private componentInjector?: DynamicComponentInjector,
     @Host()
-    private componentOutletInjector: ComponentOutletInjectorDirective,
+    @Optional()
+    private componentOutletInjector?: ComponentOutletInjectorDirective,
   ) {}
 
   ngDoCheck(): void {

diff --git a/projects/ng-dynamic-component/src/lib/dynamic-attributes/dynamic-attributes.module.ts b/projects/ng-dynamic-component/src/lib/dynamic-attributes/dynamic-attributes.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DynamicAttributesDirective } from './dynamic-attributes.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [DynamicAttributesDirective],
+  declarations: [DynamicAttributesDirective],
+})
+export class DynamicAttributesModule {}
diff --git a/projects/ng-dynamic-component/src/lib/dynamic-attributes/index.ts b/projects/ng-dynamic-component/src/lib/dynamic-attributes/index.ts
@@ -0,0 +1,2 @@
+export * from './dynamic-attributes.directive';
+export * from './dynamic-attributes.module';
diff --git a/.../lib/dynamic-directives.directive.spec.ts → ...ives/dynamic-directives.directive.spec.ts b/.../lib/dynamic-directives.directive.spec.ts → ...ives/dynamic-directives.directive.spec.ts
@@ -17,26 +17,28 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 
 import {
   ComponentInjectorComponent,
   InjectedComponent,
+  MockedInjectedComponent,
   TestComponent,
   TestModule,
-  MockedInjectedComponent,
-} from '../test';
-import { COMPONENT_INJECTOR } from './component-injector';
-import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+} from '../../test';
+import {
+  ComponentOutletInjectorDirective,
+  DynamicComponentInjectorToken,
+} from '../component-injector';
+import { IoFactoryService } from '../io';
+import { WindowRefToken, WindowRefService } from '../window-ref';
 import {
   DirectiveRef,
+  DynamicDirectiveDef,
   dynamicDirectiveDef,
   DynamicDirectivesDirective,
-  DynamicDirectiveDef,
 } from './dynamic-directives.directive';
-import { IoFactoryService } from './io-factory.service';
-import { WindowRefService, WINDOW_REF } from './window-ref.service';
-import { By } from '@angular/platform-browser';
 
 @Directive({ selector: 'mock' })
 class MockDirective
@@ -108,8 +110,11 @@ describe('Directive: DynamicDirectives', () => {
         ComponentOutletInjectorDirective,
       ],
       providers: [
-        { provide: COMPONENT_INJECTOR, useValue: ComponentInjectorComponent },
-        { provide: WINDOW_REF, useValue: window },
+        {
+          provide: DynamicComponentInjectorToken,
+          useExisting: ComponentInjectorComponent,
+        },
+        { provide: WindowRefToken, useValue: window },
         WindowRefService,
         IoFactoryService,
       ],

diff --git a/...t/src/lib/dynamic-directives.directive.ts → ...irectives/dynamic-directives.directive.ts b/...t/src/lib/dynamic-directives.directive.ts → ...irectives/dynamic-directives.directive.ts
@@ -19,12 +19,14 @@ import {
   ViewRef,
 } from '@angular/core';
 
-import { COMPONENT_INJECTOR, ComponentInjector } from './component-injector';
-import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
-import { IoFactoryService } from './io-factory.service';
-import { InputsType, IoService, OutputsType } from './io.service';
-import { getCtorType } from './util';
-import { WindowRefService } from './window-ref.service';
+import {
+  ComponentOutletInjectorDirective,
+  DynamicComponentInjector,
+  DynamicComponentInjectorToken,
+} from '../component-injector';
+import { InputsType, IoFactoryService, IoService, OutputsType } from '../io';
+import { getCtorType } from '../util';
+import { WindowRefService } from '../window-ref';
 
 export interface DynamicDirectiveDef<T> {
   type: Type<T>;
@@ -64,11 +66,6 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
   @Output()
   ndcDynamicDirectivesCreated = new EventEmitter<DirectiveRef<any>[]>();
 
-  private componentInjector = this.injector.get(
-    this.componentInjectorType,
-    null,
-  );
-
   private lastCompInstance: any;
 
   private get directives() {
@@ -118,15 +115,15 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
     .create<DynamicDirectiveDef<any>>((_, def) => def.type);
 
   constructor(
-    private injector: Injector,
     private iterableDiffers: IterableDiffers,
     private ioFactoryService: IoFactoryService,
     private windowRef: WindowRefService,
-    @Inject(COMPONENT_INJECTOR)
-    private componentInjectorType: Type<ComponentInjector>,
+    @Inject(DynamicComponentInjectorToken)
+    @Optional()
+    private componentInjector?: DynamicComponentInjector,
     @Host()
     @Optional()
-    private componentOutletInjector: ComponentOutletInjectorDirective,
+    private componentOutletInjector?: ComponentOutletInjectorDirective,
   ) {}
 
   ngDoCheck(): void {

diff --git a/projects/ng-dynamic-component/src/lib/dynamic-directives/dynamic-directives.module.ts b/projects/ng-dynamic-component/src/lib/dynamic-directives/dynamic-directives.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DynamicDirectivesDirective } from './dynamic-directives.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [DynamicDirectivesDirective],
+  declarations: [DynamicDirectivesDirective],
+})
+export class DynamicDirectivesModule {}
diff --git a/projects/ng-dynamic-component/src/lib/dynamic-directives/index.ts b/projects/ng-dynamic-component/src/lib/dynamic-directives/index.ts
@@ -0,0 +1,2 @@
+export * from './dynamic-directives.directive';
+export * from './dynamic-directives.module';