feat(codegen): add Vue3 code generator with Typescript

angular.json

@@ -409,6 +409,45 @@
       },
       "schematics": {}
     },
+    "vue3-codegen": {
+      "projectType": "library",
+      "root": "libs/vue3-codegen",
+      "sourceRoot": "libs/vue3-codegen/src",
+      "prefix": "xlayers",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "options": {
+            "tsConfig": "libs/vue3-codegen/tsconfig.lib.json",
+            "project": "libs/vue3-codegen/ng-package.json",
+            "buildableProjectDepsInPackageJsonType": "dependencies"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/vue3-codegen/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/vue3-codegen/**/*.ts",
+              "libs/vue3-codegen/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/vue3-codegen/jest.config.js",
+            "passWithNoTests": true
+          },
+          "outputs": ["coverage/libs/vue3-codegen"]
+        }
+      },
+      "schematics": {}
+    },
     "web-codegen": {
       "projectType": "library",
       "root": "libs/web-codegen",

apps/xlayers/src/app/editor/code/editor-container/codegen/codegen.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { AngularCodeGenFacadeService } from './angular-codegen.service';
 import { ReactCodeGenFacadeService } from './react-codegen.service';
 import { VueCodeGenFacadeService } from './vue-codegen.service';
+import { Vue3CodeGenFacadeService } from './vue3-codegen.service';
 import { WebComponentCodeGenFacadeService } from './web-component-codegen.service';
 import { StencilCodeGenFacadeService } from './stencil-codegen.service';
 import { LitElementCodeGenFacadeService } from './lit-element-codegen.service';
@@ -48,6 +49,7 @@ export enum CodeGenKind {
   AngularElement,
   React,
   Vue,
+  Vue3,
   WC,
   Stencil,
   LitElement,
@@ -66,6 +68,7 @@ export class CodeGenService {
     private readonly angularElement: AngularElementCodeGenFacadeService,
     private readonly react: ReactCodeGenFacadeService,
     private readonly vue: VueCodeGenFacadeService,
+    private readonly vue3: Vue3CodeGenFacadeService,
     private readonly wc: WebComponentCodeGenFacadeService,
     private readonly stencil: StencilCodeGenFacadeService,
     private readonly litElement: LitElementCodeGenFacadeService,
@@ -173,6 +176,14 @@ export class CodeGenService {
           buttons: this.vue.buttons(),
         };
 
+      case CodeGenKind.Vue3:
+        this.trackFrameworkKind(CodeGenKind.Vue3);
+        return {
+          kind,
+          content: this.addHeaderInfo(this.vue3.generate(this.data)),
+          buttons: this.vue3.buttons(),
+        };
+
       case CodeGenKind.WC:
         this.trackFrameworkKind(CodeGenKind.WC);
         return {

apps/xlayers/src/app/editor/code/editor-container/codegen/vue3-codegen.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Vue3CodeGenService, Vue3DocGenService } from '@xlayers/vue3-codegen';
+import { XlayersNgxEditorModel } from './codegen.service';
+import { SketchMSData } from '@xlayers/sketchtypes';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Vue3CodeGenFacadeService {
+  constructor(
+    private readonly vue3CodeGen: Vue3CodeGenService,
+    private readonly vue3DocGen: Vue3DocGenService
+  ) {}
+
+  buttons() {
+    return {};
+  }
+
+  generate(data: SketchMSData) {
+    return this.vue3DocGen
+      .aggregate(data)
+      .concat(this.vue3CodeGen.aggregate(data)) as XlayersNgxEditorModel[];
+  }
+}

apps/xlayers/src/app/editor/code/exports/stackblitz/stackblitz.vue3.service.spec.ts

@@ -0,0 +1,48 @@
+import { ExportStackblitzVueService } from './stackblitz.vue.service';
+import { XlayersNgxEditorModel } from '../../editor-container/codegen/codegen.service';
+
+describe('StackBlitz vue', () => {
+  let service: ExportStackblitzVueService;
+  let files, template, tags;
+  const model: XlayersNgxEditorModel = {
+    kind: 'vue',
+    uri: 'uri',
+    value: 'string',
+    language: 'vue',
+  };
+  beforeEach(() => {
+    service = new ExportStackblitzVueService();
+    const result = service.prepare([model]);
+    files = result.files;
+    tags = result.tags;
+    template = result.template;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should contain 7 files', () => {
+    expect(Object.keys(files).length).toBe(5);
+  });
+
+  it('should have default file', () => {
+    expect(files['index.js']).toBeTruthy();
+  });
+
+  it('should contain uri files', () => {
+    expect(files['src/app/xlayers/uri']).toBe('string');
+  });
+
+  it('should have default index.html', () => {
+    expect(files['index.html']).toBeTruthy();
+  });
+
+  it('should have vue tag', () => {
+    expect(tags).toEqual(['vuejs']);
+  });
+
+  it('should have javascript template', () => {
+    expect(template).toBe('javascript');
+  });
+});

apps/xlayers/src/app/editor/code/exports/stackblitz/stackblitz.vue3.service.ts

@@ -0,0 +1,112 @@
+import { Injectable } from '@angular/core';
+import { StackBlitzProjectPayload } from './stackblitz.service';
+import { XlayersNgxEditorModel } from '../../editor-container/codegen/codegen.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ExportStackblitzVueService {
+  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;
+        }
+      }
+    }
+
+    // add extra files
+    files['index.ts'] = `\
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+`;
+
+    files['index.html'] = `\
+<div id="app"></div>`;
+
+    files['src/App.vue'] = `\
+<template>
+  <my-component />
+</template>
+
+<script>
+// import MyComponent from './xlayers/my-component.vue'
+
+export default defineComponent({
+  name: 'app',
+  components: {
+    // MyComponent
+  }
+})
+</script>`;
+
+    files['babel.config.js'] = `\
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}`;
+
+    files['tsconfig.json'] = `\
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
+`;
+
+    files['tsconfig.json'] = `\
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+`;
+
+    return {
+      files,
+      template: 'javascript',
+      dependencies: {
+        ['vue']: '^3.0.0',
+      },
+      tags: ['vuejs'],
+    };
+  }
+}

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     '<rootDir>/libs/stencil-codegen',
     '<rootDir>/libs/svg-codegen',
     '<rootDir>/libs/vue-codegen',
+    '<rootDir>/libs/vue3-codegen',
     '<rootDir>/libs/web-codegen',
     '<rootDir>/libs/web-component-codegen',
     '<rootDir>/libs/xaml-codegen',

libs/vue3-codegen/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "libs/vue3-codegen/tsconfig.lib.json",
+          "libs/vue3-codegen/tsconfig.lib.prod.json",
+          "libs/vue3-codegen/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

libs/vue3-codegen/README.md

@@ -0,0 +1,7 @@
+# vue3-codegen
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test vue3-codegen` to execute the unit tests.

libs/vue3-codegen/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  preset: '../../jest.preset.js',
+  coverageDirectory: '../../coverage/libs/vue3-codegen',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  displayName: 'vue3-codegen',
+};

libs/vue3-codegen/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/vue3-codegen",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/vue3-codegen/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@xlayers/vue3-codegen",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^9.1.11",
+    "@angular/core": "^9.1.11"
+  },
+  "dependencies": {
+    "tslib": "^1.10.0"
+  }
+}

libs/vue3-codegen/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/vue3-docgen.service';
+export * from './lib/vue3-codegen.service';
+export * from './lib/vue3-codegen.module';