About the programming language - WoWAnalyzer/WoWAnalyzer GitHub Wiki

We use a modern variant of JavaScript called TypeScript.We also use a very popular library called React for rendering things in the browser, the main thing you'll see because of this is JSX throughout the codebase. This is XML-like code directly in JavaScript.

Trying to get familiar with all of this at once might be overwhelming, but you don’t need to know the finer details of how all of this works to get started (it will help for more advanced contributions though).

React and JSX are used extensively throughout the app and is fairly complex to learn, but unless you want to rewrite things like report selection, player selection and the results page, you don’t need to know a lot about it. The gist is that this:

TODO: update this example

      <StatisticBox
        icon={<SpellIcon id={SPELLS.AURA_OF_MERCY_TALENT.id} />}
        value={`${formatNumber(this.hps)} HPS`}
        label="Healing done"
      />

Renders a statistic box like this:

image

  • The box is rendered by the StatisticBox component, it takes properties to configure how it should be rendered;
  • The icon is rendered by the SpellIcon component to which we passed the Aura of Mercy spell id that we have defined in one of the SPELLS objects. The SpellIcon component takes care of finding the correct icon for the spell, showing the image and making it clickable.
  • The value is a template literal, with a formatter to make the number human readable.
  • The label is a plain string.

If you get stuck or need help, come ask in Discord! There are usually people around that can help you find your footing or debug a problem.