Initial commit

Author: gund

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,5 @@
+.vscode/*
+!.vscode/settings.json
+node_modules/*
+dist/*
+compiled/*

.npmignore

@@ -0,0 +1,7 @@
+node_modules
+.vscode
+src
+compiled
+tslint.json
+tsconfig*.json
+rollup.config.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Alex Malkevich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.MD

@@ -0,0 +1,13 @@
+# ng-dynamic-component
+
+> Dynamic components with full life-cycle support for inputs and outputs
+
+## Installation
+
+```bash
+$ npm install ng-dynamic-component --save
+```
+
+## License
+
+MIT © [Alex Malkevich]([email protected])

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "ng-dynamic-component",
+  "version": "0.0.1",
+  "description": "Dynamic components with full life-cycle support for inputs and outputs",
+  "main": "dist/bundles/ng-dynamic-component.umd.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "prebuild": "rimraf dist compiled",
+    "build": "npm-run-all -s build:*",
+    "build:main": "ngc",
+    "build:umd": "rollup -c rollup.config.js",
+    "postbuild:umd": "uglifyjs -c --screw-ie8 --comments -o dist/bundles/ng-dynamic-component.umd.min.js dist/bundles/ng-dynamic-component.umd.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "angular",
+    "angular2",
+    "ng",
+    "dynamic",
+    "component",
+    "input",
+    "output",
+    "life-cycle"
+  ],
+  "author": "Alex Malkevich <[email protected]>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^2.4.7"
+  },
+  "devDependencies": {
+    "@angular/common": "^2.4.7",
+    "@angular/compiler": "^2.4.7",
+    "@angular/compiler-cli": "^2.4.7",
+    "@angular/core": "^2.4.7",
+    "@angular/platform-browser": "^2.4.7",
+    "@angular/platform-browser-dynamic": "^2.4.7",
+    "@angular/platform-server": "^2.4.7",
+    "@types/jasmine": "^2.5.43",
+    "angular2-template-loader": "^0.6.2",
+    "awesome-typescript-loader": "^3.0.4",
+    "codelyzer": "^2.0.0",
+    "commitizen": "^2.9.5",
+    "cz-conventional-changelog": "^1.2.0",
+    "npm-run-all": "^4.0.0",
+    "rimraf": "^2.5.4",
+    "rollup": "^0.41.4",
+    "rollup-globals-regex": "^0.0.1",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rxjs": "^5.1.0",
+    "tslib": "^1.5.0",
+    "tslint": "^4.4.2",
+    "typescript": "^2.2.0",
+    "uglifyjs": "^2.4.10",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "zone.js": "^0.7.7"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

rollup.config.js

@@ -0,0 +1,24 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+import { globalsRegex, GLOBAL } from 'rollup-globals-regex';
+
+export default {
+  entry: 'dist/index.js',
+  dest: 'dist/bundles/ng-dynamic-component.umd.js',
+  format: 'umd',
+  moduleName: 'dynamicComponent',
+  plugins: [
+    nodeResolve({ jsnext: true, browser: true })
+  ],
+  globals: globalsRegex({
+    'tslib': 'tslib',
+    [GLOBAL.NG2]: GLOBAL.NG2.TPL,
+    [GLOBAL.RX]: GLOBAL.RX.TPL,
+  }),
+  external: (moduleId) => {
+    if (/^(\@angular|rxjs)\//.test(moduleId)) {
+      return true;
+    }
+
+    return false;
+  }
+};

src/dynamic/component-injector.ts

@@ -0,0 +1,7 @@
+import { ComponentRef, OpaqueToken } from '@angular/core';
+
+export interface ComponentInjector {
+  componentRef: ComponentRef<any>;
+}
+
+export const COMPONENT_INJECTOR = new OpaqueToken('ComponentInjector');

src/dynamic/custom-simple-change.ts

@@ -0,0 +1,9 @@
+import { SimpleChange } from '@angular/core';
+
+export const UNINITIALIZED = Object.freeze({ __uninitialized: true });
+
+export class CustomSimpleChange extends SimpleChange {
+  isFirstChange() {
+    return this.previousValue === UNINITIALIZED || super.isFirstChange();
+  }
+}

src/dynamic/dynamic.component.spec.ts

@@ -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 { DynamicComponent } from './dynamic.component';
+
+describe('DynamicComponent', () => {
+  let component: DynamicComponent;
+  let fixture: ComponentFixture<DynamicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/dynamic/dynamic.component.ts

@@ -0,0 +1,59 @@
+import { ComponentInjector } from './component-injector';
+import {
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Injector,
+  Input,
+  OnChanges,
+  Provider,
+  ReflectiveInjector,
+  SimpleChanges,
+  Type,
+  ViewContainerRef
+} from '@angular/core';
+
+@Component({
+  selector: 'app-dynamic',
+  template: ''
+})
+export class DynamicComponent implements OnChanges, ComponentInjector {
+
+  @Input() appDynamicComponent: Type<any>;
+  @Input() appDynamicInjector: Injector;
+  @Input() appDynamicProviders: Provider[];
+  @Input() appDynamicContent: any[][];
+
+  componentRef: ComponentRef<any>;
+
+  constructor(
+    private _vcr: ViewContainerRef,
+    private _cfr: ComponentFactoryResolver
+  ) { }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['appDynamicComponent']) {
+      this.createDynamicComponent();
+    }
+  }
+
+  createDynamicComponent() {
+    this._vcr.clear();
+
+    this.componentRef = this._vcr.createComponent(
+      this._cfr.resolveComponentFactory(this.appDynamicComponent),
+      0, this._resolveInjector(), this.appDynamicContent
+    );
+  }
+
+  private _resolveInjector(): Injector {
+    let injector = this.appDynamicInjector || this._vcr.parentInjector;
+
+    if (this.appDynamicProviders) {
+      injector = ReflectiveInjector.resolveAndCreate(this.appDynamicProviders, injector);
+    }
+
+    return injector;
+  }
+
+}

src/dynamic/dynamic.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { DynamicDirective } from './dynamic.directive';
+
+describe('Directive: Dynamic', () => {
+  it('should create an instance', () => {
+    const directive = new DynamicDirective(<any>{}, <any>{}, <any>{});
+    expect(directive).toBeTruthy();
+  });
+});