Example widget using the new JS + virtual DOM syntax

top-cpu.jsx

export const refreshFrequency = 1000;
export const command = `ps axro \"%cpu,ucomm,pid\" \
  | sed -e 's/^[ \\t]*//g' -e 's/\\([0-9][0-9]*\\.[0-9][0-9]*\\)\\ /\\1\\%\\,/g' -e 's/\\ \\ *\\([0-9][0-9]*$\\)/\\,\\1/g' -e's/\\ \\ */\\_/g' \
  | awk 'FNR>1' \
  | head -n 3 \
  | awk -F',' '{ printf \"%s,%s,%d\\n\", $1, $2, $3}' \
  | sed -e 's/\\_/\\ /g'`;


const style = {
  top: '10px',
  left: '10px',
  position: 'absolute',
  background: 'rgba(255, 255, 255, 0.2)',
  WebkitBackdropFilter: 'blur(20px)'
};

const columnStyle = {
  padding: '5px 20px',
  fontSize: '18px'
};

export function updateProps(prev, action) {
  const rows = action.output.split('\n').map((row) => {
    return row.split(',');
  });

  return rows;
}

export function render(props) {
  return <table style={style}>
    {props.map((row) =>
      <tr>
        {row.map((col) => <td style={columnStyle}>{col}</td>)}
      </tr>
    )}
  </table>;
}