How to reference a JavaScript library in Haxe

Question

I was reading about fluid dynamics and came across this awesome project. After building it, I noticed that the little option menu that appears in the demo is not showing.

So, as I am completely new to Haxe, I thought that adding the little GUI options panel would be a great little challenge in an attempt to familiarise myself with Haxe. However, I have fallen at the first hurdle as I am getting the following error whilst trying to build the GUI that sits on top of the fluid experiment as shown in the demo:

Uncaught ReferenceError: dat is not defined

Inside the projects route directory, I have an src folder, then Main.hx; inside Main.hx at the bottom of the init() function, I am doing the following:

import dat.GUI;

function init():Void {
    //other unrelated code goes here

    var gui = new dat.GUI({autoPlace: true});
    //particle count
    var particleCountGUI = gui.add(particles, 'count').name('Particle Count').listen();
}

When I run the program, the console prints the error mentioned.

Things I have done:

Inside project.flow in the route directory, I have made reference to dat in the build dependencies (and downloaded dat.gui of course).

I have even tried using other frameworks to build the GUI, but I keep getting errors in the console log even if the build is successful. I did have luck getting a panel added, but rather than sitting on top of the fluid experiment, it pushed the whole thing down so there was a space between the panel and the fluid experiment.

Ideally, I want to recreate the options panel shown in the demo, but make it a scrollable list instead. However, I need to understand why I am having issues with dat first!

Answer 1

The simplest solution I can think of is to add this to init() (assuming the .js is located in the project root):

haxe.macro.Compiler.includeFile("dat.gui.min.js");

includeFile() is a macro that directly embeds the file into the .js generated by Haxe (by default at the top of the file). That's enough to make the UI show up for me:

The alternative would be to add a <script> tag to the index.html file as documented here. I'm not familiar enough with the flow build tool to know that's done in this case, but you'd have to find a way to:

• modify the index.html template to include the <script> tag
• make it copy the min.js to the bin/web directory.

So yeah, includeFile() definitely seems like the more convenient option. :)