[full-ci] Vue 3: Remove Vue default export/import 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/components/Search/Preview.vue

@@ -22,17 +22,17 @@
 <script lang="ts">
 import MixinFileActions from '../../mixins/fileActions'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from 'web-pkg/src/constants'
+import { ImageDimension } from 'web-pkg/src/constants'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { loadPreview } from 'web-pkg/src/helpers'
 import { debounce } from 'lodash-es'
-import Vue from 'vue'
+import { computed, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
 import { createLocationShares, createLocationSpaces } from '../../router'
 import { basename, dirname } from 'path'
 import { useAccessToken, useCapabilityShareJailEnabled, useStore } from 'web-pkg/src/composables'
 import { defineComponent } from 'vue'
-import { buildShareSpaceResource } from 'web-client/src/helpers'
+import { buildShareSpaceResource, Resource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
@@ -55,11 +55,23 @@ export default defineComponent({
       }
     }
   },
-  setup() {
+  setup(props) {
     const store = useStore()
+    const previewData = ref()
+    const resource = computed((): Resource => {
+      return {
+        ...(props.searchResult.data as Resource),
+        ...(unref(previewData) &&
+          ({
+            thumbnail: unref(previewData)
+          } as Resource))
+      }
+    })
     return {
       hasShareJail: useCapabilityShareJailEnabled(),
-      accessToken: useAccessToken({ store })
+      accessToken: useAccessToken({ store }),
+      previewData,
+      resource
     }
   },
   computed: {
@@ -84,9 +96,6 @@ export default defineComponent({
               })
           }
     },
-    resource() {
-      return this.searchResult.data
-    },
     matchingSpace() {
       const space = this.spaces.find((space) => space.id === this.resource.storageId)
       if (space) {
@@ -150,7 +159,7 @@ export default defineComponent({
         },
         true
       )
-      preview && Vue.set(this.resource, ImageType.Thumbnail, preview)
+      preview && (this.previewData = preview)
     }, 250)
 
     visibilityObserver.observe(this.$el, { onEnter: debounced, onExit: debounced.cancel })

packages/web-app-files/src/store/mutations.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import pickBy from 'lodash-es/pickBy'
 import { set, has } from 'lodash-es'
 import { getIndicators } from '../helpers/statusIndicators'
@@ -97,7 +96,7 @@ export default {
     })
 
     if (fileIndex >= 0) {
-      Vue.set(state.currentFileOutgoingShares, fileIndex, share)
+      state.currentFileOutgoingShares[fileIndex] = share
     } else {
       // share was not present in the list while updating, add it instead
       state.currentFileOutgoingShares.push(share)
@@ -224,7 +223,7 @@ export default {
       return
     }
 
-    Vue.set(fileSource, index, newResource)
+    fileSource[index] = newResource
   },
 
   SET_HIDDEN_FILES_VISIBILITY(state, value) {
@@ -256,7 +255,7 @@ function $_upsertResource(state, resource, allowInsert) {
   }
 
   if (found) {
-    files.splice(index, 1, resource)
+    files[index] = resource
   } else {
     files.push(resource)
   }

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

@@ -34,6 +34,11 @@ 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> => {
@@ -70,6 +75,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.ts

@@ -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-runtime/src/store/spaces.ts

@@ -1,5 +1,5 @@
 import { buildSpace, isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
-import Vue, { Ref } from 'vue'
+import { Ref } from 'vue'
 import { set, has } from 'lodash-es'
 import { unref } from 'vue'
 import { buildSpaceShare } from 'web-client/src/helpers/share'
@@ -58,7 +58,7 @@ const mutations = {
       return
     }
 
-    Vue.set(spaceSource, index, newResource)
+    spaceSource[index] = newResource
   },
   UPSERT_SPACE(state, space) {
     const spaces = [...state.spaces]
@@ -88,12 +88,12 @@ const mutations = {
     state.spaceMembers = members
   },
   UPSERT_SPACE_MEMBERS(state, member) {
-    const fileIndex = state.spaceMembers.findIndex((s) => {
+    const memberIndex = state.spaceMembers.findIndex((s) => {
       return member.id === s.id && member.collaborator.name === s.collaborator.name
     })
 
-    if (fileIndex >= 0) {
-      Vue.set(state.spaceMembers, fileIndex, member)
+    if (memberIndex >= 0) {
+      state.spaceMembers[memberIndex] = member
     } else {
       // share was not present in the list while updating, add it instead
       state.spaceMembers.push(member)

packages/web-runtime/tests/unit/helpers/config.spec.ts

@@ -1,4 +1,4 @@
-import { FetchMock } from 'jest-fetch-mock/types'
+import fetchMock from 'jest-fetch-mock'
 import { loadConfig } from 'web-runtime/src/helpers/config'
 
 const validConfig = `{
@@ -29,14 +29,14 @@ const validConfig = `{
 
 describe('config file loading and error reporting', () => {
   it('should load and parse a valid config', function () {
-    ;(fetch as FetchMock).mockResponseOnce(validConfig)
+    fetchMock.mockResponseOnce(validConfig)
     return loadConfig().then(async (result) => {
       expect(await result).toMatchObject(JSON.parse(validConfig))
     })
   })
   describe('empty config', () => {
     it('should throw an exception', function () {
-      ;(fetch as FetchMock).mockResponseOnce('')
+      fetchMock.mockResponseOnce('')
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -46,9 +46,7 @@ describe('config file loading and error reporting', () => {
   })
   describe('config with an trailing comma', () => {
     it('should throw an exception', function () {
-      ;(fetch as FetchMock).mockResponseOnce(
-        '"title": { "en": "Classic Design", "de": "Dateien", },'
-      )
+      fetchMock.mockResponseOnce('"title": { "en": "Classic Design", "de": "Dateien", },')
       return expect(loadConfig).rejects.toThrow(
         'config could not be parsed. ' +
           'FetchError: invalid json response body at  ' +
@@ -59,7 +57,7 @@ describe('config file loading and error reporting', () => {
 })
 describe('missing config', () => {
   it('should throw an exception', function () {
-    ;(fetch as FetchMock).mockResponseOnce(
+    fetchMock.mockResponseOnce(
       '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">\n' +
         '<html><head>\n' +
         '<title>404 Not Found</title>\n' +