New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(compat): add Vue 3 support via @vue/compat (fixes #5196) #6845
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/bootstrap-vue/bootstrap-vue/6wdqmsgq1LcpMCi6sopatKZJawdR |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 24f4da1:
|
7c71e0b
to
5a0ec4c
Compare
minor updates:
Now, tests should be green right after checkout :) |
Codecov Report
@@ Coverage Diff @@
## dev #6845 +/- ##
===========================================
- Coverage 100.00% 98.99% -1.01%
===========================================
Files 299 305 +6
Lines 10265 10431 +166
Branches 2527 2573 +46
===========================================
+ Hits 10265 10326 +61
- Misses 0 80 +80
- Partials 0 25 +25
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
5a0ec4c
to
a9d7b7a
Compare
a9d7b7a
to
0731940
Compare
0731940
to
718e4b6
Compare
718e4b6
to
126467f
Compare
Add basic setup for running tests with vue3 compat
Vue3 compat build fails so hard when you have a Vue component inside provide. To avoid this replace direct provides with combination of getter functions and computed
Vue 3 compat does not allow to pass parent as parameter to new Vue instance, so we need to introduce a mixin to handle that. In future root mixin might be replaced with some tiny emitter like mitt
* fixes vModel issues * fixes rendering problems for functional components * expose new helpers: isVue3, nextTick
Replace __vue__ with platform dependent access
It seems Vue 2 and Vue 3 are not consistent about when lifecycle hooks are called. Unify this behavior
* Use built-in teleport in Vue3
There is no way to answer, if we have listeners for even when using Vue3 compat build with $on available. Disable these tests for now, these could be enabled later, when INSTANCE_EVENT_EMITTER flag will be disabled
* @vue/test-utils v2 does not allow stub transitions ATM
Vue 3 and Vue 2 seems to have different order of execution, so in order to get rid of depending on it - just fetch a fresh $tip inside setInterval for visibility check
localVue implementation provided by vue-test-utils-compat is limited and does not allow us to cover all use cases
Getting component instance from directive is different in Vue 2 and Vue 3. Introduce new util to solve this
* correctly handle `null` inside children * fix test
* introduce "safe-vue-instance" helper
* nextTick after mounted ensures entire tree is mounted
* make sure compatConfig is merged for mixins and extends * make some "global" compatConfigs for bootstrap-vue
* use as low number of compat flags as possible * patch portal-vue and vue-router components with compatConfig
126467f
to
24f4da1
Compare
Superseeded by #6905 |
❓ What is it?
Version of Bootstrap-Vue which works for Vue 2 and Vue 3 (using
@vue/compat
)Helps people with #5196
Demo using Vue 2
Demo using Vue 3
Additionally, it passes all (well, almost all, tiny fraction of tests are disabled because they are irrelevant for vue 3) tests in the test suite (it would be literally impossible to do this migration without a test suite)
This package uses vue 3 by default. If you want to run tests, build, etc. using vue 2 pass
USE_VUE2=1
environment variable❗ How is this possible?
The heart of this PR consists of two parts:
@vue/compat
but for testsbootstrap-vue
🔧 How could I run it?
If you want just to play around - you can clone https://github.com/xanf/bootstrap-vue3-demo which has all required setup. If you want to try it on your own project, there is some setup required.
I'm skipping setup of
@vue/compat
, it is described in migration guideYou will need to monkey patch your Vue 3 a bit somewhere early in your app:
See vuejs/core#4121 for details
If your intention is to run your app in
{ MODE: 2 }
(default @vue/compat) you're done.If you want to have
{ MODE: 3 }
(so all compats are disabled by default), additional setup is needed:@vue/compat
build with this fix included. https://github.com/xanf/bootstrap-vue3-demo already has patch insidepatches
folder for that, installed by patch-packageGLOBAL_EXTEND
,GLOBAL_MOUNT
- for usingnew Vue
insidebootstrap-vue
COMPONENT_FUNCTIONAL
,RENDER_FUNCTION
CUSTOM_DIR
(anywhere where you use bootstrap-vue directive)If you use
portal-vue
(which is still used for tooltips, etc.) you will need:GLOBAL_SET
If you use old (for Vue 2) version of vue-router you will need:
CONFIG_OPTION_MERGE_STRATS
GLOBAL_PRIVATE_UTIL
GLOBAL_PROTOTYPE
INSTANCE_EVENT_HOOKS
OPTIONS_DESTROYED
INSTANCE_EVENT_EMITTER
💣 What might not work
Nuxt
run using newer Nuxt 3, bridge, etc. but it was very problematic. So I wrote a script, which extracted demos from docs and generated https://github.com/xanf/bootstrap-vue3-demo with all demosLet's treat this one as "bridge" version
Based on this branch I will create another one, which will be focused solely on full vue 3 compatibility (without using @vue/compat). While this will definitely take time, right now I do not see any major obstacles in gradual migration
🤗 That's cool, how could I say "thank you"?
You're welcome, it's all about opensource. However, there are certain things, where your help will be appreciated:
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)
, requires a patch version updatefeat(...)
, requires a minor version updatefeat(...)
, requires a minor version updatefix(...)
, requires a patch or minor version updatechore(docs)
, requires a patch version updateDoes this PR introduce a breaking change? (check one)
The PR fulfills these requirements:
dev
branch, not themaster
branch[...] (fixes #xxx[,#xxx])
, where "xxx" is the issue number)fix(alert): not alerting during SSR render
,docs(badge): update pill examples
,chore(docs): fix typo in README
, etc.). This is very important, as theCHANGELOG
is generated from these messages, and determines the next version type (patch or minor).If new features/enhancement/fixes are added or changed:
If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes: