How can I connect trame-Xterm functionality with trame-router?

[proy30]

Hi there,

Thank you for any help in advance. This is my attempt in expanding on one of the trame-xterm examples:

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify, router, xterm          
from trame.ui.router import RouterViewLayout

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller

def create_route(route_title):
    to = f"/{route_title}"
    click =  f"{route_title} = true"

    with vuetify.VListItem(to=to, click=click):
        with vuetify.VListItemContent():
            vuetify.VListItemTitle(route_title)
            
with RouterViewLayout(server, "/Run"):
    with xterm.XTerm(shell=["/bin/bash"]) as term:
        ctrl.clear = term.clear

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Read-Only XTerm")
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VBtn("Clear", classes="mx-1", click=ctrl.clear)

    with layout.drawer as drawer:
        drawer.width = 200
        with vuetify.VList():
            create_route("Input")
            create_route("Run")
    
    with layout.content:
        # router.RouterView()
        with xterm.XTerm(shell=["/bin/bash"]) as term:
            ctrl.clear = term.clear

server.start()

With the above code, the terminal theme displays correctly, however if I choose to uncomment the 'router.RouterView()' line of code and comment out the following two lines after that, the terminal theme does not load in properly. I am wondering why this happens, and any solution to it.

In addition, I have a small question as to why "x-term.listen is missing" is appearing when the application is ran. What causes this/what could I do to prevent this?

Again, thank you for any help.

[jourdain]

I think I see what could be happening. So the main issue is that when you use the router view, the component (xterm) is not always there. So when methods are called onto the component while it is not mounted, nothing happens. And then when it finally mount, those settings are lost (since they are not part of the properties). In term of solution. You could either call those methods again at mount time or update the component to expose those as properties.

[proy30]

Thank you very much. This was my solution:

  with layout.content:
      router.RouterView()
      with xterm.XTerm(v_if="$route.path == '/Run'", shell=["/bin/bash"]) as term:
          ctrl.terminal_print = term.writeln

instead of:

with RouterViewLayout(server, "/Run"):
    with xterm.XTerm(shell=["/bin/bash"]) as term:
        ctrl.terminal_print = term.writeln

with layout.content:
    router.RouterView()

[jourdain]

You may have to use v_show= instead of v_if= as you may run into similar issue.