chore: use unplugin vue components #182
Conversation
WalkthroughA global TypeScript declaration file was introduced to register Vue components for automatic type recognition. The project configuration was updated to include this declaration file in the TypeScript build and to add the Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Vite as Vite Build
participant Plugin as unplugin-vue-components
participant Naive as Naive UI Components
participant TS as TypeScript
Dev->>Vite: Runs build or dev server
Vite->>Plugin: Loads plugins (including vue, vueJsx, mock, unplugin-vue-components)
Plugin->>Naive: Resolves and auto-imports Naive UI components
Vite->>TS: Compiles source, includes components.d.ts
TS->>Dev: Provides global component types in templates
Poem
✨ Finishing Touches
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components.d.ts (1)
9-52: LGTM! Comprehensive component declarations.The global component declarations are comprehensive, covering Naive UI components, custom components, and router components with proper TypeScript typing.
Consider adding
components.d.tsto.gitignoresince it's an auto-generated file:+# Auto-generated component declarations +components.d.ts
📜 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 (4)
components.d.ts(1 hunks)package.json(1 hunks)tsconfig.app.json(1 hunks)vite.config.ts(2 hunks)
🔇 Additional comments (5)
package.json (1)
57-57: Verify the package version is correct.The version
^28.7.0forunplugin-vue-componentsseems unusually high. Please verify this is the correct version.What is the latest version of unplugin-vue-components package?tsconfig.app.json (1)
3-3: LGTM! Proper TypeScript integration.Correctly adds the components declaration file to the TypeScript compilation scope, enabling global component type recognition.
vite.config.ts (2)
9-10: LGTM! Proper plugin imports.Correctly imports the Components plugin and NaiveUiResolver for automatic component registration.
43-47: LGTM! Standard plugin configuration.The Components plugin configuration with NaiveUiResolver follows the standard pattern for Naive UI integration.
components.d.ts (1)
1-6: LGTM! Proper generated file configuration.The ESLint and TypeScript ignores are appropriate for this auto-generated file.
1 participant
I noticed that this project doesn’t use component.d.ts to map Naive UI to its corresponding components, so I’m submitting this PR. This change doesn’t affect any business logic, but I believe it will be helpful for developers who rely on IDE auto-completion for component props. Theoretically, after installing this plugin, it’s possible to remove
app.use(naive), but I didn’t make that change out of caution, in case there are any side effects.Summary by CodeRabbit