w3ts-jsx

Add JSX to your WC3 maps!

Features

Feature	Status
Box model	❌
Base frame types	✔️
Lifecycle methods	❌ (possible with hooks)
JSX	✔️
Class components	✔️
Functional components	✔️
Hooks	✔️
Fragments	✔️

Usage

1. Install dependencies

npm install -D w3ts-jsx basic-pragma

2. Configure tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createElement",
    "jsxFragmentFactory": "Fragment"
  }
}

3. Implement a JSX component

import { createElement, useEffect, useState } from "w3ts-jsx";
import { Timer } from "@voces/w3ts";

export const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = new Timer();
    timer.start(1, true, () => setCount((c) => c + 1));

    return () => timer.destroy();
  }, []);

  return (
    <button
      inherits="ScoreScreenTabButtonTemplate"
      absPosition={{ point: FRAMEPOINT_CENTER, x: 0.4, y: 0.3 }}
      size={{ width: 0.1, height: 0.04 }}
      onClick={() => print("Button Clicked")}
    >
      <backdrop
        position="parent"
        texture="ReplaceableTextures\\CommandButtons\\BTNSelectHeroOn"
      />
      <text text={`Waited ${count} seconds`} position="parent" />
    </button>
  );
};

4. Render it

import { adapter, createElement, render, setAdapter } from "w3ts-jsx";
import { App } from "./App";

setAdapter(adapter);

render(<App />, BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0));

Examples

• w3ts-jsx-example.
• duels.