logo svelte /markdown v1.6.0
FIG-001/ REACTIVE

dynamic extension state.

Rebuild a fresh extensions array from Svelte state whenever display format changes. The custom tokenizer captures the current format and the parser cache sees a new extension identity.

  • Treat extensions as immutable: assign a new array when reactive inputs change instead of mutating with push, splice, or length = 0.
  • The tokenizer closure captures the selected display format, then stores it on the custom displayButton token.
  • Static extensions can live in the same returned array: $derived([makeCustom(displayFormat), markedKatex(), markedFootnote()]).
  • Click the format buttons and watch both the rendered chips and tokenizer telemetry update from the same markdown source.
↩ all examples
pattern · $derived arrayissue · #309 mode · live running source
issue #309 repro pattern 0 custom tokens format: Decimal mode: Signal
format
chip mode
MARKDOWN markdown
LIVE RENDER rendered

Reactive mission pins

Swap the format below. The same source markdown reparses with the newest tokenizer closure:

  • Boston harbor: decimal lock 42.3601, -71.0589
  • Tokyo tower: decimal lock 35.6586, 139.7454
  • Cape Town signal: decimal lock -33.9249, 18.4241

The important bit is the extension array identity. Rebuild it from state instead of mutating an existing array.

Live operator note

Try typing here: dispatch rescue team to decimal lock 47.6062, -122.3321.

tokenizer telemetry fresh array from $derived

No coordinate tokens yet. Add something like @(42.36, -71.06).

category · reactive
sheet · sheet 01 / 01
⟳ to re-run

Reactive Extensions