P3X GitList

f46e4d96

import {

5c3da6ad

Compiler,

c605ea6f

Component,

f46e4d96

Injectable,

5c3da6ad

Input,

f46e4d96

ModuleWithProviders,

69db3407

NgModule,

c605ea6f

NgModuleFactory,

5c3da6ad

OnChanges, SimpleChanges, Type,

f46e4d96

} from '@angular/core';

63831028

import {CommonModule} from '@angular/common';

d9151425

//import { BrowserModule } from '@angular/platform-browser';

e61654aa

//let SingletonDefaultModule: NgModule;

78aab78a

//import cloneDeep from 'lodash/cloneDeep';

5c3da6ad

d9151425

//import { CorifeusMaterialModule } from 'corifeus-web-material';

83396ced

69019d84

function reverse(str: string) {

3793eedd

return str.split('').reverse().join('') }

69019d84

function random() {

3793eedd

return (Math.floor(Math.random() * (99999999999999999 - 10000000000000000)) + 10000000000000000).toString(16) }

63831028

let currentIdTime: number;

3793eedd

let currentId = 0;

5c3da6ad

function nextId(): string {

3793eedd

const now = Date.now(); if (currentIdTime !== now) { currentId = 0; currentIdTime = now } const comingId = ++currentId; const randomHex = reverse(random()).padStart(15, '0'); const timeHex = reverse(currentIdTime.toString(16).padStart(12, '0')) const comingIdHex = reverse(comingId.toString(16).padStart(3, '0'))

5c3da6ad

const newId: string = `p3x-angular-compile-${timeHex}${comingIdHex}${randomHex}`;

3793eedd

//console.log(newId) return newId }

c605ea6f

//const cache : any = {}; @Component({ selector: '[p3x-compile]', template: `

392455c9

<ng-container *ngIf="renderComponent">

c1ce854b

<ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;"></ng-container> </ng-container>

7d7aeb47

`

c605ea6f

})

f46e4d96

@Injectable()

40fae166

export class CompileAttribute implements OnChanges { //export class CompileAttribute implements OnChanges ,OnInit {

f46e4d96

@Input('p3x-compile') html: string; @Input('p3x-compile-ctx')

63831028

context: any;

f46e4d96

e0fc8584

@Input('p3x-compile-error-handler')

2dd8c32e

errorHandler: Function = undefined;

0bce968e

c605ea6f

dynamicComponent: any; dynamicModule: NgModuleFactory<any> | any;

69db3407

@Input('p3x-compile-module')

63831028

module: NgModule;

69db3407

f46e4d96

@Input('p3x-compile-imports')

c02c3229

imports: Array<Type<any> | ModuleWithProviders<any> | any[]>;

f46e4d96

be50e4d1

constructor( // private container: ViewContainerRef, // private service: CompileService private compiler: Compiler, // @Inject('config') private config:CompileServiceConfig ) { } /* // not requires, since ngOnChanges does it first time change ngOnInit() { //console.log('ng init') // this.update(); } */

392455c9

get renderComponent() { return typeof this.html === 'string' && this.html.trim() !== '' }

be50e4d1

ngOnChanges(changes: SimpleChanges) { //console.log('ng one changes') this.update(); }

2dd8c32e

update() {

c605ea6f

try {

40fae166

if (this.html === undefined || this.html === null || this.html.trim() === '') {

63831028

// this.container.clear();

40fae166

this.dynamicComponent = undefined; this.dynamicModule = undefined; return; } /* // looks like Angular already is caching //console.log('html', this.html) const cacheKey = this.html; //console.log(Object.keys(cache).indexOf(cacheKey), cache) if (cache.hasOwnProperty(cacheKey)) { const currentCache = cache[cacheKey]; this.dynamicComponent = currentCache.dynamicComponent this.dynamicModule = currentCache.dynamicModule return ; } */

c605ea6f

this.dynamicComponent = this.createNewComponent(this.html, this.context); this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));

3793eedd

/* cache[cacheKey] = { dynamicComponent: this.dynamicComponent, dynamicModule: this.dynamicModule, }; */

c605ea6f

} catch (e) {

2dd8c32e

if (this.errorHandler === undefined) { throw e; } else { this.errorHandler(e); }

c605ea6f

} /*

40fae166

// now we use it with ngComponentOutlet, since about angular 5

f46e4d96

await this.service.compile({ template: this.html, container: this.container, context: this.context,

69db3407

imports: this.imports, module: this.module

f46e4d96

})

c605ea6f

*/ }

63831028

private createComponentModule(componentType: any) { let module: NgModule = {};

c605ea6f

if (this.module !== undefined) {

78aab78a

module = Object.assign({}, this.module);

e61654aa

} /* else if (SingletonDefaultModule !== undefined && SingletonDefaultModule !== null) {

c605ea6f

module = cloneDeep(SingletonDefaultModule); }

e61654aa

*/

c605ea6f

module.imports = module.imports || [];

63831028

module.imports.push(CommonModule);

c605ea6f

if (this.imports !== undefined) { module.imports = module.imports.concat(this.imports) } if (module.declarations === undefined) { module.declarations = [ componentType ]; } else { module.declarations.push(componentType); }

63831028

c605ea6f

@NgModule(module) class RuntimeComponentModule { }

63831028

c605ea6f

return RuntimeComponentModule; }

63831028

private createNewComponent(html: string, context: any) {

c605ea6f

5c3da6ad

const selector: string = nextId()

76fa2e88

c605ea6f

@Component({

76fa2e88

selector: selector,

c605ea6f

template: html }) class DynamicComponent { context: any = context; } return DynamicComponent;

f46e4d96

}

c1ce854b

}