data-json-signals

Render the store, or part of it, as pretty-printed JSON. A development aid: drop it anywhere to watch signals change.

Syntax

data-json-signals
data-json-signals="{ include: /^form\./ }"
data-json-signals="{ exclude: /^_/ }"

part
key	forbidden
value	optional filter { include, exclude } of regular expressions over dotted paths

Watch a namespace

filtered to one prefix

n++push a tagtoggle

<div data-signals="{ debug: { on: true, n: 2, tags: ['a'] } }">
  <div class="row"><button data-on:click="$debug.n++">n++</button><button data-on:click="$debug.tags.push('x')">push a tag</button><button data-on:click="$debug.on = !$debug.on">toggle</button></div>
  <pre data-json-signals="{ include: /^debug/ }"></pre>
</div>

Exclude private paths

Paths beginning with _ are the convention for browser-only state; exclude them the same way requests do by default.

exclude

toggle _ui.menuOpen

<div data-signals="{ cart: { items: 2 }, _ui: { menuOpen: false } }">
  <button data-on:click="$_ui.menuOpen = !$_ui.menuOpen">toggle _ui.menuOpen</button>
  <pre data-json-signals="{ include: /^(cart|_ui)/, exclude: /^_/ }"></pre>
</div>

Notes

Computed signals are included. Arrays and nested namespaces render as nested JSON; the output re-renders after each settled batch of changes.

Register

import { jsonSignals } from 'sigmx/plugins'

Registering jsonSignals adds 146 bytes brotli (162 gzip, 327 minified) on top of the core. See bundle sizes.