Allow absolute URL navigation (#748)

mesop/examples/__init__.py

@@ -21,6 +21,7 @@
 from mesop.examples import index as index
 from mesop.examples import integrations as integrations
 from mesop.examples import many_checkboxes as many_checkboxes
+from mesop.examples import navigate_absolute as navigate_absolute
 from mesop.examples import navigate_advanced as navigate_advanced
 from mesop.examples import nested as nested
 from mesop.examples import on_load as on_load

mesop/examples/navigate_absolute.py

@@ -0,0 +1,23 @@
+import mesop as me
+
+
+@me.page(path="/navigate_absolute")
+def page1():
+  me.text("Navigate to absolute URLs")
+  me.button("navigate https", on_click=navigate_https)
+  me.button("navigate http", on_click=navigate_http)
+  me.button("navigate yield", on_click=navigate_yield)
+
+
+def navigate_https(e: me.ClickEvent):
+  me.navigate("https://google.com/")
+
+
+def navigate_http(e: me.ClickEvent):
+  me.navigate("http://example.com/")
+
+
+def navigate_yield(e: me.ClickEvent):
+  yield
+  me.navigate("https://google.com/")
+  yield

mesop/server/server.py

@@ -178,6 +178,10 @@ def generate_data(ui_request: pb.UiRequest) -> Generator[str, None, None]:
             )
           for command in runtime().context().commands():
             if command.HasField("navigate"):
+              if command.navigate.url.startswith(("http://", "https://")):
+                yield from render_loop(path=path)
+                yield STREAM_END
+                return
               path = command.navigate.url
               page_config = runtime().get_page_config(path=path)
               if (

mesop/tests/e2e/navigation_test.ts

@@ -29,3 +29,33 @@ test('navigation inside generator handler function', async ({page}) => {
   // Check the text has changed which means navigation succeeded.
   expect(await page.getByText('page2').textContent()).toEqual('page2');
 });
+
+test('navigation absolute - https', async ({page}) => {
+  await page.goto('/navigate_absolute');
+
+  // Trigger a navigation.
+  await page.getByRole('button', {name: 'navigate https', exact: true}).click();
+
+  // Wait for navigation to complete
+  await expect(page).toHaveURL('https://www.google.com/');
+});
+
+test('navigation absolute - http', async ({page}) => {
+  await page.goto('/navigate_absolute');
+
+  // Trigger a navigation.
+  await page.getByRole('button', {name: 'navigate http', exact: true}).click();
+
+  // Wait for navigation to complete
+  await expect(page).toHaveURL('http://example.com/');
+});
+
+test('navigation yield', async ({page}) => {
+  await page.goto('/navigate_absolute');
+
+  // Trigger a navigation.
+  await page.getByRole('button', {name: 'navigate yield', exact: true}).click();
+
+  // Wait for navigation to complete
+  await expect(page).toHaveURL('https://www.google.com/');
+});

mesop/web/src/shell/shell.ts

@@ -109,7 +109,12 @@ export class Shell {
         },
         onCommand: (command) => {
           if (command.hasNavigate()) {
-            this.router.navigateByUrl(command.getNavigate()!.getUrl()!);
+            const url = command.getNavigate()!.getUrl()!;
+            if (url.startsWith('http://') || url.startsWith('https://')) {
+              window.location.href = url;
+            } else {
+              this.router.navigateByUrl(command.getNavigate()!.getUrl()!);
+            }
           } else if (command.hasScrollIntoView()) {
             // Scroll into view
             const key = command.getScrollIntoView()!.getKey();