refactor: vite.config.js for enhanced flexibility and tool compatibil…

…ity (#10818)

Rework the site configuration to avoid returning an asynchronous function, making it easier to override when needed.  

In addition, add a new `vite.config.js` file to each newly created package. This allows other tools, such as Cypress, to detect Vite’s configurations, which was not possible when using them directly from the `@ui5/webcomponents` package.

packages/create-package/template/vite.config.js

@@ -0,0 +1,14 @@
+import viteConfig from "@ui5/webcomponents-tools/components-package/vite.config.js"; //eslint-disable-line
+
+// Modifying the default Vite configuration provided by the @ui5/webcomponents-tools package.
+// You can directly access and update the properties you need to change.
+// Ensure that the property exists before modifying it to avoid unintended errors.
+// For available configuration options, refer to: https://vite.dev/config/#configuring-vite
+//
+// Ensure the plugins array exists
+// viteConfig.plugins = viteConfig.plugins || [];
+//
+// Push a new fake plugin
+// viteConfig.plugins.push({ name: 'my-custom-plugin' });
+
+export default viteConfig;

packages/tools/components-package/vite.config.js

@@ -1,13 +1,9 @@
 // vite.config.js
-import { defineConfig } from 'vite';
-import virtualIndex from '../lib/dev-server/virtual-index-html-plugin.js';
+const virtualIndex = require('../lib/dev-server/virtual-index-html-plugin.js');
 
-export default defineConfig(async () => {
-	const data = await virtualIndex();
-	return {
-		build: {
-			emptyOutDir: false,
-		},
-		plugins: [data],
-	}
-  })
+module.exports = {
+	build: {
+		emptyOutDir: false,
+	},
+	plugins: [virtualIndex()],
+};

packages/tools/lib/dev-server/virtual-index-html-plugin.js

@@ -1,23 +1,17 @@
-const virtualIndexPlugin = async () => {
-	const path = await import("path");
-	const { globby } = await import("globby");
-	const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
-
-	const pagesPerFolder = {};
-	files.forEach(file => {
-		let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
-		folder.push(path.basename(file));
-	});
+const virtualIndexPlugin = () => {
+	return {
+		name: 'virtual-index-html',
+		async config() {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
 
-	const rollupInput = {};
+			const rollupInput = {};
 
-	files.forEach(file => {
-		rollupInput[file] = path.resolve(process.cwd(), file);
-	})
+			files.forEach(file => {
+				rollupInput[file] = path.resolve(process.cwd(), file);
+			});
 
-	return {
-		name: 'virtual-index-html',
-		config() {
 			return {
 				build: {
 					rollupOptions: {
@@ -26,7 +20,17 @@ const virtualIndexPlugin = async () => {
 				}
 			}
 		},
-		configureServer(server) {
+		async configureServer(server) {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
+
+			const pagesPerFolder = {};
+			files.forEach(file => {
+				let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
+				folder.push(path.basename(file));
+			});
+
 			server.middlewares.use((req, res, next) => {
 				if (req.url === "/") {
 					const folders = Object.keys(pagesPerFolder);
@@ -37,8 +41,8 @@ const virtualIndexPlugin = async () => {
 						const pages = pagesPerFolder[folder];
 						return `<h1>${folder}</h1>
 							${pages.map(page => {
-								return `<li><a href='${folder}/${page}'>${page}</a></li>`
-							}).join("")}
+							return `<li><a href='${folder}/${page}'>${page}</a></li>`
+						}).join("")}
 						`
 					}).join("")}`);
 				} else {