Merge pull request #8214 from owncloud/vue3-portal-vue

[full-ci] Vue 3: Use createApp and update portal-vue

changelog/unreleased/change-update-vue

@@ -13,3 +13,4 @@ https://github.com/owncloud/web/pull/8201
 https://github.com/owncloud/web/pull/8202
 https://github.com/owncloud/web/pull/8198
 https://github.com/owncloud/web/pull/8213
+https://github.com/owncloud/web/pull/8214

packages/web-runtime/package.json

@@ -28,7 +28,7 @@
     "owncloud-sdk": "~3.1.0-alpha.1",
     "p-queue": "^6.6.2",
     "popper-max-size-modifier": "^0.2.0",
-    "portal-vue": "^2.1.7",
+    "portal-vue": "3.0.0",
     "postcss-import": "^12.0.1",
     "postcss-url": "^9.0.0",
     "promise": "^8.1.0",

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -22,7 +22,7 @@
   </header>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import NavigationMixin from '../../mixins/navigationMixin'
 

packages/web-runtime/src/container/api.ts

@@ -9,8 +9,7 @@ import {
 import { ApiError } from './error'
 import { get, isEqual, isObject, isArray } from 'lodash-es'
 import { Store } from 'vuex'
-import Vue, { Component } from 'vue'
-import { Wormhole } from 'portal-vue'
+import { App, Component, h } from 'vue'
 
 /**
  * inject application specific routes into runtime
@@ -170,17 +169,17 @@ const announceStore = (
  */
 const openPortal = (
   applicationId: string,
-  instance: typeof Vue.prototype,
+  instance: App,
   toApp: string,
   toPortal: string,
   order: number,
   components: Component[]
 ): void => {
-  Wormhole.open({
+  instance.config.globalProperties.$wormhole.open({
     to: ['app', toApp, toPortal].filter(Boolean).join('.'),
     from: ['app', applicationId, toPortal, order].filter(Boolean).join('.'),
     order: order,
-    passengers: components.map(instance.$createElement)
+    content: () => components.map((c) => h(c))
   })
 }
 
@@ -265,7 +264,7 @@ export const buildRuntimeApi = ({
     requestStore: (): Store<unknown> => requestStore(store),
     requestRouter: (): VueRouter => requestRouter(router),
     openPortal: (
-      instance: typeof Vue.prototype,
+      instance: App,
       toApp: string,
       toPortal: string,
       order: number,

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

@@ -1,6 +1,6 @@
 import { ClassicApplicationScript, RuntimeApi } from '../types'
 import { buildRuntimeApi } from '../api'
-import Vue from 'vue'
+import Vue, { App } from 'vue'
 import { isFunction, isObject } from 'lodash-es'
 import { NextApplication } from './next'
 import { Store } from 'vuex'
@@ -39,13 +39,13 @@ class ClassicApplication extends NextApplication {
     return Promise.resolve(undefined)
   }
 
-  mounted(instance: VueConstructor): Promise<void> {
+  mounted(instance: App): Promise<void> {
     const { mounted: mountedHook } = this.applicationScript
     this.attachPublicApi(mountedHook, instance)
     return Promise.resolve(undefined)
   }
 
-  private attachPublicApi(hook: unknown, instance?: VueConstructor) {
+  private attachPublicApi(hook: unknown, instance?: App) {
     isFunction(hook) &&
       hook({
         ...(instance && {

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

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { App } from 'vue'
 import { RuntimeApi } from '../types'
 
 type VueConstructor = typeof Vue
@@ -13,5 +13,5 @@ export abstract class NextApplication {
 
   abstract ready(): Promise<void>
 
-  abstract mounted(instance: VueConstructor): Promise<void>
+  abstract mounted(instance: App): Promise<void>
 }

packages/web-runtime/src/container/types.ts

@@ -1,6 +1,6 @@
 import { Store } from 'vuex'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Vue, { Component } from 'vue'
+import { App, Component } from 'vue'
 
 /** shim configuration for now, should be typed in a later step */
 export type RuntimeConfiguration = any
@@ -85,7 +85,7 @@ export interface RuntimeApi {
   requestStore: () => Store<unknown>
   requestRouter: () => VueRouter
   openPortal: (
-    instance: typeof Vue.prototype,
+    instance: App,
     toApp: string,
     toPortal: string,
     order: number,

packages/web-runtime/src/defaults/vue.js

@@ -4,7 +4,6 @@ import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
 import VueMeta from 'vue-meta'
-import PortalVue from 'portal-vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
@@ -14,7 +13,6 @@ Vue.use(WebPlugin)
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
-Vue.use(PortalVue)
 
 Vue.component('AvatarImage', Avatar)
 

packages/web-runtime/src/index.ts

@@ -36,8 +36,9 @@ import {
 } from 'web-client/src/helpers'
 import { WebDAV } from 'web-client/src/webdav'
 import { DavProperty } from 'web-client/src/webdav/constants'
-import { configureCompat, h } from 'vue'
+import { configureCompat, createApp, h } from 'vue'
 import { compatConfig } from './compatConfig'
+import PortalVue, { createWormhole } from 'portal-vue'
 
 configureCompat(compatConfig)
 
@@ -67,19 +68,24 @@ export const renderSuccess = (): void => {
   Vue.prototype.$store = store
 
   const applications = Array.from(applicationStore.values())
-  const instance = new Vue({
-    el: '#owncloud',
+  const instance = createApp({
     store,
     router,
     render() {
       return h(pages.success)
     }
   })
 
-  instance.$once('mounted', () => {
-    applications.forEach((application) => application.mounted(instance))
+  // create wormhole
+  instance.config.globalProperties.$wormhole = createWormhole()
+  instance.use(PortalVue, {
+    wormhole: instance.config.globalProperties.$wormhole
   })
 
+  // mount App
+  instance.mount('#owncloud')
+  applications.forEach((application) => application.mounted(instance))
+
   store.watch(
     (state, getters) =>
       getters['runtime/auth/isUserContextReady'] ||
@@ -104,7 +110,7 @@ export const renderSuccess = (): void => {
       if (!userContextReady) {
         return
       }
-      const clientService = instance.$clientService
+      const clientService = instance.config.globalProperties.$clientService
 
       // Load spaces to make them available across the application
       if (store.getters.capabilities?.spaces?.enabled) {
@@ -119,7 +125,7 @@ export const renderSuccess = (): void => {
         store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
           id: personalSpace.id,
           field: 'name',
-          value: instance.$gettext('Personal')
+          value: instance.config.globalProperties.$gettext('Personal')
         })
         return
       }
@@ -130,7 +136,7 @@ export const renderSuccess = (): void => {
         id: user.id,
         driveAlias: `personal/${user.id}`,
         driveType: 'personal',
-        name: instance.$gettext('All files'),
+        name: instance.config.globalProperties.$gettext('All files'),
         webDavPath: `/files/${user.id}`,
         webDavTrashPath: `/trash-bin/${user.id}`,
         serverUrl: configurationManager.serverUrl
@@ -163,7 +169,7 @@ export const renderSuccess = (): void => {
       const publicLinkPassword = store.getters['runtime/auth/publicLinkPassword']
       const space = buildPublicSpaceResource({
         id: publicLinkToken,
-        name: instance.$gettext('Public files'),
+        name: instance.config.globalProperties.$gettext('Public files'),
         ...(publicLinkPassword && { publicLinkPassword }),
         serverUrl: configurationManager.serverUrl
       })
@@ -198,13 +204,12 @@ export const renderFailure = async (err: Error): Promise<void> => {
   await announceTranslations({ vue: Vue, supportedLanguages, translations })
   await announceTheme({ store, vue: Vue, designSystem })
   console.error(err)
-  new Vue({
-    el: '#owncloud',
+  createApp({
     store,
     render() {
       return h(pages.failure)
     }
-  })
+  }).mount('#owncloud')
 }
 ;(window as any).runtimeLoaded({
   bootstrap,

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

@@ -1,8 +1,7 @@
 import DesignSystem from '@ownclouders/design-system'
 import GetTextPlugin from 'vue-gettext'
 import Vue from 'vue'
-
-window.Vue = Vue
+;(window as any).Vue = Vue
 
 export interface DefaultPluginsOptions {
   designSystem?: boolean

web.d.ts

@@ -7,6 +7,11 @@ declare module 'vue' {
   export * from '@vue/runtime-dom'
   const { configureCompat } = Vue
   export { configureCompat }
+
+  export interface GlobalComponents {
+    Portal: typeof import('portal-vue')['Portal']
+    PortalTarget: typeof import('portal-vue')['PortalTarget']
+  }
 }
 declare module '*.vue' {
   import Vue from 'vue'