refactor: improve the stackblitz export impl

src/app/editor/editor.component.ts

@@ -2,23 +2,13 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatExpansionPanel } from '@angular/material/expansion';
 import { MatDrawerContainer } from '@angular/material/sidenav';
 import { Store } from '@ngxs/store';
-import {
-  CurrentLayer,
-  CurrentPage,
-  UiState,
-  ZoomIn,
-  ZoomOut,
-  Toggle3D,
-  ToggleWireframe,
-  ToggleCodeEditor,
-  ResetUiSettings
-} from 'src/app/core/state';
 import * as FileSaver from 'file-saver';
-import { SketchContainerComponent } from './viewer/lib/sketch-container.component';
+import { CurrentLayer, CurrentPage, ResetUiSettings, Toggle3D, ToggleCodeEditor, ToggleWireframe, UiState, ZoomIn, ZoomOut } from 'src/app/core/state';
 import { environment } from '../../environments/environment';
-import { ExportStackblitzService } from './exports/stackblitz.service';
 import { PageState } from '../core/state/page.state';
 import { XlayersNgxEditorModel } from './code-editor/editor-container/codegen/codegen.service';
+import { ExportStackblitzService } from './exports/stackblitz.service';
+import { SketchContainerComponent } from './viewer/lib/sketch-container.component';
 
 @Component({
   selector: 'sketch-editor',

src/app/editor/exports/stackblitz.angular.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { XlayersNgxEditorModel } from '../code-editor/editor-container/codegen/codegen.service';
+import { StackBlitzProjectPayload } from './stackblitz.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExportStackblitzAngularService {
+  constructor() {}
+  prepare(content: XlayersNgxEditorModel[]): StackBlitzProjectPayload {
+    const files = {};
+    for (let i = 0; i < content.length; i++) {
+      for (const prop in content[i]) {
+        if (prop === 'uri') {
+          files[`src/app/xlayers/` + content[i].uri] = content[i].value;
+        }
+      }
+    }
+
+    files['src/app/app.component.ts'] = `
+import { Component } from '@angular/core';
+@Component({
+  selector: 'my-app',
+  template: '<app-xlayers></app-xlayers>',
+})
+export class AppComponent  {}
+    `;
+    files['src/app/app.module.ts'] = `
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { XlayersModule } from './xlayers/xlayers.module';
+@NgModule({
+  imports:      [ BrowserModule, XlayersModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+    `;
+    files['src/main.ts'] = `
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+platformBrowserDynamic().bootstrapModule(AppModule)
+    `;
+    files['src/index.html'] = '<my-app>loading</my-app>';
+
+    return {
+      files,
+      title: 'xlayers',
+      description: 'xLayers generated project',
+      template: 'angular-cli',
+      tags: ['angular', 'xlayers'],
+      dependencies: {}
+    };
+  }
+}

src/app/editor/exports/stackblitz.service.ts

@@ -1,65 +1,34 @@
 import { Injectable } from '@angular/core';
-import { XlayersNgxEditorModel } from '../code-editor/editor-container/codegen/codegen.service';
 import sdk from '@stackblitz/sdk';
+import { XlayersNgxEditorModel } from '../code-editor/editor-container/codegen/codegen.service';
+import { ExportStackblitzAngularService } from './stackblitz.angular.service';
+
+export interface StackBlitzProjectPayload {
+  files: { [path: string]: string };
+  title: string;
+  description: string;
+  template: 'angular-cli' | 'create-react-app' | 'typescript' | 'javascript';
+  tags?: string[];
+  dependencies?: { [name: string]: string };
+  settings?: {
+    compile?: {
+      trigger?: 'auto' | 'keystroke' | 'save';
+      action?: 'hmr' | 'refresh';
+      clearConsole?: boolean;
+    };
+  };
+}
 
 @Injectable({
   providedIn: 'root'
 })
 export class ExportStackblitzService {
-
-  constructor() { }
+  constructor(private angularExport: ExportStackblitzAngularService) {}
 
   async export(content: Array<XlayersNgxEditorModel>) {
-
-    const files = {};
-    for (let i = 0; i < content.length; i++) {
-      for (let prop in content[i]) {
-        if (prop === 'uri') {
-          files[`src/app/xlayers/`+content[i].uri] = content[i].value;
-        }
-      }
-    }
-
-    files['src/app/app.component.ts'] = `
-import { Component } from '@angular/core';
-@Component({
-  selector: 'my-app',
-  template: '<app-xlayers></app-xlayers>',
-})
-export class AppComponent  {}
-    `;
-    files['src/app/app.module.ts'] = `
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import { XlayersModule } from './xlayers/xlayers.module';
-@NgModule({
-  imports:      [ BrowserModule, XlayersModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-    `;
-    files['src/main.ts'] = `
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-platformBrowserDynamic().bootstrapModule(AppModule)
-    `;
-    files['src/index.html'] = '<my-app>loading</my-app>';
-
-    const project = {
-      files,
-      title: 'xlayers',
-      description: 'xLayers generated project',
-      template: 'angular-cli',
-      tags: ['angular', 'xlayers'],
-      dependencies: {}
-    };
-
-
+    const project: StackBlitzProjectPayload = this.angularExport.prepare(
+      content
+    );
     sdk.openProject(project);
   }
 }

tslint.json

@@ -35,7 +35,7 @@
     "label-position": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-access": false,
     "member-ordering": [