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.

A template name is a type as well as a value, so it cannot be shared with a type declared beside it. An interface Item and an <Item> template in the same file are two declarations of Item, and the compiler reports a duplicate identifier on both. Give the data a different name from the template that renders it (Message and <MessageRow>, or ItemData and <Item>).

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>