Nous avons franchi une étape importante pour faire fonctionner n'importe quel logiciel avec WebAssembly. Grâce à la dernière version de Wasmer (4.4) et au Wasmer JS SDK (0.8.0), vous pouvez maintenant exécuter clang partout où Wasmer fonctionne !
Cela permet de compiler des programmes C depuis pratiquement n'importe où. Y compris Javascript et votre navigateur préféré ! (nous avons testé Chrome, Safari et Firefox et tout fonctionne comme un charme).
Pour ceux qui souhaitent le voir à l'œuvre, rendez-vous sur le site wasmer.sh pour essayer une démo en direct (attention : il faut télécharger 100 Mo) :
1
2
3
| # NOTE: this will download the clang package (100Mb), so it might take a while...
wasmer run clang/clang example.c -o example.wasm
wasmer run example.wasm |
Note : nous avons essayé d'exécuter clang il y a quelques années, mais à cause des limitations de WASI, nous n'avons pas pu appeler
posix_spawn, ce qui a limité l'utilisation de clang dans le navigateur, Firefox et Safari n'étaient pas supportés à l'époque, mais le sont maintenant.
Pourquoi est-il utile d'utiliser
clang avec Wasmer, quels sont les cas d'utilisation possibles ?
- Vous pouvez compiler du code C en WebAssembly facilement en utilisant l'interface de programmation Wasmer : aucune chaîne d'outils ou installation complexe n'est nécessaire, installez Wasmer et vous êtes prêt à partir !
- WASIX est maintenant auto-hébergé, ce qui signifie qu'il peut se compiler lui-même et compiler n'importe quel programme C.
- Vous pouvez compiler des projets C directement à partir de JavaScript !
- Les IDE en ligne pouraient commencer à adopter le SDK pour permettre à leurs utilisateurs de compiler et d'exécuter des programmes C dans le navigateur.
- Des constructions reproductibles partout (en utilisant la même version de Wasmer)
Exécuter Clang dans le navigateur en utilisant le runtime WebAssembly
Créez un fichier
donut.c avec le contenu suivant (exemple tiré de l'excellent Donut Math) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| #include <stdio.h>
#include <string.h>
k;double sin()
,cos();main(){float A=
0,B=0,i,j,z[1760];char b[
1760];printf("\x1b[2J");for(;;
){memset(b,32,1760);memset(z,0,7040)
;for(j=0;6.28>j;j+=0.07)for(i=0;6.28
>i;i+=0.02){float c=sin(i),d=cos(j),e=
sin(A),f=sin(j),g=cos(A),h=d+2,D=1/(c*
h*e+f*g+5),l=cos (i),m=cos(B),n=s\
in(B),t=c*h*g-f* e;int x=40+30*D*
(l*h*m-t*n),y= 12+15*D*(l*h*n
+t*m),o=x+80*y, N=8*((f*e-c*d*g
)*m-c*d*e-f*g-l *d*n);if(22>y&&
y>0&&x>0&&80>x&&D>z[o]){z[o]=D;;;b[o]=
".,-~:;=!*#$@"[N>0?N:0];}}/*#****!!-*/
printf("\x1b[H");for(k=0;1761>k;k++)
putchar(k%80?b[k]:10);A+=0.04;B+=
0.02;}}/*****####*******!!=;:~
~::==!!!**********!!!==::-
.,~~;;;========;;;:~-.
..,--------,*/ |
Nous pouvons exécuter clang avec Wasmer et le compiler pour WASI et WASIX (assurez-vous d'avoir installé Wasmer localement !):
1
2
| $ wasmer run clang/clang --dir=. -- -Wno-implicit-int donut.c -o donut.wasm
$ wasmer run donut.wasm |
Pour exécuter clang sur votre navigateur, vous pouvez essayer ce qui suit sur wasmer.sh (il a ajouté
donut.c au répertoire
/home pour qu'il soit plus facile à essayer) :
1
2
| wasmer run clang/clang -Wno-implicit-int donut.c -o donut.wasm
wasmer run /home/donut.wasm |
La bonne nouvelle est que le paquetage clang peut compiler, non seulement l'exemple donut c, mais aussi tous les exemples compliqués de WASIX.
Et plus important encore... cela fonctionne parfaitement dans le navigateur ! (et aussi via le Wasmer Javascript SDK).
Note : le paquet clang/clang pèse actuellement environ 100Mo non compressé (car il nécessite les binaires clang + les bibliothèques système). Nous travaillons à réduire la taille du paquet et à le proposer en format compressé. Idéalement, il vous suffira de télécharger ~30Mo pour utiliser clang avec Wasmer : soit dans votre shell local, soit dans votre navigateur, soit dans votre projet Javascript !
Utilisation du SDK Javascript
Voulez-vous utiliser clang dans votre projet Javascript ? Grâce à notre nouveau SDK Wasmer JS, vous pouvez le faire facilement, à la fois dans le navigateur et dans Node.js/Bun etc :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import {
init,
Wasmer,
Directory
} from "https://unpkg.com/@wasmer/sdk@latest/dist/index.mjs";
await init();
const clang = await Wasmer.fromRegistry("clang/clang");
const project = new Directory();
await project.writeFile("example.c",
`#include<stdio.h>
int main() {
printf("Hello World");
return 0;
}
`);
let instance = await clang.entrypoint.run({
args: ["/project/example.c", "-o", "/project/example.wasm"],
mount: { "/project": project },
});
const output = await instance.wait();
if (!output.ok) {
throw new Error(`Clang failed. Exit: ${output.code}:`);
}
// The generated wasm file from clang
let wasm = await project.readFile("example.wasm");
const example = await Wasmer.fromFile(wasm);
const result = await example.entrypoint.run();
const outputExample = await result.wait();
// This should be "Hello World"
console.log(outputExample.stdout); |
Vous pouvez trouver un fichier index.html fonctionnel exécutant clang :
https://github.com/wasmerio/wasmer-j...cdn/index.html
Une dernière chose !
Wasmer's clang peut même optimiser le fichier pour vous automatiquement en utilisant
wasm-opt sous le capot (Clang détecte automatiquement si
wasm-opt est utilisé, et il sera automatiquement appelé lors de l'optimisation du fichier).
Imaginez que vous puissiez utiliser Emscripten sans avoir besoin d'installer sa chaîne d'outils - ou mieux encore, imaginez que vous puissiez exécuter Emscripten dans le navigateur. Nous avons rendu cela possible grâce à l'écosystème WASIX 🎉.
Prochaines étapes
Nous sommes incroyablement excités par cette étape, car elle ouvre la voie à de nombreuses fonctionnalités à venir dont nous allons avoir besoin dans Wasmer et Wasmer Edge :
- Compilation de bibliothèques Python natives directement à partir de WASIX. Imaginez que PIP puisse compiler des choses dans Wasmer lors de l'installation, par exemple :
wasmer run python --entrypoint pip -- install numpy # This compiles numpy to WASIX, all within Wasmer processes
- Utiliser py2wasm avec un compilateur intégré
- Compiler Static Hermes vers WASIX, afin de pouvoir générer des fichiers Wasm natifs à partir de JS.
- Nouveaux outils (tout projet dépendant de LLVM peut maintenant être facilement compilé en WebAssembly !)
C'est le début d'un voyage impressionnant, nous sommes impatients de voir ce que vous allez créer.
Exécuter Clang dans le navigateur en utilisant le runtime WebAssembly, d'après Syrus Akbary
Pensez-vous que cette méthode est crédible ou pertinente ?
Répondre avec citation
Partager