feat(compat): add Vue 3 support via @vue/compat, round 2 (fixes #5196) #6905

xanf · 2022-01-28T15:02:18Z

❓ What is it?

Version of Bootstrap-Vue which works for Vue 2 and Vue 3 (using @vue/compat)
Helps people with #5196

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:

new vue-test-utils-compat package which allows us to run old test suite using new Vue (it's like @vue/compat but for tests
Additional compatibility layer for Vue3 crafted specifically for bootstrap-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 guide

You will need to monkey patch your Vue 3 a bit somewhere early in your app:

  const originalVModelDynamicCreated = Vue.vModelDynamic.created;
  const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate;
  Vue.vModelDynamic.created = function (el, binding, vnode) {
    originalVModelDynamicCreated.call(this, el, binding, vnode);
    if (!el._assign) {
      el._assign = () => {};
    }
  };
  Vue.vModelDynamic.beforeUpdate = function (el, binding, vnode) {
    originalVModelDynamicBeforeUpdate.call(this, el, binding, vnode);
    if (!el._assign) {
      el._assign = () => {};
    }
  };

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:

if fix(compat): maintain compatConfig option in legacy functional comp vuejs/core#4974 is not yet merged - you need to build @vue/compat build with this fix included. https://github.com/xanf/bootstrap-vue3-demo already has patch inside patches folder for that, installed by patch-package
Certain compat flags required to be enabled globally ATM and can't be disabled in this release (which maintains Vue 2 and Vue 3 compatibility):
- GLOBAL_EXTEND, GLOBAL_MOUNT - for using new Vue inside bootstrap-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

Docs. I've tried to make 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 demos
Build. It might or might not work, I didn't have an opportunity to test it yet

↗️ What's next?

Let'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:

Help me spread the word about vue-test-utils-compat. You can retweet me or just drop a link to your friend who could be interested
Check deployed versions of https://github.com/xanf/bootstrap-vue3-demo (links inside) and report about any issues you find out in Vue 3 version (it is very time consuming to test all possible scenarios)

PR checklist

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

Bugfix (fixes a boo-boo in the code) - fix(...), requires a patch version update
Feature (adds a new feature to BootstrapVue) - feat(...), requires a minor version update
Enhancement (augments an existing feature) - feat(...), requires a minor version update
ARIA accessibility (fixes or improves ARIA accessibility) - fix(...), requires a patch or minor version update
Documentation update (improves documentation or typo fixes) - chore(docs), requires a patch version update
Other: major update

Does this PR introduce a breaking change? (check one)

No (I know it's hard to believe)
Yes (please describe since breaking changes require a minor version update)

The PR fulfills these requirements:

It's submitted to the dev branch, not the master branch
When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, chore(docs): fix typo in README, etc.). This is very important, as the CHANGELOG is generated from these messages, and determines the next version type (patch or minor).

If new features/enhancement/fixes are added or changed:

Includes documentation updates
Includes component package.json meta section updates (prop, slot and event changes/updates)
Includes any needed TypeScript declaration file updates
New/updated tests are included and passing (required for new features and enhancements)
Existing test suites are passing
CodeCov for patch has met target (all changes/updates have been tested)
The changes have not impacted the functionality of other components or directives
ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

vercel · 2022-01-28T15:02:21Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/bootstrap-vue/bootstrap-vue/AP9rnnFFga1HMqX9GxTngzbShiMk
✅ Preview: https://bootstrap-vue-git-vue3-compat-build-bootstrap-vue.vercel.app

codesandbox-ci · 2022-01-28T15:03:36Z

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 6ef2ba4:

Sandbox	Source
BootstrapVue Starter Project	Configuration
BootstrapVue Nuxt.js Starter Project	Configuration

codecov · 2022-01-28T15:04:38Z

Codecov Report

Merging #6905 (6ef2ba4) into dev (debe660) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##               dev     #6905    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          299       305     +6     
  Lines        10265     10452   +187     
  Branches      2527      2550    +23     
==========================================
+ Hits         10265     10452   +187

Flag	Coverage Δ
unittests	`100.00% <100.00%> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/form-group/form-group.js	`100.00% <ø> (ø)`
src/components/layout/col.js	`100.00% <ø> (ø)`
src/components/layout/row.js	`100.00% <ø> (ø)`
src/directives/scrollspy/scrollspy.js	`100.00% <ø> (ø)`
src/components/alert/alert.js	`100.00% <100.00%> (ø)`
src/components/aspect/aspect.js	`100.00% <100.00%> (ø)`
src/components/avatar/avatar-group.js	`100.00% <100.00%> (ø)`
src/components/avatar/avatar.js	`100.00% <100.00%> (ø)`
src/components/badge/badge.js	`100.00% <100.00%> (ø)`
src/components/breadcrumb/breadcrumb-item.js	`100.00% <100.00%> (ø)`
... and 180 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

mariusa · 2022-02-17T09:37:13Z

What does this need to be merged? Looking forward to restart using bootstrap-vue with vue 3!

jd-solanki · 2022-02-17T12:50:59Z

If you visit b-popover-advanced demo and click on button then we get below error:

I am also getting the same error in a few other areas in my project.

Thanks.

ankurk91 · 2022-02-26T07:39:00Z

Please merge and publish this PR to npm but with next channel, everyone should be able to install and test it.

sadeghbarati · 2022-04-11T08:41:49Z

https://6253cfb04272251095ef217a--clever-dasik-1a4bcc.netlify.app/

just update @vue/compat, @vitejs/plugin-vue and @vue/compiler-sfc and only use vue3 mode
and only use this patch code, not patch-package module for patch @vue/compat

 const originalVModelDynamicCreated = Vue.vModelDynamic.created;
  const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate;
  Vue.vModelDynamic.created = function (el, binding, vnode) {
    originalVModelDynamicCreated.call(this, el, binding, vnode);
    if (!el._assign) {
      el._assign = () => {};
    }
  };
  Vue.vModelDynamic.beforeUpdate = function (el, binding, vnode) {
    originalVModelDynamicBeforeUpdate.call(this, el, binding, vnode);
    if (!el._assign) {
      el._assign = () => {};
    }
  };

Some components are still not run properly
I did not check most of the components, I only saw these problems

toast-advanced
popover-advanced
bootstrap 5.0.0 (current version 5.1.3 and 5.2.0 is coming) use @popper/core not popper.js is deprecated

xanf · 2022-04-11T08:46:16Z

@sadeghbarati thank you for givin this a try and catching couple bugs!
I'm going to take a look ath them soon

However, rewrite to bootstrap v5 is totally separate topic

sadeghbarati · 2022-04-11T10:13:32Z

@xanf

one thing I forgot to mention:
I think the portal-vue force this project to use @vue/compat?
@vue/compat performance is same as vue2&3 ?

Although there is a small performance/size overhead

If your team separate vue 2&3 of bootstrap-vue would be so better
because first time I use compat version and Compatibility table seem
have many incompatibles and caveats even ssr problem for this project

I do not expect much from you at this time because I am a little aware of the situation you are in now in Ukraine

These are my thoughts ppl can easily contribute and help ur team along:

bootstrap-vue & vue 2 & portal-vue & bootstrap 4
bootstrap-vue & vue 2 & portal-vue & bootstrap 5
bootstrap-vue & vue 3 & builtin Teleport & bootstrap 4
bootstrap-vue & vue 3 & builtin Teleport & bootstrap 5

sebo · 2022-04-12T12:34:38Z

How can I help moving this over the finish line? :)

sdwru · 2022-04-29T13:39:22Z

Seems to me that it would be easier to create a separate project for vue3+bootstrap5 instead of creating this frankenstein thing trying to update existing code. Leave the current project as is and don't worry about cross compatibility. That's my 2 cents anyways.

ultimaweapon · 2022-04-29T17:17:05Z

Seems to me that it would be easier to create a separate project for vue3+bootstrap5 instead of creating this frankenstein thing trying to update existing code. Leave the current project as is and don't worry about cross compatibility. That's my 2 cents anyways.

What about the people that are already using this on their project?

sdwru · 2022-04-29T18:10:48Z

Seems to me that it would be easier to create a separate project for vue3+bootstrap5 instead of creating this frankenstein thing trying to update existing code. Leave the current project as is and don't worry about cross compatibility. That's my 2 cents anyways.

What about the people that are already using this on their project?

What about them? They can keep on using it.

ultimaweapon · 2022-04-29T18:41:37Z

That mean they are going to stuck with Vue 2 forever. They can't upgrade to Vue 3 due to Bootstrap Vue is not compatible and they can't switch to that new library too due to it is Vue 3.

* use own extend instead

VividLemon · 2022-10-24T23:14:28Z

@xanf Hey there, I just wanted to let you know that I'd still like you're input on a merger if you don't mind. A few members have been in a discord dm, but I would like you're approval on some possible ideas, if you don't mind.

xanf · 2022-10-25T05:29:12Z

@xanf Hey there, I just wanted to let you know that I'd still like you're input on a merger if you don't mind. A few members have been in a discord dm, but I would like you're approval on some possible ideas, if you don't mind.

I've added you on discord, sorry, too many things on the table, feel free to DM me

dword-design · 2022-10-25T09:06:56Z

Hey, one small report: Icons defined locally in components do not work. They only work when registered globally 🙂.

xanf · 2022-10-25T10:06:28Z

@dword-design thank you. May I ask you to create a reproduction in https://stackblitz.com/edit/bootstrap-vue-with-compat?file=components/HelloBootstrap.vue if possible?

xanf · 2022-10-25T11:52:46Z

@dword-design Got it. Unfortunately this is an upstream issue, I've opened issue in core - vuejs/core#6950

xanf · 2022-10-25T11:54:33Z

A single "Merge" for a human, a step forward for entire bootstrap-vue community

🚀

bobvandevijver · 2022-10-25T11:56:16Z

Great work @xanf! 🎉

ultimaweapon · 2022-10-25T12:06:54Z

Awesome! Thank you so much for your hard work @xanf!

davidwessman · 2022-10-25T12:34:51Z

Amazing! @xanf

dword-design · 2022-10-25T13:33:13Z

That's great, thanks for the good work! @xanf

Just one remark: I tried to upgrade to 2.23 for a Vue 2 project and there were some errors (e.g. this.$store undefined). I could imagine that the release breaks in some ways for Vue 2 projects. Probably all related to @vue/compat.

xanf · 2022-10-25T13:38:32Z

@dword-design that's super weird, I will be happy to see issues because there should be no major changes when you're not using @vue/compat.

dword-design · 2022-10-25T13:41:30Z

@xanf It was actually not possible for me find a minimal working example for me because it worked at other places. So I'd say let's wait what is happening the next days.

jeffsta9 · 2022-10-25T15:17:48Z

The current version of Popper being used (1.16.1) is depreciated. Will it be updated eventually? JC

mrts · 2022-10-25T15:57:03Z

Really awesome news! Thank you, thank you, @xanf for your hard work in these difficult circumstances 🙋‍♂️!

Scoottykun · 2022-10-25T16:04:58Z

That's great ! Thank you so much for your hard work !

jeffsta9 · 2022-10-26T02:49:49Z

The current version of Popper being used (1.16.1) is depreciated. Will it be updated eventually? Just curious if that's something that's on the table. Not sure if it's possible w/ Bootstrap 4.

xanf mentioned this pull request Jan 28, 2022

feat(compat): add Vue 3 support via @vue/compat (fixes #5196) #6845

Closed

21 tasks

xanf force-pushed the vue3-compat-build branch from 2b18550 to 3808529 Compare January 28, 2022 15:24

vercel bot temporarily deployed to Preview January 28, 2022 15:24 Inactive

xanf force-pushed the vue3-compat-build branch from 3808529 to 0934f74 Compare January 28, 2022 15:56

vercel bot temporarily deployed to Preview January 28, 2022 15:56 Inactive

vercel bot temporarily deployed to Preview January 28, 2022 16:51 Inactive

xanf force-pushed the vue3-compat-build branch from 7e9966e to 58054f1 Compare January 29, 2022 11:08

vercel bot temporarily deployed to Preview January 29, 2022 11:08 Inactive

xanf force-pushed the vue3-compat-build branch from 58054f1 to df27815 Compare January 29, 2022 11:26

vercel bot temporarily deployed to Preview January 29, 2022 11:26 Inactive

xanf force-pushed the vue3-compat-build branch from df27815 to 443b82d Compare January 29, 2022 11:48

vercel bot temporarily deployed to Preview January 29, 2022 11:49 Inactive

xanf force-pushed the vue3-compat-build branch from 443b82d to 5c5092e Compare January 29, 2022 12:06

vercel bot temporarily deployed to Preview January 29, 2022 12:06 Inactive

xanf mentioned this pull request Feb 9, 2022

Project status & roadmap #6872

Open

3 tasks

This comment was marked as resolved.

Sign in to view

xanf added 10 commits October 25, 2022 00:35

fix(vue3): do not rely on __vueParentComponent in tooltip

fe13503

fix(compat): correctly handle undefined in slots

725d31b

chore(vue3): avoid patching global Vue.extend

c7699c8

* use own extend instead

chore(form-radio): remove useless watcher

56cdff4

chore(ci): update prepare scripts

975e4de

chore: bump version

d9cd860

chore: bump @vue/test-utils version

7462a49

chore(vue3): use vue-test-utils-compat v0.0.6

b69b4c5

chore: remove unused vars

b442471

chore: ignore vue3-specific code

6ef2ba4

xanf force-pushed the vue3-compat-build branch from bb0d801 to 6ef2ba4 Compare October 24, 2022 21:35

vercel bot temporarily deployed to Preview October 24, 2022 21:41 Inactive

xanf merged commit 58516a4 into dev Oct 25, 2022

xanf deleted the vue3-compat-build branch October 25, 2022 11:54

Uh oh!

feat(compat): add Vue 3 support via @vue/compat, round 2 (fixes #5196) #6905

feat(compat): add Vue 3 support via @vue/compat, round 2 (fixes #5196) #6905

Uh oh!

Conversation

xanf commented Jan 28, 2022

❓ What is it?

❗ How is this possible?

🔧 How could I run it?

💣 What might not work

↗️ What's next?

🤗 That's cool, how could I say "thank you"?

PR checklist

Uh oh!

vercel bot commented Jan 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Jan 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mariusa commented Feb 17, 2022

Uh oh!

jd-solanki commented Feb 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ankurk91 commented Feb 26, 2022

Uh oh!

sadeghbarati commented Apr 11, 2022

Uh oh!

xanf commented Apr 11, 2022

Uh oh!

sadeghbarati commented Apr 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sebo commented Apr 12, 2022

Uh oh!

sdwru commented Apr 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

ultimaweapon commented Apr 29, 2022

Uh oh!

sdwru commented Apr 29, 2022

Uh oh!

ultimaweapon commented Apr 29, 2022

Uh oh!

VividLemon commented Oct 24, 2022

Uh oh!

xanf commented Oct 25, 2022

Uh oh!

dword-design commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xanf commented Oct 25, 2022

Uh oh!

xanf commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xanf commented Oct 25, 2022

Uh oh!

bobvandevijver commented Oct 25, 2022

Uh oh!

ultimaweapon commented Oct 25, 2022

Uh oh!

davidwessman commented Oct 25, 2022

Uh oh!

dword-design commented Oct 25, 2022

Uh oh!

xanf commented Oct 25, 2022

Uh oh!

dword-design commented Oct 25, 2022

Uh oh!

jeffsta9 commented Oct 25, 2022

Uh oh!

mrts commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

vercel bot commented Jan 28, 2022 •

edited

Loading

codesandbox-ci bot commented Jan 28, 2022 •

edited

Loading

codecov bot commented Jan 28, 2022 •

edited

Loading

jd-solanki commented Feb 17, 2022 •

edited

Loading

sadeghbarati commented Apr 11, 2022 •

edited

Loading

sdwru commented Apr 29, 2022 •

edited

Loading

dword-design commented Oct 25, 2022 •

edited

Loading

xanf commented Oct 25, 2022 •

edited

Loading

mrts commented Oct 25, 2022 •

edited

Loading