Difference between revisions of "WebAssembly/Compiler"

From Lazarus wiki
m (Using the compiler)
(Using the compiler)
 
(8 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
Get the sources:
 
Get the sources:
  
  git clone https://github.com/skalogryz/freepascal fpc-wasm
+
git clone https://github.com/skalogryz/freepascal fpc-wasm
 
   
 
   
 
switch to correct branch:
 
switch to correct branch:
  cd fpc-wasm
+
cd fpc-wasm
  git checkout webasm
+
git checkout webasm
  
 
compile:
 
compile:
  cd compiler
+
cd compiler
 
    
 
    
 
====Using Lazarus====
 
====Using Lazarus====
  open ppcwasm.lpi
+
open ppcwasm.lpi
 
hit the "compile" button.
 
hit the "compile" button.
  
 
=====Using command-line=====
 
=====Using command-line=====
  fpc -dnoopt -dwasm -Fiwasm -Fuwasm -Fusystems -S2 pp.pas  
+
fpc -dnoopt -dwasm -Fiwasm -Fuwasm -Fusystems -S2 pp.pas  
  
 
the compiler can be renamed
 
the compiler can be renamed
  mv pp ppwasm
+
mv pp ppwasm
 
or, on windows:
 
or, on windows:
  mv pp.exe ppwasm.exe
+
mv pp.exe ppwasm.exe
  
 
=== Using the compiler ===
 
=== Using the compiler ===
Line 31: Line 31:
 
[https://github.com/skalogryz/wasm-demo wasm-demo]
 
[https://github.com/skalogryz/wasm-demo wasm-demo]
  
You'll also need the wasm tools:
+
You'll also need the wasm bin tools:
  
[https://github.com/WebAssembly/wabt/releases wasm tools]
+
[https://github.com/WebAssembly/wabt/releases wasm bin tools]
 +
 
 +
Extract the binaries and put them somewhere in your PATH.
 +
 
 +
You'll also need the wasmtool:
 +
 
 +
[https://github.com/skalogryz/wasmbin wasmtool]
 +
 
 +
* Compile wasmtool.lpi
 +
 
 +
Put wasmtool somewhere in your PATH
 +
 
 +
And finally you need ''wasm-ld'' (don't confuse it with ''wasmld'').
 +
* Download the [http://releases.llvm.org/download.html llvm-9 release], and put the '''bin/ldd''' as '''wasmld''' in your PATH.
 +
 
 +
Hint: If your fpc.cfg has
 +
<pre>
 +
#IFDEF FPC_CROSSCOMPILING
 +
#IFDEF NEEDCROSSBINUTILS
 +
  -XP$FPCTARGET-
 +
#ENDIF
 +
#ENDIF
 +
</pre>
 +
 
 +
Enclose it in '''#IFNDEF CPUWASM''' :
 +
<pre>
 +
#IFDEF FPC_CROSSCOMPILING
 +
#IFDEF NEEDCROSSBINUTILS
 +
#ifndef cpuwasm
 +
  -XP$FPCTARGET-
 +
#endif
 +
#ENDIF
 +
#ENDIF
 +
</pre>
 +
 
 +
Otherwise, you have to create symlinks wasm-wasm-wasmld to wasmld, and wasm-wasm-wasmtool to wasmtool.
  
Extract the binaries and put them somewhere in your path.
 
 
==wasm-demo==
 
==wasm-demo==
Wasm-demo (https://github.com/skalogryz/wasm-demo) is a Pascal WebAssembly demo project, ported Google's C WebAssembly example (https://codelabs.developers.google.com/codelabs/web-assembly-intro)
+
Wasm-demo is a Pascal WebAssembly demo project, ported Google's C WebAssembly example (https://codelabs.developers.google.com/codelabs/web-assembly-intro)
 +
 
 +
You follow these steps in order to get the demo project working:
 +
 
 +
1. Get the project sources: https://github.com/skalogryz/wasm-demo
 +
 
 +
===Using in webassembly.studio===
 +
2. Run the wasm compiler against lyff.pas, but request the assembler file to be kept
 +
  pp -a lyff.pas
 +
Webassembly.studio accepts the assembler file and would compile it on the server side.
 +
 
 +
3. open up  https://webassembly.studio and select "Create empty Wat Project". The project will consist of:
 +
:main.html
 +
:main.js
 +
:main.wat
 +
All files of the project can be edited through the web interface.
 +
 
 +
4. Copy and paste the contents of the following files:
 +
: (compiled) lyff.wat to main.wat.
 +
: wasm-demo\webassembly.studio\main.html to main.html
 +
: wasm-demo\webassembly.studio\main.js to main.js
 +
 
 +
Note: every time you copy and paste, don't forget to press "SAVE" button (on the right side of the web interface)
 +
 
 +
5. once all files are update, hit "Build and Run"
  
 
==See Also==
 
==See Also==
 
*[[WebAssembly]]
 
*[[WebAssembly]]
 
[[Category:WebAssembly]]
 
[[Category:WebAssembly]]

Latest revision as of 23:02, 28 November 2019

Instructions

Compiling the compiler

Get the sources:

git clone https://github.com/skalogryz/freepascal fpc-wasm

switch to correct branch:

cd fpc-wasm
git checkout webasm

compile:

cd compiler
 

Using Lazarus

open ppcwasm.lpi

hit the "compile" button.

Using command-line
fpc -dnoopt -dwasm -Fiwasm -Fuwasm -Fusystems -S2 pp.pas 

the compiler can be renamed

mv pp ppwasm

or, on windows:

mv pp.exe ppwasm.exe

Using the compiler

You need a system.pas unit. It can be found here:

wasm-demo

You'll also need the wasm bin tools:

wasm bin tools

Extract the binaries and put them somewhere in your PATH.

You'll also need the wasmtool:

wasmtool

  • Compile wasmtool.lpi

Put wasmtool somewhere in your PATH

And finally you need wasm-ld (don't confuse it with wasmld).

  • Download the llvm-9 release, and put the bin/ldd as wasmld in your PATH.

Hint: If your fpc.cfg has

#IFDEF FPC_CROSSCOMPILING
#IFDEF NEEDCROSSBINUTILS
  -XP$FPCTARGET-
#ENDIF
#ENDIF

Enclose it in #IFNDEF CPUWASM :

#IFDEF FPC_CROSSCOMPILING
#IFDEF NEEDCROSSBINUTILS
#ifndef cpuwasm
  -XP$FPCTARGET-
#endif
#ENDIF
#ENDIF

Otherwise, you have to create symlinks wasm-wasm-wasmld to wasmld, and wasm-wasm-wasmtool to wasmtool.

wasm-demo

Wasm-demo is a Pascal WebAssembly demo project, ported Google's C WebAssembly example (https://codelabs.developers.google.com/codelabs/web-assembly-intro)

You follow these steps in order to get the demo project working:

1. Get the project sources: https://github.com/skalogryz/wasm-demo

Using in webassembly.studio

2. Run the wasm compiler against lyff.pas, but request the assembler file to be kept

 pp -a lyff.pas

Webassembly.studio accepts the assembler file and would compile it on the server side.

3. open up https://webassembly.studio and select "Create empty Wat Project". The project will consist of:

main.html
main.js
main.wat

All files of the project can be edited through the web interface.

4. Copy and paste the contents of the following files:

(compiled) lyff.wat to main.wat.
wasm-demo\webassembly.studio\main.html to main.html
wasm-demo\webassembly.studio\main.js to main.js

Note: every time you copy and paste, don't forget to press "SAVE" button (on the right side of the web interface)

5. once all files are update, hit "Build and Run"

See Also