Use async import for vue component on collections entrypoint

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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()

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',
 	})

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', () => {