diff --git a/packages/web-app-skeleton/src/app.js b/packages/web-app-skeleton/src/app.js index 94cafae01d4..f896860b526 100644 --- a/packages/web-app-skeleton/src/app.js +++ b/packages/web-app-skeleton/src/app.js @@ -11,15 +11,6 @@ const appInfo = { const injectExtensions = async api => { // the promise is just there to showcase lazy loading of extensions await new Promise(resolve => setTimeout(resolve, 2000)) - console.log('#############################################################################') - console.log('# FROM THE APP (SKELETON)') - console.log('# a maybe long running task like wopi started') - console.log('#############################################################################') - await new Promise(resolve => setTimeout(resolve, 10000)) - console.log('#############################################################################') - console.log('# FROM THE APP (SKELETON)') - console.log('# the server answered and we have all information to register a extension') - console.log('#############################################################################') api.announceExtension({ extension: 'txt', @@ -37,10 +28,6 @@ const injectExtensions = async api => { 'files-public-list' ] }) - console.log('#############################################################################') - console.log('# FROM THE APP (SKELETON)') - console.log('# new extension is now registered, ...') - console.log('#############################################################################') } export default { diff --git a/packages/web-runtime/src/container/api.ts b/packages/web-runtime/src/container/api.ts index 3a70627dbf0..3543ce0f51d 100644 --- a/packages/web-runtime/src/container/api.ts +++ b/packages/web-runtime/src/container/api.ts @@ -206,7 +206,7 @@ const requestRouter = (router: VueRouter): VueRouter => { } /** - * exposed runtime api, this wraps all available api actions in a closure and provide application + * exposed runtime api, this wraps all available api actions in a closure and provides application * specific data to the implementations. * * each application get it's own provisioned api! diff --git a/packages/web-runtime/src/container/application/classic.ts b/packages/web-runtime/src/container/application/classic.ts index 25b09fb61a2..e1179312218 100644 --- a/packages/web-runtime/src/container/application/classic.ts +++ b/packages/web-runtime/src/container/application/classic.ts @@ -19,7 +19,7 @@ class ClassicApplication extends NextApplication { this.applicationScript = applicationScript } - prepare(): Promise { + initialize(): Promise { const { routes, navItems, translations, quickActions, store } = this.applicationScript routes && this.runtimeApi.announceRoutes(routes) @@ -31,23 +31,30 @@ class ClassicApplication extends NextApplication { return Promise.resolve(undefined) } - register(): Promise { + ready(): Promise { + const { ready: readyHook } = this.applicationScript + this.attachPublicApi(readyHook) return Promise.resolve(undefined) } mounted(instance: Vue): Promise { const { mounted: mountedHook } = this.applicationScript - isFunction(mountedHook) && - mountedHook({ - portal: { - open: (...args) => this.runtimeApi.openPortal.apply(instance, [instance, ...args]) - }, + this.attachPublicApi(mountedHook, instance) + return Promise.resolve(undefined) + } + + private attachPublicApi(hook: unknown, instance?: Vue) { + isFunction(hook) && + hook({ + ...(instance && { + portal: { + open: (...args) => this.runtimeApi.openPortal.apply(instance, [instance, ...args]) + } + }), store: this.runtimeApi.requestStore(), router: this.runtimeApi.requestRouter(), - ...this.runtimeApi + announceExtension: this.runtimeApi.announceExtension }) - - return Promise.resolve(undefined) } } diff --git a/packages/web-runtime/src/container/application/index.ts b/packages/web-runtime/src/container/application/index.ts index 54fcf8e6df0..e910e6ed9e3 100644 --- a/packages/web-runtime/src/container/application/index.ts +++ b/packages/web-runtime/src/container/application/index.ts @@ -46,7 +46,7 @@ export const buildApplication = async ({ let application: NextApplication try { - /** add valuable sniffer to detect nex applications, then implement next application factory */ + /** add valuable sniffer to detect next applications, then implement next application factory */ if (!isObject(applicationScript.appInfo)) { throw new RuntimeError('next applications not implemented yet, stay tuned') } else { diff --git a/packages/web-runtime/src/container/application/next.ts b/packages/web-runtime/src/container/application/next.ts index 4ce7fab4c89..98b50ea05d7 100644 --- a/packages/web-runtime/src/container/application/next.ts +++ b/packages/web-runtime/src/container/application/next.ts @@ -8,9 +8,9 @@ export abstract class NextApplication { this.runtimeApi = runtimeApi } - abstract register(): Promise + abstract initialize(): Promise - abstract prepare(): Promise + abstract ready(): Promise abstract mounted(instance: Vue): Promise } diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts index 9eb6e5634d1..4d081ef1e6f 100644 --- a/packages/web-runtime/src/container/bootstrap.ts +++ b/packages/web-runtime/src/container/bootstrap.ts @@ -75,7 +75,7 @@ export const announceApplications = async ({ translations: unknown supportedLanguages: { [key: string]: string } }): Promise => { - const { apps: applications = [], external_apps: externalApplications } = runtimeConfiguration + const { apps: applications = [], external_apps: externalApplications = [] } = runtimeConfiguration const allApplications = [ ...applications.map(application => `web-app-${application}`), @@ -87,8 +87,8 @@ export const announceApplications = async ({ buildApplication({ applicationPath, store, supportedLanguages, router, translations }) ) ) - await Promise.all(applicationImplementations.map(application => application.prepare())) - await Promise.all(applicationImplementations.map(application => application.register())) + await Promise.all(applicationImplementations.map(application => application.initialize())) + await Promise.all(applicationImplementations.map(application => application.ready())) } /** diff --git a/packages/web-runtime/src/container/store.ts b/packages/web-runtime/src/container/store.ts index 57652100282..210c7da261d 100644 --- a/packages/web-runtime/src/container/store.ts +++ b/packages/web-runtime/src/container/store.ts @@ -1,7 +1,7 @@ import { NextApplication } from './application' /** - * main propose of this is to keep a reference to all announced applications. + * main purpose of this is to keep a reference to all announced applications. * this is used for example in the mounted hook outside container module */ export const applicationStore = new Map() diff --git a/packages/web-runtime/src/container/types.ts b/packages/web-runtime/src/container/types.ts index b5b149f3296..54ba576ba07 100644 --- a/packages/web-runtime/src/container/types.ts +++ b/packages/web-runtime/src/container/types.ts @@ -47,6 +47,7 @@ export interface ClassicApplicationScript { navItems?: ApplicationNavigationItem[] quickActions?: ApplicationQuickActions translations?: unknown + ready?: () => void mounted?: () => void } diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js index 147a6fbdf37..55fc278ae5e 100644 --- a/packages/web-runtime/src/defaults/vue.js +++ b/packages/web-runtime/src/defaults/vue.js @@ -27,7 +27,6 @@ Vue.use(MediaSource) Vue.use(WebPlugin) Vue.use(VueResize) Vue.use(VueMeta, { - // optional pluginOptions refreshOnceOnNavigation: true }) Vue.use(ChunkedUpload) diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts index a1e1814e23b..49bd62c6ca7 100644 --- a/packages/web-runtime/src/index.ts +++ b/packages/web-runtime/src/index.ts @@ -46,11 +46,10 @@ export const renderSuccess = (): void => { }) } -export const renderFailure = async (err: Error): Promise => { - console.error(err) +export const renderFailure = (err: Error): Promise => { await announceTranslations({ vue: Vue, supportedLanguages, translations }) await announceTheme({ store, vue: Vue, designSystem }) - + console.error(err) new Vue({ el: '#owncloud', store,