fix(BApp): wrap our test app in BApp in main.ts to enable easy verification of useModal, etc. #2865

dwgray · 2025-09-29T17:40:02Z

Describe the PR

While investigating #2860 I noticed that the way we have our test app structured doesn’t work if you wanted to import useModal or and of the other composables that depend on being contained by the BApp

This is one way to fix the issue. Another would be to add a component below our App and do the testing in the component (that’s basically what our template for bug reports does).

This seemed a little easier for day-to-day work, but happy to implement the other if anyone has a strong preference.

Small replication

Import useModal in our test app and you’ll see an error that it must be contained.

PR checklist

What kind of change does this PR introduce? (check at least one)

The PR fulfills these requirements:

Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is 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 denied

Summary by CodeRabbit

Refactor
- Updated app initialization to wrap the root component with the application container, improving consistency of global layout and directives.
- Moved the application wrapper from the internal app component to the bootstrap layer for cleaner composition and easier maintenance.
- No user-facing behavior changes; existing routing and features continue to work as before.

…c will work

bolt-new-by-stackblitz · 2025-09-29T17:40:05Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-09-29T17:40:10Z

Walkthrough

BApp usage was removed from App.vue and reintroduced at the bootstrap level. main.ts now defines a Wrapper component that renders BApp as the root and places App in its default slot, then mounts Wrapper. Imports were adjusted accordingly, and BApp is now exported from ./index.

Changes

Cohort / File(s)	Summary
App structure update `packages/bootstrap-vue-next/src/App.vue`	Removed BApp wrapper from template and its import; template now renders BContainer > BRow > BCol directly.
Bootstrap and mounting flow `packages/bootstrap-vue-next/src/main.ts`	Added Wrapper component that renders BApp and nests App via default slot; imports updated to include BApp; app mounts Wrapper instead of App.
Public export surface `./index`	Added export of BApp.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant Browser
    participant VueApp as Vue App (Wrapper)
    participant BApp as BApp (Root)
    participant App as App (Content)

    User->>Browser: Load page
    Browser->>VueApp: Create and mount Wrapper
    VueApp->>BApp: Render BApp as root
    BApp->>App: Render App in default slot
    App-->>BApp: Provide content (BContainer/BRow/BCol)
    BApp-->>VueApp: Composed root hierarchy ready
    VueApp-->>Browser: Mounted application

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I hopped through slots with nimble cheer,
Moved roots around without a fear.
BApp now wraps the scene just right,
While App keeps shining, lean and light.
Thump-thump! The mount is snug and tight—
A tidy warren, built to delight. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description follows the template structure well with all required sections present and filled out meaningfully. The description clearly explains the problem being solved, provides context from issue #2860, discusses an alternative approach, and includes a replication case. The PR checklist correctly identifies this as a bugfix. However, the critical Conventional Commits requirement checkbox remains unchecked, which the template explicitly states is "very important" for CHANGELOG generation and version determination, and notes that PRs not following this "will be denied."	The author should check the Conventional Commits checkbox to confirm that the pull request title and commits follow the Conventional Commits convention. The title already follows the correct format (fix(BApp): ...), so this appears to be an oversight in not marking the checkbox. Once verified that all commits follow this convention, the checkbox should be updated to indicate compliance with this critical requirement.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title accurately describes the primary change in the changeset. The title states that the test app is being wrapped in BApp within main.ts, which aligns precisely with the code changes shown in the raw summary where main.ts introduces a Wrapper component that renders BApp as the root and nests the original App inside it. The title also clearly explains the purpose—enabling easy verification of useModal and other composables that require BApp containment—which matches the PR objectives and the described problem being solved.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6685308 and a7a7ceb.

📒 Files selected for processing (2)

packages/bootstrap-vue-next/src/App.vue (1 hunks)
packages/bootstrap-vue-next/src/main.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

packages/bootstrap-vue-next/src/App.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changes

Files:

packages/bootstrap-vue-next/src/App.vue

🧠 Learnings (6)

📓 Common learnings

Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/App.vue : Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changes

Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/styles/styles.scss : Use packages/bootstrap-vue-next/src/styles/styles.scss as the main styles entry point

Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export it