Interactivity and ScopeRef — Nexis documentation

Mark a boundary with $

A $ suffix on an event or binding directive instructs the compiler to produce a boundary marker. The initial HTML contains data-nx-on-* and data-nx-scope rather than an eagerly running application.

Name a local handler when it clarifies intent

Pass a direct local arrow function, function expression, or function declaration as onClick$={increment}. Nexis lowers its body before capture analysis, so supported Signals, Stores, and Actions enter the lazy scope rather than an unavailable callback reference.

Use a safe serialized scope

Capture serializable values, Signals, stores, and Actions. Do not capture DOM nodes, database clients, secrets, class instances, or non-transferable closures.

Keep delegated handlers small

The browser bootstrap delegates supported events and imports only the referenced chunk. Forms remain native-first and are enhanced by their dedicated runtime when present.

PRACTICAL LABS

Run this capability.

Each example states the observable output, the boundary that remains your responsibility, and the check that proves the result.

Use a named local lazy handler

TSX

import { component, state } from '@mohammedaydan/core'

export default component(() => {
  const count = state(0)
  const increment = () => count.set((current) => current + 1)

  return <button onClick$={increment}>Count: {count()}</button>
})

OUTPUT: The initial document has a button; its named local handler loads only after the first click.
BOUNDARY: Only direct local declarations with serializable values, Signals, Stores, or Actions are resumable—not DOM nodes, secrets, database clients, or computed handler expressions.
PROVE IT: Open the network panel and confirm no event chunk loads before click, then confirm the count changes after click.

VERIFICATION

Prove the contract.

Confirm no event chunk is requested before the first interaction, then click the boundary and confirm only its required chunk is loaded.