feat: generatecode support import element style #770
Conversation
WalkthroughThe changes include the addition of a new peer dependency, Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- packages/vue-generator/package.json (1 hunks)
- packages/vue-generator/src/generator/generateApp.js (2 hunks)
- packages/vue-generator/src/plugins/appendElePlusStylePlugin.js (1 hunks)
- packages/vue-generator/src/plugins/index.js (1 hunks)
Additional comments not posted (3)
packages/vue-generator/src/plugins/index.js (1)
12-12: Export ofappendElePlusStylePluginlooks good.The new export statement is correctly added and follows the existing pattern of module exports in this file.
packages/vue-generator/package.json (1)
56-56: Addition of@babel/generatorto peer dependencies is appropriate.The specified version aligns with the existing Babel dependencies, ensuring compatibility. It is crucial to verify that all peer dependencies are compatible with each other to avoid potential conflicts.
Verification successful
Addition of
@babel/generatorto peer dependencies is compatible.The Babel-related dependencies in
packages/vue-generator/package.jsonare all aligned to version7.18.13, indicating compatibility. The addition of@babel/generatoras a peer dependency is appropriate.
@babel/parser:^7.18.13@babel/generator:^7.18.13@babel/traverse:^7.18.13Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify compatibility of peer dependencies. # Test: Check for known issues with Babel dependencies. Expect: No conflicts reported. npm info "@babel/generator@^7.18.13" peerDependenciesLength of output: 126
Script:
#!/bin/bash # Description: List all Babel-related dependencies in package.json for manual verification. # Extract Babel-related dependencies from package.json jq '.dependencies + .devDependencies + .peerDependencies | to_entries[] | select(.key | test("^@babel/"))' packages/vue-generator/package.jsonLength of output: 305
packages/vue-generator/src/generator/generateApp.js (1)
12-13: Review import of new pluginappendElePlusStylePlugin.The import of
appendElePlusStylePluginis correctly placed among other plugin imports, maintaining a clean and organized structure. This ensures that the new plugin is available for use within thegenerateAppfunction.The import statement is correctly implemented.
| 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 'elemetn-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 }) | ||
| } |
There was a problem hiding this comment.
Overall structure and logic of genElementPlusStyleDeps function are sound.
The function is well-structured and logically sound for injecting Element Plus styles based on the presence of the dependency. Ensure thorough testing to confirm the functionality works as expected in various scenarios.
Would you like assistance in setting up or executing the tests?
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/vue-generator/src/plugins/appendElePlusStylePlugin.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/vue-generator/src/plugins/appendElePlusStylePlugin.js
| } | ||
| } | ||
|
|
||
| function genElementPlusStyleDeps(options = {}) { |
| @@ -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' | |||
There was a problem hiding this comment.
是否只能适用于element plus呢，有没有可能做成通用的？
github-actions
bot
added
enhancement
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
出码包含 element-plus 时，没有引入样式。
Issue Number: close #762
What is the new behavior?
增加出码插件，检测到
package.json中含有element-plus插件的时候，往 main.js 中增加 import 语句：import 'element-plus/dist/index.css'Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
vue-generatorpackage.Bug Fixes
Documentation