feat: generatecode support import element style

packages/vue-generator/package.json

@@ -53,6 +53,7 @@
   },
   "peerDependencies": {
     "@babel/parser": "^7.18.13",
+    "@babel/generator": "^7.18.13",
     "@babel/traverse": "^7.18.13"
   }
 }

packages/vue-generator/src/generator/generateApp.js

@@ -9,7 +9,8 @@ import {
   genUtilsPlugin,
   formatCodePlugin,
   parseSchemaPlugin,
-  genGlobalState
+  genGlobalState,
+  appendElePlusStylePlugin
 } from '../plugins'
 import CodeGenerator from './codeGenerator'
 
@@ -63,6 +64,11 @@ export function generateApp(config = {}) {
     globalState: globalState || defaultPlugins.globalState
   }
 
+  // 默认支持 element-plus 注入样式
+  if (config?.customContext?.injectElementPlusStyle !== false) {
+    transformEnd.push(appendElePlusStylePlugin(config?.customContext?.injectElementPlusStyle || {}))
+  }
+
   const codeGenInstance = new CodeGenerator({
     plugins: {
       transformStart: [parseSchema || defaultPlugins.parseSchema, ...transformStart],

packages/vue-generator/src/plugins/appendElePlusStylePlugin.js

@@ -0,0 +1,79 @@
+import prettier from 'prettier'
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import generate from '@babel/generator'
+import parserBabel from 'prettier/parser-babel'
+import { mergeOptions } from '../utils/mergeOptions'
+
+const defaultOption = {
+  fileName: 'package.json',
+  path: '.',
+  prettierOption: {
+    singleQuote: true,
+    printWidth: 120,
+    semi: false,
+    trailingComma: 'none'
+  }
+}
+
+function genElementPlusStyleDeps(options = {}) {
+  const realOptions = mergeOptions(defaultOption, options)
+
+  const { prettierOption, fileName, path } = realOptions
+
+  return {
+    name: 'tinyEngine-generateCode-plugin-element-plus-style',
+    description: 'import element-plus style',
+    /**
+     * 注入 element-plus 全局样式依赖
+     * @param {tinyEngineDslVue.IAppSchema} schema
+     * @returns
+     */
+    run() {
+      const originPackageItem = this.getFile(path, fileName)
+
+      if (!originPackageItem) {
+        return
+      }
+
+      let originPackageJSON = JSON.parse(originPackageItem.fileContent)
+      const hasElementPlusDeps = Object.keys(originPackageJSON.dependencies).includes('element-plus')
+
+      if (!hasElementPlusDeps) {
+        return
+      }
+
+      const mainJsFile = this.getFile('./src', 'main.js') || {}
+
+      if (!mainJsFile.fileContent) {
+        return
+      }
+
+      const ast = parse(mainJsFile.fileContent, { sourceType: 'module' })
+      let lastImport = null
+
+      traverse(ast, {
+        ImportDeclaration(path) {
+          lastImport = path
+        }
+      })
+
+      // 引入 element-plus 样式依赖
+      if (lastImport) {
+        lastImport.insertAfter(parse("import 'element-plus/dist/index.css'", { sourceType: 'module' }).program.body[0])
+      }
+
+      const newFileContent = generate(ast).code
+
+      const formattedContent = prettier.format(newFileContent, {
+        parser: 'babel',
+        plugins: [parserBabel],
+        ...prettierOption
+      })
+
+      this.replaceFile({ ...mainJsFile, fileContent: formattedContent })
+    }
+  }
+}
+
+export default genElementPlusStyleDeps

packages/vue-generator/src/plugins/index.js

@@ -9,3 +9,4 @@ export { default as genTemplatePlugin } from './genTemplatePlugin'
 export { default as formatCodePlugin } from './formatCodePlugin'
 export { default as genGlobalState } from './genGlobalState'
 export { default as parseSchemaPlugin } from './parseSchemaPlugin'
+export { default as appendElePlusStylePlugin } from './appendElePlusStylePlugin'