Templates

Where template files live, how a template is declared, and how a parent passes content into a child with slots.

Files

A page is a folder:

app/pages/home/
  index.ts          # route handler
  template.html     # html templates and inline TS
  style.css         # page styles

Start with a page's helpers, event handlers, and @rpc functions right in its template.html. As the file grows, move the @rpc functions and the shared interfaces to the sibling services.ts. Event handlers stay with the markup that fires them.

app/pages/home/
  index.ts          # route handler
  template.html     # page template, event handlers, and reactive state
  services.ts       # rpc functions (once the page grows)
  style.css
  test.ts

Move shared templates to app/shared/templates/. Shared rpc, channels, and LiveTables go in app/shared/<topic>.ts.

<html> is a special reserved template name. Marking a template as <html> makes it the default export of the file and turns it into an html page that automatically bundles its linked stylesheets and scripts across the reachable dependency graph. Other named templates are named exports.

import html from "./template";
import html, { Footer } from "./template";   // page + named template

Import a template extensionless: ./template resolves to template.html.

Templates compose like function or class declarations: define them in one file or split across multiple files.

Slots

Slots are how a parent passes content into a child template. The child declares <slot/> placeholders; the parent fills them. The syntax is standard html.

<Panel>
  default content
  <footer slot="footer">footer content</footer>
</Panel>

<Panel>
  <slot/>
  <slot name="footer">default footer</slot>
</Panel>