Implement client-side polling for hot reload when running Mesop from pip (closes mesop-dev#60)

Addresses a subtle race condition where hot reloading could happen in the middle of a request.

Author: wwwillchen

mesop/bin/bin.py

@@ -16,6 +16,9 @@
   reset_runtime,
   runtime,
 )
+from mesop.server.flags import port
+from mesop.server.logging import log_startup
+from mesop.server.server import is_processing_request
 from mesop.server.wsgi_app import create_app
 
 FLAGS = flags.FLAGS
@@ -68,6 +71,8 @@ def main(argv: Sequence[str]):
     stdin_thread.daemon = True
     stdin_thread.start()
 
+  log_startup(port=port())
+  logging.getLogger("werkzeug").setLevel(logging.WARN)
   app.run()
 
 
@@ -83,7 +88,7 @@ def fs_watcher(absolute_path: str):
     current_modified = os.path.getmtime(absolute_path)
 
     # Compare the current modification time with the last modification time
-    if current_modified != last_modified:
+    if current_modified != last_modified and not is_processing_request():
       # Update the last modification time
       last_modified = current_modified
       try:
@@ -97,7 +102,7 @@ def fs_watcher(absolute_path: str):
           logging.ERROR, "Could not hot reload due to error:", exc_info=e
         )
 
-    time.sleep(0.2)
+    time.sleep(0.1)
 
 
 def execute_main_module(absolute_path: str):

mesop/server/server.py

@@ -17,6 +17,13 @@
 )
 
 
+def is_processing_request():
+  return _requests_in_flight > 0
+
+
+_requests_in_flight = 0
+
+
 def configure_flask_app(
   *, exceptions_to_propagate: Sequence[type] = ()
 ) -> Flask:
@@ -119,9 +126,20 @@ def ui_stream() -> Response:
     ui_request = pb.UiRequest()
     ui_request.ParseFromString(base64.urlsafe_b64decode(data))
 
-    return Response(
+    response = Response(
       stream_with_context(generate_data(ui_request)),
       content_type="text/event-stream",
     )
+    return response
+
+  @flask_app.before_request
+  def before_request():
+    global _requests_in_flight
+    _requests_in_flight += 1
+
+  @flask_app.teardown_request
+  def teardown(error=None):
+    global _requests_in_flight
+    _requests_in_flight -= 1
 
   return flask_app

mesop/web/src/services/channel.ts

@@ -37,6 +37,7 @@ export enum ChannelStatus {
   providedIn: 'root',
 })
 export class Channel {
+  private _isHotReloading = false;
   private eventSource!: SSE;
   private initParams!: InitParams;
   private states!: States;
@@ -54,6 +55,10 @@ export class Channel {
     return this.status;
   }
 
+  isHotReloading(): boolean {
+    return this._isHotReloading;
+  }
+
   getRootComponent(): ComponentProto | undefined {
     return this.rootComponent;
   }
@@ -83,6 +88,7 @@ export class Channel {
         if (data === '<stream_end>') {
           this.eventSource.close();
           this.status = ChannelStatus.CLOSED;
+          this._isHotReloading = false;
           this.logger.log({type: 'StreamEnd'});
           if (this.queuedEvents.length) {
             const queuedEvent = this.queuedEvents.shift()!;
@@ -162,6 +168,14 @@ export class Channel {
   }
 
   hotReload() {
+    // Only hot reload if there's no request in-flight.
+    // Most likely the in-flight request will receive the updated UI.
+    // In the unlikely chance it doesn't, we will wait for the next
+    // hot reload trigger which is not ideal but acceptable.
+    if (this.getStatus() === ChannelStatus.OPEN) {
+      return;
+    }
+    this._isHotReloading = true;
     const request = new UiRequest();
     const userEvent = new UserEvent();
     userEvent.setStates(this.states);

mesop/web/src/services/hot_reload_watcher.ts

@@ -18,6 +18,11 @@ export class IbazelHotReloadWatcher extends HotReloadWatcher {
     super(channel);
     if (anyWindow['LiveReload']) {
       this.monkeyPatchLiveReload();
+    } else {
+      console.log('LiveReload not detected; polling hot reload instead.');
+      setInterval(() => {
+        channel.hotReload();
+      }, 500);
     }
   }
 

mesop/web/src/shell/shell.ng.html

@@ -4,7 +4,7 @@
 <div class="status">
   <mat-progress-bar
     data-testid="connection-progress-bar"
-    *ngIf="isConnectionOpen()"
+    *ngIf="showChannelProgressIndicator()"
     mode="query"
   ></mat-progress-bar>
 </div>

mesop/web/src/shell/shell.ts

@@ -85,8 +85,12 @@ export class Shell {
     this.channel.dispatch(userEvent);
   }
 
-  isConnectionOpen() {
-    return this.channel.getStatus() === ChannelStatus.OPEN;
+  showChannelProgressIndicator() {
+    // Do not show it if channel is hot reloading to reduce visual noise.
+    return (
+      this.channel.getStatus() === ChannelStatus.OPEN &&
+      !this.channel.isHotReloading()
+    );
   }
 }