01
A $ event is a lazy boundary
Nexis emits a handler chunk for an onClick$, onInput$, or similar event. The bootstrap delegates the event and imports that chunk on first intent.
- Keep handlers short and side-effect focused.
- A direct local named handler such as onClick$={increment} is supported when its captures are serializable.
- Prefer a static link or native form when interaction is unnecessary.
- Inspect data-nx-on and generated chunks when debugging.
02
Signals change targets, not trees
Use state for values that change. A direct Signal read or explicit bindText$ can update one rendered target instead of rerunning the component or reconciling a tree.
- Use computed for derived values.
- Use batch for one logical update group.
- Create request-specific state in the correct owner and never put private state in a global singleton.
03
Make intent obvious
Explicit binding directives are clearer for input values, checked state, disabled controls, hidden content, attributes, styles, and URLs.
- Use bindValue$ for editable values.
- Use bindDisabled$ for submit state.
- Dispose effects and stores with their owner.
Signal + lazy event · framework-nativeTypeScript
import { component, state } from '@mohammedaydan/core'
export default component(() => {
const count = state(0)
const increment = () => count.set((current) => current + 1)
return (
<section>
<output bindText$={count}>{count()}</output>
<button type="button" onClick$={increment}>Increment</button>
</section>
)
})PRACTICE LAB
Prove the behavior.
Open the browser network panel, click Increment once, and verify that the event chunk is requested only after the interaction.