replace page inheritance with context manager for custom content frame

examples/modularization/example_pages.py

@@ -5,14 +5,17 @@ from nicegui import ui
 
 def create() -> None:
 
-    @theme.page('/a', '- Example A -')
+    @ui.page('/a')
     def example_page():
-        ui.label('Example A').classes('text-h4 text-grey-8')
+        with theme.frame('- Example A -'):
+            ui.label('Example A').classes('text-h4 text-grey-8')
 
-    @theme.page('/b', '- Example B -')
+    @ui.page('/b')
     def example_page():
-        ui.label('Example B').classes('text-h4 text-grey-8')
+        with theme.frame('- Example B -'):
+            ui.label('Example B').classes('text-h4 text-grey-8')
 
-    @theme.page('/c', '- Example C -')
+    @ui.page('/c')
     def example_page():
-        ui.label('Example C').classes('text-h4 text-grey-8')
+        with theme.frame('- Example C -'):
+            ui.label('Example C').classes('text-h4 text-grey-8')

examples/modularization/main.py

@@ -7,12 +7,13 @@ from nicegui import ui
 
 
 # here we use our custom page decorator directly and just put the content creation into a separate function
-@theme.page('/', 'Homepage')
+@ui.page('/')
 def index_page() -> None:
-    home_page.content()
+    with theme.frame('Homepage'):
+        home_page.content()
 
 
 # this call shows that you can also move the whole page creation into a separate file
 example_pages.create()
 
-ui.run()
+ui.run(title='Modularization Demo')

examples/modularization/theme.py

@@ -1,21 +1,18 @@
+from contextlib import contextmanager
+
 from menu import menu
 
 from nicegui import ui
 
 
-class page(ui.page):
-
-    def __init__(self, route: str, navtitle: str) -> None:
-        '''Custom page decorator to share the same styling and behavior across all pages'''
-        super().__init__(route, title='Modularization Demo')
-        self.navtitle = navtitle
-
-    def create_content(self, *args, **kwargs) -> None:
-        ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
-        with ui.header().classes('justify-between text-white'):
-            ui.label('Modularization Demo').classes('text-bold')
-            ui.label(self.navtitle)
-            with ui.row():
-                menu()
-        with ui.row().classes('absolute-center'):
-            super().create_content(*args, **kwargs)
+@contextmanager
+def frame(navtitle: str):
+    '''Custom page frame to share the same styling and behavior across all pages'''
+    ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
+    with ui.header().classes('justify-between text-white'):
+        ui.label('Modularization Demo').classes('text-bold')
+        ui.label(navtitle)
+        with ui.row():
+            menu()
+    with ui.row().classes('absolute-center'):
+        yield

nicegui/page.py

@@ -35,7 +35,6 @@ class page:
         self.favicon = favicon
         self.dark = dark
         self.response_timeout = response_timeout
-        self.func: Callable
 
         globals.favicons[self.path] = favicon
 
@@ -48,13 +47,12 @@ class page:
     def __call__(self, func: Callable) -> Callable:
         # NOTE we need to remove existing routes for this path to make sure only the latest definition is used
         globals.app.routes[:] = [r for r in globals.app.routes if r.path != self.path]
-        self.func = func
 
-        async def decorated(*args, **kwargs) -> Response:
+        async def decorated(*dec_args, **dec_kwargs) -> Response:
             with Client(self) as client:
                 if any(p.name == 'client' for p in inspect.signature(func).parameters.values()):
-                    kwargs['client'] = client
-                result = self.create_content(*args, **kwargs)
+                    dec_kwargs['client'] = client
+                result = func(*dec_args, **dec_kwargs)
             if inspect.isawaitable(result):
                 async def wait_for_result() -> Response:
                     with client:
@@ -76,6 +74,3 @@ class page:
         globals.page_routes[decorated] = self.path
 
         return globals.app.get(self.path)(decorated)
-
-    def create_content(self, *args, **kwargs) -> None:
-        self.func(*args, **kwargs)