.editorconfig 0000664 0000000 0000000 00000000637 15161034154 0013541 0 ustar 00root root 0000000 0000000 # EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
.gitignore 0000664 0000000 0000000 00000000326 15161034154 0013047 0 ustar 00root root 0000000 0000000 /node_modules
/build
/dist
.idea/workspace.xml
.idea/tasks.xml
.idea/profiles_settings.xml
.idea/inspectionProfiles/Project_Default.xml
.idea/inspectionProfiles/profiles_settings.xml
node_modules/.yarn-integrity
.idea/ 0000775 0000000 0000000 00000000000 15161034154 0012036 5 ustar 00root root 0000000 0000000 .idea/angular-compile.iml 0000664 0000000 0000000 00000000520 15161034154 0015615 0 ustar 00root root 0000000 0000000
.idea/codeStyleSettings.xml 0000664 0000000 0000000 00000000425 15161034154 0016235 0 ustar 00root root 0000000 0000000
.idea/inspectionProfiles/ 0000775 0000000 0000000 00000000000 15161034154 0015715 5 ustar 00root root 0000000 0000000 .idea/inspectionProfiles/profiles_settings.xml 0000664 0000000 0000000 00000000234 15161034154 0022201 0 ustar 00root root 0000000 0000000
.idea/misc.xml 0000664 0000000 0000000 00000000256 15161034154 0013516 0 ustar 00root root 0000000 0000000
.idea/modules.xml 0000664 0000000 0000000 00000000432 15161034154 0014227 0 ustar 00root root 0000000 0000000
.idea/vcs.xml 0000664 0000000 0000000 00000000247 15161034154 0013356 0 ustar 00root root 0000000 0000000
.npmignore 0000664 0000000 0000000 00000000375 15161034154 0013062 0 ustar 00root root 0000000 0000000 /.idea
/artifacts
/build
/test
/node_modules
/*.iml
/*.ipr
/*.iws
/.travis.yml
/.scrutinizer.yml
/Gruntfile.js
/*.lock
*.log
/corifeus-boot.json
# Corifeus / P3X
/tsconfig*
/dist/node_modules
/dist/test
# need to allow ts for awesome=typscript-loader
.travis.yml 0000664 0000000 0000000 00000001645 15161034154 0013175 0 ustar 00root root 0000000 0000000 sudo: required
addons:
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
language: node_js
cache:
npm: false
node_js:
- node
before_script:
- npm install -g grunt-cli npm
- npm install
env:
global:
secure: c1EmMJCCfB1cFe//vM+fw+PzBCYII2szjXyvzQ+GKtBfH4MmYsgupdhLyCYbN0q4ASpb5ajL9ynEQrQMax1mmjGK1BoHdx7HqB1+p3fFDdyfMr59zcbufHjoepjvm1b1bdxmHv4HhKVeyuhcNDQLEFy4FGNLFLkB31Wj/tFhQd9DRxt23ubsdpsG8xHknvqTCOxoZxQZ0PQrtTIKDtJTjVaSkcU5X8SbShs1z6zt6ciiOa+Y1fSHoFU6cjepqPbrfK2LV6+9PEHj0RZ0XbqoPnPcOus7HLUuv2v3CZLxjTGpr97Ah1QzSeEFfqZtS8rddTiUo8LdeXxCkpm6tkhdi4GCYVsTuClfoKOqhkH6Q6/LRVd2ZnvPAzpiwhfSuQCat8tBuB3LJP5Z2gysSHYjoj+mVX79WksKhsNuaJuWSdmEwfXUq/2B9KsFUNxhebW2DdIby7Kz0w1L5UtS83kacT/U/ZVtoA+D8nRxgJ78BukWPPyImZZItfnd1Kht2AVujsNN90n0+p5t8JtRwQBVhJQtwK550OZiwd9WpGuHOmLEKVSKVeCr6hCNDDWl+XDgs9JpLpUEpPY2cWl/ku8GCuM6Z/XDcK0c26LFbohK3LEo4opiLkX3M55NQYYVevIS2/mOaETcYh9qcFU/5lFojrxeiUywW5xbssc2zorNIIY=
Gruntfile.js 0000664 0000000 0000000 00000003041 15161034154 0013351 0 ustar 00root root 0000000 0000000 module.exports = (grunt) => {
grunt.option('cory-loader-off', true);
//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.angular);
grunt.registerTask('travis', [
'cory-npm',
'cory-npm-angular',
'clean',
'copy:cory-build',
'cory:license',
'cory-build-jit',
'cory-replace' ]
);
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', 'cory-npm', 'cory-publish-angular']);
//cori-test:angular-protractor
// cori-test:angular-karma
grunt.registerTask('test-connect', [
'connect:cory-angular',
'watch:cory-wait'
])
}
LICENSE 0000664 0000000 0000000 00000002406 15161034154 0012065 0 ustar 00root root 0000000 0000000
@license p3x-angular-compile v2019.10.136
🆖 Angular Dynamic Compile component, that turns a string into a compiled component
https://pages.corifeus.com/angular-compile
Copyright (c) 2019 Patrik Laszlo / P3X / Corifeus and contributors.
MIT License
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 0000664 0000000 0000000 00000017610 15161034154 0012342 0 ustar 00root root 0000000 0000000 [//]: #@corifeus-header
[](https://www.npmjs.com/package/p3x-angular-compile/)
[](https://paypal.me/patrikx3) [](https://www.patrikx3.com/en/front/contact) [](https://www.facebook.com/corifeus.software) [](https://travis-ci.com/patrikx3/angular-compile)
[](https://uptimerobot.patrikx3.com/)
# 🆖 Angular Dynamic Compile component, that turns a string into a compiled component v2019.10.135
**Note about versioning:** Versions are cut in Major.Minor.Patch schema. Major is always the current year. Minor is either 4 (January - June) or 10 (July - December). Patch is incremental by every build. If there is a breaking change, it should be noted in the readme.
**Bugs are evident™ - MATRIX️**
### Node Version Requirement
```
>=10.16.0
```
### Built on Node
```
v12.7.0
```
The ```async``` and ```await``` keywords are required.
Install NodeJs:
https://nodejs.org/en/download/package-manager/
# Built on Angular
```text
8.2.0
```
# 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 (response to events / clicking etc..)
## NPM
It is an ```ESNEXT``` bundle by default.
## Install
```bash
npm install --save p3x-angular-compile
# or
yarn add p3x-angular-compile
```
## Check out how it works and code
https://angular-compile.corifeus.com
https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts#L115
## Usage
```typescript
import { CompileModule} from "p3x-angular-compile"
// the module settings
@NgModule({
imports: [
// multiple directives in a shared module like this
CorifeusWebMaterialModule,
// usually it is enough
CompileModule,
],
declarations: [
Page,
],
providers: [
],
bootstrap: [ Page ]
})
export class Module { };
```
#### The template
```html
*ngIf="isEnabled"
[p3x-compile]="template"
[p3x-compile-ctx]="this"
[p3x-compile-error-handler]="handleCompileErrorHandler"
[p3x-compile-module]="dataModule"
>
```
#### The code
```typescript
// a page example
export class Page {
isEnabled: boolean = true;
dataModule : any = {
//schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declarations: [],
imports: [
MatButtonModule
],
exports: [
]
}
template: string = "";
handleCompileErrorHandler(error: Error) {
console.error(error)
}
alert() {
alert('ok');
}
}
```
### Options
[Reference for the Angular module settings.](
https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.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)
# Errors
## Type x is part of the declarations of 2 modules
Basically, you need a shared component.
https://stackoverflow.com/questions/42993580/angular-2-type-childcomponent-is-a-part-of-the-declarations-of-2-modules-par
## AOT + JIT
### Since Angular 5.x.x +
We cannot use AOT + JIT at once.
#### Info
https://github.com/angular/angular/issues/20156#issuecomment-341767899
On the issue, you can see:
```text
To reduce the payload, we do not ship the compiler in AOT.
```
So right now, it is not possible.
Although, there are some hacks, but you are on your own...
https://github.com/angular/angular/issues/20156#issuecomment-468686933
### Size
If you want very small bundle, use ```gzip```.
[//]: #@corifeus-footer
---
🙏 This is an open-source project. Star this repository, if you like it, or even donate to maintain the servers and the development. Thank you so much!
Possible, this server, rarely, is down, please, hang on for 15-30 minutes and the server will be back up.
All my domains ([patrikx3.com](https://patrikx3.com) and [corifeus.com](https://corifeus.com)) could have minor errors, since I am developing in my free time. However, it is usually stable.
---
[**P3X-ANGULAR-COMPILE**](https://pages.corifeus.com/angular-compile) Build v2019.10.135
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QZVM4V6HVZJW6) [](https://www.patrikx3.com/en/front/contact) [](https://www.facebook.com/corifeus.software)
## P3X Sponsors
[IntelliJ - The most intelligent Java IDE](https://www.jetbrains.com/?from=patrikx3)
[](https://www.jetbrains.com/?from=patrikx3) [](https://www.nosqlbooster.com/)
[The Smartest IDE for MongoDB](https://www.nosqlbooster.com)
[//]: #@corifeus-footer:end
angular-compile.iml 0000664 0000000 0000000 00000000624 15161034154 0014642 0 ustar 00root root 0000000 0000000
index.ts 0000664 0000000 0000000 00000000027 15161034154 0012534 0 ustar 00root root 0000000 0000000 export * from "./src";
package.json 0000664 0000000 0000000 00000002505 15161034154 0013346 0 ustar 00root root 0000000 0000000 {
"name": "p3x-angular-compile",
"version": "2019.10.136",
"corifeus": {
"prefix": "p3x-",
"publish": true,
"type": "p3x",
"code": "Logico",
"nodejs": "v12.7.0",
"opencollective": false,
"reponame": "angular-compile",
"build": true,
"angular": "8.2.0"
},
"description": "🆖 Angular Dynamic Compile component, that turns a string into a compiled component",
"main": "dist/index.js",
"typings": "dist/index",
"scripts": {
"test": "grunt travis"
},
"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.com/angular-compile",
"devDependencies": {
"corifeus-builder-angular": "^2019.10.364",
"corifeus-web": "^2019.10.431",
"corifeus-web-material": "^2019.10.448"
},
"dependencies": {
"lodash": "^4.17.15"
},
"engines": {
"node": ">=10.16.0"
}
} src/ 0000775 0000000 0000000 00000000000 15161034154 0011645 5 ustar 00root root 0000000 0000000 src/CompileAttribute.ts 0000664 0000000 0000000 00000012725 15161034154 0015500 0 ustar 00root root 0000000 0000000 import {
Component,
Input,
Injectable,
// OnInit,
OnChanges,
SimpleChanges,
Type,
ModuleWithProviders,
NgModule,
Compiler,
NgModuleFactory,
// Inject,
} from '@angular/core';
import {CommonModule} from '@angular/common';
//import { BrowserModule } from '@angular/platform-browser';
//let SingletonDefaultModule: NgModule;
import {cloneDeep} from 'lodash';
//import { CorifeusMaterialModule } from 'corifeus-web-material';
const reverse = function (str: string) {
return str.split('').reverse().join('')
}
const random = () => {
return (Math.floor(Math.random() * (99999999999999999 - 10000000000000000)) + 10000000000000000).toString(16)
}
let currentIdTime: number;
let currentId = 0;
const nextId = () => {
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'))
const newId = `p3x-angular-compile-${timeHex}${comingIdHex}${randomHex}`;
//console.log(newId)
return newId
}
//const cache : any = {};
@Component({
selector: '[p3x-compile]',
template: `
`
})
@Injectable()
export class CompileAttribute implements OnChanges {
//export class CompileAttribute implements OnChanges ,OnInit {
@Input('p3x-compile')
html: string;
@Input('p3x-compile-ctx')
context: any;
@Input('p3x-compile-error-handler')
errorHandler: Function = undefined;
dynamicComponent: any;
dynamicModule: NgModuleFactory | any;
@Input('p3x-compile-module')
module: NgModule;
@Input('p3x-compile-imports')
imports: Array | ModuleWithProviders | any[]>;
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();
}
*/
ngOnChanges(changes: SimpleChanges) {
//console.log('ng one changes')
this.update();
}
update() {
try {
if (this.html === undefined || this.html === null || this.html.trim() === '') {
// this.container.clear();
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 ;
}
*/
this.dynamicComponent = this.createNewComponent(this.html, this.context);
this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
/*
cache[cacheKey] = {
dynamicComponent: this.dynamicComponent,
dynamicModule: this.dynamicModule,
};
*/
} catch (e) {
if (this.errorHandler === undefined) {
throw e;
} else {
this.errorHandler(e);
}
}
/*
// now we use it with ngComponentOutlet, since about angular 5
await this.service.compile({
template: this.html,
container: this.container,
context: this.context,
imports: this.imports,
module: this.module
})
*/
}
private createComponentModule(componentType: any) {
let module: NgModule = {};
if (this.module !== undefined) {
module = cloneDeep(this.module);
}
/*
else if (SingletonDefaultModule !== undefined && SingletonDefaultModule !== null) {
module = cloneDeep(SingletonDefaultModule);
}
*/
module.imports = module.imports || [];
module.imports.push(CommonModule);
if (this.imports !== undefined) {
module.imports = module.imports.concat(this.imports)
}
if (module.declarations === undefined) {
module.declarations = [
componentType
];
} else {
module.declarations.push(componentType);
}
module.entryComponents = [
componentType
];
@NgModule(module)
class RuntimeComponentModule {
}
return RuntimeComponentModule;
}
private createNewComponent(html: string, context: any) {
@Component({
selector: nextId(),
template: html
})
class DynamicComponent {
context: any = context;
}
return DynamicComponent;
}
}
src/CompileModule.ts 0000664 0000000 0000000 00000001703 15161034154 0014754 0 ustar 00root root 0000000 0000000 //import { CompileService, CompileServiceConfig, } from "./CompileService";
import {CompileAttribute} from "./CompileAttribute";
import {
NgModule,
//ModuleWithProviders,
} from '@angular/core';
import {CommonModule} from '@angular/common';
/*
import { BrowserModule } from '@angular/platform-browser';
import { Compiler } from '@angular/core';
import {JitCompilerFactory} from '@angular/compiler';
export function createJitCompiler () {
return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
}
*/
/*
export class CompileServiceConfig {
module: NgModule
}
*/
// exports = component
@NgModule({
imports: [
CommonModule
],
declarations: [
CompileAttribute,
],
providers: [
// CompileService,
// { provide: Compiler, useFactory: createJitCompiler},
],
exports: [
CompileAttribute,
],
entryComponents: []
})
export class CompileModule {
}
src/CompileService.ts 0000664 0000000 0000000 00000006741 15161034154 0015136 0 ustar 00root root 0000000 0000000 /*
import {
Component,
NgModule,
Injectable,
Compiler,
ViewContainerRef,
ModuleWithProviders,
Type,
Optional
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { cloneDeep } from 'lodash';
export interface CompileOptions {
template: string;
container: ViewContainerRef;
imports?: Array | ModuleWithProviders | any[]>;
context?: any,
onCompiled?: Function,
onError?: Function;
module?: NgModule;
}
const cache : any = {};
export class CompileServiceConfig {
module: NgModule
}
let SingletonDefaultModule: NgModule;
@Injectable()
export class CompileService {
constructor(
private compiler: Compiler,
@Optional() config: CompileServiceConfig,
) {
if (config !== undefined && config !== null) {
if (config.module !== undefined && config.module !== null) {
SingletonDefaultModule = config.module;
}
}
}
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] = (async() => {
try {
@Component({
template: opts.template
})
class TemplateComponent {
context: any
}
let module : NgModule = {};
if (opts.module !== undefined) {
module = cloneDeep(opts.module);
} else if (SingletonDefaultModule !== undefined && SingletonDefaultModule !== null) {
module = cloneDeep(SingletonDefaultModule);
}
module.imports = module.imports || [];
module.imports.push( CommonModule );
module.imports.push( BrowserModule );
if (opts.imports !== undefined) {
module.imports = module.imports.concat(opts.imports)
}
if (module.declarations === undefined) {
module.declarations = [
TemplateComponent
];
} else {
module.declarations.push(TemplateComponent);
}
@NgModule(module)
class TemplateModule {
}
const component = await this.compiler.compileModuleAndAllComponentsAsync(TemplateModule);
const factory = component.componentFactories.find((comp) =>
comp.componentType === TemplateComponent
);
cache[cacheKey] = factory;
if (opts.onCompiled) {
opts.onCompiled(component);
}
return factory;
} catch (e) {
delete cache[cacheKey];
throw e;
}
})();
return cache[cacheKey];
}
}
*/ src/index.ts 0000664 0000000 0000000 00000000151 15161034154 0013321 0 ustar 00root root 0000000 0000000 //export * from "./CompileService";
export * from "./CompileAttribute";
export * from "./CompileModule";
test/ 0000775 0000000 0000000 00000000000 15161034154 0012035 5 ustar 00root root 0000000 0000000 test/angular-webpack/ 0000775 0000000 0000000 00000000000 15161034154 0015100 5 ustar 00root root 0000000 0000000 test/angular-webpack/angular/ 0000775 0000000 0000000 00000000000 15161034154 0016531 5 ustar 00root root 0000000 0000000 test/angular-webpack/angular/bundle.aot.ts 0000664 0000000 0000000 00000000500 15161034154 0021127 0 ustar 00root root 0000000 0000000 import 'corifeus-web-material/src/bundle'
import {enableProdMode} from '@angular/core';
enableProdMode();
//import 'corifeus-web/src/bundle';
import {platformBrowser} from '@angular/platform-browser';
import {ModuleNgFactory} from './module.ngfactory';
platformBrowser().bootstrapModuleFactory(ModuleNgFactory);
test/angular-webpack/angular/bundle.ts 0000664 0000000 0000000 00000000523 15161034154 0020352 0 ustar 00root root 0000000 0000000 import {enableProdMode} from '@angular/core';
declare var process: any;
if (process.env === 'production') {
enableProdMode();
}
import 'corifeus-web-material/src/bundle'
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Module} from './module';
platformBrowserDynamic().bootstrapModule(Module);
test/angular-webpack/angular/module.ts 0000664 0000000 0000000 00000001443 15161034154 0020370 0 ustar 00root root 0000000 0000000 import {
NgModule,
} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {CorifeusMaterialModule} from 'corifeus-web-material'
import {Page} from './page';
import {
CompileModule,
} from '../../../src';
import {MatDividerModule} from '@angular/material/divider'
import "../assets/style.scss";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
export const routes: Routes = [
{
path: '',
component: Page,
},
];
@NgModule({
imports: [
BrowserAnimationsModule,
CorifeusMaterialModule,
MatDividerModule,
RouterModule.forRoot(routes),
CompileModule
],
declarations: [
Page,
],
providers: [],
bootstrap: [Page]
})
export class Module {
};
test/angular-webpack/angular/page.ts 0000664 0000000 0000000 00000013503 15161034154 0020017 0 ustar 00root root 0000000 0000000 import {
Component,
Injectable,
ViewChild,
ViewContainerRef,
OnInit,
NgModule,
CUSTOM_ELEMENTS_SCHEMA,
OnDestroy
} from '@angular/core';
import {
MatButtonModule,
} from '@angular/material';
@Component({
selector: 'p3x-compile-test',
template: `
`
})
@Injectable()
export class Page implements OnInit, OnDestroy {
data1: string;
data2: string = 'init';
data3: string = 'Just simple string red';
counter1: number = 0;
counter2: number = 0;
interval: any;
dataRouterLink: string = ''
compileForm: string = ``
dataMaterialDefault: string = `
`
dataMaterial: string = `
`
dataMaterialModule: any = {
// schemas: [CUSTOM_ELEMENTS_SCHEMA],
// declarations: [],
imports: [
MatButtonModule
],
exports: []
}
constructor(
// private compileHtmlService: CompileService
) {
}
private update1() {
this.counter1++;
this.data1 = `
P3X Angular Compile
Click me via a angular compile!
{{ context.counter1}}
`;
}
public formClick() {
alert('form click');
}
private update2() {
this.counter2++;
this.data2 = `
Attribute
Click me via an other attribute!
{{ context.counter2}}
`;
}
chars: string = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
getRandomChar() {
return this.chars[Math.floor(Math.random() * (62 - 0)) + 0]
}
randomRouterLink() {
let counter = 0;
let randomString = '';
let randomString2 = '';
while (counter < 10) {
counter++;
randomString += this.getRandomChar();
randomString2 += this.getRandomChar();
}
this.dataRouterLink = `${randomString}`
this.dataMaterial = `
${this.dataMaterialDefault} ${randomString2}
`
}
ngOnInit() {
this.update1();
this.update2();
this.randomRouterLink()
/*
let is = false;
let newData = '123';
let defaultData = '';
let count = 0;
this.interval = setInterval(() => {
is = !is;
if (is) {
count++;
defaultData = defaultData + newData;
this.data3 = defaultData + defaultData;
if (count > 10) {
count = 0;
defaultData = newData;
}
} else {
this.data3 = '321
'
}
}, 1000)
*/
}
ngOnDestroy() {
clearInterval(this.interval);
}
}
test/angular-webpack/angular/polyfills.ts 0000664 0000000 0000000 00000000464 15161034154 0021122 0 ustar 00root root 0000000 0000000 //import 'corifeus-web/src/polyfills';
import 'core-js/es6';
import 'core-js/es7/reflect.js';
import 'zone.js/dist/zone.js';
if (process.env.ENV === 'production') {
// Production
} else {
// Development
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}
test/angular-webpack/assets/ 0000775 0000000 0000000 00000000000 15161034154 0016402 5 ustar 00root root 0000000 0000000 test/angular-webpack/assets/style.scss 0000664 0000000 0000000 00000000712 15161034154 0020437 0 ustar 00root root 0000000 0000000 @import '~corifeus-web-material/src/scss/all';
.p3x-angular-compile-element {
padding: 5px;
}
.cory-mat-theme-light {
.p3x-angular-compile-element {
border: dashed 2px rgba(black, 0.1);
background-color: rgba(black, 0.05);
padding: 5px;
}
}
.cory-mat-theme-dark {
.p3x-angular-compile-element {
border: dashed 2px rgba(white, 0.1);
background-color: rgba(white, 0.05);
padding: 5px;
}
}
test/angular-webpack/index.html 0000664 0000000 0000000 00000003427 15161034154 0017103 0 ustar 00root root 0000000 0000000
P3X Angular Compile
tsconfig.aot.json 0000664 0000000 0000000 00000001553 15161034154 0014353 0 ustar 00root root 0000000 0000000 {
"compilerOptions": {
"skipLibCheck": true,
"outDir": "build/aot",
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"lib": [
"es2018",
"dom"
]
},
"include": [
"src/angular/**/*",
"test/angular-webpack/**/*"
],
"exclude": [
"src/angular/bundle.ts",
"test/angular-webpack/angular/bundle.ts",
"test/angular-karma",
"build/browser"
],
"angularCompilerOptions-save": {
"annotationsAs": "decorators",
"preserveWhitespaces": false
},
"angularCompilerOptions": {
"enableIvy": false
}
}
tsconfig.build.json 0000664 0000000 0000000 00000001043 15161034154 0014661 0 ustar 00root root 0000000 0000000 {
"compilerOptions": {
"skipLibCheck": true,
"baseUrl": "./",
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"outDir": "./dist",
"suppressImplicitAnyIndexErrors": true,
"lib": [
"es2018",
"dom"
],
"paths": {
"*": [ "node_modules/@types/*", "*"]
}
},
"includes": [
"src/**/*"
],
"exclude": [
"node_modules",
"test"
]
}
tsconfig.json 0000664 0000000 0000000 00000002013 15161034154 0013561 0 ustar 00root root 0000000 0000000 {
"compilerOptions": {
"skipLibCheck": true,
"baseUrl": "./",
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"lib": [
"es2018",
"dom"
],
"paths": {
"*": [
"node_modules/@types/*",
"*"
]
}
},
"includes": [
"src/angular/**/*",
"test/angular-webpack/**/*"
],
"exclude": [
"node_modules",
"src/angular/bundle.aot.ts",
"test/angular-karma-disabled",
"test/angular-webpack/angular/bundle.aot.ts",
"build/browser"
],
"angularCompilerOptions-save": {
"annotationsAs": "decorators",
"preserveWhitespaces": false
},
"angularCompilerOptions": {
"enableIvy": false
}
}