Data and interpolation

This page explains how Sercrod reads the data attribute on a host <serc-rod> element and how it expands expressions into text using interpolation and *print.

At a glance:

Host data - JSON or a bound variable on data="...".
Interpolation - inline %name% style placeholders.
*print / *textContent - write values into elements.

Host data

Every Sercrod host has a single data object. By default it is initialized from the data attribute on <serc-rod>.

<serc-rod id="app"
  data='{
    "title": "Hello Sercrod",
    "user": { "name": "Taro" },
    "count": 0
  }'>

  <p>Welcome, %user.name%!</p>

</serc-rod>

The data attribute must contain valid JSON.
Nested objects and arrays are supported.
Inside expressions, top level properties become variables: title, user, count, and so on.

In addition to JSON, the data attribute may also point to an existing variable. For example, when a global json object already exists:

<script>
  const json = { title: "Hello Sercrod", name: "Sercrod" };
</script>

<serc-rod id="app" data="json">
  <h1 *print="title"></h1>
</serc-rod>

Internally, Sercrod wraps the data in a Proxy so that assignments can trigger re-renders.

Text interpolation

Sercrod can expand expressions inside text nodes using interpolation delimiters. By default both the start and end delimiter are %.

<serc-rod data='{"name": "Sercrod", "n": 3}'>
  <p>Hello, %name%!</p>
  <p>n is %n%, n + 1 is %n + 1%</p>
</serc-rod>

Everything between the delimiters is evaluated as an expression in the current scope. The result replaces the whole %...% block.

null, undefined, false become an empty string.
Other values are converted with String(value).
Interpolation applies only to text nodes and attribute values.

The delimiters can be changed globally with __Sercrod.config.delimiters if needed.

print and textContent

The *print directive writes the evaluated result of an expression into an element’s textContent.

<serc-rod data='{"user": { "name": "Taro" }}'>
  <p *print="user.name"></p>
</serc-rod>

The expression is evaluated in the current scope (host data plus local variables).
If the result is null, undefined or false, the element becomes empty.
Otherwise the value is converted to text and assigned to textContent.

*textContent and n-textContent are synonyms of *print. They exist for projects that prefer a more explicit name.

<serc-rod data='{"count": 3}'>
  <span *textContent="count + 1"></span>
</serc-rod>

Interpolation in attributes

Plain HTML attributes can also contain interpolation blocks. Sercrod resolves them and applies the final string to the attribute.

<serc-rod data='{"name": "Sercrod"}'>
  <input
    type="text"
    placeholder="Hello, %name%!"
  >
</serc-rod>

For attributes that should react to state changes, use bindings such as :value, :class or :style. These are described on the attribute bindings page.

Updating data

Assignments in event handlers update the host data and trigger re-rendering of the affected parts.

<serc-rod data='{"count": 0}'>
  <p *print="count"></p>
  <button @click="count++">Increment</button>
</serc-rod>

Assignments like count++ or user.name = "New" are tracked.
Array methods such as push and splice are tracked on the proxied array.
Staged updates with *stage, *apply and *restore are described on the staging page.