Repository files navigation

Externs and tools to buildmeteor applications usingHaxe language.

Current version is used in production but the externs might not be complete, also some of the workflows/concepts are subject to change.

Currently up-to-date:

• Meteor 1.4.3.1
• Haxe 3.4.2

Meteor.js has a very specific workflow designed for javascript language, some of its features are slightly modified or workaround when using Haxe.

Check out theexample folder

• File Structuring

Meteor applications distribute client and server code in many source files or a single one for small apps, haxe uses classes that can be compiled to a single file or a client and a server file containing all the application logic. The examples folder contain different approaches.

• Context / namespace

In Meteor, thethis keyword has a different context and properties in callbacks like:Meteor.publish(), Meteor.method(), template.helpers(), Router.route():

Template.myTemplate.helpers={firstId:function(){returnthis.firstNode().id;}}Router.route('/',function(){this.render('MyTemplate');});

To mimic these namespaces in a typed manner, context objects likeTemplateCtx,PublishCtx,MethodCtx andRouterCtx are provided. The example above becomes:

Templace.get('myTemplate').helpers= {firstId:function () {returnTemplateCtx.firstNode().id;}}Route.route('/',function () {RouterCtx.render('MyTemplate');});

• Exposing collections

In meteor it's common to assign global variables when creating collections, these collections become then available from the browser console.

Players=newMongo.Collection("players");

In Haxe its harder to create global variables, a workaround is to assign the collections to the window object.

varcollection=newCollection("players");untypedjs.Browser.window["Players"]=untypedcollection._collection;

How to install Haxe Meteor externs for javascript

haxelib install hxmeteor

Besides using Haxelib, you can use this git repos as a development directory:

haxelib dev hxmeteor path/to/folder

or use git directly

haxelib git hxmeteor https://github.com/MatthijsKamstra/hxmeteor.git

don't forget to add it to your build file

-libhxmeteor

When you install hxmeteor via haxelib you will also have access to project scaffolding.

You need to have meteor installed for this to work!

Type in you terminal:

haxelib run hxmeteor

It will generate a Haxe / Meteor folder structure most of the examples are based upon:scaffold example

• .vscode folder (no Flashdevelop/Haxedevelop config files yet... )
• src andwww folder (with all the folderstructure to make both of them work)
• an empty meteor project is generated (meteor create --bare)
• build (debug/release) files for Haxe and VSCode
• package.json for automatic compilation on save (don't forget tonpm install before you start)
• some files to get you started

I am pritty sure you should do this only once!

A very powerfull feature of Haxe aremacros (API).

Macros are without a doubt the most advanced feature in Haxe. They are often perceived as dark magic that only a select few are capable of mastering, yet there is nothing magical (and certainly nothing dark) about them.

With the help of macros you have access to the template names.

Okay, this is an example of an template file inmeteor:

<templatename="foobar">...</template>

We want to know the name of this template: "foobar".

Normally you would make a file with static references to the (template)filename:

publicstaticinlinevarFOOBAR:String="foobar";

This works, but the templates names list can become long very fast.So let a computer do that for use!

If you want to read more indepth about this type of macro read:Haxe Macros: Code completion for everything | Blog Mark Knol

All you need to create / copy is aTemplateNames.hx file (in this reposrc/shared/TemplateNames.hx):

package;@:build(meteor.macro.TemplateNamesBuilder.build("www/client/templates/"))classTemplateNames{}

And point to the correct template folder, in this case

"www/client/templates/"

TypeTemplateNames. and Visual Studio Code (or HaxeDevelop) will auto complete the template name.

Every time the autocomplete is activated, this macro is executed.And it will check if the template file has a name.

BIG advantage is:

• autocompletion on "hidden" templates (when two templates included in one file)
• removing files will create an error if that file is used in your code
• renaming templates will create an error
• changing filenames will have no effect (javascript is flexible like that)
• TemplateNames will always be up to date
• warning for double templatesname before runtime

With the help of macros we generate templates based on Haxe Classes.

Lets create a Haxe class in the foldersrc/client/templates/:

(the macro only works in the/client/templates folder btw)

packagetemplates;importmeteor.Template;classPageOne {publicstaticfunctioninit(){var_template=Template.get("pageone");_template.onCreated(functiononCreated() {});_template.helpers({test:function (){return'**PageOne**';}});_template.events({'click .testBtn':function (event){// Prevent default browser form submitevent.preventDefault();trace("click 'PageOne'");}});}}

We need an template with that (in this case 'pageone');

Lets build that automaticly, add this to your build file:

--macro meteor.macro.AutomaticTemplate.build()

Now everytime you do a build (or use automatic build) this macro will read foldersrc/client/templates/* (and its subfolders) for classes and will check if folderwww/client/templates/* has a file corresponding to that class.

In our case it will generate in folderwww/client/templates/*

<templatename="pageone"><divclass="container"><h1>PAGEONE</h1><p>template for PageOne.hx</p></div></template>

BIG advantage is:

• you know you have to make a template, that is done for you
• file name of the html is related to the Haxe file (Foobar.hx -> foobar.html)
• template name is based upon Haxe file ((Foobar.hx -><template name="foobar">))
• folderstructure is "visible" in template name (templates/admin/Login.hx -> -><template name="admin_login">)
• renaming class will automaticly generate a new.html template (don't forget to update)
• changing package will automaticly generate a new.html template (don't forget to update)
• in combination with previous macro, make your life a little easier
• add more sanity to the template html and js (don't worry you still can fuck everything up!)

Some ideas for macros and utilities that may improve the haxe-meteor workflow in the future:

• Typed Collections like inhaxe-mongoose externs.

• Expose Collections to the browser automatically on creation.

• Context Object provided in callbacks, (this objects would need to be removed during compile-time using macros) example:

Templace.get('myTemplate').helpers= {firstId:function (ctx:TemplateCtx) {returnctx.firstNode().id;}}Route.route('/',function (ctx:RouterCtx) {ctx.render('MyTemplate');});

• Templates List showing available templates and type-check them using macros, something likein this article. DONE!

• ES6 modules output withmodular-js