Start with one visible change
Type a name, click a counter, and watch a view receive new props. Then render the same model twice under separate scopes. By the end of this course you will be able to explain where a displayed value came from, where a callback writes, and why a row kept or lost its local state.
The examples use @fiberfx/reflect 4.1.1 with @fiberfx/hypergraph and @fiberfx/hyperscript 4.1.1. The exercises run in the browser; reading and trying them does not require Node. Local builds and browser tests use native mx in a configured Mercury workspace. See your first mx application for setup.
Before starting, know events and stores, component props, and the distinction between an input event and a value callback in inputs and forms. The scopes chapter revisits fork and scopeBind.
Open the first experiment. Each lesson gives an action, an expected observation, a violating case, a reset, and a small change to try in your own interface. An expected result is something to check, not an automatic assessment.
1–3. Connect state and actions
- Reflect.1. Binding a view: bind a name input and counter; adapt a native tag and reuse a view factory.
- Reflect.2. Deriving props: derive a label from stores and incoming props; discover why an explicit override skips work.
- Reflect.3. Keeping scopes separate: render two independent counters from one model and check the untouched global value.
4–6. Compose an interface
- Reflect.4. Preserving keyed rows: reorder rows without moving their local checkbox state to the wrong item.
- Reflect.5. Choosing a view: switch ready, empty and error screens, with an explicit unknown-state fallback.
- Reflect.6. Replacing components: select compact or detailed row components through a stable registry; distinguish row identity from child identity.
7–8. Observe and protect the result
- Reflect.7. Following a lifetime: update a label, hide a view and read the props captured by its mount/unmount hooks.
- Reflect.8. Testing the boundary: turn the two-scope exercise into a browser regression test, then add refusal, identity and server-rendering checks.
Use the same eight steps for a search form, an editable queue or a settings page. Keep the state transitions in Hypergraph, presentation in Hyperscript or Mercury UI, and the binding between them small enough to inspect.
The published boundary
The package exports reflect, createReflect, list, variant and fromTag. mapProps is configuration accepted by the factories; it is not a sixth exported function. Type helpers describe bindings, source shapes and the props callers still owe a view.
This course teaches ordinary component props for customization. Resource lifecycle descriptors, selectors, named slot descriptors and preset APIs are not shipped in this version. There is no implicit class merging or callback chaining. Follow each Mercury UI component's public props and application classes; do not target private .mx-* classes.
Source grounding is release revision 20dad1543358ab293c61b004a1f5f2577915798b. The official 4.1.1 package metadata names the published package and its exact peers. Lesson examples explain that contract; a particular application still needs its own tests.