perf: make routes lazy

Makes all routes lazy so their components don't get loaded with the initial load, but when navigating to the routes.

packages/web-app-admin-settings/src/index.ts

@@ -1,11 +1,11 @@
 import translations from '../l10n/translations.json'
 import General from './views/General.vue'
-import Users from './views/Users.vue'
 import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
 import { Ability } from '@ownclouders/web-client'
 import {
   AppNavigationItem,
+  ComponentLoader,
   defineWebApplication,
   useAbility,
   useUserStore
@@ -41,7 +41,7 @@ export const routes = ({ $ability }: { $ability: Ability }): RouteRecordRaw[] =>
   {
     path: '/general',
     name: 'admin-settings-general',
-    component: General,
+    component: ComponentLoader(async () => (await import('./views/General.vue')).default),
     beforeEnter: (to, from, next) => {
       if (!$ability.can('read-all', 'Setting')) {
         next({ path: '/' })
@@ -56,7 +56,7 @@ export const routes = ({ $ability }: { $ability: Ability }): RouteRecordRaw[] =>
   {
     path: '/users',
     name: 'admin-settings-users',
-    component: Users,
+    component: ComponentLoader(async () => (await import('./views/Users.vue')).default),
     beforeEnter: (to, from, next) => {
       if (!$ability.can('read-all', 'Account')) {
         next({ path: '/' })
@@ -71,7 +71,7 @@ export const routes = ({ $ability }: { $ability: Ability }): RouteRecordRaw[] =>
   {
     path: '/groups',
     name: 'admin-settings-groups',
-    component: Groups,
+    component: ComponentLoader(async () => (await import('./views/Groups.vue')).default),
     beforeEnter: (to, from, next) => {
       if (!$ability.can('read-all', 'Group')) {
         next({ path: '/' })
@@ -86,7 +86,7 @@ export const routes = ({ $ability }: { $ability: Ability }): RouteRecordRaw[] =>
   {
     path: '/spaces',
     name: 'admin-settings-spaces',
-    component: Spaces,
+    component: ComponentLoader(async () => (await import('./views/Spaces.vue')).default),
     beforeEnter: (to, from, next) => {
       if (!$ability.can('read-all', 'Drive')) {
         next({ path: '/' })

packages/web-app-draw-io/src/index.ts

@@ -1,7 +1,11 @@
 import { Resource } from '@ownclouders/web-client'
-import { AppWrapperRoute, defineWebApplication, useUserStore } from '@ownclouders/web-pkg'
+import {
+  AppWrapperRoute,
+  ComponentLoader,
+  defineWebApplication,
+  useUserStore
+} from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
-import App from './App.vue'
 import { useGettext } from 'vue3-gettext'
 
 const applicationId = 'draw-io'
@@ -15,11 +19,14 @@ export default defineWebApplication({
       {
         name: 'draw-io',
         path: '/:driveAliasAndItem(.*)?',
-        component: AppWrapperRoute(App, {
-          applicationId,
-          importResourceWithExtension(resource: Resource) {
-            return resource.extension === 'vsdx' ? 'drawio' : null
-          }
+        component: ComponentLoader(async () => {
+          const App = (await import('./App.vue')).default
+          return AppWrapperRoute(App, {
+            applicationId,
+            importResourceWithExtension(resource: Resource) {
+              return resource.extension === 'vsdx' ? 'drawio' : null
+            }
+          })
         }),
         meta: {
           authContext: 'hybrid',

packages/web-app-epub-reader/src/index.ts

@@ -1,6 +1,6 @@
 import { useGettext } from 'vue3-gettext'
 import translations from '../l10n/translations.json'
-import { AppWrapperRoute, defineWebApplication } from '@ownclouders/web-pkg'
+import { AppWrapperRoute, ComponentLoader, defineWebApplication } from '@ownclouders/web-pkg'
 
 export default defineWebApplication({
   setup() {
@@ -11,7 +11,7 @@ export default defineWebApplication({
     const routes = [
       {
         path: '/:driveAliasAndItem(.*)?',
-        component: async () => {
+        component: ComponentLoader(async () => {
           // lazy loading to avoid loading the epubjs package on page load
           const EpubReader = (await import('./App.vue')).default
           return AppWrapperRoute(EpubReader, {
@@ -20,7 +20,7 @@ export default defineWebApplication({
               responseType: 'blob'
             }
           })
-        },
+        }),
         name: 'epub-reader',
         meta: {
           authContext: 'hybrid',

packages/web-app-external/src/index.ts

@@ -4,10 +4,10 @@ import {
   useCapabilityStore,
   useAppsStore,
   useClientService,
-  useRequest
+  useRequest,
+  ComponentLoader
 } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
-import App from './App.vue'
 import { stringify } from 'qs'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { join } from 'path'
@@ -23,8 +23,11 @@ const routes = [
   {
     name: 'apps',
     path: '/:driveAliasAndItem(.*)?',
-    component: AppWrapperRoute(App, {
-      applicationId: appInfo.id
+    component: ComponentLoader(async () => {
+      const App = (await import('./App.vue')).default
+      return AppWrapperRoute(App, {
+        applicationId: appInfo.id
+      })
     }),
     meta: {
       authContext: 'hybrid',

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

@@ -1,15 +1,7 @@
-import App from './App.vue'
-import Favorites from './views/Favorites.vue'
-import FilesDrop from './views/FilesDrop.vue'
-import SharedWithMe from './views/shares/SharedWithMe.vue'
-import SharedWithOthers from './views/shares/SharedWithOthers.vue'
-import SharedViaLink from './views/shares/SharedViaLink.vue'
-import SpaceDriveResolver from './views/spaces/DriveResolver.vue'
-import SpaceProjects from './views/spaces/Projects.vue'
-import TrashOverview from './views/trash/Overview.vue'
 import translations from '../l10n/translations.json'
 import {
   ApplicationInformation,
+  ComponentLoader,
   defineWebApplication,
   useCapabilityStore,
   useSpacesStore,
@@ -18,9 +10,6 @@ import {
 import { extensions } from './extensions'
 import { buildRoutes } from '@ownclouders/web-pkg'
 import { AppNavigationItem } from '@ownclouders/web-pkg'
-
-// dirty: importing view from other extension within project
-import SearchResults from '../../web-app-search/src/views/List.vue'
 import { isPersonalSpaceResource, isShareSpaceResource } from '@ownclouders/web-client'
 import { ComponentCustomProperties } from 'vue'
 import { extensionPoints } from './extensionPoints'
@@ -140,21 +129,36 @@ export default defineWebApplication({
         }
       },
       routes: buildRoutes({
-        App,
-        Favorites,
-        FilesDrop,
-        SearchResults,
+        App: ComponentLoader(async () => (await import('./App.vue')).default),
+        Favorites: ComponentLoader(async () => (await import('./views/Favorites.vue')).default),
+        FilesDrop: ComponentLoader(async () => (await import('./views/FilesDrop.vue')).default),
+        SearchResults: ComponentLoader(
+          // FIXME: import from another app
+          async () => (await import('../../web-app-search/src/views/List.vue')).default
+        ),
         Shares: {
-          SharedViaLink,
-          SharedWithMe,
-          SharedWithOthers
+          SharedViaLink: ComponentLoader(
+            async () => (await import('./views/shares/SharedViaLink.vue')).default
+          ),
+          SharedWithMe: ComponentLoader(
+            async () => (await import('./views/shares/SharedWithMe.vue')).default
+          ),
+          SharedWithOthers: ComponentLoader(
+            async () => (await import('./views/shares/SharedWithOthers.vue')).default
+          )
         },
         Spaces: {
-          DriveResolver: SpaceDriveResolver,
-          Projects: SpaceProjects
+          DriveResolver: ComponentLoader(
+            async () => (await import('./views/spaces/DriveResolver.vue')).default
+          ),
+          Projects: ComponentLoader(
+            async () => (await import('./views/spaces/Projects.vue')).default
+          )
         },
         Trash: {
-          Overview: TrashOverview
+          Overview: ComponentLoader(
+            async () => (await import('./views/trash/Overview.vue')).default
+          )
         }
       }),
       navItems,

packages/web-app-ocm/src/index.ts

@@ -1,5 +1,9 @@
-import App from './views/App.vue'
-import { defineWebApplication, useRouter, useUserStore } from '@ownclouders/web-pkg'
+import {
+  ComponentLoader,
+  defineWebApplication,
+  useRouter,
+  useUserStore
+} from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import { extensions } from './extensions'
 import { RouteRecordRaw } from 'vue-router'
@@ -15,7 +19,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/invitations',
     name: 'ocm-app-invitations',
-    component: App,
+    component: ComponentLoader(async () => (await import('./views/App.vue')).default),
     meta: {
       patchCleanPath: true,
       title: 'Invitations'

packages/web-app-pdf-viewer/src/index.ts

@@ -1,6 +1,5 @@
 import translations from '../l10n/translations.json'
-import { AppWrapperRoute } from '@ownclouders/web-pkg'
-import PdfViewer from './App.vue'
+import { AppWrapperRoute, ComponentLoader } from '@ownclouders/web-pkg'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg: string) {
@@ -10,11 +9,14 @@ function $gettext(msg: string) {
 const routes = [
   {
     path: '/:driveAliasAndItem(.*)?',
-    component: AppWrapperRoute(PdfViewer, {
-      applicationId: 'pdf-viewer',
-      urlForResourceOptions: {
-        disposition: 'inline'
-      }
+    component: ComponentLoader(async () => {
+      const PdfViewer = (await import('./App.vue')).default
+      return AppWrapperRoute(PdfViewer, {
+        applicationId: 'pdf-viewer',
+        urlForResourceOptions: {
+          disposition: 'inline'
+        }
+      })
     }),
     name: 'pdf-viewer',
     meta: {

packages/web-app-preview/src/App.vue

@@ -98,7 +98,7 @@ import { CachedFile } from './helpers/types'
 import { getMimeTypes } from './mimeTypes'
 import { PanzoomEventDetail } from '@panzoom/panzoom'
 
-export const appId = 'preview'
+const appId = 'preview'
 
 export default defineComponent({
   name: 'Preview',

packages/web-app-preview/src/index.ts

@@ -1,23 +1,25 @@
-import { AppWrapperRoute, defineWebApplication } from '@ownclouders/web-pkg'
+import { AppWrapperRoute, ComponentLoader, defineWebApplication } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
-import * as app from './App.vue'
 import { useGettext } from 'vue3-gettext'
 import { getMimeTypes } from './mimeTypes'
 
-const { default: App, appId } = app
-
 export default defineWebApplication({
   setup({ applicationConfig }) {
     const { $gettext } = useGettext()
 
+    const appId = 'preview'
+
     const routes = [
       {
         path: '/:driveAliasAndItem(.*)?',
-        component: AppWrapperRoute(App, {
-          applicationId: appId,
-          urlForResourceOptions: {
-            disposition: 'inline'
-          }
+        component: ComponentLoader(async () => {
+          const App = (await import('./App.vue')).default
+          return AppWrapperRoute(App, {
+            applicationId: appId,
+            urlForResourceOptions: {
+              disposition: 'inline'
+            }
+          })
         }),
         name: 'media',
         meta: {

packages/web-app-search/src/index.ts

@@ -1,38 +1,34 @@
-import App from './App.vue'
-import List from './views/List.vue'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import translations from '../l10n/translations.json'
-import { ApplicationInformation, defineWebApplication } from '@ownclouders/web-pkg'
+import { ApplicationInformation, ComponentLoader, defineWebApplication } from '@ownclouders/web-pkg'
 import { extensions } from './extensions'
 import { extensionPoints } from './extensionPoints'
-
-// just a dummy function to trick gettext tools
-const $gettext = (msg: string) => {
-  return msg
-}
-
-const appInfo: ApplicationInformation = {
-  name: $gettext('Search'),
-  id: 'search',
-  icon: 'folder',
-  isFileEditor: false
-}
+import { useGettext } from 'vue3-gettext'
 
 export default defineWebApplication({
   setup() {
+    const { $gettext } = useGettext()
+
+    const appInfo: ApplicationInformation = {
+      name: $gettext('Search'),
+      id: 'search',
+      icon: 'folder',
+      isFileEditor: false
+    }
+
     return {
       appInfo,
       routes: [
         {
           name: 'search',
           path: '/',
-          component: App,
+          component: ComponentLoader(async () => (await import('./App.vue')).default),
           children: [
             {
               name: 'provider-list',
               path: 'list/:page?',
-              component: List,
+              component: ComponentLoader(async () => (await import('./views/List.vue')).default),
               meta: {
                 authContext: 'user',
                 contextQueryItems: ['term', 'provider']

packages/web-app-text-editor/src/index.ts

@@ -1,9 +1,9 @@
 import { useGettext } from 'vue3-gettext'
 import translations from '../l10n/translations.json'
-import TextEditor from './App.vue'
 import {
   AppWrapperRoute,
   ApplicationFileExtension,
+  ComponentLoader,
   defineWebApplication,
   useUserStore
 } from '@ownclouders/web-pkg'
@@ -81,8 +81,11 @@ export default defineWebApplication({
     const routes = [
       {
         path: '/:driveAliasAndItem(.*)?',
-        component: AppWrapperRoute(TextEditor, {
-          applicationId: appId
+        component: ComponentLoader(async () => {
+          const TextEditor = (await import('./App.vue')).default
+          return AppWrapperRoute(TextEditor, {
+            applicationId: appId
+          })
         }),
         name: 'text-editor',
         meta: {

packages/web-app-webfinger/src/index.ts

@@ -1,5 +1,5 @@
+import { ComponentLoader } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
-import Resolve from './views/Resolve.vue'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg: string) {
@@ -27,7 +27,7 @@ const routes = () => [
   {
     path: '/resolve',
     name: 'webfinger-resolve',
-    component: Resolve,
+    component: ComponentLoader(async () => (await import('./views/Resolve.vue')).default),
     meta: {
       authContext: 'idp',
       title: $gettext('Resolve destination'),