Reactive if() and for()

INFO

if() and for() are methods, used in the Template Tree.

WARNING

On reactive changes, if() and for() are always re-rendering the DOM elements!

if()

The first argument in if() is the condition, which can be boolean value, or a function, returning boolean value. When a state is used in that function, if() becomes reactive.

WARNING

On reactive changes, if() is always re-rendering the DOM elements!

JavaScript

import { component, state } from 'paintor'

component((x) => {
  const myState = state({ pass: true })
  let counter = 0

  const ifHandler = () => {
    x.div({ style: { color: 'green' }}, counter++)
  }
  const elseHandler = () => {
    x.div({ style: { color: 'red' }}, counter++)
  }

  x.div(
    x.if(
      () => myState.pass, // Condition
      ifHandler, // Runs on true
      elseHandler // Runs on false
    )
  )

  setInterval(() => {
    // Reverse
    myState.pass = !myState.pass
  }, 1000)
}).paint('#reactive-if')

HTML

<div id="reactive-if"></div>

example

for()

The first two arguments in for() are from and to. They both accept integer values, or functions, returning integer values. When states are used in these functions, they become reactive.

from and to are both inclusive. For example, if both are 0, the handler will still be called once. However, if from or to is NaN (or a function, returning NaN), the loop will be empty.

WARNING

On reactive changes, for() is always re-rendering the DOM elements!

JavaScript

import { component, state } from 'paintor'

component((x) => {
  const myState = state({ from: 1, to: NaN })

  // "from" label and button
  x.label('from')
  x.input({
    type: 'number',
    value: myState.from,
    onChange: (event) => (myState.from = event.target.value)
  })

  // "to" label and button
  x.label('to')
  x.input({
    type: 'number',
    value: myState.to,
    onChange: (event) => (myState.to = event.target.value)
  })

  // Result
  x.div({ id: 'elements-container' },
    x.for(
      () => myState.from,
      () => myState.to,
      (index) => {
        x.span(index)
      }
    )
  )
}).paint('#reactive-for')

HTML

<div id="reactive-for"></div>

example

Hint: Change the numbers in the inputs.