Vue 3: Disable compat mode

changelog/unreleased/change-update-vue

@@ -19,3 +19,4 @@ https://github.com/owncloud/web/pull/8256
 https://github.com/owncloud/web/pull/8257
 https://github.com/owncloud/web/pull/8258
 https://github.com/owncloud/web/pull/8282
+https://github.com/owncloud/web/pull/8288

packages/tsconfig/tsconfig.json

@@ -84,12 +84,6 @@
     "node_modules"
   ],
   "vueCompilerOptions": {
-    "experimentalCompatMode": 2,
-    "experimentalTemplateCompilerOptions": {
-      "compatConfig": {
-        "MODE": 2
-      } // optional
-    },
-    "target": 2.7
+    "target": 3
   }
 }

packages/web-runtime/src/index.ts

@@ -30,17 +30,14 @@ import {
 } from 'web-client/src/helpers'
 import { WebDAV } from 'web-client/src/webdav'
 import { DavProperty } from 'web-client/src/webdav/constants'
-import { configureCompat, createApp } from 'vue'
-import { compatConfig } from './compatConfig'
+import { createApp } from 'vue'
 import PortalVue, { createWormhole } from 'portal-vue'
 
 import WebPlugin from './plugins/web'
 import Avatar from './components/Avatar.vue'
 import focusMixin from './mixins/focusMixin'
 import lifecycleMixin from './mixins/lifecycleMixin'
 
-configureCompat(compatConfig)
-
 export const bootstrapApp = async (configurationPath: string): Promise<void> => {
   const app = createApp(pages.success)
 

tests/unit/config/jest.config.ts

@@ -23,7 +23,6 @@ module.exports = {
     '\\.(css|less|scss)$': '<rootDir>/tests/unit/stubs/empty.js',
     '^@/(.*)$': '<rootDir>/$1',
     '^core-js$': '<rootDir>/node_modules/core-js',
-    '^vue$': '@vue/compat',
     '^mark.js$': '<rootDir>/node_modules/mark.js/src/vanilla.js',
     '^fuse.js$': '<rootDir>/node_modules/fuse.js/dist/fuse.esm.js',
     '^filesize$': '<rootDir>/node_modules/filesize/lib/filesize.esm.js',

tests/unit/config/jest.init.js

@@ -1,10 +1,5 @@
-import { configureCompat } from 'vue'
 import fetchMock from 'jest-fetch-mock'
 
-import { compatConfig } from '../../../packages/web-runtime/src/compatConfig'
-
-configureCompat(compatConfig)
-
 window.define = jest.fn()
 
 window.IntersectionObserver = jest.fn(() => ({

vite.config.ts

@@ -18,11 +18,7 @@ import browserslistToEsbuild from 'browserslist-to-esbuild'
 import { CompilerOptions } from '@vue/compiler-sfc'
 
 export const compilerOptions: CompilerOptions = {
-  whitespace: 'preserve',
-  compatConfig: {
-    MODE: 2,
-    COMPILER_V_ON_NATIVE: false
-  }
+  whitespace: 'preserve'
 }
 
 const buildConfig = {
@@ -134,8 +130,6 @@ export default defineConfig(({ mode, command }) => {
       },
       resolve: {
         alias: {
-          vue: '@vue/compat',
-
           crypto: join(projectRootDir, 'polyfills/crypto.js'),
           buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
           path: 'rollup-plugin-node-polyfills/polyfills/path',

web.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module 'vue' {
-  import { CompatVue } from '@vue/runtime-dom'
-  const Vue: CompatVue
-  export default Vue
   export * from '@vue/runtime-dom'
-  const { configureCompat } = Vue
-  export { configureCompat }
 
   export interface GlobalComponents {
     Portal: typeof import('portal-vue')['Portal']
@@ -16,7 +11,9 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
   }
 }
+
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
 }