data-cloak

Hide markup until sigmx has mounted it (Alpine’s x-cloak). The attribute is removed the moment the element mounts; a one-line stylesheet rule hides it until then.

Syntax

data-cloak

part
key	forbidden
value	forbidden

Setup

[data-cloak] { display: none !important }

Use your own prefix in the selector if you configured one ([hx-cloak] for prefix: 'hx-').

Hide a template until it renders

Without the cloak, the raw { signals } text and empty data-text elements would show for a moment before sigmx runs.

no flash of unrendered markup

Welcome back, . You have unread messages.

<style>[data-cloak] { display: none !important }</style>
<div data-signals="{ user: { name: 'Ada', unread: 3 } }">
  <p data-cloak>Welcome back, <b data-text="$user.name"></b>. You have <b data-text="$user.unread"></b> unread messages.</p>
</div>

Works for patched-in markup too

Markup a server patches in mounts immediately, so the cloak is removed straight away; the same rule protects both paths.

inserted later

insert cloaked markup

<style>[data-cloak] { display: none !important }</style>
<div data-signals="{ n: 0 }">
  <button data-on:click="$n++; el.nextElementSibling.insertAdjacentHTML('beforeend', '<p data-cloak>Inserted item ' + $n + ', mounted and uncloaked at once.</p>')">insert cloaked markup</button>
<div></div>
</div>

Notes

Mounting happens on DOMContentLoaded for markup in the initial HTML, or immediately for markup added afterwards. The attribute is only removed; nothing else about the element changes.

Register

import { cloak } from 'sigmx/plugins'

Registering cloak adds 110 bytes brotli (118 gzip, 232 minified) on top of the core. See bundle sizes.