Add JSX to your WC3 maps!
Feature | Status |
---|---|
Box model | ❌ |
Base frame types | ✔️ |
Lifecycle methods | ❌ (possible with hooks) |
JSX | ✔️ |
Class components | ✔️ |
Functional components | ✔️ |
Hooks | ✔️ |
Fragments | ✔️ |
- Install the dependency
npm install -S w3ts-jsx
- Configure
tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "createElement",
"jsxFragmentFactory": "Fragment"
}
}
- 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>
);
};
- Render it
import { adapter, createElement, render, setAdapter } from "w3ts-jsx";
import { App } from "./App";
setAdapter(adapter);
render(<App />, BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0));