fix(core): fixes Ivy

BREAKING CHANGE:
Components with getter and setter without both are not supported

ISSUES CLOSED: #28, #29

package.json

@@ -50,7 +50,7 @@
         "@angular/language-service": "9.0.1",
         "@types/jasmine": "~2.8.9",
         "@types/jasminewd2": "~2.0.5",
-        "@types/node": "10.12.0",
+        "@types/node": "12.12.27",
         "codelyzer": "4.5.0",
         "commitizen": "^3.0.7",
         "cz-customizable": "^5.2.0",

projects/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ngxd/core",
-    "version": "9.0.0",
+    "version": "9.0.1",
     "description": "NGXD is a dynamic pattern + library for Angular",
     "keywords": [
         "angular",

projects/core/src/lib/adapter/adapter-ref.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectorRef,
   ComponentFactory,
   ComponentRef,
+  isDevMode,
   SimpleChange,
   Type,
 } from '@angular/core';
@@ -16,6 +17,7 @@ import {
   toPropertyDef,
 } from '../utils';
 import { HostAdapter } from './host.adapter';
+import { isLifeCycleComponent } from './lifecycle.components';
 import { LifecycleComponent } from './lifecycle.strategies';
 
 export interface NgxComponentOutletAdapterRefConfig<TComponent> {
@@ -199,7 +201,27 @@ export class NgxComponentOutletAdapterRef<TComponent> {
           defaultDescriptor.set.call(context, value);
         }
 
-        instance[insidePropName] = value;
+        try {
+          instance[insidePropName] = value;
+        } catch (e) {
+          // Todo: add more debug
+          if (isDevMode()) {
+            const constructorName = (instance as any).constructor.name;
+            console.log(`You should use get and set descriptors both with dynamic components:
+ERROR: not found '${insidePropName}' input, it has getter only, please add setter!
+
+  class ${constructorName} {
+
+    get ${insidePropName}() { ... }
+
+    // Please add that 👇
+    set ${insidePropName}() { ... }
+
+  }`);
+            console.error(e);
+          }
+        }
+        this.changeDetectorRef.markForCheck();
       },
     });
   }
@@ -208,17 +230,23 @@ export class NgxComponentOutletAdapterRef<TComponent> {
     const instance: TComponent & LifecycleComponent = this.componentRef.instance as any;
 
     if (hasProperty(this.componentRef.componentType.prototype, 'ngOnChanges')) {
-      const markForCheckWrapped = markForCheckWrapper(
-        instance.ngDoCheck,
-        this.changeDetectorRef
-      ).bind(instance);
+      if (isLifeCycleComponent(this.onInitComponentRef.instance)) {
+        this.onInitComponentRef.instance.attach(instance, this.changeDetectorRef);
+      } else {
+        // this.onInitComponentRef.instance.ngOnInit = onChangesWrapper(instance.ngOnInit).bind(
+        //   instance
+        // );
+        console.warn('todo: add for OnInit on dynamic component');
+      }
 
-      this.onInitComponentRef.instance.ngOnInit = onChangesWrapper(instance.ngOnInit).bind(
-        instance
-      );
-      this.doCheckComponentRef.instance.ngDoCheck = onChangesWrapper(markForCheckWrapped).bind(
-        instance
-      );
+      if (isLifeCycleComponent(this.doCheckComponentRef.instance)) {
+        this.doCheckComponentRef.instance.attach(instance, this.changeDetectorRef);
+      } else {
+        // this.doCheckComponentRef.instance.ngDoCheck = onChangesWrapper(markForCheckWrapped).bind(
+        //   instance
+        // );
+        console.warn('todo: add for DoCheck on dynamic component');
+      }
     } else {
       this.doCheckComponentRef.instance.ngDoCheck = markForCheckWrapper(
         instance.ngDoCheck,

projects/core/src/lib/adapter/adapter.builder.ts

@@ -27,9 +27,13 @@ export class NgxComponentOutletAdapterBuilder {
       TComponent
     > = componentFactoryResolver.resolveComponentFactory(componentType);
 
-    const componentRef: ComponentRef<TComponent> = viewContainerRef.createComponent(
-      componentFactory,
-      viewContainerRef.length,
+    // const componentRef: ComponentRef<TComponent> = viewContainerRef.createComponent(
+    //   componentFactory,
+    //   viewContainerRef.length,
+    //   injector,
+    //   projectableNodes
+    // );
+    const componentRef: ComponentRef<TComponent> = componentFactory.create(
       injector,
       projectableNodes
     );
@@ -40,12 +44,16 @@ export class NgxComponentOutletAdapterBuilder {
       componentFactoryResolver
     );
 
-    return new NgxComponentOutletAdapterRef({
+    const adapterRef = new NgxComponentOutletAdapterRef({
       componentFactory,
       componentRef,
       host,
       onInitComponentRef,
       doCheckComponentRef,
     });
+
+    viewContainerRef.insert(componentRef.hostView, viewContainerRef.length);
+
+    return adapterRef;
   }
 }

projects/core/src/lib/adapter/host-input.adapter.ts

@@ -1,3 +1,4 @@
+import { isDevMode } from '@angular/core';
 import { Subject } from 'rxjs';
 import { getPropertyDescriptor, PRIVATE_CONTEXT_PREFIX } from '../utils';
 
@@ -19,6 +20,23 @@ export class HostInputAdapter<TComponent> {
 
     this.changes = new Subject<any>();
     this.defaultDescriptor = getPropertyDescriptor(host, name);
+
+    if (this.defaultDescriptor && this.defaultDescriptor.get && !this.defaultDescriptor.set) {
+      if (isDevMode()) {
+        const constructorName = (host as any).constructor.name;
+        console.log(`You should use get and set descriptors both with dynamic components:
+ERROR: not found '${name}' input, it has setter only, please add getter!
+
+  class ${constructorName} {
+
+    // Please add that 👇
+    get ${name}() { ... }
+
+    set ${name}() { ... }
+
+  }`);
+      }
+    }
     this.refCount = 0;
 
     const defaultValue = host[name];

projects/core/src/lib/adapter/lifecycle.components.ts

@@ -1,30 +1,103 @@
-import { ChangeDetectionStrategy, Component, DoCheck, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DoCheck,
+  OnInit,
+} from '@angular/core';
+import { onChangesWrapper } from '../utils';
+
+const lifeCycleComponentSymbol = Symbol('Life Cycle Component');
+
+export interface LifeCycleComponent {
+  [lifeCycleComponentSymbol]: boolean;
+
+  attach(context: unknown, changeDetectorRef: ChangeDetectorRef): void;
+}
+
+export function isLifeCycleComponent(component: unknown): component is LifeCycleComponent {
+  return component && component[lifeCycleComponentSymbol];
+}
 
 @Component({
   selector: 'ngx-component-outlet-on-init-only',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OnInitOnlyComponent implements OnInit {
-  ngOnInit() {}
+export class OnInitOnlyComponent implements LifeCycleComponent, OnInit {
+  [lifeCycleComponentSymbol] = true;
+
+  private context: unknown;
+  private changeDetectorRef: ChangeDetectorRef;
+
+  ngOnInit() {
+    if (this.context) {
+      onChangesWrapper(() => {}).call(this.context);
+    }
+  }
+
+  attach(context: unknown, changeDetectorRef: ChangeDetectorRef): void {
+    this.context = context;
+    this.changeDetectorRef = changeDetectorRef;
+  }
 }
 
 @Component({
   selector: 'ngx-component-outlet-do-check-only',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DoCheckOnlyComponent implements DoCheck {
-  ngDoCheck() {}
+export class DoCheckOnlyComponent implements LifeCycleComponent, DoCheck {
+  [lifeCycleComponentSymbol] = true;
+
+  private context: unknown;
+  private changeDetectorRef: ChangeDetectorRef;
+
+  ngDoCheck() {
+    if (this.context) {
+      onChangesWrapper(() => {}).call(this.context);
+    }
+
+    if (this.changeDetectorRef) {
+      this.changeDetectorRef.markForCheck();
+    }
+  }
+
+  attach(context: unknown, changeDetectorRef: ChangeDetectorRef): void {
+    this.context = context;
+    this.changeDetectorRef = changeDetectorRef;
+  }
 }
 
 @Component({
   selector: 'ngx-component-outlet-on-init-do-check',
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OnInitAndDoCheckComponent implements OnInit, DoCheck {
-  ngOnInit() {}
+export class OnInitAndDoCheckComponent implements LifeCycleComponent, OnInit, DoCheck {
+  [lifeCycleComponentSymbol] = true;
+
+  private context: unknown;
+  private changeDetectorRef: ChangeDetectorRef;
+
+  ngOnInit() {
+    if (this.context) {
+      onChangesWrapper(() => {}).call(this.context);
+    }
+  }
+
+  ngDoCheck() {
+    if (this.context) {
+      onChangesWrapper(() => {}).call(this.context);
+    }
+
+    if (this.changeDetectorRef) {
+      this.changeDetectorRef.markForCheck();
+    }
+  }
 
-  ngDoCheck() {}
+  attach(context: unknown, changeDetectorRef: ChangeDetectorRef): void {
+    this.context = context;
+    this.changeDetectorRef = changeDetectorRef;
+  }
 }

projects/core/src/lib/adapter/lifecycle.strategies.ts

@@ -58,7 +58,9 @@ const FEATURE_COMPONENTS_DISABLE = {
 
 export function resolveStrategy(component: Type<any>) {
   const type = resolveStrategyType(component);
-  return STRATEGY_CONFIG[type];
+
+  const USE_ONLY_DEFAULT_STRATEGY_FOR_IVY = LifecycleStrategyType.OnInitAndDoCheck;
+  return STRATEGY_CONFIG[USE_ONLY_DEFAULT_STRATEGY_FOR_IVY];
 }
 
 function resolveStrategyType<T = any>(component: Type<T>): LifecycleStrategyType {

projects/core/src/lib/lib.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { NgxComponentOutletAdapterBuilder } from './adapter/adapter.builder';
 
 import {
@@ -21,18 +21,4 @@ import { NgxComponentOutletResolvePipe } from './helpers/resolve.pipe';
   exports: [NgxComponentOutletDirective, NgxComponentOutletResolvePipe],
   providers: [NgxComponentOutletAdapterBuilder],
 })
-export class NgxdModule {
-  /**
-   * @deprecated
-   */
-  static forRoot(): ModuleWithProviders {
-    throw new Error('Deprecation import through NgxdModule.forRoot(), use import as NgxdModule.');
-  }
-
-  /**
-   * @deprecated
-   */
-  static forChild(): ModuleWithProviders {
-    throw new Error('Deprecation import through NgxdModule.forChild(), use import as NgxdModule.');
-  }
-}
+export class NgxdModule {}

projects/core/src/public_api.ts

@@ -2,3 +2,5 @@ export * from './lib/lib.module';
 export * from './lib/helpers/resolver';
 export * from './lib/helpers/provider';
 export * from './lib/adapter/adapter.experimental';
+export * from './lib/directive/component.outlet';
+export * from './lib/helpers/resolve.pipe';