Composition & Rendering

Composing components with x(), view(), and renderApp().

import { html, x, view, renderApp } from 'mates';

const Avatar = (propsFn) => () => html`
  <span class="avatar">${propsFn().initials}</span>
`;

const App = () => () => html`
  <div>
    ${x(Avatar, { initials: 'AL' })}   <!-- embed with x() -->
    ${view(Avatar, { initials: 'BK' })} <!-- view() is identical -->
  </div>
`;

renderApp(App, document.getElementById('app')); // mount the root

Overview

x(Component, props) is the primary composition primitive. Call it inside any html template to embed a child component. Mates registers the child with its scheduler — only the components whose reactive dependencies changed re-render, not the entire tree.

view() and template() are exact aliases of x() — same implementation, same runtime behaviour. Pick the name that reads most clearly in your codebase.

renderApp(Component, element) is the entry point. Call it once at application startup to mount the root component into a real DOM element. Optionally pass a third argument with initial props that will be forwarded to the root component's propsFn.

x() · view() · template() — identical aliases

Name	Identical to	Notes
`x(C, props)`	primary	Short, idiomatic. Preferred for templates with many embeddings.
`view(C, props)`	alias of x()	More readable in prose-heavy code; same runtime path.
`template(C, props)`	alias of x()	Useful when naming the abstraction 'template' is clearer.

Composing components

PostCard embeds Avatar using x(). Each x() call is handled by the scheduler — Mates re-renders only the parts of the tree whose reactive dependencies changed.

import { html, x, renderApp } from 'mates';

// Small presentational component — no local state

const Avatar = (propsFn) => () => html`

<div class="avatar-sm">${propsFn().initials}</div>

// Composite component — embeds Avatar using x()

const PostCard = (propsFn) => () => html`

${x(Avatar, { initials: propsFn().initials })}

<div>

<div>${propsFn().author}</div>

<div class="hint">${propsFn().date}</div>

</div>

<p class="muted">${propsFn().content}</p>

</div>

const App = () => () => html`

${x(PostCard, { author:'Alice', initials:'AL', date:'Just now',

content:'Nest x() calls to compose components inside templates.' })}

${x(PostCard, { author:'Bob', initials:'B', date:'2 min ago',

content:'No virtual DOM. No JSX. Pure closures.' })}

</div>

renderApp(App, document.getElementById('app'));

x · view · template — identical

view() and template() are aliases of x(). Pick the name that reads clearest; runtime behaviour is identical.

import { html, x, view, template, renderApp } from 'mates';

const Chip = (propsFn) => () => html`

<span class="tag tag-soft">${propsFn().label}</span>

const App = () => () => html`

${x(Chip, { label: 'x()' })}

${view(Chip, { label: 'view()' })}

${template(Chip, { label: 'template()' })}

</div>

renderApp(App, document.getElementById('app'));

Lazy load via async x()

Pass an async loader to x() — Mates resolves it and mounts the component. See Lazy Components for resolveAsyncValue, isXViewTemplate, and Router usage.

import { html, x, renderApp } from 'mates';

const Feed = () => () => html`

<ul>

<li>Shipped Mates v2</li>

<li>Zero virtual DOM</li>

</ul>

// Same shape as: async () => import('./Feed')

const loadFeed = async () => {

await new Promise((r) => setTimeout(r, 400));

return Feed;

};

const App = () => () => html`

${x(loadFeed)}

</div>

renderApp(App, document.getElementById('app'));

API — x() · view() · renderApp()

import { x, view, template, renderApp, renderTemplate } from 'mates'

Prop / Option	Type	Default	Description
`x(Component, props?)`*	`TemplateResult`	—	Embeds a Mates component (or LazyComponent) inside a lit-html template. Brands the result so isXViewTemplate is true. Registers with the scheduler for fine-grained updates.
`view(Component, props?)`	`TemplateResult`	—	Alias for x(). Identical behaviour — use whichever reads more clearly in context.
`template(Component, props?)`	`TemplateResult`	—	Alias for x(). Identical behaviour.
`renderApp(Component, element)`*	`void`	—	Mounts a root component into a real DOM element via WithScope (MatesUtils + registered scopes). Call once at the application entry point.
`renderApp(Component, element, props)`	`void`	—	Mounts a root component with initial props passed to its propsFn. Useful when the root accepts host-page configuration.
`renderTemplate`	`typeof renderApp`	—	Alias for renderApp.
`WithScope`	`Component`	—	Internal wrapper used by renderApp — creates MatesUtils (and globally registered scopes) so descendants can call useUtils().