refactor(composer): extract decortator configurations components into DI

So they can be extended via DI from third-party modules

re orchestratora/rfcs#2

Author: gund

libs/composer/src/lib/composer-configurator/composer-configurator.component.html

@@ -1,48 +1,21 @@
-<form nz-form [formGroup]="formGroup">
+<form nz-form [formGroup]="formGroup" #form="ngForm">
   <nz-form-item *ngFor="let item of (formConfig | keyvalue)">
-    <nz-form-label [nzRequired]="item.value.extras.required">
+    <nz-form-label [nzRequired]="item.value.required">
       {{ item.key | uppercase }}
     </nz-form-label>
-    <nz-form-control [ngSwitch]="item.value.tag">
-      <input
-        *ngSwitchCase="'input'"
-        nz-input
-        [formControlName]="item.key"
-        [type]="item.value.type"
-        [min]="item.value.extras.min"
-        [max]="item.value.extras.max"
-        [step]="item.value.extras.step"
-      />
-      <nz-input-number
-        *ngSwitchCase="'input-number'"
-        [formControlName]="item.key"
-        [nzMin]="item.value.extras.min"
-        [nzMax]="item.value.extras.max"
-        [nzStep]="item.value.extras.step || 1"
-      ></nz-input-number>
-      <nz-slider
-        *ngSwitchCase="'slider'"
-        [formControlName]="item.key"
-        [nzMin]="item.value.extras.min"
-        [nzMax]="item.value.extras.max"
-        [nzStep]="item.value.extras.step"
-      ></nz-slider>
-      <nz-select
-        *ngSwitchCase="'select'"
-        nzAllowClear
-        [formControlName]="item.key"
-      >
-        <nz-option
-          *ngFor="let opt of item.value.options"
-          [nzValue]="opt"
-          [nzLabel]="opt"
-        ></nz-option>
-      </nz-select>
-      <nz-switch
-        *ngSwitchCase="'switch'"
-        [formControlName]="item.key"
-      ></nz-switch>
-      <p *ngSwitchDefault>HUI! NA RUL'</p>
-    </nz-form-control>
+    <ng-container
+      *ngIf="item.value.component; else noCompTpl"
+      [ngComponentOutlet]="item.value.component"
+      [ndcDynamicInputs]="{
+        name: item.key,
+        parent: form,
+        extras: item.value.extras
+      }"
+    ></ng-container>
+    <ng-template #noCompTpl>
+      <nz-form-control>
+        <textarea rows="4" nz-input [formControlName]="item.key"></textarea>
+      </nz-form-control>
+    </ng-template>
   </nz-form-item>
 </form>

libs/composer/src/lib/composer-configurator/composer-configurator.component.ts

@@ -14,10 +14,8 @@ import {
 import { Observable, Subject } from 'rxjs';
 import { switchAll } from 'rxjs/operators';
 
-import {
-  ComposerConfiguratorService,
-  ControlConfigObject,
-} from './composer-configurator.service';
+import { ControlConfigObject } from '../decorator-config';
+import { ComposerConfiguratorService } from './composer-configurator.service';
 
 /**
  * @internal

libs/composer/src/lib/composer-configurator/composer-configurator.module.ts

@@ -1,12 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { DynamicModule } from 'ng-dynamic-component';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
-import { NzSelectModule } from 'ng-zorro-antd/select';
-import { NzSliderModule } from 'ng-zorro-antd/slider';
-import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 import { ComposerConfiguratorComponent } from './composer-configurator.component';
 
@@ -19,10 +16,7 @@ import { ComposerConfiguratorComponent } from './composer-configurator.component
     ReactiveFormsModule,
     NzFormModule,
     NzInputModule,
-    NzInputNumberModule,
-    NzSelectModule,
-    NzSliderModule,
-    NzSwitchModule,
+    DynamicModule,
   ],
   exports: [ComposerConfiguratorComponent],
   declarations: [ComposerConfiguratorComponent],

libs/composer/src/lib/composer-configurator/composer-configurator.service.ts

@@ -1,41 +1,46 @@
-import { Injectable } from '@angular/core';
-import {
-  FormBuilder,
-  FormGroup,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
+import { Injectable, Injector } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import {
   ComponentLocatorService,
   ConfigurationMeta,
   ConfigurationService,
-  OptionAllowedValues,
-  OptionInteger,
-  OptionRange,
-  OptionRequired,
   OrchestratorDynamicComponentType,
 } from '@orchestrator/core';
 
+import {
+  ControlConfig,
+  ControlConfigObject,
+  DECORATOR_CONFIGS_INITIALIZER_TOKEN,
+  DECORATOR_CONFIGS_TOKEN,
+  DecoratorConfigFn,
+  PropDecoratorFactory,
+} from '../decorator-config';
+
 export interface ConfigurationMetaObject {
   [key: string]: ConfigurationMeta[];
 }
 
-export interface ControlConfig {
-  validators: ValidatorFn[];
-  tag: string;
-  type?: string;
-  options?: any[];
-  extras: any;
-  default?: any;
-}
-
-export interface ControlConfigObject {
-  [key: string]: ControlConfig;
-}
-
 @Injectable()
 export class ComposerConfiguratorService {
+  private decoratorConfigsInit = this.injector.get(
+    DECORATOR_CONFIGS_INITIALIZER_TOKEN,
+    [],
+  );
+  private decoratorConfigs = this.injector.get(DECORATOR_CONFIGS_TOKEN, []);
+
+  private decoratorConfigGroups = this.decoratorConfigs.reduce(
+    (acc, config) => {
+      acc.set(config.type, [
+        ...(acc.get(config.type) || []),
+        config.fn as DecoratorConfigFn<any>,
+      ]);
+      return acc;
+    },
+    new Map<PropDecoratorFactory, DecoratorConfigFn<any>[]>(),
+  );
+
   constructor(
+    private injector: Injector,
     private fb: FormBuilder,
     private configService: ConfigurationService,
     private componentLocatorService: ComponentLocatorService,
@@ -96,65 +101,40 @@ export class ComposerConfiguratorService {
     defaultValue?: any,
   ): ControlConfig {
     return configMeta.reduce(
-      (acc, meta) => {
-        if (!acc.tag) {
-          acc.tag = 'input';
-
-          switch (meta.type) {
-            case Number:
-              acc.tag = 'input-number';
-              break;
-            case Boolean:
-              acc.tag = 'switch';
-              break;
-            default:
-              acc.type = 'text';
-          }
-        }
-
-        switch (meta.decorator) {
-          case OptionRequired:
-            acc.validators.push(Validators.required);
-            acc.extras.required = true;
-            break;
-          case OptionInteger:
-            acc.validators.push(Validators.pattern(/^-?\d+$/));
-            acc.tag = 'input-number';
-            break;
-          case OptionRange:
-            const [min, max, step] = meta.args as Parameters<
-              typeof OptionRange
-            >;
-            acc.tag =
-              !Number.isFinite(max) || !Number.isFinite(min)
-                ? 'input-number'
-                : 'slider';
-            acc.extras.min = min;
-            acc.extras.max = max;
-            acc.extras.step = step;
-            acc.validators.push(Validators.min(min));
-            acc.validators.push(Validators.max(max));
-            break;
-          case OptionAllowedValues:
-            const [options] = meta.args as Parameters<
-              typeof OptionAllowedValues
-            >;
-
-            acc.tag = options.some(opt => typeof opt === 'function')
-              ? 'input'
-              : 'select';
-            acc.type = 'text';
-            acc.options = options;
-            break;
-        }
-        return acc;
+      (config, meta) => this.applyConfig(config, meta),
+      this.getInitialConfig(configMeta, defaultValue),
+    );
+  }
+
+  private getInitialConfig(
+    configMeta: ConfigurationMeta[],
+    defaultValue?: any,
+  ): ControlConfig {
+    return configMeta.reduce(
+      (config, meta) => {
+        this.decoratorConfigsInit.forEach(fn =>
+          fn(config, meta.args, meta.type, meta.decorator),
+        );
+        return config;
       },
       {
         validators: [],
-        tag: '',
+        component: null,
         extras: {},
         default: defaultValue,
       } as ControlConfig,
     );
   }
+
+  private applyConfig(config: ControlConfig, meta: ConfigurationMeta) {
+    const decoratorConfigFns = this.decoratorConfigGroups.get(meta.decorator);
+
+    if (!decoratorConfigFns) {
+      return config;
+    }
+
+    decoratorConfigFns.forEach(fn => fn(config, meta.args, meta.type));
+
+    return config;
+  }
 }

libs/composer/src/lib/composer.module.ts

@@ -20,6 +20,7 @@ import { ComposerDroppableModule } from './composer-droppable';
 import { ComposerErrorsModule } from './composer-errors';
 import { ComposerPreviewModule } from './composer-preview';
 import { ComposerComponent } from './composer.component';
+import { DecoratorConfigModule } from './decorator-config';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { ComposerComponent } from './composer.component';
     ComposerControlsModule,
     ComposerConfiguratorModule,
     ComposerDroppableModule,
+    DecoratorConfigModule,
   ],
   exports: [
     ComposerCanvasModule,
@@ -55,6 +57,7 @@ export class ComposerModule {
       providers: [
         ComposerConfiguratorService,
         { provide: ErrorStrategy, useClass: SuppressErrorStrategy },
+        DecoratorConfigModule.forRoot().providers,
       ],
     };
   }

libs/composer/src/lib/decorator-config/allowed-values/allowed-values.component.css

@@ -0,0 +1,13 @@
+<nz-form-control>
+  <nz-select
+    nzAllowClear
+    [formControlNameEx]="name"
+    [formControlNameExParent]="parent"
+  >
+    <nz-option
+      *ngFor="let opt of extras?.options"
+      [nzValue]="opt"
+      [nzLabel]="opt"
+    ></nz-option>
+  </nz-select>
+</nz-form-control>

libs/composer/src/lib/decorator-config/allowed-values/allowed-values.component.html

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AllowedValuesComponent } from './allowed-values.component';
+
+describe('AllowedValuesComponent', () => {
+  let component: AllowedValuesComponent;
+  let fixture: ComponentFixture<AllowedValuesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AllowedValuesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AllowedValuesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/composer/src/lib/decorator-config/allowed-values/allowed-values.component.spec.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+
+import { ControlConfigComponent } from '../types';
+
+export interface AllowedValuesExtras {
+  options: string[];
+}
+
+@Component({
+  selector: 'orc-allowed-values',
+  templateUrl: './allowed-values.component.html',
+  styleUrls: ['./allowed-values.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AllowedValuesComponent
+  implements ControlConfigComponent<AllowedValuesExtras> {
+  @Input() name: string;
+  @Input() parent: ControlContainer;
+  @Input() extras: AllowedValuesExtras;
+}

libs/composer/src/lib/decorator-config/allowed-values/allowed-values.component.ts

@@ -0,0 +1,24 @@
+import { OptionAllowedValues } from '@orchestrator/core';
+
+import { createDecoratorConfigFactory, provideDecoratorConfig } from '../token';
+import { AllowedValuesComponent } from './allowed-values.component';
+
+const allowedValuesFactoryFn = createDecoratorConfigFactory<
+  AllowedValuesComponent
+>(OptionAllowedValues, (config, [options]) => {
+  const areOptionsDeterministic = options.every(
+    opt => typeof opt !== 'function',
+  );
+  if (areOptionsDeterministic) {
+    config.component = AllowedValuesComponent;
+    config.extras.options = options;
+  }
+});
+
+export function allowedValuesFactory() {
+  return allowedValuesFactoryFn();
+}
+
+export const allowedValuesProvider = provideDecoratorConfig(
+  allowedValuesFactory,
+);