Overview

About pas2js
Command line parameters
Delphi and ObjFPC mode
Translating modules
Translating variables
Translating string
Translating resourcestrings
Translating currency
Translating types
Translating pointer
Translating record
Translating functions
Translating anonymous functions
Translating passing a parameter by reference
Translating nested functions
Translating for-loop
Translating repeat..until
Translating while..do
Translating with..do
Translating enums
Translating sets
Translating array type
Translating class type
Translating class-of type
Translating TObject.Free
Translating class interfaces
Translating attributes
Translating try..finally
Translating try..except
Translating enumerators
Translating function types
Translating var modifier absolute
Translating assert()
Calling JavaScript from Pascal
The asm block
The procedure modifier assembler
The procedure modifier external
The procedure modifier varargs
The var modifier external
The external modifier of class members
External classes
External class as ancestor
The JSValue type
Accessing JS object properties with the bracket accessor
RTTI - Run Time Type Information
Compiler directives
Other supported Pascal elements
Not supported elements
Creating source maps

About pas2js

pas2js is a compiler/transpiler to translate programs written in Pascal (subset of Delphi/ObjFPC syntax) to JavaScript.
The goal is to use strong typing, while still be able to use low level whenever you choose.
The compiled Pascal functions can be used in DOM events or called by JavaScript.
pas2js is written completely in FPC, runs on many platforms like Windows, Mac and Linux and more. It is built modular consisting of the following parts: Each part is tested separately and is used by other FPC tools as well. For example the scanner and parser are used by fpdoc too. Thus they are tested and extended by other programmers, reducing greatly the work for developing pas2js. Consistency is kept by several test suites, containing thousands of tests.
Note: The modular structure allows to compile any parts or the whole compiler into an IDE addon (not yet started).

Command line parameters

Most parameters work the same as their FPC equivalent. pas2js has some options of its own (see -J options).
Usage: pas2js <your.pas>
Options:
Put + after a boolean switch option to enable it, - to disable it
  @<x>    : Read compiler options from file <x> in addition to the default pas2js.cfg
  -B      : Rebuild all
  -d<x>   : Defines the symbol <x>. Optional: -d<x>:=<value>
  -i<x>   : Write information and halt. <x> is a combination of the following:
    -iD   : Write compiler date
    -iSO  : Write compiler OS
    -iSP  : Write compiler host processor
    -iTO  : Write target platform
    -iTP  : Write target processor
    -iV   : Write short compiler version
    -iW   : Write full compiler version
    -ic   : Write list of supported JS processors usable by -P<x>
    -io   : Write list of supported optimizations usable by -Oo<x>
    -it   : Write list of supported targets usable by -T<x>
  -C<x>   : Code generation options. <x> is a combination of the following letters:
    o     : Overflow checking
    r     : Range checking
    R     : Object checks. Verify method calls and object type casts.
  -F...   Set file names and paths:
   -Fe<x> : Redirect output to file <x>. UTF-8 encoded.
   -FE<x> : Set main output path to <x>
   -Fi<x> : Add <x> to include paths
   -FN<x> : add <x> to namespaces. Namespaces with trailing - are removed.
                  Delphi calls this flag "unit scope names".
   -Fu<x> : Add <x> to unit paths
   -FU<x> : Set unit output path to <x>
  -I<x>   : Add <x> to include paths, same as -Fi
  -J...  Extra options of pas2js
   -Jc    : Write all JavaScript concatenated into the output file
   -Je<x> : Encode messages as <x>.
     -Jeconsole : Console codepage. Default.
     -Jesystem  : System codepage. On non Windows console and system are the same.
     -Jeutf-8   : Unicode UTF-8. Default when using -Fe.
     -JeJSON    : Output compiler messages as JSON. Logo etc are outputted as-is.
   -Ji<x> : Insert JS file <x> into main JS file. E.g. -Jirtl.js. Can be given multiple times.
   -Jl    : lower case identifiers
   -Jm    : generate source maps
     -Jmsourceroot=<x> : use x as "sourceRoot", prefix URL for source file names.
     -Jmbasedir=<x> : write source file names relative to directory x.
     -Jminclude : include Pascal sources in source map.
     -Jmxssiheader : start source map with XSSI protection )]}.
     -Jm- : disable generating source maps
   -Jo<x> : Enable or disable extra option. The x is case insensitive:
     -JoSearchLikeFPC : search source files like FPC, default: search case insensitive.
     -JoUseStrict : add "use strict" to modules, default.
   -Jpcmd<command> : Run postprocessor. For each generated js execute
                  command passing the js as stdin and read the new js from stdout.
                  This option can be added multiple times to call several
                  postprocessors in succession.
   -Ju<x> : Add <x> to foreign unit paths. Foreign units are not compiled.
  -l      : Write logo
  -MDelphi: Delphi 7 compatibility mode
  -MObjFPC: FPC's Object Pascal compatibility mode (default)
  -NS<x>  : obsolete: add <x> to namespaces. Same as -FN<x>
  -n      : Do not read the default config files
  -o<x>   : Change main JavaScript file to <x>, "." means stdout
  -O<x>   : Optimizations:
    -O-   : Disable optimizations
    -O1   : Level 1 optimizations (quick and debugger friendly)
    -Oo<x> : Enable or disable optimization. The x is case insensitive:
      -OoEnumNumbers[-] : write enum values as number instead of name. Default in -O1.
      -OoRemoveNotUsedPrivates[-] : Default is enabled
      -OoRemoveNotUsedDeclarations[-] : Default enabled for programs with -Jc
      -OoRemoveNotUsedPublished[-] : Default is disabled
  -P<x>   : Set target processor. Case insensitive:
    -Pecmascript5  : default
    -Pecmascript6
  -S<x>   : Syntax options. <x> is a combination of the following letters:
    a     : Turn on assertions
    c     : Support operators like C (*=,+=,/= and -=)
    d     : Same as -Mdelphi
    m     : Enables macro replacements
    2     : Same as -Mobjfpc (default)
  -SI<x>   : Set interface style to <x>
    -SIcom   : COM compatible interface (default)
    -SIcorba : CORBA compatible interface
  -T<x>   : Set target platform, case insensitive.
    -Tbrowser : default
    -Tnodejs  : add pas.run(), includes -Jc
  -u<x>   : Undefines the symbol <x>
  -v<x>   : Be verbose. <x> is a combination of the following letters:
    e     : Show errors (default)
    w     : Show warnings
    n     : Show notes
    h     : Show hints
    i     : Show info
    l     : Show line numbers, needs -vi
    a     : Show everything
    0     : Show nothing (except errors)
    b     : Show file names with full path
    c     : Show conditionals
    t     : Show tried/used files
    d     : Show debug notes and info, enables -vni
    q     : Show message numbers
    x     : Show used tools
    v     : Write pas2jsdebug.log with lots of debugging info
    z     : Write messages to stderr, -o. still uses stdout.
  -vm<x>,<y>: Do not show messages numbered <x> and <y>.
  -?      : Show this help
  -h      : Show this help

Delphi and ObjFPC mode

Delphi mode

ObjFPC mode

This the default mode of pas2js and is generally more strict than the Delphi mode, and allows some more operations.

Translating modules

A Pascal Program is translated into the following JavaScript structure:
Pascal JavaScript Structure, not code!
Program <unitname>;
Implementation
  [implementation section]
Begin
  [main code]
End.
pas.<program>={
  [implementation section],
  $main: function() {
    [main code]
  }
};
A Pascal Unit is translated into the following JavaScript structure:
Pascal JavaScript Structure, not code!
Unit <unitname>;
Interface
  [interface section]
Implementation
  [implementation section]
Initialization
  [initialization section]
End.
pas.<unitname>={
  [interface section],
  $impl: {
    [implementation section],
  },
  $init: function() {
    [initialization section]
  }
};
Note: The finalization section is not supported by pas2js.
To create and initialize the units in topological order the compiler translates an Unit to the following JavaScript code:
Pascal JavaScript
Unit <unitname>;
Interface
  [interface section]
Implementation
  [implementation section]
Initialization
  [initialization section]
End.
rtl.module('<unitname>',
  ['system',...other used units of the interface section...],
  function(){
    [interface section]
    this.$init=function(){
      [initialization section]
    };
  },
  [...used units of the implementation section],
  function(){
    [implementation section]
  }};
Here is a more detailed example to make it more clear:
Pascal JavaScript
Unit MyModule;
Interface
Uses Sysutils;
var
  dIntf: double;
  sIntf: string = 'abc';
procedure MyIntfProc;
Implementation
Uses Classes;
Var dImpl:double;
Procedure MyIntfProc;
Begin
  dImpl:=dIntf;
End;
Procedure MyImplProc;
Begin
  dImpl:=dIntf;
End;
Initialization
End.
rtl.module("MyModule",
["System","SysUtils"],
function(){
  var $mod = this;
  var $impl = $mod.$impl;
  this.dIntf = 0.0;
  this.sIntf = "abc";
  this.MyIntfProc = function(){
    $impl.dImpl = $mod.dIntf;
  };
  this.$init = function() {
  };
},
["Classes"],
function(){
  var $mod = this;
  var $impl = $mod.$impl;
  $impl.dImpl = 0.0;
  $impl.MyImplProc = function() {
    $impl.dImpl = $mod.dIntf;
  };
});
Notes:

Translating variables

Variables are converted without type, because JavaScript lacks a clear type. They are however always initialized, which helps JavaScript engines to optimize.
Pascal JavaScript
Unit MyModule;
Interface
Uses Classes,Forms;
const
  c1:integer=3;
  c2 = 'abc';
  c3 = 234;
  c4 = 12.45;
  c5 = nil;
var
  v1:string;
  v2,v3:double;
  v4:byte=0;
  v5:TForm;
  v6:TIdentMapEntry;
  v7:string='abcäöü';
  v8:char='c';
  v9:array of byte;
Implementation
End.
rtl.module("MyModule",
["System","Classes","Forms"],
function(){
  this.c1 = 3;
  this.c2 = "abc";
  this.c3 = 234;
  this.c4 = 12.45;
  this.c5 = null;
  this.v1 = "";
  this.v2 = 0.0;
  this.v3 = 0.0;
  this.v4 = 0;
  this.v5 = null;
  this.v6 = new pas.Classes.TIdentMapEntry();
  this.v7 = "abcäöü";
  this.v8 = "c";
  this.v9 = [];
},
[]);
Notes:

Translating string

Strings are translated to JavaScript strings. They are initialized with "" and are never null.
There are no ShortString, AnsiString or RawByteString. Unicodestring and Widestring are alias of String.
JavaScript strings are immutable, which means that changing a single character in a string, creates a new string. So a s[2]:='c'; is a slow operation in pas2js compared to Delphi/FPC.
Although pas2js creates .js files encoded as UTF-8 with BOM, JavaScript strings are UTF-16 at runtime. Keep in mind that one UTF-16 codepoint can need two char, and a visible glyph can need several codepoints. Same as in Delphi.

Translating resourcestrings

Resourcestrings are translated to JS objects with original (org) and current value.
Pascal JavaScript
Unit MyModule;
Interface
resourcestring
  rsCompiler = 'pas2js';
var
  s:string;
Implementation
initialization
  s:=rsCompiler;
End.
rtl.module("test1",["System"],function () {
  var $mod = this;
  this.s = "";
  $mod.$resourcestrings = {rsCompiler: {org: "pas2js"}};
  $mod.$init = function () {
    $mod.s = rtl.getResStr(pas.test1,"rsCompiler");
  };
});

Translating currency

Currency in Delphi/FPC is an int64 with a factor of 10000. This is translated to a double with factor 10000 and truncated.

Translating Types

JavaScript type design has no declarative form, except for object types (so-called prototypes). That's why all the derivatives from simple Pascal types can not be translated. The compiler ensures type safety at compile time though, which is a big plus for using Pascal.
Complex Pascal types (classes, records, or arrays) are translated into JavaScript objects or arrays respectively.

Translating pointer

A pointer is translated to a JS reference. It can be assigned a class, a class instance, a class-of, an array, a procedure var, a method var, a @proc address, a @method address, or a pointer of record. There is no pointer arithmetic, i.e. no p+1, and no typed pointers, except for pointer of record. You can find out its type using the functions isArray, isClass, isClassRef, isCallback, etc of unit JS.

Translating record type

A record is translated to a JavaScript object.
Pascal JavaScript
Unit MyModule;
Interface
Type
  TMyRecord = Record
    i: integer;
    s: string;
    d: TDateTime;
  End;
Var
  r, s: TMyRecord;
Implementation
Initialization
  r.i := 123;
  r:=s;
  if r=s then ;
End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  this.TMyRecord = function(s) {
    if (s){
      this.i = s.i;
      this.s = s.s;
      this.d = s.d;
    } else {
      this.i = 0;
      this.s = "";
      this.d = 0.0;
    };
    this.$equal = function (b) {
      return (this.i == b.i) && (this.s == b.i) && (this.d == b.d);
    };
  };
  this.r = new this.TMyRecord();
  $mod.$init = function() {
    $mod.r.i=123;
    $mod.r = new $mod.TMyRecord($mod.s);
    if ($mod.r.$equal($mod.s)) ;
  },
},
[]);

Translating functions

Pascal JavaScript
Unit MyModule;
Interface
Function DoubleIt(n: integer): integer;
Implementation
Function DoubleIt(n: integer): integer;
Begin
  Result:=2*n;
End;
End.
rtl.module("MyModule",
["System"],
function(){
  this.DoubleIt = function(n){
    Result = 0;
    Result = 2*n;
    return Result;
  };
},
[]);
Notes:

Translating passing a parameter by reference

JavaScript lacks passing by reference. Instead a temporary object is created with a get and set function. That means changes within the procedure are immediately visible outside, compatible with Pascal.
Pascal JavaScript
Program MyModule;
Procedure DoubleIt(var n: integer);
Begin
  n:=2*n;
End;
Function Doubling(n: integer): integer;
Begin
  DoubleIt(n);
  Result:=n;
End;
Var
  i: integer = 7;
Begin
  Doubling(i);
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.i = 7;
  this.DoubleIt = function(n){
    n.set(2*n.get());
  };
  this.Doubling = function(n){
    var Result = 0;
    DoubleIt({
      get:function(){
        return n
      },
      set:function(v){
        n=v;
      }
    });
    Result = n;
    return n;
  };
  $mod.$main = function(){
    Doubling($mod.i);
  }
},
[]);
When the passed value is from another context, the context is passed too:
Pascal JavaScript
Program MyModule;
Procedure DoubleIt(var n: integer);
Begin
  n:=2*n;
End;
Var
  i: integer = 7;
Begin
  DoubleIt(i);
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.i = 7;
  this.DoubleIt = function(n){
    n.set(2*n.get());
  };
  $mod.$main = function(){
    DoubleIt({
        p:$mod,
        get:function(){
          return this.p.i
        },
        set:function(v){
          this.p.i=v;
        }
      });
  }
},
[]);
Notes:

Translating nested functions

A nested function is translated to a local variable.
Pascal JavaScript
Unit MyModule;
Interface
Function SumNNumbers(n, Adder: integer): integer;
Implementation
Function SumNNumbers(n, Adder: integer): integer;

  Function Add(k: integer): integer;
  Begin
    if k=1 then
      Result:=1
    else
      Result:=Add(k-1)+Adder;
  End;

Begin
  Result:=Add(n);
End;
End.
rtl.module("MyModule",
["System"],
function(){
  this.DoubleIt = function(n,Adder){
    Result = 0;
    var Add = function(k) {
      Result = 0;
      if (k==1) {
        Result = 1;
      } else {
        Result = Add(k-1)+Adder;
      }
      return Result;
    };
    Result = Add(n);
    return Result;
  };
},
[]);
Note: You can assign a nested procedure to a procedure variable. A nested procedure of a method can be assigned to a method variable.
JavaScript preserves the current local scope, including references to the local variables of parent functions. Local types and constants belong to the unit scope (singleton).
When a method has nested functions, the compiler adds a local var Self.

Translating for-loops

The JavaScript for-loop executes the end expression every iteration, while Pascal only executes it once. Therefore a local variable is introduced. If the loop is not entered at all, the variable is not touched. If the loop was entered the variable contanis the last value.
Pascal JavaScript
Unit MyModule;
Interface
Function SumNNumbers(n: integer): integer;
Implementation
Function SumNNumbers(n: integer): integer;
Var
  i, j: integer;
Begin
  j:=0;
  For i:=1 To n Do
  Begin
    j:=j+i;
  End;
  if i<1 then j:=1;
  Result:=j;
End;
End.
rtl.module("MyModule",
["System"],
function(){
  this.SumNNumbers=function(n){
    Result = 0;
    j = 0;
    for (var $l1 = 1, $le2 = n; $l1 <= $le2; $l1++) {
      i = $l1;
      j = j + i;
    };
    if (i<1) j=1;
    Result = j;
    return Result;
  };
},
[]);
Note: The after-loop decrement is only added if i is read after the loop.

Translating repeat..until

The repeat..until is translated to a do{}while().
Pascal JavaScript
Unit MyModule;
Interface
Function SumNNumbers(n: integer): integer;
Implementation
Function SumNNumbers(n: integer): integer;
Var
  i, j: integer;
Begin
  j:=0;
  i:=0;
  Repeat
    i:=i+1;
    j:=j+i;
  Until i>=n;
  Result:=j;
End;
End.
rtl.module("MyModule",
["System"],
function(){
  this.SumNNumbers=function(n){
    Result = 0;
    j = 0;
    i = 0;
    do{
      i = (i + 1);
      j = (j + i);
    } while (!(i>=n));
    Result = j;
    return Result;
  };
},
[]);

Translating while..do

Pascal JavaScript
Unit MyModule;
Interface
Function SumNNumbers(n: integer): integer;
Implementation
Function SumNNumbers(n: integer): integer;
Var
  i, j: integer;
Begin
  j:=0;
  i:=0;
  While i<n Do Begin
    i:=i+1;
    j:=j+i;
  End;
  Result:=j;
End;
End.
rtl.module("MyModule",
["System"],
function(){
  this.SumNNumbers=function(n){
    var Result = 0;
    var j = 0;
    var i = 0;
    while(i<n){
      i = (i + 1);
      j = (j + i);
    };
    Result = j;
    return Result;
  };
},
[]);

Translating case..do

Although JavaScript has something similar in form of the "switch" statement, it lacks ranges and is on current JS engines often slower than "if-else". Therefore a case..of is translated to if..else.
Pascal JavaScript
Program MyModule;
Var
  i: integer;
Begin
  case i of
    1: ;
    2: i:=3;
  else
    i:=4;
  end;
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.i = 0;
  $mod.$main=function(n){
    $tmp1 = $mod.i;
    if ($tmp1 == 1){
    } else if ($tmp1 == 2) {
      i=3;
    } else {
      i=4;
    }
  };
},
[]);

Translating with..do

JavaScript has a with, but it is slow and deprecated. Instead a temporary variable is used:
Pascal JavaScript
Unit MyModule;
Interface
type
  TClassA = class
    i: integer;
  end;

procedure DoIt;

Implementation

procedure DoIt;
begin
  with TClassA.Create do
    i:=3;
end;

End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  rtl.createClass($mod, "TClassA", pas.System.TObject, function () {
    this.$init = function () {
      this.i = 0;
    };
  });
  this.DoIt = function(){
    var $with1 = $mod.TClassA.$create("Create");
    $with1.i = 3;
  };
},
[]);
Note: If the with-expression is already a local variable no new variable is created. This is Delphi/FPC compatible.

Translating enums

Enum values are translated to numbers. The enum type is translated to an object containing a mapping from name to number and number to name.
Pascal JavaScript
Unit MyModule;
Interface
type
  TMyEnum = (
    Red,
    Green,
    Blue);
var
  e: TMyEnum = Blue;

procedure DoIt;

Implementation

procedure DoIt;
begin
  e := Green;
end;

End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  this.TMyEnum = {
    "0":"Red",
    Red:0,
    "1":"Green",
    Green:1,
    "2":"Blue",
    Blue:2
    };
  this.e = $mod.TMyEnum.Blue;
  this.DoIt = function(){
    $mod.e = $mod.TMyEnum.Green;
  };
},
[]);

Translating sets

A set s is translated to a JavaScript object, where for each included enum holds s.enumvalue==true. This allows arbitrary large sets and the in operator is fast.
Pascal JavaScript
Unit MyModule;
Interface
type
  TColor = (Red, Green, Blue);
  TColors = set of TColor;

procedure DoIt;

Implementation

procedure DoIt;
var
  c: TColor;
  S, T: TColors;
  b: boolean;
begin
  S:=T;
  b:=Red in S;
  Include(S,Blue);
  Exclude(S,Blue);
  S:=S+T;
  S:=S-[Red,c];
  b:=c in [Red..Blue];
end;

End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  this.TColor = {
    "0":"Red",
    Red:0,
    "1":"Green",
    Green:1,
    "2":"Blue",
    Blue:2
    };
  $mod.DoIt = function(){
    var c = 0;
    var S = {};
    var T = {};
    var b = false;
    S = rtl.refSet(T);
    b = $mod.TColor.Red in S;
    S = rtl.includeSet(S,$mod.TColor.Blue);
    S = rtl.excludeSet(S,$mod.TColor.Blue);
    S = rtl.unionSet(S,T);
    S = rtl.diffSet(S,rtl.createSet($mod.TColor.Red,c));
    b = c in rtl.createSet(null,$mod.TColor.Red,$mod.TColor.Blue);
  };
},
[]);

Translating array type

All arrays are translated into JavaScript arrays.
Contrary to Delphi/FPC dynamic arrays are not reference counted and do not copy on write. That means if you pass an array to a procedure and change an element, the original array is changed.
Pascal JavaScript
Unit MyModule;
Interface
Type
  TIntArr = Array of integer;
  TObjArr = Array of TObject;
  TRec = record c: char; end;
  TRecArr = Array of TRec;
Procedure Test;
Implementation
Procedure Test;
Var
  IntArr: TIntArr = (1,2,3);
  ObjArr: TObjArr;
  RecArr: TRecArr;
Begin
  IntArr:=nil;
  SetLength(IntArr,4);
  IntArr[2]:=2;
  IntArr[1]:=length(IntArr);
  SetLength(ObjArr,5);
  SetLength(RecArr,2,TRec);
End;
End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  this.Test = function(){
    this.TRec = function(s){
      if (s){
        this.c = s.c;
      } else {
        this.c = "";
      };
      this.$equal = function(b){
        return (this.c == b.c);
      };
    };
    this.IntArr = [1,2,3];
    this.ObjArr = [];
    this.RecArr = [];
    this.Test = function(){
      $mod.IntArr = [];
      rtl.arraySetLength($mod.IntArr,4,0);
      $mod.IntArr[2] = 2;
      $mod.IntArr[1] = $mod.IntArr.length;
      rtl.setArrayLength($mod.ObjArr,5,null);
      rtl.setArrayLength($mod.RecArr,2,$mod.TRec);
    }
  };
},
[]);
Notes:

Translating class type

Classes are implemented using Object.create and some rtl magic.
Pascal JavaScript
Unit MyModule;
Interface
Type
  TClassA = Class(TObject)
  Public
    i: integer;
    Procedure Add(a: integer);
  End;
var
  ObjA: TClassA;
Implementation
Procedure TClassA.Add(a: integer);
Begin
  i:=i+a;
End;
Initialization
  ObjA:=TClassA.Create;
End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  rtl.createClass($mod,"TClassA",pas.System.TObject,function(){
    this.$init = function () {
      this.i = 0;
    };
    this.Add = function(a){
      this.i = this.i + a;
    };
  });
  this.ObjA = null;
  $mod.$init = function(){
    $mod.ObjA = $mod.TClassA.$create("Create");
  };
},
[]);
Notes:

Translating class-of type

A class-of is a reference to a class. See above about translating class.
Pascal JavaScript
Unit MyModule;
Interface
Type
  TBird = Class(TObject)
  Public
    Class var Count: integer;
    Class Procedure Add(a: integer); virtual;
  End;
  TBirds = class of TBird;

  TPigeon = Class(TBird)
  Public
    Class Procedure Add(a: integer); override;
  End;

var
  BirdType: TBirds;
Implementation
Class Procedure TBird.Add(a: integer);
Begin
  Count:=Count+a;
End;
Class Procedure TPigeon.Add(a: integer);
Begin
  inherited Add(a+1);
End;
Initialization
  BirdType:=TPigeon;
  BirdType.Add(1);
End.
rtl.module("MyModule",
["System"],
function(){
  var $mod = this;
  rtl.createClass($mod,"TBird",pas.System.TObject,function () {
    this.Count = 0;
    this.Add = function (a) {
      this.Count = this.Count + a;
    };
  });
  rtl.createClass($mod,"TPigeon",$mod.TBird,function () {
    this.Add = function (a) {
      $mod.TBird.Add.call(this,a + 1);
    };
  });
  $mod.$init = function(){
    $mod.BirdType = $mod.TPigeon;
    $mod.BirdType.Add(1);
  };
},
[]);
Note that this in a class method is the class itself.

Notes:

Translating TObject.Free

In Delphi/FPC AnObject.Free checks if Self is nil, then calls the destructor and frees the memory, without changing the reference. In JavaScript however calling a method with AnObject=nil causes a crash. And memory cannot be freed explicitely. Memory is only freed if all references are gone (e.g. set to null).
Therefore pas2js adds code to call the destructor and sets the variable to nil:
Notes:

Translating class interfaces

JavaScript has nothing like it, so they are emulated.
An interfacetype is a JS-object with some hidden properties, containing the GUID ($guid) and an array with the method names ($names). Here is how IUnknown looks like in JS:
{
  $module: [object Object],
  $name: "IUnknown",
  $fullname: "System.IUnknown",
  $guid: "{00000000-0000-0000-C000-000000000046}",
  $names: ["QueryInterface","_AddRef","_Release"],
  $rtti: [object Object],
  $kind: "com",
}
A class implementing interfaces has a variable $intfmaps, which has for each implemented GUID a map or delegator function. A map is a JS instance of the interfacetype plus a for each method name a function to call the class method. Here is an example map of IUnknown of TInterfacedObject:
{
  QueryInterface: function (){ return fn.apply(this.$o,arguments); },
  _AddRef: function (){ return fn.apply(this.$o,arguments); },
  _Release: function (){ return fn.apply(this.$o,arguments); },
  ...
}
When an interface is created for an object (here: a Pascal class instance), for example by using the as-operator "ObjVar as IUnknown", a JS object is created, which is an instance of the map object with its $o set to the ObjVar.

Supported: Not yet supported: array of intferfacetype, interface as record member.

Translating attributes

Attributes are not yet implemented. To make porting code easier there is a {$modeswitch ignoreattributes}, that ignores attributes.

Translating try..finally

JavaScript has the same, so it translates straight forward.

Translating try..except

Pascal JavaScript
Unit MyModule;
Interface
Uses SysUtils, Math, JS;
Function DoIt(n: integer): double;
Implementation
Function DoIt(n: integer): double;
var E: Exception;
Begin
  try
    Result:=double(7.0)/n;
    if not IsFinite(Result) then
      if n=0 then
        raise EZeroDivide.Create
      else
        raise EOverflow.Create;
  except
    on EZeroDivide do Result:=0.0;
    on E2: EOverflow do Result:=0.0;
    else
      raise EAbort.Create('Something other: '+String(JS.JSExceptObject));
  end;
End;
End.
rtl.module("MyModule",
["System","SysUtils"],
function(){
  this.DoIt=function(n){
    Result = 0;
    var E = null;
    try{
      Result = 7.0 / n;
      if (!IsFinite(Result)){
        if (n==0){
          throw pas.SysUtils.EZeroDivide.$create("Create");
        } else {
          throw pas.SysUtils.EOverflow.$create("Create");
        };
      };
    }catch($e){
      if (pas.SysUtils.EZeroDivide.isPrototypeOf($e)){
        Result = 0.0;
      } else if (pas.SysUtils.EOverflow.isPrototypeOf($e)){
        var E2 = $e;
        Result = 0.0;
      } else {
        throw pas.SysUtils.EAbort.$create("Create",["Something other: "+(""+$e)]);
      }
    }
    return Result;
  };
},
[]);
Notes:

Translating enumerators

The for..in..do supports enumerating: The class GetEnumerator function is translated like this:
Pascal JavaScript
Unit MyModule;
Interface

uses Classes;

procedure DoIt(List: TList);

Implementation

procedure DoIt(List: TList);
var
  Item: Pointer;
begin
  for Item in List do
    if Item<>nil then ;
end;

End.
rtl.module("MyModule",
["System","Classes"],
function(){
  this.DoIt=function(List){
    var Item = null;
    var $in1 = List;
    try {
      while ($in1.MoveNext()) {
        Item = $in1.GetCurrent();
        if (Item !== null) ;
      }
    } finally {
      $in1 = rtl.freeLoc($in1)
    };
  };
},
[]);
Notes:

Translating function types

JavaScript functions work like Delphi's "reference to function", which means like closures, capturing outer variables. Assigning a normal function or nested function to a procedural variable is translated to a simple assignment. A Pascal method needs this to be the class or class instance.
Note that bind cannot be used, because it does not support the equal operator. Instead a wrapper is created:
Pascal JavaScript
Program MyModule;
type
  TMyMethod = procedure(n: integer) of object;
  TBird = class
    procedure DoIt(n: integer); virtual; abstract;
  end;
  TMyProc = procedure(n: integer);
procedure DoSome(n: integer);
begin
end;
var
  m: TMyMethod;
  Bird: TBird;
  p: TMyProc;
Begin
  m:=@Bird.DoIt;
  m(3);
  p:=@DoSome;
  p(4);
End.
rtl.module("program",
["System","UnitA"],
function(){
  var $mod = this;
  rtl.createClass($mod,"TBird",pas.System.TObject,function(){
    this.DoIt = function (n) {
    };
  });
  this.DoSome = function (n) {
  };
  this.m = null;
  this.Bird = null;
  this.p = null;
  $mod.$main = function() {
    $mod.m = rtl.createCallback($mod.Bird,"DoIt");
    $mod.m(3);
    $mod.p = $mod.DoSome;
    $mod.p(4);
  };
},
[]);

rtl = {
  ...
  createCallback: function(scope, fn){
    var cb = function(){
      return scope[fn].apply(scope,arguments);
    };
    cb.scope = scope;
    cb.fn = fn;
    return cb;
  },
  ...
Notes:

Translating anonymous functions

Anonymous functions are not yet supported by pas2js. The next best thing are local procedures. For example:
Delphi Pas2js
Program MyModule;
type
  TAdder = reference to function(n: integer): integer;

function CreateAdder(a: integer): TAdder;
begin
  Result:=function(b: integer)
    begin
      Result:=a+b;
    end;
end;

var
  Adder: TAdder;
Begin
  Adder:=CreateAdder(3);
  writeln(Adder(5)); // gives 8
End.
Program MyModule;
type
  TAdder = reference to function(n: integer): integer;

function CreateAdder(a: integer): TAdder;
  function Add(b: integer): integer;
  begin
    Result:=a+b;
  end;
begin
  Result:=@Add;
end;

var
  Adder: TAdder;
Begin
  Adder:=CreateAdder(3);
  writeln(Adder(5)); // gives 8
End.

Translating var modifier absolute

The absolute modifier works as an alias. That means it works FPC/Delphi compatible for related types like Pointer and TObject, and works incompatible for unrelated types like longword and record (e.g. var r: TPoint absolute MyLongInt).
The modifier is currently only supported for local variables.

Translating assert()

The Assert(boolean[,string]) function is translated to if(bool) throw x. If unit sysutils is used, it creates an EAssertFailed exception.
Otherwise it throws a string.

Calling JavaScript from Pascal

Pas2js allows to write low level functions and/or access a JavaScript library with the following possibilities:

The asm block

The asm block is pure JavaScript, that is copied directly into the generated .js file.
Pascal JavaScript
Program MyModule;
var
  s: string;
Begin
  s = 'Hello World!';
  Asm
    console.log(s);
  End;
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.s = '';
  $mod.$main = function(){
    $mod.s = "Hello World!";
    console.log(s);
  };
},
[]);
Notes:

The procedure modifier assembler

You can write pure JavaScript functions like this:
Pascal JavaScript
Program MyModule;

Procedure Log(const s: string); assembler;
Asm
  console.log(s);
end;

Begin
  Log('Hello World!');
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.Log = function(s){
    console.log(s);
  };
  $mod.$main = function(){
    $mod.Log("Hello World!");
  };
},
[]);
See also asm.

The procedure modifier external

The procedure modifier external requires a string constant and tells the compiler to replace a reference with this string value. The value is not checked for JS syntax.
Pascal JavaScript
Program MyModule;
Procedure ConsoleLog(const s: string); external name 'console.log';
// Note: an external procedure has no begin..end block
Begin
  ConsoleLog('Hello World!');
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  $mod.$main = function(){
    console.log("Hello World!");
  };
},
[]);

The procedure modifier varargs

Appending the varargs modifier to a procedure allows to pass arbitrary more parameters to a function. To access these non typed arguments use either JSArguments from unit JS or an asm..end block.
Pascal JavaScript
Program MyModule;
uses JS;
function Sum(b: boolean): longint; varargs;
var i: longint;
begin
  if b then
    asm
      for (var i=0; i<arguments.length; i++) Result+=arguments[i];
    end
  else
    for i:=0 to JSArguments.length-1 do
      Result:=Result+longint(JSArguments[i]);
end;
var
  i: integer;
Begin
  i:=Sum(true,2,4,6); // i=12
  i:=Sum(false,2,4,6); // i=12
End.
rtl.module("program",
["System","JS"],
function(){
  var $mod = this;
  this.Sum = function(b){
    var Result = 0;
    var i = 0;
    if (b){
      for (var i=0; i<arguments.length; i++) Result+=arguments[i];
    } else {
      for (var $l1 = 1, $le2 = argumens.length; $l1 <= $le2; $l1++){
        $i = $l1;
        Result = Result + arguments[i];
      }
    }
    return Result;
  };
  this.i = 0;
  $mod.$main = function(){
    $mod.i = $mod.Sum(true,2,4,6);
    $mod.i = $mod.Sum(false,2,4,6);
  };
},
[]);
The above example defines a function Sum, that requires the first parameter to be a boolean and then an arbitrary number of parameters. The compiler does not type check the other parameters, so you can pass anything readable.

The var modifier external

The var modifier external allows to use a JavaScript variable or constant.
Pascal JavaScript
Program MyModule;
var
  EulersNumber: Double; external name 'Math.E';
  d: double;
Begin
  d:=EulersNumber;
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  this.d = 0.0;
  $mod.$main = function(){
    $mod.d = Math.E;
  };
},
[]);

The external modifier of class members

The method modifier external works as the procedure modifier, except it uses the scope of the class or instance.
The field modifier external works as the var modifier, except it uses the scope of the class or instance.
Requires the modeswitch externalclass.
Pascal JavaScript
Program MyModule;
{$modeswitch externalclass}
type
  TWrapper = class
  private
    // let's assume this object has the properties "$Handle", "$id", and "0"
  public
    Id: NativeInt; external name '$Id';
    x: NativeInt; external name '[0]';
    y: NativeInt; external name '["A B"]';
    function GetState(typ: longint): NativeInt; external name '$Handle.GetState';
    procedure DoIt;
  end;
procedure TWrapper.DoIt;
begin
  Id := GetState(4);
end;
var
  W: TWrapper;
Begin
  W.Id := 2;
  W.x := 3;
  W.y := 4;
  W.GetState(5);
End.
rtl.module("program",
["System"],
function(){
  var $mod = this;
  rtl.createClass($mod, "TWrapper", pas.System.TObject, function () {
    this.DoIt = function(){
      this.$Id = this.$Handle.GetState(4);
    };
  });
  this.W = null;
  $mod.$main = function(){
    $mod.W.$Id = 2;
    $mod.W[0] = 3;
    $mod.W["A B"] = 4;
    $mod.W.$Handle.GetState(5);
  };
},
[]);

External classes

pas2js introduces a new class modifier "external name", which makes the whole class external. External classes allow to easily declare Pascal wrappers for JavaScript objects and function objects.
They need the modeswitch externalclass in front of the class.
An external class is not a TObject and has none of its methods.
All members are external. If you omit the external modifier the external name is the member name. Keep in mind that JS is case sensitive.
Destructors are not allowed.
Constructors are only allowed with the name New and a call translates to new ExtClass(params). Properties work the same as with Pascal classes, i.e. are replaced by Getter/Setter.
Pascal JavaScript
Program MyModule;
{$modeswitch externalclass}
type
  TJSDate = class external name 'Date'
  private
    function getYear: NativeInt;
    procedure setYear(const AValue: NativeInt);
  public
    constructor New;
    constructor New(const MilliSecsSince1970: NativeInt);
    class function now: NativeInt;
    property Year: NativeInt read getYear write setYear;
  end;
var
  d: TJSDate;
Begin
  d:=TJSDate.New;
  d.Year:=d.Year+1;
End.
rtl.module("program",["System"],function () {
  var $mod = this;
  this.d = null;
  $mod.$main = function () {
    $mod.d = new Date();
    $mod.d.setYear($mod.d.getYear() + 1);
  };
});
Notes:

External class as ancestor

A Pascal class can descend from an external class.
The methods AfterConstruction and BeforeDestruction are called if they exist.
New instances are created by default with Object.create(ancestorclass).
You can override this, by providing a
class function NewInstance(fnname: string; const paramsarray): TPasClass; virtual;. This method is called to create a new instance and before calling the constructor. The name is arbitrary, but the function must be the first non private, non external, virtual class function with the class as result type.
Pascal JavaScript
Program MyModule;
{$modeswitch externalclass}
type
  TExtA = class external name 'ExtA'
  end;
  TMyB = class(TExtA)
  protected
    class function NewInstance(fnname: string; const paramarray): TMyB; virtual;
  end;
class function TMyB.NewInstance(fnname: string; const paramarray): TMyB;
Begin
  asm
  Result = Object.create(ExtA);
  end;
End;

Begin
End.
rtl.module("program",["System"],function () {
  var $mod = this;
  rtl.createClassExt($mod, "TMyB", ExtA, "NewInstance", function () {
    this.$init = function () {
    };
    this.$final = function () {
    };
    this.NewInstance = function (fnname, paramarray) {
      var Result = null;
      Result = Object.create(ExtA);
      return Result;
    };
  });
  $mod.$main = function () {
  };
});

The JSValue type

Pas2js introduces a new type JSValue, which works similar to a JS variable. You can assign almost any value to it and it can be type casted to many types. JSValue is useful for JS wrappers, when a variable can have multiple types. And it can be used for containers storing arbitrary data, e.g. a list of JSValue.
Key features:

Accessing JS object properties with the bracket accessor

Pas2js allows to define index properties that map directly to the JS object properties. For example the default property of TJSObject allows to get and set the properties of an object. For example TJSObject(AnObject)['Name']:=Value;
Another example is the default property of TJSArray, that allows access via integers aTJSArray[3]:=Value;
To define your own bracket accessor define a normal index property and define the getter/setter as external name '[]'.
Here is an example for a read only accessor:
Pascal JavaScript
Program MyModule;
{$modeswitch externalclass}
type
  TExtA = class external name 'ExtA'
  private
    function GetItems(Index: integer): String; external name '[]';
  public
    property Items[Index: integer]: String read GetItems; default;
  end;
var
  Obj: TExtA;
  s: String;
Begin
  ... get Obj from somewhere ...
  s:=Obj[2];
End.
rtl.module("program",["System"],function () {
  var $mod = this;
  this.Obj = undefined;
  this.s = "";
  $mod.$main = function () {
    $mod.s = Obj[2];
  };
});
Notes:

RTTI - Run Time Type Information

The RTTI provides access to the type data of all published properties, fields and methods. The type data provides similar information as Delphi/FPC, but the internals are very different. Delphi/FPC uses pointers, variant records and fake static arrays, which have no equivalent in JS. Instead pas2js uses external classes. For example:
    TTypeInfo = class external name 'rtl.tTypeInfo'
    public
      Name: String external name 'name';
      Kind: TTypeKind external name 'kind';
    end;
    TTypeInfoClass = class of TTypeInfo;

    TTypeInfoInteger = class external name 'rtl.tTypeInfoInteger'(TTypeInfo)
    public
      MinValue: NativeInt external name 'minvalue';
      MaxValue: NativeInt external name 'maxvalue';
      OrdType : TOrdType external name 'ordtype';
    end;
    
The typeinfo function works on type, var, const and property identifiers. By default it returns a pointer. If the typinfo unit is used it returns the appropiate TTypeInfo. For instance typeinfo(integer) returns a TTypeInfoInteger.
Typeinfo of a var or const returns the typeinfo of its type, not of its current runtime value. The exception is a class and class-of instance variable (e.g. var o: TObject; ... typeinfo(o)), which returns the typeinfo of the current runtime value. If o is null it will give a JS error.
Local types (i.e. inside a procedure) do not have typeinfo.
Open array parameters are not yet supported.

Compiler directives

In config files: In source files: Defines:

Numbers

JavaScript only supports double. All Pascal number types and enum values are mapped to this. A double supports integers from
MinInteger = -$10000000000000;
MaxInteger = $fffffffffffff;
MinDouble = 5.0e-324;
MaxDouble = 1.7e+308;

Intrinsic integer types: Notes:

Other supported Pascal elements

Not supported elements

JavaScript Version

Code generation depending on -P option:

Creating source maps

Source maps are files telling the browser what JavaScript comes from which original source (e.g. Pascal file), similar to debug information in FPC/Delphi.
In 2017 FireFox and Chrome supports source maps.
You can enable generating source map files by using the -Jm option.
The compiler generates one module.js.map file for every generated module.js file. The last line of the .js file contains the line
//# sourceMappingURL=module.js.map
telling the browser where to find the source map.
The source map contains references to the Pascal files and included .js files (e.g. -Jirtl.js) relative to the location of the source map. Note that if the Pascal file lies in a parent directory, the relativ path contains '../'. You can change the base directory of the relative paths by using the option -Jmbasedir=<x>. For example -JmC:\www\pas creates paths relative to C:\www\pas.
You can set the base URL, where the browser finds the Pascal sources, by passing the -Jmsourceroot=<x> option. For example -Jmsourceroot=http://www.yoursite.com/pas/. The browser prepends this to the source map filenames when downloading the original source files (e.g. the .pas files).
You can include the whole Pascal sources in the source map using the option -Jminclude.

To show the generated mapping for each line you can use the tool fpc/packages/fcl-js/examples/srcmapdump.
  • Option -JmXSSIHeader: According to the specifications sourcemap should start with the XSSI (cross site script inclusion) protection header )]}'. If your browser does not support that, disable it with -JmXSSIHeader-. See here the specs: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.h7yy76c5il9v