[Kagura]

I agree that it's the programmer's job to make code readable up to a certain point. You can write the most beautiful piece of art in assembly, but it's gonna be damn hard for anyone else to understand it right away. On the other hand of the spectrum, you could say : 'window with two buttons in the middle of the screen (which is probably possible to be deconstructed into an AST and finally converted to LUA)'.

I am trying to find a middle ground where it's gonna be easy for me (the developer) to write something that is fun to code, easy to read and easy to change implementation.

I also know about the prototypical nature of both JS and LUA, but what I mean to say is this: When you are using a Class based approach to programming OOP, there's A LOT of different ways (both in LUA and JS) to achieve this. Of course you can be a purist and say: write it in the original language, it's good enough, but I can literally change all my code to use closure based class implementation instead of metatable based class implementation by changing one option in my compiler (This is not so easy in LUA since how you call instance methods will be different depending on your approach : class:method() vs class.method())

I know all of this all personal preference, but I wanted to share this weird journey either way. I would like to share the next piece of code (also available as gist for better readability: https://gist.github.com/Nimaear/33cf...0cae3366e54f0a)

Maybe it's just me, but I really like how it reads compared to doing the same in LUA (even with a proper class implementation). I did find a way to get my original problem solved, so I am journeying towards creating my UI toolkit after which I will port my unitframes.

import WindowWithTitle from 'UI/Window/WindowWithTitle';
import SmallButton from 'UI/Button/SmallButton';
import Text from 'UI/Text';
import UI, { Component } from 'UI';

export default class Test extends Component {
  events = [
    'UNIT_AURA'
  ];

  UNIT_AURA(___) {
    console.log('Someone gained aura!', ___);
  }

  ok() {
    console.log('You pressed ok');
  }

  cancel() {
    console.log('You pressed cancel');
  }

  render() {
    return (
      <WindowWithTitle movable title={'Broxxigar the red'} width={512} height={512} anchors={[['CENTER']]}>
        <Text anchors={[['TOPLEFT'], ['BOTTOMRIGHT', 'parent', 'RIGHT']]} align={'LEFT'} vAlign={'TOP'}>
          Even for an orc, Broxigar the Red was obsessed with honor and felt he had lost his by living. While he served the Horde with distinction all his life, his true shame came from an action he took long after the Blood Curse had lifted and Thrall has assumed the mantle of Warchief. During the Third War, as the Horde struggled to prevent the demonic army of the Burning Legion from claiming Mount Hyjal as their own, Broxigar led a force of orc warriors in the defense of a vital choke point that would give the Legion their path. Rather than allow the demons to proceed, the orcs stood and died. All of them.

          All of them save Broxigar.
        </Text>
        <SmallButton anchors={[['BOTTOMLEFT']]} onClick={() => this.ok()}>
          <Text anchors={'*'}>OK</Text>
        </SmallButton>
        <SmallButton anchors={[['BOTTOMRIGHT']]} onClick={() => this.cancel()}>
          <Text anchors={'*'}>Cancel</Text>
        </SmallButton>
      </WindowWithTitle>
    )
  }
}

De generated LUA looks like this:

  do
    local WindowWithTitle = __Modules.k.__default__
    local SmallButton = __Modules.m.__default__
    local Text = __Modules.i.__default__
    local UI = __Modules.d.__default__
    local Component = __Modules.d.Component
    local Panel = __Modules.n.__default__
    local Test = Component:extend({ events = { "UNIT_AURA" } })

    Test.__class = 'Test'


    function Test:Test__UNIT_AURA(...)
      prettyPrint("Components\Test.js:13", "Someone gained aura!", ...)
    end
    Test.UNIT_AURA = Test.Test__UNIT_AURA

    function Test:Test__ok()
      prettyPrint("Components\Test.js:17", "You pressed ok")
    end
    Test.ok = Test.Test__ok

    function Test:Test__cancel()
      prettyPrint("Components\Test.js:21", "You pressed cancel")
    end
    Test.cancel = Test.Test__cancel

    function Test:Test__render()
      return { WindowWithTitle, { movable = true, title = "Broxxigar the red", width = 512, height = 512, anchors = { { "CENTER" } } }, { Text, { anchors = { { "TOPLEFT" }, { "BOTTOMRIGHT", "parent", "RIGHT" } }, align = "LEFT", vAlign = "TOP" }, "Even for an orc, Broxigar the Red was obsessed with honor and felt he had lost his by living. While he served the Horde with distinction all his life, his true shame came from an action he took long after the Blood Curse had lifted and Thrall has assumed the mantle of Warchief. During the Third War, as the Horde struggled to prevent the demonic army of the Burning Legion from claiming Mount Hyjal as their own, Broxigar led a force of orc warriors in the defense of a vital choke point that would give the Legion their path. Rather than allow the demons to proceed, the orcs stood and died. All of them. All of them save Broxigar." }, { SmallButton, { anchors = { { "BOTTOMLEFT" } }, onClick = function ()
        self:ok()
      end }, { Text, { anchors = "*" }, "OK" } }, { SmallButton, { anchors = { { "BOTTOMRIGHT" } }, onClick = function ()
        self:cancel()
      end }, { Text, { anchors = "*" }, "Cancel" } } }
    end
    Test.render = Test.Test__render

    __Modules.o = __Modules.o or {}
    __Modules.o.__default__ = Test
  end