docs(migration): add component aliases guidelines #2771
Conversation
|
|
WalkthroughThis update addresses several typographical errors and improves clarity across documentation and descriptive comments in the codebase. It also adds a new section and a comprehensive alias table to the migration guide, clarifying the lack of component alias support in BootstrapVueNext. No functional or logic changes are present. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ 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). (1)
✨ 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 (
|
commit: |
![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 (9)
apps/docs/src/docs/components/form-spinbutton.md (1)
125-126: Subject/verb agreement & punctuationPlural subjects need the plural verb, and the sentence ends abruptly without a period.
-Note the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys +Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` settings only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.apps/docs/src/data/components/tabs.data.ts (1)
88-89: Minor wording tweak (optional)You could drop “to be” for a slightly smoother read:
-"When set to true, renders the tabs with the appropriate styles to be placed into a 'b-card'", +"When set to true, renders the tabs with styles appropriate for placement in a <BCard>",Purely stylistic—feel free to keep as-is.
apps/docs/src/docs/migration-guide.md (7)
52-54: Sentence still fragmentedThe second line is dangling. Joining it tightens the statement.
-on the model (generally named models). +by model properties (typically named `models`).
54-55: Component name & wording
BFormCheckboxis the actual component name and the sentence can be more concise.-For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model named `indeterminate` rather than adding the sync modifier to the `indeterminate` property: +For example, to two-way bind the `indeterminate` state of `<BFormCheckbox>`, bind to the `indeterminate` model instead of using the `.sync` modifier:
150-156: Grammar, spelling & flowSeveral small issues (“have” → “has”, “instace”, commas). Suggested rewrite:
-Bootstrap Vue have component aliases, for instace `<b-button>` could be used as `<b-btn>`. -BootstrapVueNext will not support them and hence you should use the non-aliased version. - -Here is a table giving all of the aliases and their replacements: +BootstrapVue had a number of component aliases; for instance, `<b-button>` could be written as `<b-btn>`. +BootstrapVueNext does not support these aliases, so you must use the full component names. + +The following table lists each alias alongside its replacement:
348-349: ClaritySlight re-phrasing makes the intent clearer.
-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated. +The boolean argument that controls whether focus returns to the toggle button in the `hide` scoped slot is deprecated.
414-420: Streamline & avoid back-ticks around plain text-`Vue 3` changed the way that `v-model` binding works and in the process changed the guidance -when naming the main model property and events for the primary model. `bootstrap-vue-next` follows -this guidance, which affects all of the wrappers for form input. If you're looking for the `value` -property or the `change` and `input` events, you'll find that functionality in the `modelValue` -property and `update:model-value` events. Bootstrap-vue-next no longer provides custom `change` and -`input` events, so the native versions of those events are now exposed. +Vue 3 changed how `v-model` works and, as a result, updated the recommended names for the primary model property and its events. BootstrapVueNext follows this guidance: all form-input wrappers now use the `modelValue` property and the `update:model-value` event instead of the legacy `value`, `change`, or `input` APIs. Consequently, only the native `change` and `input` events are exposed.
658-659: Missing concluding phraseAdd “for details” for a smoother finish and period for consistency.
-The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. Details in our [docs](/components/navbar#color-scheme) +The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. See our [docs](/components/navbar#color-scheme) for details.
730-732: Optional punctuationConsider adding a comma after “deprecated” for readability:
-`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support. +`<BSkeletonIcon>` is deprecated, along with the rest of the BootstrapVue icon support.Purely stylistic.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/data/components/tabs.data.ts(1 hunks)apps/docs/src/docs/components/form-spinbutton.md(1 hunks)apps/docs/src/docs/migration-guide.md(6 hunks)apps/docs/src/utils/image-props.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/data/components/tabs.data.ts (7)
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability. This makes expressions like `item: Item` and `items: Item[]` more intuitive than `item: Items` and `items: Items[]`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability in type definitions.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should be named in singular form (`Item`) rather than plural (`Items`) to follow TypeScript conventions and improve readability in type definitions.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md
[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...plieramount Note therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...
(QB_NEW_EN_OTHER_ERROR_IDS_000073)
[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...
(QB_NEW_EN_OTHER)
[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>
(QB_NEW_EN_OTHER_ERROR_IDS_000178)
apps/docs/src/docs/migration-guide.md
[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...
(QB_NEW_EN_OTHER)
[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...
(QB_NEW_EN_OTHER)
[grammar] ~150-~150: Use proper spacing conventions.
Context: ...roupMigration.vue ## Components aliases Bootstrap Vue have component aliases, fo...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~152-~152: Ensure subjects and verbs match in plurality.
Context: ...e ## Components aliases Bootstrap Vue have component aliases, for instace `<b-butt...
(QB_NEW_EN_OTHER_ERROR_IDS_000074)
[grammar] ~152-~152: There might be a mistake here.
Context: ...es Bootstrap Vue have component aliases, for instace <b-button> could be used ...
(QB_NEW_EN_OTHER)
[grammar] ~152-~152: Ensure spelling is correct.
Context: ...otstrap Vue have component aliases, for instace <b-button> could be used as <b-btn>...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_000051)
[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-button> could be used as <b-btn>. BootstrapVueNext will not support them a...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[style] ~155-~155: Consider removing “of” to be more concise
Context: ...liased version. Here is a table giving all of the aliases and their replacements: | Boot...
(ALL_OF_THE)
[grammar] ~155-~155: Use proper spacing conventions.
Context: ...l of the aliases and their replacements: | BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...
(QB_NEW_EN_OTHER)
⏰ 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). (2)
- GitHub Check: build
- GitHub Check: test-unit
🔇 Additional comments (1)
apps/docs/src/utils/image-props.ts (1)
29-30: Typo fix looks goodThe corrected wording removes the duplicated “the”. No further changes needed.
homersimpsons
force-pushed
the
doc/migration-aliases
branch
from
d96d8ee to
3bb4f13
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/docs/src/docs/components/form-spinbutton.md (1)
125-125: Fix plural-verb agreement and punctuationThe subject is a list of three settings, so use “apply” + end the sentence with a period.
-Note the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys +Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.apps/docs/src/docs/migration-guide.md (5)
52-54: Clarify wording & fix grammar in “Sync modifier” paragraph-This modifier has been replaced by properties -on the model (generally named models). +This modifier has been replaced by dedicated model properties (usually named `modelValue`). -For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model -named `indeterminate` rather than adding the sync modifier to the `indeterminate` property: +For example, to two-way bind the `indeterminate` property of `BFormCheckBox`, bind to the model named `indeterminate` instead of adding the `.sync` modifier to that prop:
150-156: Rename heading & clean up alias section grammar-## Components aliases +## Component aliases -Bootstrap Vue have component aliases, for instace `<b-button>` could be used as `<b-btn>`. -BootstrapVueNext will not support them and hence you should use the non-aliased version. +BootstrapVue had a number of component aliases—for instance, `<b-btn>` was an alias for `<b-button>`. +BootstrapVueNext does not support these aliases, so you must use the canonical component names. -Here is a table giving all of the aliases and their replacements: +The table below lists each BootstrapVue alias and its BootstrapVueNext replacement:
348-348: Sentence is hard to parseRecommend re-phrasing for clarity:
-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated. +The boolean argument in the `hide` scoped slot that controlled whether focus returned to the toggle button is deprecated.
658-658: Terminate sentence properly-The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. Details in our [docs](/components/navbar#color-scheme) +The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. See our [docs](/components/navbar#color-scheme) for details.
730-730: Minor spacing & punctuation nit-`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support. See our -[icon documentation](/docs/icons) for details. +`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support. +See our [icon documentation](/docs/icons) for details.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/data/components/tabs.data.ts(1 hunks)apps/docs/src/docs/components/form-spinbutton.md(1 hunks)apps/docs/src/docs/migration-guide.md(6 hunks)apps/docs/src/utils/image-props.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/src/utils/image-props.ts
- apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md
[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...plieramount Note therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...
(QB_NEW_EN_OTHER_ERROR_IDS_000073)
[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...
(QB_NEW_EN_OTHER)
[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>
(QB_NEW_EN_OTHER_ERROR_IDS_000178)
apps/docs/src/docs/migration-guide.md
[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...
(QB_NEW_EN_OTHER)
[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...
(QB_NEW_EN_OTHER)
[grammar] ~150-~150: Use proper spacing conventions.
Context: ...roupMigration.vue ## Components aliases Bootstrap Vue have component aliases, fo...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~152-~152: Ensure subjects and verbs match in plurality.
Context: ...e ## Components aliases Bootstrap Vue have component aliases, for instace `<b-butt...
(QB_NEW_EN_OTHER_ERROR_IDS_000074)
[grammar] ~152-~152: There might be a mistake here.
Context: ...es Bootstrap Vue have component aliases, for instace <b-button> could be used ...
(QB_NEW_EN_OTHER)
[grammar] ~152-~152: Ensure spelling is correct.
Context: ...otstrap Vue have component aliases, for instace <b-button> could be used as <b-btn>...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_000051)
[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-button> could be used as <b-btn>. BootstrapVueNext will not support them a...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[style] ~155-~155: Consider removing “of” to be more concise
Context: ...liased version. Here is a table giving all of the aliases and their replacements: | Boot...
(ALL_OF_THE)
[grammar] ~155-~155: Use proper spacing conventions.
Context: ...l of the aliases and their replacements: | BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...
(QB_NEW_EN_OTHER)
⏰ 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). (2)
- GitHub Check: test-unit
- GitHub Check: build
homersimpsons
force-pushed
the
doc/migration-aliases
branch
from
3bb4f13 to
72f2768
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/docs/src/docs/components/form-spinbutton.md (1)
125-126: Plural-verb agreement + punctuation
repeat-delay,repeat-threshold, andrepeat-intervalare plural; use “apply”, not “applies”, and finish the sentence with a period.-Note that the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys +Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.apps/docs/src/docs/migration-guide.md (2)
52-53: Clarify wording of replacement for.sync“properties on the model (generally named models)” is hard to parse. Consider rephrasing to make the guidance unambiguous.
-This modifier has been replaced by properties on the model (generally named models). +This modifier has been replaced by additional named `v-model` bindings (usually with model names).
54-55: Component name casing
BFormCheckboxis the canonical component name (no capital “B” inside “Check”). Using the correct casing avoids confusion and keeps the docs searchable.-...property in `BFormCheckBox` you `v-bind`... +...property in `BFormCheckbox` you `v-bind`...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/data/components/tabs.data.ts(1 hunks)apps/docs/src/docs/components/form-spinbutton.md(1 hunks)apps/docs/src/docs/migration-guide.md(6 hunks)apps/docs/src/utils/image-props.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/src/utils/image-props.ts
- apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md
[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...amount Note that therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...
(QB_NEW_EN_OTHER_ERROR_IDS_000073)
[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...
(QB_NEW_EN_OTHER)
[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>
(QB_NEW_EN_OTHER_ERROR_IDS_000178)
apps/docs/src/docs/migration-guide.md
[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...
(QB_NEW_EN_OTHER)
[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...
(QB_NEW_EN_OTHER)
[grammar] ~150-~150: Use proper spacing conventions.
Context: ...GroupMigration.vue ## Component aliases BootstrapVue had a number of component a...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~152-~152: There might be a problem here.
Context: ...rapVue had a number of component aliases — for instance, <b-btn> was an alias for...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-btn> was an alias for <b-button>. BootstrapVueNext does not support these ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~153-~153: Use proper spacing conventions.
Context: ... must use the canonical component names. The table below lists each BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~155-~155: Use proper spacing conventions.
Context: ...as and its BootstrapVueNext replacement: | BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...
(QB_NEW_EN_OTHER)
⏰ 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). (2)
- GitHub Check: test-unit
- GitHub Check: build
🔇 Additional comments (1)
apps/docs/src/docs/migration-guide.md (1)
150-186: Alias table completeness – please verifyGreat addition! A few common aliases from BootstrapVue appear to be missing (e.g.
b-radio,b-checkbox-group,b-check-group,b-dd-headervs. already listedb-d-dropdown-header). Double-check that the table is exhaustive so users don’t miss an alias during migration.
homersimpsons
force-pushed
the
doc/migration-aliases
branch
from
72f2768 to
ada7591
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/docs/src/docs/components/form-spinbutton.md (1)
125-125: Clarify wording & punctuation for better readabilityConsider tightening the sentence and adding a final period:
-Note that the `repeat-delay`, `repeat-threshold` and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys +Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` settings apply only to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.This introduces the Oxford comma, moves “only” next to the verb it qualifies, switches “or” to “and” (both keys are affected), and terminates the sentence with a period.
apps/docs/src/docs/migration-guide.md (4)
52-55: Re-phrase “properties … (generally named models)”The parenthetical is confusing because “models” suggests plurality while Vue’s primary model prop is normally singular (
modelValue). A crisper alternative:-This modifier has been replaced by properties on the model (generally named models). +This modifier is replaced by dedicated model props (typically named `modelValue` or similar).Also,
BFormCheckBox→BFormCheckbox(camel-casing matches the actual component).
54-56: Fix component name & missing articleAdd “to” before “
v-bind” and correct component name:-For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model +For instance, to two-way bind the `indeterminate` property in `BFormCheckbox`, you should `v-bind` to the model
150-156: Provide backlink to legacy alias docs for quicker migrationPer previous guidance, a short link to the BootstrapVue alias reference would help users verify the mapping:
_For the original alias list, see the [BootstrapVue documentation](https://bootstrap-vue.github.io/bootstrap-vue/docs/reference/aliases)._Placing this just after the introductory paragraph offers an immediate reference without cluttering the table.
348-350: Sharpen wording around deprecated boolean argumentThe phrase “boolean argument to control returning focus … is deprecated” is hard to parse. Suggested tweak:
-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated. +The boolean parameter that previously controlled whether focus returned to the toggle button in the `hide` scoped slot is deprecated.This makes the subject (“boolean parameter”) explicit and reduces nesting.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/data/components/tabs.data.ts(1 hunks)apps/docs/src/docs/components/form-spinbutton.md(1 hunks)apps/docs/src/docs/migration-guide.md(6 hunks)apps/docs/src/utils/image-props.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/src/utils/image-props.ts
- apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md
[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...amount Note that therepeat-delay, repeat-thresholdandrepeat-interval` only apply to the...
(QB_NEW_EN_OTHER_ERROR_IDS_000073)
[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>
(QB_NEW_EN_OTHER_ERROR_IDS_000178)
apps/docs/src/docs/migration-guide.md
[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...
(QB_NEW_EN_OTHER)
[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...
(QB_NEW_EN_OTHER)
[grammar] ~150-~150: Use proper spacing conventions.
Context: ...GroupMigration.vue ## Component aliases BootstrapVue had a number of component a...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~152-~152: There might be a problem here.
Context: ...rapVue had a number of component aliases — for instance, <b-btn> was an alias for...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-btn> was an alias for <b-button>. BootstrapVueNext does not support these ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~153-~153: Use proper spacing conventions.
Context: ... must use the canonical component names. The table below lists each BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~155-~155: Use proper spacing conventions.
Context: ...as and its BootstrapVueNext replacement: | BootstrapVue ...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...
(QB_NEW_EN_OTHER_ERROR_IDS_000007)
[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...
(QB_NEW_EN_OTHER)
⏰ 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). (1)
- GitHub Check: build
|
Perhaps we should just export them instead of discontinuing them? What do you think |
In my opinion we should not, not having them means:
But having them also has advantages:
We could also argue that anyone can declare those component aliases themselves if they need to. |
|
But we do support binput as an alias. And I think one other. Thats the only one though |
|
But I do agree. One unified api is my prefered |
Should this alias be removed ? Or at least not documented (if it is currently) ? |
Also fix "the the" typos
homersimpsons
force-pushed
the
doc/migration-aliases
branch
from
ada7591 to
0e2c300
Compare
| | `b-textarea` | `BFormTextarea` | | ||
| | `b-timepicker` | `BFormTimepicker` | | ||
| | `b-nav-item-dd`, `b-nav-dropdown`, `b-nav-dd` | `BNavItemDropdown` | | ||
| | `b-nav-toggle` | `BNavbarToggle` | |
There was a problem hiding this comment.
This isn't a necessary addition. The point I believe @dwgray was making was that when you refer to these
BootstrapVue had a number of component aliases — for instance, `<b-btn>` was an alias for `<b-button>`.They should be in pascal-case
This isn't really the most useful, one could simply add a line that says aliases are generally not supported and one should add them themselves
There was a problem hiding this comment.
This isn't a necessary addition.
This remove the needs from a user to manually skim through BootstrapVue documentation to find aliases such as https://bootstrap-vue.org/docs/components/button#comp-ref-b-button-aliases
The point I believe @dwgray was making was that when you refer to these [...] They should be in pascal-case
I'm not sure, the second paragraph (in #2771 (comment)) was clearly mentioning the table:
Maybe make the BSVN column use that convention
Furthermore, this sentence specifically refers to BootstrapVue hence to me it make sense to use their conventions.
This isn't really the most useful, one could simply add a line that says aliases are generally not supported and one should add them themselves
Clearly a user could figure the aliases themselves but I feel like having this list they can rely on here helps in multiple scenario:
- When evaluating upgrading to BootstrapVueNext, they can see that the list of aliases is not that big
- They can easily find some aliases in their project to check how that would affect them
- They can easily build the list of aliases in their project when upgrading
Should I update the BootstrapVue sentence about aliases?
Should I keep the table?
| | `b-nav-item-dd`, `b-nav-dropdown`, `b-nav-dd` | `BNavItemDropdown` | | ||
| | `b-nav-toggle` | `BNavbarToggle` | | ||
|
|
||
| Note: While BootstrapVueNext recommends using Vue 3 naming convention `BButton` it is still possible to use `b-button`. |
There was a problem hiding this comment.
This isn't a useful addition, it's not really up to us to relay this, as it's just a Vue suggestion. We should somewhat assume that a perrson migration to vue 3 should have read the vue documentation. Therefore, in my opinion, this isn't our burden of responsibility to say. Nor is it really a promotion, users can use whatever style they prefer. We simply just in our documentation and codebase are consistent to use pascal on our end.
There was a problem hiding this comment.
This was suggested in #2771 (comment):
and note the kebab syntax is still supported (since a newbie might get confused between the idea of aliasing and Vue's support for different naming conventions)
I do not really have opinion whether we should include it there or no. But generally I wouldn't expect to see it there as we already are deep in the documentation and there is a lot of chances the user already figured this out if he wasn't familiar.
Should I remove it?
There was a problem hiding this comment.
I do think this table is useful. One of my goals with the migration guide is that when someone encounters an error/warning because something has been deprecated, they can search this guide for an answer. Having this table enumerate the aliases that we deprecated will make that happen for those cases.
On the naming convention. I didn't mean to cloudy the waters here. I am fine with the table staying with the way it is (slight preference for consistency on the Vue3 end of things, but in this context, I don't care that much). I think the biggest counter-argument to my statement above is that the person doing a conversion would have enough experience to understand the kebab/Pascal translations - I had a bit of a random firing synapse on this because I'm thinking a bit more about how to make the documentation in general more friendly to someone who is writing a Vue app for the first time, which generally wouldn't apply to the migration guide.
I think yes, especially if we keep the table that @homersimpsons is proposing as well as pointing to how to add their own, which he's doing as well. |
|
Do we agree that alias removal should be part of a new pull request? Or should I tackle it there too? |
I am fine with removal being a separate PR, but that's really @VividLemon's call |
* upstream/main: docs: clean up css selector docs: fix on-this-page when examples use header tags docs(migration): add component aliases guidelines (bootstrap-vue-next#2771) chore: upgrade dependencies and address all lint warnings (bootstrap-vue-next#2785) chore: release main (bootstrap-vue-next#2769) fix(BDropdown): prevent hydration warning in nuxt production mode (bootstrap-vue-next#2768) docs(BTabs): Updates based on v-model changes (bootstrap-vue-next#2760) docs(table): fix missing anchor in `BTableLite` and `BTableSimple` links (bootstrap-vue-next#2759) docs(BFormRating): Parity pass (bootstrap-vue-next#2749) docs: fix typo in breadcrumb documentation (bootstrap-vue-next#2756) docs: Fix empty-text and empty-filtered-text description as they require show-empty to be set (bootstrap-vue-next#2755) fix InputGroupXPend.vue chore: release main (bootstrap-vue-next#2748) feat: implement BFormRating component (bootstrap-vue-next#2744) chore: release main fix(BLink): move active class to BNavItem (bootstrap-vue-next#2747) feat(BDropdown): allow setting icon prop on nested BButton (bootstrap-vue-next#2746) fix(BToast): close BToast correctly if modelValue is changed from number to false (bootstrap-vue-next#2745)
…keover * upstream/main: (21 commits) feat(b-form-rating): add `icon-clear` slot (#2809) docs: fix dead links, enable rule (#2808) chore: release main (#2801) docs: Fix navbar collapse behavior (#2802) docs: fix code tabs on getting started and icons pages (#2805) docs: fix missing data and use a stronger schema to catch missing errors (#2806) feat(BPopover): add explicit props for focus and hover triggers (#2795) fix(BNavbar): changed autoClose to noAutoClose and fix the documention mistake about it. fix: ssr in scrollspy docs: clean up css selector docs: fix on-this-page when examples use header tags docs(migration): add component aliases guidelines (#2771) chore: upgrade dependencies and address all lint warnings (#2785) chore: release main (#2769) fix(BDropdown): prevent hydration warning in nuxt production mode (#2768) docs(BTabs): Updates based on v-model changes (#2760) docs(table): fix missing anchor in `BTableLite` and `BTableSimple` links (#2759) docs(BFormRating): Parity pass (#2749) docs: fix typo in breadcrumb documentation (#2756) docs: Fix empty-text and empty-filtered-text description as they require show-empty to be set (#2755) ...
3 participants
Describe the PR
Add section in migration guide about removal of component aliases.
Also fix "the the" typos (I can extract this in another pull request if necessary).
Note that I built (manually) the list of aliases from BootstrapVue's documentation, but maybe some of them do not exist on BootstrapVueNext.
Small replication
NA
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit