Home Explore Help
Sign In
pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

* Module demos

Michaël Van Canneyt 3 years ago
parent
a951339841
commit
0c4ac1b113
13 changed files with 379 additions and 0 deletions
Unified View Show Diff Stats
  1. 76 0
      demo/modules/README.md
  2. 28 0
      demo/modules/basic-units/canvas.pp
  3. 16 0
      demo/modules/basic-units/index.html
  4. 17 0
      demo/modules/basic-units/main.pp
  5. 32 0
      demo/modules/basic-units/square.pp
  6. 16 0
      demo/modules/basic/index.html
  7. 49 0
      demo/modules/basic/main.pp
  8. 22 0
      demo/modules/flat-units/canvas.pp
  9. 16 0
      demo/modules/flat-units/index.html
  10. 16 0
      demo/modules/flat-units/main.pp
  11. 28 0
      demo/modules/flat-units/square.pp
  12. 16 0
      demo/modules/flat/index.html
  13. 47 0
      demo/modules/flat/main.pp

+ 76 - 0
demo/modules/README.md
View File 

@@ -0,0 +1,76 @@
 
+# Module import demos
 
+
 
+## Intro
 
+pas2js can convert the $linklib directive to a JS import statement:
 
+
 
+The following:
 
+
 
+```delphi
 
+{$linklib ./modules/canvas.js canvas}
 
+```
 
+
 
+is converted to
 
+```js
 
+import * as canvas from "./modules/canvas.js";
 
+```
 
+If the alias is omitted, one is constructed for you:
 
+
 
+```delphi
 
+{$linklib ./modules/some-api.js}
 
+```
 
+is converted to
 
+```js
 
+import * as some_api from "./modules/some-api.js";
 
+```
 
+The import statements are always inserted in the main program. 
+This is because modules are like windows libraries: self-contained programs,
 
+which only import and export well-defined symbols.
 
+
 
+For this reason, a new target "operating system" has been invented: 
+the module. 
+This means that you must compile with target module:
 
+
 
+```sh
 
+pas2js -Tmodule -Jirtl.js main.pp
 
+```
 
+
 
+The nodejs target will also work, but in the future the 2 targets may
 
+diverge.
 
+
 
+## Demos
 
+
 
+Each directory contains 1 demo. Compile with the command-line as above:
 
+
 
+```sh
 
+pas2js -Tmodule -Jirtl.js main.pp
 
+```
 
+
 
+### Basic
 
+
 
+This shows a simple program, no units, that uses the linklib directive to
 
+import a javascript module. It uses an external class definition to access
 
+the exported symbols from the modules.
 
+
 
+### Basic-Units
 
+
 
+This is the same as the Basic  example, but the import definitions are split
 
+out in units.
 
+
 
+### Flat
 
+
 
+This shows a simple program, no units, that uses the linklib directive to
 
+import a javascript module. It uses only external 'name' definitions to access
 
+the exported symbols from the modules; no external class is used.
 
+
 
+### Flat-Units
 
+
 
+This is the same as the flat example, but the import definitions are split
 
+out in units.
 
+
 
+
 
+
 
+
 
+
 
+ 
+
 
+

+ 28 - 0
demo/modules/basic-units/canvas.pp
View File 

@@ -0,0 +1,28 @@
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+// filename export object alias
 
+{$linklib ./modules/canvas.js canvas}
 
+
 
+unit canvas;
 
+
 
+interface
 
+
 
+uses js, web;
 
+
 
+type
 
+  TCreateCanvasResult = class external name 'Object' (TJSObject)
 
+     ctx: TJSCanvasRenderingContext2D;
 
+     id : string;    
+  end;
 
+  
+  TCanvasAPI = class external name 'Object' (TJSObject)
 
+    function create (aID : String; AParent : TJSElement; aWidth,aHeight : Integer) : TCreateCanvasResult;
 
+    function createReportList(aWrapperID : String) : String;  
+  end;
 
+
 
+Var
 
+  CanvasAPI : TCanvasAPI; external name 'canvas';
 
+
 
+implementation
 
+
 
+end.

+ 16 - 0
demo/modules/basic-units/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en-US">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Basic JavaScript module example</title>
 
+    <style>
 
+      canvas {
 
+        border: 1px solid black;
 
+      }
 
+    </style>
 
+    <script type="module" src="main.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+  </body>
 
+</html>

+ 17 - 0
demo/modules/basic-units/main.pp
View File 

@@ -0,0 +1,17 @@
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+uses js, web, canvas, square;
 
+ 
+Var
 
+  MyCanvas : TCreateCanvasResult;
 
+  MyReportList : string;
 
+  MySquare2,MySquare1 :  TDrawResult;
 
+  
+begin
 
+  MyCanvas:=CanvasAPI.create('myCanvas', document.body, 480, 320);
 
+  MyreportList:=CanvasAPI.createReportList(myCanvas.id);
 
+  MySquare1:=SquareAPI.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 
+  SquareAPI.reportArea(MySquare1.length, MyReportList);
 
+  SQuareAPI.reportPerimeter(MySquare1.length,MyReportList);
 
+  MySquare2:=SquareAPI.randomSquare(myCanvas.ctx);
 
+end.

+ 32 - 0
demo/modules/basic-units/square.pp
View File 

@@ -0,0 +1,32 @@
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+// filename export object alias
 
+{$linklib ./modules/square.js square}
 
+
 
+unit square;
 
+
 
+interface
 
+
 
+uses js, web;
 
+
 
+Type
 
+  TDrawResult = class external name 'Object' (TJSObject)
 
+    length,x,y : Integer;
 
+    color : string;
 
+  end;
 
+
 
+  TSquareAPI = class external name 'Object' (TJSObject)
 
+    name : string;
 
+    // Default export
 
+    function randomsquare(aCtx : TJSCanvasRenderingContext2D) : TDrawResult; external name 'default';
 
+    function draw(aCtx : TJSCanvasRenderingContext2D; alength,x,y : Integer; color : string) : TDrawResult;
 
+    procedure reportArea(length : Integer; ListID : String);
 
+    procedure reportPerimeter(length : Integer; ListID : String);
 
+  end;
 
+
 
+var
 
+  SquareAPI : TSquareAPI; external name 'square';
 
+
 
+implementation
 
+
 
+end.

+ 16 - 0
demo/modules/basic/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en-US">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Basic JavaScript module example</title>
 
+    <style>
 
+      canvas {
 
+        border: 1px solid black;
 
+      }
 
+    </style>
 
+    <script type="module" src="main.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+  </body>
 
+</html>

+ 49 - 0
demo/modules/basic/main.pp
View File 

@@ -0,0 +1,49 @@
 
+// filename export object alias
 
+{$linklib ./modules/canvas.js canvas}
 
+{$linklib ./modules/square.js square}
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+uses js, web;
 
+
 
+type
 
+  TCreateCanvasResult = class external name 'Object' (TJSObject)
 
+     ctx: TJSCanvasRenderingContext2D;
 
+     id : string;    
+  end;
 
+  
+  TCanvasAPI = class external name 'Object' (TJSObject)
 
+    function create (aID : String; AParent : TJSElement; aWidth,aHeight : Integer) : TCreateCanvasResult;
 
+    function createReportList(aWrapperID : String) : String;  
+  end;
 
+
 
+  TDrawResult = class external name 'Object' (TJSObject)
 
+    length,x,y : Integer;
 
+    color : string;
 
+  end;
 
+
 
+  TSquareAPI = class external name 'Object' (TJSObject)
 
+    name : string;
 
+    // Default export
 
+    function randomsquare(aCtx : TJSCanvasRenderingContext2D) : TDrawResult; external name 'default';
 
+    function draw(aCtx : TJSCanvasRenderingContext2D; alength,x,y : Integer; color : string) : TDrawResult;
 
+    procedure reportArea(length : Integer; ListID : String);
 
+    procedure reportPerimeter(length : Integer; ListID : String);
 
+  end;
 
+
 
+var
 
+  CanvasAPI : TCanvasAPI; external name 'canvas';
 
+  SquareAPI : TSquareAPI; external name 'square';
 
+  
+Var
 
+  MyCanvas : TCreateCanvasResult;
 
+  MyReportList : string;
 
+  MySquare2,MySquare1 :  TDrawResult;
 
+  
+begin
 
+  MyCanvas:=CanvasAPI.create('myCanvas', document.body, 480, 320);
 
+  MyreportList:=CanvasAPI.createReportList(myCanvas.id);
 
+  MySquare1:=SquareAPI.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 
+  SquareAPI.reportArea(MySquare1.length, MyReportList);
 
+  SQuareAPI.reportPerimeter(MySquare1.length,MyReportList);
 
+  MySquare2:=SquareAPI.randomSquare(myCanvas.ctx);
 
+end.

+ 22 - 0
demo/modules/flat-units/canvas.pp
View File 

@@ -0,0 +1,22 @@
 
+{$linklib ./modules/canvas.js canvas}
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+unit canvas;
 
+
 
+interface
 
+
 
+uses js, web;
 
+
 
+Type
 
+
 
+  TCreateCanvasResult = class external name 'Object' (TJSObject)
 
+     ctx: TJSCanvasRenderingContext2D;
 
+     id : string;    
+  end;
 
+  
+function create (aID : String; AParent : TJSElement; aWidth,aHeight : Integer) : TCreateCanvasResult; external name 'canvas.create';
 
+function createReportList(aWrapperID : String) : String;  external name 'canvas.createReportList';
 
+
 
+implementation
 
+
 
+end.

+ 16 - 0
demo/modules/flat-units/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en-US">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Basic Pas2JS JavaScript module example - flat API</title>
 
+    <style>
 
+      canvas {
 
+        border: 1px solid black;
 
+      }
 
+    </style>
 
+    <script type="module" src="main.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+  </body>
 
+</html>

+ 16 - 0
demo/modules/flat-units/main.pp
View File 

@@ -0,0 +1,16 @@
 
+// filename export object alias
 
+uses web,canvas, square;
 
+  
+Var
 
+  MyCanvas : TCreateCanvasResult;
 
+  MyReportList : string;
 
+  MySquare2,MySquare1 :  TDrawResult;
 
+  
+begin
 
+  MyCanvas:=create('myCanvas', document.body, 480, 320);
 
+  MyreportList:=createReportList(myCanvas.id);
 
+  MySquare1:=draw(myCanvas.ctx, 50, 50, 100, 'blue');
 
+  reportArea(MySquare1.length, MyReportList);
 
+  reportPerimeter(MySquare1.length,MyReportList);
 
+  MySquare2:=randomSquare(myCanvas.ctx);
 
+end.

+ 28 - 0
demo/modules/flat-units/square.pp
View File 

@@ -0,0 +1,28 @@
 
+{$linklib ./modules/square.js square}
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+unit square;
 
+
 
+interface
 
+
 
+uses js, web;
 
+
 
+Type
 
+  TDrawResult = class external name 'Object' (TJSObject)
 
+    length,x,y : Integer;
 
+    color : string;
 
+  end;
 
+
 
+// Square API
 
+
 
+var 
+  name : string; external name 'square.name';
 
+  
+function randomsquare(aCtx : TJSCanvasRenderingContext2D) : TDrawResult; external name 'square.default';
 
+function draw(aCtx : TJSCanvasRenderingContext2D; alength,x,y : Integer; color : string) : TDrawResult; external name 'square.draw';
 
+procedure reportArea(length : Integer; ListID : String); external name 'square.reportArea';
 
+procedure reportPerimeter(length : Integer; ListID : String); external name 'square.reportPerimeter';
 
+
 
+implementation
 
+
 
+end.

+ 16 - 0
demo/modules/flat/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en-US">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Basic Pas2JS JavaScript module example - flat API</title>
 
+    <style>
 
+      canvas {
 
+        border: 1px solid black;
 
+      }
 
+    </style>
 
+    <script type="module" src="main.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+  </body>
 
+</html>

+ 47 - 0
demo/modules/flat/main.pp
View File 

@@ -0,0 +1,47 @@
 
+// filename export object alias
 
+{$linklib ./modules/canvas.js canvas}
 
+{$linklib ./modules/square.js square}
 
+{$mode objfpc}
 
+{$modeswitch externalclass}
 
+uses js, web;
 
+
 
+// canvas API
 
+
 
+type
 
+  TCreateCanvasResult = class external name 'Object' (TJSObject)
 
+     ctx: TJSCanvasRenderingContext2D;
 
+     id : string;    
+  end;
 
+  
+function create (aID : String; AParent : TJSElement; aWidth,aHeight : Integer) : TCreateCanvasResult; external name 'canvas.create';
 
+function createReportList(aWrapperID : String) : String;  external name 'canvas.createReportList';
 
+
 
+Type
 
+  TDrawResult = class external name 'Object' (TJSObject)
 
+    length,x,y : Integer;
 
+    color : string;
 
+  end;
 
+
 
+// Square API
 
+
 
+var 
+  name : string; external name 'square.name';
 
+  
+function randomsquare(aCtx : TJSCanvasRenderingContext2D) : TDrawResult; external name 'square.default';
 
+function draw(aCtx : TJSCanvasRenderingContext2D; alength,x,y : Integer; color : string) : TDrawResult; external name 'square.draw';
 
+procedure reportArea(length : Integer; ListID : String); external name 'square.reportArea';
 
+procedure reportPerimeter(length : Integer; ListID : String); external name 'square.reportPerimeter';
 
+  
+Var
 
+  MyCanvas : TCreateCanvasResult;
 
+  MyReportList : string;
 
+  MySquare2,MySquare1 :  TDrawResult;
 
+  
+begin
 
+  MyCanvas:=create('myCanvas', document.body, 480, 320);
 
+  MyreportList:=createReportList(myCanvas.id);
 
+  MySquare1:=draw(myCanvas.ctx, 50, 50, 100, 'blue');
 
+  reportArea(MySquare1.length, MyReportList);
 
+  reportPerimeter(MySquare1.length,MyReportList);
 
+  MySquare2:=randomSquare(myCanvas.ctx);
 
+end.