PageWithProps

Extends PageController with support for page-level State, produced via the props method; computed state is shared with VM render executions, and can additionally be injected into the page for use by frontend code (typically to hydrate a server-rendered UI).

Defining custom page state

When extending PageWithProps, a State class must be provided which follows a set of requirements. All State classes must:

• Be annotated with kotlinx.serialization.Serializable to facilitate DOM injection of prop structure. Annotating a class with Serializable has its own set of requirements; see the Kotlin Serialization Guide for more info.

• Annotated with HostAccess.Export for each SSR-available property -- this can occur at the top level of a tree of properties, for instance

An example of compliant custom page State:

@Serializable
data class HelloProps(
  @get:HostAccess.Export val message: String = "Hello World!",
)

And providing that state via the PageWithProps controller:

@Page class HelloPage : PageWithProps<HelloProps>(HelloProps.serializer()) {
  override suspend fun props(): HelloProps {
    // ...
  }
}

Using state from SSR executions

When running guest language code for SSR, for instance JavaScript, State is made available and can be loaded using frontend tools -- for instance, elide.js.ssr.boot:

boot<HelloProps> { props ->
  // ...
}

Optionally, the developer can load the inlined server-side props on their own, via a known DOM ID:

JSON.parse(document.getElementById("ssr-data").textContent || '{}')

In SSR mode, elide.js.ssr.boot will read the props (if any), and provide them to the entrypoint for the application so initial render or hydration may be performed, based on the active serving mode.

Parameters