'use babel'

import React from 'preact'
import { getMessageClass } from '../helpers'
import type { Linter$Message } from './types'

/** @jsx React.h */

export default class Message extends React.Component {
  render() {
    const message = this.props.message
    const messageClass = getMessageClass(message)
    return <linter-message>
      <span class="linter-message-item badge badge-flexible linter-highlight">
        {message.name}
      </span>
      <span class={`linter-message-item badge badge-flexible linter-highlight ${getMessageClass(message)}`}>
        {message.type}
      </span>
      <MessageLine message={message} />
    </linter-message>
  }
}

export class MessageLine extends React.Component {
  render() {
    const message = this.props.message
    const className = 'linter-message-item'
    return message.html ?
      <linter-message-line class={className} dangerouslySetInnerHTML={message.html} /> :
      <linter-message-line class={className}>{message.text}</linter-message-line>
  }
}

@@ -206,32 +206,75 @@
  %7B%0A  render() %7B%0A
+    // TODO: Add support for message links%0A
     const messag
@@ -765,24 +765,124 @@
  render() %7B%0A
+    // TODO: Support HTMLElements in %60message.html%60%0A    // TODO: Add support for multiline messages%0A
     const me

Add a few todos