# Atscc2js examples

**URL:** <https://discourse.ats-lang.org/t/atscc2js-examples/488>\
**Category:** Google Group\
**Created:** [November 6, 2014, 7:14am UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488 "2014-11-06T07:14:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [November 6, 2014, 7:14am UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/1 "2014-11-06T07:14:39Z")

</div>

In the past, I used animation to teach recursion  
and various sorting algorithms. The animation in my code  
was GTK-based. I rewrote a portion of the code I used so  
that the animation can now be done in Javascript:

[http://ats-lang.sourceforge.net/COMPILED/doc/PROJECT/SMALL/JSmydraw/](http://ats-lang.sourceforge.net/COMPILED/doc/PROJECT/SMALL/JSmydraw/)

The source of these examples is at:

> **[githwxi/ATS-Postiats-contrib](https://github.com/githwxi/ATS-Postiats-contrib/tree/master/projects/SMALL/JSmydraw)**
>
> ATS-Postiats-contrib is primarily for packages contributed to ATS-Postiats - githwxi/ATS-Postiats-contrib

Some of these examples can be tested using Patsoptaas  
(Patsopt-as-a-Service):

[http://www.ats-lang.org/Examples.html](http://www.ats-lang.org/Examples.html)

Cheers!

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 3:30pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/2 "2015-05-10T15:30:22Z")

</div>

> Just wanted to mention Closure which may be worth used on ATS generated  
> JavaScript, for two reasons:
> 
> - It support inlining, which is welcome for function wrapping JavaScript  
> expressions (ex from `bool.sats` and others);
> - It can be invoked so that it checks for missing references, which is  
> welcome as there is otherwise no compilation phase as with the C target, to  
> be sure to be hinted about undefined references.

I also just checked to get the best of inlining, ES5 getters/setters should  
not be used, as Closure does a far better job at inlining classical  
function definition (like getXYZ()/setXYZ(xyz)) than setters and getters,  
which seems to not be inlined at all.

I’m dropping this note without knowing if there are people who really use  
getters/setters for ATS to JavaScript, still good to know it may not give  
the best with regard to minification and inlining.

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 3:18pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/3 "2015-05-10T15:18:19Z")

</div>

Just wanted to mention Closure which may be worth used on ATS generated  
JavaScript, for two reasons:

- It support inlining, which is welcome for function wrapping JavaScript  
expressions (ex from `bool.sats` and others);
- It can be invoked so that it checks for missing references, which is  
welcome as there is otherwise no compilation phase as with the C target, to  
be sure to be hinted about undefined references.

I checked it has this behaviour using these options:

–compilation\_level ADVANCED --language\_in ECMASCRIPT5\_STRICT -language\_out  
ECMASCRIPT5\_STRICT --warning\_level VERBOSE

If I understand correctly, using `--compilation_level ADVANCED` not only  
ends into inlining when applicable, but also make Closure report more  
errors (I still have undefined reference in mind).

Also, an option which I believe is nice too, is the ability to preserve a  
comment, using a JSDoc block comment starting with `@preserver`. I will use  
this one, at the top of each files to tell people it’s JavaScript generated  
from ATS:

/\*\*

- @preserve JavaScript generated
- from [ATS (Applied Type system)](http://www.ats-lang.org) source
- then minified using [Closure](http://developers.google.com/closure/).  
\*/Le jeudi 6 novembre 2014 08:14:39 UTC+1, gmhwxi a écrit :

> In the past, I used animation to teach recursion  
> and various sorting algorithms. The animation in my code  
> was GTK-based. I rewrote a portion of the code I used so  
> that the animation can now be done in Javascript:
> 
> [Index of /COMPILED/doc/PROJECT/SMALL/JSmydraw](http://ats-lang.sourceforge.net/COMPILED/doc/PROJECT/SMALL/JSmydraw/)
> 
> The source of these examples is at:
> 
> [https://github.com/githwxi/ATS-Postiats-contrib/tree/master/projects/SMALL/JSmydraw](https://github.com/githwxi/ATS-Postiats-contrib/tree/master/projects/SMALL/JSmydraw)
> 
> Some of these examples can be tested using Patsoptaas  
> (Patsopt-as-a-Service):
> 
> [http://www.ats-lang.org/Examples.html](http://www.ats-lang.org/Examples.html)
> 
> Cheers!

---

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [May 10, 2015, 8:02pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/4 "2015-05-10T20:02:43Z")

</div>

Thanks!

I think I have fixed this issue. New libatscc2js\_all.js has been uploaded.On Sunday, May 10, 2015 at 2:43:19 PM UTC-4, Yannick Duchêne wrote:

> Le dimanche 10 mai 2015 18:55:54 UTC+2, gmhwxi a écrit :
> 
> > I will look into the issue of tmplab ad tmplab\_js. Maybe you could show me  
> > a file where you had to manually add things like ‘var tmplab’ and ‘var  
> > tmplab\_js’.
> 
> I get the error with something as simple as this:
> 
> #include “share/atspre\_define.hats”  
> #include “{$LIBATSCC2JS}/staloadall.hats”
> 
> #define ATS\_MAINATSFLAG 1  
> #define ATS\_DYNLOADNAME “js\_main\_dynload”
> 
> %{$  
> js\_main\_dynload()  
> %}
> 
> The errors are:
> 
> ./libatscc2js\_all.js:1400: ERROR - variable tmplab\_js is undeclared  
> tmplab\_js = 1;  
> ^  
> ./libatscc2js\_all.js:1402: ERROR - variable tmplab is undeclared  
> tmplab = tmplab\_js; tmplab\_js = 0;  
> ^  
> 2 error(s), 0 warning(s)  
> \*\*\* Exited with status 2 \*\*\*
> 
> It’s in `function ats2jspre_list_make_intrange_3(arg0, arg1, arg2)` , but  
> also forward, as it displays a missing definition error only once per  
> identifier.

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 6:43pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/5 "2015-05-10T18:43:18Z")

</div>

> I will look into the issue of tmplab ad tmplab\_js. Maybe you could show me  
> a file where you had to manually add things like ‘var tmplab’ and ‘var  
> tmplab\_js’.

I get the error with something as simple as this:

#include “share/atspre\_define.hats”  
#include “{$LIBATSCC2JS}/staloadall.hats”

#define ATS\_MAINATSFLAG 1  
#define ATS\_DYNLOADNAME “js\_main\_dynload”

%{$  
js\_main\_dynload()  
%}

The errors are:

./libatscc2js\_all.js:1400: ERROR - variable tmplab\_js is undeclared  
tmplab\_js = 1;  
^  
./libatscc2js\_all.js:1402: ERROR - variable tmplab is undeclared  
tmplab = tmplab\_js; tmplab\_js = 0;  
^  
2 error(s), 0 warning(s)  
\*\*\* Exited with status 2 \*\*\*

It’s in `function ats2jspre_list_make_intrange_3(arg0, arg1, arg2)` , but  
also forward, as it displays a missing definition error only once per  
identifier.

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 8:15pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/6 "2015-05-10T20:15:40Z")

</div>

> Thanks!

Thanks to you too!

If I may have one more question… I can’t get a comment to stay in the  
generated file. If I add this at the top of `some_file.dats`:

%{^  
/\*\*

- @preserve JavaScript generated
- from [ATS (Applied Type System)](http://www.ats-lang.org) source
- then minified using [Closure](http://developers.google.com/closure/).  
\*/  
%}

it does not appear in the generated JavaScript file. The `%{^` and `%}` is  
to insert a literal block before all the others, if I’m not wrong, but it  
seems to not be working with comments, which get replaced with this:

// COMMENT\_line

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 4:38pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/7 "2015-05-10T16:38:28Z")

</div>

> Thanks.
> 
> I also did a bit investigation on Closure last night.  
> Here is a simple procedure that formed in my mind:
> 
> Say I have a project called myproject. I do ATS+JS co-programming.  
> At the end I produce a single file myproject.js. Then I will use Closure  
> to compile myproject.js+libatscc2js\_all.js together to generate another  
> file  
> myproject\_final.js, which is the final output of myproject.

The same for me.

I get libatscc2js\_all.js from  
[Library for JS code generated from ATS source · GitHub](https://gist.github.com/githwxi/c754d1fbea087ffb9e93) , as this was part of  
my installation (don’t know if I once again something wrong).

I had to remove the BaconJS part and add `var tmplab_js` and `var tmplab`  
at some places, otherwise there was undefined reference errors (nice it  
works and really make it fail).

There remains just some warnings, but it works and the result it a working  
JavaScript file, with really just what’s necessary, and nothing more.

Except the dirty had-oc fixes in libatscc2js\_all.js, it’s all nice.

This minifier is a must-have for ATS+JavaScript.

---

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [May 10, 2015, 9:16pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/8 "2015-05-10T21:16:59Z")

</div>

I have just uploaded some changes to fix this issue.On Sunday, May 10, 2015 at 4:15:40 PM UTC-4, Yannick Duchêne wrote:

> Le dimanche 10 mai 2015 22:02:43 UTC+2, gmhwxi a écrit :
> 
> > Thanks!
> 
> Thanks to you too!
> 
> If I may have one more question… I can’t get a comment to stay in the  
> generated file. If I add this at the top of `some_file.dats`:
> 
> %{^  
> /\*\*
> 
> - @preserve JavaScript generated
> - from [ATS (Applied Type System)](http://www.ats-lang.org) source
> - then minified using [Closure](http://developers.google.com/closure/).  
> \*/  
> %}
> 
> it does not appear in the generated JavaScript file. The `%{^` and `%}` is  
> to insert a literal block before all the others, if I’m not wrong, but it  
> seems to not be working with comments, which get replaced with this:
> 
> // COMMENT\_line

---

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [May 11, 2015, 12:39am UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/9 "2015-05-11T00:39:46Z")

</div>

I have taken out the Bacon.js wrapper for atscc2js, which can now be found  
here:

[https://gist.githubusercontent.com/githwxi/c036945d0cae84cf9fc5/raw/libatscc2js\_baconjs\_cats.jsOn](https://gist.githubusercontent.com/githwxi/c036945d0cae84cf9fc5/raw/libatscc2js_baconjs_cats.jsOn) Sunday, May 10, 2015 at 12:55:54 PM UTC-4, gmhwxi wrote:

> Bacon.js will be removed for libatscc2js\_all.js soon.
> 
> I added it mainly as a quick way to allow people taking my class to gain  
> some experience with functional reactive programming (FRP).
> 
> I will look into the issue of tmplab ad tmplab\_js. Maybe you could show me  
> a file where you had to manually add things like ‘var tmplab’ and ‘var  
> tmplab\_js’.
> 
> On Sunday, May 10, 2015 at 12:38:28 PM UTC-4, Yannick Duchêne wrote:
> 
> > Le dimanche 10 mai 2015 18:07:42 UTC+2, gmhwxi a écrit :
> > 
> > > Thanks.
> > > 
> > > I also did a bit investigation on Closure last night.  
> > > Here is a simple procedure that formed in my mind:
> > > 
> > > Say I have a project called myproject. I do ATS+JS co-programming.  
> > > At the end I produce a single file myproject.js. Then I will use Closure  
> > > to compile myproject.js+libatscc2js\_all.js together to generate another  
> > > file  
> > > myproject\_final.js, which is the final output of myproject.
> > 
> > The same for me.
> > 
> > I get libatscc2js\_all.js from  
> > [Library for JS code generated from ATS source · GitHub](https://gist.github.com/githwxi/c754d1fbea087ffb9e93) , as this was part  
> > of my installation (don’t know if I once again something wrong).
> > 
> > I had to remove the BaconJS part and add `var tmplab_js` and `var tmplab`  
> > at some places, otherwise there was undefined reference errors (nice it  
> > works and really make it fail).
> > 
> > There remains just some warnings, but it works and the result it a  
> > working JavaScript file, with really just what’s necessary, and nothing  
> > more.
> > 
> > Except the dirty had-oc fixes in libatscc2js\_all.js, it’s all nice.
> > 
> > This minifier is a must-have for ATS+JavaScript.

---

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [May 10, 2015, 4:55pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/10 "2015-05-10T16:55:54Z")

</div>

Bacon.js will be removed for libatscc2js\_all.js soon.

I added it mainly as a quick way to allow people taking my class to gain  
some experience with functional reactive programming (FRP).

I will look into the issue of tmplab ad tmplab\_js. Maybe you could show me  
a file where you had to manually add things like ‘var tmplab’ and ‘var  
tmplab\_js’.On Sunday, May 10, 2015 at 12:38:28 PM UTC-4, Yannick Duchêne wrote:

> Le dimanche 10 mai 2015 18:07:42 UTC+2, gmhwxi a écrit :
> 
> > Thanks.
> > 
> > I also did a bit investigation on Closure last night.  
> > Here is a simple procedure that formed in my mind:
> > 
> > Say I have a project called myproject. I do ATS+JS co-programming.  
> > At the end I produce a single file myproject.js. Then I will use Closure  
> > to compile myproject.js+libatscc2js\_all.js together to generate another  
> > file  
> > myproject\_final.js, which is the final output of myproject.
> 
> The same for me.
> 
> I get libatscc2js\_all.js from  
> [Library for JS code generated from ATS source · GitHub](https://gist.github.com/githwxi/c754d1fbea087ffb9e93) , as this was part  
> of my installation (don’t know if I once again something wrong).
> 
> I had to remove the BaconJS part and add `var tmplab_js` and `var tmplab`  
> at some places, otherwise there was undefined reference errors (nice it  
> works and really make it fail).
> 
> There remains just some warnings, but it works and the result it a working  
> JavaScript file, with really just what’s necessary, and nothing more.
> 
> Except the dirty had-oc fixes in libatscc2js\_all.js, it’s all nice.
> 
> This minifier is a must-have for ATS+JavaScript.

---

<div class="post-metadata">

**Author:** ![gmhwxi](https://avatars.discourse-cdn.com/v4/letter/g/67e7ee/32.png) [@gmhwxi](https://discourse.ats-lang.org/u/gmhwxi)\
**Post date:** [May 10, 2015, 4:07pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/11 "2015-05-10T16:07:42Z")

</div>

Thanks.

I also did a bit investigation on Closure last night.  
Here is a simple procedure that formed in my mind:

Say I have a project called myproject. I do ATS+JS co-programming.  
At the end I produce a single file myproject.js. Then I will use Closure  
to compile myproject.js+libatscc2js\_all.js together to generate another file  
myproject\_final.js, which is the final output of myproject.On Sunday, May 10, 2015 at 11:18:20 AM UTC-4, Yannick Duchêne wrote:

> Just wanted to mention Closure which may be worth used on ATS generated  
> JavaScript, for two reasons:
> 
> - It support inlining, which is welcome for function wrapping JavaScript  
> expressions (ex from `bool.sats` and others);
> - It can be invoked so that it checks for missing references, which is  
> welcome as there is otherwise no compilation phase as with the C target, to  
> be sure to be hinted about undefined references.
> 
> I checked it has this behaviour using these options:
> 
> –compilation\_level ADVANCED --language\_in ECMASCRIPT5\_STRICT -language\_out  
> ECMASCRIPT5\_STRICT --warning\_level VERBOSE
> 
> If I understand correctly, using `--compilation_level ADVANCED` not only  
> ends into inlining when applicable, but also make Closure report more  
> errors (I still have undefined reference in mind).
> 
> Also, an option which I believe is nice too, is the ability to preserve a  
> comment, using a JSDoc block comment starting with `@preserver`. I will use  
> this one, at the top of each files to tell people it’s JavaScript generated  
> from ATS:
> 
> /\*\*
> 
> - @preserve JavaScript generated
> - from [ATS (Applied Type system)](http://www.ats-lang.org) source
> - then minified using [Closure](http://developers.google.com/closure/).  
> \*/
> 
> Le jeudi 6 novembre 2014 08:14:39 UTC+1, gmhwxi a écrit :
> 
> > In the past, I used animation to teach recursion  
> > and various sorting algorithms. The animation in my code  
> > was GTK-based. I rewrote a portion of the code I used so  
> > that the animation can now be done in Javascript:
> > 
> > [Index of /COMPILED/doc/PROJECT/SMALL/JSmydraw](http://ats-lang.sourceforge.net/COMPILED/doc/PROJECT/SMALL/JSmydraw/)
> > 
> > The source of these examples is at:
> > 
> > [https://github.com/githwxi/ATS-Postiats-contrib/tree/master/projects/SMALL/JSmydraw](https://github.com/githwxi/ATS-Postiats-contrib/tree/master/projects/SMALL/JSmydraw)
> > 
> > Some of these examples can be tested using Patsoptaas  
> > (Patsopt-as-a-Service):
> > 
> > [http://www.ats-lang.org/Examples.html](http://www.ats-lang.org/Examples.html)
> > 
> > Cheers!

---

<div class="post-metadata">

**Author:** ![Yannick\_Duchene](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@Yannick\_Duchene](https://discourse.ats-lang.org/u/Yannick_Duchene)\
**Post date:** [May 10, 2015, 4:39pm UTC](https://discourse.ats-lang.org/t/atscc2js-examples/488/12 "2015-05-10T16:39:29Z")

</div>

> I get libatscc2js\_all.js from  
> [Library for JS code generated from ATS source · GitHub](https://gist.github.com/githwxi/c754d1fbea087ffb9e93) , as this was part  
> of my installation (don’t know if I once again something wrong).

Oops, typo. I wanted to say “as this was _not_ part of […]”