import { IPlayground } from '../../../interfaces/IPlayground' ; import { DocumentationType } from '../tokens/documentation.token' ; import { SystemJSHelper } from '../utilities/system-helper' ; import { PlaygroundStrategy } from './playground-strategy' ; export class AngularPlaygroundStrategy extends PlaygroundStrategy { getGlobalExternalScripts ( ) { return [ `https://cdnjs.cloudflare.com/ajax/libs/typescript/4.2.3/typescript.js` , `https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js` , `https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.11.4/zone.min.js` , `https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js` , 'systemjs.config.js' ] ; } getGlobalScripts ( assetsUrl ) { return [ `window.uxdAssetsUrl = '${ assetsUrl }';` ] ; } getBodyScripts ( ) { return [ `System.import('main.ts').catch(console.error.bind(console));` ] ; } getGlobalStyles ( ) { return [ `body { padding: 15px; background-color: #fff; }` ] ; } getBody ( ) { return `<app>Loading...</app>` ; } /** Get the files to include in the playground */ getFiles ( playground , assetsUrl ) { return { 'main.ts' : this . createAppModule ( playground ) , 'systemjs.config.js' : SystemJSHelper . getSystemJSConfig ( this . documentationType , assetsUrl ) , ... playground . files } ; } private createAppModule ( playground ) { const modules = [ 'BrowserModule' , 'FormsModule' , 'ReactiveFormsModule' , 'BrowserAnimationsModule' ] ; const declarations = [ 'AppComponent' ] ; const imports = [ ] ; if ( playground . modules ) { playground . modules . filter ( dependency => dependency . declaration ) . forEach ( dependency => { if ( dependency . imports instanceof Array ) { declarations . push ( ... dependency . imports ) ; } else { declarations . push ( dependency . imports ) ; } } ) ; playground . modules . filter ( module => ! module . declaration ) . forEach ( module => { let moduleImports ; if ( module . forRoot ) { moduleImports = Array . isArray ( module . imports ) ? module . imports . map ( imp => `${ imp }.forRoot()` ) : `${ module . imports }.forRoot()` ; } const moduleImportProviders = module . providers || moduleImports || module . imports ; if ( moduleImportProviders instanceof Array ) { modules . push ( ... moduleImportProviders ) ; } else { modules . push ( moduleImportProviders ) ; } } ) ; playground . modules . forEach ( dependency => { if ( dependency . library ) { if ( ! dependency . imports ) { imports . push ( `import '${ dependency . library }';` ) ; } else if ( dependency . imports instanceof Array ) { imports . push ( `import { ${ dependency . imports . join ( ', ' ) } } from '${ dependency . library }';` ) ; } else if ( dependency . importAs ) { imports . push ( `import * as ${ dependency . imports } from '${ dependency . library }';` ) ; } else { imports . push ( `import ${ dependency . imports } from '${ dependency . library }';` ) ; } } } ) ; } return [ `import { NgModule } from '@angular/core';` , `import { BrowserModule } from '@angular/platform-browser';` , `import { FormsModule, ReactiveFormsModule } from '@angular/forms';` , `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';` , `import { AppComponent } from './app.component';` , `import { BrowserAnimationsModule } from '@angular/platform-browser/animations';` , `import { AccessibilityModule, ColorServiceModule, colorSets, IconModule } from '@ux-aspects/ux-aspects';` , `${ imports . join ( '\n' ) }` , `` , `@NgModule({` , `    imports: [` , `        AccessibilityModule,` , `        ColorServiceModule.forRoot(${ this . documentationType === DocumentationType . Keppel ? 'colorSets.keppel' : 'colorSets.microFocus' }),` , `        IconModule,` , `${ modules . filter ( module => module !== undefined ) . map ( module => `        ${ module },` ) . join ( '\n' ) }` , `    ],` , `    declarations: [` , `${ declarations . map ( declaration => `        ${ declaration },` ) . join ( '\n' ) }` , `    ],` , `    bootstrap: [AppComponent]` , `})` , `export class AppModule {` , `}` , `` , `platformBrowserDynamic().bootstrapModule(AppModule);` , ] . join ( '\n' ) ; } }