build: fix dev server page refresh (#7569)

packages/tools/lib/dev-server/custom-hot-update-plugin.js

@@ -0,0 +1,39 @@
+const fs = require("fs");
+
+/**
+ * A change is observed on MacOS since 13.5, where the build generates a large amount
+ * of JSON file that spotlight search has to index, as they are considered new files.
+ * 
+ * Starting the vitejs dev server reads all of these files and this triggers the indexing.
+ * The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
+ * This metadata change is changing the ctime of the file, but not the mtime. This can be checked with `stat -x <path_to_file>
+ * 
+ * Essentially only metadata is changed, not content. This should not cause a page refresh,
+ * but chokidar reports this change and vite refreshes the page.
+ * The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
+ * 
+ * This plugin checks if the file causing the refresh is a generated json file (dist/*.json) and if ctime is changed after mtime
+ * In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
+ * which is in effect ignoring the page refresh.
+ */
+
+const customHotUpdate = async () => {
+	return {
+		name: 'custom-hot-update',
+		handleHotUpdate(ctx) {
+			// custom check for generated json files
+			if (ctx.file.includes("dist/") && ctx.file.endsWith(".json")) {
+				const stat = fs.statSync(ctx.file);
+
+				// metadata change only
+				if (stat.ctime > stat.mtime) {
+					// uncomment for debugging
+					// console.log("ignoring hot update for:", ctx.file);
+					return [];
+				}
+			}
+		}
+	}
+};
+
+module.exports = customHotUpdate;

vite.config.js

@@ -1,20 +1,12 @@
-const os = require("os");
 const { defineConfig } = require('vite');
 const virtualIndex = require("@ui5/webcomponents-tools/lib/dev-server/virtual-index-html-plugin.js");
-
-// do not refresh from .json/.html on MacOS due to false positives
-const ignored = os.platform() === "darwin" ? ["**/*.json", "**/*.html"] : [];
+const customHotUpdate = require("@ui5/webcomponents-tools/lib/dev-server/custom-hot-update-plugin.js");
 
 module.exports = defineConfig(async () => {
 	return {
 		build: {
 			emptyOutDir: false,
 		},
-		server: {
-			watch: {
-				ignored,
-			},
-		},
-		plugins: [await virtualIndex()],
+		plugins: [await virtualIndex(), customHotUpdate()],
 	}
 });