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 props and listeners. So we do two steps
    • patch (one-line) @vue/compiler-sfc to not throw about <template functional> and compile it as usual template
    • add mixin which does this.props = this.$props; this.listeners = this.$listeners in created() 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-sfc will be doing with our hack

While it is definitely a dirty solution, other options I've considered and find bad:

  • hacking @vue/compiler-sfc and injecting relevant parts (the same which are in mixin) in processScript - 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 webpack should be compiling successfully!

Merge request reports

Loading