Lets you run Haxe code in your Vite project. Supports client-side javascript currently.
Prerequisites: Haxe and Node.js.
npm is gladly substituted for pnpm.
Open a terminal in your project folder and execute this:
npm create vite@latest my-haxe-app --template vanilla
cd my-haxe-app
npm install
npm install -D vite-plugin-haxeAdd a vite.config.js:
import { defineConfig } from "vite";
import haxe from "vite-plugin-haxe";
/** @type {import('vite').UserConfig} */
export default defineConfig({
plugins: [haxe()],
});Add/edit the following files:
main.js
import "./style.css";
import "./main.hxml";main.hxml
-cp src
-main Main
-dce full
# -js isn't needed, but helpful for IDE's.
-js main.js
-D source-map-content
-debugsrc/Main.hx
package;
import js.Browser.document;
import js.html.ButtonElement;
class Main {
static function main() {
document.getElementById('app')
.innerHTML = '
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/https/github.com/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://haxe.org/" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Haxe_logo.svg" class="logo vanilla" alt="Haxe logo" />
</a>
<h1>Vite + Haxe</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and Haxe logos to learn more
</p>
</div>
';
Counter.setupCounter(cast(document.querySelector('#counter'), ButtonElement));
}
}
class Counter {
public static function setupCounter(element:ButtonElement) {
var counter = 0;
final setCounter = (count:Int) -> {
counter = count;
element.innerHTML = 'count is $counter';
}
element.addEventListener('click', () -> setCounter(counter + 1));
setCounter(0);
}
}Start the fun with npm run dev.