App

A rxxxt app is an ASGI application. It can be used, run and served like any other ASGI application.

Apps can be created by simply passing an element factory (a function producing an element) to App.

Let's write a "Hello World!" app:

from rxxxt import App, El
import uvicorn

def element_factory():
  return El.div(content=["Hello World!"])

app = App(element_factory)
uvicorn.run(app)

Anything that returns an element, if called can be used as an element_factory. Like this "Hello World" component:

from rxxxt import App, El, Component
import uvicorn

class HelloWorld(Component):
  def render(self) -> Element:
    return El.div(content=["Hello World"])

app = App(HelloWorld)
uvicorn.run(app)

In addition to the element factory, a state_resolver (see State), page_factory, and config (an AppConfig) can be passed to App.

AppConfig

• enable_web_socket_state_updates: set to True when websocket pushes should include a refreshed state token so the client can keep its StateResolver data after the socket closes or falls back to HTTP. Leave it False when the websocket never needs to persist state beyond its lifetime.
• disable_http_update_retry: set to True to disable resending events over HTTP when the response indicates the update is stale (new events arrived while the request was processing).

PageFactory

A PageFactory is a function receiving

• a header element,
• a content element,
• and a body_end element

returning an element that represents the html page structure.

Take a look at the default_page as an example:

def default_page(header: Element, content: Element, body_end: Element):
  return HTMLFragment([
    VEl["!DOCTYPE"](html=None),
    El.html(content=[
      El.head(content=[
        VEl.meta(charset="UTF-8"),
        VEl.meta(name="viewport", content="width=device-width, initial-scale=1.0"),
        header
      ]),
      El.body(content=[
        content,
        body_end
      ])
    ])
  ])

PageBuilder

A page builder can be used to modify the contents of a page. An instance of PageBuilder is a page_factory.

Using the utility methods, the contents of header, content and body_end can be extended. Let's add a stylesheet to the header:

page_builder = PageBuilder()
page_builder.add_stylesheet("/assets/main.css")
app = App(element_factory, page_factory=page_builder)

Scripts that should run after the main content is rendered can be appended through add_body_end.

page_builder.add_body_end(El.script(content=[UnescapedHTMLElement("""
console.log("hello world");
""")]))