setter

Plain local state with manual update notifications via setter().

import { setter, $, _ } from 'mates';
// $ and _ are identical aliases for setter

const Counter = () => {
  let count = 0;

  // Wrap a mutation: run fn → notify subscribers → schedule re-render
  const inc = setter(() => { count++; });
  const dec = $(() => { count--; });
  const reset = _(() => { count = 0; });

  // Swap the underlying fn without replacing the setter reference
  reset.set(() => { count = 10; });

  return () => /* template reads plain `count` — re-renders only when a setter runs */;
};

Overview

setter wraps a plain function so that calling it also notifies subscribers and schedules the host component to re-render. Your state stays as ordinary let variables — there is no atom, no dependency tracking, and no per-read subscription cost.

Aliases $ and _ are identical to setter. Use them when you want a shorter call site; behavior is the same.

This is the lightest way to drive UI from local mutations. Prefer atom when you need derived values, effects, or shared reactive reads across components.

Compared to atom

Member	Status	Notes
`let count` + `setter`	manual notify	Re-renders only when a setter is called. Reads are not tracked.
`atom(0)`	reactive	Reads subscribe templates/effects; `.set` / `.update` notify automatically.

setter — plain local state

Plain let variables are not reactive. setter() wraps any mutation function and schedules a component re-render after the mutation runs — no atom overhead needed.

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

const App = () => {

// Plain local variables — NOT reactive atoms

let count = 0;

let step = 1;

// setter() wraps a mutation function and triggers a re-render

const increment = setter(() => { count += step; });

const decrement = setter(() => { count -= step; });

const reset = setter(() => { count = 0; });

const setStep = setter((n) => { step = n; });

return () => html`

<h1>${count}</h1>

</div>

<button @click=${reset}>Reset</button>

</div>

${[1,5,10].map(n => html`

<button class=${step === n ? 'btn-primary' : 'btn-ghost'} @click=${() => setStep(n)}>${n}</button>

`)}

</div>

};

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

setter.set() — swap the fn

Keep the same callable identity (handlers stay valid) while swapping the underlying mutation with .set(). $ is an alias for setter.

import { html, setter, $, renderApp } from 'mates';

const App = () => {

let count = 0;

let mode = 'by1';

const bump = setter(() => { count += 1; });

const setMode = $((m) => {

mode = m;

bump.set(m === 'by10'

? () => { count += 10; }

: () => { count += 1; });

});

return () => html`

<h1>${count}</h1>

<button class=${mode === 'by1' ? 'btn-primary' : 'btn-ghost'}

@click=${() => setMode('by1')}>+1</button>

<button class=${mode === 'by10' ? 'btn-primary' : 'btn-ghost'}

@click=${() => setMode('by10')}>+10</button>

</div>

};

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

API — setter

import { setter, $, _ } from 'mates'

Prop / Option	Type	Default	Description
`setter(fn)`*	`SetterReturnType`	—	Wraps fn and returns a callable with the same signature. On each call: runs fn(...args), notifies __subscribe listeners (via effectScheduler), then schedules the host component to re-render. $ and _ are identical aliases.
`inc(...args)`	`ReturnType`	—	Invoke the wrapped function. Forwards arguments, returns fn’s result, then notifies and re-renders as above.
`inc.set(newFn)`	`void`	—	Swap the underlying function without replacing the setter reference — useful for hot-reload or conditional logic that must keep the same callable identity.
`inc.__subscribe(cb)`	`() => void`	—	Low-level subscription: cb runs (scheduled) on every setter call. Prefer watch([inc], fn) for component-scoped reactions. Returns unsubscribe.
`inc.__isSetter___`	`true`	—	Type / identity discriminator for setter callables.