How to use the Bangle.js Layout library

I haven't looked too deeply at the new layout library yet, but maybe this will serve as some inspiration...

A while back I was experimenting with a layout library of my own. I never quite got it to the point where I was happy releasing it to the world, but it did have some interesting features. Most notably:

• A flexbox-inspired layout system, with column and row support
  
• Support for elements with dependencies between their width and their height (eg. wrapping text)
  
• Easy to extend with new types of elements
  
• Automatic lazy rerendering - it would detect which elements were new or different each frame (by way of hashing them) and only clear / redraw those elements
  
  

Usage looked like this:

let canvas = trui.canvas();

canvas.render(
  trui.column({x: 0, y: 24, width: 240, height: 216, children: [
    {flex: 1},
    trui.padding({left: 10, right: 10, child:
      trui.text({font: "Vector", fitWidth: true, text: `${hours}:${padNum(d.getMinutes(), 2)}`})
    }),
    {flex: 1},
    trui.row({children: [
      {flex: 1},
      trui.text({font: "Vector", fontSize: 28, text: meridian}),
      {flex: 1},
      trui.text({font: "Vector", fontSize: 28, text: padNum(d.getSeconds(), 2)}),
      {flex: 1}
    ]}),
    {flex: 1},
    trui.wrappingText({font: "Vector", fontSize: 18, lineHeight: 30, align: 0, text: locale.date(d,false)}),
  ]})
);

(Each {flex: 1} there is a flexible spacer)

If anyone would like to see it in action, they can try it here: https://www.espruino.com/ide/?gist=bde5d085b2723a87e93f55411c03983a