perf(bundles): migrate nc-vue imports

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

46 files changed, 169 insertions, 113 deletions

diff --git a/jest.config.js b/jest.config.js
index 4f535d90..c422505d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,6 @@
-const esModules = ['p-limit', 'yocto-queue', 'vue-material-design-icons'].join('|')
+const esModules = [
+	'p-limit',
+].join('|')
 
 module.exports = {
 	preset: 'ts-jest',
@@ -15,6 +17,7 @@ module.exports = {
 		'^.+\\.ts$': 'ts-jest',
 		'^.+\\.js$': 'babel-jest',
 		'^.+\\.vue$': '@vue/vue2-jest',
+		'^.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$': 'jest-transform-stub',
 	},
-	transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+	transformIgnorePatterns: [`/node_modules/(?!${esModules})/.+\\.js$`],
 }
diff --git a/package-lock.json b/package-lock.json
index 80888203..cbcb7947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
 				"eslint-import-resolver-typescript": "^3.5.5",
 				"jest": "^29.5.0",
 				"jest-environment-jsdom": "^29.5.0",
+				"jest-transform-stub": "^2.0.0",
 				"stylelint": "^14.16.1",
 				"stylelint-config-recommended-scss": "^7.0.0",
 				"ts-jest": "^29.1.0",
@@ -11560,6 +11561,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/jest-transform-stub": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+			"integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==",
+			"dev": true
+		},
 		"node_modules/jest-util": {
 			"version": "29.5.0",
 			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
@@ -26327,6 +26334,12 @@
 				}
 			}
 		},
+		"jest-transform-stub": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz",
+			"integrity": "sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==",
+			"dev": true
+		},
 		"jest-util": {
 			"version": "29.5.0",
 			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.5.0.tgz",
diff --git a/package.json b/package.json
index 981351b1..3c3aee45 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
 		"eslint-import-resolver-typescript": "^3.5.5",
 		"jest": "^29.5.0",
 		"jest-environment-jsdom": "^29.5.0",
+		"jest-transform-stub": "^2.0.0",
 		"stylelint": "^14.16.1",
 		"stylelint-config-recommended-scss": "^7.0.0",
 		"ts-jest": "^29.1.0",
diff --git a/src/components/Actions/ActionCopyNtoFN.vue b/src/components/Actions/ActionCopyNtoFN.vue
index aeeb3917..fd669399 100644
--- a/src/components/Actions/ActionCopyNtoFN.vue
+++ b/src/components/Actions/ActionCopyNtoFN.vue
@@ -29,7 +29,7 @@
 	</ActionButton>
 </template>
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { NcActionButton as ActionButton } from '@nextcloud/vue'
 import ActionsMixin from '../../mixins/ActionsMixin.js'
 import IconCopy from 'vue-material-design-icons/ContentCopy.vue'
 
diff --git a/src/components/Actions/ActionToggleYear.vue b/src/components/Actions/ActionToggleYear.vue
index f74a2cf4..e00802c3 100644
--- a/src/components/Actions/ActionToggleYear.vue
+++ b/src/components/Actions/ActionToggleYear.vue
@@ -28,7 +28,7 @@
 	</ActionCheckbox>
 </template>
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import { NcActionCheckbox as ActionCheckbox } from '@nextcloud/vue'
 import ActionsMixin from '../../mixins/ActionsMixin.js'
 
 export default {
diff --git a/src/components/AppContent/ChartContent.vue b/src/components/AppContent/ChartContent.vue
index a4fe165e..0a3fb7d5 100644
--- a/src/components/AppContent/ChartContent.vue
+++ b/src/components/AppContent/ChartContent.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import { NcAppContent as AppContent } from '@nextcloud/vue'
 
 import OrgChart from '../OrgChart.vue'
 import { getChart, transformNode } from '../../utils/chartUtils.js'
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 57c9e6cd..657e8636 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -67,10 +67,12 @@
 </template>
 <script>
 import { showError } from '@nextcloud/dialogs'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import {
+	NcAppContent as AppContent,
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+	isMobile,
+} from '@nextcloud/vue'
 import IconCircles from '../Icons/IconCircles.vue'
 import CircleDetails from '../CircleDetails.vue'
 import MemberList from '../MemberList.vue'
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 60c3a5c1..cd0b538b 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -72,10 +72,12 @@
 </template>
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcAppContent as AppContent,
+	NcButton as Button,
+	NcEmptyContent as EmptyContent,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 import ContactDetails from '../ContactDetails.vue'
 import ContactsList from '../ContactsList.vue'
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 22be2dad..c299e709 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -90,12 +90,14 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcActionButton as ActionButton,
+	NcActionLink as ActionLink,
+	NcActionText as ActionText,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 import ExitToApp from 'vue-material-design-icons/ExitToApp.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index 9cb402f6..bb2f1d3b 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -66,9 +66,8 @@ import SettingsAddressbook from './Settings/SettingsAddressbook.vue'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook.vue'
 import SettingsImportContacts from './Settings/SettingsImportContacts.vue'
 import SettingsSortContacts from './Settings/SettingsSortContacts.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import { NcCheckboxRadioSwitch as CheckboxRadioSwitch, NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 import { CONTACTS_SETTINGS } from '../../models/constants.ts'
-import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection } from '@nextcloud/vue'
 
 export default {
 	name: 'ContactsSettings',
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 3e86abec..968210f1 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -68,9 +68,11 @@ import { emit } from '@nextcloud/event-bus'
 import download from 'downloadjs'
 import moment from 'moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import {
+	NcActionButton as ActionButton,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+} from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 0f23e1d6..08a61378 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -191,15 +191,17 @@
 <script>
 import { GROUP_ALL_CONTACTS, CHART_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ELLIPSIS_COUNT, CIRCLE_DESC, CONTACTS_SETTINGS } from '../../models/constants.ts'
 
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import ActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import AppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcActionInput as ActionInput,
+	NcActionText as ActionText,
+	NcActionButton,
+	NcAppNavigation as AppNavigation,
+	NcButton as Button,
+	NcCounterBubble,
+	NcAppNavigationItem as AppNavigationItem,
+	NcAppNavigationCaption as AppNavigationCaption,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 import naturalCompare from 'string-natural-compare'
 
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index cd976f96..73794716 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -111,13 +111,15 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
-import ActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
-import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import ActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcActions as Actions,
+	NcActionLink as ActionLink,
+	NcActionButton as ActionButton,
+	NcActionInput as ActionInput,
+	NcActionCheckbox as ActionCheckbox,
+	NcLoadingIcon as IconLoading,
+	NcButton as Button,
+} from '@nextcloud/vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconRename from 'vue-material-design-icons/Pencil.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index f54d50fb..b419640e 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import client from '../../../services/cdav.js'
 
 import addressBookSharee from './SettingsAddressbookSharee.vue'
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
index 91cb9a6d..c77eca3e 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookSharee.vue
@@ -58,8 +58,10 @@ import { showError } from '@nextcloud/dialogs'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconGroup from 'vue-material-design-icons/AccountMultiple.vue'
 import IconUser from 'vue-material-design-icons/Account.vue'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcButton as Button,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 
 export default {
 	name: 'SettingsAddressbookSharee',
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 837a4fb5..8721820e 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -92,10 +92,12 @@
 </template>
 
 <script>
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import Modal from '@nextcloud/vue/dist/Components/NcModal.js'
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
-import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import {
+	NcButton as Button,
+	NcModal as Modal,
+	NcMultiselect as Multiselect,
+	NcLoadingIcon as IconLoading,
+} from '@nextcloud/vue'
 import { encodePath } from '@nextcloud/paths'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateRemoteUrl } from '@nextcloud/router'
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index 9f40df50..40bba15e 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import { NcMultiselect as Multiselect } from '@nextcloud/vue'
 import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
diff --git a/src/components/ChartTemplate.vue b/src/components/ChartTemplate.vue
index a48dded8..c52147cf 100644
--- a/src/components/ChartTemplate.vue
+++ b/src/components/ChartTemplate.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { NcAvatar as Avatar } from '@nextcloud/vue'
 
 export default {
 	name: 'ChartTemplate',
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 90078a77..62b97d0b 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -126,10 +126,12 @@
 import { showError } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
-import AppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails.js'
-import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
-import RichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import {
+	NcAppContentDetails as AppContentDetails,
+	NcAvatar as Avatar,
+	NcButton as Button,
+	NcRichContenteditable as RichContenteditable,
+} from '@nextcloud/vue'
 
 import Login from 'vue-material-design-icons/Login.vue'
 import Logout from 'vue-material-design-icons/Logout.vue'
diff --git a/src/components/CircleDetails/CircleConfigs.vue b/src/components/CircleDetails/CircleConfigs.vue
index aeeb0f03..7067f438 100644
--- a/src/components/CircleDetails/CircleConfigs.vue
+++ b/src/components/CircleDetails/CircleConfigs.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import { NcCheckboxRadioSwitch as CheckboxRadioSwitch } from '@nextcloud/vue'
 import ContentHeading from './ContentHeading.vue'
 
 import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
diff --git a/src/components/CircleDetails/CirclePasswordSettings.vue b/src/components/CircleDetails/CirclePasswordSettings.vue
index f24911e2..916f5577 100644
--- a/src/components/CircleDetails/CirclePasswordSettings.vue
+++ b/src/components/CircleDetails/CirclePasswordSettings.vue
@@ -75,8 +75,10 @@
 
 <script>
 import ContentHeading from './ContentHeading.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Button from '@nextcloud/vue/dist/Components/NcButton.js'
+import {
+	NcCheckboxRadioSwitch as CheckboxRadioSwitch,
+	NcButton as Button,
+} from '@nextcloud/vue'
 
 // Circle setting keys
 const ENFORCE_PASSWORD_PROTECTION = 'enforce_password'
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 5ccfcad1..edd84c71 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -277,16 +277,17 @@ import { showError } from '@nextcloud/dialogs'
 import { stringify } from 'ical.js'
 import qr from 'qr-image'
 import Vue from 'vue'</