Migrate to Vite for bundling and allow to share modules

apps/comments/src/comments-tab.js

@@ -5,13 +5,9 @@
 
 // eslint-disable-next-line n/no-missing-import, import/no-unresolved
 import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw'
-import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { registerCommentsPlugins } from './comments-activity-tab.ts'
 
-// @ts-expect-error __webpack_nonce__ is injected by webpack
-__webpack_nonce__ = btoa(getRequestToken())
-
 if (loadState('comments', 'activityEnabled', false) && OCA?.Activity?.registerSidebarAction !== undefined) {
 	// Do not mount own tab but mount into activity
 	window.addEventListener('DOMContentLoaded', function() {

apps/comments/src/services/CommentsInstance.js

@@ -4,14 +4,10 @@
  */
 
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
 import CommentsApp from '../views/Comments.vue'
 import logger from '../logger.js'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
 // Add translates functions
 Vue.mixin({
 	data() {

apps/dashboard/src/DashboardApp.vue

@@ -122,9 +122,10 @@
 </template>
 
 <script>
-import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Draggable from 'vuedraggable'
@@ -308,6 +309,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Method to register panels that will be called by the integrating apps
 		 *

apps/dashboard/src/main.js

@@ -3,18 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import 'vite/modulepreload-polyfill'
+
 import Vue from 'vue'
 import DashboardApp from './DashboardApp.vue'
-import { translate as t } from '@nextcloud/l10n'
-import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
-import { getRequestToken } from '@nextcloud/auth'
-
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
-Vue.directive('Tooltip', VTooltip)
-
-Vue.prototype.t = t
 
 const Dashboard = Vue.extend(DashboardApp)
 const Instance = new Dashboard({}).$mount('#app-content-vue')

apps/federatedfilesharing/src/main-admin.js

@@ -3,14 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import { loadState } from '@nextcloud/initial-state'
 
 import AdminSettings from './components/AdminSettings.vue'
 
-__webpack_nonce__ = btoa(getRequestToken())
-
 Vue.mixin({
 	methods: {
 		t,

apps/federatedfilesharing/src/main-personal.js

@@ -3,13 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 
 import PersonalSettings from './components/PersonalSettings.vue'
 
-__webpack_nonce__ = btoa(getRequestToken())
-
 Vue.mixin({
 	methods: {
 		t,

apps/files/src/main-personal-settings.js

@@ -4,13 +4,8 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
-
 import PersonalSettings from './components/PersonalSettings.vue'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
 Vue.prototype.t = t
 
 if (!window.TESTING) {

apps/files/src/main.ts

@@ -4,7 +4,6 @@
  */
 import { PiniaVuePlugin } from 'pinia'
 import { getNavigation } from '@nextcloud/files'
-import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
 
 import { pinia } from './store/index.ts'
@@ -14,16 +13,15 @@ import SettingsModel from './models/Setting.js'
 import SettingsService from './services/Settings.js'
 import FilesApp from './FilesApp.vue'
 
-// @ts-expect-error __webpack_nonce__ is injected by webpack
-__webpack_nonce__ = btoa(getRequestToken())
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare global {
 	interface Window {
 		OC: any;
 		OCA: any;
 		OCP: any;
 	}
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 // Init private and public Files namespace
 window.OCA.Files = window.OCA.Files ?? {}

apps/files/src/models/Tab.js

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { sanitizeSVG } from '@skjnldsv/sanitize-svg'
+import DOMPurify from 'dompurify'
 
 export default class Tab {
 
@@ -80,10 +80,7 @@ export default class Tab {
 		this._scrollBottomReached = scrollBottomReached
 
 		if (typeof iconSvg === 'string') {
-			sanitizeSVG(iconSvg)
-				.then(sanitizedSvg => {
-					this._iconSvgSanitized = sanitizedSvg
-				})
+			this._iconSvgSanitized = DOMPurify.sanitize(iconSvg)
 		}
 
 	}

apps/files/src/views/Sidebar.vue

@@ -78,8 +78,7 @@
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
 				:file-info="fileInfo">
 				<template v-if="tab.iconSvg !== undefined" #icon>
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<span class="svg-icon" v-html="tab.iconSvg" />
+					<NcIconSvgWrapper :svg="tab.iconSvg" :size="20" />
 				</template>
 			</SidebarTab>
 		</template>
@@ -579,14 +578,6 @@ export default {
 			margin: 0 16px 4px 16px !important;
 		}
 	}
-
-	.svg-icon {
-		::v-deep svg {
-			width: 20px;
-			height: 20px;
-			fill: currentColor;
-		}
-	}
 }
 
 .sidebar__description {

apps/files_sharing/src/additionalScripts.js

@@ -8,7 +8,4 @@ import './sharebreadcrumbview.js'
 import './style/sharebreadcrumb.scss'
 import './collaborationresourceshandler.js'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 window.OCA.Sharing = OCA.Sharing

apps/files_sharing/src/collaborationresourceshandler.js

@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 window.OCP.Collaboration.registerType('file', {
 	action: () => {
 		return new Promise((resolve, reject) => {

apps/files_sharing/src/files_sharing_tab.js

@@ -5,7 +5,6 @@
 
 import Vue from 'vue'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import { getRequestToken } from '@nextcloud/auth'
 
 import ShareSearch from './services/ShareSearch.js'
 import ExternalLinkActions from './services/ExternalLinkActions.js'
@@ -15,9 +14,6 @@ import TabSections from './services/TabSections.js'
 // eslint-disable-next-line n/no-missing-import, import/no-unresolved
 import ShareVariant from '@mdi/svg/svg/share-variant.svg?raw'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
 // Init Sharing Tab Service
 if (!window.OCA.Sharing) {
 	window.OCA.Sharing = {}

apps/files_sharing/src/personal-settings.js

@@ -4,13 +4,8 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
-
 import PersonalSettings from './components/PersonalSettings.vue'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
 Vue.prototype.t = t
 
 const View = Vue.extend(PersonalSettings)

apps/settings/src/components/WebAuthn/Section.vue

@@ -38,13 +38,12 @@
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import '@nextcloud/password-confirmation/dist/style.css'
 import sortBy from 'lodash/fp/sortBy.js'
 
 import AddDevice from './AddDevice.vue'
 import Device from './Device.vue'
 import logger from '../../logger.ts'
-import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js'
+import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
 
 const sortByName = sortBy('name')
 

apps/settings/src/main-admin-ai.js

@@ -7,9 +7,6 @@ import Vue from 'vue'
 
 import ArtificialIntelligence from './components/AdminAI.vue'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 Vue.prototype.t = t
 
 // Not used here but required for legacy templates

apps/settings/src/main-admin-basic-settings.js

@@ -4,7 +4,6 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 
@@ -13,8 +12,6 @@ import logger from './logger.ts'
 import ProfileSettings from './components/BasicSettings/ProfileSettings.vue'
 import BackgroundJob from './components/BasicSettings/BackgroundJob.vue'
 
-__webpack_nonce__ = btoa(getRequestToken())
-
 const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true)
 
 Vue.mixin({

apps/settings/src/main-admin-security.js

@@ -10,9 +10,6 @@ import AdminTwoFactor from './components/AdminTwoFactor.vue'
 import Encryption from './components/Encryption.vue'
 import store from './store/admin-security.js'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 Vue.prototype.t = t
 
 // Not used here but required for legacy templates

apps/settings/src/main-apps-users-management.ts

@@ -11,18 +11,13 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import SettingsApp from './views/SettingsApp.vue'
 import router from './router/index.ts'
 import { useStore } from './store/index.js'
-import { getRequestToken } from '@nextcloud/auth'
 import { PiniaVuePlugin, createPinia } from 'pinia'
 
 Vue.use(VTooltip, { defaultHtml: false })
 
 const store = useStore()
 sync(store, router)
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken() ?? '')
-
 // bind to window
 Vue.prototype.t = t
 Vue.prototype.n = n

apps/settings/src/main-personal-info.js

@@ -4,7 +4,6 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 
@@ -27,8 +26,6 @@ import BiographySection from './components/PersonalInfo/BiographySection.vue'
 import ProfileVisibilitySection from './components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue'
 import BirthdaySection from './components/PersonalInfo/BirthdaySection.vue'
 
-__webpack_nonce__ = btoa(getRequestToken())
-
 const profileEnabledGlobally = loadState('settings', 'profileEnabledGlobally', true)
 
 Vue.mixin({

apps/settings/src/main-personal-password.js

@@ -8,9 +8,6 @@ import Vue from 'vue'
 import PasswordSection from './components/PasswordSection.vue'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 Vue.prototype.t = t
 Vue.prototype.n = n
 

apps/settings/src/main-personal-security.js

@@ -7,14 +7,10 @@ import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 
 import AuthTokenSection from './components/AuthTokenSection.vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { PiniaVuePlugin, createPinia } from 'pinia'
 
 import '@nextcloud/password-confirmation/dist/style.css'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(getRequestToken())
-
 const pinia = createPinia()
 
 Vue.use(PiniaVuePlugin)

apps/settings/src/main-personal-webauth.js

@@ -8,9 +8,6 @@ import { loadState } from '@nextcloud/initial-state'
 
 import WebAuthnSection from './components/WebAuthn/Section.vue'
 
-// eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
-
 Vue.prototype.t = t
 
 const View = Vue.extend(WebAuthnSection)

apps/sharebymail/src/main-admin.js

@@ -4,13 +4,10 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 
 import AdminSettings from './components/AdminSettings.vue'
 
-__webpack_nonce__ = btoa(getRequestToken())
-
 Vue.mixin({
 	methods: {
 		t,

apps/systemtags/src/admin.ts

@@ -4,12 +4,8 @@
  */
 
 import Vue from 'vue'
-import { getRequestToken } from '@nextcloud/auth'
 
 import SystemTagsSection from './views/SystemTagsSection.vue'
 
-// @ts-expect-error __webpack_nonce__ is injected by webpack
-__webpack_nonce__ = btoa(getRequestToken())
-
 const SystemTagsSectionView = Vue.extend(SystemTagsSection)
 new SystemTagsSectionView().$mount('#vue-admin-systemtags')