Merge pull request #55432 from nextcloud/feat/vue3-demi-2

refactor: prepare Vue 3 migration

Author: susnux

.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/main-admin.js

@@ -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/src/settings-admin.ts

@@ -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>

apps/sharebymail/templates/settings-admin.php

@@ -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/demi.sh

@@ -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 = [];