# w3ts-jsx

> JSX for Warcraft III maps

Latest version **3.0.1** (published 2022-10-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install w3ts-jsx
pnpm add w3ts-jsx
yarn add w3ts-jsx
bun add w3ts-jsx
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2022-10-06 |
| First published | 2020-10-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 134.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | verit |
| Maintainers | voces |

## Links

- npm: https://www.npmjs.com/package/w3ts-jsx
- Repository: https://github.com/voces/w3ts-jsx
- Homepage: https://github.com/voces/w3ts-jsx#readme
- Issues: https://github.com/voces/w3ts-jsx/issues
- npm.io page: https://npm.io/package/w3ts-jsx

## Recent versions

- 3.0.1 (latest) — 2022-10-06
- 3.0.0 — 2022-09-26
- 2.5.2 — 2020-12-28
- 2.5.1 — 2020-12-06
- 2.5.0 — 2020-12-02
- 2.4.0 — 2020-11-28
- 2.3.0 — 2020-11-27
- 2.2.0 — 2020-10-16
- 2.0.1 — 2020-10-14
- 2.0.0 — 2020-10-14
- 1.1.0 — 2020-10-13
- 1.0.1 — 2020-10-06
- 1.0.0 — 2020-10-06

## README

# w3ts-jsx

Add JSX to your WC3 maps!

## Features

| Feature                                                                                       | Status                  |
| --------------------------------------------------------------------------------------------- | ----------------------- |
| [Box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) | ❌                       |
| [Base frame types](https://github.com/voces/w3ts-jsx/issues/1)                                | ✔️                      |
| Lifecycle methods                                                                             | ❌ (possible with hooks) |
| JSX                                                                                           | ✔️                      |
| Class components                                                                              | ✔️                      |
| Functional components                                                                         | ✔️                      |
| [Hooks](https://github.com/voces/basic-pragma/issues/1)                                       | ✔️                      |
| [Fragments](https://github.com/voces/w3ts-jsx/issues/2)                                       | ✔️                      |

## Usage

1. Install dependencies

```
npm install -D w3ts-jsx basic-pragma
```

2. Configure `tsconfig.json`

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

3. Implement a JSX component

```tsx
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

```tsx
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](https://github.com/voces/w3ts-jsx-example).
- [duels](https://github.com/voces/duels).

---
_Source: https://npm.io/package/w3ts-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._