#2560 Compiling to javascript with F4

jhughes Wed 31 Aug 2016

Is there a built in way to configure F4 to compile to javascript as well as pod? Been looking around the forum for a way to make this happen but can't find a clear example of how to accomplish this even outside of F4. So far I know I need to add the @Js indicator to the objects I want to be compiled into javascript but after that...? I can't seem to figure out what the process looks like to compile to javascript. Seems like this would be a pretty standard procedure to make it happen but no document exists, as far as I can tell, that lays this process out.

SlimerDude Wed 31 Aug 2016

In both normal Fantom compilation, and in F4, the .js file is compiled automatically - you don't have to do, or set anything.

but no document exists

The documentation is limited but can be found in JavaScript - deployment. As you mention, the @JS is all you need:

All Fantom source code in a pod marked as @Js will be compiled to a single JavaScript source file.

It also says:

The file is named <podname>.js and is packaged into the root directory of the pod file.

So if you look inside the compiled pod files (which are just .zip files), you should find your javascript files there.

jhughes Wed 31 Aug 2016

I had read the JavaScript section but I guess i didn't quite understand the line describing where the .js files are. I looked in the root folder where the pod file was created but didn't realize it meant the files were included in the pod file itself. I just checked there and saw the expected files.


jhughes Thu 1 Sep 2016

If I indicate a class with @Js and it shows some errors for imported java objects as "not available in Js", is there a way to wrap those objects in fantom or set something in the import section of those classes to make them Js compliant?

SlimerDude Thu 1 Sep 2016

If you're talking about classes from other pods not created by you, then no.

Not available in Js means it doesn't have a native Javascript implementation. So not available means doesnt exist!

The only way round it would be to re-compile the pod in question from source - but only after you've manually hacked the code it make it JS compliant - which may require you writing some native JS peer classes... I wouldn't advise it right now!

jhughes Thu 1 Sep 2016

Good to know. The only object that seemed to be hanging up the full javascript compiler was the JSON java classes I was using. Just tried to replace those with the afJson pod but looks like that doesn't have a similar concept (at least at first glance) of JSONArrays. Do you know of an equivalent JSONArray access method with that pod?

SlimerDude Fri 2 Sep 2016

The JSON equivalent of Arrays and Objects in Fantom are plain Lists and Maps. There's no need for a special JSON List class, just as there's no need for a special JSON boolean class (just use a Fantom Bool!)

Any Fantom object consisting of Lists, Maps, Ints, Floats, Bools, and Strs may be converted to JSON via util's JsonOutStream. Any JSON may then be re-constituted to a Fantom representation via JsonInStream.

The afJson pod you were looking at then goes one step further and maps JSON object properties to fields on a class, allowing you to serialise Fantom classes to / from JSON.

jhughes Fri 2 Sep 2016

This may be off topic for this thread but trying to figure out an easy way to use that pod to manipulate json and it seems incredibly cumbersome. i.e., having to build out the classes with properties to build a navigational chain in a json object without any way to dynamically traverse a a json object. I am also unable to find any method that allows an addition to an existing Json object. For example if I have one Json object with some list of properties and I know I need to add a string property to it that gets populated later, I can't find any methods in that pod to accomplish the task of just adding that property.

jhughes Fri 2 Sep 2016

I have managed rewrite my methods to use the afJson pod and verified the same results in my application, the only thing left now is that the WebClient is not js compliant. Is there an equivalent object that can harness the same functionality that can be compiled to js?

I was under the impression that the native fantom code would all be js compliant but I guess there's still some limitations.

andy Fri 2 Sep 2016

See XHR docs

jhughes Fri 2 Sep 2016

I just rewrote my post method to use this but I get an unknown type error

public static Str post(Str content) {

Str? result
HttpReq { uri=Uri.fromStr(baseURI) }.send("POST", content) |res|
  result = res.content
return result


Throws the error:

sys::UnknownTypeErr: dom::HttpReqPeer

fan.sys.Pod.type (Pod.java:334)
fan.sys.FanClassLoader.findFanClass (FanClassLoader.java:178)
fan.sys.FanClassLoader.findClass (FanClassLoader.java:92)
java.lang.ClassLoader.loadClass (Unknown)
java.lang.ClassLoader.loadClass (Unknown)
dom::HttpReq.<init> (HttpReq.fan:16)
dom::HttpReq.make (HttpReq.fan:19)
webAPI::APIValidator.post (APIValidator.fan:39)

go4 Fri 2 Sep 2016

Hi jhughes, the dom is only valid in javascript.

if (Env.cur.runtime == "js") {
  dom::HttpReq req :=
} else {
  web::WebClient :=

jhughes Fri 2 Sep 2016

Thanks for that. Was able to modify my code to detect the runtime and use both methods...at least in theory. Still struggling to get the FWT to run in a browser to test out the js compiled files.

If I now have both js and jvm runtime methods in my project and they're broken out to their own methods but I want the class to be compiled to js (the whole reason i'm using HttpReq) does this cause a problem? The only warning I have right now is that WebClient can't be compiled to js but that's one method of the entire class. I would guess that it's just that one method that won't be compiled but i'm not sure if that fails the entire js compile for the class.

jhughes Sat 3 Sep 2016

Disregard that last question. Figured out how to get my FWT running in the browser to test this and it looks like it's not an issue.

Login or Signup to reply.