Available since v0.1.0

fs-trigger="mount"

Stable

Fires once when the element is inserted into the DOM. Use for page-load checks, lazy-loaded section validation, and any "the feature should be present when this element appears" contract.

Syntax

<div
  fs-assert="layout/hero-loaded"
  fs-trigger="mount"
  fs-assert-visible=".hero-image">
</div>

When to use it

  • Page-load validation ("the nav should be visible when it mounts")
  • Lazy-loaded section checks ("when this island hydrates, assert its contents")
  • One-shot lifecycle checks that invariant would make too chatty

Mount vs invariant. mount fires once, at insertion. invariant fires perpetually. For "should always be true" use invariant. For "should be true when the element appears" use mount.

Example

<section
  fs-assert="checkout/payment-form-loaded"
  fs-trigger="mount"
  fs-assert-visible=".card-number-input">
  <!-- lazy-loaded payment form -->
</section>

Pairs well with

Gotchas

  • Pre-existing elements. If the element is already in the DOM when the agent initializes (i.e., on DOMContentLoaded), mount fires at init time — treat it as first-render validation.
  • Hydration. An SSR-rendered element that the client hydrates is NOT re-mounted. Its attributes change, but identity is preserved. Mount does not re-fire on hydration. Use invariant for "assert across hydration."
  • Re-mounts (React StrictMode, key changes). Frameworks that unmount and remount the same logical element fire mount multiple times. Each fire starts a fresh assertion.

See also