fix: change stackblitz services so that it will work with new generat…

…ors (#336) * fix: change stackblitz services so that it will work with new generators * fix: small change to package and util * fix: change stackblitz services so that it will work with new generators * fix: duplicate angular router * fix: missing data * chore: remove makefile * fix: reorder angular generation code * fix(codegen): resolve incorrect routing path
xlayers · Nov 21, 2019 · 3996fb2 · 3996fb2
1 parent bacbecf
commit 3996fb2
Show file tree

Hide file tree

Showing 15 changed files with 195 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,6 @@
     "jszip": "^3.1.5",
     "ngx-color": "^2.0.5",
     "ngx-highlightjs": "^3.0.1",
-    "ora": "^4.0.2",
     "param-case": "^2.1.1",
     "pascal-case": "^2.0.1",
     "rxjs": "^6.4.0",
@@ -81,6 +80,7 @@
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
+    "ora": "^4.0.2",
     "@angular-devkit/build-angular": "~0.803.12",
     "@angular-devkit/build-ng-packagr": "^0.803.12",
     "@angular/cli": "~8.3.12",

diff --git a/projects/angular-codegen/src/lib/angular-bootstrap.service.ts b/projects/angular-codegen/src/lib/angular-bootstrap.service.ts
@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { FormatService } from '@xlayers/sketch-lib';
+
+type WebCodeGenOptions = any;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AngularBootstrapService {
+  constructor(private readonly formatService: FormatService) {}
+
+  generate(files) {
+    return [
+      {
+        uri: 'xlayers-routing.module.ts',
+        value: this.renderRoutingModule(),
+        language: 'typescript',
+        kind: 'angular'
+      },
+      {
+        uri: 'xlayers.module.ts',
+        value: this.renderModule(files),
+        language: 'typescript',
+        kind: 'angular'
+      }
+    ];
+  }
+
+  private renderRoutingModule() {
+    return `\
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router';
+
+const xlayersRoutes: Routes = [{
+  path: 'xlayers',\
+  loadChildren: 'app/xlayers/xlayers.module#XlayersModule'
+}];
+
+@NgModule({
+  imports: [ RouterModule.forChild(xlayersRoutes) ],
+  exports: [ RouterModule ]
+})
+export class XlayersRoutingModule {}`;
+  }
+
+  private renderModule(files) {
+    const importStatements = this.renderImports(files);
+    const ngStatements = this.renderNgClasses(files);
+    return `\
+${importStatements}
+
+@NgModule({
+  declarations: [
+${ngStatements}
+  ],
+  exports: [
+${ngStatements}
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class XlayersModule {}`;
+  }
+
+  private renderImports(files) {
+    return [
+      'import { NgModule } from \'@angular/core\';',
+      'import { CommonModule } from \'@angular/common\';'
+    ]
+      .concat(
+        files
+          .filter(file => file.uri.endsWith('.component.ts'))
+          .map(
+            file =>
+              `import { ${this.extractClassName(
+                file
+              )} } from './${this.extractCompenentFileName(file)}';`
+          )
+      )
+      .join('\n');
+  }
+
+  private renderNgClasses(files) {
+    return files
+      .filter(file => file.uri.endsWith('.component.ts'))
+      .map(file => this.formatService.indent(2, this.extractClassName(file)))
+      .join(',\n');
+  }
+
+  private extractClassName(file) {
+    const uri = file.uri.split('/');
+    const fileName = uri[uri.length - 1].replace('.component.ts', '');
+    return this.formatService.className(`${fileName}Component`);
+  }
+
+  private extractCompenentFileName(file) {
+    return file.uri.split('.ts')[0];
+  }
+}
diff --git a/projects/angular-codegen/src/public_api.ts b/projects/angular-codegen/src/public_api.ts
@@ -5,5 +5,6 @@
 export * from './lib/element/angular-element-codegen.service';
 export * from './lib/element/angular-element-codegen.module';
 export * from './lib/angular-docgen.service';
+export * from './lib/angular-bootstrap.service';
 export * from './lib/angular-codegen.service';
 export * from './lib/angular-codegen.module';
diff --git a/projects/lit-element-codegen/src/lib/lit-element-aggregator.service.ts b/projects/lit-element-codegen/src/lib/lit-element-aggregator.service.ts
@@ -55,8 +55,11 @@ class ${className} extends LitElement {
 ${this.formatService.indentFile(3, css).join('\n')}
     \`
   }
+  constructor(){
+    super();
+  }
 
-  aggregate() {
+  render() {
     return html\`
 ${this.formatService.indentFile(3, html).join('\n')}
     \`

diff --git a/projects/react-codegen/src/lib/react-aggregator.service.ts b/projects/react-codegen/src/lib/react-aggregator.service.ts
@@ -50,9 +50,15 @@ export class ReactAggregatorService {
     return `\
 ${importStatements}
 
-export const ${className} = () => (
-${this.formatService.indentFile(1, html).join('\n')}
-);`;
+class ${className} extends Component {
+  render() {
+    return (
+      ${this.formatService.indentFile(1, html).join('\n')}
+    );
+  }
+}
+
+export default ${className};`;
   }
 
   private renderSpec(current: SketchMSLayer) {
@@ -72,7 +78,7 @@ it('renders without crashing', () => {
   private renderImportStatements(current: SketchMSLayer) {
     const fileName = this.formatService.normalizeName(current.name);
     return [
-      'import React from \'react\';',
+      'import React, { Component } from \'react\';',
       ...this.generateDynamicImport(current),
       `import \'./${fileName}.css\';`
     ].join('\n');
@@ -82,10 +88,10 @@ it('renders without crashing', () => {
     const context = this.webCodeGenService.context(current);
     return context && context.components
       ? context.components.map(component => {
-          const importclassName = this.formatService.className(component);
-          const importFileName = this.formatService.normalizeName(component);
-          return `import { ${importclassName} } from "./${importFileName}";`;
-        })
+        const importclassName = this.formatService.className(component);
+        const importFileName = this.formatService.normalizeName(component);
+        return `import { ${importclassName} } from "./${importFileName}";`;
+      })
       : [];
   }
 }
diff --git a/projects/stencil-codegen/src/lib/stencil-aggregator.service.ts b/projects/stencil-codegen/src/lib/stencil-aggregator.service.ts
@@ -62,7 +62,7 @@ ${importStatements}
   shadow: true
 })
 export class ${className}Component {
-  aggregate() {
+  render() {
     return (
 ${this.formatService.indentFile(3, html).join('\n')}
     );

diff --git a/projects/web-component-codegen/src/lib/web-component-aggregator.service.ts b/projects/web-component-codegen/src/lib/web-component-aggregator.service.ts
@@ -36,18 +36,46 @@ export class WebComponentAggregatorService {
     const className = this.formatService.className(name);
     const tagName = this.formatService.normalizeName(name);
     return `\
-class ${className} extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = \`
-      <style>
-${this.formatService.indentFile(3, css).join('\n')}
-      </style>
-
-${this.formatService.indentFile(3, html).join('\n')}
-    \`
-  }
-}
+    const template = document.createElement('template');
+    template.innerHTML = \`
+    <style>
+    ${this.formatService.indentFile(3, css).join('\n')}
+    </style>
+
+    ${this.formatService.indentFile(3, html).join('\n')}
+    \`;
+
+    class ${className} extends HTMLElement {
+      static is = 'xly-page1';
+
+      static get observedAttributes() {
+        return [];
+      }
+
+      constructor() {
+        super();
+        const shadowDOM = this.attachShadow({ mode: 'open' });
+        shadowDOM.appendChild(template.content.cloneNode(true));
+      }
+
+      connectedCallback(){
+        console.log("${className} custom element is first connected to the document's DOM.");
+      }
+
+      disconnectedCallback() {
+        console.log("${className} custom element is disconnected from the document's DOM.");
+      }
+
+      adoptedCallback() {
+        console.log("${className} custom element is moved to a new document.");
+      }
+
+      attributeChangedCallback(name, oldValue, newValue) {
+        console.log("${className} custom element attributes changed.");
+      }
+
+    }
 
-customElements.define('${tagName}', ${className});`;
+    customElements.define(${className}.is , ${className});`;
   }
 }
diff --git a/scripts/utils.ts b/scripts/utils.ts
@@ -14,7 +14,7 @@ export async function runTask(name: string, taskFn: () => Promise<any>) {
 
         spinner.succeed();
     } catch (e) {
-        spinner.fail();
+        spinner.stop();
 
         throw e;
     }

diff --git a/src/app/editor/code/exports/stackblitz/stackblitz.angular.service.ts b/src/app/editor/code/exports/stackblitz/stackblitz.angular.service.ts
@@ -24,7 +24,7 @@ export class ExportStackblitzAngularService {
 import { Component } from '@angular/core';
 @Component({
   selector: 'my-app',
-  template: \`<!–– my-component ––>\`,
+  template: \`<xly-page-1></xly-page-1>\`,
 })
 export class AppComponent  {}`;
     files['src/app/app.module.ts'] = `\

diff --git a/src/app/editor/code/exports/stackblitz/stackblitz.lit-element.service.spec.ts b/src/app/editor/code/exports/stackblitz/stackblitz.lit-element.service.spec.ts
@@ -32,7 +32,7 @@ describe('StackBlitz Lit Element', () => {
   });
 
   it('should have default index.js', () => {
-    expect(files['index.js']).toBe(`// import './components/my-element.js';`);
+    expect(files['index.js']).toBe(`import './components/page-1.js';`);
   });
 
   it('should have web component and lit-element tag', () => {

diff --git a/src/app/editor/code/exports/stackblitz/stackblitz.lit-element.service.ts b/src/app/editor/code/exports/stackblitz/stackblitz.lit-element.service.ts
@@ -15,7 +15,7 @@ export class ExportStackblitzLitElementService {
         }
       }
     }
-    files['index.js'] = `// import './components/my-element.js';`;
+    files['index.js'] = `import './components/page-1.js';`;
     // add extra files
     files['index.html'] = `\
 <!DOCTYPE html>
@@ -28,7 +28,7 @@ export class ExportStackblitzLitElementService {
     <title>xLayers Custom Element using : LitElement</title>
   </head>
   <body>
-    // <my-element></my-element>
+    <xly-page-1></xly-page-1>
   </body>
   <script src="./index.js"></script>
 </html>`;