Comparison

micro-syntax

Comparison between Nusa micro-syntax vs various JS framework for reactive programming. (some details like variables and functions declaration are omitted)

Data Binding

single value

Change input.value to foo when it's changed.

in Nusa

<input ~ .value="foo">

multiple value

Change input.value to foo or bar if one of them are changed.

in Nusa

<input ~ .value="foo bar">

Data Flow

in Nusa

<input ~ .value="foo~>bar">
<!-- or -->
<input ~ .value="bar<~foo">

in JS (mostly)

effect(() => { bar.value = foo.value });
<input value={bar}/>

Reactive Computation

unidirectional

in Nusa

<input ~ .value="(foo,bar)~>ret:concat">
<!-- or -->
<input ~ .value="ret:concat<~(foo,bar)">

in JS (mostly)

const result = computed(
  () => concat(foo.value, bar.value)
);
<input value={result}/>

in SolidJS

const result = () => concat(foo(), bar());
<input value={result()}/> // dunno if it can be inlined 🤔

in Svelte

<script>
$: value = concat(foo. bar)
</script>
<input {value}>

bidirectional

in Nusa

<input ~ .value="(foo,bar)<~>ret:concat" @change=call>
<!-- or -->
<input ~ .value="ret:concat<~>(foo,bar)" @change=call>

in JS (mostly)

function listen(event) {
  const ret = concat(event.target.value)
  untrack(() => {
    foo.value = bar.value = ret
  })
  event.target.value = ret
};
const result = computed(() => 
  concat(foo.value, bar.value)
);
<input value={result} onchange={listen}/>

Side Effect

in Nusa

<input ~ .value="(foo,bar)~>call:print">
<!-- or -->
<input ~ .value="call:print<~(foo,bar)">

in JS (vanilla)

const input = document.querySelector("input")
effect(current => {
  print(foo.value, bar.value)
  input.value = current // value can be either foo or bar, depend on which signal are changed 
})