Directive Reference

Complete reference guide for Prototype 3 HTML directives, Scopes API, and fine-grained reactivity.

Directives

Directive	Purpose	Example
ly-text	Sets text content safely with automatic HTML escaping.	<span ly-text="user.name">
ly-show	Toggles element visibility using the hidden property.	<p ly-show="isOpen">
ly-bind:*	Binds classes, attributes, properties, and styles dynamically.	ly-bind:disabled="!isValid"
ly-model	Two-way form control binding with IME composition support. Modifiers: .trim, .number, .lazy.	<input ly-model.trim="username">
ly-on:*	Listens to DOM events. Modifiers: .prevent, .stop, .self, .once, .capture, .passive.	ly-on:submit.prevent="save()"
ly-if / ly-if-else / ly-else	Conditional branch rendering anchored in DOM comments.	<div ly-if="isLoggedIn">
ly-for / ly-key	Keyed in-place collection looping without full list re-rendering.	ly-for="item in items" ly-key="item.id"
ly-ref:*	Attaches an element reference to this.$refs.NAME.	<input ly-ref:searchInput>

Scope API

Created via const scope = Lyap.scope('name', targetElement?):

Method	Purpose
scope.state({...})	Registers reactive state properties wrapped in deep proxies.
scope.derived({...})	Registers lazy, memoized computed properties.
scope.actions({...})	Registers action methods executed with this bound to state.
scope.init(fn)	Runs during scope creation before directives are bound.
scope.onMount(fn)	Runs after the element and scope are mounted to the DOM.
scope.cleanup(fn)	Registers resource disposal callbacks for the scope.
scope.onDestroy(fn)	Runs when the container element and scope are destroyed.

Magic variables

Variable	Context	Purpose
$event	Event handlers	The native DOM Event object.
$el	Directives / callbacks	The active DOM Element.
$refs	Actions / callbacks	Named DOM element reference map.
$form	Form handlers	Form submission assistant.
$nextTick	Actions / scripts	Promise resolving after DOM mutations flush.

Global API

Exported on window.Lyap:

Lyap.version             // '3.0.0-proto'
Lyap.scope(name, el?)    // register or retrieve named scope
Lyap.mount(root?, opts?) // mount DOM tree
Lyap.nextTick()          // async flush scheduler
Lyap.signal(value)       // low-level reactive signal
Lyap.computed(fn)        // reactive computed signal
Lyap.effect(fn)          // reactive effect runner
Lyap.store(obj)          // deep reactive proxy