fix(auto-import-plugin): support functional components #2511
Conversation
WalkthroughThe pull request introduces significant updates to the integration documentation for the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![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
🧹 Outside diff range and nitpick comments (7)
internals/unplugin-tiny-vue/example/package.json (1)
19-19: Consider updating Vite to a newer versionThe current Vite version (4.3.8) is relatively old. Consider updating to the latest v4.x or v5.x for better performance and security.
- "vite": "^4.3.8", + "vite": "^4.5.0", # Latest v4 # or + "vite": "^5.0.0", # Latest v5internals/unplugin-tiny-vue/src/index.ts (2)
24-24: Consider adding type safety to the functional components arrayTo improve type safety and maintainability, consider defining a union type for the functional component names.
+type TinyVueFuncName = 'TinyModal' | 'TinyNotify' | 'TinyLoading'; -const TinyVueFunc = ['TinyModal', 'TinyNotify', 'TinyLoading'] +const TinyVueFunc: readonly TinyVueFuncName[] = ['TinyModal', 'TinyNotify', 'TinyLoading'] as const;
Line range hint
26-57: Well-designed plugin architecture with good separation of concernsThe implementation elegantly handles both functional and regular components while maintaining backward compatibility. The resolver pattern with options provides good extensibility for future enhancements.
A few architectural considerations:
- The separation between functional and regular components is clear and maintainable
- The option-based approach allows for future feature toggles
- The plugin structure remains compatible with multiple build tools
examples/sites/demos/pc/webdoc/import-components.md (2)
58-58: Document the breaking change in TinyVueResolver usage.The change from
TinyVueResolvertoTinyVueResolver()appears to be a breaking change. Consider adding:
- A migration guide section
- A note explaining why this change was necessary
- The version where this change was introduced
Also applies to: 76-81
85-85: Enhance the functional components documentation.Consider adding:
- Examples of how to use these components functionally
- Explanation of the
autoImport: trueoption- List of all available functional components
internals/unplugin-tiny-vue/example/src/App.vue (2)
34-36: Add null check for 'loadingInstance.value' in 'closeLoading' functionIn the
closeLoadingfunction,loadingInstance.valuemight benullif the loading instance hasn't been initialized or has already been closed. This can lead to a runtime error.Consider adding a null check:
const closeLoading = () => { + if (loadingInstance.value) { loadingInstance.value.close() + } }
68-74: Check the value returned by 'TinyModal.confirm'In the
confirmClickfunction, theresparameter in the.then()callback may be a boolean value (truefor confirm,falsefor cancel). Using it directly in the message might result in messages like "点击true按钮".Consider mapping the response to a more user-friendly message:
TinyModal.confirm('您确定要删除吗？').then((res) => { TinyNotify({ type: 'info', title: '触发回调事件', - message: `点击${res}按钮` + message: `点击${res ? '确认' : '取消'}按钮` }) })This will display "点击确认按钮" or "点击取消按钮" based on the user's response.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
examples/sites/demos/pc/webdoc/import-components.md(2 hunks)internals/unplugin-tiny-vue/example/auto-imports.d.ts(1 hunks)internals/unplugin-tiny-vue/example/components.d.ts(1 hunks)internals/unplugin-tiny-vue/example/package.json(1 hunks)internals/unplugin-tiny-vue/example/src/App.vue(1 hunks)internals/unplugin-tiny-vue/example/vite.config.js(1 hunks)internals/unplugin-tiny-vue/src/index.ts(3 hunks)
✅ Files skipped from review due to trivial changes (2)
- internals/unplugin-tiny-vue/example/auto-imports.d.ts
- internals/unplugin-tiny-vue/example/components.d.ts
🔇 Additional comments (8)
internals/unplugin-tiny-vue/example/package.json (2)
18-18: Verify unplugin-auto-import compatibility
Since this PR focuses on auto-import functionality for functional components, we should verify the compatibility of unplugin-auto-import v0.18.3 with the current setup.
#!/bin/bash
# Description: Check compatibility of unplugin-auto-import with Vue and Vite versions
# Check if this version is used consistently
rg -g "package*.json" "unplugin-auto-import.*0\.18\.3"
# Check for any reported issues with functional components
gh api search/issues -X GET -f q="repo:antfu/unplugin-auto-import is:issue functional components vue3" --jq '.items[] | {title: .title, url: .html_url, state: .state}'12-12: Verify compatibility with @opentiny/vue v3.18.0
The major version jump from 3.12 to 3.18 might introduce breaking changes.
internals/unplugin-tiny-vue/example/vite.config.js (1)
10-19: LGTM! Plugin configuration looks correct
The plugin configuration properly sets up both component and API auto-imports, which should fix the functional component support issue (#2402).
Let's verify the resolver configuration matches the documentation:
#!/bin/bash
# Check if the configuration matches the documentation
rg -A 5 "TinyVueResolver.*autoImport.*true" "examples/sites/demos/pc/webdoc/import-components.md"internals/unplugin-tiny-vue/src/index.ts (3)
7-14: LGTM! Well-structured interface definition
The interface is well-documented and follows TypeScript best practices with clear JSDoc comments and explicit default value documentation.
57-57: Consider internationalizing the documentation comments
The plugin documentation comments are in Chinese. Consider using English for better international accessibility.
Let's verify plugin compatibility with different build tools:
#!/bin/bash
# Search for plugin usage patterns across different build configs
rg -t js -t ts "unplugin-tiny-vue" --glob "*config.{js,ts}"26-42: Add explicit return type for better type safety
Consider adding an explicit return type to improve type safety and documentation.
-export const TinyVueResolver = (option: TinyVueResolverOption = {}) => {
+interface ComponentResolution {
+ name: string;
+ from: string;
+}
+
+export const TinyVueResolver = (option: TinyVueResolverOption = {}): ((componentName: string) => ComponentResolution | undefined) => {Let's verify that existing usages of TinyVueResolver are compatible with the new signature:
internals/unplugin-tiny-vue/example/src/App.vue (2)
39-42: Ensure 'TinyLoading' is properly initialized
The TinyLoading.service method is used without explicitly importing TinyLoading. While auto-import is enabled, ensure that TinyLoading is correctly resolved by the auto-import plugin to prevent any runtime issues.
If necessary, confirm that TinyLoading is configured for auto-import.
58-61: Verify access to 'modal.vm.close()' in 'baseClick' function
When using modal.vm.close(), ensure that the vm property exists on the modal object returned by TinyModal.alert. If modal does not have a vm property, this will result in an error.
If the close method can be called directly, consider updating the code:
function baseClick() {
const modal = TinyModal.alert('基本提示框', '标题')
- setTimeout(() => modal.vm.close(), 3000)
+ setTimeout(() => modal.close(), 3000)
}Otherwise, ensure that accessing modal.vm.close() is the correct approach according to the TinyModal API.
| import Components from 'unplugin-vue-components/vite' | ||
| import AutoImport from 'unplugin-auto-import/vite' | ||
| import { TinyVueResolver } from '../dist/index.js' |
There was a problem hiding this comment.
💡 Codebase verification
Build required: dist directory is missing and dependency setup needs attention
- The
distdirectory is missing, indicating the plugin needs to be built before the example can work unplugin-auto-importis missing from both dependencies and devDependenciesunplugin-vue-componentsis correctly added as a dependency
Please ensure to:
- Run the build process to generate the
distdirectory - Add
unplugin-auto-importas a dependency inpackage.json
🔗 Analysis chain
Verify dependencies and build requirements
The new imports look good, but let's ensure the build setup is complete.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the required packages are in dependencies
cat package.json | jq '.dependencies["unplugin-vue-components"], .dependencies["unplugin-auto-import"]'
# Verify if dist/index.js exists and is built
if [ -f "internals/unplugin-tiny-vue/dist/index.js" ]; then
echo "dist/index.js exists"
else
echo "Warning: dist/index.js not found. Build may be required."
fi
Length of output: 365
Script:
#!/bin/bash
# Check package.json in the specific plugin directory
cat internals/unplugin-tiny-vue/package.json | jq '.dependencies, .devDependencies'
# Check if the dist directory exists and list its contents
ls -la internals/unplugin-tiny-vue/dist/
# Find example usage of these plugins in the codebase
rg -l "unplugin-vue-components|unplugin-auto-import" internals/unplugin-tiny-vue/
Length of output: 752
| ```js | ||
| // vite.config.js | ||
| import Components from 'unplugin-vue-components/vite' | ||
| import AutoImport from 'unplugin-auto-import/vite' | ||
| import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue' | ||
|
|
||
| module.exports = defineConfig({ | ||
| configureWebpack: { | ||
| plugins: [ | ||
| Components({ | ||
| resolvers: [TinyVueResolver()] | ||
| }), | ||
| AutoImport({ | ||
| resolvers: [TinyVueResolver({ autoImport: true })] | ||
| }) | ||
| ] | ||
| } | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
Maintain consistency in configuration examples.
The Vite example uses export default while the Webpack example uses module.exports. Additionally, the Vite example incorrectly uses configureWebpack which is a Vue CLI concept, not a Vite concept.
Apply this diff to fix the Vite configuration:
// vite.config.js
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue'
-module.exports = defineConfig({
- configureWebpack: {
- plugins: [
+export default {
+ plugins: [
Components({
resolvers: [TinyVueResolver()]
}),
AutoImport({
resolvers: [TinyVueResolver({ autoImport: true })]
})
- ]
- }
-})
+ ]
+}Also applies to: 111-124
| </div> | ||
| <div class="content"> | ||
| <span>消息模式：</span> | ||
| <tiny-button @click="messageClick"> 消息提示 </tiny-button> |
There was a problem hiding this comment.
Undefined function 'messageClick' referenced in the template
The messageClick function is called in the template but is not defined in the script section. This will cause a runtime error when the button is clicked.
Apply this diff to add the missing messageClick function:
+function messageClick() {
+ TinyNotify({
+ type: 'info',
+ title: '消息提示',
+ message: '这是一个消息提示。',
+ position: 'top-right',
+ duration: 5000
+ })
+}Committable suggestion skipped: line range outside the PR's diff.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #2402
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
TinyVuecomponent library with Vite and Webpack, including new examples for functional components.TinyLoading,TinyModal, andTinyNotifyto simplify usage across the application.Improvements
App.vueto use the Composition API for better state management and user interaction handling.Dependency Updates
@opentiny/vueandvitedependencies, and addedunplugin-auto-import.