Updates global counter every second

author(s): Tao Xin

by Sirenko

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.nomodule.min.js"></script>

JavaScript 1.7

const { div, button, input } = van.tags

const log = v => {
	if (Array.isArray(v)) return v.map(log)
	if (typeof v === 'object') {
  	return Object.fromEntries(Object.entries(v).map(
    e=>[e[0], e[0] !== 't' ? log(e[1]) : e[1]?.isConnected])
    );
  }
  return v;
}

let id = 0;
const Counter = ({val}) => {
	const counterId = id++;
	const localCount = van.state(0);
  const sum = van.derive(() => {
    // slow computation or asynchronous call, so I want to cache it for reuse
    console.log('render', counterId);
    console.log(log(val))
    return localCount.val + val.val;
  })
  
  const show = van.state(true);
	return () => {
    if (!show.val) return null;
    return div(
      'Value = ', 
      sum, sum,
      '(', localCount, ')',
      button({
        onclick: () => localCount.val += 1
      }, 'Increment'),
      button({
        onclick: () => show.val = false
      }, 'X')
    );
 	};
}

const Main = () => {
	const root = div();
  const localVar = van.state(0);
	return div(
  	input({
      value: localVar,
      type: 'number',
      oninput: (e) => localVar.val = +e.target.value
    }),
    div(button({
    	onclick: () => van.add(root, Counter({ val: localVar })),
	 	}, 'Add new counter')),
  	root,
  )
}

van.add(document.body, Main())