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.
*dominate - suppress automatic full redraws while still allowing explicit redraws 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.
*rem - remove this element from the rendered output. Use as a Sercrod-only comment.

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

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

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

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

*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 and iterate placement sync. The older *dominant spelling remains available as an alias.

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

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

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

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

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

Fallback:

Fallback: