Implement compat mixin to support Vue.js 3 migration
What does this MR do and why?
This MR workarounds our <template functional> components to "work" with Vue.js 3
How do we achieve that:
- we drop
<template functional>where they are not needed - for components where we might need it for performance reasons we are using only
propsandlisteners. So we do two steps- patch (one-line)
@vue/compiler-sfcto not throw about<template functional>and compile it as usual template - add mixin which does
this.props = this.$props; this.listeners = this.$listenersincreated()lifecycle hook. Functional components could not have lifecycle hook so this lifecycle will be kicked in only if you compile component as normal one which@vue/compiler-sfcwill be doing with our hack
- patch (one-line)
While it is definitely a dirty solution, other options I've considered and find bad:
- hacking
@vue/compiler-sfcand injecting relevant parts (the same which are in mixin) inprocessScript- requires heavy changes in the compile logic, since<script>compiler does not have information on<template>tag👎 - creating "parallel versions" of two
<template functional>components. I've decided not go this way, because our migration will take significant time and I don't want to create more responsibilities of keeping these two version in sync
How to set up and validate locally
-
VUE_VERSION=3 yarn webpackshould be compiling successfully!