import { Injectable } from '@angular/core' ; import { ExampleType } from '../example-viewer/example-viewer.component' ; const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1' ; const COPYRIGHT = `Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license` ; const TEMPLATE_FILES = { core : [ { file : 'polyfills.ts' , filecontent : require ( '!!raw-loader!../../../assets/stackblitz/polyfills.ts' ) } , { file : 'angular.json' , filecontent : require ( '!!raw-loader!../../../assets/stackblitz/angular_json' ) } , { file : 'main.ts' , filecontent : require ( '!!raw-loader!../../../assets/stackblitz/main.ts' ) } , { file : 'index.html' , filecontent : require ( '!!raw-loader!../../../assets/stackblitz/index.html' ) } , ] , 'ng-zorro-antd' : [ { file : 'styles.scss' , filecontent : `@import '~ng-zorro-antd/ng-zorro-antd.css';` } , ] , } ; const TAGS = [ 'angular' , 'formly' , 'example' ] ; const angularVersion = '^7.0.0' ; const materialVersion = '^7.0.0' ; const formlyVersion = '^5.0.0' ; const dependencies = { core : { '@angular/common' : angularVersion , '@angular/compiler' : angularVersion , '@angular/core' : angularVersion , '@angular/forms' : angularVersion , '@angular/platform-browser' : angularVersion , '@angular/platform-browser-dynamic' : angularVersion , 'core-js' : '^2.4.1' , 'rxjs' : '^6.4.0' , 'zone.js' : '^0.9.0' , 'tslib' : '^1.7.0' , '@ngx-formly/core' : formlyVersion , } , 'ng-zorro-antd' : { 'ngx-formly-zorro' : formlyVersion , 'ng-zorro-antd' : '^7.1.0' , } , } ; const ngModule = { 'ng-zorro-antd' : 'FormlyNgZorroAntdModule' , } ; /**
 * Stackblitz writer, write example files to stackblitz
 *
 * StackBlitz API
 * URL: https://run.stackblitz.com/api/aio/v1/
 * data: {
 *   // File name, directory and content of files
 *   files[file-name1]: file-content1,
 *   files[directory-name/file-name2]: file-content2,
 *   // Can add multiple tags
 *   tags[0]: tag-0,
 *   // Description of stackblitz
 *   description: description,
 *   // Private or not
 *   private: true
 *  // Dependencies
 *  dependencies: dependencies
 * }
 */ @ Injectable ( ) export class StackblitzWriter { /**
     * Returns an HTMLFormElement that will open a new stackblitz template with the example data when
     * called with submit().
     */ constructStackblitzForm ( type , exampleData ) { const indexFile = `src%2Fapp%2Fapp.component.ts` ; const form = this . _createFormElement ( indexFile ) ; TAGS . forEach ( ( tag , i ) => this . _appendFormInput ( form , `tags[${ i }]` , tag ) ) ; this . _appendFormInput ( form , 'private' , 'true' ) ; this . _appendFormInput ( form , 'description' , exampleData . title ) ; const options = { type : 'ng-zorro-antd' , useAnimation : true } ; const deps = { ... dependencies . core , ... dependencies [ options . type ] , '@angular/animations' : angularVersion , '@angular/cdk' : materialVersion , '@angular/material' : materialVersion , '@angular/router' : angularVersion , } ; if ( [ 'DatePicker' , 'YearPicker' , 'MonthPicker' , 'WeekPicker' , 'RangePicker' ] . includes ( exampleData . title . split ( ' ' ) [ 0 ] ) ) { deps [ 'date-fns' ] = '^1.30.1' ; } this . _appendFormInput ( form , 'dependencies' , JSON . stringify ( deps ) ) ; [ ... TEMPLATE_FILES . core , ... TEMPLATE_FILES [ options . type ] , ] . forEach ( data => { this . _addFileToForm ( form , this . _replaceExamplePlaceholderNames ( data . file , data . filecontent , options ) , data . file , false ) ; } ) ; exampleData . files . forEach ( data => { this . _addFileToForm ( form , this . _replaceExamplePlaceholderNames ( data . file , data . filecontent , options ) , data . file , data . file . indexOf ( 'assets' ) !== 0 ) ; } ) ; return form ; } /** Constructs a new form element that will navigate to the stackblitz url. */ _createFormElement ( indexFile ) { const form = document . createElement ( 'form' ) ; form . action = `${ STACKBLITZ_URL }?file=${ indexFile }` ; form . method = 'post' ; form . target = '_blank' ; return form ; } /** Appends the name and value as an input to the form. */ _appendFormInput ( form , name , value ) { const input = document . createElement ( 'input' ) ; input . type = 'hidden' ; input . name = name ; input . value = value ; form . appendChild ( input ) ; } param form param data param content param filename param path param prependApp _addFileToForm ( form , content , filename , prependApp = true ) { if ( prependApp ) { filename = 'app/' + filename ; } if ( filename !== 'angular.json' ) { filename = 'src/' + filename ; } this . _appendFormInput ( form , `files[${ filename }]` , this . _appendCopyright ( filename , content ) ) ; } _replaceExamplePlaceholderNames ( fileName , filecontent , options ) { if ( fileName === 'app.module.ts' ) { if ( options . type === 'ionic' ) { filecontent = filecontent . replace ( `'@angular/common';` , `'@angular/common';\nimport { IonicModule } from '@ionic/angular';` ) ; filecontent = filecontent . replace ( `FormlyModule.forRoot` , `IonicModule.forRoot(),\n    FormlyModule.forRoot` ) ; } if ( filecontent . indexOf ( `@ngx-formly/${ options . type }'` ) === - 1 ) { filecontent = filecontent . replace ( `'@ngx-formly/core';` , `'@ngx-formly/core';\nimport { ${ ngModule [ options . type ] } } from 'ngx-formly-zorro';` ) ; filecontent = filecontent . replace ( `FormlyModule.forRoot` , `${ ngModule [ options . type ] },\n    FormlyModule.forRoot` ) ; } if ( options . useAnimation ) { filecontent = filecontent . replace ( '@angular/common' , '@angular/platform-browser/animations' ) ; filecontent = filecontent . replace ( /CommonModule/g , 'BrowserAnimationsModule' ) ; } else { filecontent = filecontent . replace ( '@angular/common' , '@angular/platform-browser' ) ; filecontent = filecontent . replace ( /CommonModule/g , 'BrowserModule' ) ; } filecontent = filecontent . replace ( 'declarations: [' , `bootstrap: [AppComponent],\n  declarations: [` ) ; } else if ( fileName === 'styles.scss' ) { filecontent = `${ filecontent }\nbody { padding: 10px; }` ; if ( options . type !== 'material' && options . includeMaterial ) { filecontent = `${ filecontent }\n@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; ` ; } } else if ( fileName === 'user.service.ts' ) { filecontent = filecontent . replace ( /_json/g , '.json' ) ; } if ( filecontent . includes ( 'NzExampleBaseComponent' ) ) { filecontent = filecontent . replace ( `extends NzExampleBaseComponent ` , '' ) ; filecontent = filecontent . replace ( `import { NzExampleBaseComponent } from '../common/base';` , '' ) ; } if ( fileName === 'app.component.ts' && filecontent . includes ( '* as' ) ) { const reg = /import\s+\*\s+as/g ; let matchRes = null ; while ( matchRes = reg . exec ( filecontent ) ) { filecontent = filecontent . replace ( reg , 'import' ) ; } } return filecontent ; } _appendCopyright ( filename , content ) { if ( filename . indexOf ( '.ts' ) > - 1 || filename . indexOf ( '.scss' ) > - 1 ) { content = `${ content }\n\n/**  ${ COPYRIGHT } */` ; } else if ( filename . indexOf ( '.html' ) > - 1 ) { content = `${ content }\n\n<!-- ${ COPYRIGHT } -->` ; } return content ; } }