WithKita

This is a mixin that provides to the element the ability to use jsx syntax.

Kitajs is a very lightweight library that allows you to use jsx syntax.

It's very light and easy to use, and it's a great alternative to other rendering libraries.

Gzip size is around 2kb.

@customElement('my-jsx-element')
export class MyJsxElement extends WithKita(RadiantElement){}

Once you have the mixin applied to your element, you can use jsx syntax to render your element.

@customElement('my-jsx-element')
export class MyJsxElement extends WithKita(RadiantElement){
  ...
  this.renderTemplate({
    target: this,
    template: <div>Hello World</div>
  });
}