refactor(core): made the codegen list shareable

apps/xlayers/src/app/editor/code/editor-container/editor-container.component.ts

@@ -7,17 +7,12 @@ import {
   CodeGen,
   CodeGenState,
 } from '../../../core/state/page.state';
+import { codeGenList, UICodeGen } from '@xlayers-apps/shared/codegen-list';
 
 const githubIssueLink =
   // tslint:disable-next-line:max-line-length
   'https://github.com/xlayers/xlayers/issues/new?assignees=&labels=Priority%3A+Low%2C+Scope%3A+CodeGen%2C+community-help%2C+effort2%3A+medium+%28days%29%2C+good+first+issue%2C+type%3A+discussion+%2F+RFC&template=codegen--add---technology---support.md&title=CodeGen%3A+add+%5B%5Btechnology%5D%5D+support';
 
-interface Framework {
-  label: string;
-  svgIcon: string;
-  codegen: CodeGenKind;
-}
-
 @Component({
   selector: 'xly-editor-container',
   templateUrl: './editor-container.component.html',
@@ -27,53 +22,17 @@ export class EditorContainerComponent implements OnInit {
   codeSetting: CodeGenSettings;
   @ViewChild('codeContentEditor') codeEditor: ElementRef;
 
-  public frameworks: Framework[] = [
-    {
-      label: 'Angular',
-      svgIcon: 'angular',
-      codegen: CodeGenKind.Angular,
-    },
-    {
-      label: 'Angular Element',
-      svgIcon: 'angularElement',
-      codegen: CodeGenKind.AngularElement,
-    },
-    {
-      label: 'Vue',
-      svgIcon: 'vue',
-      codegen: CodeGenKind.Vue,
-    },
-    {
-      label: 'React',
-      svgIcon: 'react',
-      codegen: CodeGenKind.React,
-    },
-    {
-      label: 'WebComponents',
-      svgIcon: 'wc',
-      codegen: CodeGenKind.WC,
-    },
-    {
-      label: 'Stencil',
-      svgIcon: 'stencil',
-      codegen: CodeGenKind.Stencil,
-    },
-    {
-      label: 'LitElement',
-      svgIcon: 'litElement',
-      codegen: CodeGenKind.LitElement,
-    },
-  ];
+  public frameworks: UICodeGen[] = codeGenList;
 
-  public selectedFramework: Framework = this.frameworks[0];
+  public selectedFramework: UICodeGen = codeGenList[0];
 
   constructor(private codegen: CodeGenService, private readonly store: Store) {}
 
   ngOnInit() {
     this.store.select(CodeGenState.codegen).subscribe((codegen) => {
       if (codegen.kind) {
         this.selectedFramework = this.frameworks.find(
-          (framework) => framework.codegen === codegen.kind
+          (framework) => framework.codegenType === codegen.kind
         );
       }
       this.codeSetting = this.codegen.generate(codegen.kind);
@@ -82,9 +41,9 @@ export class EditorContainerComponent implements OnInit {
 
   onChange(event: any) {
     const {
-      value: { codegen },
+      value: { codegenType },
     } = event;
-    this.codeSetting = this.codegen.generate(codegen);
+    this.codeSetting = this.codegen.generate(codegenType);
     this.updateState();
   }
 

apps/xlayers/src/home/landing/landing.component.html

@@ -23,7 +23,7 @@ <h2 class="choose_framework">
       <div
         *ngFor="let framework of frameworks"
         class="icon_wrapper"
-        (click)="selectFramework(framework.value)"
+        (click)="selectFramework(framework.codegenType)"
       >
         <mat-icon
           color="white"

apps/xlayers/src/home/landing/landing.component.ts

@@ -1,15 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
-import { SelectCodegenKind } from '../../app/core/state/page.state';
-import { CodeGenKind } from '../../app/editor/code/editor-container/codegen/codegen.service';
+import { SelectCodegenKind } from '@xlayers-apps/app/core/state/page.state';
+import { CodeGenKind } from '@xlayers-apps/app/editor/code/editor-container/codegen/codegen.service';
 import { environment } from '../../environments/environment';
-
-interface Framework {
-  value: string;
-  svgIcon: string;
-}
-
+import { codeGenList, UICodeGen } from '@xlayers-apps/shared/codegen-list';
 @Component({
   selector: 'xly-landing',
   templateUrl: './landing.component.html',
@@ -168,43 +163,15 @@ export class LandingComponent implements OnInit {
     },
   ];
 
-  public frameworks: Framework[] = [
-    {
-      value: 'Angular',
-      svgIcon: 'angular',
-    },
-    {
-      value: 'AngularElement',
-      svgIcon: 'angularElement',
-    },
-    {
-      value: 'Vue',
-      svgIcon: 'vue',
-    },
-    {
-      value: 'React',
-      svgIcon: 'react',
-    },
-    {
-      value: 'WC',
-      svgIcon: 'wc',
-    },
-    {
-      value: 'Stencil',
-      svgIcon: 'stencil',
-    },
-    {
-      value: 'LitElement',
-      svgIcon: 'litElement',
-    },
-  ];
+  public frameworks: UICodeGen[] = codeGenList;
 
   constructor(private router: Router, private readonly store: Store) {}
 
   ngOnInit() {}
 
-  selectFramework(framework: string) {
-    this.store.dispatch(new SelectCodegenKind(CodeGenKind[framework]));
+  selectFramework(framework: CodeGenKind) {
+    console.log(framework);
+    this.store.dispatch(new SelectCodegenKind(framework));
     this.router.navigateByUrl('/upload');
   }
 }

apps/xlayers/src/shared/codegen-list.ts

@@ -0,0 +1,45 @@
+import { CodeGenKind } from '@xlayers-apps/app/editor/code/editor-container/codegen/codegen.service';
+
+export interface UICodeGen {
+  label: string;
+  svgIcon: string;
+  codegenType: CodeGenKind;
+}
+
+export const codeGenList: UICodeGen[] = [
+  {
+    label: 'Angular',
+    svgIcon: 'angular',
+    codegenType: CodeGenKind.Angular,
+  },
+  {
+    label: 'Angular Element',
+    svgIcon: 'angularElement',
+    codegenType: CodeGenKind.AngularElement,
+  },
+  {
+    label: 'Vue',
+    svgIcon: 'vue',
+    codegenType: CodeGenKind.Vue,
+  },
+  {
+    label: 'React',
+    svgIcon: 'react',
+    codegenType: CodeGenKind.React,
+  },
+  {
+    label: 'WebComponents',
+    svgIcon: 'wc',
+    codegenType: CodeGenKind.WC,
+  },
+  {
+    label: 'Stencil',
+    svgIcon: 'stencil',
+    codegenType: CodeGenKind.Stencil,
+  },
+  {
+    label: 'LitElement',
+    svgIcon: 'litElement',
+    codegenType: CodeGenKind.LitElement,
+  },
+];

tsconfig.base.json

@@ -33,7 +33,8 @@
       "@xlayers/sketch-ingestor": ["libs/sketch-ingestor/src/index.ts"],
       "@xlayers/sketchapps": ["libs/sketchapps/src/index.ts"],
       "@xlayers/sketchtypes": ["libs/sketchtypes/src/index.ts"],
-      "@xlayers/test-helpers": ["libs/test-helpers/src/index.ts"]
+      "@xlayers/test-helpers": ["libs/test-helpers/src/index.ts"],
+      "@xlayers-apps/*": ["apps/xlayers/src/*"]
     }
   },
   "exclude": ["node_modules", "tmp"],