Improve code view for custom virtual dom library

Question

I wanna make something similar to the reactjs code look but without jsx render use.

I have nice working status of library but still looks raw:

Simple component:

import {BaseComponent} from "safir";

export default class MyButton extends BaseComponent {

  id = '';
  text = '';

  // props of safir class
  counter = 0;

  // Fancy ecma6 also can be used.
  // get getCounter() {
  //   return this.counter;
  // }

  ready = () => {};

  constructor(arg, arg2 = '') {
    super(arg);
    this.initial(arg, arg2);
  }

  onClick = this.clickBind;

  render = () => `
    <button class="fill" onclick="(${this.onClick})('${this.id}')">
      ${this.text} counter => ${this.counter}
    </button>
  `;
}

I wanna make little more fancy this part:

onclick="(${this.onClick})('${this.id}')"

This is for now only way to attach event in render courutine.

For more info take a look source.

Any suggestion?