feat(name-route): add support for named route

examples/vue2/name_routes.py

@@ -0,0 +1,61 @@
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.ui.router import RouterViewLayout
+from trame.widgets import html, router
+
+server = get_server()
+server.client_type = "vue2"
+state, ctrl = server.state, server.controller
+
+# ---------------------------------------------------------
+# home
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/", name="content"):
+    html.Div("home - content")
+
+with RouterViewLayout(server, "/", name="side"):
+    html.Div("home - side")
+
+# ---------------------------------------------------------
+# foo
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/foo", name="content"):
+    html.Div("foo - content")
+
+with RouterViewLayout(server, "/foo", name="side"):
+    html.Div("foo - side")
+
+# ---------------------------------------------------------
+# bar
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/bar", name="content"):
+    html.Div("bar - content")
+
+with RouterViewLayout(server, "/bar", name="side"):
+    html.Div("bar - side")
+
+# ---------------------------------------------------------
+# Main UI
+# ---------------------------------------------------------
+with DivLayout(server) as layout:
+    with html.Div("toolbar", style="border: solid 1px black;"):
+        router.RouterLink("Home", to="/")
+        router.RouterLink("Foo", to="/foo")
+        router.RouterLink("Bar", to="/bar")
+
+    with html.Div("side", style="border: solid 1px black;"):
+        router.RouterView(name="side")
+
+    with html.Div("content", style="border: solid 1px black;"):
+        router.RouterView(name="content")
+
+    print(layout)
+
+
+@ctrl.add("on_server_ready")
+def debug(trame__routes, **state):
+    print(json.dumps(trame__routes, indent=2))
+
+
+if __name__ == "__main__":
+    server.start()

examples/vue3/basic.py

@@ -62,7 +62,5 @@
                 title=("`Bar: Id ${id}`",),
             )
 
-        print(c)
-
 if __name__ == "__main__":
     server.start()

examples/vue3/name_routes.py

@@ -0,0 +1,53 @@
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.ui.router import RouterViewLayout
+from trame.widgets import html, router
+
+server = get_server()
+server.client_type = "vue3"
+state, ctrl = server.state, server.controller
+
+# ---------------------------------------------------------
+# home
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/", name="content"):
+    html.Div("home - content")
+
+with RouterViewLayout(server, "/", name="side"):
+    html.Div("home - side")
+
+# ---------------------------------------------------------
+# foo
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/foo", name="content"):
+    html.Div("foo - content")
+
+with RouterViewLayout(server, "/foo", name="side"):
+    html.Div("foo - side")
+
+# ---------------------------------------------------------
+# bar
+# ---------------------------------------------------------
+with RouterViewLayout(server, "/bar", name="content"):
+    html.Div("bar - content")
+
+with RouterViewLayout(server, "/bar", name="side"):
+    html.Div("bar - side")
+
+# ---------------------------------------------------------
+# Main UI
+# ---------------------------------------------------------
+with DivLayout(server) as layout:
+    with html.Div("toolbar", style="border: solid 1px black;"):
+        router.RouterLink("Home", to="/")
+        router.RouterLink("Foo", to="/foo")
+        router.RouterLink("Bar", to="/bar")
+
+    with html.Div("side", style="border: solid 1px black;"):
+        router.RouterView(name="side")
+
+    with html.Div("content", style="border: solid 1px black;"):
+        router.RouterView(name="content")
+
+if __name__ == "__main__":
+    server.start()

trame_router/ui/router.py

@@ -6,8 +6,8 @@
 CHAR_TO_CONVERT = "/-:*"
 
 
-def path_to_name(path: str):
-    name = path
+def path_to_name(path: str, name="default"):
+    name = f"{path}___{name}"
     for specialChar in CHAR_TO_CONVERT:
         name = name.replace(specialChar, "_")
     return name
@@ -23,7 +23,7 @@ class RouterViewLayout(AbstractLayout):
     """
 
     def __init__(self, _server, path, name="default", **kwargs):
-        template_name = path_to_name(path)
+        template_name = path_to_name(path, name)
         register_route(
             _server,
             name,

trame_router/widgets/router.py

@@ -19,13 +19,10 @@ def flush_routes(app):
     routes = []
 
     for path, components in data.items():
-        # container = {}
-        # routes.append({ "path": path, "components": container })
-        # for name, template in components.items():
-        #     container[name] = { "template": template }
-        routes.append(
-            {"path": path, "component": {"template": components.get("default")}}
-        )
+        container = {}
+        routes.append({"path": path, "components": container})
+        for name, template in components.items():
+            container[name] = {"template": template}
 
     app.state[STATE_ROUTES_KEY] = routes
 
@@ -94,7 +91,7 @@ class RouterView(HtmlElement):
     """
 
     def __init__(self, children=None, name="default", **kwargs):
-        super().__init__("router-view", children, **kwargs)
+        super().__init__("router-view", children, name=name, **kwargs)
         self._attr_names += [
             "name",
         ]