.gitignore000066400000000000000000000000461516104135200130440ustar00rootroot00000000000000/node_modules /build /dist /yarn.lock .npmignore000066400000000000000000000003671516104135200130610ustar00rootroot00000000000000# not me adding /.idea /artifacts /build /Gemfile /_layouts /_site /_includes /test /node_modules /*.iml /*.ipr /*.iws /.travis.yml /.scrutinizer.yml /Gruntfile.js # Corifeus / P3X /src /tsconfig* # need to allow ts for awesome=typscript-loader .scrutinizer.yml000066400000000000000000000006311516104135200142360ustar00rootroot00000000000000checks: javascript: true filter: excluded_paths: - node_modules/* build: environment: node: 7.8 dependencies: before: - npm install grunt-cli -g - npm install - node_modules/protractor/bin/webdriver-manager update tests: override: - command: 'grunt coverage' coverage: file: 'build/coverage/clover.xml' format: 'clover' .travis.yml000066400000000000000000000006051516104135200131660ustar00rootroot00000000000000sudo: required dist: trusty addons: apt: sources: - google-chrome packages: - google-chrome-stable language: node_js node_js: - "7" - "node" before_script: - "export DISPLAY=:99.0" - "sh -e /etc/init.d/xvfb start" - sleep 3 # give xvfb some time to start - npm install grunt-cli -g - npm install - node_modules/protractor/bin/webdriver-manager update Gruntfile.js000066400000000000000000000023071516104135200133530ustar00rootroot00000000000000module.exports = (grunt) => { //node node_modules/protractor/bin/webdriver-manager update const builder = require('corifeus-builder-angular'); /* webdriver-manager/selenium/update-config.json node_modules/protractor/bin/webdriver-manager update */ const loader = new builder.loader(grunt); loader.angular({ root: builder.config.folder.test.angularWebpack.root, replacer: { type: 'p3x', npmio: true, }, config: { clean: { 'cory-publish': [ 'dist' ] } } }); grunt.registerTask('run', builder.config.task.run.angular); grunt.registerTask('default', builder.config.task.build.angularAotJit); grunt.registerTask('aot', builder.config.task.build.angularAot); grunt.registerTask('aot-jit', builder.config.task.build.angularAotJit); grunt.registerTask('aot-test', ['webpack:cory-build-aot', 'cory-test-connect']); grunt.registerTask('coverage', 'karma:cory-angular'); grunt.registerTask('publish', ['cory-replace', 'clean', 'cory-npm', 'cory-publish-angular']); //cori-test:angular-protractor // cori-test:angular-karma }LICENSE000066400000000000000000000021351516104135200120620ustar00rootroot00000000000000MIT License Copyright (c) 2017 Patrik Laszlo Corifeus http://patrikx3.tk 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.md000066400000000000000000000051541516104135200123400ustar00rootroot00000000000000[//]: #@corifeus-header --- # Angular Dynamic Compile service and directive ### Node Version Requirement ``` >=7.8.0 ``` The ```async``` and ```await``` keywords are required. Install NodeJs: https://nodejs.org/en/download/package-manager/ # Description [//]: #@corifeus-header:end # Use case Dynamic compile components by a string template for Angular. You can provide a context, that you can use with anything (for clicking for free etc..) **The old ```angular-compile-html```.** ## NPM & Version It is a ```CommonJS``` bundle. The version reflects the Angular version (```AngularMajor.AngularMinor.Build-Commit```). ## Install ```bash npm install --save p3x-angular-compile # or yarn add p3x-angular-compile ``` ## AOT + JIT It is not working out of the box (the default is either JIT or AOT, not both), but the apps become 10 folds faster. The ``@ngtools/webpack`` is AOT and the ```awesome-typescript-loader``` is JIT only. The solution can be architect with the ```@angular/compiler``` and the ```awesome-typescript-loader``` together. A miracle! Example here: [More info about AOT + JIT](https://pages.corifeus.tk/github/corifeus-builder-angular/artifacts/readme/skeleton.html) ### Size If you want very small bundle, use ```gzip```. ## Usage ### HTML ```html
``` ### Options The templates are cached. ```typescript export interface CompileOptions { template: string; container: ViewContainerRef; imports?: Array | ModuleWithProviders | any[]>; context?: any, onCompiled?: Function, onError?: Function; } ``` ### Example Check out the example, here [test/angular-webpack/angular/page.ts](https://github.com/patrikx3/angular-compile-html/blob/master/test/angular-webpack/angular/page.ts). ### Deployed example [Corifeus Pages (JIT + AOT at once)](https://pages.corifeus.tk) [https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts](https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts) ## Dev environment end test ```bash npm install -g yarn git clone https://github.com/patrikx3/angular-compile.git cd angular-compile yarn install grunt run|default ``` [http://localhost:8080](http://localhost:8080) [//]: #@corifeus-footer --- [**P3X-ANGULAR-COMPILE**](https://patrikx3.github.com/angular-compile) Build v4.1.247-5 by [Patrik Laszlo](http://patrikx3.tk) [//]: #@corifeus-footer:end _config.yml000066400000000000000000000000321516104135200131760ustar00rootroot00000000000000theme: jekyll-theme-hackerangular-compile.iml000066400000000000000000000007601516104135200146410ustar00rootroot00000000000000 angular-compile.ipr000066400000000000000000000074311516104135200146540ustar00rootroot00000000000000 false false false Android angular-compile.iws000066400000000000000000001044321516104135200146630ustar00rootroot00000000000000 npm.patrikx3 true DEFINITION_ORDER 1494497904719 1494498268191 1494498469928 1494498651304 1494498735978 1494500966722 1494504617334 1494574816351 index.ts000066400000000000000000000000271516104135200125320ustar00rootroot00000000000000export * from "./src"; package.json000066400000000000000000000020441516104135200133420ustar00rootroot00000000000000{ "name": "p3x-angular-compile", "version": "4.1.253-10", "corifeus": { "prefix": "p3x-", "publish": true, "type": "p3x", "code": "Wheel" }, "description": "Angular Dynamic Compile service and directive", "main": "dist/index.js", "typings": "dist/index", "scripts": { "test": "grunt" }, "repository": { "type": "git", "url": "git+https://github.com/patrikx3/angular-compile.git" }, "keywords": [ "p3x", "angular", "ng", "compile", "html", "angular", "dynamic", "aot" ], "author": "Patrik Laszlo ", "license": "MIT", "bugs": { "url": "https://github.com/patrikx3/angular-compile/issues" }, "homepage": "https://pages.corifeus.tk/angular-compile", "devDependencies": { "corifeus-builder-angular": "^4.1.318-22", "corifeus-web": "^4.1.310-23" }, "dependencies": {}, "engines": { "node": ">=7.8.0" } }src/000077500000000000000000000000001516104135200116435ustar00rootroot00000000000000src/CompileAttribute.ts000066400000000000000000000022251516104135200154700ustar00rootroot00000000000000import { Directive, Input, Injectable, ViewContainerRef, OnInit, OnChanges, SimpleChanges, Type, ModuleWithProviders, } from '@angular/core'; import { CompileService } from './CompileService'; @Directive({ selector: '[p3x-compile]' }) @Injectable() export class CompileAttribute implements OnInit, OnChanges{ @Input('p3x-compile') html: string; @Input('p3x-compile-ctx') context: any; @Input('p3x-compile-imports') imports: Array | ModuleWithProviders | any[]>; async update() { if (this.html === undefined || this.html.trim() === '') { this.container.clear(); return; } await this.service.compile({ template: this.html, container: this.container, context: this.context, imports: this.imports }) } ngOnInit() { this.update(); } ngOnChanges(changes: SimpleChanges) { //fixme only update with the required changes this.update(); } constructor( private container: ViewContainerRef, private service: CompileService ) {} }src/CompileModule.ts000066400000000000000000000013041516104135200147470ustar00rootroot00000000000000 import { CompileService } from "./CompileService"; import { CompileAttribute} from "./CompileAttribute"; import { NgModule } from '@angular/core'; import { Compiler } from '@angular/core'; import {JitCompilerFactory} from '@angular/compiler'; export function createJitCompiler () { return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); } // exports = component @NgModule({ imports: [ ], declarations: [ CompileAttribute, ], providers: [ CompileService, { provide: Compiler, useFactory: createJitCompiler}, ], exports: [ CompileAttribute, ], entryComponents: [ ] }) export class CompileModule { } src/CompileService.ts000066400000000000000000000037501516104135200151310ustar00rootroot00000000000000import { Component, NgModule, Injectable, Compiler, ViewContainerRef, ModuleWithProviders, Type, } from '@angular/core'; export interface CompileOptions { template: string; container: ViewContainerRef; imports?: Array | ModuleWithProviders | any[]>; context?: any, onCompiled?: Function, onError?: Function; } const cache : any = {}; @Injectable() export class CompileService { constructor( private compiler: Compiler, ) { } public async compile(opts: CompileOptions) { try { const factory = await this.createFactory(opts); opts.container.clear(); const cmp : any = opts.container.createComponent(factory); cmp.instance.context = opts.context; } catch (e) { if (opts.onError) { opts.onError(e) } else { console.error(e); } } } private async createFactory(opts: CompileOptions) { const cacheKey = opts.template; if (Object.keys(cache).indexOf(cacheKey) > -1) { return cache[cacheKey]; } cache[cacheKey] = new Promise(async(resolve) => { @Component({ template: opts.template }) class TemplateComponent { context: any } @NgModule({ imports: opts.imports, declarations: [TemplateComponent] }) class TemplateModule { } const component = await this.compiler.compileModuleAndAllComponentsAsync(TemplateModule); const factory = component.componentFactories.find((comp) => comp.componentType === TemplateComponent ); if (opts.onCompiled) { opts.onCompiled(component); } cache[cacheKey] = factory; resolve(factory); }) return cache[cacheKey]; } } src/index.ts000066400000000000000000000001471516104135200133240ustar00rootroot00000000000000export * from "./CompileService"; export * from "./CompileAttribute"; export * from "./CompileModule"; test/000077500000000000000000000000001516104135200120335ustar00rootroot00000000000000test/angular-karma/000077500000000000000000000000001516104135200145555ustar00rootroot00000000000000test/angular-karma/CompileHtmlService.ts000066400000000000000000000015741516104135200206720ustar00rootroot00000000000000// you need unlinked npm-s!!! import { TestBed } from '@angular/core/testing'; import { inject } from '@angular/core/testing'; import {CompileAttribute, CompileService, CompileModule } from '../../src' describe('CompileHtml', () => { let service: CompileService; beforeEach(() => { TestBed.configureTestingModule({ imports: [ ], declarations: [ CompileAttribute ], providers: [ CompileService ], }); }); beforeEach(inject([CompileService], (_service: CompileService) => { service = _service; })); it ('CompileService', (/*done*/) => { expect(service instanceof CompileService).toBeTruthy(); /* setTimeout(()=> { console.log('done later'); done(); }, 1000); */ }); });test/angular-protractor/000077500000000000000000000000001516104135200156615ustar00rootroot00000000000000test/angular-protractor/test.js000066400000000000000000000015451516104135200172030ustar00rootroot00000000000000browser.ignoreSynchronization = true; describe('CompileHtml', () => { browser.get(`index.html`); const clicker = (button, counter) => { const total = 5; for(let i =0; i < total - 1; i++) { button.click(); browser.waitForAngular(); } const count = counter.getText(); expect(count).toEqual(total.toString()); } it('Service', (done) => { setTimeout(() => { const button = element(by.id('button-container')) const counter = element(by.id('counter-container')); clicker(button, counter); done(); }, 3000) }); it('Attribute', (done) => { const button = element(by.id('button-attribute')) const counter = element(by.id('counter-attribute')); clicker(button, counter); done(); }); });test/angular-webpack/000077500000000000000000000000001516104135200150765ustar00rootroot00000000000000test/angular-webpack/angular/000077500000000000000000000000001516104135200165275ustar00rootroot00000000000000test/angular-webpack/angular/bundle.aot.ts000066400000000000000000000005061516104135200211330ustar00rootroot00000000000000import { enableProdMode } from '@angular/core'; enableProdMode(); import 'corifeus-web/src/bundle'; import { platformBrowser } from '@angular/platform-browser'; import {ModuleNgFactory} from '../../../build/aot/test/angular-webpack/angular/module.ngfactory'; platformBrowser().bootstrapModuleFactory(ModuleNgFactory); test/angular-webpack/angular/bundle.ts000066400000000000000000000004651516104135200203550ustar00rootroot00000000000000import 'corifeus-web/src/bundle'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import {Module} from './module'; if (process.env.ENV === 'production') { enableProdMode(); } platformBrowserDynamic().bootstrapModule(Module); test/angular-webpack/angular/module.ts000066400000000000000000000005741516104135200203720ustar00rootroot00000000000000import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Page } from './page'; import { CompileModule } from '../../../src'; @NgModule({ imports: [ BrowserModule, CompileModule ], declarations: [ Page, ], providers: [ ], bootstrap: [ Page ] }) export class Module { }; test/angular-webpack/angular/page.ts000066400000000000000000000043431516104135200200170ustar00rootroot00000000000000import { Component, Injectable, ViewChild, ViewContainerRef, OnInit } from '@angular/core'; import {CompileService } from '../../../src'; @Component({ selector: 'p3x-compile-test', template: `
` }) @Injectable() export class Page implements OnInit { @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; @ViewChild('container2', {read: ViewContainerRef}) container2: ViewContainerRef; data1: string; data2: string; context: Page; counter1 : number = 0; counter2 : number = 0; constructor( private compileHtmlService: CompileService ) { this.context = this; } private async update1() { this.counter1++; this.data1 = `
Service
Click me via a service!
{{ context.counter1}}
`; Promise.all([ this.compileHtmlService.compile({ template: this.data1, container: this.container, context: this, onCompiled: (cmp : any) => { console.log('container1 compiled, same template '); } }) , this.compileHtmlService.compile({ template: this.data1, container: this.container2, context: this, onCompiled: (cmp : any) => { console.log('container2 compiled, same template'); } }) ]) } private update2() { this.counter2++; this.data2 = `
Attribute
Click me via an attribute!
{{ context.counter2}}
`; } ngOnInit() { this.update1(); this.update2(); } }test/angular-webpack/angular/polyfills.ts000066400000000000000000000000451516104135200211130ustar00rootroot00000000000000import 'corifeus-web/src/polyfills'; test/angular-webpack/index.html000066400000000000000000000003361516104135200170750ustar00rootroot00000000000000 angular-compile-html tsconfig.aot.json000066400000000000000000000013351516104135200143470ustar00rootroot00000000000000{ "compilerOptions": { "outDir": "build/aot", "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "lib": [ "es5", "es6", "dom", "es2015.collection", "es2015.promise", "es2015.core" ] }, "includes": [ "src/angular/**/*", "test/angular-webpack/**/*" ], "exclude": [ "node_modules", "src/angular/boot.ts", "test/angular-webpack/angular/boot.ts", "build/browser" ], "angularCompilerOptions": { "genDir": "./build/aot", "skipMetadataEmit" : true } }tsconfig.build.json000066400000000000000000000015321516104135200146620ustar00rootroot00000000000000{ "compilerOptions": { "baseUrl": ".", "declaration": true, "stripInternal": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "noImplicitAny": true, "strictNullChecks": true, "noFallthroughCasesInSwitch": true, "module": "commonjs", "moduleResolution": "node", "outDir": "./dist", "paths": { }, "rootDir": ".", "sourceMap": true, "inlineSources": true, "target": "es5", "skipLibCheck": true, "lib": ["es2015", "dom"], // don't auto-discover @types/node, it results in a ///