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.
• *save - save host data or a staged view through a configured storage mechanism.
• *load - load data from storage into host data.
• *rem - remove this element from the rendered output. Use as a Sercrod-only comment.

See also:

• Data and *let - detailed notes about data and *let.

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.
• *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).
• *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.

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.

HTTP and API

• *post - send host data as JSON via POST and write the JSON response back into host data.
• *fetch - fetch JSON from a URL and merge or replace it into host data.
• *api - configure an API base URL or options for nested *fetch / *post directives.
• *into - direct the result of the previous directive into a specific data path.

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.

Upload and download

• *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.
• *updated-propagate - like *updated, and propagate the update event to parents.

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.

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)