[Vue 3] Components compatibility audit

[martaradziszewska]

We need to test all components to check compatibility with the upcoming version of Vue 3.

MAIN GOALS

• create a branch with Vue CLI project and environment to test - vue3
• testing library and all components
• prepare new issues to fix

MAIN CHANGES IN VUE3

• Documentation of Vue composition API find here
  ➡️ https://vue-composition-api-rfc.netlify.com/api.html#setup

• RFC is here ➡️ https://github.com/vuejs/rfcs/tree/master/active-rfcs
  but some of the features are not implemented or changed so be careful

Want to test?

• the branch you are looking for is vue3
  the instruction ➡️ [WIP] Testing environment for Vue 3 #972
  Have some questions? Something is not working, please tell us.

OVERALL ISSUES

• mobile-observer.js - changes in Vue.observable() -> need to change to reactive
• to globally registered component we can't use Vue.component() anymore -> need to use resolveComponent or resolveDynamicComponent or another solution is required
• custom directive api change -> need to adjust focus.js, focus-trap.js, clickOutside.js
• $attrs automatically includes all non-prop related attributes - we don't need model, $listeners -> check out this presentation https://github.com/chrisvfritz/vue-3-trends/blob/master/slides-2019-03-vueconfus.pdf
• native portals <Teleport>
• In Vue 3, due to the availability of Fragments, it is recommended to use template refs for direct access to DOM nodes instead of relying on this.$el.
• Remove $on, $off and $once instance methods. Vue instances no longer implement the event emitter interface.

COMPONENTS ISSUES

rename custom directives hooks, be careful with v-bind="$attrs" this inherits also directives

more info: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0012-custom-directive-api-change.md

• v-focus
• v-clickOutside
• v-focusTrap

Issues with two-way data binding, removed model prop

[v-model API Change] more info: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md

• SfCheckbox - v-model, issue with 'checked', use checked prop, remove model property
• SfInput - v-model, issue with 'value', add $emit with update:modelValue
• SfQuantitySelector - remove model, use modelValue, $emit with update:modelValue
• SfAddToCart - remove model, use modelValue
• SfRadio - v-model, issue with 'checked', use checked prop, remove model property
• SfModal - remove model
• SfSearch - use modelValue
• SfCollectedProduct - change $event to $event.target.value

Replace $listeners with v-bind="$attrs"

More info: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md

• SfArrow
• SfAddToCart
• SfBanner - fix $listeners
• SfBottomNavigationitem
• SfButton
• SfColor
• SfCircleIcon - remove $listeners
• SfIcon
• SfImage
• SfFilter
• SfMenuItem

this.$listeners has been removed

• SfInput

now v-bind="$attrs" inherit also classes and styles - check if this works

maybe this will be helpful -> https://github.com/vuejs/rfcs/blob/attr-fallthrough/active-rfcs/0000-attr-fallthrough.md

• SfInput
• SfQuantitySelector
• SfSearchBar

replace $on, $off and $once methods, proposition is to use the external library mitt

see more here: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

• SfSelect
• SfAccordion
• SfTabs

🚨 issue with SimpleBar - causing faling resolving component SfScrollable

• SfScrollable

🚨 issues with globally registered component

maybe this will be helpful -> vuejs/rfcs#29

import { createApp } from 'vue' createApp().mount({}, '#app')

• SfAccordion
• SfBottomNavigation
• SfCarousel
• SfContentPages
• SfFooter
• SfGroupedProduct
• SfHeader
• SfMegaMenu
• SfSelect
• SfSteps
• SfStoreLocator
• SfTable
• SfTabs
• SfHero
• SfList

Issues with mobile-observer.js, method isMobile is not working

• SfBanner
• SfSlidingSection
• SfContentPages
• SfFooter
• SfGroupedProduct
• SfHeader

Implement <Teleport>

• SfOverlay - remove staticClass, className
• SfSidebar - remove unused fn with $vnode
• SfModal

Issue with dynamic directive argument v-slot:[name]

• SfBannerGrid

🚨Issue with import vue2-leaflet

• SfStoreLocator

Issue with with import hammerjs

• SfSlidingSection

Issue with this.$refs

• SfCarousel
• SfGallery
• SfGroupedProduct
• SfHeader
• SfHero
• SfModal
• SfScrollable
• SfSidebar
• SfSlidingSection
• SfSlidingSection
• SfStoreLocator
• SfSelect

Change transition to transition-group

• SfProductCard
• SfLoader

Issue with const observer = new MutationObserver()

• SfScrollable

[TODO] Test after component fixes

EXAMPLES:

• Cart
• Category
• Checkout
• Error
• Home
• Login & Sign in
• My account
• Product
• Static
• Thank you

Tested components

ATOMS:

• 👍SfBreadcrumbs
• 👍SfBullets
• 👍SfChevron
• 👍SfDivider
• 👍SfHeading
• 👍SfPrice
• 👍SfProperty
• 👍SfRating

MOLECULES:

• 👍SfAlert
• 👍SfBar
• 👍SfCallToAction
• 👍SfCharacteristic
• 👍SfNotification
• 👍SfPagination
• 👍SfReview
• 👍SfProductOption
• 👍SfSection
• 👍SfSticky

ORGANISMS:

• 👍SfProductCardHorizontal
• 👍SfTopBar

[abskj]

Hi
I want to work on this issue to make the components compatible with Vue 3.

[Verequies]

Any update on getting storefront-ui working with Vue 3?

[Baroshem]

@Verequies

In progress. It is rather a huge change in the code so it takes time. If you like you can help @undercovergod with the refactoring :)

[Kearny]

@Verequies

In progress. It is rather a huge change in the code so it takes time. If you like you can help @undercovergod with the refactoring :)

Can I help ?

[abskj]

@Kearny please check #1987 .
Currently storybook is not working. I have tried making storybook work but either unit tests work or storybook and not together. I think its related to https://github.com/storybookjs/storybook/issues/10654
If you can help solve this issue it would be great. You can also continue the changes for molecules or organism components if you cant help in storybook issue.