chore(RoomSelector): dynamic import component in plugins to reduce bu…

…ndle size Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Feb 19, 2024 · c2847f4 · c2847f4
1 parent 60d632d
commit c2847f4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 24 deletions.
diff --git a/src/collections.js b/src/collections.js
@@ -41,18 +41,21 @@ import Vue from 'vue'
 				container.id = 'spreed-room-select'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
+
 				const RoomSelector = () => import('./components/RoomSelector.vue')
 				const ComponentVM = new Vue({
+					el: container,
 					render: h => h(RoomSelector, {
 						props: {
 							// Even if it is used from Talk the Collections menu is
 							// independently loaded, so the properties that depend
 							// on the store need to be explicitly injected.
 							container: window.store ? window.store.getters.getMainContainerSelector() : undefined,
+							isPlugin: true,
 						},
 					}),
 				})
-				ComponentVM.$mount(container)
+
 				ComponentVM.$root.$on('close', () => {
 					ComponentVM.$el.remove()
 					ComponentVM.$destroy()

diff --git a/src/components/RoomSelector.spec.js b/src/components/RoomSelector.spec.js
@@ -218,7 +218,7 @@ describe('RoomSelector', () => {
 			// Arrange
 			const wrapper = await mountRoomSelector()
 			const eventHandler = jest.fn()
-			wrapper.vm.$root.$on('select', eventHandler)
+			wrapper.vm.$on('select', eventHandler)
 
 			// Act: click on second item, then click 'Select conversation'
 			const list = wrapper.findComponent({ name: 'ConversationsSearchListVirtual' })
@@ -236,6 +236,20 @@ describe('RoomSelector', () => {
 			// Arrange
 			const wrapper = await mountRoomSelector()
 			const eventHandler = jest.fn()
+			wrapper.vm.$on('close', eventHandler)
+
+			// Act: close modal
+			const modal = wrapper.findComponent({ name: 'NcModal' })
+			await modal.vm.$emit('close')
+
+			// Assert
+			expect(eventHandler).toHaveBeenCalled()
+		})
+
+		it('emits close event on $root as plugin', async () => {
+			// Arrange
+			const wrapper = await mountRoomSelector({ isPlugin: true })
+			const eventHandler = jest.fn()
 			wrapper.vm.$root.$on('close', eventHandler)
 
 			// Act: close modal

diff --git a/src/components/RoomSelector.vue b/src/components/RoomSelector.vue
@@ -124,6 +124,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Whether component is used as plugin and should emit on $root.
+		 */
+		isPlugin: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['close', 'select'],
@@ -201,19 +209,23 @@ export default {
 		},
 
 		close() {
-			// FIXME: should not emit on $root but on itself
-			this.$root.$emit('close')
-			this.$emit('close')
+			if (this.isPlugin) {
+				this.$root.$emit('close')
+			} else {
+				this.$emit('close')
+			}
 		},
 
 		onSelect(item) {
 			this.selectedRoom = item
 		},
 
 		onSubmit() {
-			// FIXME: should not emit on $root but on itself
-			this.$root.$emit('select', this.selectedRoom)
-			this.$emit('select', this.selectedRoom)
+			if (this.isPlugin) {
+				this.$root.$emit('select', this.selectedRoom)
+			} else {
+				this.$emit('select', this.selectedRoom)
+			}
 		},
 	},
 }

diff --git a/src/deck.js b/src/deck.js
@@ -28,8 +28,6 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath, generateUrl } from '@nextcloud/router'
 
-import RoomSelector from './components/RoomSelector.vue'
-
 import { postRichObjectToConversation } from './services/messagesService.js'
 
 import '@nextcloud/dialogs/style.css'
@@ -84,13 +82,16 @@ import '@nextcloud/dialogs/style.css'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
 
-				const ComponentVM = Vue.extend(RoomSelector)
-				const vm = new ComponentVM({
+				const RoomSelector = () => import('./components/RoomSelector.vue')
+				const vm = new Vue({
 					el: container,
-					propsData: {
-						dialogTitle: t('spreed', 'Post to conversation'),
-						showPostableOnly: true,
-					},
+					render: h => h(RoomSelector, {
+						props: {
+							dialogTitle: t('spreed', 'Post to conversation'),
+							showPostableOnly: true,
+							isPlugin: true,
+						},
+					}),
 				})
 
 				vm.$root.$on('close', () => {

diff --git a/src/maps.js b/src/maps.js
@@ -28,8 +28,6 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath, generateUrl } from '@nextcloud/router'
 
-import RoomSelector from './components/RoomSelector.vue'
-
 import { postRichObjectToConversation } from './services/messagesService.js'
 
 import '@nextcloud/dialogs/style.css'
@@ -83,13 +81,16 @@ import '@nextcloud/dialogs/style.css'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
 
-				const ComponentVM = Vue.extend(RoomSelector)
-				const vm = new ComponentVM({
+				const RoomSelector = () => import('./components/RoomSelector.vue')
+				const vm = new Vue({
 					el: container,
-					propsData: {
-						dialogTitle: t('spreed', 'Share to conversation'),
-						showPostableOnly: true,
-					},
+					render: h => h(RoomSelector, {
+						props: {
+							dialogTitle: t('spreed', 'Share to conversation'),
+							showPostableOnly: true,
+							isPlugin: true,
+						},
+					}),
 				})
 
 				vm.$root.$on('close', () => {