Allow configuring page title (browser)

Author: wwwillchen

mesop/examples/text_io.py

@@ -4,7 +4,7 @@
 import mesop.labs as mel
 
 
-@me.page(path="/text_io")
+@me.page(path="/text_io", title="Text I/O Example")
 def app():
   mel.text_io(upper_case_stream)
 

mesop/features/page.py

@@ -4,13 +4,16 @@
 
 
 def page(
-  *, path: str = "/"
+  *,
+  path: str = "/",
+  title: str | None = None,
 ) -> Callable[[Callable[[], None]], Callable[[], None]]:
   def decorator(func: Callable[[], None]) -> Callable[[], None]:
     def wrapper() -> None:
       return func()
 
     runtime().register_path_fn(path, wrapper)
+    runtime().register_path_title(path, title or f"Mesop: {path}")
     return wrapper
 
   return decorator

mesop/protos/ui.proto

@@ -144,6 +144,7 @@ message ContextLine {
 
 message RenderEvent {
     optional Component root_component = 1;
+    optional string title = 5;
     optional States states = 2;
     repeated Command commands = 3;
 

mesop/runtime/runtime.py

@@ -26,6 +26,7 @@ class EmptyState:
 
 class Runtime:
   _path_fns: dict[str, Callable[[], None]]
+  _path_title: dict[str, str]
   _handlers: dict[str, Handler]
   _state_classes: list[type[Any]]
   _loading_errors: list[pb.ServerError]
@@ -36,6 +37,7 @@ class Runtime:
   def __init__(self):
     self.component_fns = set()
     self._path_fns = {}
+    self._path_title = {}
     self._handlers = {}
     self.event_mappers: dict[Type[Any], Callable[[pb.UserEvent, Key], Any]] = {}
     self._state_classes = []
@@ -89,6 +91,12 @@ def run_path(self, path: str, trace_mode: bool = False) -> None:
   def register_path_fn(self, path: str, fn: Callable[[], None]) -> None:
     self._path_fns[path] = fn
 
+  def register_path_title(self, path: str, title: str) -> None:
+    self._path_title[path] = title
+
+  def get_path_title(self, path: str) -> str:
+    return self._path_title[path]
+
   def register_handler(self, handler_id: str, handler: Handler) -> None:
     self._handlers[handler_id] = handler
 

mesop/server/server.py

@@ -27,6 +27,7 @@ def render_loop(
   ) -> Generator[str, None, None]:
     try:
       runtime().run_path(path=path, trace_mode=trace_mode)
+      title = runtime().get_path_title(path=path)
       root_component = runtime().context().current_node()
 
       data = pb.UiResponse(
@@ -35,6 +36,7 @@ def render_loop(
           states=runtime().context().serialize_state(),
           commands=runtime().context().commands(),
           component_configs=get_component_configs(),
+          title=title,
         )
       )
       yield serialize(data)

mesop/web/src/services/channel.ts

@@ -12,6 +12,7 @@ import {
   EditorEvent,
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
 import {Logger} from '../dev_tools/services/logger';
+import {Title} from '@angular/platform-browser';
 
 const anyWindow = window as any;
 const DEV_SERVER_HOST = anyWindow['MESOP_SERVER_HOST'] || '';
@@ -43,7 +44,10 @@ export class Channel {
   private componentConfigs: ComponentConfig[] = [];
   private queuedEvents: (() => void)[] = [];
 
-  constructor(private logger: Logger) {}
+  constructor(
+    private logger: Logger,
+    private title: Title,
+  ) {}
 
   getStatus(): ChannelStatus {
     return this.status;
@@ -96,6 +100,10 @@ export class Channel {
                 onNavigate(navigate.getUrl()!);
               }
             }
+            const title = uiResponse.getRender()!.getTitle();
+            if (title) {
+              this.title.setTitle(title);
+            }
             this.rootComponent = rootComponent;
             this.componentConfigs = uiResponse
               .getRender()!