[ONL-6888] Disable @vue/compat (#1283)

* [ONL-6888] feat: Removed @vue/compat, use Vue 3 only.

* [ONL-6888] feat: Migrated HOC to Vue 3.

* [ONL-6888] chore: Removed compatConfigs from all components.

* [ONL-6888] chore: Updated tests.

* [ONL-6888] fix: Reverted hack for ec-input-field. It's still needed even after removal of vue/compat.

* [ONL-6888] chore: Updated latest dependencies.

* 2.1.0

.eslintrc.js

@@ -57,10 +57,6 @@ module.exports = {
     'vue/one-component-per-file': 'off',
     'vue/require-default-prop': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    // vue/compat
-    'vue/no-deprecated-dollar-listeners-api': 'off',
-    'vue/no-deprecated-v-on-native-modifier': 'off',
-    'vue/no-deprecated-filter': 'off',
     // TODO:
     'vuejs-accessibility/anchor-has-content': 'off',
     'vuejs-accessibility/click-events-have-key-events': 'off',

.storybook/main.js

@@ -35,30 +35,6 @@ module.exports = {
     },
   ],
   webpackFinal: (config, { configType }) => {
-    // enable @vue/compat for stories
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      vue$: require.resolve('@vue/compat'),
-    };
-
-    // enable @vue/compat when compiling story templates
-    const vueLoaderRule = findRuleByLoader(config.module.rules, '/vue-loader/');
-    if (!vueLoaderRule) {
-      throw new Error('Unable to find vue loader rules in the webpack config. Configuration change?');
-    }
-
-    vueLoaderRule.options = {
-      ...vueLoaderRule.options,
-      compilerOptions: {
-        whitespace: 'condense',
-        compatConfig: {
-          MODE: 2,
-          RENDER_FUNCTION: true,
-          COMPONENT_V_MODEL: false,
-        },
-      },
-    };
-
     // add stylelint (https://vue-loader.vuejs.org/guide/linting.html#stylelint)
     config.plugins.push(new StyleLintPlugin({
       files: ['**/*.{vue,css}'],

.storybook/preview.js

@@ -1,15 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies,import/no-webpack-loader-syntax */
 import { withCssResources } from '@storybook/addon-cssresources';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import Vue, { configureCompat } from 'vue';
 
 import bwTheme from '!!raw-loader!../src/styles/themes/b-w.css';
 import greenTheme from '!!raw-loader!../src/styles/themes/green.css';
 import hotpinkTheme from '!!raw-loader!../src/styles/themes/hotpink.css';
 import redTheme from '!!raw-loader!../src/styles/themes/red.css';
 import config from '../src/config';
 import { inlineSvgSprites } from '../src/icons/browser';
-import applyCompatPatches from '../src/utils/compat-patches';
 import { getAllBackgrounds } from './backgrounds';
 
 import '../src/styles/themes/blue.css';
@@ -18,18 +16,6 @@ import '../src/styles/main.css';
 
 config.sensitiveClass = 'tw-filter tw-blur-4';
 
-// SB bug workaround, remove this line if the following issue is fixed:
-// https://github.com/storybookjs/storybook/issues/14933
-Vue.prototype.toJSON = () => {};
-
-configureCompat({
-  MODE: 2,
-  RENDER_FUNCTION: true,
-  COMPONENT_V_MODEL: false,
-});
-
-applyCompatPatches();
-
 export const parameters = {
   layout: 'fullscreen',
   actions: { argTypesRegex: '^on[A-Z].*' },

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.1.0 - Vue 3
+
+## BREAKING CHANGES
+
+* Removed `@vue/compat` and running all components in Vue 3 mode only
+
 # 2.0.0 - Vue 3
 
 ## BREAKING CHANGES

README.md

@@ -80,8 +80,6 @@ If you need to support every single locale on the planet, we recommend to polyfi
 
 [Vue](https://vuejs.org/)
 
-[Vue/compat](https://www.npmjs.com/package/@vue/compat)
-
 [Vue CLI](https://cli.vuejs.org/)
 
 ### Storybook

jest.config.js

@@ -46,12 +46,7 @@ module.exports = {
         whitespace: 'condense',
         isCustomElement: tag => customElements.has(tag),
         comments: false,
-        compatConfig: {
-          MODE: 3,
-          RENDER_FUNCTION: false,
-        },
       },
     },
   },
-  moduleNameMapper: { '^vue$': '@vue/compat' },
 };