Props & Types

How props are passed and typed in Mates closure components.

import { html, atom, x, renderApp } from 'mates';
import type { Props } from 'mates';

// Type the first parameter as Props<YourShape>
const Greeting = (propsFn: Props<{ name: string; count?: number }>) => {
  return () => html`
    <p>Hello, ${propsFn().name}! <!-- call propsFn() INSIDE the inner fn -->
      ${propsFn().count != null ? `(visitor #${propsFn().count})` : ''}
    </p>
  `;
};

const App = () => {
  const name = atom('World');
  return () => html`
    ${x(Greeting, { name: name(), count: 42 })}
  `;
};

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

Overview

Props in Mates are passed as Props<T> — a function, not a plain object. When you write x(Greeting, { name: name() }), Mates wraps those values in a getter that always returns the latest snapshot. Call propsFn() inside the inner (template) function to read them reactively.

Because the inner function re-runs on every reactive change, calling propsFn() there always gets the most recent values the parent passed down — including any atoms the parent read when building the props object.

TypeScript types: annotate the component's first parameter as Props<{ name: string; count?: number }>. The Props<T> alias is simply () => T, so destructuring with defaults inside the inner function is idiomatic and safe.

Where to call propsFn()

Location	Safe?	Why
Inside the inner function (return value)	correct	Runs on every reactive update — always returns the latest props from the parent.
In the outer function (setup phase)	stale	Outer runs once. Values captured here are frozen at mount time and never reflect parent updates.
Inside an event handler defined in outer	correct	Handlers close over `propsFn` (the function reference), not a snapshot — calling it at handler time reads the current value.

Never destructure props in the outer function

// ❌ WRONG — name is frozen at mount time
const Bad = (propsFn) => {
  const { name } = propsFn(); // outer fn runs once — stale forever
  return () => html`<p>Hello, ${name}</p>`; // name never updates!
};

// ✅ CORRECT — call propsFn() inside the inner function
const Good = (propsFn) => {
  return () => html`<p>Hello, ${propsFn().name}</p>`; // always fresh
};

Passing typed props

Two instances of Greeting share the same reactive name atom from the parent. One also receives an optional count prop. Changing the input updates both.

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

// TypeScript: (propsFn: Props<{ name: string; count?: number }>) => ...

const Greeting = (propsFn) => {

return () => html`

Hello, <strong>${propsFn().name}</strong>!

${propsFn().count != null

? html`<small class="m-l-20">(visitor #${propsFn().count})</small>`

: ''}

</p>

</div>

};

const App = () => {

const name = atom('World');

const count = atom(1);

return () => html`

${x(Greeting, { name: name(), count: count() })}

${x(Greeting, { name: name() })}

<input .value=${name()} @input=${e => name.set(e.target.value)}

placeholder="Your name…" />

</div>

};

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

Required vs optional props

label is required; color and variant fall back to defaults when omitted. Defaults are applied inside the inner function so every render reads fresh props.

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

// 'label' is required; 'color' and 'variant' have defaults when omitted

const Tag = (propsFn) => {

return () => {

const { label, color = '#00b3a8', variant = 'outline' } = propsFn();

const solid = variant === 'solid';

return html`

<span class="tag mono"

style="background:${solid ? color : color + '22'};

color:${solid ? '#fff' : color};

border:1px solid ${color + '55'};">${label}</span>

};

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

${x(Tag, { label: 'default' })}

${x(Tag, { label: 'success', color: '#22c55e' })}

${x(Tag, { label: 'warning', color: '#f97316', variant: 'solid' })}

${x(Tag, { label: 'purple', color: '#a855f7' })}

</div>

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

API — Props<T>

import type { Props } from 'mates'

Prop / Option	Type	Default	Description
`Props<T>`*	`() => T`	—	Type alias for the first parameter of a component function. A getter function that returns the current props object. Always call it inside the inner (template) function to stay reactive.
`x(Comp, props: T)`	`TemplateResult`	—	Call site — pass a plain object. Mates wraps it so the child receives Props and always sees the latest snapshot when the parent re-renders.

Usage patterns

Prop / Option	Type	Default	Description
`propsFn()`	`T`	—	Call inside the inner function to get the latest props snapshot. Registers as a reactive dependency — the template re-runs whenever the parent passes new values.
`propsFn().someProp`	`T[key]`	—	Access individual props after calling propsFn(). Equivalent to reading a named field from the latest snapshot.
`const { label, color = '#00b3a8' } = propsFn()`	`destructuring`	—	Destructure with defaults inside the inner function. Safe because the inner function re-runs on every update — unlike the outer function.
`propsFn() in a handler`	`T`	—	Handlers created in setup may call propsFn() at event time — they close over the function reference, not a frozen snapshot.