Merge pull request #14238 from resilient-tech/autoreload_on_build

feat: automatically reload web pages whenever JS/CSS assets are rebuilt

esbuild/esbuild.js

@@ -44,6 +44,11 @@ let argv = yargs
 		type: "boolean",
 		description: "Run in watch mode and rebuild on file changes"
 	})
+	.option("live-reload", {
+		type: "boolean",
+		description: `Automatically reload web pages when assets are rebuilt.
+			Can only be used with the --watch flag.`
+	})
 	.option("production", {
 		type: "boolean",
 		description: "Run build in production mode"
@@ -478,7 +483,8 @@ async function notify_redis({ error, success }) {
 	}
 	if (success) {
 		payload = {
-			success: true
+			success: true,
+			live_reload: argv["live-reload"]
 		};
 	}
 

frappe/build.py

@@ -257,6 +257,13 @@ def watch(apps=None):
 	if apps:
 		command += " --apps {apps}".format(apps=apps)
 
+	live_reload = frappe.utils.cint(
+		os.environ.get("LIVE_RELOAD", frappe.conf.live_reload)
+	)
+
+	if live_reload:
+		command += " --live-reload"
+
 	check_node_executable()
 	frappe_app_path = frappe.get_app_path("frappe", "..")
 	frappe.commands.popen(command, cwd=frappe_app_path, env=get_node_env())

frappe/public/js/frappe/build_events/BuildSuccess.vue

@@ -3,8 +3,11 @@
 		v-if="is_shown"
 		class="flex justify-between build-success-message align-center"
 	>
-		<div class="mr-4">Compiled successfully</div>
-		<a class="text-white underline" href="/" @click.prevent="reload">
+		Compiled successfully
+		<a
+			v-if="!live_reload"
+			class="ml-4 text-white underline" href="/" @click.prevent="reload"
+		>
 			Refresh
 		</a>
 	</div>
@@ -14,11 +17,17 @@ export default {
 	name: "BuildSuccess",
 	data() {
 		return {
-			is_shown: false
+			is_shown: false,
+			live_reload: false,
 		};
 	},
 	methods: {
-		show() {
+		show(data) {
+			if (data.live_reload) {
+				this.live_reload = true;
+				this.reload();
+			}
+
 			this.is_shown = true;
 			if (this.timeout) {
 				clearTimeout(this.timeout);

frappe/public/js/frappe/build_events/build_events.bundle.js

@@ -13,10 +13,11 @@ frappe.realtime.on("build_event", data => {
 	}
 });
 
-function show_build_success() {
+function show_build_success(data) {
 	if (error) {
 		error.hide();
 	}
+
 	if (!success) {
 		let target = $('<div class="build-success-container">')
 			.appendTo($container)
@@ -27,7 +28,7 @@ function show_build_success() {
 		});
 		success = vm.$children[0];
 	}
-	success.show();
+	success.show(data);
 }
 
 function show_build_error(data) {