0n4u/doc/macros.tex

\section{JavaScript Compiler}

\subsection{Compilation and Macros}
Erlang JavaScript/OTP Parse Transform has two modes defined
by {\bf \-jsmacro} and {\bf \-js} Erlang module attributes.
The first mode precompiles Erlang module functions
into JavaScript strings. The second one exports Erlang functions
into a separate JavaScript file ready to run in the browser or Node.js.

\paragraph{}
Sample usage of {\bf \-jsmacro} and {\bf \-js}:

\begin{lstlisting}
    -module(sample).
    -compile({parse_transform, shen}).
    -jsmacro([tabshow/0,doc_ready/1,event/3]).
    -js(doc_ready/1).
\end{lstlisting}

\subsection{Erlang Macro Functions}
Macro functions are useful for using N2O as a server-side framework.
Functions get rewritten during Erlang compilation into a JavaScript format
string ready for embedding. Here is an example from N2O pages:

\begin{lstlisting}
    tabshow() ->
        X = jq("a[data-toggle=tab]"),
        X:on("show",
            fun(E) -> T = jq(E:at("target")),
            tabshow(T:attr("href")) end).

    doc_ready(E) ->
        D = jq(document),
        D:ready(fun() ->
            T = jq("a[href=\"#" ++ E ++ "\"]"),
            T:tab("show") end).

    event(A,B,C) ->
        ws:send('Bert':encodebuf(
            [{source,'Bert':binary(A)}, {x,C},
             {pickle,'Bert':binary(B)}, {linked,C}])).

    main() ->
        Script1 = tabshow(),
        Script2 = event(1, 2, 3),
        Script3 = doc_ready(wf:js_list("tab")),
        io:format("tabshow/0:~n~s~nevent/3:~n~s~ndoc_ready/1:~n~s~n",
            [Script1,Script2,Script3]).
\end{lstlisting}

Perform compilation and run tests:

\vspace{1\baselineskip}
\begin{lstlisting}
        $ erlc sample.erl
        $ erl
        > sample:main().
\end{lstlisting}
\vspace{1\baselineskip}

You'll get the following output:

\vspace{1\baselineskip}
\begin{lstlisting}
    tabshow/0:
        var x = $('a[data-toggle=tab]');
        x.on('show',function(e) {
            var t = $(e['target']);
            return tabshow(t.attr('href'));
        });

    event/3:
        ws.send(Bert.encodebuf({source:Bert.binary(1),
                                x:3,
                                pickle:Bert.binary(2),
                                linked:3}));

    doc_ready/1:
    var d = $(document);
    d.ready(function() {
        var t = $('a[href="#' + 'tab' + '"]');
        return t.tab('show');
    });
\end{lstlisting}
\vspace{1\baselineskip}

As you see, no source-map needed.

\subsection{JavaScript File Compilation}
Export Erlang function to JavaScript file with {\bf -js([sample/0,fun\_{args}/2])}.
You could include functions for both {\bf macro} and {\bf js} definitions.

\newpage
\subsection{Mapping Erlang/OTP to JavaScript/OTP}
Following OTP libraries are partially supported in Erlang JavaScript Parse Transform:
{\bf lists}, {\bf proplists}, {\bf queue}, {\bf string}.

\paragraph{\bf Example 1}\
\vspace{1\baselineskip}
\begin{lstlisting}
    S = lists:map(fun(X) -> X * X end,[1,2,3,4]),
\end{lstlisting}

transforms to:

\begin{lstlisting}
    s = [1,2,3,4].map(function(x) {
        return x * x;
    });
\end{lstlisting}

\paragraph{\bf Example 2}\

\vspace{1\baselineskip}
\begin{lstlisting}
    M = lists:foldl(fun(X, Acc) -> Acc + X end,0,[1,2,3,4]),
\end{lstlisting}

transforms to:

\begin{lstlisting}
    m = [1,2,3,4].reduce(function(x,acc) {
        return acc + x;
    },0);
\end{lstlisting}