*updated

Summary

*updated registers a post-update hook. It runs handler code after Sercrod finishes an update cycle.

Use *update when you want to select another Sercrod host and force that host to update. *updated-propagate remains a compatibility alias for *update, not for *updated.

Basic example

<script>
  function onHostUpdated(event) {
    console.log("Host updated:", event.type, event.target.id);
  }
</script>

<serc-rod
  id="app"
  data='{"count": 0}'
  *updated="onHostUpdated($event)"
>
  <button type="button" @click="count += 1">Increment</button>
  <span *print="count"></span>
</serc-rod>

Whenever app renders, Sercrod evaluates onHostUpdated($event) after the render has completed.

Behavior

• On a Sercrod host, *updated runs after the host update cycle.
• On an ordinary descendant element, the containing host runs the handler after a real render pass.
• The value is handler code, not a target name.
• *updated="(selector)" is no longer a routing form. Use *update="(selector)" for target routing.

Scope

On a Sercrod host, handler code runs in the host data scope. It can use data fields, methods registered through *methods, el / $el, and $event / $e.

On ordinary elements, el / $el points to the element that owns *updated, and $event includes type: "updated", target, and host.

Object-bulk host hooks

For host-level *updated, a bare global object name is a convenience form. If window.Hooks is an object, Sercrod calls each enumerable function on it with the host as the argument.

<script>
  const Hooks = {
    log(host) {
      console.log("updated", host.id);
    }
  };
</script>

<serc-rod id="app" *updated="Hooks"></serc-rod>

*updated vs *update

• *updated: executes handler code after an update.
• *update: reads a literal target spec such as root, 2, or (#parent), then calls target.update(true, caller).

Examples

Element-level hook:

<script>
  function initWidget(el) {
    if (el.dataset.ready) return;
    el.dataset.ready = "1";
  }
</script>

<serc-rod>
  <div class="widget" *updated="initWidget(el)"></div>
</serc-rod>

Updating another host:

<serc-rod id="parent" data='{"message": "old"}'>
  <serc-rod data='{"draft": "new"}'>
    <button
      type="button"
      @click="$parent.message = draft"
      *update="2">
      Apply
    </button>
  </serc-rod>

  <p *print="message"></p>
</serc-rod>

Notes

• *updated and n-updated are aliases.
• *updated is for handler execution after an update.
• *update and n-update are for target selection and forced host updates.
• *updated-propagate and n-updated-propagate remain compatibility aliases for *update.
• A handler that repeatedly mutates data can create an update loop; make those handlers converge.