Mithril ES6 Components

app.js

// No dependencies! + 1 point

// Only one API to reference! + 1 point
const Widget = {
  // Expose desired data directly using destructuring! + 1 point
  controller({initialValue}) {
    // No more retrieving references buried by the superclass! + 1 point
    this.counter = initialValue;
    // Two less methods! + 2 points
  },
  
  // Arrow function means implicit return! + 1 point
  view : (ctrl,{name}) =>
    m('div', [
      // Just reference input arguments directly! Again! + 1 point
      m('h1', 'This widget is set up for: '+ name),
      m('p', 'Counter: ' + ctrl.counter),
      // One less external reference! + 1 point
      // Write exactly what you want instead of writing more API! + 1 point
      m('button', { onclick: () => ctrl.counter++ }, 'Increment Counter')
    ])
}

const IndexPage = {
  // No controller! + 1 point
  view : ctrl =>
    // Actually return the view contents! + 1 point
    m('div', [
      // Just call the stuff you need when you need it! 
      // All setup conditions in one place! No external references! Again!
      // + 1 points
      m( Widget, {name: 'foo', initialValue: 2, key: ctrl.widgetId } ),
      
      // One less external reference! Explicit code! + 1 point
      m('button', {onclick: () => ctrl.widgetId = Date.now()}, 'Reset Counter')
    ]);
  }
}

// No `extends`! No `new`! + 2 points
m.mount(document.body, IndexPage);

app.nocomments.js

const Widget = {
  controller({initialValue}) {
    this.counter = initialValue;
  },
  
  view : (ctrl,{name}) =>
    m('div', [
      m('h1', 'This widget is set up for: '+ name),
      m('p', 'Counter: ' + ctrl.counter),
      m('button', { onclick: () => ctrl.counter++ }, 'Increment Counter')
    ])
}

const IndexPage = {
  view : ctrl =>
    m('div', [
      m( Widget, {name: 'foo', initialValue: 2, key: ctrl.widgetId } ),
      
      m('button', {onclick: () => ctrl.widgetId = Date.now()}, 'Reset Counter')
    ]);
  }
}

m.mount(document.body, IndexPage);