Sercrod directives

This page is the entry point for the Sercrod directive reference.

Basic directives

*let - define local variables available to expressions inside this element.
*print - print the result of an expression into the element as plain text.
*input - bind a form control value to a data path.
*if - conditionally render this element when the expression is truthy.
*else - fallback branch for a *if / *elseif group when no condition matched.
*for - repeat this element for each item in a list.
*iterate - synchronize a host-owned child placement region from a data array.
*entry - declare a candidate key inside a *template used by *iterate.
*dominate - suppress automatic full redraws while still allowing explicit redraws, registered non-structural change commands, and iterate placement sync. The older *dominant spelling remains available as an alias.
*save - save host data or a staged view through a configured storage mechanism.
*load - load data from storage into host data.
*params - add metadata to Sercrod request envelopes.
*response - map communication responses into host data.
*rem - remove this element from the rendered output. Use as a Sercrod-only comment.

Extended directives

*compose - compose this element from another template, partial, or host.
*each - repeat this element for each entry in a map (value, key).
*stage - work with a staged copy of host data for editing before applying.
*apply - apply staged changes from the stage back to the host data.
*restore - discard staged changes and restore host data from the last stable state.
*camera - capture or pick an image through the camera adapter.
*clipboard - read or write clipboard text from an explicit user action.
*audio-capture - record microphone audio through the audio capture adapter.
*geolocation - get or watch foreground position through the geolocation adapter.
*network-status - read or watch online/offline status through the network status adapter.
*share - share text, URLs, or supported files from an explicit user action.
*notification - show local notifications from an explicit user action.
*barcode - scan barcodes and QR codes from an explicit user action.
*upload - upload selected files or data to a server endpoint.
*download - trigger a download of data from a server endpoint.

Debugging

*log - evaluate an expression and log its value, expression, and host snippet.

All directives

Control flow

*if - conditionally render this element when the expression is truthy.
*elseif - else-if branch paired with a preceding *if or *elseif.
*else - fallback branch for a *if / *elseif group when no condition matched.
*for - repeat this element for each item in a list.
*each - repeat this element for each entry in a map (value, key).
*iterate - synchronize a host-owned child placement region from a data array and registered template source.
*entry - declare a candidate key inside a *template used by *iterate.
*switch - select one branch from *case / *default based on an expression.
*case - render this branch when the *switch expression equals the case value.
*case.break - like *case, and stop evaluating later *case branches.
*break - stop processing the current *for / *each loop when the expression is truthy.
*default - fallback branch for *switch when no *case matched.

Scope and literals

*let - define local variables available to expressions inside this element.
*global - write variables into the global Sercrod data scope.
*literal - treat the inner content as a literal string, without Sercrod expansion.
*rem - remove this element from the rendered output. Use as a Sercrod-only comment.

Form input

*input - bind a form control value to a data path.
*lazy - update bound data on a later event instead of every input.
*eager - update bound data eagerly, typically on each input event.
*dominate - suppress automatic full redraws while still allowing explicit redraws, registered non-structural change commands, and iterate placement sync. The older *dominant spelling remains available as an alias.

Staging and persistence

*stage - work with a staged copy of host data for editing before applying.
*apply - apply staged changes from the stage back to the host data.
*restore - discard staged changes and restore host data from the last stable state.
*save - save host data or a staged view through a configured storage mechanism.
*load - load data from storage into host data.
*keys - select top-level host data keys for save, load, post, upload, and WebSocket send actions.

HTTP and API

*post - send selected host data as a Sercrod JSON envelope via POST.
*fetch - fetch JSON from a URL and place the parsed response with *response.
*api - general HTTP gateway for GET, JSON bodies, and file-input uploads.
*params - add request metadata to *post, *api, and *upload.
*dry-run - mark a request as dry-run without implementing server-side dry-run.
*response - map communication responses into host data.

Rendering output and composition

*print - print the result of an expression into the element as plain text.
*compose - compose this element from another template, partial, or host.
*textContent - set the DOM textContent property from an expression.
*innerHTML - set the DOM innerHTML property from an expression.
*unwrap - see the dedicated page.

WebSocket

*websocket - open and manage a WebSocket connection for this host.
*ws-send - send a message through the active WebSocket connection.
*ws-to - set the logical target for outgoing WebSocket messages on this host.

Device, files, and transfer

*camera - capture or pick an image through the camera adapter.
*clipboard - read or write clipboard text from an explicit user action.
*audio-capture - record microphone audio through the audio capture adapter.
*geolocation - get or watch foreground position through the geolocation adapter.
*network-status - read or watch online/offline status through the network status adapter.
*share - share text, URLs, or supported files from an explicit user action.
*notification - show local notifications from an explicit user action.
*barcode - scan barcodes and QR codes from an explicit user action.
*upload - upload selected files or data to a server endpoint.
*download - trigger a download of data from a server endpoint.

Event helpers

*prevent-default - call event.preventDefault() for the current event.
*prevent - short form of *prevent-default for the current event.

Lifecycle

*updated - call a handler after this host has been updated.
*update - update a target Sercrod host after this host or element has been updated. Use this spelling in new templates.

Compatibility:

*updated-propagate remains available for older templates, but new examples should use *update.

Debugging

*log - evaluate an expression and log its value, expression, and host snippet.

Methods

*methods - define methods that can be called from expressions in this host.

Templates

*template - mark this subtree as a reusable template.
*include - include and render a template or partial into this place.
*import - import a template or partial from another file or module.

Shadow DOM bridge

*shadow - define a Shadow DOM template that can be connected to a host element.
*host - connect an element to a named *shadow template.

Attribute bindings

:action - attribute binding for action.
:class - attribute binding for class.
:formaction - attribute binding for formaction.
:href - attribute binding for href.
:src - attribute binding for src.
:style - attribute binding for style.
:value - attribute binding for value.
:xlink:href - attribute binding for xlink:href.

Fallback:

Attribute bindings (fallback for :name)

Event bindings

@blur - event binding for blur.
@change - event binding for change.
@click - event binding for click.
@focus - event binding for focus.
@input - event binding for input.
@keydown - event binding for keydown.
@keyup - event binding for keyup.
@submit - event binding for submit.

Fallback:

Event bindings (fallback for @name)