lit-ui-router / LitStateDeclaration

Interface: LitStateDeclaration<T>

Defined in: packages/lit-ui-router/src/interface.ts:389

State declaration interface for Lit applications.

Extends the core StateDeclaration with Lit-specific component support. The component property accepts template functions, LitElement classes, or both.

Examples

Simplest: inline template function

{ name: 'home', url: '/', component: () => html`<h1>Home</h1>` }

Template with route parameters

{
  name: 'user',
  url: '/user/:id',
  component: (props) => html`<h1>User ${props?.transition?.params().id}</h1>`
}

Template with resolved data

{
  name: 'users',
  url: '/users',
  component: (props) => html`
    <ul>${props?.resolves?.users?.map(u => html`<li>${u.name}</li>`)}</ul>
  `,
  resolve: [{ token: 'users', resolveFn: () => fetch('/api/users').then(r => r.json()) }]
}

LitElement class (for complex components)

{ name: 'dashboard', url: '/dashboard', component: DashboardElement }

Nested states

const states: LitStateDeclaration[] = [
  { name: 'app', abstract: true, component: AppShell },
  { name: 'app.home', url: '/home', component: () => html`<h1>Home</h1>` },
  { name: 'app.users', url: '/users', component: UsersView }
];

See

• StateDeclaration
• RoutedLitTemplate
• RoutedLitElement

Extends

• StateDeclaration

Type Parameters

Type Parameter	Default type
T extends DefaultResolvesType	DefaultResolvesType

Properties

Property	Type	Description	Overrides	Defined in
component?	LitViewDeclaration<T>	The Lit component to render for this state	-	packages/lit-ui-router/src/interface.ts:393
views?	{ [key: string]: LitViewDeclaration<T>; }	An optional object used to define multiple named views. Overrides the core StateDeclaration.views property so each named view accepts any LitViewDeclaration format — a bare component or an object with a component property — threading the resolves generic. See LitViewDeclaration	StateDeclaration.views	packages/lit-ui-router/src/interface.ts:404