Merge pull request #1662 from nextcloud/perf/bundle-size-imports

perf: Use individual component imports to reduce bundle size and build time

Author: enjeck

src/App.vue

@@ -46,13 +46,11 @@
 </template>
 
 <script>
-import {
-	NcAppContent,
-	NcAppNavigation,
-	NcAppNavigationNew,
-	NcAppNavigationItem,
-	NcContent,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
+import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcContent from '@nextcloud/vue/components/NcContent'
 import { loadState } from '@nextcloud/initial-state'
 import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'

src/components/AppSettings.vue

@@ -86,19 +86,17 @@
 </template>
 
 <script>
-import {
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcAppSettingsShortcutsSection,
-	NcHotkeyList,
-	NcHotkey,
-	NcRadioGroup,
-	NcRadioGroupButton,
-	NcFormBox,
-	NcFormBoxButton,
-	NcFormGroup,
-	NcTextField,
-} from '@nextcloud/vue'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 

src/components/CategoriesList.vue

@@ -43,11 +43,9 @@
 </template>
 
 <script>
-import {
-	NcAppNavigationItem,
-	NcAppNavigationCaption,
-	NcCounterBubble,
-} from '@nextcloud/vue'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import { Fragment } from 'vue-frag'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'

src/components/CreateSampleButton.vue

@@ -11,9 +11,7 @@
 </template>
 <script>
 
-import {
-	NcButton,
-} from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 

src/components/Dashboard.vue

@@ -34,7 +34,9 @@
 </template>
 
 <script>
-import { NcButton, NcDashboardWidget, NcDashboardWidgetItem } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDashboardWidget from '@nextcloud/vue/components/NcDashboardWidget'
+import NcDashboardWidgetItem from '@nextcloud/vue/components/NcDashboardWidgetItem'
 import { generateUrl } from '@nextcloud/router'
 
 import Plus from 'vue-material-design-icons/Plus.vue'

src/components/EditorEasyMDE.vue

@@ -39,10 +39,8 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
-import {
-	NcActions,
-	NcActionButton,
-} from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import { basename, relative } from 'path'
 
 import store from '../store.js'

src/components/HelpMobile.vue

@@ -42,7 +42,7 @@
 import { generateFilePath } from '@nextcloud/router'
 
 import { Fragment } from 'vue-frag'
-import { NcFormGroup } from '@nextcloud/vue'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
 
 export default {
 	components: {

src/components/Loading.vue

@@ -8,9 +8,7 @@
 </template>
 <script>
 
-import {
-	NcAppContent,
-} from '@nextcloud/vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 
 export default {
 	name: 'Loading',

src/components/Modal/EditorHint.vue

@@ -24,7 +24,8 @@
 	</NcModal>
 </template>
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import { loadState } from '@nextcloud/initial-state'
 
 import { deleteEditorMode, setSettings } from './../../NotesService.js'

src/components/NoteItem.vue

@@ -100,7 +100,10 @@
 </template>
 
 <script>
-import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import AlertOctagonOutlineIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'