Vue 3: Get rid of Vue default import/export usage

packages/design-system/src/components/OcButton/OcButton.spec.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from 'web-test-helpers/src'
+import { defaultPlugins, shallowMount } from 'web-test-helpers/src'
 import OcButton from './OcButton.vue'
 
 describe('OcButton', () => {
@@ -143,9 +143,9 @@ describe('OcButton', () => {
 })
 
 function getWrapperWithProps(props) {
-  return shallowMount(OcButton, { props })
+  return shallowMount(OcButton, { props, global: { plugins: [...defaultPlugins()] } })
 }
 function getWrapperWithTestSlot() {
   const testSlots = { default: '<p class="text">Test button</p>' }
-  return shallowMount(OcButton, { slots: testSlots })
+  return shallowMount(OcButton, { slots: testSlots, global: { plugins: [...defaultPlugins()] } })
 }

packages/design-system/src/index.spec.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { createApp, defineComponent } from 'vue'
 import DesignSystem from './index'
 
 const options = {
@@ -22,10 +22,17 @@ const options = {
   }
 }
 
-Vue.use(DesignSystem, options)
-
 describe('Depending on what gets passed into the theming options', () => {
   it('Sets correct custom CSS props from theming options', () => {
+    const app = createApp(
+      defineComponent({
+        template: '<div/>'
+      })
+    )
+    app.config.compilerOptions.whitespace = 'preserve'
+    app.use(DesignSystem, options)
+    app.mount('body')
+
     expect(document.documentElement.style.getPropertyValue('--oc-breakpoint-xsmall-max')).toMatch(
       '50px'
     )

packages/design-system/src/index.ts

@@ -14,16 +14,16 @@ const initializeCustomProps = (tokens = [], prefix) => {
 }
 
 export default {
-  install(Vue, options: any = {}) {
+  install(app, options: any = {}) {
     const themeOptions = options.tokens
     initializeCustomProps(themeOptions?.breakpoints, 'breakpoint-')
     initializeCustomProps(themeOptions?.colorPalette, 'color-')
     initializeCustomProps(themeOptions?.fontSizes, 'font-size-')
     initializeCustomProps(themeOptions?.sizes, 'size-')
     initializeCustomProps(themeOptions?.spacing, 'space-')
 
-    Object.values(components).forEach((c) => Vue.component(c.name, c))
-    Object.values(directives).forEach((d) => Vue.directive(d.name, d))
+    Object.values(components).forEach((c) => app.component(c.name, c))
+    Object.values(directives).forEach((d) => app.directive(d.name, d))
   }
 }
 

packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts

@@ -1,8 +1,8 @@
 import SpacesList from '../../../../src/components/Spaces/SpacesList.vue'
 import { defaultPlugins, mount, shallowMount } from 'web-test-helpers'
-import Vue from 'vue'
 import { displayPositionedDropdown, eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { nextTick } from 'vue'
 
 const spaceMocks = [
   {
@@ -92,7 +92,7 @@ describe('SpacesList', () => {
   it('shows only filtered spaces if filter applied', async () => {
     const { wrapper } = getWrapper({ spaces: spaceMocks })
     wrapper.vm.filterTerm = 'Another'
-    await Vue.nextTick()
+    await nextTick()
     expect(wrapper.vm.orderedSpaces).toEqual([spaceMocks[1]])
   })
   it('should show the context menu on right click', async () => {

packages/web-app-files/src/router/router.ts

@@ -1,4 +1,4 @@
-import Vue, { ComponentOptions } from 'vue'
+import { ComponentOptions } from 'vue'
 
 /**
  * we need to inject the vue files into the route builders,
@@ -7,19 +7,19 @@ import Vue, { ComponentOptions } from 'vue'
  * into js files which then again get imported by other vue files...
  */
 export interface RouteComponents {
-  App: ComponentOptions<typeof Vue>
-  Favorites: ComponentOptions<typeof Vue>
-  FilesDrop: ComponentOptions<typeof Vue>
-  PrivateLink: ComponentOptions<typeof Vue>
-  SearchResults: ComponentOptions<typeof Vue>
-  PublicLink: ComponentOptions<typeof Vue>
+  App: ComponentOptions<unknown>
+  Favorites: ComponentOptions<unknown>
+  FilesDrop: ComponentOptions<unknown>
+  PrivateLink: ComponentOptions<unknown>
+  SearchResults: ComponentOptions<unknown>
+  PublicLink: ComponentOptions<unknown>
   Shares: {
-    SharedWithMe: ComponentOptions<typeof Vue>
-    SharedWithOthers: ComponentOptions<typeof Vue>
-    SharedViaLink: ComponentOptions<typeof Vue>
+    SharedWithMe: ComponentOptions<unknown>
+    SharedWithOthers: ComponentOptions<unknown>
+    SharedViaLink: ComponentOptions<unknown>
   }
   Spaces: {
-    DriveResolver: ComponentOptions<typeof Vue>
-    Projects: ComponentOptions<typeof Vue>
+    DriveResolver: ComponentOptions<unknown>
+    Projects: ComponentOptions<unknown>
   }
 }

packages/web-app-preview/src/tests/unit/views/app.spec.ts

@@ -1,5 +1,5 @@
 import App from '../../../App.vue'
-import Vue, { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import {
   createStore,
   defaultComponentMocks,
@@ -81,12 +81,12 @@ describe('Preview app', () => {
   describe('Method "preloadImages"', () => {
     it('should preload images if active file changes', async () => {
       const { wrapper } = createShallowMountWrapper()
-      await Vue.nextTick()
+      await nextTick()
 
       wrapper.vm.toPreloadImageIds = []
       wrapper.vm.setActiveFile('personal/admin/sleeping_dog.gif')
 
-      await Vue.nextTick()
+      await nextTick()
 
       expect(wrapper.vm.toPreloadImageIds).toEqual(['8', '9', '1', '6', '4'])
     })

packages/web-runtime/src/container/application/classic.ts

@@ -1,14 +1,12 @@
 import { ClassicApplicationScript, RuntimeApi } from '../types'
 import { buildRuntimeApi } from '../api'
-import Vue, { App } from 'vue'
+import { App } from 'vue'
 import { isFunction, isObject } from 'lodash-es'
 import { NextApplication } from './next'
 import { Store } from 'vuex'
 import { Router } from 'vue-router'
 import { RuntimeError } from '../error'
 
-type VueConstructor = typeof Vue
-
 /**
  * this wraps a classic application structure into a next application format.
  * it is fully backward compatible and will stay around as a fallback.

packages/web-runtime/src/container/application/next.ts

@@ -1,7 +1,5 @@
-import Vue, { App } from 'vue'
+import { App } from 'vue'
 import { RuntimeApi } from '../types'
-
-type VueConstructor = typeof Vue
 export abstract class NextApplication {
   protected readonly runtimeApi: RuntimeApi
 

packages/web-runtime/src/defaults/index.ts

@@ -6,7 +6,6 @@ import { coreTranslations, clientTranslations, pkgTranslations, odsTranslations
 // fontawesome-free attributions console message
 import '@fortawesome/fontawesome-free/attribution'
 
-export { default as Vue } from './vue'
 export { default as DesignSystem } from '@ownclouders/design-system'
 
 export const pages = { success: App, failure: missingOrInvalidConfigPage }

packages/web-runtime/src/index.ts

@@ -3,7 +3,6 @@ import {
   pages,
   translations,
   supportedLanguages,
-  Vue
 } from './defaults'
 
 import { router } from './router'
@@ -40,13 +39,19 @@ import { configureCompat, createApp } from 'vue'
 import { compatConfig } from './compatConfig'
 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)
 
   const runtimeConfiguration = await announceConfiguration(configurationPath)
-  startSentry(runtimeConfiguration, Vue)
+  startSentry(runtimeConfiguration, app)
 
   const store = await announceStore({ runtimeConfiguration })
   announcePermissionManager({ app, store })
@@ -76,6 +81,11 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
     wormhole: app.config.globalProperties.$wormhole
   })
 
+  app.use(WebPlugin)
+  app.component('AvatarImage', Avatar)
+  app.mixin(focusMixin)
+  app.mixin(lifecycleMixin)
+
   app.mount('#owncloud')
 
   const applications = Array.from(applicationStore.values())

packages/web-runtime/src/plugins/web.js

@@ -4,8 +4,8 @@ import { encodePath } from 'web-pkg/src/utils'
 import { v4 as uuidV4 } from 'uuid'
 
 export default {
-  install(Vue) {
-    Vue.mixin({
+  install(app) {
+    app.mixin({
       computed: {
         ...mapGetters(['capabilities']),
 

packages/web-test-helpers/src/defaultPlugins.ts

@@ -1,8 +1,6 @@
 import DesignSystem from '@ownclouders/design-system'
-import Vue from 'vue'
 import { createGettext } from 'vue3-gettext'
-;(window as any).Vue = Vue
-
+import { h } from 'vue'
 export interface DefaultPluginsOptions {
   designSystem?: boolean
   gettext?: boolean
@@ -31,5 +29,34 @@ export const defaultPlugins = ({
     })
   }
 
+  plugins.push({
+    install(app) {
+      app.component('RouterLink', {
+        name: 'RouterLink',
+        props: {
+          tag: { type: String, default: 'a' },
+          to: { type: [String, Object], default: '' }
+        },
+        render() {
+          let path = this.$props.to
+
+          if (!!path && typeof path !== 'string') {
+            path = this.$props.to.path || this.$props.to.name
+
+            if (this.$props.to.params) {
+              path += '/' + Object.values(this.$props.to.params).join('/')
+            }
+
+            if (this.$props.to.query) {
+              path += '?' + Object.values(this.$props.to.query).join('&')
+            }
+          }
+
+          return h(this.tag, { attrs: { href: path } }, this.$slots.default)
+        }
+      })
+    }
+  })
+
   return plugins
 }

tests/unit/config/jest.init.js

@@ -1,4 +1,4 @@
-import Vue, { configureCompat, h } from 'vue'
+import { configureCompat } from 'vue'
 import fetchMock from 'jest-fetch-mock'
 
 import { compatConfig } from '../../../packages/web-runtime/src/compatConfig'
@@ -12,28 +12,3 @@ window.IntersectionObserver = jest.fn(() => ({
   unobserve: jest.fn()
 }))
 fetchMock.enableMocks()
-
-Vue.component('RouterLink', {
-  name: 'RouterLink',
-  props: {
-    tag: { type: String, default: 'a' },
-    to: { type: [String, Object], default: '' }
-  },
-  render() {
-    let path = this.$props.to
-
-    if (!!path && typeof path !== 'string') {
-      path = this.$props.to.path || this.$props.to.name
-
-      if (this.$props.to.params) {
-        path += '/' + Object.values(this.$props.to.params).join('/')
-      }
-
-      if (this.$props.to.query) {
-        path += '?' + Object.values(this.$props.to.query).join('&')
-      }
-    }
-
-    return h(this.tag, { attrs: { href: path } }, this.$slots.default)
-  }
-})