feat: add transformImport feature for module path conversion#32
feat: add transformImport feature for module path conversion#32xierenyuan merged 2 commits intomainfrom
Conversation
WalkthroughA modular import transformation feature was integrated into the build system. This includes adding a Babel plugin for import transformation, updating configuration files to support the new Changes
Sequence Diagram(s)sequenceDiagram
participant UserConfig as User Config
participant Bundler as Bundler Plugin Loader
participant TransformImport as transformImport Feature
participant Babel as Babel Plugin System
UserConfig->>Bundler: Provide config with transformImport array
Bundler->>TransformImport: Initialize with config
TransformImport->>TransformImport: Validate schema
TransformImport->>Babel: Register babel-plugin-import with options
Babel->>TransformImport: Transform import statements per config
TransformImport->>Bundler: Return modified imports for build
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new transformImport feature to the preset-bundler package that enables module path conversion for selective imports, similar to the functionality provided by babel-plugin-import. The feature allows users to transform import statements to optimize bundle size by importing only specific components and their styles from libraries.
Key Changes:
- Adds a new
transformImportconfiguration option with support for library-specific import transformations - Integrates babel-plugin-import for Babel-based builds and rspack experiments for rspack builds
- Includes comprehensive configuration schema with options for custom naming, style imports, and path transformations
Reviewed Changes
Copilot reviewed 7 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/preset-bundler/src/index.ts | Registers the new transformImport feature plugin |
| packages/preset-bundler/src/features/transformImport/transformImport.ts | Core implementation with configuration schema and Babel/rspack integration |
| packages/preset-bundler/prebundle.config.mjs | Prebundle configuration for babel-plugin-import dependency |
| packages/preset-bundler/package.json | Adds required dependencies and prebundle script |
| packages/preset-bundler/compiled/babel-plugin-import/* | Compiled babel-plugin-import files |
| examples/ant-pro/config/config.ts | Example configuration demonstrating antd usage |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
packages/preset-bundler/src/features/transformImport/transformImport.ts
Outdated
Show resolved
Hide resolved
…mport.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Bugbot free trial expires on August 4, 2025
Learn more in the Cursor dashboard.
| style, | ||
| transformToDefaultImport, | ||
| } | ||
|
|
There was a problem hiding this comment.
Bug: Import Transformation Configuration Issues
The transformImport feature has the following issues:
- The
styleLibraryDirectoryoption is defined in types and schema but is not destructured or passed to thebabel-plugin-importoptions, causing it to be ignored. - The
api.config.rspackcheck incorrectly determines the active bundler, potentially skipping babel plugins when webpack is in use but an rspack config object exists. api.config.transformImportis used with.map()without a null/undefined check, which could lead to a TypeError if the config is not an array.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/preset-bundler/src/features/transformImport/transformImport.ts (1)
66-67: Fix typo in description
🧹 Nitpick comments (3)
packages/preset-bundler/compiled/babel-plugin-import/package.json (1)
1-1: Reformat for better readability.The package.json content is correct, but the single-line format makes it difficult to read and maintain.
Consider reformatting for better readability:
-{"name":"babel-plugin-import","author":"chencheng <sorrycc@gmail.com>","version":"1.13.8","license":"MIT","types":"index.d.ts","type":"commonjs"} +{ + "name": "babel-plugin-import", + "author": "chencheng <sorrycc@gmail.com>", + "version": "1.13.8", + "license": "MIT", + "types": "index.d.ts", + "type": "commonjs" +}packages/preset-bundler/compiled/babel-plugin-import/index.d.ts (1)
1-1: Consider improving type definitions if possible.The generic
anytype export provides no type safety benefits. While this may be appropriate for a compiled external dependency, consider adding more specific type definitions if the babel-plugin-import API is well-documented.If the plugin API is known, consider providing more specific types:
-export = any; +interface TransformImportOptions { + libraryName: string; + libraryDirectory?: string; + styleLibraryDirectory?: string; + style?: boolean | string; + camelToDashComponentName?: boolean; +} + +declare const plugin: (options: TransformImportOptions) => any; +export = plugin;packages/preset-bundler/compiled/babel-plugin-import/index.js (1)
1-481: Consider excluding compiled files from reviewThis is a compiled/bundled file generated by webpack. Any issues should be addressed in the source code rather than the compiled output. Consider adding compiled directories to your PR review exclusions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.gitignore(1 hunks)examples/ant-pro/config/config.ts(1 hunks)packages/preset-bundler/compiled/babel-plugin-import/index.d.ts(1 hunks)packages/preset-bundler/compiled/babel-plugin-import/index.js(1 hunks)packages/preset-bundler/compiled/babel-plugin-import/package.json(1 hunks)packages/preset-bundler/package.json(2 hunks)packages/preset-bundler/prebundle.config.mjs(1 hunks)packages/preset-bundler/src/features/transformImport/transformImport.ts(1 hunks)packages/preset-bundler/src/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/preset-bundler/src/features/transformImport/transformImport.ts (2)
packages/preset-bundler/src/index.ts (1)
api(3-28)packages/types/src/api.ts (1)
IApi(20-41)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: lint
- GitHub Check: build-and-test (22.x, windows-latest)
- GitHub Check: build-and-test (22.x, ubuntu-latest)
🔇 Additional comments (6)
.gitignore (1)
71-71: LGTM!The addition of
.takumi/todosto the gitignore is appropriate and follows the existing pattern. This will help keep development-related todo files out of version control.packages/preset-bundler/src/index.ts (1)
20-20: LGTM!The integration of the transformImport feature plugin follows the established pattern and is placed appropriately in the plugins array. The path resolution is consistent with other feature plugins.
examples/ant-pro/config/config.ts (1)
161-167: LGTM!The transformImport configuration demonstrates proper usage of the new feature. The configuration structure with
libraryName,libraryDirectory, andstyleproperties aligns with the babel-plugin-import API and addresses the requirements from issue #31.packages/preset-bundler/package.json (1)
32-32: LGTM!The package.json changes properly integrate the new dependencies and prebundle script needed for the transformImport feature.
Also applies to: 37-37, 49-49
packages/preset-bundler/prebundle.config.mjs (1)
1-12: LGTM!The prebundle configuration correctly sets up babel-plugin-import with appropriate external mappings.
packages/preset-bundler/src/features/transformImport/transformImport.ts (1)
122-130: LGTM!The SWC loader options modification correctly integrates transformImport configuration for rspack builds.
| const { | ||
| libraryName, | ||
| libraryDirectory, | ||
| camelToDashComponentName, | ||
| style, | ||
| transformToDefaultImport, | ||
| customName, | ||
| customStyleName, | ||
| } = item | ||
| const importOpts: Record<string, any> = { | ||
| libraryName, | ||
| libraryDirectory, | ||
| camel2DashComponentName: camelToDashComponentName, | ||
| style, | ||
| transformToDefaultImport, | ||
| } |
There was a problem hiding this comment.
Missing styleLibraryDirectory in babel plugin options
The styleLibraryDirectory is extracted from the configuration but not passed to the babel plugin options.
Apply this diff to include the missing property:
const {
libraryName,
libraryDirectory,
camelToDashComponentName,
style,
+ styleLibraryDirectory,
transformToDefaultImport,
customName,
customStyleName,
} = item
const importOpts: Record<string, any> = {
libraryName,
libraryDirectory,
camel2DashComponentName: camelToDashComponentName ?? true,
style,
+ styleLibraryDirectory,
transformToDefaultImport,
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/preset-bundler/src/features/transformImport/transformImport.ts
between lines 79 and 94, the styleLibraryDirectory property is extracted from
the configuration but not included in the importOpts object passed to the babel
plugin. To fix this, add styleLibraryDirectory as a key in the importOpts object
with its corresponding value from the extracted configuration to ensure it is
properly passed to the babel plugin options.
| const importOpts: Record<string, any> = { | ||
| libraryName, | ||
| libraryDirectory, | ||
| camel2DashComponentName: camelToDashComponentName, | ||
| style, | ||
| transformToDefaultImport, | ||
| } |
There was a problem hiding this comment.
Fix inconsistent property naming
The babel-plugin-import expects camel2DashComponentName but the config schema uses camelToDashComponentName. This inconsistency needs to be addressed.
Apply this diff to fix the property name mapping:
const importOpts: Record<string, any> = {
libraryName,
libraryDirectory,
- camel2DashComponentName: camelToDashComponentName,
+ camel2DashComponentName: camelToDashComponentName ?? true,
style,
transformToDefaultImport,
}Note: I've also added the default value of true to match the schema description at line 47.
📝 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.
| const importOpts: Record<string, any> = { | |
| libraryName, | |
| libraryDirectory, | |
| camel2DashComponentName: camelToDashComponentName, | |
| style, | |
| transformToDefaultImport, | |
| } | |
| const importOpts: Record<string, any> = { | |
| libraryName, | |
| libraryDirectory, | |
| camel2DashComponentName: camelToDashComponentName ?? true, | |
| style, | |
| transformToDefaultImport, | |
| } |
🤖 Prompt for AI Agents
In packages/preset-bundler/src/features/transformImport/transformImport.ts
around lines 88 to 94, the property name camel2DashComponentName is incorrectly
assigned from camelToDashComponentName, causing inconsistency with the
babel-plugin-import expectation. Rename the property assignment key from
camel2DashComponentName to camelToDashComponentName to match the config schema,
and set its default value to true as described near line 47 to ensure consistent
behavior.
close #31
Summary by CodeRabbit
New Features
Chores
Bug Fixes
Documentation