refactor: prepare Vue 3 migration

.github/dependabot.yml

@@ -38,7 +38,10 @@ updates:
 
 # Main master npm frontend dependencies
 - package-ecosystem: npm
-  directory: "/"
+  directories:
+    - "/"
+    - "/build/frontend"
+    - "/build/frontend-legacy"
   schedule:
     interval: weekly
     day: saturday

.gitignore

@@ -11,7 +11,7 @@
 /apps/inc.php
 /assets
 /.htaccess
-/node_modules
+node_modules/
 /translationfiles
 /translationtool.phar
 
@@ -55,10 +55,6 @@
 /apps/files_external/3rdparty/irodsphp/prods/test*
 /apps/files_external/tests/config.*.php
 
-# apps modules
-/apps/*/node_modules
-
-
 # ignore themes except the example and the README
 /themes/*
 !/themes/example
@@ -131,9 +127,6 @@ nbproject
 # Tests
 /tests/phpunit.xml
 
-# Node Modules
-/build/node_modules/
-
 # nodejs
 /build/bin
 /build/lib/

REUSE.toml

@@ -178,7 +178,7 @@ SPDX-FileCopyrightText = "2020 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["cypress/tsconfig.json", "cypress/fixtures/appstore/apps.json", "dist/icons.css"]
+path = ["cypress/tsconfig.json", "cypress/fixtures/appstore/apps.json", "dist/*.css"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

apps/sharebymail/lib/Settings/Admin.php

@@ -26,6 +26,8 @@ public function getForm() {
 		$this->initialState->provideInitialState('sendPasswordMail', $this->settingsManager->sendPasswordByMail());
 		$this->initialState->provideInitialState('replyToInitiator', $this->settingsManager->replyToInitiator());
 
+		\OCP\Util::addStyle('sharebymail', 'admin-settings');
+		\OCP\Util::addScript('sharebymail', 'admin-settings');
 		return new TemplateResponse('sharebymail', 'settings-admin', [], '');
 	}
 

apps/sharebymail/src/components/AdminSettings.vue

@@ -7,17 +7,11 @@
 	<NcSettingsSection
 		:name="t('sharebymail', 'Share by mail')"
 		:description="t('sharebymail', 'Allows people to share a personalized link to a file or folder by putting in an email address.')">
-		<NcCheckboxRadioSwitch
-			type="switch"
-			:checked.sync="sendPasswordMail"
-			@update:checked="update('sendpasswordmail', sendPasswordMail)">
+		<NcCheckboxRadioSwitch v-model="sendPasswordMail" type="switch">
 			{{ t('sharebymail', 'Send password by mail') }}
 		</NcCheckboxRadioSwitch>
 
-		<NcCheckboxRadioSwitch
-			type="switch"
-			:checked.sync="replyToInitiator"
-			@update:checked="update('replyToInitiator', replyToInitiator)">
+		<NcCheckboxRadioSwitch v-model="replyToInitiator" type="switch">
 			{{ t('sharebymail', 'Reply to initiator') }}
 		</NcCheckboxRadioSwitch>
 	</NcSettingsSection>
@@ -27,6 +21,7 @@
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { generateOcsUrl } from '@nextcloud/router'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
@@ -40,13 +35,27 @@ export default {
 		NcSettingsSection,
 	},
 
+	setup() {
+		return { t }
+	},
+
 	data() {
 		return {
 			sendPasswordMail: loadState('sharebymail', 'sendPasswordMail'),
 			replyToInitiator: loadState('sharebymail', 'replyToInitiator'),
 		}
 	},
 
+	watch: {
+		sendPasswordMail(newValue) {
+			this.update('sendpasswordmail', newValue)
+		},
+
+		replyToInitiator(newValue) {
+			this.update('replyToInitiator', newValue)
+		},
+	},
+
 	methods: {
 		async update(key, value) {
 			await confirmPassword()

apps/sharebymail/src/settings-admin.ts

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import AdminSettings from './components/AdminSettings.vue'
+
+const app = createApp(AdminSettings)
+app.mount('#vue-admin-sharebymail')

apps/sharebymail/templates/settings-admin.php

@@ -3,7 +3,6 @@
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-\OCP\Util::addScript('sharebymail', 'vue-settings-admin-sharebymail');
 ?>
+
 <div id="vue-admin-sharebymail"></div>

build/demi.sh

@@ -0,0 +1,50 @@
+#!/bin/bash
+
+# SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: CC0-1.0
+
+# This is a simple helper to execute npm COMMANDs in two directories
+# we need this as we cannot use npm workspaces as they break with 2 versions of vue.
+
+COMMAND=""
+FRONTEND="$(dirname $0)/frontend"
+FRONTEND_LEGACY="$(dirname $0)/frontend-legacy"
+
+build_command() {
+	if [ "install" = "$1" ] || [ "ci" = "$1" ]; then
+		COMMAND=$@
+	elif [ "run" = "$1" ]; then
+		COMMAND="run --if-present ${@:2}"
+	else
+		COMMAND="run --if-present $@"
+	fi
+}
+
+run_parallel() {
+	npx concurrently \
+		"cd \"$FRONTEND\" && npm $COMMAND" \
+		"cd \"$FRONTEND_LEGACY\" && npm $COMMAND"
+}
+
+run_sequentially() {
+	echo -e "\e[1;34m>> Running 'npm $COMMAND' for Vue 3 based frontend\e[0m"
+	echo
+	pushd "$FRONTEND"
+	npm $COMMAND
+	popd
+
+	echo -e "\e[1;34m>> Running 'npm $COMMAND' for Vue 2 based frontend\e[0m"
+	echo
+	pushd "$FRONTEND_LEGACY"
+	npm $COMMAND
+	popd
+}
+
+
+if [ "--parallel" = "$1" ]; then
+	build_command ${@:2}
+	run_parallel
+else
+	build_command $@
+	run_sequentially
+fi

build/files-checker.php

@@ -45,7 +45,6 @@
 	'autotest-checkers.sh',
 	'autotest-external.sh',
 	'autotest.sh',
-	'babel.config.js',
 	'build',
 	'codecov.yml',
 	'composer.json',
@@ -59,7 +58,7 @@
 	'cypress.config.ts',
 	'cypress',
 	'dist',
-	'eslint.config.mjs',
+	'eslint.config.js',
 	'flake.lock',
 	'flake.nix',
 	'index.html',
@@ -86,10 +85,8 @@
 	'tsconfig.json',
 	'vendor-bin',
 	'version.php',
-	'vitest.config.mts',
-	'webpack.common.cjs',
-	'webpack.config.js',
-	'webpack.modules.cjs',
+	'vite.config.ts',
+	'vitest.config.ts',
 	'window.d.ts',
 ];
 $actualFiles = [];

build/frontend-legacy/REUSE.toml

@@ -0,0 +1,10 @@
+version = 1
+SPDX-PackageName = "nextcloud"
+SPDX-PackageSupplier = "Nextcloud <[email protected]>"
+SPDX-PackageDownloadLocation = "https://github.com/nextcloud/server"
+
+[[annotations]]
+path = ["package.json", "package-lock.json", "tsconfig.json"]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2025 Nextcloud GmbH and Nextcloud contributors"
+SPDX-License-Identifier = "AGPL-3.0-or-later"

build/frontend-legacy/__mocks__/@nextcloud/auth.ts

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export function getCurrentUser() {
+	return {
+		uid: 'test',
+		displayName: 'Test',
+		isAdmin: false,
+	}
+}
+
+export function getRequestToken() {
+	return 'test-token-1234'
+}
+
+export function onRequestTokenUpdate() {}

build/frontend-legacy/__mocks__/@nextcloud/axios.ts

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export default {
+	interceptors: {
+		response: {
+			use: () => {},
+		},
+		request: {
+			use: () => {},
+		},
+	},
+	get: async () => ({ status: 200, data: {} }),
+	delete: async () => ({ status: 200, data: {} }),
+	post: async () => ({ status: 200, data: {} }),
+	head: async () => ({ status: 200, data: {} }),
+}

build/frontend-legacy/__mocks__/@nextcloud/capabilities.ts

@@ -0,0 +1,23 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Capabilities } from '../../apps/files/src/types.ts'
+
+export function getCapabilities(): Capabilities {
+	return {
+		files: {
+			bigfilechunking: true,
+			blacklisted_files: [],
+			forbidden_filename_basenames: [],
+			forbidden_filename_characters: [],
+			forbidden_filename_extensions: [],
+			forbidden_filenames: [],
+			undelete: true,
+			version_deletion: true,
+			version_labeling: true,
+			versioning: true,
+		},
+	}
+}

build/frontend-legacy/__mocks__/@nextcloud/dialogs.ts

@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { vi } from 'vitest'
+
+export const showMessage = vi.fn()
+export const showSuccess = vi.fn()
+export const showWarning = vi.fn()
+export const showInfo = vi.fn()
+export const showError = vi.fn()
+export const showUndo = vi.fn()

build/frontend-legacy/__mocks__/@nextcloud/initial-state.ts

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export function loadState(app: string, key: string, fallback?: any) {
+	return fallback
+}

build/frontend-legacy/__mocks__/css.js

@@ -0,0 +1,5 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export default {}

build/frontend-legacy/__mocks__/svg.js

@@ -0,0 +1,5 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export default '<svg>SvgMock</svg>'

build/frontend-legacy/__mocks__/webdav.ts

@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export function createClient() {}
+export function getPatcher() {
+	return {
+		patch: () => {},
+	}
+}