Repository navigation
docs(vben-form): update the form adapter document - #6656
Conversation
…ion in the document
|
WalkthroughThe change replaces static ant-design-vue imports with per-component lazy-loaded async components via defineAsyncComponent using 'ant-design-vue/es/...'. Sub-member components are resolved with .then mappings. The initComponentAdapter export and registration pattern remain unchanged; only the component loading strategy is now asynchronous. Changes
Sequence Diagram(s)sequenceDiagram
participant Form as Form Renderer
participant Adapter as Component Adapter
participant Loader as defineAsyncComponent
participant Lib as ant-design-vue (ES modules)
Form->>Adapter: request component render
Adapter->>Loader: resolve component (lazy)
Loader->>Lib: dynamic import('ant-design-vue/es/...')
Lib-->>Loader: module / sub-member
Loader-->>Adapter: async component
Adapter-->>Form: render with resolved component
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ 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. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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
🔭 Outside diff range comments (4)
docs/src/components/common-ui/vben-form.md (4)
87-89: Missing import for defineAsyncComponent (all async component defs will fail at runtime)
defineAsyncComponentis used but not imported from vue. This will throw at runtime and break the adapter snippet for consumers copying from docs.Apply this diff to import it:
-import type { Component, SetupContext } from 'vue'; -import { h } from 'vue'; +import type { Component, SetupContext } from 'vue'; +import { defineAsyncComponent, h } from 'vue';Also applies to: 93-138
188-190: attrs are not merged; they’re passed as a prop (buttons won’t receive attrs like class, style, onClick)
{ ...props, attrs, type: 'default' }sets anattrsprop rather than merging. You want{ ...props, ...attrs }.Apply this diff:
- DefaultButton: (props, { attrs, slots }) => { - return h(Button, { ...props, attrs, type: 'default' }, slots); - }, + DefaultButton: (props, { attrs, slots }) => { + return h(Button, { ...props, ...attrs, type: 'default' }, slots); + }, @@ - PrimaryButton: (props, { attrs, slots }) => { - return h(Button, { ...props, attrs, type: 'primary' }, slots); - }, + PrimaryButton: (props, { attrs, slots }) => { + return h(Button, { ...props, ...attrs, type: 'primary' }, slots); + },Also applies to: 198-200
151-176: Type union terminated early; BaseFormComponentType is currently excluded (TS syntax error)There’s a stray semicolon after
'IconPicker'which ends the alias beforeBaseFormComponentType.Apply this diff:
- | 'Upload' - | 'IconPicker'; - | BaseFormComponentType; + | 'Upload' + | 'IconPicker' + | BaseFormComponentType;
219-227: notification is used but never imported (runtime ReferenceError)
notification.successis referenced, but there is no import fornotification.Add the import:
+import { notification } from 'ant-design-vue';Optional: If you want to keep everything lazy-loaded for consistency, you could instead dynamically import it on use:
copyPreferencesSuccess: async (title, content) => { const { notification } = await import('ant-design-vue'); notification.success({ description: content, message: title, placement: 'bottomRight', }); },
🧹 Nitpick comments (1)
docs/src/components/common-ui/vben-form.md (1)
177-178: async keyword is unnecessary (minor)
initComponentAdapteris markedasyncbut doesn’tawaitanything.You can drop
asyncnow or keep it if you plan to lazy-load andawaitin the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/src/components/common-ui/vben-form.md(1 hunks)
⏰ 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). (7)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: Check (windows-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Check (ubuntu-latest)
🔇 Additional comments (1)
docs/src/components/common-ui/vben-form.md (1)
111-113: Verify sub-member export names from ant-design-vue ESMYou’re resolving sub-exports via
.then((res) => res.InputPassword | res.Textarea | res.RadioGroup | res.CheckboxGroup | res.RangePicker). Export names vary across ant-design-vue versions (e.g.,Input.PasswordvsInputPassword,Radio.GroupvsRadioGroup). Please confirm these identifiers match the version used by this project to avoidundefinedcomponents at runtime.Would you like me to cross-check the exact ESM export names for your locked ant-design-vue version and propose precise mappings?
Also applies to: 118-123, 128-130
qianYuanJ
changed the title
…ion in the document (vbenjs#6656)
…ion in the document
Description
update the component import of the form adapter description in the document
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
Refactor
Documentation