From 7119137a7531fb2c116c2a10cea90b0b7b8ec1c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 8 Jul 2021 10:35:42 +0200
Subject: [PATCH] Use async import for vue component on collections entrypoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/helpers/selector.js        |  5 ++---
 src/init-collections.js        | 12 ++++++++----
 src/views/FileSharingPicker.js |  9 ++++-----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/helpers/selector.js b/src/helpers/selector.js
index 392a06b4c..9aa8c1138 100644
--- a/src/helpers/selector.js
+++ b/src/helpers/selector.js
@@ -25,9 +25,8 @@ const buildSelector = (selector, propsData = {}) => {
 	return new Promise((resolve, reject) => {
 		const container = document.createElement('div')
 		document.getElementById('body-user').append(container)
-		const View = Vue.extend(selector)
-		const ComponentVM = new View({
-			propsData,
+		const ComponentVM = new Vue({
+			render: (h) => h(selector, propsData),
 		}).$mount(container)
 		ComponentVM.$root.$on('close', () => {
 			ComponentVM.$el.remove()
diff --git a/src/init-collections.js b/src/init-collections.js
index bcafd6fc1..e066ba204 100644
--- a/src/init-collections.js
+++ b/src/init-collections.js
@@ -22,8 +22,6 @@
 
 import Vue from 'vue'
 
-import BoardSelector from './BoardSelector'
-import CardSelector from './CardSelector'
 import './../css/collections.css'
 import FileSharingPicker from './views/FileSharingPicker'
 import { buildSelector } from './helpers/selector'
@@ -45,13 +43,19 @@ window.addEventListener('DOMContentLoaded', () => {
 	}
 
 	window.OCP.Collaboration.registerType('deck', {
-		action: () => buildSelector(BoardSelector),
+		action: () => {
+			const BoardSelector = () => import('./BoardSelector')
+			buildSelector(BoardSelector)
+		},
 		typeString: t('deck', 'Link to a board'),
 		typeIconClass: 'icon-deck',
 	})
 
 	window.OCP.Collaboration.registerType('deck-card', {
-		action: () => buildSelector(CardSelector),
+		action: () => {
+			const CardSelector = () => import('./CardSelector')
+			buildSelector(CardSelector)
+		},
 		typeString: t('deck', 'Link to a card'),
 		typeIconClass: 'icon-deck',
 	})
diff --git a/src/views/FileSharingPicker.js b/src/views/FileSharingPicker.js
index 66f88777d..be5930038 100644
--- a/src/views/FileSharingPicker.js
+++ b/src/views/FileSharingPicker.js
@@ -21,7 +21,6 @@
  */
 
 import Vue from 'vue'
-import CardSelector from '../CardSelector'
 import { createShare } from '../services/SharingApi'
 
 export default {
@@ -34,12 +33,12 @@ export default {
 			container.id = 'deck-board-select'
 			const body = document.getElementById('body-user')
 			body.append(container)
-			const SelectorView = Vue.extend(CardSelector)
-			const ComponentVM = new SelectorView({
-				propsData: {
+			const CardSelector = () => import('./../CardSelector')
+			const ComponentVM = new Vue({
+				render: (h) => h(CardSelector, {
 					title: t('deck', 'Share {file} with a Deck card', { file: decodeURIComponent(self.fileInfo.name) }),
 					action: t('deck', 'Share'),
-				},
+				}),
 			})
 			ComponentVM.$mount(container)
 			ComponentVM.$root.$on('close', () => {