feat: auto import css plugin #2613
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2613 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17867 17867
Branches 2676 2676
=======================================
Hits 15005 15005
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
oasis-cloud
force-pushed
the
feat/taro-plugin
branch
from
a2de117
to
a351e20
Compare
Walkthrough此次更改涉及多个文件的新增和配置更新，主要集中在 Changes
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 using PR comments)
Other keywords and placeholders
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: 12
🧹 Outside diff range and nitpick comments (9)
packages/nutui-auto-import/src/rollup.ts (1)
3-3: 默认导出看起来不错，但可以考虑增加一些注释默认导出使用类型断言确保了类型安全，这是一个很好的做法。为了提高代码的可读性和可维护性，您可以考虑添加一个简短的注释来解释这个导出的用途。
建议添加注释：
+ // 导出 NutUIAutoImport 的 rollup 方法作为默认导出 export default NutUIAutoImport.rollup as typeof NutUIAutoImport.rolluppackages/nutui-auto-import/tests/fixtures/basic.jsx (1)
1-1: 移除未使用的导入当前代码中导入了
Button组件，但在文件中并未使用。建议移除未使用的导入以优化代码。建议应用以下更改：
-import { Button, Cell } from '@nutui/nutui-react' +import { Cell } from '@nutui/nutui-react'packages/nutui-auto-import/tsup.config.ts (1)
1-11: 配置文件看起来结构良好，但可以考虑一些改进这个 tsup 配置文件整体结构清晰，涵盖了主要的构建选项。以下是一些观察和建议：
- 入口点配置使用了通配符，这可能会包含不需要的文件。考虑明确指定入口文件。
- 目标环境设置为 Node.js 18.12，确保这与项目的最低支持版本一致。
- 没有看到
minify选项，如果需要最小化输出，可以添加此选项。- 可以考虑添加
sourcemap选项，以便于调试。建议考虑以下改进：
import { defineConfig } from 'tsup' export default defineConfig({ - entry: ['./src/*.ts'], + entry: ['./src/index.ts'], // 或其他明确的入口文件 format: ['cjs', 'esm'], target: 'node18.12', splitting: true, cjsInterop: true, clean: true, dts: true, + minify: true, + sourcemap: true, })这些更改将使配置更加明确和全面。
packages/nutui-auto-import/tests/rollup.test.ts (3)
1-5: 导入看起来很好，但建议添加注释说明 @sxzz/test-utils 的用途。导入的模块适合设置 Rollup 测试环境。使用
node:path确保了与较新版本 Node.js 的兼容性。然而，@sxzz/test-utils不是一个广泛使用的库。建议添加一个简短的注释，解释为什么选择使用
@sxzz/test-utils，以及它在这个测试套件中的具体作用。这将有助于其他开发者理解代码的意图和依赖关系。
7-9: 测试套件结构良好，但可以添加更多注释以提高可读性。测试套件的结构使用了 Vitest 的
describe函数和异步函数，这对于处理异步测试是正确的。testFixtures函数的使用看起来也是正确的。建议添加以下改进：
- 为
testFixtures函数添加注释，解释其功能和参数的作用。- 解释为什么使用
import.meta.dirname而不是__dirname。- 考虑添加一个简短的注释，说明这个测试套件的整体目的。
这些添加将有助于其他开发者更快地理解测试的结构和目的。
Also applies to: 22-24
10-21: Rollup 构建配置看起来不错，但可以考虑一些改进。Rollup 构建配置适合测试 NutUIAutoImport 插件。使用
snapshot进行输出比较是一个好方法。考虑以下建议来改进代码：
- 将 NutUIAutoImport 的配置选项提取为一个常量对象，这样可以在多个测试中重用。
const nutUIAutoImportOptions = { libraryName: '@nutui/nutui-react', style: 'css', taro: false, }; // 然后在测试中使用 NutUIAutoImport(nutUIAutoImportOptions),
添加注释解释为什么
taro选项被设置为false。考虑添加更多的测试用例，覆盖不同的 NutUIAutoImport 配置选项。
这些改进将增加代码的可维护性和测试覆盖率。
packages/nutui-auto-import/package.json (1)
79-88: 脚本配置全面，建议添加文档生成脚本scripts 字段包含了开发所需的所有常见任务，如 lint、build、test 等。使用 bumpp 进行版本管理是个好做法。prepublishOnly 脚本确保了发布前会重新构建包，这很重要。
建议：考虑添加一个生成文档的脚本，例如：
"docs": "typedoc --out docs src"这将有助于保持文档的最新状态。
packages/nutui-auto-import/src/core/options.ts (1)
3-9: 建议为Options接口添加注释为了提高代码的可读性和可维护性，建议为
Options接口的每个属性添加 JSDoc 注释，帮助其他开发者理解各个选项的作用。packages/nutui-auto-import/src/index.ts (1)
36-54: 未使用的变量components在第 36 行声明了变量
components，但在后续代码中未使用。建议删除未使用的变量，以保持代码简洁。可以删除未使用的变量：
- const components = []
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
packages/nutui-auto-import/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpackages/nutui-auto-import/tests/__snapshots__/rollup.test.ts.snapis excluded by!**/*.snappnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (22)
- packages/nutui-auto-import/.editorconfig (1 hunks)
- packages/nutui-auto-import/.gitattributes (1 hunks)
- packages/nutui-auto-import/.gitignore (1 hunks)
- packages/nutui-auto-import/LICENSE (1 hunks)
- packages/nutui-auto-import/README.md (1 hunks)
- packages/nutui-auto-import/babel.config.json (1 hunks)
- packages/nutui-auto-import/package.json (1 hunks)
- packages/nutui-auto-import/src/api.ts (1 hunks)
- packages/nutui-auto-import/src/core/options.ts (1 hunks)
- packages/nutui-auto-import/src/esbuild.ts (1 hunks)
- packages/nutui-auto-import/src/index.ts (1 hunks)
- packages/nutui-auto-import/src/rolldown.ts (1 hunks)
- packages/nutui-auto-import/src/rollup.ts (1 hunks)
- packages/nutui-auto-import/src/rspack.ts (1 hunks)
- packages/nutui-auto-import/src/vite.ts (1 hunks)
- packages/nutui-auto-import/src/webpack.ts (1 hunks)
- packages/nutui-auto-import/tests/fixtures/basic.jsx (1 hunks)
- packages/nutui-auto-import/tests/rollup.test.ts (1 hunks)
- packages/nutui-auto-import/tsconfig.json (1 hunks)
- packages/nutui-auto-import/tsup.config.ts (1 hunks)
- packages/nutui-auto-import/vitest.config.ts (1 hunks)
- pnpm-workspace.yaml (1 hunks)
✅ Files skipped from review due to trivial changes (14)
- packages/nutui-auto-import/.editorconfig
- packages/nutui-auto-import/.gitattributes
- packages/nutui-auto-import/.gitignore
- packages/nutui-auto-import/LICENSE
- packages/nutui-auto-import/README.md
- packages/nutui-auto-import/babel.config.json
- packages/nutui-auto-import/src/api.ts
- packages/nutui-auto-import/src/esbuild.ts
- packages/nutui-auto-import/src/rolldown.ts
- packages/nutui-auto-import/src/rspack.ts
- packages/nutui-auto-import/src/vite.ts
- packages/nutui-auto-import/src/webpack.ts
- packages/nutui-auto-import/tsconfig.json
- packages/nutui-auto-import/vitest.config.ts
🧰 Additional context used
🪛 yamllint
pnpm-workspace.yaml
[error] 4-4: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (6)
packages/nutui-auto-import/src/rollup.ts (1)
1-1: 导入语句看起来不错！导入语句简洁明了，符合最佳实践。
packages/nutui-auto-import/package.json (4)
27-29: 主入口点配置正确main、module 和 types 字段的配置正确，支持 CommonJS 和 ES 模块，并提供了 TypeScript 类型定义。这是现代 JavaScript 包的良好实践。
30-75: 导出配置全面且灵活exports 字段的配置非常全面，为不同的构建系统（如 Vite、Webpack、Rollup 等）提供了专门的入口点。同时支持 CommonJS 和 ES 模块格式，这种配置方式非常灵活，能够满足各种项目的需求。catch-all 导出确保了所有文件都可以被访问。这是一个优秀的配置示例。
76-78: 发布配置正确publishConfig 设置为 public access 是正确的，这确保了包可以作为公共 npm 包发布。
115-117: Node.js 版本要求合理将最低 Node.js 版本要求设置为 18.12.0 是合理的。这个版本是一个较新的 LTS 版本，可以确保访问现代 JavaScript 特性和improved性能。这个选择在保持兼容性和利用新特性之间取得了很好的平衡。
packages/nutui-auto-import/src/index.ts (1)
32-34: 确认this.parse方法的可用性在第 34 行，使用了
this.parse(code)方法，并添加了// @ts-ignore注释。请确保在当前插件环境中，this.parse方法是可用的。如果不可用，可能需要使用其他解析方式，如直接使用@babel/parser。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
pnpm-workspace.yaml (1)
3-3: 建议在文件末尾添加换行符根据 YAML 规范和最佳实践，建议在文件末尾添加一个换行符。
建议应用以下修改：
packages: - 'packages/nutui-codemod' - 'packages/nutui-auto-import' +🧰 Tools
🪛 yamllint
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
packages/nutui-auto-import/src/core/options.ts (2)
24-24: 建议扩展文件匹配模式当前的 include 默认值
/\.[cm]?[jt]sx?$/只匹配 JavaScript/TypeScript 文件。考虑到项目可能使用 Vue 文件，建议添加对 .vue 文件的支持。- include: options.include || [/\.[cm]?[jt]sx?$/], + include: options.include || [/\.[cm]?[jt]sx?$/, /\.vue$/],
28-28: 建议优化 style 属性的默认值处理当前的实现方式不够直观。建议使用更明确的条件判断来处理默认值。
- style: options.style === 'css' ? 'css' : true, + style: options.style ?? true,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
.gitignore(1 hunks)packages/nutui-auto-import/package.json(1 hunks)packages/nutui-auto-import/src/core/options.ts(1 hunks)packages/nutui-auto-import/src/index.ts(1 hunks)packages/nutui-auto-import/tests/fixtures/basic.jsx(1 hunks)pnpm-workspace.yaml(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- .gitignore
- packages/nutui-auto-import/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/nutui-auto-import/src/index.ts
🧰 Additional context used
🪛 eslint
packages/nutui-auto-import/tests/fixtures/basic.jsx
[error] 1-1: 'Button' is defined but never used.
(unused-imports/no-unused-imports)
[error] 4-4: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
🪛 yamllint
pnpm-workspace.yaml
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (3)
pnpm-workspace.yaml (1)
2-3: 工作区配置更改正确！
新增的 packages/nutui-auto-import 包路径配置正确，与现有的工作区结构保持一致。
🧰 Tools
🪛 yamllint
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
packages/nutui-auto-import/tests/fixtures/basic.jsx (1)
3-5:
添加必要的 React 导入并优化组件实现
当前实现存在以下问题：
- 缺少必要的 React 导入
- 组件命名仍然过于简单，可读性差
建议修改如下：
+import React from 'react';
import { Cell } from '@nutui/nutui-react'
-export const A = () => {
+export const TestCell = () => {
return <Cell>Test</Cell>
}🧰 Tools
🪛 eslint
[error] 4-4: 'React' must be in scope when using JSX
(react/react-in-jsx-scope)
packages/nutui-auto-import/src/core/options.ts (1)
1-9: 接口设计清晰且类型定义合理！
Options 接口的设计符合插件配置的需求，属性类型选择恰当：
include/exclude使用FilterPattern类型适合文件过滤enforce的联合类型确保了正确的钩子时序style的类型设计支持了 CSS 按需加载的灵活配置
| @@ -0,0 +1,5 @@ | |||
| import { Button, Cell } from '@nutui/nutui-react' | |||
There was a problem hiding this comment.
移除未使用的导入
Button 组件已导入但未在代码中使用，建议删除以保持代码整洁。
建议修改如下：
-import { Button, Cell } from '@nutui/nutui-react'
+import { Cell } from '@nutui/nutui-react'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { Button, Cell } from '@nutui/nutui-react' | |
| import { Cell } from '@nutui/nutui-react' |
🧰 Tools
🪛 eslint
[error] 1-1: 'Button' is defined but never used.
(unused-imports/no-unused-imports)
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
# Conflicts: # pnpm-lock.yaml
oasis-cloud
force-pushed
the
feat/taro-plugin
branch
from
84472d7
to
e3fd56a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
pnpm-workspace.yaml (1)
3-3: 建议在文件末尾添加换行符根据 YAML 规范和最佳实践，建议在文件末尾添加一个换行符。
packages: - 'packages/nutui-codemod' - - 'packages/nutui-auto-import' + - 'packages/nutui-auto-import' +🧰 Tools
🪛 yamllint
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
pnpm-workspace.yaml(1 hunks)
🧰 Additional context used
🪛 yamllint
pnpm-workspace.yaml
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (1)
pnpm-workspace.yaml (1)
2-3: 新包路径添加正确！
新增的 packages/nutui-auto-import 包路径遵循了现有的命名约定，与 PR 的目标相符。
🧰 Tools
🪛 yamllint
[error] 3-3: no new line character at the end of file
(new-line-at-end-of-file)
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
@nutui/nutui-react-auto-import包，支持按需导入组件样式文件。文档
许可证
测试
配置